feat: getUserValues via gRPC

Author: autowp

package-lock.json

@@ -1,7 +1,6 @@
 import {Injectable} from '@angular/core';
 import {
   AttrAttribute,
-  AttrAttributeID,
   AttrAttributesRequest,
   AttrAttributeType,
   AttrListOptionsRequest,
@@ -11,9 +10,9 @@ import {
 import {AttrsClient} from '@grpc/spec.pbsc';
 import {Empty} from '@ngx-grpc/well-known-types';
 import {APIPaginator, APIService} from '@services/api.service';
-import {APIItem} from '@services/item';
-import {Observable} from 'rxjs';
-import {map, shareReplay} from 'rxjs/operators';
+import {getAttrsTranslation} from '@utils/translations';
+import {Observable, of} from 'rxjs';
+import {map, shareReplay, switchMap} from 'rxjs/operators';
 
 export interface APIAttrListOption {
   childs?: APIAttrListOption[];
@@ -46,34 +45,7 @@ export interface APIAttrConflictsGetResponse {
   paginator: APIPaginator;
 }
 
-export interface APIAttrUserValuesOptions {
-  fields?: string;
-  item_id: number;
-  limit?: number;
-  page?: number;
-  user_id?: number;
-  zone_id?: number;
-}
-
-export type APIAttrAttributeValue = number | string | string[];
-
-export interface APIAttrUserValue {
-  attribute_id: number;
-  empty: boolean;
-  item: APIItem | null;
-  item_id: number;
-  path: null | string[];
-  unit: APIAttrUnit | null;
-  update_date: null | string;
-  user_id: string;
-  value: APIAttrAttributeValue | null;
-  value_text: null | string;
-}
-
-export interface APIAttrUserValueGetResponse {
-  items: APIAttrUserValue[];
-  paginator: APIPaginator;
-}
+export type APIAttrAttributeValue = boolean | number | string | string[];
 
 export interface APIAttrAttribute {
   childs?: APIAttrAttribute[];
@@ -112,6 +84,11 @@ function toTree(items: AttrAttribute[], parentID: string): AttrAttributeTreeItem
   providedIn: 'root',
 })
 export class APIAttrsService {
+  private readonly attrs$ = this.attrsClient.getAttributes(new AttrAttributesRequest()).pipe(
+    map((response) => response.items),
+    shareReplay(1),
+  );
+
   public readonly attributeTypes$: Observable<AttrAttributeType[]> = this.attrsClient
     .getAttributeTypes(new Empty())
     .pipe(
@@ -142,40 +119,8 @@ export class APIAttrsService {
     );
   }
 
-  public getAttribute$(id: string): Observable<AttrAttribute> {
-    return this.attrsClient.getAttribute(new AttrAttributeID({id}));
-  }
-
-  public getUserValues$(options: APIAttrUserValuesOptions): Observable<APIAttrUserValueGetResponse> {
-    const params: {[param: string]: string} = {};
-
-    if (options.fields) {
-      params.fields = options.fields;
-    }
-
-    if (options.item_id) {
-      params.item_id = options.item_id.toString();
-    }
-
-    if (options.zone_id) {
-      params.zone_id = options.zone_id.toString();
-    }
-
-    if (options.user_id) {
-      params.user_id = options.user_id.toString();
-    }
-
-    if (options.page) {
-      params.page = options.page.toString();
-    }
-
-    if (options.limit) {
-      params.limit = options.limit.toString();
-    }
-
-    return this.api.request<APIAttrUserValueGetResponse>('GET', 'attr/user-value', {
-      params,
-    });
+  public getAttribute$(id: string): Observable<AttrAttribute | undefined> {
+    return this.attrs$.pipe(map((attrs) => attrs?.find((attr) => attr.id === id)));
   }
 
   public getAttributes$(zoneID: null | string, parentID: null | string): Observable<AttrAttributeTreeItem[]> {
@@ -209,4 +154,18 @@ export class APIAttrsService {
   public getListOptions$(attributeID: string | undefined): Observable<AttrListOptionsResponse> {
     return this.attrsClient.getListOptions(new AttrListOptionsRequest({attributeId: attributeID}));
   }
+
+  public getPath$(id: string): Observable<string[]> {
+    return this.getAttribute$(id).pipe(
+      switchMap((attr) => {
+        if (!attr) {
+          return of([]);
+        }
+
+        return this.getPath$(attr.parentId).pipe(
+          map((parentPath) => parentPath.concat(getAttrsTranslation(attr.name))),
+        );
+      }),
+    );
+  }
 }

src/app/api/attrs/attrs.service.ts

@@ -54,49 +54,48 @@ <h1 i18n id="header">History</h1>
       </tr>
     </thead>
     @if (items$ | async; as items) {
-      @for (item of items.items; track item) {
+      @for (row of items.items; track row.userValue) {
         <tr>
           <td>
-            @if (item.update_date) {
-              <p [textContent]="item.update_date | timeAgo" [ngbTooltip]="item.update_date | date: 'medium'"></p>
+            @if (row.userValue.updateDate?.toDate(); as date) {
+              <p [textContent]="date | timeAgo" [ngbTooltip]="date | date: 'medium'"></p>
             }
           </td>
           <td>
-            @if (item.user$ | async; as user) {
+            @if (row.user$ | async; as user) {
               <app-user [user]="user"></app-user>
             }
           </td>
           <td>
-            @if (isModer$ | async) {
-              <a [routerLink]="['/moder/items/item', item.item_id]" [innerHTML]="item.item.name_html"></a>
-            } @else {
-              <span [innerHTML]="item.item.name_html"></span>
+            @if (row.item$ | async; as item) {
+              @if (isModer$ | async) {
+                <a [routerLink]="['/moder/items/item', row.userValue.itemId]" [innerHTML]="item.nameHtml"></a>
+              } @else {
+                <span [innerHTML]="item.nameHtml"></span>
+              }
             }
           </td>
-          <td class="attribute">
-            @for (node of item.path; track node; let i = $index) {
-              <span [textContent]="getAttrsTranslation(node)"></span>
-              @if (!i) {
-                <span> / </span>
+          <td class="attribute text-center">
+            @if (row.path$ | async; as path) {
+              @for (node of path; track node; let last = $last) {
+                <span>{{ node }}</span>
+                @if (!last) {
+                  <span> / </span>
+                }
               }
             }
           </td>
           <td style="text-align: center">
-            {{ item.value_text }}
-            @if (item.unit) {
-              <span class="unit" [textContent]="getUnitAbbrTranslation(item.unit.id + '')"></span>
+            {{ row.userValue.valueText }}
+            @if (row.unitAbbr$ | async; as unitAbbr) {
+              <span class="unit">{{ unitAbbr }}</span>
             }
           </td>
           <td class="link">
-            <a [routerLink]="['/cars/car-specifications-editor/item_id', item.item_id]" i18n>to editor</a>
+            <a [routerLink]="['/cars/car-specifications-editor/item_id', row.userValue.itemId]" i18n>to editor</a>
           </td>
         </tr>
       }
     }
   </table>
 </div>
-@if (items$ | async; as data) {
-  <app-paginator [data]="data.paginator"></app-paginator>
-} @else {
-  <div class="spinner-border" role="status"><span class="visually-hidden" i18n>Loading…</span></div>
-}

src/app/cars/attrs-change-log/attrs-change-log.component.html

@@ -8,8 +8,6 @@
   }
 
   td.attribute {
-      text-align: center;
-
       span {
           white-space: nowrap;
       }

src/app/cars/attrs-change-log/attrs-change-log.component.scss

@@ -1,76 +1,89 @@
-import {Component, OnDestroy, OnInit} from '@angular/core';
+import {Component, inject, OnDestroy, OnInit} from '@angular/core';
 import {ActivatedRoute, Router} from '@angular/router';
-import {APIUser, APIUsersRequest} from '@grpc/spec.pb';
-import {UsersClient} from '@grpc/spec.pbsc';
+import {
+  APIItem,
+  APIUser,
+  APIUsersRequest,
+  AttrUserValue,
+  AttrUserValuesFields,
+  AttrUserValuesRequest,
+  ItemFields,
+  ItemRequest,
+} from '@grpc/spec.pb';
+import {AttrsClient, ItemsClient, UsersClient} from '@grpc/spec.pbsc';
 import {NgbTypeaheadSelectItemEvent} from '@ng-bootstrap/ng-bootstrap';
 import {ACLService, Privilege, Resource} from '@services/acl.service';
-import {APIPaginator} from '@services/api.service';
-import {APIItem} from '@services/item';
+import {LanguageService} from '@services/language';
 import {PageEnvService} from '@services/page-env.service';
 import {UserService} from '@services/user';
-import {getAttrsTranslation, getUnitAbbrTranslation} from '@utils/translations';
+import {getUnitAbbrTranslation} from '@utils/translations';
 import {combineLatest, EMPTY, Observable, of, Subscription} from 'rxjs';
 import {catchError, debounceTime, distinctUntilChanged, map, shareReplay, switchMap} from 'rxjs/operators';
 
-import {APIAttrAttributeValue, APIAttrsService, APIAttrUnit} from '../../api/attrs/attrs.service';
+import {APIAttrsService} from '../../api/attrs/attrs.service';
 import {ToastsService} from '../../toasts/toasts.service';
 
+interface AttrUserValueListItem {
+  item$: Observable<APIItem | null>;
+  path$: Observable<string[]>;
+  unitAbbr$: Observable<null | string | undefined>;
+  user$: Observable<APIUser | null>;
+  userValue: AttrUserValue;
+}
+
 @Component({
   selector: 'app-cars-attrs-change-log',
   styleUrls: ['./attrs-change-log.component.scss'],
   templateUrl: './attrs-change-log.component.html',
 })
 export class CarsAttrsChangeLogComponent implements OnInit, OnDestroy {
+  private readonly attrsClient = inject(AttrsClient);
+  private readonly languageService = inject(LanguageService);
+  private readonly itemsClient = inject(ItemsClient);
+  private readonly attrsService = inject(APIAttrsService);
+
+  private readonly itemsCache = new Map<string, Observable<APIItem>>();
+
   private querySub?: Subscription;
 
   protected readonly isModer$ = this.acl.isAllowed$(Resource.GLOBAL, Privilege.MODERATE);
 
-  protected readonly userID$: Observable<number> = this.route.queryParamMap.pipe(
-    map((params) => parseInt(params.get('user_id') || '', 10)),
-    map((userID) => (userID ? userID : 0)),
+  protected readonly userID$: Observable<string> = this.route.queryParamMap.pipe(
+    map((params) => params.get('user_id') || ''),
     distinctUntilChanged(),
     debounceTime(10),
   );
 
   protected readonly itemID$ = this.route.queryParamMap.pipe(
-    map((params) => parseInt(params.get('item_id') || '', 10)),
-    distinctUntilChanged(),
-    debounceTime(10),
-  );
-
-  protected readonly page$ = this.route.queryParamMap.pipe(
-    map((params) => parseInt(params.get('page') || '', 10)),
+    map((params) => params.get('item_id') || ''),
     distinctUntilChanged(),
     debounceTime(10),
   );
 
   protected readonly items$: Observable<{
-    items: {
-      attribute_id: number;
-      empty: boolean;
-      item: APIItem | null;
-      item_id: number;
-      path: null | string[];
-      unit: APIAttrUnit | null;
-      update_date: null | string;
-      user$: Observable<APIUser | null>;
-      user_id: string;
-      value: APIAttrAttributeValue | null;
-      value_text: null | string;
-    }[];
-    paginator: APIPaginator;
-  }> = combineLatest([this.userID$, this.itemID$, this.page$]).pipe(
-    switchMap(([userID, itemID, page]) =>
-      this.attrService.getUserValues$({
-        fields: 'item.name_html,path,unit,value_text',
-        item_id: itemID,
-        page: page,
-        user_id: userID ? userID : undefined,
-      }),
+    items: AttrUserValueListItem[];
+  }> = combineLatest([this.userID$, this.itemID$]).pipe(
+    switchMap(([userID, itemID]) =>
+      this.attrsClient.getUserValues(
+        new AttrUserValuesRequest({
+          fields: new AttrUserValuesFields({valueText: true}),
+          itemId: itemID,
+          language: this.languageService.language,
+          userId: userID ? userID : undefined,
+        }),
+      ),
     ),
     map((response) => ({
-      items: response.items.map((item) => ({...item, user$: this.userService.getUser$(item.user_id)})),
-      paginator: response.paginator,
+      items: (response.items || []).map((userValue) => {
+        const attr$ = this.attrsService.getAttribute$(userValue.attributeId);
+        return {
+          item$: this.getItem$(userValue.itemId),
+          path$: this.attrsService.getPath$(userValue.attributeId),
+          unitAbbr$: attr$.pipe(map((attr) => (attr?.unitId ? getUnitAbbrTranslation(attr.unitId) : null))),
+          user$: this.userService.getUser$(userValue.userId),
+          userValue,
+        };
+      }),
     })),
     shareReplay(1),
   );
@@ -114,7 +127,6 @@ export class CarsAttrsChangeLogComponent implements OnInit, OnDestroy {
     );
 
   constructor(
-    private readonly attrService: APIAttrsService,
     private readonly route: ActivatedRoute,
     private readonly router: Router,
     private readonly acl: ACLService,
@@ -124,6 +136,17 @@ export class CarsAttrsChangeLogComponent implements OnInit, OnDestroy {
     private readonly userService: UserService,
   ) {}
 
+  private getItem$(id: string): Observable<APIItem | null> {
+    let o$ = this.itemsCache.get(id);
+    if (!o$) {
+      o$ = this.itemsClient
+        .item(new ItemRequest({fields: new ItemFields({nameHtml: true}), id: id}))
+        .pipe(shareReplay(1));
+      this.itemsCache.set(id, o$);
+    }
+    return o$;
+  }
+
   ngOnInit(): void {
     setTimeout(() => this.pageEnv.set({pageId: 103}), 0);
 
@@ -162,10 +185,4 @@ export class CarsAttrsChangeLogComponent implements OnInit, OnDestroy {
       this.querySub.unsubscribe();
     }
   }
-
-  protected getAttrsTranslation(id: string): string {
-    return getAttrsTranslation(id);
-  }
-
-  protected readonly getUnitAbbrTranslation = getUnitAbbrTranslation;
 }

src/app/cars/attrs-change-log/attrs-change-log.component.ts

@@ -1,6 +1,6 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
-import {FormsModule} from '@angular/forms';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {NgbTooltipModule, NgbTypeaheadModule} from '@ng-bootstrap/ng-bootstrap';
 import {UtilsModule} from '@utils/utils.module';
 
@@ -40,6 +40,7 @@ import {CarsSpecsAdminComponent} from './specs-admin/specs-admin.component';
     NgbTooltipModule,
     UtilsModule,
     ItemModule,
+    ReactiveFormsModule,
   ],
 })
 export class CarsModule {}