feat: set picture item perspective via gRPC

Author: autowp

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

@@ -1,6 +1,15 @@
 import {Component} from '@angular/core';
 import {ActivatedRoute, Router} from '@angular/router';
-import {APIIP, APIUser, DeleteSimilarRequest, ItemFields, ItemRequest, ItemType, PictureIDRequest} from '@grpc/spec.pb';
+import {
+  APIIP,
+  APIUser,
+  DeleteSimilarRequest,
+  ItemFields,
+  ItemRequest,
+  ItemType,
+  PictureIDRequest,
+  SetPictureItemPerspectiveRequest,
+} from '@grpc/spec.pb';
 import {APIItem} from '@grpc/spec.pb';
 import {ItemsClient, PicturesClient} from '@grpc/spec.pbsc';
 import {GrpcStatusEvent} from '@ngx-grpc/common';
@@ -15,6 +24,8 @@ import {BehaviorSubject, EMPTY, Observable, combineLatest, of, throwError} from
 import {catchError, distinctUntilChanged, map, shareReplay, switchMap, tap} from 'rxjs/operators';
 import {sprintf} from 'sprintf-js';
 
+import {ToastsService} from '../../../toasts/toasts.service';
+
 interface LastItemInfo {
   hasItem: boolean;
   item: APIItem | null;
@@ -173,6 +184,7 @@ export class ModerPicturesItemComponent {
     private readonly itemsClient: ItemsClient,
     private readonly userService: UserService,
     private readonly picturesClient: PicturesClient,
+    private readonly toastService: ToastsService,
   ) {
     this.monthOptions = [
       {
@@ -208,8 +220,23 @@ export class ModerPicturesItemComponent {
     }
   }
 
-  protected savePerspective(perspectiveID: null | number, item: APIPictureItem) {
-    this.pictureItemService.setPerspective$(item.picture_id, item.item_id, item.type, perspectiveID).subscribe();
+  protected savePerspective(perspectiveId: null | number, item: APIPictureItem) {
+    this.picturesClient
+      .setPictureItemPerspective(
+        new SetPictureItemPerspectiveRequest({
+          itemId: '' + item.item_id,
+          perspectiveId: perspectiveId || undefined,
+          pictureId: '' + item.picture_id,
+          type: item.type,
+        }),
+      )
+      .pipe(
+        catchError((error: unknown) => {
+          this.toastService.handleError(error);
+          return EMPTY;
+        }),
+      )
+      .subscribe();
   }
 
   protected pictureVoted() {

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

@@ -1,16 +1,25 @@
 import {Component, OnInit} from '@angular/core';
 import {FormControl} from '@angular/forms';
 import {ActivatedRoute, Router} from '@angular/router';
-import {APIItem, ItemFields, ItemType, ListItemsRequest, Pages, PictureItemType} from '@grpc/spec.pb';
-import {ItemsClient} from '@grpc/spec.pbsc';
+import {
+  APIItem,
+  ItemFields,
+  ItemType,
+  ListItemsRequest,
+  Pages,
+  PictureItemType,
+  SetPictureItemPerspectiveRequest,
+} from '@grpc/spec.pb';
+import {ItemsClient, PicturesClient} from '@grpc/spec.pbsc';
 import {APIItemParentGetResponse, ItemParentService} from '@services/item-parent';
 import {LanguageService} from '@services/language';
 import {PageEnvService} from '@services/page-env.service';
 import {PictureItemService} from '@services/picture-item';
-import {Observable, combineLatest, of} from 'rxjs';
-import {debounceTime, distinctUntilChanged, map, shareReplay, startWith, switchMap} from 'rxjs/operators';
+import {EMPTY, Observable, combineLatest, of} from 'rxjs';
+import {catchError, debounceTime, distinctUntilChanged, map, shareReplay, startWith, switchMap} from 'rxjs/operators';
 
 import {chunk} from '../../../../chunk';
+import {ToastsService} from '../../../../toasts/toasts.service';
 
 export interface PictureItemMoveSelection {
   itemId: string;
@@ -330,6 +339,8 @@ export class ModerPicturesItemMoveComponent implements OnInit {
     private readonly pageEnv: PageEnvService,
     private readonly itemsClient: ItemsClient,
     private readonly languageService: LanguageService,
+    private readonly picturesClient: PicturesClient,
+    private readonly toastService: ToastsService,
   ) {}
 
   ngOnInit(): void {
@@ -354,7 +365,18 @@ export class ModerPicturesItemMoveComponent implements OnInit {
               return of(null);
             }
 
-            return this.pictureItemService.setPerspective$(id, +dstItemID, srcType, dstPerspectiveID);
+            return this.picturesClient.setPictureItemPerspective(
+              new SetPictureItemPerspectiveRequest({
+                itemId: dstItemID,
+                perspectiveId: dstPerspectiveID || undefined,
+                pictureId: '' + id,
+                type: srcType,
+              }),
+            );
+          }),
+          catchError((error: unknown) => {
+            this.toastService.handleError(error);
+            return EMPTY;
           }),
         )
         .subscribe(() => {

src/app/picture/picture.component.ts

@@ -6,16 +6,19 @@ import {
   CommentsType,
   CommentsUnSubscribeRequest,
   PicturesViewRequest,
+  SetPictureItemPerspectiveRequest,
 } from '@grpc/spec.pb';
 import {CommentsClient, PicturesClient} from '@grpc/spec.pbsc';
 import {ACLService, Privilege, Resource} from '@services/acl.service';
 import {AuthService} from '@services/auth.service';
 import {APIItem} from '@services/item';
 import {APIPicture, PictureService} from '@services/picture';
-import {APIPictureItem, PictureItemService} from '@services/picture-item';
+import {APIPictureItem} from '@services/picture-item';
 import {UserService} from '@services/user';
-import {BehaviorSubject, Observable, of} from 'rxjs';
-import {map, switchMap} from 'rxjs/operators';
+import {BehaviorSubject, EMPTY, Observable, of} from 'rxjs';
+import {catchError, map, switchMap} from 'rxjs/operators';
+
+import {ToastsService} from '../toasts/toasts.service';
 
 @Component({
   selector: 'app-picture',
@@ -69,16 +72,31 @@ export class PictureComponent {
     private readonly auth: AuthService,
     private readonly pictureService: PictureService,
     private readonly router: Router,
-    private readonly pictureItemService: PictureItemService,
     private readonly commentsGrpc: CommentsClient,
     private readonly picturesClient: PicturesClient,
     private readonly userService: UserService,
+    private readonly toastService: ToastsService,
   ) {
     this.location = location;
   }
 
   protected savePerspective(perspectiveID: null | number, item: APIPictureItem) {
-    this.pictureItemService.setPerspective$(item.picture_id, item.item_id, item.type, perspectiveID).subscribe();
+    this.picturesClient
+      .setPictureItemPerspective(
+        new SetPictureItemPerspectiveRequest({
+          itemId: '' + item.item_id,
+          perspectiveId: perspectiveID || undefined,
+          pictureId: '' + item.picture_id,
+          type: item.type,
+        }),
+      )
+      .pipe(
+        catchError((error: unknown) => {
+          this.toastService.handleError(error);
+          return EMPTY;
+        }),
+      )
+      .subscribe();
   }
 
   protected pictureVoted() {

src/app/services/picture-item.ts

@@ -43,20 +43,6 @@ export interface APIPictureItem {
 export class PictureItemService {
   constructor(private readonly api: APIService) {}
 
-  public setPerspective$(
-    pictureId: number,
-    itemId: number,
-    type: number,
-    perspectiveId: null | number,
-  ): Observable<void> {
-    const url = 'picture-item/' + pictureId + '/' + itemId + '/' + type;
-    return this.api.request<void>('PUT', url, {
-      body: {
-        perspective_id: perspectiveId ? perspectiveId.toString() : null,
-      },
-    });
-  }
-
   public create$(pictureId: number, itemId: string, type: number, data: APIPictureItemPostData): Observable<void> {
     return this.api.request<void>('POST', 'picture-item/' + pictureId + '/' + itemId + '/' + type, {body: data});
   }

src/app/thumbnail/thumbnail/thumbnail.component.ts

@@ -1,14 +1,15 @@
 import {Component, EventEmitter, Input, Output} from '@angular/core';
-import {APIUser, Perspective} from '@grpc/spec.pb';
+import {APIUser, Perspective, SetPictureItemPerspectiveRequest} from '@grpc/spec.pb';
+import {PicturesClient} from '@grpc/spec.pbsc';
 import {ACLService, Privilege, Resource} from '@services/acl.service';
 import {APIPicture} from '@services/picture';
-import {PictureItemService} from '@services/picture-item';
 import {UserService} from '@services/user';
 import {getPerspectiveTranslation} from '@utils/translations';
-import {BehaviorSubject, Observable, of} from 'rxjs';
-import {switchMap} from 'rxjs/operators';
+import {BehaviorSubject, EMPTY, Observable, of} from 'rxjs';
+import {catchError, switchMap} from 'rxjs/operators';
 
 import {APIPerspectiveService} from '../../api/perspective/perspective.service';
+import {ToastsService} from '../../toasts/toasts.service';
 
 interface ThumbnailAPIPicture extends APIPicture {
   selected?: boolean;
@@ -38,19 +39,28 @@ export class ThumbnailComponent {
 
   constructor(
     private readonly perspectiveService: APIPerspectiveService,
-    private readonly pictureItemService: PictureItemService,
     private readonly acl: ACLService,
     private readonly userService: UserService,
+    private readonly picturesClient: PicturesClient,
+    private readonly toastService: ToastsService,
   ) {}
 
   protected savePerspective(picture: ThumbnailAPIPicture) {
     if (picture.perspective_item) {
-      this.pictureItemService
-        .setPerspective$(
-          picture.id,
-          picture.perspective_item.item_id,
-          picture.perspective_item.type,
-          picture.perspective_item.perspective_id,
+      this.picturesClient
+        .setPictureItemPerspective(
+          new SetPictureItemPerspectiveRequest({
+            itemId: '' + picture.perspective_item.item_id,
+            perspectiveId: picture.perspective_item.perspective_id,
+            pictureId: '' + picture.id,
+            type: picture.perspective_item.type,
+          }),
+        )
+        .pipe(
+          catchError((error: unknown) => {
+            this.toastService.handleError(error);
+            return EMPTY;
+          }),
         )
         .subscribe();
     }