#79 :: Filter Select :: select filter definition.

AbsaOSS · Jul 19, 2021 · 8e8fc3f · 8e8fc3f
1 parent 41c8a1e
commit 8e8fc3f
Show file tree

Hide file tree

Showing 20 changed files with 180 additions and 53 deletions.
diff --git a/ui/angular.json b/ui/angular.json
@@ -75,6 +75,11 @@
                                 "input": "projects/spline-common/dynamic-table/assets",
                                 "output": "/assets"
                             },
+                            {
+                                "glob": "**/*",
+                                "input": "projects/spline-common/dynamic-filter/filter-controls/assets",
+                                "output": "/assets"
+                            },
                             {
                                 "glob": "**/*",
                                 "input": "projects/spline-shared/main/assets",

diff --git a/.../dynamic-filter/filter-controls/assets/i18n/common.dynamic-filter.filter-controls/en.json b/.../dynamic-filter/filter-controls/assets/i18n/common.dynamic-filter.filter-controls/en.json
@@ -0,0 +1,11 @@
+{
+    "COMMON" : {
+        "DF" : {
+            "FILTER_CONTROLS" : {
+                "SELECT": {
+                    "LABEL__ALL_SELECTED": "All"
+                }
+            }
+        }
+    }
+}
diff --git a/.../filter-controls/src/select/components/df-control-select/df-control-select.component.html b/.../filter-controls/src/select/components/df-control-select/df-control-select.component.html
@@ -15,13 +15,15 @@
   -->
 
 <spline-inline-filter-with-overlay
-        [label]="model.options.label"
+        #overlayRef
+        [label]="model.label"
+        [icon]="model.icon"
+        [filterStringValues]="stringValues$ | async"
         (apply$)="onApply()"
-        (reset$)="onReset()"
-        [icon]="model.options.icon"
-        [filterStringValues]="stringValue$ | async">
+        (reset$)="onReset()">
 
-    <spline-list-box [splineListBoxRecords]="model.options.records"
+    <spline-list-box *ngIf="overlayRef.isOpened"
+                     [splineListBoxRecords]="model.records$ | async"
                      [ngModel]="model.value$ | async"
                      ngDefaultControl
                      [dataMap]="model.options.dataMap">

diff --git a/...er/filter-controls/src/select/components/df-control-select/df-control-select.component.ts b/...er/filter-controls/src/select/components/df-control-select/df-control-select.component.ts
@@ -15,7 +15,7 @@
  */
 
 import { ChangeDetectionStrategy, Component, Input, OnInit, ViewChild } from '@angular/core'
-import { BehaviorSubject } from 'rxjs'
+import { Observable } from 'rxjs'
 import { map, takeUntil } from 'rxjs/operators'
 import { SplineListBoxComponent } from 'spline-common'
 import { BaseDynamicFilterControlComponent } from 'spline-common/dynamic-filter'
@@ -34,28 +34,28 @@ export class DfControlSelectComponent<TId = string>
 
     @ViewChild(SplineListBoxComponent) splineListBoxComponent: SplineListBoxComponent
 
-    readonly stringValue$ = new BehaviorSubject<string>('')
-
     @Input() model: DfControlSelect.Model<TId>
 
+    readonly defaultValueLabelAllSelected = 'COMMON.DF.FILTER_CONTROLS.SELECT.LABEL__ALL_SELECTED'
+
+    stringValues$: Observable<string[]>
+
     ngOnInit(): void {
-        (this.model.value$)
+
+        this.stringValues$ = this.model.value$
             .pipe(
                 takeUntil(this.destroyed$),
-                map(
-                    value => value?.length
+                map(value => {
+                    return value?.length
                         ? (value as any[])
                             .map(
                                 item => this.model.options.dataMap?.valueToString
                                     ? this.model.options.dataMap.valueToString(item)
                                     : item
                             )
-                            .join(', ')
-                        : 'All'
-                )
-            )
-            .subscribe(
-                stringValue => this.stringValue$.next(stringValue)
+                        : [this.model.options?.valueLabelAllSelected ?? this.defaultValueLabelAllSelected]
+
+                }),
             )
     }
 

diff --git a/...jects/spline-common/dynamic-filter/filter-controls/src/select/df-control-select.module.ts b/...jects/spline-common/dynamic-filter/filter-controls/src/select/df-control-select.module.ts
@@ -19,6 +19,7 @@ import { NgModule } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { SplineInlineFilterModule, SplineListBoxModule } from 'spline-common'
 import { DF_CONTROL_FACTORY, DynamicFilterControlManager, DynamicFilterModule } from 'spline-common/dynamic-filter'
+import { SplineTranslateModule } from 'spline-utils/translate'
 
 import { DfControlSelectComponent } from './components'
 import { DfControlSelectFactory } from './services/df-control-select.factory'
@@ -27,11 +28,13 @@ import { DfControlSelectFactory } from './services/df-control-select.factory'
 @NgModule({
     imports: [
         CommonModule,
+        FormsModule,
+        ReactiveFormsModule,
+
+        SplineTranslateModule.forChild(),
         DynamicFilterModule,
         SplineInlineFilterModule,
-        SplineListBoxModule,
-        ReactiveFormsModule,
-        FormsModule
+        SplineListBoxModule
     ],
     declarations: [
         DfControlSelectComponent

diff --git a/...pline-common/dynamic-filter/filter-controls/src/select/models/df-control-select.models.ts b/...pline-common/dynamic-filter/filter-controls/src/select/models/df-control-select.models.ts
@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+import { BehaviorSubject, Observable } from 'rxjs'
 import { SplineListBox } from 'spline-common'
 import { BaseDynamicFilterControlModel, DynamicFilterControlModelConfig } from 'spline-common/dynamic-filter'
 
@@ -25,25 +26,49 @@ export namespace DfControlSelect {
     export type Value<TValue = unknown> = TValue[]
 
     export type Options<TRecord = unknown, TValue = unknown> = {
-        label: string
-        icon: string
-        records: TRecord[]
-        dataMap: SplineListBox.DataMap<TRecord, TValue>
+        dataMap?: SplineListBox.DataMap<TRecord, TValue>
+        valueLabelAllSelected?: string
     }
 
     export type Config<TRecord = unknown, TValue = unknown> =
         & DynamicFilterControlModelConfig<Value<TValue>, Options<TRecord, TValue>>
         &
         {
+            label: string
+            icon: string
+            records?: TRecord[]
             options: Options<TRecord, TValue>
         }
 
     export class Model<TId = string, TRecord = unknown, TValue = unknown>
         extends BaseDynamicFilterControlModel<Value<TValue>, Options<TRecord, TValue>, TId> {
         readonly type = TYPE
 
+        readonly label: string
+        readonly icon: string
+        readonly records$: Observable<TRecord[]>
+
+        private readonly _records$ = new BehaviorSubject<TRecord[]>([])
+
         constructor(id: TId, config: Config<TRecord, TValue>) {
             super(id, config)
+
+            if (config.records) {
+                this.records = config.records
+            }
+
+            this.icon = config.icon
+            this.label = config.label
+
+            this.records$ = this._records$.asObservable()
+        }
+
+        set records(records: TRecord[]) {
+            this._records$.next(records)
+        }
+
+        get records(): TRecord[] {
+            return this._records$.getValue()
         }
     }
 

diff --git a/ui/projects/spline-common/dynamic-filter/main/assets/i18n/shared-dynamic-table/en.json b/ui/projects/spline-common/dynamic-filter/main/assets/i18n/shared-dynamic-table/en.json
diff --git a/...ojects/spline-common/dynamic-filter/main/src/core/models/dynamic-filter-control.models.ts b/...ojects/spline-common/dynamic-filter/main/src/core/models/dynamic-filter-control.models.ts
@@ -15,7 +15,7 @@
  */
 
 import { EventEmitter, InjectionToken } from '@angular/core'
-import { BehaviorSubject, Observable } from 'rxjs'
+import { BehaviorSubject, Observable, Subject } from 'rxjs'
 import { filter, map } from 'rxjs/operators'
 import { GenericEvent, IDynamicComponentFactory, SplineRecord } from 'spline-utils'
 
@@ -47,6 +47,7 @@ implements IDynamicFilterControlModel<TValue, TOptions, TId> {
     readonly id: TId
     readonly valueChanged$: Observable<TValue>
     readonly value$: Observable<TValue>
+    protected readonly destroyed$ = new Subject<void>()
 
     protected _options: TOptions = {} as TOptions
 
@@ -91,6 +92,11 @@ implements IDynamicFilterControlModel<TValue, TOptions, TId> {
     patchValue(value: TValue, emitEvent = true): void {
         this._state$.next({ value, emitEvent })
     }
+
+    destroy(): void {
+        this.destroyed$.next()
+        this.destroyed$.complete()
+    }
 }
 
 export type DynamicFilterControlsMap<TFilter extends SplineRecord> = {

diff --git a/ui/projects/spline-common/main/assets/i18n/common/en.json b/ui/projects/spline-common/main/assets/i18n/common/en.json
@@ -27,6 +27,10 @@
         "DATE_FILTER__EMPTY_VALUE_LABEL": "Everything",
         "LIST_BOX": {
             "SELECT_ALL_LABEL": "(Select All)"
+        },
+        "DATA_SOURCE_WRITE_MODE": {
+            "APPEND": "Append",
+            "OVERRIDE": "Override"
         }
     }
 }
diff --git a/...ne-fitler/components/filter-with-overlay/spline-inline-filter-with-overlay.component.html b/...ne-fitler/components/filter-with-overlay/spline-inline-filter-with-overlay.component.html
@@ -18,7 +18,14 @@
 <spline-inline-filter [icon]="icon"
                       [matMenuTriggerFor]="overlay"
                       [label]="label">
-    {{ filterStringValues }}
+
+    <spline-long-text>
+        <ng-container *ngFor="let value of _filterStringValues; let last = last">
+            {{ value | translate }}
+            <ng-container *ngIf="!last">, </ng-container>
+        </ng-container>
+    </spline-long-text>
+
 </spline-inline-filter>
 
 <mat-menu #overlay="matMenu" class="spline-inline-filter-overlay">

diff --git a/...line-fitler/components/filter-with-overlay/spline-inline-filter-with-overlay.component.ts b/...line-fitler/components/filter-with-overlay/spline-inline-filter-with-overlay.component.ts
@@ -29,7 +29,9 @@ export class SplineInlineFilterWithOverlayComponent {
 
     @Input() icon: string
     @Input() label: string
-    @Input() filterStringValues: string[] = []
+    @Input() set filterStringValues(value: string[] | string) {
+        this._filterStringValues = Array.isArray(value) ? value : [value]
+    }
 
     @Input() showActions = true
     @Input() applyBtnDisabled = false
@@ -43,6 +45,11 @@ export class SplineInlineFilterWithOverlayComponent {
 
     @ViewChild(MatMenuTrigger, { static: false }) matMenuTrigger: MatMenuTrigger
 
+    _filterStringValues: string[] = []
+
+    get isOpened(): boolean {
+        return this.matMenuTrigger?.menuOpen ?? false
+    }
 
     onClearBtnClicked(): void {
         this.reset$.emit()

diff --git a/...ects/spline-common/main/src/common/component/inline-fitler/spline-inline-filter.module.ts b/...ects/spline-common/main/src/common/component/inline-fitler/spline-inline-filter.module.ts
@@ -22,6 +22,7 @@ import { MatMenuModule } from '@angular/material/menu'
 import { SplineTranslateModule } from 'spline-utils/translate'
 
 import { SplineIconModule } from '../icon'
+import { SplineLongTextModule } from '../long-text'
 
 import { splineInlineFiltersComponents } from './components'
 
@@ -38,6 +39,7 @@ import { splineInlineFiltersComponents } from './components'
         SplineIconModule,
         MatMenuModule,
         SplineTranslateModule,
+        SplineLongTextModule,
     ],
     exports: [
         ...splineInlineFiltersComponents

diff --git a/...mon/main/src/common/component/list-box/components/list-box/spline-list-box.component.html b/...mon/main/src/common/component/list-box/components/list-box/spline-list-box.component.html
@@ -56,7 +56,7 @@
                 </div>
 
                 <div class="spline-selection-list-option__label">
-                    {{ option.label }}
+                    {{ option.label | translate }}
                 </div>
             </div>
             <!-- OPTIONS -->

diff --git a/...ommon/main/src/common/component/list-box/components/list-box/spline-list-box.component.ts b/...ommon/main/src/common/component/list-box/components/list-box/spline-list-box.component.ts
@@ -15,7 +15,7 @@
  */
 
 import { SelectionModel } from '@angular/cdk/collections'
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, OnInit, Optional, Output, SimpleChanges } from '@angular/core'
+import { Component, EventEmitter, Input, OnChanges, OnInit, Optional, Output, SimpleChanges } from '@angular/core'
 import { ControlValueAccessor, NgControl } from '@angular/forms'
 import { MatPseudoCheckboxState } from '@angular/material/core'
 import { isEqual } from 'lodash-es'
@@ -28,7 +28,6 @@ import { SplineListBox } from '../../models'
 @Component({
     selector: 'spline-list-box',
     templateUrl: './spline-list-box.component.html',
-    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class SplineListBoxComponent<TValue = unknown> extends BaseComponent
     implements OnChanges, OnInit, ControlValueAccessor {

diff --git a/ui/projects/spline-common/main/src/common/models/data-source-write-mode.models.ts b/ui/projects/spline-common/main/src/common/models/data-source-write-mode.models.ts
@@ -0,0 +1,47 @@
+/*
+ * Copyright 2021 ABSA Group Limited
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { DataSourceWriteMode } from 'spline-api'
+
+
+export type DataSourceWriteModeInfo = {
+    writeMode: DataSourceWriteMode
+    label: string
+}
+
+export function getDataSourceWriteModeLabel(writeMode: DataSourceWriteMode): string {
+    const prefix = 'COMMON.DATA_SOURCE_WRITE_MODE'
+
+    switch (writeMode) {
+        case DataSourceWriteMode.Append:
+            return `${prefix}.APPEND`
+
+        case DataSourceWriteMode.Overwrite:
+            return `${prefix}.OVERRIDE`
+
+        default:
+            console.warn(`Unknown write mode: ${writeMode}`)
+            return writeMode as string
+    }
+}
+
+export function getDataSourceWriteModeInfoList(): DataSourceWriteModeInfo[] {
+    return Object.values(DataSourceWriteMode)
+        .map(writeMode => ({
+            writeMode,
+            label: getDataSourceWriteModeLabel(writeMode)
+        }))
+}
diff --git a/ui/projects/spline-common/main/src/common/models/public-api.ts b/ui/projects/spline-common/main/src/common/models/public-api.ts
@@ -15,4 +15,5 @@
  */
 
 export * from './spline-colors.models'
+export * from './data-source-write-mode.models'
 export * from './animations/slide-x-in-out.animation.models'
diff --git a/ui/projects/spline-utils/translate/src/spline-translate.module.ts b/ui/projects/spline-utils/translate/src/spline-translate.module.ts
@@ -63,7 +63,7 @@ export class SplineTranslateModule {
         translate.setDefaultLang(config.defaultLang)
     }
 
-    static forChild(config: SplineTranslateChildConfig): ModuleWithProviders<SplineTranslateModule> {
+    static forChild(config: SplineTranslateChildConfig = {}): ModuleWithProviders<SplineTranslateModule> {
         return {
             ngModule: SplineTranslateModule,
             providers: [

diff --git a/ui/src/app/app.module.ts b/ui/src/app/app.module.ts
@@ -106,6 +106,7 @@ export const metaReducers: MetaReducer<any>[] =
                 toAssetsFilePath('shared-expression'),
                 toAssetsFilePath('common-graph'),
                 toAssetsFilePath('common-layout'),
+                toAssetsFilePath('common.dynamic-filter.filter-controls'),
             ]
         },
         { provide: ErrorHandler, useClass: SplineGlobalErrorHandler },