primeng: fixe editor components

* Fixes css styles. * Adjusts some editor spaces. * Fixes the editor switch component and removes the intermediate state as it is not used. * Fixes agregations list filters translations. Co-Authored-by: Johnny Mariéthoz <[email protected]> Co-Authored-by: Bertrand Zuchuat <[email protected]>
rero · Dec 18, 2024 · f078b89 · f078b89
1 parent 29a37e1
commit f078b89
Show file tree

Hide file tree

Showing 14 changed files with 80 additions and 51 deletions.
diff --git a/projects/rero/ng-core/assets/scss/_theme.scss b/projects/rero/ng-core/assets/scss/_theme.scss
@@ -42,7 +42,7 @@ a:hover:not(.p-button):not(.p-element):not([role=button]):not([role=tab]) {
 }
 
 dl.metadata {
-  @extend .grid, .my-0, .w-full;
+  @extend .grid, .my-0, .w-full, .p-2;
   dt {
     @extend .font-bold, .col-12, .py-0;
     @include styleclass('md:col-4');
@@ -59,7 +59,7 @@ dl.metadata {
 
 // bootstrap patches
 label {
-  @extend .m-0;
+  display: block;
 }
 
 legend {

diff --git a/projects/rero/ng-core/assets/scss/_typography.scss b/projects/rero/ng-core/assets/scss/_typography.scss
@@ -118,8 +118,7 @@ h6,
 }
 
 .alternate-color > * {
-  @extend .block;
-
+  display: block;
   &:nth-child(even) {
     @extend .surface-100;
   }

diff --git a/projects/rero/ng-core/src/lib/dialog/dialog.component.ts b/projects/rero/ng-core/src/lib/dialog/dialog.component.ts
@@ -20,13 +20,15 @@ import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
 @Component({
   selector: 'ng-core-dialog',
   template: `
+  <div class="flex flex-column gap-2">
     <div class="flex" [innerHtml]="config.data.body|nl2br"></div>
     <div class="flex justify-content-end gap-2">
       <p-button [label]="config.data.cancelTitleButton || 'Cancel' | translate" severity="secondary" (onClick)="cancel()" />
       @if (config.data.confirmButton) {
         <p-button [label]="config.data.confirmTitleButton || 'OK' | translate" (onClick)="confirm()" />
       }
     </div>
+  </div>
   `
 })
 export class DialogComponent {

diff --git a/projects/rero/ng-core/src/lib/record/detail/detail-button/detail-button.component.html b/projects/rero/ng-core/src/lib/record/detail/detail-button/detail-button.component.html
@@ -21,15 +21,14 @@
       [label]="'Back'|translate"
       severity="secondary"
       [text]="true"
-      (onClick)="$event.preventDefault(); goBack()"
+      (onClick)="goBack()"
     />
   </div>
-  <div class="flex align-items-center justify-content-end w-full">
+  <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) {
         <p-button id="detail-use-button"
-          class="ml-1"
           icon="fa fa-hand-o-right"
           [label]="'Use'|translate"
           [outlined]="!isPrimaryAction('use')"
@@ -39,7 +38,6 @@
       }
       @if (updateStatus() && updateStatus().can) {
         <p-button id="detail-edit-button"
-          class="ml-1"
           icon="fa fa-pencil"
           [label]="'Edit'|translate"
           [outlined]="!isPrimaryAction('use')"
@@ -50,7 +48,6 @@
       @if (deleteStatus()) {
         <p-button id="detail-delete-button"
           disabled
-          class="ml-1"
           icon="fa fa-trash"
           [outlined]="true"
           severity="danger"

diff --git a/...o/ng-core/src/lib/record/editor/formly/primeng/remote-autocomplete/remote-autocomplete.ts b/...o/ng-core/src/lib/record/editor/formly/primeng/remote-autocomplete/remote-autocomplete.ts
@@ -54,7 +54,7 @@ export interface IRemoteAutoCompleteProps extends FormlyFieldProps {
           />
         </div>
       }
-      <div class="flex ml-1 w-full">
+      <div class="flex w-full">
         <p-autoComplete
           class="w-full"
           styleClass="w-full"
@@ -70,10 +70,10 @@ export interface IRemoteAutoCompleteProps extends FormlyFieldProps {
           (onSelect)="onSelect($event)"
         >
           <ng-template let-data pTemplate="item">
-            <div class="flex">
+            <div class="flex gap-1">
               <div class="flex" [innerHTML]="data.label"></div>
               @if (data.link) {
-                <a class="ml-2 text-700" [href]="data.link" target="_blank">
+                <a class="text-color-secondary" [href]="data.link" target="_blank">
                   <i class="fa fa-external-link"></i>
                 </a>
               }
@@ -85,9 +85,9 @@ export interface IRemoteAutoCompleteProps extends FormlyFieldProps {
         </p-autoComplete>
       </div>
     } @else {
-      <div class="py-1">
+      <div class="flex gap-1 align-items-center">
         <span [innerHtml]="valueSelected()"></span>
-        <p-button icon="fa fa-trash" severity="secondary" [text]="true" (onClick)="clear()" styleClass="ml-1" />
+        <p-button icon="fa fa-trash" severity="secondary" [text]="true" (onClick)="clear()" />
       </div>
     }
   </div>

diff --git a/projects/rero/ng-core/src/lib/record/editor/type/array-type/array-type.component.html b/projects/rero/ng-core/src/lib/record/editor/type/array-type/array-type.component.html
@@ -20,7 +20,7 @@
 <ng-core-label-editor [field]="field" />
 }
 
-<div [ngClass]="{ 'ml-3': field.props.hideLabel !== true }">
+<div>
   <!--  validation error message -->
   @if (showError && formControl.errors) {
   <div class="text-error my-2">

diff --git a/projects/rero/ng-core/src/lib/record/editor/type/object-type/object-type.component.html b/projects/rero/ng-core/src/lib/record/editor/type/object-type/object-type.component.html
@@ -14,18 +14,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/>.
 -->
-@if (props.hideLabel !== true) {
-<ng-core-label-editor [field]="field" />
-}
-<div [ngClass]="{ 'ml-3': field.templateOptions.hideLabel !== true, content: true }">
+<div class="py-2 flex flex-column gap-2">
+  @if (props.hideLabel !== true) {
+    <ng-core-label-editor [field]="field" />
+  }
   @if (showError && formControl.errors) {
   <div class="text-error my-2">
     <formly-validation-message [field]="field" />
   </div>
   }
   <div class="{{ props.containerCssClass }}">
     @for (f of field.fieldGroup; track f) {
-    <div class="{{ f.props.itemCssClass }} mb-1" [id]="'field-' + f.id">
+    <div class="{{ f.props.itemCssClass }}" [id]="'field-' + f.id">
       <formly-field [field]="f" />
     </div>
     }

diff --git a/projects/rero/ng-core/src/lib/record/editor/type/switch/switch.component.ts b/projects/rero/ng-core/src/lib/record/editor/type/switch/switch.component.ts
@@ -19,7 +19,6 @@ import { FieldType, FormlyFieldConfig } from '@ngx-formly/core';
 import { FormlyFieldProps } from '@ngx-formly/primeng/form-field';
 
 interface SwitchProps extends FormlyFieldProps {
-  indeterminate: boolean;
   hideLabel: boolean;
 }
 
@@ -29,21 +28,20 @@ interface SwitchProps extends FormlyFieldProps {
 @Component({
   selector: 'ng-core-editor-formly-field-switch',
   template: `
-    <div class="custom-control custom-switch">
-      <input class="custom-control-input" type="checkbox"
-        [class.is-invalid]="showError"
-        [indeterminate]="props.indeterminate && formControl.value === null"
+    <div class="flex gap-2 align-items-center">
+      <p-inputSwitch
+      [ngClass]="{'ng-invalid ng-dirty': showError }"
         [formControl]="formControl"
-        [formlyAttributes]="field">
-      <label class="custom-control-label" [for]="id" [pTooltip]="props.description" tooltipPosition="top">{{ props.label }}</label>
+        [formlyAttributes]="field"
+      />
+      <label [for]="id" [pTooltip]="props.description" tooltipPosition="top">{{ props.label }}</label>
     </div>
   `,
 })
 export class SwitchComponent extends FieldType<FormlyFieldConfig<SwitchProps>> {
   /** Default properties */
   defaultOptions: Partial<FormlyFieldConfig<SwitchProps>> = {
     props: {
-      indeterminate: true,
       hideLabel: true,
     },
   };

diff --git a/...rero/ng-core/src/lib/record/editor/widgets/add-field-editor/add-field-editor.component.ts b/...rero/ng-core/src/lib/record/editor/widgets/add-field-editor/add-field-editor.component.ts
@@ -89,7 +89,6 @@ export class AddFieldEditorComponent implements OnInit, OnDestroy {
 
   onSelect(event: AutoCompleteSelectEvent): void {
     this.editorComponentInstance.setHide(event.value, false);
-    console.log('clear');
     this.autocomplete.clear();
   }
 

diff --git a/...ng-core/src/lib/record/editor/wrappers/form-field-wrapper/form-field-wrapper.component.ts b/...ng-core/src/lib/record/editor/wrappers/form-field-wrapper/form-field-wrapper.component.ts
@@ -20,7 +20,7 @@ import { FieldWrapper } from '@ngx-formly/core';
 @Component({
   selector: 'ng-core-form-field-wrapper',
   template: `
-    <div [ngClass]="props.cssClass" [class.has-error]="showError">
+    <div class="py-2 flex flex-column gap-2" [ngClass]="props.cssClass" [class.has-error]="showError">
       <!-- label -->
       @if (props.label && props.hideLabel !== true) {
         <label [attr.for]="id" [pTooltip]="props.description" tooltipPosition="top">

diff --git a/projects/rero/ng-core/src/lib/record/record-ui.service.ts b/projects/rero/ng-core/src/lib/record/record-ui.service.ts
@@ -90,7 +90,6 @@ export class RecordUiService {
    * @param message Message to display
    */
   showDeleteMessage(message: string): void {
-    console.log('delete');
     this.confirmationService.confirm({
       acceptLabel: this.translateService.instant('OK'),
       rejectVisible: false,

diff --git a/...cts/rero/ng-core/src/lib/record/search/aggregation/list-filters/list-filters.component.ts b/...cts/rero/ng-core/src/lib/record/search/aggregation/list-filters/list-filters.component.ts
@@ -14,7 +14,7 @@
  * 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/>.
  */
-import { Component, computed, inject, input, output } from '@angular/core';
+import { Component, computed, inject, input, OnChanges, output, SimpleChanges } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 
 export interface IFilter {
@@ -31,6 +31,11 @@ export class ListFiltersComponent {
 
   protected translateService: TranslateService = inject(TranslateService);
 
+  /**
+   * All aggregations
+   */
+  aggregations = input<any[]>();
+
   // Selected aggregations filters
   aggregationsFilters = input<any>();
 
@@ -83,10 +88,39 @@ export class ListFiltersComponent {
         });
       }
     });
+    this.aggregations().map((item: any) => {
+        this.getFilterNames(item.value.buckets, filters);
+    });
 
     return filters;
   }
 
+    /**
+   * Get displayed name of bucket
+   * and fill in filters list.
+   *
+   * @param buckets - Bucket to get the name from.
+   */
+    getFilterNames(buckets: any, filters) {
+      if (!buckets || buckets.length === 0) {
+        return;
+      }
+      buckets.map((bucket: any) => {
+        for (const k in bucket) {
+          if (bucket[k].buckets) {
+            this.getFilterNames(bucket[k].buckets, filters);
+          }
+        }
+        if (bucket.name) {
+          const index = filters.findIndex((filter: any) => filter.key === bucket.key && filter.aggregationKey === bucket.aggregationKey);
+          if (index > -1) {
+            filters[index].name = bucket.name;
+            filters[index] = {...filters[index]};
+          }
+        }
+      });
+    }
+
   /**
    * Remove filter.
    * @param filter - the filter to remove

diff --git a/projects/rero/ng-core/src/lib/record/search/record-search.component.html b/projects/rero/ng-core/src/lib/record/search/record-search.component.html
@@ -25,34 +25,35 @@
   <h5>{{ availableTypes[0].label | translate }}</h5>
   }
   <ng-content select="[header]"></ng-content>
-  <div class="mt-3">
+  <div class="mt-3 flex gap-2">
     @if (showSearchInput) {
     <ng-core-search-input
-      class="pt-0"
+      class="flex-grow-1"
       [placeholder]="'search' | translate | ucfirst"
       [searchText]="q"
       [displayLabel]="false"
       (search)="searchByQuery($event)"
       [focus]="true"
-    ></ng-core-search-input>
+    />
     }
     <ng-content select="[afterInputSearch]"/>
   </div>
-  @if (loaded && total < 1) {
-  <p-messages
-    class="my-4"
-    [value]="[{ severity: 'info', detail: emptyRecordMessage }]"
-    [enableService]="false"
-    [closable]="false"
-  />
-  @if (adminMode.can && addStatus.can) {
-  <p-button
-    id="search-add-button"
-    [label]="'Add' | translate"
-    icon="fa fa-plus"
-    [routerLink]="addStatus.routerLink || ['new']"
-  />
-  } } @else {
+  @if (loaded && hasNoRecord) {
+    <p-messages
+      class="my-4"
+      [value]="[{ severity: 'info', detail: emptyRecordMessage }]"
+      [enableService]="false"
+      [closable]="false"
+    />
+    @if (adminMode.can && addStatus.can) {
+    <p-button
+      id="search-add-button"
+      [label]="'Add' | translate"
+      icon="fa fa-plus"
+      [routerLink]="addStatus.routerLink || ['new']"
+    />
+    }
+  } @else {
   <div class="flex align-items-stretch w-full my-3">
     @if (resultsText$ | async; as resultsText) {
     <div class="flex align-items-center w-full">
@@ -80,6 +81,7 @@ <h5>{{ availableTypes[0].label | translate }}</h5>
   <ng-content select="[beforeResult]"></ng-content>
   <div class="grid">
     <ng-core-list-filters
+      [aggregations]="aggregations"
       class="col-12"
       [aggregationsFilters]="aggregationsFilters"
       [searchFilters]="searchFilters"

diff --git a/projects/rero/ng-core/src/lib/record/search/record-search.component.ts b/projects/rero/ng-core/src/lib/record/search/record-search.component.ts
@@ -843,7 +843,6 @@ export class RecordSearchComponent implements OnInit, OnChanges, OnDestroy {
       page: this.page,
       size: this.size,
       currentType: this.config.key,
-      index: this.config.index,
       aggregationsFilters: this.aggregationsFilters,
       sort: this.sort,
     });