SED-3278 Allow reset of dropdowns and search for empty values (#913)

* SED-3278 Allow reset of dropdowns and search for empty values * SED-3278 Allow reset of dropdowns and search for empty values. Improvements * SED-3278 Allow reset of dropdowns and search for empty values. Revert unset filter
exense · Aug 12, 2024 · 739d25b · 739d25b
1 parent 2df47fb
commit 739d25b
Show file tree

Hide file tree

Showing 11 changed files with 57 additions and 14 deletions.
diff --git a/.../lib/modules/basics/components/array-filter-advanced/array-filter-advanced.component.html b/.../lib/modules/basics/components/array-filter-advanced/array-filter-advanced.component.html
@@ -1,5 +1,10 @@
 <step-form-field [matTooltip]="(invalidFilterMessage$ | async)!">
   <mat-select [multiple]="true" [formControl]="filterControl">
+    @if (useUnsetItem()) {
+      <mat-option class="unset-item" [value]="UNSET_VALUE">
+        <span class="unset-content">unset</span>
+      </mat-option>
+    }
     @for (item of displayItems(); track item.key) {
       <mat-option [value]="item.key">{{ item.value }}</mat-option>
     }

diff --git a/.../lib/modules/basics/components/array-filter-advanced/array-filter-advanced.component.scss b/.../lib/modules/basics/components/array-filter-advanced/array-filter-advanced.component.scss
@@ -0,0 +1,12 @@
+@use 'projects/step-core/styles/core-variables' as var;
+
+.unset-item {
+  border-bottom: solid 0.1rem;
+}
+
+.unset-content::before {
+  content: '(';
+}
+.unset-content::after {
+  content: ')';
+}
diff --git a/...rc/lib/modules/basics/components/array-filter-advanced/array-filter-advanced.component.ts b/...rc/lib/modules/basics/components/array-filter-advanced/array-filter-advanced.component.ts
@@ -1,19 +1,12 @@
-import {
-  Component,
-  computed,
-  forwardRef,
-  input,
-  Input,
-  OnChanges,
-  SimpleChanges,
-  TrackByFunction,
-} from '@angular/core';
+import { Component, computed, forwardRef, input, Input } from '@angular/core';
 import { ArrayItemLabelValueExtractor } from '../../injectables/array-item-label-value-extractor';
 import { KeyValue } from '@angular/common';
 import { BaseFilterComponent } from '../base-filter/base-filter.component';
 import { FormBuilder, FormControl } from '@angular/forms';
 import { map, Observable } from 'rxjs';
 
+export const UNSET_VALUE = 'unset';
+
 @Component({
   selector: 'step-array-filter-advanced',
   templateUrl: './array-filter-advanced.component.html',
@@ -27,10 +20,15 @@ import { map, Observable } from 'rxjs';
 })
 export class ArrayFilterAdvancedComponent<T = unknown> extends BaseFilterComponent<string[], unknown> {
   /** @Input() **/
-  items = input<T[] | ReadonlyArray<T>>([]);
+  readonly items = input<T[] | ReadonlyArray<T>>([]);
+
+  /** @Input() **/
+  readonly extractor = input<ArrayItemLabelValueExtractor<T, unknown> | undefined>(undefined);
 
   /** @Input() **/
-  extractor = input<ArrayItemLabelValueExtractor<T, unknown> | undefined>(undefined);
+  readonly useUnsetItem = input(false);
+
+  protected readonly UNSET_VALUE = UNSET_VALUE;
 
   protected displayItems = computed<KeyValue<unknown, string>[]>(() => {
     const items = this.items();

diff --git a/...rc/lib/modules/custom-forms/components/custom-form-input/custom-form-input.component.scss b/...rc/lib/modules/custom-forms/components/custom-form-input/custom-form-input.component.scss
@@ -1,3 +1,7 @@
+@use 'projects/step-core/styles/core-mixins' as m;
+
 :host.disabled {
   pointer-events: none;
 }
+
+@include m.unset-item;
diff --git a/.../custom-forms/components/custom-form-input/dynamic-label-custom-form-input.component.html b/.../custom-forms/components/custom-form-input/dynamic-label-custom-form-input.component.html
@@ -12,6 +12,7 @@
   @case (InputType.DROPDOWN) {
     <ng-template #dropdownItemTemplate let-item>{{ item }}</ng-template>
     <step-editable-dropdown-label
+      [useUnsetItem]="true"
       [labelTemplate]="labelTemplate"
       [items]="dropdownItems()"
       [itemTemplate]="dropdownItemTemplate"

diff --git a/...dules/custom-forms/components/custom-form-input/standard-custom-form-input.component.html b/...dules/custom-forms/components/custom-form-input/standard-custom-form-input.component.html
@@ -19,6 +19,9 @@
         (ngModelChange)="onValueChange($event)"
         (blur)="invokeTouch()"
       >
+        @if (!!value) {
+          <mat-option class="unset-item" [value]="null">unset</mat-option>
+        }
         @for (item of dropdownItems(); track item) {
           <mat-option [value]="item">{{ item }}</mat-option>
         }

diff --git a/...editable-labels/components/editable-dropdown-label/editable-dropdown-label.component.html b/...editable-labels/components/editable-dropdown-label/editable-dropdown-label.component.html
@@ -18,6 +18,9 @@
     <step-form-field>
       <mat-select [ngModel]="value" (ngModelChange)="onValueChange($event)" (openedChange)="onOpenedChange($event)">
         <ng-container [stepZIndex]="1050">
+          @if (useUnsetItem() && !!value) {
+            <mat-option class="unset-item" [value]="null">unset</mat-option>
+          }
           @for (item of items; track item) {
             <mat-option [value]="item">
               <ng-container *ngTemplateOutlet="itemTemplate(); context: { $implicit: item }" />

diff --git a/...editable-labels/components/editable-dropdown-label/editable-dropdown-label.component.scss b/...editable-labels/components/editable-dropdown-label/editable-dropdown-label.component.scss
@@ -1,4 +1,5 @@
 @use 'projects/step-core/styles/core-variables' as var;
+@use 'projects/step-core/styles/core-mixins' as m;
 
 :host {
   position: relative;
@@ -36,3 +37,5 @@
     background: var.$gray-50;
   }
 }
+
+@include m.unset-item;
diff --git a/...s/editable-labels/components/editable-dropdown-label/editable-dropdown-label.component.ts b/...s/editable-labels/components/editable-dropdown-label/editable-dropdown-label.component.ts
@@ -50,6 +50,9 @@ export class EditableDropdownLabelComponent<T> extends EditableComponent<T> {
     () => (this.itemTemplateDirective()?.templateRef as ItemTemplateRef<T>) ?? this.itemTemplateInput(),
   );
 
+  /** @Input() **/
+  readonly useUnsetItem = input(false);
+
   protected override onValueChange(value: T): void {
     super.onValueChange(value);
     this.focusedElement = this.matSelectElementRef!.nativeElement;

diff --git a/projects/step-core/src/lib/modules/table/shared/array-filter-condition.ts b/projects/step-core/src/lib/modules/table/shared/array-filter-condition.ts
@@ -1,4 +1,4 @@
-import { CompareCondition } from '../../basics/step-basics.module';
+import { CompareCondition, UNSET_VALUE } from '../../basics/step-basics.module';
 import { TableCollectionFilter, TableRequestFilter } from '../../../client/step-client-module';
 import { FilterCondition } from './filter-condition';
 import { FilterConditionType } from './filter-condition-type.enum';
@@ -20,7 +20,7 @@ export class ArrayFilterCondition extends FilterCondition<string[]> {
     const children = valueArray.map((value) => ({
       field,
       type: CompareCondition.EQUALS,
-      expectedValue: value,
+      expectedValue: value === UNSET_VALUE ? null : value,
     }));
 
     const arrayFilter: TableCollectionFilter = {

diff --git a/projects/step-core/styles/_core-mixins.scss b/projects/step-core/styles/_core-mixins.scss
@@ -60,3 +60,14 @@
     margin-bottom: 0;
   }
 }
+
+@mixin unset-item {
+  .unset-item {
+    text-decoration: underline;
+    font-style: italic;
+    color: var.$blue-650;
+    min-height: 3rem;
+    font-size: 1.4rem;
+    padding-left: calc(100% - 5rem);
+  }
+}