#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/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.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,7 +38,8 @@ 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) {
@@ -47,15 +50,17 @@ export class GoogleMapComponent {
       },
     };
 
-    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,98 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  ViewChild,
+} from '@angular/core';
+import { NgForm } from '@angular/forms';
+import {
+  DateAdapter,
+  MAT_DATE_FORMATS,
+  NativeDateAdapter,
+} from '@angular/material/core';
+import {
+  MAT_DATEPICKER_SCROLL_STRATEGY,
+  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,
+    },
+    {
+      provide: DateAdapter,
+      useClass: NativeDateAdapter,
+    },
+    {
+      provide: MAT_DATEPICKER_SCROLL_STRATEGY,
+      useValue: () => {},
+    },
+  ],
+})
+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';

src/src/app/modal/modal.service.ts

@@ -2,6 +2,7 @@ import { ComponentType } from '@angular/cdk/overlay';
 import { Injectable } from '@angular/core';
 import { MatDialog, MatDialogConfig } from '@angular/material/dialog';
 import { Observable } from 'rxjs';
+import { filter, map } from 'rxjs/operators';
 
 import { ModalComponent } from './modal/modal.component';
 import { ModalData } from './models/modal-data';
@@ -10,17 +11,24 @@ import { ModalData } from './models/modal-data';
 export class ModalService {
   constructor(private readonly _modal: MatDialog) {}
 
-  openModal<InnerComponentType>(
+  openModal<InnerComponentType, ResultType>(
     component: ComponentType<InnerComponentType>,
-    title?: string
-  ): Observable<boolean> {
-    const dialogRef = this._modal.open(ModalComponent, <MatDialogConfig>{
+    componentInitializer?: (component: InnerComponentType) => void
+  ): Observable<ResultType> {
+    const dialogRef = this._modal.open<
+      ModalData<InnerComponentType>,
+      InnerComponentType,
+      ResultType
+    >(ModalComponent, <MatDialogConfig>{
       data: <ModalData<InnerComponentType>>{
         component,
-        title,
+        componentInitializer,
       },
     });
 
-    return dialogRef.afterClosed();
+    return dialogRef.afterClosed().pipe(
+      filter((i) => typeof i !== 'undefined'),
+      map((i) => <ResultType>i)
+    );
   }
 }