feat: migrate ClearReplacePicture and SetPicturePoint to gRPC

Author: autowp

src/app/map/map.component.ts

@@ -112,7 +112,7 @@ export class MapComponent implements OnInit {
 
     for (const item of data) {
       if (item.location) {
-        const m = createMarker(item.location.lat, item.location.lng);
+        const m = createMarker(item.location.latitude, item.location.longitude);
 
         const popup = new Popup();
         m.on('click', () => {

src/app/moder/pictures/item/item.component.html

@@ -351,7 +351,7 @@ <h3 i18n *ngIf="picture.replaceable">Replacement</h3>
             <i class="bi bi-arrow-left-right" aria-hidden="true"></i>
             <ng-container i18n>Accept and remove double</ng-container>
           </button>
-          <button class="btn btn-warning" *ngIf="picture.rights.accept" (click)="cancelReplace(picture.id)">
+          <button class="btn btn-warning" *ngIf="picture.rights.accept" (click)="cancelReplace(picture.id + '')">
             <i class="bi bi-x" aria-hidden="true"></i>
             <ng-container i18n>Cancel replacement</ng-container>
           </button>

src/app/moder/pictures/item/item.component.ts

@@ -470,24 +470,18 @@ export class ModerPicturesItemComponent {
       });
   }
 
-  protected cancelReplace(id: number) {
+  protected cancelReplace(id: string) {
     this.replaceLoading = true;
 
-    this.api
-      .request<void>('PUT', 'picture/' + id, {
-        body: {
-          replace_picture_id: '',
-        },
-      })
-      .subscribe({
-        error: () => {
-          this.replaceLoading = false;
-        },
-        next: () => {
-          this.change$.next();
-          this.replaceLoading = false;
-        },
-      });
+    this.picturesClient.clearReplacePicture(new PictureIDRequest({id})).subscribe({
+      error: () => {
+        this.replaceLoading = false;
+      },
+      next: () => {
+        this.change$.next();
+        this.replaceLoading = false;
+      },
+    });
   }
 
   protected acceptReplace(id: number) {

src/app/moder/pictures/item/place/place.component.html

@@ -19,46 +19,53 @@
   <h1 i18n>Location</h1>
 </div>
 
-<form method="post" class="form-horizontal" (ngSubmit)="doSubmit(picture)" *ngIf="picture$ | async as picture">
-  <div class="mb-3 row" *ngIf="map$ | async as map">
-    <label class="col-md-2 col-form-label" i18n>Point</label>
-    <div class="col-md-10 coords">
-      <input
-        type="text"
-        name="lat"
-        [(ngModel)]="lat"
-        maxlength="20"
-        size="20"
-        placeholder="Latitude"
-        i18n-placeholder
-        class="form-control"
-        (input)="coordsChanged(map)"
-      />
-      <input
-        type="text"
-        name="lng"
-        [(ngModel)]="lng"
-        maxlength="20"
-        size="20"
-        placeholder="Longitude"
-        i18n-placeholder
-        class="form-control"
-        (input)="coordsChanged(map)"
-      />
+<ng-container *ngIf="picture$ | async as picture">
+  <form
+    method="post"
+    class="form-horizontal"
+    (ngSubmit)="doSubmit(form, picture)"
+    [formGroup]="form"
+    *ngIf="form$ | async as form"
+  >
+    <div class="mb-3 row">
+      <label class="col-md-2 col-form-label" i18n>Point</label>
+      <div class="col-md-10 coords mb-3">
+        <input
+          type="text"
+          name="lat"
+          [formControl]="form.controls.lat"
+          maxlength="20"
+          size="20"
+          placeholder="Latitude"
+          i18n-placeholder
+          class="form-control"
+        />
+        <input
+          type="text"
+          name="lng"
+          [formControl]="form.controls.lng"
+          maxlength="20"
+          size="20"
+          placeholder="Longitude"
+          i18n-placeholder
+          class="form-control"
+        />
+      </div>
     </div>
     <div
+      *ngIf="map$ | async as map"
       style="height: 500px"
       class="mb-4 w-100"
       leaflet
       [leafletCenter]="map.center"
       [leafletOptions]="map.leafletOptions"
       [leafletLayers]="map.markers"
-      (leafletMapReady)="onMapReady(map, $event)"
+      (leafletMapReady)="onMapReady(map, $event, form)"
     ></div>
-  </div>
-  <div class="mb-3 row">
-    <div class="col-md-10 offset-md-2">
-      <button type="submit" name="submit" class="btn btn-primary" i18n>Submit</button>
+    <div class="mb-3 row">
+      <div class="col-md-10 offset-md-2">
+        <button type="submit" name="submit" class="btn btn-primary" i18n>Submit</button>
+      </div>
     </div>
-  </div>
-</form>
+  </form>
+</ng-container>

src/app/moder/pictures/item/place/place.component.ts

@@ -1,18 +1,32 @@
 import {Component, NgZone, OnInit} from '@angular/core';
+import {FormControl, FormGroup} from '@angular/forms';
 import {ActivatedRoute, Router} from '@angular/router';
-import {APIService} from '@services/api.service';
+import {LatLng as grpcLatLng} from '@grpc/google/type/latlng.pb';
+import {SetPicturePointRequest} from '@grpc/spec.pb';
+import {PicturesClient} from '@grpc/spec.pbsc';
 import {PageEnvService} from '@services/page-env.service';
 import {APIPicture, PictureService} from '@services/picture';
 import {LatLng, LeafletMouseEvent, Map, Marker, TileLayer, icon, latLng, marker, tileLayer} from 'leaflet';
 import {EMPTY} from 'rxjs';
-import {catchError, debounceTime, distinctUntilChanged, map, shareReplay, switchMap} from 'rxjs/operators';
+import {catchError, debounceTime, distinctUntilChanged, map, shareReplay, startWith, switchMap} from 'rxjs/operators';
+
+import {ToastsService} from '../../../../toasts/toasts.service';
 
 interface MapOptions {
   center: LatLng;
   leafletOptions: {center: LatLng; layers: TileLayer[]; zoom: number};
   markers: Marker[];
 }
 
+function normalizeLat(lat: number) {
+  return Math.max(lat, Math.min(lat, 90), -90);
+}
+
+function normalizeLng(lng: number) {
+  lng = ((lng - 180) % 360) + 180;
+  return ((lng + 180) % 360) - 180;
+}
+
 function createMarker(lat: number, lng: number): Marker {
   return marker([lat, lng], {
     icon: icon({
@@ -24,13 +38,20 @@ function createMarker(lat: number, lng: number): Marker {
   });
 }
 
+interface PointForm {
+  lat: FormControl<null | string>;
+  lng: FormControl<null | string>;
+}
+
 @Component({
   selector: 'app-moder-pictures-place',
   templateUrl: './place.component.html',
 })
 export class ModerPicturesItemPlaceComponent implements OnInit {
-  protected lat: number = NaN;
-  protected lng: number = NaN;
+  private readonly form = new FormGroup<PointForm>({
+    lat: new FormControl<string>(''),
+    lng: new FormControl<string>(''),
+  });
 
   protected readonly picture$ = this.route.paramMap.pipe(
     map((params) => parseInt(params.get('id') || '', 10)),
@@ -46,9 +67,26 @@ export class ModerPicturesItemPlaceComponent implements OnInit {
     shareReplay(1),
   );
 
-  protected readonly map$ = this.picture$.pipe(
+  protected readonly form$ = this.picture$.pipe(
     map((picture) => {
-      const center = latLng(55.7423627, 37.6786422);
+      let lat = null,
+        lng = null;
+      if (picture && picture.point && picture.point.lat && picture.point.lng) {
+        lat = picture.point.lat + '';
+        lng = picture.point.lng + '';
+      }
+
+      this.form.setValue({lat, lng});
+
+      return this.form;
+    }),
+    shareReplay(1),
+  );
+
+  protected readonly map$ = this.form$.pipe(
+    switchMap((form) => form.valueChanges.pipe(startWith(form.value))),
+    map((formValues) => {
+      let center = latLng(55.7423627, 37.6786422);
 
       const leafletOptions = {
         center: center,
@@ -60,15 +98,21 @@ export class ModerPicturesItemPlaceComponent implements OnInit {
         zoom: 8,
       };
 
+      let lat = formValues.lat ? parseFloat(formValues.lat) : NaN;
+      let lng = formValues.lng ? parseFloat(formValues.lng) : NaN;
+
       const markers: Marker[] = [];
 
-      if (picture && picture.point) {
-        this.lat = picture.point.lat;
-        this.lng = picture.point.lng;
-        if (picture.point.lat && picture.point.lng) {
-          markers.push(createMarker(picture.point.lat, picture.point.lng));
-          leafletOptions.center = latLng(picture.point.lat, picture.point.lng);
-        }
+      let ll = null;
+      if (!isNaN(lat) && !isNaN(lng)) {
+        lat = normalizeLat(lat);
+        lng = normalizeLng(lng);
+        ll = latLng([lat, lng]);
+      }
+      if (ll) {
+        markers.push(createMarker(ll.lat, ll.lng));
+        center = ll;
+        leafletOptions.center = ll;
       }
 
       return {center, leafletOptions, markers};
@@ -81,7 +125,8 @@ export class ModerPicturesItemPlaceComponent implements OnInit {
     private readonly pictureService: PictureService,
     private readonly pageEnv: PageEnvService,
     private readonly zone: NgZone,
-    private readonly api: APIService,
+    private readonly picturesClient: PicturesClient,
+    private readonly toastService: ToastsService,
   ) {}
 
   ngOnInit(): void {
@@ -95,45 +140,38 @@ export class ModerPicturesItemPlaceComponent implements OnInit {
     );
   }
 
-  protected coordsChanged(mapOptions: MapOptions) {
-    const lat = this.lat;
-    const lng = this.lng;
-
-    const ll = isNaN(lat) || isNaN(lng) ? null : latLng([lat, lng]);
-    if (ll) {
-      if (mapOptions.markers.length) {
-        mapOptions.markers[0].setLatLng(ll);
-      } else {
-        mapOptions.markers = [createMarker(ll.lat, ll.lng)];
-      }
-      mapOptions.center = ll;
-      mapOptions.leafletOptions.center = ll;
-    } else {
-      mapOptions.markers = [];
-    }
-  }
-
-  protected onMapReady(mapOptions: MapOptions, lmap: Map) {
+  protected onMapReady(mapOptions: MapOptions, lmap: Map, form: FormGroup<PointForm>) {
     lmap.on('click', (event: LeafletMouseEvent) => {
       this.zone.run(() => {
         const ll: LatLng = event.latlng;
-        mapOptions.markers = [createMarker(ll.lat, ll.lng)];
-        this.lat = ll.lat;
-        this.lng = ll.lng;
+        const lat = normalizeLat(ll.lat);
+        const lng = normalizeLng(ll.lng);
+        mapOptions.markers = [createMarker(lat, lng)];
+        form.setValue({
+          lat: lat + '',
+          lng: lng + '',
+        });
       });
     });
   }
 
-  protected doSubmit(picture: APIPicture) {
-    this.api
-      .request<void>('PUT', 'picture/' + picture.id, {
-        body: {
-          point: {
-            lat: this.lat,
-            lng: this.lng,
-          },
-        },
-      })
+  protected doSubmit(form: FormGroup<PointForm>, picture: APIPicture) {
+    this.picturesClient
+      .setPicturePoint(
+        new SetPicturePointRequest({
+          pictureId: '' + picture.id,
+          point: new grpcLatLng({
+            latitude: form.controls.lat.value ? parseFloat(form.controls.lat.value) : 0,
+            longitude: form.controls.lng.value ? parseFloat(form.controls.lng.value) : 0,
+          }),
+        }),
+      )
+      .pipe(
+        catchError((response: unknown) => {
+          this.toastService.handleError(response);
+          return EMPTY;
+        }),
+      )
       .subscribe(() => {
         this.router.navigate(['/moder/pictures', picture.id]);
       });