From 8e8fc3fab139718293235faaca6aa00f8496e03a Mon Sep 17 00:00:00 2001 From: Oleksandr Korchak Date: Mon, 19 Jul 2021 17:53:33 +0200 Subject: [PATCH] #79 :: Filter Select :: select filter definition. --- ui/angular.json | 5 ++ .../en.json | 11 +++++ .../df-control-select.component.html | 12 +++-- .../df-control-select.component.ts | 24 +++++----- .../src/select/df-control-select.module.ts | 9 ++-- .../select/models/df-control-select.models.ts | 33 +++++++++++-- .../assets/i18n/shared-dynamic-table/en.json | 8 ---- .../models/dynamic-filter-control.models.ts | 8 +++- .../main/assets/i18n/common/en.json | 4 ++ ...-inline-filter-with-overlay.component.html | 9 +++- ...ne-inline-filter-with-overlay.component.ts | 9 +++- .../spline-inline-filter.module.ts | 2 + .../list-box/spline-list-box.component.html | 2 +- .../list-box/spline-list-box.component.ts | 3 +- .../models/data-source-write-mode.models.ts | 47 +++++++++++++++++++ .../main/src/common/models/public-api.ts | 1 + .../translate/src/spline-translate.module.ts | 2 +- ui/src/app/app.module.ts | 1 + .../events-list/events-list.page.component.ts | 14 +++--- .../events-list/events-list.page.models.ts | 29 ++++++++---- 20 files changed, 180 insertions(+), 53 deletions(-) create mode 100644 ui/projects/spline-common/dynamic-filter/filter-controls/assets/i18n/common.dynamic-filter.filter-controls/en.json delete mode 100644 ui/projects/spline-common/dynamic-filter/main/assets/i18n/shared-dynamic-table/en.json create mode 100644 ui/projects/spline-common/main/src/common/models/data-source-write-mode.models.ts diff --git a/ui/angular.json b/ui/angular.json index 0a6c9bb8..283c928f 100644 --- 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/ui/projects/spline-common/dynamic-filter/filter-controls/assets/i18n/common.dynamic-filter.filter-controls/en.json b/ui/projects/spline-common/dynamic-filter/filter-controls/assets/i18n/common.dynamic-filter.filter-controls/en.json new file mode 100644 index 00000000..aba81582 --- /dev/null +++ b/ui/projects/spline-common/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/ui/projects/spline-common/dynamic-filter/filter-controls/src/select/components/df-control-select/df-control-select.component.html b/ui/projects/spline-common/dynamic-filter/filter-controls/src/select/components/df-control-select/df-control-select.component.html index 238924ad..98dd551f 100644 --- a/ui/projects/spline-common/dynamic-filter/filter-controls/src/select/components/df-control-select/df-control-select.component.html +++ b/ui/projects/spline-common/dynamic-filter/filter-controls/src/select/components/df-control-select/df-control-select.component.html @@ -15,13 +15,15 @@ --> + (reset$)="onReset()"> - diff --git a/ui/projects/spline-common/dynamic-filter/filter-controls/src/select/components/df-control-select/df-control-select.component.ts b/ui/projects/spline-common/dynamic-filter/filter-controls/src/select/components/df-control-select/df-control-select.component.ts index 1a839d12..96289236 100644 --- a/ui/projects/spline-common/dynamic-filter/filter-controls/src/select/components/df-control-select/df-control-select.component.ts +++ b/ui/projects/spline-common/dynamic-filter/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 @ViewChild(SplineListBoxComponent) splineListBoxComponent: SplineListBoxComponent - readonly stringValue$ = new BehaviorSubject('') - @Input() model: DfControlSelect.Model + readonly defaultValueLabelAllSelected = 'COMMON.DF.FILTER_CONTROLS.SELECT.LABEL__ALL_SELECTED' + + stringValues$: Observable + 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/ui/projects/spline-common/dynamic-filter/filter-controls/src/select/df-control-select.module.ts b/ui/projects/spline-common/dynamic-filter/filter-controls/src/select/df-control-select.module.ts index e489468d..c4f6ad17 100644 --- a/ui/projects/spline-common/dynamic-filter/filter-controls/src/select/df-control-select.module.ts +++ b/ui/projects/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/ui/projects/spline-common/dynamic-filter/filter-controls/src/select/models/df-control-select.models.ts b/ui/projects/spline-common/dynamic-filter/filter-controls/src/select/models/df-control-select.models.ts index c9de5530..263d0e62 100644 --- a/ui/projects/spline-common/dynamic-filter/filter-controls/src/select/models/df-control-select.models.ts +++ b/ui/projects/spline-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,16 +26,17 @@ export namespace DfControlSelect { export type Value = TValue[] export type Options = { - label: string - icon: string - records: TRecord[] - dataMap: SplineListBox.DataMap + dataMap?: SplineListBox.DataMap + valueLabelAllSelected?: string } export type Config = & DynamicFilterControlModelConfig, Options> & { + label: string + icon: string + records?: TRecord[] options: Options } @@ -42,8 +44,31 @@ export namespace DfControlSelect { extends BaseDynamicFilterControlModel, Options, TId> { readonly type = TYPE + readonly label: string + readonly icon: string + readonly records$: Observable + + private readonly _records$ = new BehaviorSubject([]) + constructor(id: TId, config: Config) { 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 deleted file mode 100644 index 602aeef3..00000000 --- a/ui/projects/spline-common/dynamic-filter/main/assets/i18n/shared-dynamic-table/en.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "SHARED": { - "DYNAMIC_TABLE": { - "DS_WRITE_MODE__APPEND": "Append", - "DS_WRITE_MODE__OVERRIDE": "Override" - } - } -} diff --git a/ui/projects/spline-common/dynamic-filter/main/src/core/models/dynamic-filter-control.models.ts b/ui/projects/spline-common/dynamic-filter/main/src/core/models/dynamic-filter-control.models.ts index e8e077fe..ee3cc559 100644 --- a/ui/projects/spline-common/dynamic-filter/main/src/core/models/dynamic-filter-control.models.ts +++ b/ui/projects/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 { readonly id: TId readonly valueChanged$: Observable readonly value$: Observable + protected readonly destroyed$ = new Subject() protected _options: TOptions = {} as TOptions @@ -91,6 +92,11 @@ implements IDynamicFilterControlModel { patchValue(value: TValue, emitEvent = true): void { this._state$.next({ value, emitEvent }) } + + destroy(): void { + this.destroyed$.next() + this.destroyed$.complete() + } } export type DynamicFilterControlsMap = { diff --git a/ui/projects/spline-common/main/assets/i18n/common/en.json b/ui/projects/spline-common/main/assets/i18n/common/en.json index a6615cda..926d8ed4 100644 --- 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/ui/projects/spline-common/main/src/common/component/inline-fitler/components/filter-with-overlay/spline-inline-filter-with-overlay.component.html b/ui/projects/spline-common/main/src/common/component/inline-fitler/components/filter-with-overlay/spline-inline-filter-with-overlay.component.html index 7d3984df..66d2762a 100644 --- a/ui/projects/spline-common/main/src/common/component/inline-fitler/components/filter-with-overlay/spline-inline-filter-with-overlay.component.html +++ b/ui/projects/spline-common/main/src/common/component/inline-fitler/components/filter-with-overlay/spline-inline-filter-with-overlay.component.html @@ -18,7 +18,14 @@ - {{ filterStringValues }} + + + + {{ value | translate }} + , + + + diff --git a/ui/projects/spline-common/main/src/common/component/inline-fitler/components/filter-with-overlay/spline-inline-filter-with-overlay.component.ts b/ui/projects/spline-common/main/src/common/component/inline-fitler/components/filter-with-overlay/spline-inline-filter-with-overlay.component.ts index c49e0b59..6bd2136b 100644 --- a/ui/projects/spline-common/main/src/common/component/inline-fitler/components/filter-with-overlay/spline-inline-filter-with-overlay.component.ts +++ b/ui/projects/spline-common/main/src/common/component/inline-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/ui/projects/spline-common/main/src/common/component/inline-fitler/spline-inline-filter.module.ts b/ui/projects/spline-common/main/src/common/component/inline-fitler/spline-inline-filter.module.ts index 0f713bbf..90124c74 100644 --- a/ui/projects/spline-common/main/src/common/component/inline-fitler/spline-inline-filter.module.ts +++ b/ui/projects/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/ui/projects/spline-common/main/src/common/component/list-box/components/list-box/spline-list-box.component.html b/ui/projects/spline-common/main/src/common/component/list-box/components/list-box/spline-list-box.component.html index 36338b97..9b75a207 100644 --- a/ui/projects/spline-common/main/src/common/component/list-box/components/list-box/spline-list-box.component.html +++ b/ui/projects/spline-common/main/src/common/component/list-box/components/list-box/spline-list-box.component.html @@ -56,7 +56,7 @@
- {{ option.label }} + {{ option.label | translate }}
diff --git a/ui/projects/spline-common/main/src/common/component/list-box/components/list-box/spline-list-box.component.ts b/ui/projects/spline-common/main/src/common/component/list-box/components/list-box/spline-list-box.component.ts index 65731dc7..1082db51 100644 --- a/ui/projects/spline-common/main/src/common/component/list-box/components/list-box/spline-list-box.component.ts +++ b/ui/projects/spline-common/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 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 new file mode 100644 index 00000000..c5681868 --- /dev/null +++ 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 index cde0c868..63812048 100644 --- 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 index ca8f9261..8412b76d 100644 --- 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 { + static forChild(config: SplineTranslateChildConfig = {}): ModuleWithProviders { return { ngModule: SplineTranslateModule, providers: [ diff --git a/ui/src/app/app.module.ts b/ui/src/app/app.module.ts index cfc40aaf..62e2730f 100644 --- a/ui/src/app/app.module.ts +++ b/ui/src/app/app.module.ts @@ -106,6 +106,7 @@ export const metaReducers: MetaReducer[] = toAssetsFilePath('shared-expression'), toAssetsFilePath('common-graph'), toAssetsFilePath('common-layout'), + toAssetsFilePath('common.dynamic-filter.filter-controls'), ] }, { provide: ErrorHandler, useClass: SplineGlobalErrorHandler }, diff --git a/ui/src/modules/events/pages/events-list/events-list.page.component.ts b/ui/src/modules/events/pages/events-list/events-list.page.component.ts index edc3988f..e495c8e2 100644 --- a/ui/src/modules/events/pages/events-list/events-list.page.component.ts +++ b/ui/src/modules/events/pages/events-list/events-list.page.component.ts @@ -62,12 +62,14 @@ export class EventsListPageComponent extends BaseLocalStateComponent console.log(value) + ) } onDateFilterChanged(value: SplineDateRangeFilter.Value): void { diff --git a/ui/src/modules/events/pages/events-list/events-list.page.models.ts b/ui/src/modules/events/pages/events-list/events-list.page.models.ts index 89b3aa82..b9a8146a 100644 --- a/ui/src/modules/events/pages/events-list/events-list.page.models.ts +++ b/ui/src/modules/events/pages/events-list/events-list.page.models.ts @@ -15,7 +15,13 @@ */ import { DataSourceWriteMode } from 'spline-api' -import { SplineDateRangeFilter, SplineDateRangeFilterConsumerStore, SplineListBox } from 'spline-common' +import { + getDataSourceWriteModeInfoList, + getDataSourceWriteModeLabel, + SplineDateRangeFilter, + SplineDateRangeFilterConsumerStore, + SplineListBox +} from 'spline-common' import { DynamicFilterModel } from 'spline-common/dynamic-filter' import { DfControlSelect } from 'spline-common/dynamic-filter/filter-controls' import { SplineDateRangeValue } from 'spline-utils' @@ -61,7 +67,8 @@ export namespace EventsListPage { export const listBoxDataMap: SplineListBox.DataMap, DataSourceWriteMode> = { ...SplineListBox.getDefaultSimpleDataMap(), - trackBy: value => value + trackBy: value => value, + valueToString: (value: DataSourceWriteMode) => getDataSourceWriteModeLabel(value) } export enum FilterId { @@ -72,20 +79,26 @@ export namespace EventsListPage { [FilterId.writeMode]: DataSourceWriteMode[] } - export function createFilterModel(): DynamicFilterModel { - return new DynamicFilterModel([ + export function createFilterModel(defaultValue: Partial): DynamicFilterModel { + const filterModel = new DynamicFilterModel([ new DfControlSelect.Model( FilterId.writeMode, { + records: getDataSourceWriteModeInfoList().map(item => ({label: item.label, value: item.writeMode})), + icon: 'save', + label: 'Write Mode', options: { - records: listBoxRecords, - dataMap: listBoxDataMap, - icon: 'save', - label: 'Write Mode' + dataMap: { ...listBoxDataMap } } } ) ]) + + if (defaultValue) { + filterModel.partialPatchValue(defaultValue) + } + + return filterModel } }