local_fields: fix local fields orders.

* Closes rero/rero-ils#2294. Co-authored-by: Renaud Michotte <renaud.michotte@gmail.com>
rero · Jan 20, 2023 · dea82d4 · dea82d4
1 parent aa368c7
commit dea82d4
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 43 deletions.
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-2022 RERO
+  Copyright (C) 2019-2022 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,21 +15,18 @@
   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
-        [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"
@@ -40,16 +38,16 @@
       <button
         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-2022 RERO
+ * Copyright (C) 2019-2022 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
@@ -27,25 +28,29 @@ import { LocalFieldApiService } from '../../../api/local-field-api.service';
 })
 export class LocalFieldComponent implements OnInit {
 
+  // COMPONENT ATTRIBUTES =====================================================
   /** Resource Type */
   @Input() resourceType: string;
-
   /** Resource pid */
   @Input() resourcePid: string;
 
   /** Observable on record */
-  record$: Observable<any>;
+  localFieldRecordPid: string;
+  /** local fields */
+  localFields: Array<{name: string, value: Array<string>}> = [];
+  /** isLoading */
+  isLoading = true;
+  /** return all available permissions for current user */
+  permissions: IPermissions = PERMISSIONS;
 
   /** Available resources type for local fields */
-  resourcesType = {
+  private _resourcesType = {
     documents: 'doc',
     holdings: 'hold',
     items: 'item'
   };
 
-    /** return all available permissions for current user */
-    permissions: IPermissions = PERMISSIONS;
-
+  // CONSTRUCTOR & HOOKS ======================================================
   /**
    * Constructor
    * @param _localFieldApiService - LocalFieldApiService
@@ -56,34 +61,49 @@ export class LocalFieldComponent implements OnInit {
     private _userService: UserService
   ) { }
 
-  /** Init */
+  /** OnInit hook */
   ngOnInit() {
-    this.record$ = this._localFieldApiService.getByResourceTypeAndResourcePidAndOrganisationId(
-      this._translateType(this.resourceType),
-      this.resourcePid,
-      this._userService.user.currentOrganisation
-    );
+    this._localFieldApiService
+      .getByResourceTypeAndResourcePidAndOrganisationId(
+        this._translateType(this.resourceType),
+        this.resourcePid,
+        this._userService.user.currentOrganisation
+      )
+      .subscribe((record) => {
+        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]});
+          }
+        }
+        this.isLoading = false;
+      });
   }
 
-  /**
-   * 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 resourceType - string, name of resource
    * @return string, resource symbol
    */
-  private _translateType(resourceType: string) {
-    if (resourceType in this.resourcesType) {
-      return this.resourcesType[resourceType];
+  private _translateType(resourceType: string): string {
+    if (resourceType in this._resourcesType) {
+      return this._resourcesType[resourceType];
     }
     throw new Error(`Local fields: missing resource type ${resourceType}.`);
   }