primeng: adjust css styles

* Removes css layers. * Adds boostrap exceptions. * Uses ils data for the tester. * Removes boostrap classes remainders. * Uses a menu for the export format component. * Adds enter event support for the autocomplete component. * Adjusts the suggestion panel size to the input search autocomplete input. * Uses fieldset for the facets. * Fixes display more. * Adds range preset buttons. * Fixes the date range layout. * Uses a menu for the sort component. * Makes the search view more responsive. Co-Authored-by: Johnny Mariéthoz <[email protected]> Co-Authored-by: Bertrand Zuchuat <[email protected]>
rero · Dec 4, 2024 · c317fef · c317fef
1 parent dfefe14
commit c317fef
Show file tree

Hide file tree

Showing 29 changed files with 417 additions and 282 deletions.
diff --git a/projects/ng-core-tester/src/app/app-routing.module.ts b/projects/ng-core-tester/src/app/app-routing.module.ts
@@ -371,23 +371,23 @@ const routes: Routes = [
               label: 'Relevance',
               value: 'relevance',
               defaultQuery: true,
-              icon: 'fa-sort-amount-desc'
+              icon: 'fa fa-sort-amount-desc'
             },
             {
               label: 'Date descending',
               value: 'newest',
               defaultNoQuery: true,
-              icon: 'fa-sort-amount-desc'
+              icon: 'fa fa-sort-amount-desc'
             },
             {
               label: 'Date ascending',
               value: 'oldest',
-              icon: 'fa-sort-amount-asc'
+              icon: 'fa fa-sort-amount-asc'
             },
             {
               label: 'Title',
               value: 'title',
-              icon: 'fa-sort-alpha-asc'
+              icon: 'fa fa-sort-alpha-asc'
             }
           ],
           exportFormats: [

diff --git a/projects/ng-core-tester/src/app/app.component.html b/projects/ng-core-tester/src/app/app.component.html
@@ -23,7 +23,7 @@
       <app-menu />
     </div>
     <div class="flex flex-auto justify-content-end">
-      <app-search-bar class="w-full" viewcode="sonar"></app-search-bar>
+      <app-search-bar class="w-full" viewcode="global"/>
     </div>
   </div>
   <router-outlet></router-outlet>

diff --git a/projects/ng-core-tester/src/app/routes/documents-route.ts b/projects/ng-core-tester/src/app/routes/documents-route.ts
@@ -70,12 +70,17 @@ export class DocumentsRoute implements RouteInterface {
             aggregationsOrder: [
               'document_type',
               'author',
+              'year',
+              'acquisition',
               'library',
               'organisation',
               'language',
               'subject',
               'status'
             ],
+            listHeaders: {
+              Accept: 'application/rero+json, application/json'
+            },
             aggregationsExpand: ['document_type'],
             aggregationsBucketSize: 5,
             preprocessRecordEditor: (record: any): any => {

diff --git a/projects/ng-core-tester/src/app/search-bar/search-bar.component.html b/projects/ng-core-tester/src/app/search-bar/search-bar.component.html
@@ -18,5 +18,7 @@
   [recordTypes]="recordTypes"
   scrollHeight="400px"
   (onSelect)="onSelect($event)"
+  (onSearch)="onSearch($event)"
+  inputStyleClass="text-lg"
   [value]="value"
 />
diff --git a/projects/ng-core-tester/src/app/search-bar/search-bar.component.ts b/projects/ng-core-tester/src/app/search-bar/search-bar.component.ts
@@ -44,20 +44,27 @@ export class SearchBarComponent implements OnInit {
     this.recordTypes = [
       {
         index: 'documents',
-        field: 'title',
+        field: 'autocomplete_title',
         groupLabel: this.translateService.instant('Documents'),
         processSuggestions: (data: any, query: string) => this.processDocuments(data, query),
         preFilters: this.viewcode() ? { view: this.viewcode() } : {}
       },
       {
-        index: 'organisations',
-        field: 'name',
-        groupLabel: this.translateService.instant('Organisations'),
-        processSuggestions: (data: any) => this.processOrganisations(data),
+        index: 'entities',
+        field: 'autocomplete_name',
+        groupLabel: this.translateService.instant('Entities'),
+        processSuggestions: (data: any) => this.processEntities(data),
         preFilters: this.viewcode() ? { view: this.viewcode() } : {}
       }
     ];
   }
+  onSearch(query) {
+    this.router.navigate(['/record', 'search', 'documents'], {
+      queryParams: {
+        q: query
+      }
+    });
+  }
 
   onSelect(event: IAutoComplete) {
     const label = event.originalLabel ? event.originalLabel : event.label;
@@ -73,11 +80,11 @@ export class SearchBarComponent implements OnInit {
         });
         this.router.navigate(['/record', 'search', 'documents', 'detail', event.value]);
         break;
-      case 'organisations':
+      case 'entities':
         this.messageService.add({
           severity: 'success',
-          summary: 'ORGANISATIONS',
-          detail: 'navigate to organisation: ' + event.value,
+          summary: 'ENTITIES',
+          detail: 'navigate to entity: ' + event.value,
           life: CONFIG.MESSAGE_LIFE
         });
         break;
@@ -100,14 +107,14 @@ export class SearchBarComponent implements OnInit {
     return values;
   }
 
-  private processOrganisations(data: Record): any {
+  private processEntities(data: Record): any {
     const values: IAutoComplete[] = [];
     data.hits.hits.map((hit: any) => {
       values.push({
-        iconClass: 'fa fa-industry',
+        iconClass: 'fa fa-user',
         id: hit.metadata.pid,
-        index: 'organisations',
-        label: hit.metadata.name,
+        index: 'entities',
+        label: hit.metadata.authorized_access_point_en,
         value: hit.metadata.pid,
       });
     });

diff --git a/projects/rero/ng-core/assets/scss/_editor.scss b/projects/rero/ng-core/assets/scss/_editor.scss
@@ -15,13 +15,11 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-@layer ng-core {
-  ng-core-editor-formly-field-textarea,
-  ng-core-formly-field-primeng-input,
-  ng-core-tree-select,
-  ng-core-multi-select,
-  ng-core-primeng-select,
-  ng-core-date-picker {
-    @extend .w-full;
-  }
+ng-core-editor-formly-field-textarea,
+ng-core-formly-field-primeng-input,
+ng-core-tree-select,
+ng-core-multi-select,
+ng-core-primeng-select,
+ng-core-date-picker {
+  @extend .w-full;
 }
diff --git a/projects/rero/ng-core/assets/scss/_theme.scss b/projects/rero/ng-core/assets/scss/_theme.scss
@@ -15,50 +15,54 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-@layer ng-core {
-  :root {
-    font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial,
-      sans-serif;
-    --font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial,
-      sans-serif;
+a {
+  @extend .no-underline;
+ }
 
-    @extend .text-sm;
-
-    a {
-      @extend .text-blue-500, .no-underline;
-    }
+a:not(.p-button):not(.p-element):not([role=button]):not([role=tab]) {
+  color: var(--blue-500);
+}
 
-    a:hover {
-      @extend .text-blue-600, .underline;
-    }
+a:hover:not(.p-button):not(.p-element):not([role=button]):not([role=tab]) {
+  color: var(--blue-600);
+  @extend .text-blue-600, .underline;
+}
 
-    .p-submenu-list {
-      z-index: 1000;
-    }
+.p-submenu-list {
+  z-index: 1000;
+}
 
-    .p-menuitem {
-      a {
-        @extend .text-color;
-      }
-      a:hover {
-        @extend .no-underline;
-      }
-    }
+.p-menuitem {
+  a {
+    @extend .text-color;
+  }
+  a:hover {
+    @extend .no-underline;
+  }
+}
 
-    dl.metadata {
-      @extend .grid, .my-0, .w-full;
-      dt {
-        @extend .font-bold, .col-12, .py-0;
-        @include styleclass('md:col-4');
-      }
-      dd {
-        @extend .col-12, .py-0;
-        @include styleclass('md:col-8');
-        margin-inline-start: 0;
-      }
-    }
-    .p-menubar {
-      @extend .mb-0, .border-none, .bg-white;
-    }
+dl.metadata {
+  @extend .grid, .my-0, .w-full;
+  dt {
+    @extend .font-bold, .col-12, .py-0;
+    @include styleclass('md:col-4');
   }
+  dd {
+    @extend .col-12, .py-0, .m-0;
+    @include styleclass('md:col-8');
+  }
+}
+
+.p-menubar {
+  @extend .mb-0, .border-none, .bg-white;
+}
+
+// bootstrap patches
+label {
+  @extend .m-0;
+}
+
+legend {
+  @extend .text-base;
+  width: auto;
 }