primeng: fix first admin tests

Co-Authored-by: Johnny Mariéthoz <[email protected]>
Co-Authored-by: Bertrand Zuchuat <[email protected]>

Author: jma

projects/rero/ng-core/src/lib/record/detail/detail-button/detail-button.component.html

@@ -27,11 +27,10 @@
   <div class="flex align-items-center gap-1 justify-content-end w-full">
     <ng-content select="[beforeButton]"></ng-content>
     @if (record() && adminMode().can) {
-      @if (useStatus && useStatus.can && useStatus.url) {
+      @if (useStatus() && useStatus().can && useStatus().url) {
         <p-button id="detail-use-button"
           icon="fa fa-hand-o-right"
           [label]="'Use'|translate"
-          [outlined]="!isPrimaryAction('use')"
           (onClick)="useRecord()"
           translate
         />
@@ -40,20 +39,27 @@
         <p-button id="detail-edit-button"
           icon="fa fa-pencil"
           [label]="'Edit'|translate"
-          [outlined]="!isPrimaryAction('use')"
+          [outlined]="useStatus()?.can"
           (onClick)="updateRecord(record())"
           translate
         />
       }
       @if (deleteStatus()) {
-        <p-button id="detail-delete-button"
-          disabled
+        <p-button
           icon="fa fa-trash"
-          [outlined]="true"
           severity="danger"
-          [label]="'Delete'|translate"
+          class="pointer-events-auto"
+          outlined
           (onClick)="deleteRecord(record())"
+          [pTooltip]="tooltipContent"
+          tooltipPosition="bottom"
+          [disabled]="!deleteStatus().can"
+          [label]="'Delete'|translate"
+          [tooltipDisabled]="deleteStatus().can"
         />
+        <ng-template #tooltipContent>
+          <span [innerHTML]="deleteStatus().message"></span>
+        </ng-template>
       }
     }
     <ng-content select="[afterButton]"/>

projects/rero/ng-core/src/lib/record/detail/detail-button/detail-button.component.ts

@@ -52,23 +52,6 @@ export class DetailButtonComponent {
   /** Delete record message event */
   deleteMessageEvent = output<string>();
 
-  /**
-   * define if an action is the primary action for the resource
-   * @param actionName - string: the action name to check
-   * @return boolean
-   */
-  isPrimaryAction(actionName: string): boolean {
-    switch (actionName) {
-      case 'edit':
-      case 'update':
-        return this.updateStatus() && this.updateStatus().can && (!this.useStatus() || !this.useStatus().can);
-      case 'use':
-        return this.useStatus() && this.useStatus().can;
-      default:
-        return false;
-    }
-  }
-
   /** Use the record */
   useRecord(): void {
     this.recordEvent.emit({ action: 'use', url: this.updateStatus().url })

projects/rero/ng-core/src/lib/record/editor/formly/primeng/select/select.ts

@@ -15,7 +15,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 import { CommonModule } from '@angular/common';
-import { Component, NgModule, OnInit, Type } from '@angular/core';
+import { ChangeDetectorRef, Component, inject, NgModule, OnInit, Type } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import { FieldType, FormlyFieldConfig, FormlyModule } from '@ngx-formly/core';
 import { FormlySelectModule as FormlyCoreSelectModule, FormlyFieldSelectProps } from '@ngx-formly/core/select';
@@ -54,8 +54,8 @@ export interface IFormlySelectFieldConfig extends FormlyFieldConfig<ISelectProps
 @Component({
   selector: 'ng-core-primeng-select',
   template: `
-  <div class="flex justify-content-center">
-     <p-dropdown
+  @defer(when selectOptions) {
+    <p-dropdown
       [appendTo]="props.appendTo"
       [class]="props.class"
       [dropdownIcon]="props.dropdownIcon"
@@ -90,7 +90,8 @@ export interface IFormlySelectFieldConfig extends FormlyFieldConfig<ISelectProps
           <div class="option-group"><hr></div>
         }
       </ng-template>
-     </p-dropdown>
+    </p-dropdown>
+  }
   `,
   styles: `
   :host ::ng-deep .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
@@ -111,6 +112,7 @@ export interface IFormlySelectFieldConfig extends FormlyFieldConfig<ISelectProps
 })
 export class SelectComponent extends FieldType<FormlyFieldConfig<ISelectProps>> implements OnInit {
 
+  protected cd: ChangeDetectorRef = inject(ChangeDetectorRef);
   /** Default properties */
   defaultOptions: Partial<FormlyFieldConfig<ISelectProps>> = {
     defaultValue: null,
@@ -131,7 +133,7 @@ export class SelectComponent extends FieldType<FormlyFieldConfig<ISelectProps>>
     }
   };
 
-  selectOptions: any[] = [];
+  selectOptions: any[];
 
   ngOnInit(): void {
     if (!isObservable(this.props.options)) {
@@ -156,6 +158,7 @@ export class SelectComponent extends FieldType<FormlyFieldConfig<ISelectProps>>
       } else {
         this.selectOptions = this.props.sort ? this.sortOptions(options) : options;
       }
+      this.cd.markForCheck();
     });
   }
 

projects/rero/ng-core/src/lib/record/search/menu-sort/menu-sort.component.html

@@ -20,8 +20,14 @@
   <div class="flex gap-3 align-items-center">
     @if (selectedOption()?.icon) {
       <i [ngClass]="selectedOption().icon"></i>
+    } @else if (selectedOption()) {
+      {{'Sort by' | translate }}&nbsp;:
+    }
+    @if (selectedOption()?.label) {
+      {{ selectedOption()?.label | translate }}
+    } @else {
+      {{'Sort by' | translate }}&nbsp;…
     }
-  {{ selectedOption()?.label | translate }}&nbsp;…
   <i class="fa fa-caret-down"></i>
 </div>
 </p-button>

projects/rero/ng-core/src/lib/record/search/result/record-search-result.component.html

@@ -25,9 +25,9 @@
         @if (useStatus && useStatus.can && useStatus.url) {
           <p-button
             [outlined]="true"
-            severity="danger"
             [ariaLabel]="'Use' | translate"
             (onClick)="useRecord()"
+            [title]="'Use' | translate"
             icon="fa fa-hand-o-right"
           />
         }
@@ -37,7 +37,6 @@
           <p-button
             [outlined]="true"
             [ariaLabel]="'Edit' | translate"
-            (onClick)="editRecord(record.id, updateStatus?.routerLink)"
             [routerLink]="updateStatus.routerLink || ['edit', record.id]"
             icon="fa fa-pencil"
           />
@@ -46,12 +45,20 @@
         <!-- delete button -->
         @if (deleteStatus) {
           <p-button
-            [outlined]="true"
-            severity="danger"
-            [ariaLabel]="'Delete' | translate"
-            (onClick)="deleteRecord(record.id, deleteStatus?.type)"
-            icon="fa fa-trash"
-          />
+          icon="fa fa-trash"
+          severity="danger"
+          class="pointer-events-auto"
+          outlined
+          [title]="'Delete'|translate"
+          (onClick)="deleteRecord(record.id, deleteStatus?.type)"
+          [pTooltip]="tooltipContent"
+          tooltipPosition="top"
+          [disabled]="!deleteStatus.can"
+          [tooltipDisabled]="deleteStatus.can"
+        />
+        <ng-template #tooltipContent>
+          <span [innerHTML]="deleteStatus.message"></span>
+        </ng-template>
         }
     }
   </div>

projects/rero/ng-core/src/lib/record/search/result/record-search-result.component.ts

@@ -142,15 +142,6 @@ export class RecordSearchResultComponent implements OnInit, AfterViewInit {
     }
   }
 
-  /**
-   * Edit a record
-   * @param pid - string: the pid to edit
-   */
-  editRecord(pid: string, url?: string[]): void {
-    const params = url ?? ['/', 'records', this.type, 'edit', pid];
-    this.router.navigate(params);
-  }
-
   /**
    * Use a record
    */