local_fields: fix local fields orders.

* Closes rero/rero-ils#2294. Co-authored-by: Renaud Michotte <renaud.michotte@gmail.com>
rero · Feb 8, 2023 · a5a4af4 · a5a4af4
1 parent 3b3be04
commit a5a4af4
Show file tree

Hide file tree

Showing 3 changed files with 89 additions and 75 deletions.
diff --git a/projects/admin/src/app/api/local-field-api.service.ts b/projects/admin/src/app/api/local-field-api.service.ts
@@ -16,7 +16,8 @@
  */
 
 import { Injectable } from '@angular/core';
-import { RecordService, RecordUiService } from '@rero/ng-core';
+import { Record, RecordService, RecordUiService } from '@rero/ng-core';
+import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 
 @Injectable({
@@ -40,24 +41,18 @@ export class LocalFieldApiService {
    * @param organisationPid - string, pid of organisation
    * @return Observable
    */
-  getByResourceTypeAndResourcePidAndOrganisationId(
-    resourceType: string,
-    resourcePid: string,
-    organisationPid: string
-  ) {
-    const query = [
-      `parent.type:${resourceType}`,
-      `parent.pid:${resourcePid}`,
-      `organisation.pid:${organisationPid}`,
-    ].join(' AND ');
+  getByResourceTypeAndResourcePidAndOrganisationId(resourceType: string, resourcePid: string, organisationPid: string): Observable<any> {
+    const query = `parent.type:${resourceType} AND parent.pid:${resourcePid} AND organisation.pid:${organisationPid}`;
 
-    return this._recordService.getRecords('local_fields', query, 1, 1).pipe(
-      map((result: any) => {
-        return this._recordService.totalHits(result.hits.total) === 0
-          ? {}
-          : result.hits.hits[0];
-      })
-    );
+    return this._recordService
+      .getRecords('local_fields', query, 1, 1)
+      .pipe(
+        map((result: Record) => {
+          return this._recordService.totalHits(result.hits.total) === 0
+            ? {}
+            : result.hits.hits[0];
+        })
+      );
   }
 
   /**

diff --git a/projects/admin/src/app/record/detail-view/local-field/local-field.component.html b/projects/admin/src/app/record/detail-view/local-field/local-field.component.html
@@ -1,6 +1,7 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2020 RERO
+  Copyright (C) 2019-2023 RERO
+  Copyright (C) 2019-2023 UCLouvain
 
   This program is free software: you can redistribute it and/or modify
   it under the terms of the GNU Affero General Public License as published by
@@ -14,22 +15,19 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-<ng-container *ngIf="record$ | async as record">
-  <ng-container *ngIf="record.metadata; else addLocalField">
-    <ng-container *ngFor="let field of record.metadata.fields | keyvalue">
-      <div class="row mb-0 ml-1">
-        <span class="col-2 m-0 font-weight-bold label-title" translate>
-            {{ 'local_' + field.key }}
-        </span>
-        <span class="col-10 m-0">
-          {{ field.value | join:'; ' }}
-        </span>
-      </div>
-    </ng-container>
-    <div class="ml-3 mt-2">
+<ng-container *ngIf="!isLoading">
+  <div class="container-fluid" *ngIf="localFields.length > 0 else addLocalField">
+    <dl class="row">
+      <ng-container *ngFor="let field of localFields">
+        <dt class="col-2 label-title" translate>{{ 'local_' + field.name }}</dt>
+        <dd class="col-10">{{ field.value | join:'; ' }}</dd>
+      </ng-container>
+    </dl>
+
+    <div class="mt-2">
       <button
         *ngIf="recordPermissions && recordPermissions.update.can"
-        [routerLink]="['/records', 'local_fields', 'edit', record.metadata.pid]"
+        [routerLink]="['/records', 'local_fields', 'edit', localFieldRecordPid]"
         [queryParams]="{ type: resourceType, ref: resourcePid }"
         class="btn btn-sm btn-outline-primary ml-1"
         name="edit"
@@ -42,16 +40,16 @@
         *ngIf="recordPermissions && recordPermissions.delete.can"
         class="btn btn-sm btn-outline-danger ml-1"
         title="{{ 'Delete' | translate }}"
-        (click)="delete(record.metadata.pid)"
+        (click)="delete()"
       >
         <i class="fa fa-trash"></i> {{ 'Delete' | translate }}
       </button>
     </div>
-  </ng-container>
+  </div>
 </ng-container>
 
 <ng-template #addLocalField>
-  <div class="d-flex flex-row-reverse">
+  <div class="text-right">
     <a
       [routerLink]="['/records', 'local_fields', 'new']"
       [queryParams]="{ type: resourceType, ref: resourcePid }"

diff --git a/projects/admin/src/app/record/detail-view/local-field/local-field.component.ts b/projects/admin/src/app/record/detail-view/local-field/local-field.component.ts
@@ -1,6 +1,7 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2020 RERO
+ * Copyright (C) 2019-2023 RERO
+ * Copyright (C) 2019-2023 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -17,10 +18,9 @@
 
 import { Component, Input, OnDestroy, OnInit } from '@angular/core';
 import { IPermissions, JoinPipe, PERMISSIONS, UserService } from '@rero/shared';
-import { Observable, of, Subscription } from 'rxjs';
-import { map } from 'rxjs/operators';
-import { LocalFieldApiService } from '../../../api/local-field-api.service';
-import { RecordPermissionService } from '../../../service/record-permission.service';
+import { Subscription } from 'rxjs';
+import { LocalFieldApiService } from '@app/admin/api/local-field-api.service';
+import { RecordPermissionService } from '@app/admin/service/record-permission.service';
 
 @Component({
   selector: 'admin-local-field',
@@ -34,19 +34,24 @@ export class LocalFieldComponent implements OnInit, OnDestroy {
   @Input() resourceType: string;
   /** Resource pid */
   @Input() resourcePid: string;
-  /** Observable on record */
-  record$: Observable<any>;
+
+  /** Pid of the LocalField record */
+  localFieldRecordPid: string;
+  /** local fields */
+  localFields: Array<{name: string, value: Array<string>}> = [];
+  /** isLoading */
+  isLoading = true;
+  /** return all available permissions for current user */
+  permissions: IPermissions = PERMISSIONS;
+  /** recordPermissions */
+  recordPermissions: any;
+
   /** Available resources type for local fields */
-  resourceTypes = {
+  private _resourceTypes = {
     documents: 'doc',
     holdings: 'hold',
     items: 'item'
   };
-  /** recordPermissions */
-  recordPermissions: any;
-  /** return all available permissions for current user */
-  permissions: IPermissions = PERMISSIONS;
-
   /** all component subscription */
   private _subscriptions = new Subscription();
 
@@ -65,44 +70,60 @@ export class LocalFieldComponent implements OnInit, OnDestroy {
 
   /** OnInit hook */
   ngOnInit() {
-    this.record$ = this._localFieldApiService.getByResourceTypeAndResourcePidAndOrganisationId(
-      this._translateType(this.resourceType),
-      this.resourcePid,
-      this._userService.user.currentOrganisation
-    );
-    this.record$.subscribe((record) => {
-      this._subscriptions.add(this._recordPermissionService
-        .getPermission('local_fields', record.metadata.pid)
-        .subscribe((permissions) => this.recordPermissions = permissions)
-      );
-    });
+    this._localFieldApiService
+      .getByResourceTypeAndResourcePidAndOrganisationId(
+        this._translateType(this.resourceType),
+        this.resourcePid,
+        this._userService.user.currentOrganisation
+      )
+      .subscribe((record: any) => {
+        if (record?.metadata) {
+          this.localFieldRecordPid = record.metadata.pid;
+          if (record.metadata?.fields) {
+            const fields = record.metadata.fields;
+            // Sort local fields using numeric part of the field name.
+            const sortKeys = Object.keys(fields).sort((k1, k2) => parseInt(k1.replace(/\D/g, '')) - parseInt(k2.replace(/\D/g, '')));
+            for (const key of sortKeys) {
+              this.localFields.push({name: key, value: fields[key]});
+            }
+          }
+          // Permission loading
+          this._subscriptions.add(this._recordPermissionService
+            .getPermission('local_fields', record.metadata.pid)
+            .subscribe((permissions) => this.recordPermissions = permissions)
+          );
+        }
+        this.isLoading = false;
+      });
   }
 
   /** OnDestroy hook */
   ngOnDestroy() {
     this._subscriptions.unsubscribe()
   }
 
-  /**
-   * Delete
-   */
-  delete(resourcePid: string) {
-    this._localFieldApiService.delete(resourcePid).subscribe((success: any) => {
-      if (success) {
-        this.record$ = of({});
-      }
-    });
+  // PUBLIC FUNCTIONS =========================================================
+  /** Delete the complete LocalField resource. */
+  delete(): void {
+    this._localFieldApiService
+      .delete(this.localFieldRecordPid)
+      .subscribe((success: any) => {
+        if (success) {
+          this.localFields = [];
+        }
+      });
   }
 
+  // PRIVATE FUNCTIONS ========================================================
   /**
    * Translate resource type to symbol
-   * @param typeOfResource - string: type of resource
-   * @return string: resource symbol
+   * @param resourceType - string, name of resource
+   * @return string, resource symbol
    */
-  private _translateType(typeOfResource: string) {
-    if (typeOfResource in this.resourceTypes) {
-      return this.resourceTypes[typeOfResource];
+  private _translateType(resourceType: string): string {
+    if (resourceType in this._resourceTypes) {
+      return this._resourceTypes[resourceType];
     }
-    throw new Error(`Local fields: missing resource type ${typeOfResource}.`);
+    throw new Error(`Local fields: missing resource type ${resourceType}.`);
   }
 }