feat(front): Webcomponents / More consistent config.

GeoCat · Aug 14, 2024 · 16aea31 · 16aea31
1 parent c601684
commit 16aea31
Show file tree

Hide file tree

Showing 7 changed files with 86 additions and 28 deletions.
diff --git a/geonetwork-frontend/projects/gwebcomponents/src/app/app.module.ts b/geonetwork-frontend/projects/gwebcomponents/src/app/app.module.ts
@@ -26,6 +26,7 @@ import { GWebcomponentsDocComponent } from './components/g-webcomponents-doc/g-w
 import { GWebcomponentsDocEmbedComponent } from './components/g-webcomponents-doc-embed/g-webcomponents-doc-embed.component';
 import { Button } from 'primeng/button';
 import { GWebcomponentConfigurationComponent } from './components/g-webcomponent-configuration/g-webcomponent-configuration.component';
+import { SliderModule } from 'primeng/slider';
 
 const CUSTOM_ELEMENTS = [
   {
@@ -70,6 +71,7 @@ const CUSTOM_ELEMENTS = [
     InputTextModule,
     AutoCompleteModule,
     Button,
+    SliderModule,
   ],
   bootstrap: [
     GcDataResultsTableComponent,

diff --git a/...c/app/components/g-webcomponent-configuration/g-webcomponent-configuration.component.html b/...c/app/components/g-webcomponent-configuration/g-webcomponent-configuration.component.html
@@ -12,6 +12,25 @@
         <label for="apiUrl">Select a catalogue</label>
       </p-floatLabel>
 
+      <p-floatLabel class="m-2">
+        <input
+          type="text"
+          class="w-full"
+          pInputText
+          [(ngModel)]="searchFilter" />
+        <label for="tableColumn">Search filter</label>
+      </p-floatLabel>
+
+      <p-floatLabel class="m-2">
+        <!--<p-dropdown
+          styleClass="w-full mb-4"
+          [options]="[10, 15, 30, 90]"
+          [(ngModel)]="pageSize"
+          inputId="pageSize" />-->
+        <input type="text" pInputText [(ngModel)]="pageSize" class="w-full mb-10"/>
+        <label for="pageSize">Number of results</label>
+      </p-floatLabel>
+      <p-slider [(ngModel)]="pageSize" [min]="0" [max]="100" [step]="10" class="w-full" />
       <ng-content />
     </div>
   </div>

diff --git a/...src/app/components/g-webcomponent-configuration/g-webcomponent-configuration.component.ts b/...src/app/components/g-webcomponent-configuration/g-webcomponent-configuration.component.ts
@@ -1,4 +1,4 @@
-import { Component, input, model, output } from '@angular/core';
+import { Component, input, model, output, signal } from '@angular/core';
 
 @Component({
   selector: 'g-webcomponent-configuration',
@@ -8,4 +8,6 @@ import { Component, input, model, output } from '@angular/core';
 export class GWebcomponentConfigurationComponent {
   apiUrlList = input<string[]>();
   apiUrl = model<string>();
+  searchFilter = model<string>();
+  pageSize = model<number>();
 }
diff --git a/.../gwebcomponents/src/app/components/g-webcomponents-doc/g-webcomponents-doc.component.html b/.../gwebcomponents/src/app/components/g-webcomponents-doc/g-webcomponents-doc.component.html
@@ -33,24 +33,9 @@ <h2 class="text-3xl">Search box and results</h2>
       <div class="m-4">
         <g-webcomponent-configuration
           [(apiUrl)]="apiUrl"
-          [apiUrlList]="apiUrlList">
-          <p-floatLabel class="m-2">
-            <input
-              type="text"
-              class="w-full"
-              pInputText
-              [(ngModel)]="searchFilter" />
-            <label for="tableColumn">Search filter</label>
-          </p-floatLabel>
-
-          <p-floatLabel class="m-2">
-            <p-dropdown
-              styleClass="w-full mb-4"
-              [options]="[15, 30, 90]"
-              [(ngModel)]="pageSize"
-              inputId="pageSize" />
-            <label for="pageSize">Number of results</label>
-          </p-floatLabel>
+          [apiUrlList]="apiUrlList"
+          [(searchFilter)]="searchFilter"
+          [(pageSize)]="pageSize">
         </g-webcomponent-configuration>
 
         <gc-search
@@ -79,7 +64,10 @@ <h2 class="text-3xl">Table of records</h2>
       <div class="mb-4">
         <g-webcomponent-configuration
           [(apiUrl)]="apiUrl"
-          [apiUrlList]="apiUrlList">
+          [apiUrlList]="apiUrlList"
+          [(searchFilter)]="searchFilter"
+          [(pageSize)]="pageSize">
+
           <div>
             <p-floatLabel class="m-2">
               <p-autoComplete
@@ -104,6 +92,15 @@ <h2 class="text-3xl">Table of records</h2>
               <label for="tableColumn">Define column label</label>
             </p-floatLabel>
 
+            <p-floatLabel class="m-2">
+              <p-multiSelect
+                styleClass="w-full mb-4"
+                [options]="filterList"
+                [(ngModel)]="selectedFilters"
+                inputId="selectionMode" />
+              <label for="tableColumn">Define filters</label>
+            </p-floatLabel>
+
             <p-floatLabel class="m-2">
               <p-dropdown
                 styleClass="w-full mb-4"
@@ -120,9 +117,11 @@ <h2 class="text-3xl">Table of records</h2>
 
       <gc-search-results-table
         [apiUrl]="apiUrl"
+        [filter]="searchFilter()"
+        [size]="pageSize()"
         [listOfLabels]="listOfLabelsAsText()"
         [listOfFields]="listOfFieldsAsText()"
-        listOfFilter="OrgForResourceObject.default,cl_status.default,th_gemet.default"
+        [listOfFilter]="listOfFilters()"
         landingPage="${apiUrl}/records/${uuid}"
         landingPageLinkOn="resourceTitleObject.default"
         scrollHeight="80vh"
@@ -132,9 +131,11 @@ <h2 class="text-3xl">Table of records</h2>
         <pre class="whitespace-pre-wrap">
 <![CDATA[<gc-search-results-table
           apiUrl="{{ apiUrl }}"
+          filter="{{ searchFilter() }}"
+          size="{{ pageSize() }}"
           listOfLabels="{{ listOfLabelsAsText() }}"
           listOfFields="{{ listOfFieldsAsText() }}"
-          listOfFilter="OrgForResourceObject.default,cl_status.default,th_gemet.default"
+          listOfFilter="{{ listOfFilters() }}"
           landingPage="${apiUrl}/records/${uuid}"
           landingPageLinkOn="resourceTitleObject.default"
           scrollHeight="80vh"

diff --git a/...ts/gwebcomponents/src/app/components/g-webcomponents-doc/g-webcomponents-doc.component.ts b/...ts/gwebcomponents/src/app/components/g-webcomponents-doc/g-webcomponents-doc.component.ts
@@ -1,10 +1,9 @@
-import { Component, inject, input, OnInit, signal } from '@angular/core';
+import { Component, computed, input, OnInit, signal } from '@angular/core';
 import {
   AutoCompleteCompleteEvent,
   AutoCompleteSelectEvent,
 } from 'primeng/autocomplete';
 import { GnIndexRecordToJSON } from 'gapi';
-import { ActivatedRoute } from '@angular/router';
 
 interface field {
   label: string;
@@ -107,6 +106,23 @@ export class GWebcomponentsDocComponent implements OnInit {
       .join(',')
   );
 
+  filterList = [
+    'OrgForResourceObject.default',
+    'custodianOrgForResourceObject.default',
+    'cl_topic.default',
+    'cl_status.default',
+    'cl_spatialRepresentationType.default',
+    'resolutionScaleDenominator',
+    'creationYearForResource',
+    'th_gemet.default',
+    'resourceType',
+    'isPublishedToAll',
+  ];
+  selectedFilters = signal([this.filterList[0]]);
+  listOfFilters = computed(() => {
+    return this.selectedFilters().join(',');
+  });
+
   autocompleteField(event: AutoCompleteCompleteEvent) {
     let query = event.query.split(',').at(-1)?.toLowerCase() || '';
     this.filteredFields = this.listOfFields.filter(f => {

diff --git a/...ponents/src/app/components/gc-search-results-table/gc-search-results-table.component.html b/...ponents/src/app/components/gc-search-results-table/gc-search-results-table.component.html
@@ -1,5 +1,7 @@
 @defer (on viewport) {
-  <ng-container gSearchContext="{{ searchId }}">
+  <ng-container gSearchContext="{{ searchId }}"
+                [size]="currentSize()"
+                [filter]="currentFilter()">
     @if (filters()) {
       <p-toolbar styleClass="flex justify-start gap-4">
         @for (filter of filters(); track filter) {

diff --git a/...omponents/src/app/components/gc-search-results-table/gc-search-results-table.component.ts b/...omponents/src/app/components/gc-search-results-table/gc-search-results-table.component.ts
@@ -9,7 +9,7 @@ import {
   ViewEncapsulation,
 } from '@angular/core';
 import { Configuration, DefaultConfig } from 'gapi';
-import { API_CONFIGURATION, SearchAggLayout, SearchService } from 'glib';
+import { API_CONFIGURATION, DEFAULT_PAGE_SIZE, SearchAggLayout, SearchService } from 'glib';
 
 @Component({
   selector: 'gc-search-results-table',
@@ -23,6 +23,8 @@ import { API_CONFIGURATION, SearchAggLayout, SearchService } from 'glib';
 })
 export class GcSearchResultsTableComponent implements OnInit, OnChanges {
   @Input() apiUrl: string;
+  @Input() size = DEFAULT_PAGE_SIZE;
+  @Input() filter: string;
   @Input() listOfFilter: string;
   @Input() listOfFields: string;
   @Input() listOfLabels: string;
@@ -33,19 +35,31 @@ export class GcSearchResultsTableComponent implements OnInit, OnChanges {
   @Input() searchId = Math.random().toString().slice(2, 5);
 
   apiConfiguration = inject(API_CONFIGURATION);
+  currentFilter = signal<string>('');
+  currentSize = signal(DEFAULT_PAGE_SIZE);
 
   filters = signal<string[]>([]);
   fields = signal<string[]>([]);
   labels = signal<string[]>([]);
 
+  #inputToField: Record<string, string>  = {
+    'listOfFilter': 'filters',
+    'listOfFields': 'fields',
+    'listOfLabels': 'labels'
+  }
+
   ngOnChanges(changes: SimpleChanges): void {
     Object.keys(changes).forEach(prop => {
       if (prop == 'apiUrl') {
         this.apiConfiguration.set(
           new Configuration({ basePath: changes['apiUrl'].currentValue })
         );
-      } else if (prop == 'listOfFields' || prop == 'listOfLabels') {
-        this[prop == 'listOfFields' ? 'fields' : 'labels'].set(
+      } else if (prop == 'filter') {
+        this['currentFilter'].set(changes[prop].currentValue);
+      } else if (prop == 'size') {
+        this['currentSize'].set(changes[prop].currentValue);
+      } else if (this.#inputToField[prop]) {
+        (this as any)[this.#inputToField[prop]].set(
           changes[prop].currentValue.split(',')
         );
       }
@@ -54,6 +68,8 @@ export class GcSearchResultsTableComponent implements OnInit, OnChanges {
 
   ngOnInit() {
     this.apiConfiguration.set(new Configuration({ basePath: this.apiUrl }));
+    this.currentFilter.set(this.filter);
+    this.currentSize.set(this.size);
     this.listOfFilter && this.filters.set(this.listOfFilter.split(','));
     this.listOfFields && this.fields.set(this.listOfFields.split(','));
     this.listOfLabels && this.labels.set(this.listOfLabels.split(','));