Merge pull request #516 from geonetwork/ui-sort-dropdown

feat: update select dropdown to match multiselect one
geonetwork · Sep 22, 2023 · f491bdb · f491bdb
2 parents 646215e + 1519aee
commit f491bdb
Show file tree

Hide file tree

Showing 22 changed files with 378 additions and 90 deletions.
diff --git a/apps/datafeeder/src/app/app.module.ts b/apps/datafeeder/src/app/app.module.ts
@@ -36,6 +36,7 @@ import { SummarizeIllustrationComponent } from './presentation/components/svg/su
 import { SummarizeBackgroundComponent } from './presentation/components/svg/summarize-background/summarize-background.component'
 import { DATAFEEDER_STATE_KEY, reducer } from './store/datafeeder.reducer'
 import { FeatureAuthModule } from '@geonetwork-ui/feature/auth'
+import { MatIconModule } from '@angular/material/icon'
 
 export function apiConfigurationFactory() {
   return new Configuration({
@@ -72,6 +73,7 @@ export function apiConfigurationFactory() {
     UiInputsModule,
     UiWidgetsModule,
     HttpClientModule,
+    MatIconModule,
     UtilI18nModule,
     FeatureEditorModule,
     ApiModule.forRoot(apiConfigurationFactory),

diff --git a/...mponents/data-import-validation-map-panel/data-import-validation-map-panel.component.html b/...mponents/data-import-validation-map-panel/data-import-validation-map-panel.component.html
@@ -23,6 +23,7 @@
         [choices]="footerList"
         (selectValue)="selectValue($event)"
         [selected]="selectedValue"
+        [extraBtnClass]="'secondary min-w-full'"
         ariaName="search-sort-by"
         *ngIf="footerList.length > 0"
       >

diff --git a/apps/datafeeder/src/index.html b/apps/datafeeder/src/index.html
@@ -11,6 +11,10 @@
       href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&family=Permanent+Marker&display=swap"
       rel="stylesheet"
     />
+    <link
+      href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined"
+      rel="stylesheet"
+    />
 
     <script src="assets/env.js"></script>
   </head>

diff --git a/apps/datafeeder/src/styles.css b/apps/datafeeder/src/styles.css
@@ -43,6 +43,11 @@ gn-ui-button button[type='button'].secondary {
   border-color: var(--color-primary);
   border-width: 1px;
 }
+
+gn-ui-dropdown-selector gn-ui-button button[type='button'].secondary {
+  border-width: 2px;
+}
+
 gn-ui-button button[type='button'].secondary:hover {
   background: var(--color-primary-darker);
   color: white;

diff --git a/libs/feature/dataviz/src/lib/chart-view/chart-view.component.html b/libs/feature/dataviz/src/lib/chart-view/chart-view.component.html
@@ -5,13 +5,15 @@
     <gn-ui-dropdown-selector
       class="basis-1/4"
       [choices]="typeChoices"
+      [extraBtnClass]="'secondary min-w-full'"
       (selectValue)="chartType$.next($event)"
       [selected]="chartType$.value"
       [title]="'chart.dropdown.type' | translate"
     ></gn-ui-dropdown-selector>
     <gn-ui-dropdown-selector
       class="basis-1/4"
       [choices]="xChoices$ | async"
+      [extraBtnClass]="'secondary min-w-full'"
       (selectValue)="xProperty$.next($event)"
       [selected]="xProperty$.value"
       [title]="'chart.dropdown.xProperty' | translate"

diff --git a/libs/feature/dataviz/src/lib/chart-view/chart-view.component.spec.ts b/libs/feature/dataviz/src/lib/chart-view/chart-view.component.spec.ts
@@ -39,6 +39,7 @@ export class MockChartComponent {
   template: '<div></div>',
 })
 export class MockDropdownSelectorComponent {
+  @Input() selected: any
   @Input() choices: unknown[]
   @Output() selectValue = new EventEmitter<any>()
 }

diff --git a/libs/feature/dataviz/src/lib/chart-view/chart-view.component.stories.ts b/libs/feature/dataviz/src/lib/chart-view/chart-view.component.stories.ts
@@ -13,22 +13,23 @@ import { ChartViewComponent } from './chart-view.component'
 import { ChartComponent, UiDatavizModule } from '@geonetwork-ui/ui/dataviz'
 import { LoadingMaskComponent } from '@geonetwork-ui/ui/widgets'
 import { importProvidersFrom } from '@angular/core'
-import { DropdownSelectorComponent } from '@geonetwork-ui/ui/inputs'
+import {
+  DropdownSelectorComponent,
+  UiInputsModule,
+} from '@geonetwork-ui/ui/inputs'
 import { MatProgressSpinner } from '@angular/material/progress-spinner'
+import { OverlayModule } from '@angular/cdk/overlay'
 
 export default {
   title: 'Smart/Dataviz/ChartView',
   component: ChartViewComponent,
   decorators: [
     moduleMetadata({
-      declarations: [
-        DropdownSelectorComponent,
-        LoadingMaskComponent,
-        MatProgressSpinner,
-      ],
       imports: [
         ChartComponent,
+        OverlayModule,
         TranslateModule.forRoot(TRANSLATE_DEFAULT_CONFIG),
+        UiInputsModule,
       ],
     }),
     applicationConfig({

diff --git a/libs/feature/dataviz/src/lib/chart-view/chart-view.component.ts b/libs/feature/dataviz/src/lib/chart-view/chart-view.component.ts
@@ -12,7 +12,7 @@ import {
   FieldAggregation,
   getJsonDataItemsProxy,
 } from '@geonetwork-ui/data-fetcher'
-import { DDChoices } from '@geonetwork-ui/ui/inputs'
+import { DropdownChoice } from '@geonetwork-ui/ui/inputs'
 import { BehaviorSubject, combineLatest, EMPTY, Observable } from 'rxjs'
 import {
   catchError,
@@ -24,10 +24,7 @@ import {
   tap,
 } from 'rxjs/operators'
 import { DataService } from '../service/data.service'
-import {
-  AggregationTypes,
-  InputChartType,
-} from '@geonetwork-ui/common/domain/dataviz-configuration.model'
+import { InputChartType } from '@geonetwork-ui/common/domain/dataviz-configuration.model'
 import { DatasetDistribution } from '@geonetwork-ui/common/domain/record'
 import { TranslateService } from '@ngx-translate/core'
 
@@ -93,7 +90,7 @@ export class ChartViewComponent {
   error = null
   errorInfo = null
 
-  typeChoices: DDChoices = [
+  typeChoices: DropdownChoice[] = [
     { label: 'chart.type.bar', value: 'bar' },
     { label: 'chart.type.barHorizontal', value: 'bar-horizontal' },
     { label: 'chart.type.line', value: 'line' },
@@ -111,7 +108,7 @@ export class ChartViewComponent {
       { label: 'chart.aggregation.min', value: 'min' },
       { label: 'chart.aggregation.average', value: 'average' },
       { label: 'chart.aggregation.count', value: 'count' },
-    ] as DDChoices
+    ] as DropdownChoice[]
   }
 
   dataset$: Observable<BaseReader> = this.currentLink$.pipe(

diff --git a/libs/feature/editor/src/lib/components/wizard-field/wizard-field.component.html b/libs/feature/editor/src/lib/components/wizard-field/wizard-field.component.html
@@ -64,6 +64,7 @@
         #dropdown
         [id]="wizardFieldConfig.id"
         [title]="''"
+        [extraBtnClass]="'secondary min-w-full'"
         [showTitle]="false"
         [choices]="dropdownChoices"
         [selected]="wizardFieldData"

diff --git a/libs/feature/editor/src/lib/components/wizard-field/wizard-field.component.ts b/libs/feature/editor/src/lib/components/wizard-field/wizard-field.component.ts
@@ -103,7 +103,7 @@ export class WizardFieldComponent implements AfterViewInit, OnDestroy {
         return data ? new Date(Number(data)) : new Date()
       }
       case WizardFieldType.DROPDOWN: {
-        return data ? JSON.parse(data) : this.dropdownChoices[1]
+        return data ? JSON.parse(data) : this.dropdownChoices[0]?.value
       }
     }
   }

diff --git a/libs/feature/record/src/lib/data-view/data-view.component.html b/libs/feature/record/src/lib/data-view/data-view.component.html
@@ -3,7 +3,7 @@
     *ngIf="dropdownChoices$ | async as choices"
     [title]="'table.select.data' | translate"
     class="mb-7 w-auto ml-auto"
-    extraClass="!text-primary font-sans font-medium"
+    extraBtnClass="!text-primary font-sans font-medium"
     [choices]="choices"
     (selectValue)="selectLink($event)"
   ></gn-ui-dropdown-selector>

diff --git a/libs/feature/record/src/lib/map-view/map-view.component.html b/libs/feature/record/src/lib/map-view/map-view.component.html
@@ -1,7 +1,7 @@
 <div class="w-full h-full flex flex-col p-1">
-  <div class="flex w-full justify-end mb-7 mt-1">
+  <div class="w-full mb-7 mt-1">
     <gn-ui-dropdown-selector
-      extraClass="!text-primary font-sans font-medium"
+      extraBtnClass="!text-primary font-sans font-medium"
       [title]="'map.select.layer' | translate"
       [choices]="dropdownChoices$ | async"
       (selectValue)="selectLinkToDisplay($event)"

diff --git a/libs/ui/catalog/src/lib/organisations-sort/organisations-sort.component.html b/libs/ui/catalog/src/lib/organisations-sort/organisations-sort.component.html
@@ -5,14 +5,12 @@
     <p translate>organisation.sort.intro</p>
   </span>
   <span class="flex flex-wrap sm:flex-nowrap sm:shrink-0">
-    <span class="mt-2 mr-2 opacity-75" translate>
-      organisation.sort.sortBy
-    </span>
     <gn-ui-dropdown-selector
-      [title]="''"
+      [title]="'organisation.sort.sortBy' | translate"
       class="shrink"
       [choices]="choices"
-      [showTitle]="false"
+      [minWidth]="'180px'"
+      [showTitle]="true"
       (selectValue)="selectOrderToDisplay($event)"
     ></gn-ui-dropdown-selector>
   </span>

diff --git a/libs/ui/catalog/src/lib/organisations-sort/organisations-sort.component.spec.ts b/libs/ui/catalog/src/lib/organisations-sort/organisations-sort.component.spec.ts
@@ -1,13 +1,30 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { OrganisationsSortComponent } from './organisations-sort.component'
+import { Component, EventEmitter, Input, Output } from '@angular/core'
+import { TranslateModule } from '@ngx-translate/core'
+
+@Component({
+  selector: 'gn-ui-dropdown-selector',
+  template: '',
+})
+class DropdownSelectorMockComponent {
+  @Input() showTitle: unknown
+  @Input() choices: {
+    value: unknown
+    label: string
+  }[]
+  @Input() selected: unknown
+  @Output() selectValue = new EventEmitter<unknown>()
+}
 
 describe('OrganisationsOrderComponent', () => {
   let component: OrganisationsSortComponent
   let fixture: ComponentFixture<OrganisationsSortComponent>
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [OrganisationsSortComponent],
+      declarations: [OrganisationsSortComponent, DropdownSelectorMockComponent],
+      imports: [TranslateModule.forRoot()],
     }).compileComponents()
 
     fixture = TestBed.createComponent(OrganisationsSortComponent)

diff --git a/libs/ui/inputs/src/index.ts b/libs/ui/inputs/src/index.ts
@@ -1,4 +1,6 @@
 export * from './lib/dropdown-selector/dropdown-selector.component'
+export * from './lib/dropdown-selector/dropdown-selector.model'
+export * from './lib/dropdown-multiselect/dropdown-multiselect.component'
 export * from './lib/dropdown-multiselect/dropdown-multiselect.model'
 export * from './lib/text-input/text-input.component'
 export * from './lib/chips-input/chips-input.component'

diff --git a/libs/ui/inputs/src/lib/button/button.component.ts b/libs/ui/inputs/src/lib/button/button.component.ts
@@ -55,15 +55,15 @@ export class ButtonComponent {
   get borderColor() {
     switch (this.type) {
       case 'default':
-        return 'focus:ring-4 focus:ring-gray-200'
+        return 'border border-gray-700 focus:ring-4 focus:ring-gray-200'
       case 'secondary':
-        return 'focus:ring-4 focus:ring-secondary-lightest'
+        return 'border border-secondary focus:ring-4 focus:ring-secondary-lightest'
       case 'primary':
-        return 'focus:ring-4 focus:ring-primary-lightest'
+        return 'border border-primary focus:ring-4 focus:ring-primary-lightest'
       case 'outline':
-        return 'border border-gray-300 -m-[1px] hover:border-primary-lighter focus:border-primary-lighter focus:ring-4 focus:ring-primary-lightest active:border-primary-darker'
+        return 'border border-gray-300 hover:border-primary-lighter focus:border-primary-lighter focus:ring-4 focus:ring-primary-lightest active:border-primary-darker'
       case 'light':
-        return 'focus:ring-4 focus:ring-gray-300'
+        return 'border border-white focus:ring-4 focus:ring-gray-300'
     }
   }
 

diff --git a/libs/ui/inputs/src/lib/dropdown-multiselect/dropdown-multiselect.component.stories.ts b/libs/ui/inputs/src/lib/dropdown-multiselect/dropdown-multiselect.component.stories.ts
@@ -9,13 +9,14 @@ import { OverlayModule } from '@angular/cdk/overlay'
 import { MatCheckboxModule } from '@angular/material/checkbox'
 import { TranslateModule } from '@ngx-translate/core'
 import { MatIcon } from '@angular/material/icon'
+import { ButtonComponent } from '../button/button.component'
 
 export default {
   title: 'Inputs/DropdownMultiselectComponent',
   component: DropdownMultiselectComponent,
   decorators: [
     moduleMetadata({
-      declarations: [MatIcon],
+      declarations: [MatIcon, ButtonComponent],
       imports: [OverlayModule, MatCheckboxModule, TranslateModule.forRoot()],
     }),
     componentWrapperDecorator(

diff --git a/libs/ui/inputs/src/lib/dropdown-selector/dropdown-selector.component.html b/libs/ui/inputs/src/lib/dropdown-selector/dropdown-selector.component.html
@@ -1,27 +1,73 @@
-<div class="flex flex-col items-start sm:flex-row sm:items-center relative">
-  <label
+<div
+  class="flex items-start flex-col sm:flex-row sm:items-center relative w-full"
+>
+  <span
     *ngIf="showTitle"
     class="tracking-wide text-sm mb-2 sm:mb-0 sm:mr-2 whitespace-nowrap"
     [attr.for]="id"
   >
     {{ title }}
-  </label>
-  <select
-    [id]="id"
-    (change)="this.selectValue.emit($event.target.value)"
-    class="w-full min-w-[66px] truncate text-main bg-white border border-gray-300 py-[10px] px-2 rounded-[0.25em] cursor-pointer leading-tight focus:outline-none hover:text-primary-darker hover:border-primary-lighter focus:ring-primary-lightest focus:ring-4"
-    [ngClass]="extraClass"
-    [class.w-full]="!showTitle"
+  </span>
+  <gn-ui-button
+    type="outline"
+    class="grow min-w-0"
+    extraClass="!p-[8px] !pl-[16px] flex flex-row w-full {{ extraBtnClass }}"
+    [title]="title"
+    [attr.aria-owns]="id"
+    (buttonClick)="openOverlay()"
+    cdkOverlayOrigin
+    #overlayOrigin="cdkOverlayOrigin"
+    (keydown)="handleTriggerKeydown($event)"
   >
-    <option
+    <div class="grow font-medium truncate py-1 mr-2 text-left">
+      {{ getChoiceLabel() | translate }}
+    </div>
+    <mat-icon class="material-symbols-outlined shrink-0 opacity-40">
+      <ng-container *ngIf="overlayOpen">expand_less</ng-container>
+      <ng-container *ngIf="!overlayOpen">expand_more</ng-container>
+    </mat-icon>
+  </gn-ui-button>
+</div>
+
+<ng-template
+  cdkConnectedOverlay
+  cdkConnectedOverlayHasBackdrop
+  cdkConnectedOverlayBackdropClass="cdk-overlay-transparent-backdrop"
+  [cdkConnectedOverlayOrigin]="overlayOrigin"
+  [cdkConnectedOverlayOpen]="overlayOpen"
+  [cdkConnectedOverlayPositions]="overlayPositions"
+  [cdkConnectedOverlayFlexibleDimensions]="true"
+  (backdropClick)="closeOverlay()"
+  (detach)="closeOverlay()"
+>
+  <div
+    class="bg-white border border-gray-300 rounded shadow-lg py-2 w-full overflow-x-hidden overflow-y-auto overlay-container"
+    [style.max-height]="overlayMaxHeight"
+    [style.min-width]="overlayWidth"
+    role="listbox"
+    tabindex="-1"
+    [attr.id]="id"
+    [attr.aria-multiselectable]="true"
+    [attr.aria-label]="title"
+    (keydown)="handleOverlayKeydown($event)"
+  >
+    <button
+      #choiceInputs
+      type="button"
       *ngFor="let choice of choices"
-      [value]="choice.value"
-      [selected]="isSelected(choice)"
+      [title]="choice.label"
+      class="flex px-5 py-1 w-full cursor-pointer transition-colors"
+      [ngClass]="
+        isSelected(choice)
+          ? 'text-white bg-primary hover:text-white hover:bg-primary-darker focus:text-white focus:bg-primary-darker'
+          : 'text-gray-900 hover:text-primary-darkest hover:bg-gray-50 focus:text-primary-darkest focus:bg-gray-50'
+      "
+      (click)="onSelectValue(choice)"
+      (keydown)="selectIfEnter($event, choice)"
     >
-      {{ choice.label | translate }}
-    </option>
-  </select>
-  <div
-    class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-800"
-  ></div>
-</div>
+      <span class="text-[14px]">
+        {{ choice.label | translate }}
+      </span>
+    </button>
+  </div>
+</ng-template>