#44 Add marker modal dialog

src/src/app/about/about.component.ts

@@ -1,9 +1,13 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ModalComponentConfig } from 'src/app/modal/models';
 
 @Component({
   selector: 'app-about',
   changeDetection: ChangeDetectionStrategy.OnPush,
   templateUrl: './about.component.html',
   styleUrls: ['./about.component.css'],
 })
-export class AboutComponent {}
+export class AboutComponent implements ModalComponentConfig<boolean> {
+  modalTitle = 'О проекте';
+  modalResult = true;
+}

src/src/app/app.module.ts

@@ -10,6 +10,8 @@ import { ModalModule } from 'src/app/modal';
 
 import { MapsModule } from './main/maps.module';
 import { MatButtonModule } from '@angular/material/button';
+import { MatNativeDateModule } from '@angular/material/core';
+import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatIconModule } from '@angular/material/icon';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
@@ -30,10 +32,12 @@ import { GoogleMapsConfigModule } from 'src/app/google-maps';
     BrowserAnimationsModule,
     MapsModule,
     MatButtonModule,
+    MatDatepickerModule,
     MatIconModule,
     MatFormFieldModule,
     MatInputModule,
     MatMenuModule,
+    MatNativeDateModule,
     ModalModule,
     GoogleMapsConfigModule.forRoot(environment.googleMapApiKey),
   ],

src/src/app/header-panel/header-panel.component.ts

@@ -12,6 +12,6 @@ export class HeaderPanelComponent {
   constructor(private readonly _modal: ModalService) {}
 
   openAboutModal() {
-    this._modal.openModal(AboutComponent, 'О проекте');
+    this._modal.openModal(AboutComponent);
   }
 }

src/src/app/main/components/google-map/google-map.component.html

@@ -1,7 +1,7 @@
 <google-map
   class="map"
   height="100%"
-  (mapClick)="addMarker($event)"
+  (mapClick)="openMarkerModal($event)"
   [options]="options"
   width="100%"
 >

src/src/app/main/components/google-map/google-map.component.ts

@@ -1,6 +1,8 @@
 import { ChangeDetectionStrategy, Component, Inject } from '@angular/core';
 import { ReplaySubject } from 'rxjs';
 import { map, scan, shareReplay, tap } from 'rxjs/operators';
+import { MarkerDialogComponent } from 'src/app/main/components/marker-dialog';
+import { ModalService } from 'src/app/modal';
 
 import { GoogleMapViewConfig } from '../../models/google-map-view-config';
 import { Marker } from '../../models/marker';
@@ -36,26 +38,29 @@ export class GoogleMapComponent {
   constructor(
     @Inject(GoogleMapViewConfigService)
     private readonly _config: GoogleMapViewConfig,
-    private readonly _markerStorage: MarkerStorageService
+    private readonly _markerStorage: MarkerStorageService,
+    private readonly _modal: ModalService
   ) {}
 
-  addMarker(evnt: google.maps.MouseEvent) {
+  openMarkerModal(evnt: google.maps.MouseEvent) {
     const newMarker = <Marker>{
       coordinates: {
         latitude: evnt.latLng.lat(),
         longitude: evnt.latLng.lng(),
       },
     };
 
-    this._markerStorage
-      .createMarker(newMarker)
+    this._modal
+      .openModal<MarkerDialogComponent, Marker>(
+        MarkerDialogComponent,
+        (component) => {
+          component.marker = newMarker;
+        }
+      )
       .pipe(
-        tap((marker) => this._addedMarker$.next(marker)),
-        tap((marker) =>
-          console.log(
-            `Latitude: ${marker.coordinates.latitude}, Longitude: ${marker.coordinates.longitude}`
-          )
-        )
+        tap((result) => {
+          this._addedMarker$.next(result);
+        })
       )
       .subscribe();
   }

src/src/app/main/components/index.ts

@@ -0,0 +1 @@
+export * from './marker-dialog';

src/src/app/main/components/marker-dialog/index.ts

@@ -0,0 +1 @@
+export * from './marker-dialog.component';

src/src/app/main/components/marker-dialog/marker-dialog.component.css

@@ -0,0 +1,31 @@
+:host {
+  display: contents;
+}
+
+.description-form {
+  display: flex;
+  flex-direction: column;
+}
+
+.load-file {
+  display: inline-flex;
+  width: 268px;
+  height: 123px;
+  align-items: center;
+  justify-content: center;
+
+  background: #c4c4c44c;
+  border-radius: 15px;
+}
+
+.load-file-container {
+  text-align: center;
+}
+
+.marker-dialog {
+  display: grid;
+  align-items: center;
+  justify-content: center;
+  grid-column-gap: 226px;
+  grid-template-columns: 1fr 1fr;
+}

src/src/app/main/components/marker-dialog/marker-dialog.component.html

@@ -0,0 +1,86 @@
+<div class="marker-dialog">
+  <form
+    #form="ngForm"
+    class="description-form"
+    [id]="modalFormId"
+    (ngSubmit)="submit()"
+  >
+    <mat-label>Адрес:</mat-label>
+
+    <mat-form-field>
+      <input
+        cdkFocusInitial
+        matInput
+        name="address"
+        [(ngModel)]="address"
+        required
+        type="text"
+      />
+    </mat-form-field>
+
+    <mat-label>Название объекта:</mat-label>
+
+    <mat-form-field>
+      <input matInput name="name" [(ngModel)]="name" required type="text" />
+    </mat-form-field>
+
+    <mat-label>Год снимка:</mat-label>
+
+    <mat-form-field>
+      <input
+        (click)="openDatePicker(datePicker)"
+        [matDatepicker]="datePicker"
+        matInput
+        name="year"
+        [(ngModel)]="year"
+        required
+        type="text"
+      />
+
+      <mat-datepicker-toggle
+        [for]="datePicker"
+        matSuffix
+      ></mat-datepicker-toggle>
+
+      <mat-datepicker
+        #datePicker
+        startView="multi-year"
+        (yearSelected)="yearSelected($event, datePicker)"
+      ></mat-datepicker>
+    </mat-form-field>
+
+    <mat-label>Ссылка не ресурс:</mat-label>
+
+    <mat-form-field>
+      <input matInput name="url" [(ngModel)]="url" type="url" />
+    </mat-form-field>
+
+    <mat-label>Описание к фотографии:</mat-label>
+
+    <mat-form-field>
+      <textarea
+        matInput
+        name="description"
+        [(ngModel)]="description"
+        type="text"
+      ></textarea>
+    </mat-form-field>
+  </form>
+
+  <div class="load-file-container">
+    <p>
+      * Выберите файлы, нажав на кнопку добавления или перетащите их в
+      выделенную область
+    </p>
+
+    <div class="load-file">Перетащите изображение сюда</div>
+
+    <button mat-icon-button>
+      <mat-icon>add_circle</mat-icon>
+    </button>
+
+    <p>
+      <a>Информация о правилах публикации и размерах файла</a>
+    </p>
+  </div>
+</div>

src/src/app/main/components/marker-dialog/marker-dialog.component.ts

@@ -0,0 +1,83 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  ViewChild,
+} from '@angular/core';
+import { NgForm } from '@angular/forms';
+import { MAT_DATE_FORMATS } from '@angular/material/core';
+import { MatDatepicker } from '@angular/material/datepicker';
+import { tap } from 'rxjs/operators';
+import { YEAR_MODE } from 'src/app/main/constants';
+import { Marker } from 'src/app/main/models';
+import { MarkerStorageService } from 'src/app/main/services';
+import { ModalComponentConfig } from 'src/app/modal/models';
+
+@Component({
+  selector: 'app-marker-dialog',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  templateUrl: './marker-dialog.component.html',
+  styleUrls: ['./marker-dialog.component.css'],
+  providers: [
+    {
+      provide: MAT_DATE_FORMATS,
+      useValue: YEAR_MODE,
+    },
+  ],
+})
+export class MarkerDialogComponent implements ModalComponentConfig<Marker> {
+  @ViewChild('form', { static: true })
+  private readonly _form!: NgForm;
+
+  address = '';
+  description = '';
+
+  get formInvalid() {
+    return this._form.invalid;
+  }
+
+  marker!: Marker;
+
+  modalFormId = 'marker-dialog-form';
+  modalResult!: Marker;
+  modalShowSubmitButton = true;
+  modalSubmit = new EventEmitter<void>();
+  modalTitle = 'Добавить метку на карте';
+
+  name = '';
+  url = '';
+  year = new Date();
+
+  constructor(private readonly _markerStorage: MarkerStorageService) {}
+
+  submit() {
+    if (this.formInvalid) return;
+
+    this._markerStorage
+      .createMarker(this.marker)
+      .pipe(
+        tap((marker) => {
+          console.log(
+            `Latitude: ${marker.coordinates.latitude}, Longitude: ${marker.coordinates.longitude}`
+          );
+
+          this.modalResult = marker;
+        })
+      )
+      .subscribe();
+
+    this.modalSubmit.emit();
+  }
+
+  openDatePicker(datepicker: MatDatepicker<Date>) {
+    if (!datepicker.opened) {
+      datepicker.open();
+    }
+  }
+
+  yearSelected(chosenDate: Date, datepicker: MatDatepicker<Date>) {
+    datepicker.close();
+
+    this.year = chosenDate;
+  }
+}

src/src/app/main/constants/index.ts

@@ -0,0 +1 @@
+export * from './year-mode';

src/src/app/main/constants/year-mode.ts

@@ -0,0 +1,7 @@
+export const YEAR_MODE = {
+  display: {
+    dateInput: {
+      year: 'numeric',
+    },
+  },
+};

src/src/app/main/index.ts

@@ -0,0 +1,2 @@
+export * from './main.lazy-loaded.module';
+export * from './maps.module';

src/src/app/main/main.lazy-loaded.module.ts

@@ -1,22 +1,42 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 import { GoogleMapsModule } from '@angular/google-maps';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
 import { RouterModule } from '@angular/router';
 import { AboutComponent } from 'src/app/about';
 import { DateSliderModule } from 'src/app/date-slider';
+import { MarkerDialogComponent } from 'src/app/main/components';
 
 import { GoogleMapComponent } from './components/google-map/google-map.component';
 import { MainComponent } from './main.component';
 import { routes } from './main.routes';
 import { MapsModule } from './maps.module';
 
 @NgModule({
-  declarations: [AboutComponent, MainComponent, GoogleMapComponent],
+  declarations: [
+    AboutComponent,
+    GoogleMapComponent,
+    MainComponent,
+    MarkerDialogComponent,
+  ],
   imports: [
     CommonModule,
+    FormsModule,
     GoogleMapsModule,
     RouterModule.forChild(routes),
     MapsModule,
+    MatButtonModule,
+    MatDatepickerModule,
+    MatDialogModule,
+    MatIconModule,
+    MatInputModule,
+    MatFormFieldModule,
     DateSliderModule,
   ],
 })

src/src/app/main/models/index.ts

@@ -0,0 +1,2 @@
+export * from './google-map-view-config';
+export * from './marker';

src/src/app/main/services/index.ts

@@ -0,0 +1,2 @@
+export * from './google-map-view-config.service';
+export * from './marker-storage.service';