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

ui/projects/spline-common/dynamic-filter/.eslintrc.js

@@ -20,15 +20,15 @@ module.exports = {
             'error',
             {
                 'type': 'attribute',
-                'prefix': ['dynamic-filter', 'filter'],
+                'prefix': ['dynamic-filter', 'filter', 'df'],
                 'style': 'camelCase'
             }
         ],
         '@angular-eslint/component-selector': [
             'error',
             {
                 'type': 'element',
-                'prefix': ['dynamic-filter', 'filter'],
+                'prefix': ['dynamic-filter', 'filter', 'df'],
                 'style': 'kebab-case'
             }
         ]

ui/projects/spline-common/dynamic-filter/filter-controls/src/date-range/df-control-date-range.factory.ts

@@ -15,7 +15,6 @@
  */
 
 import { Injectable } from '@angular/core'
-import { Observable, of } from 'rxjs'
 import { IDynamicFilterControlFactory } from 'spline-common/dynamic-filter'
 
 import { DfControlDateRangeComponent } from './df-control-date-range.component'
@@ -29,10 +28,4 @@ export class DfControlDateRangeFactory implements IDynamicFilterControlFactory<D
 
     readonly componentType = DfControlDateRangeComponent
 
-    createModel<TId extends any = string>(config: DfControlDateRange.Config<TId>): Observable<DfControlDateRange.Model<TId>> {
-        return of(
-            new DfControlDateRange.Model(config)
-        )
-    }
-
 }

ui/projects/spline-common/dynamic-filter/filter-controls/src/date-range/df-control-date-range.models.ts

@@ -29,7 +29,7 @@ export namespace DfControlDateRange {
 
     export type Options = {}
 
-    export type Config<TId = string> = DynamicFilterControlModelConfig<Value, Options, TId>
+    export type Config<TId = string> = DynamicFilterControlModelConfig<Value, Options>
 
     export class Model<TId = string> extends BaseDynamicFilterControlModel<Value, Options, TId> {
         readonly type = TYPE

ui/projects/spline-common/dynamic-filter/filter-controls/src/public-api.ts

@@ -15,3 +15,4 @@
  */
 
 export * from './date-range/public-api'
+export * from './select/public-api'

ui/projects/spline-common/dynamic-filter/filter-controls/src/select/components/df-control-select/df-control-select.component.html

@@ -15,8 +15,16 @@
   -->
 
 <spline-inline-filter-with-overlay
-        label="Write Mode"
-        [icon]="'save'"
-        [filterStringValues]="'All'">
+        [label]="model.options.label"
+        (apply$)="onApply()"
+        (reset$)="onReset()"
+        [icon]="model.options.icon"
+        [filterStringValues]="stringValue$ | async">
+
+    <spline-list-box [splineListBoxRecords]="model.options.records"
+                     [ngModel]="model.value$ | async"
+                     ngDefaultControl
+                     [dataMap]="model.options.dataMap">
+    </spline-list-box>
 
 </spline-inline-filter-with-overlay>

ui/projects/spline-common/dynamic-filter/filter-controls/src/select/components/df-control-select/df-control-select.component.ts

@@ -14,12 +14,64 @@
  * limitations under the License.
  */
 
+import { ChangeDetectionStrategy, Component, Input, OnInit, ViewChild } from '@angular/core'
+import { BehaviorSubject } from 'rxjs'
+import { map, takeUntil } from 'rxjs/operators'
+import { SplineListBoxComponent } from 'spline-common'
 import { BaseDynamicFilterControlComponent } from 'spline-common/dynamic-filter'
 
 import { DfControlSelect } from '../../models'
 
 
+@Component({
+    selector: 'df-control-select',
+    templateUrl: './df-control-select.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
 export class DfControlSelectComponent<TId = string>
-    extends BaseDynamicFilterControlComponent<DfControlSelect.Value, DfControlSelect.Options, TId> {
+    extends BaseDynamicFilterControlComponent<DfControlSelect.Value, DfControlSelect.Options, TId>
+    implements OnInit {
 
+    @ViewChild(SplineListBoxComponent) splineListBoxComponent: SplineListBoxComponent
+
+    readonly stringValue$ = new BehaviorSubject<string>('')
+
+    @Input() model: DfControlSelect.Model<TId>
+
+    ngOnInit(): void {
+        (this.model.value$)
+            .pipe(
+                takeUntil(this.destroyed$),
+                map(
+                    value => 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)
+            )
+    }
+
+    onApply(): void {
+        this.model.patchValue(
+            this.getCurrentValue()
+        )
+    }
+
+    onReset(): void {
+        this.model.patchValue(
+            []
+        )
+    }
+
+    private getCurrentValue(): DfControlSelect.Value {
+        return this.splineListBoxComponent.value
+    }
 }

ui/projects/spline-common/dynamic-filter/filter-controls/src/select/df-control-select.module.ts

@@ -16,15 +16,28 @@
 
 import { CommonModule } from '@angular/common'
 import { NgModule } from '@angular/core'
-import { DF_CONTROL_FACTORY, DynamicFilterModule } from 'spline-common/dynamic-filter'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { SplineInlineFilterModule, SplineListBoxModule } from 'spline-common'
+import { DF_CONTROL_FACTORY, DynamicFilterControlManager, DynamicFilterModule } from 'spline-common/dynamic-filter'
 
+import { DfControlSelectComponent } from './components'
 import { DfControlSelectFactory } from './services/df-control-select.factory'
 
 
 @NgModule({
     imports: [
         CommonModule,
-        DynamicFilterModule
+        DynamicFilterModule,
+        SplineInlineFilterModule,
+        SplineListBoxModule,
+        ReactiveFormsModule,
+        FormsModule
+    ],
+    declarations: [
+        DfControlSelectComponent
+    ],
+    exports: [
+        DfControlSelectComponent
     ],
     providers: [
         DfControlSelectFactory,
@@ -36,5 +49,11 @@ import { DfControlSelectFactory } from './services/df-control-select.factory'
     ]
 })
 export class DfControlSelectModule {
+    constructor(private readonly dynamicFilterControlManager: DynamicFilterControlManager,
+                private readonly dfControlSelectFactory: DfControlSelectFactory) {
 
+        this.dynamicFilterControlManager.registerStaticFactory(
+            this.dfControlSelectFactory
+        )
+    }
 }

ui/projects/spline-common/dynamic-filter/filter-controls/src/select/models/df-control-select.models.ts

@@ -14,25 +14,37 @@
  * limitations under the License.
  */
 
-import moment from 'moment'
+import { SplineListBox } from 'spline-common'
 import { BaseDynamicFilterControlModel, DynamicFilterControlModelConfig } from 'spline-common/dynamic-filter'
 
 
 export namespace DfControlSelect {
 
-    export const TYPE = 'date_range'
+    export const TYPE = 'DfControlSelect'
 
-    export type Config<TId = string> = DynamicFilterControlModelConfig<DfControlSelect.Value, DfControlSelect.Options, TId>
+    export type Value<TValue = unknown> = TValue[]
 
-    export type Value = {
-        dateFrom: moment.Moment
-        dateTo: moment.Moment
+    export type Options<TRecord = unknown, TValue = unknown> = {
+        label: string
+        icon: string
+        records: TRecord[]
+        dataMap: SplineListBox.DataMap<TRecord, TValue>
     }
 
-    export type Options = {}
+    export type Config<TRecord = unknown, TValue = unknown> =
+        & DynamicFilterControlModelConfig<Value<TValue>, Options<TRecord, TValue>>
+        &
+        {
+            options: Options<TRecord, TValue>
+        }
 
-    export class Model<TId = string> extends BaseDynamicFilterControlModel<Value, Options, TId> {
+    export class Model<TId = string, TRecord = unknown, TValue = unknown>
+        extends BaseDynamicFilterControlModel<Value<TValue>, Options<TRecord, TValue>, TId> {
         readonly type = TYPE
+
+        constructor(id: TId, config: Config<TRecord, TValue>) {
+            super(id, config)
+        }
     }
 
 }

ui/projects/spline-common/dynamic-filter/filter-controls/src/select/public-api.ts

@@ -14,6 +14,6 @@
  * limitations under the License.
  */
 
-export * from './components/df-control-select/df-control-select.component'
+export * from './components/public-api'
+export * from './models/public-api'
 export * from './df-control-select.module'
-export * from './models/df-control-select.models'

ui/projects/spline-common/dynamic-filter/filter-controls/src/select/services/df-control-select.factory.ts

@@ -15,7 +15,6 @@
  */
 
 import { Injectable } from '@angular/core'
-import { Observable, of } from 'rxjs'
 import { IDynamicFilterControlFactory } from 'spline-common/dynamic-filter'
 
 import { DfControlSelectComponent } from '../components/df-control-select/df-control-select.component'
@@ -29,10 +28,5 @@ export class DfControlSelectFactory implements IDynamicFilterControlFactory<DfCo
 
     readonly componentType = DfControlSelectComponent
 
-    createModel<TId extends any = string>(config: DfControlSelect.Config<TId>): Observable<DfControlSelect.Model<TId>> {
-        return of(
-            new DfControlSelect.Model(config)
-        )
-    }
 
 }

ui/projects/spline-common/dynamic-filter/main/src/core/models/dynamic-filter-control.models.ts

@@ -36,8 +36,7 @@ export interface IDynamicFilterControlModel<TValue = unknown,
     patchValue: (value: TValue, emitEvent: boolean) => void
 }
 
-export interface DynamicFilterControlModelConfig<TValue, TOptions extends Record<string, any> = Record<string, unknown>, TId = string> {
-    id: TId
+export interface DynamicFilterControlModelConfig<TValue, TOptions extends Record<string, any> = Record<string, unknown>> {
     defaultValue?: TValue
     options?: TOptions
 }
@@ -58,14 +57,14 @@ implements IDynamicFilterControlModel<TValue, TOptions, TId> {
 
     abstract readonly type: string
 
-    constructor(config: DynamicFilterControlModelConfig<TValue, TOptions, TId>) {
-        this.id = config.id
+    constructor(id: TId, config?: DynamicFilterControlModelConfig<TValue, TOptions>) {
+        this.id = id
 
-        if (config.options !== undefined) {
+        if (config?.options !== undefined) {
             this._options = config.options
         }
 
-        if (config.defaultValue !== undefined) {
+        if (config?.defaultValue !== undefined) {
             this.patchValue(config.defaultValue, false)
         }
 
@@ -107,13 +106,7 @@ export interface IDynamicFilterControlComponent<TValue = any, TOptions extends S
     event$: EventEmitter<GenericEvent>
 }
 
-export interface IDynamicFilterControlFactory<TValue = any, TOptions extends SplineRecord = SplineRecord, TId = string>
-    extends IDynamicComponentFactory<IDynamicFilterControlComponent<TValue, TOptions, TId>> {
-
-    createModel(
-        config: DynamicFilterControlModelConfig<TValue, TOptions, TId>
-    ): Observable<IDynamicFilterControlModel<TValue, TOptions, TId>>
-
-}
+export type IDynamicFilterControlFactory<TValue = any, TOptions extends SplineRecord = SplineRecord, TId = string>
+    = IDynamicComponentFactory<IDynamicFilterControlComponent<TValue, TOptions, TId>>
 
 export const DF_CONTROL_FACTORY = new InjectionToken<IDynamicFilterControlFactory<any>[]>('DF_CONTROL_FACTORY')

ui/projects/spline-common/dynamic-filter/main/src/core/models/dynamic-filter.models.ts

@@ -42,8 +42,6 @@ export class DynamicFilterModel<TFilter extends Record<string, any> = Record<str
         emitEvent: true,
     })
 
-    protected readonly modelsMap: DynamicFilterControlsMap<TFilter>
-
     protected destroyed$ = new Subject<void>()
     protected readonly _controlsMap$: BehaviorSubject<DynamicFilterControlsMap<TFilter>>
 
@@ -100,15 +98,15 @@ export class DynamicFilterModel<TFilter extends Record<string, any> = Record<str
     }
 
     hasFilterControl(columnId: keyof TFilter): boolean {
-        return this.modelsMap[columnId] !== undefined
+        return this.controlsMap[columnId] !== undefined
     }
 
     getFilterControl(columnId: keyof TFilter): IDynamicFilterControlModel<TFilter[keyof TFilter], any, keyof TFilter> | undefined {
-        return this.modelsMap[columnId]
+        return this.controlsMap[columnId]
     }
 
     patchValue(valueUpdate: TFilter, emitEvent = true): void {
-        Object.keys(this.modelsMap)
+        Object.keys(this.controlsMap)
             .forEach(columnId => {
                 if (this.hasFilterControl(columnId as keyof TFilter)) {
                     const model = this.getFilterControl(columnId as keyof TFilter)

ui/projects/spline-common/main/src/common/component/list-box/components/list-box/spline-list-box.component.ts

@@ -68,7 +68,7 @@ export class SplineListBoxComponent<TValue = unknown> extends BaseComponent
             this._value = value
             if (this.selectionModel) {
                 this.selectionModel.clear()
-                this.selectionModel.select(...this._value)
+                this.selectionModel.select(...(this._value || []))
             }
         }
     }

ui/projects/spline-common/main/src/common/component/list-box/public-api.ts

@@ -17,4 +17,5 @@
 export * from './components/public-api'
 export * from './directives/public-api'
 export * from './models/public-api'
+
 export * from './spline-list-box.module'

ui/src/app/app.module.ts

@@ -29,6 +29,7 @@ import { StoreDevtoolsModule } from '@ngrx/store-devtools'
 import { storeFreeze } from 'ngrx-store-freeze'
 import { NgxDaterangepickerMd } from 'ngx-daterangepicker-material'
 import { SplineIconModule, SplineSearchBoxModule } from 'spline-common'
+import { DynamicFilterCoreModule } from 'spline-common/dynamic-filter'
 import { SplineLayoutModule } from 'spline-common/layout'
 import { SplineConfigModule, SplineConfigSettings, SPLINE_CONFIG_SETTINGS } from 'spline-shared'
 import { SplineAttributesSharedModule } from 'spline-shared/attributes'
@@ -82,6 +83,7 @@ export const metaReducers: MetaReducer<any>[] =
         SplineIconModule,
         SplineUtilsCommonModule,
         NgxDaterangepickerMd.forRoot(),
+        DynamicFilterCoreModule.forRoot()
     ],
     providers: [
         {

ui/src/modules/data-sources/pages/list/data-sources-list.page.models.ts

@@ -57,9 +57,7 @@ export namespace DataSourcesListPage {
     export function createFilterModel(): DynamicFilterModel<FilterValue> {
         return new DynamicFilterModel(
             [
-                new DfControlDateRange.Model({
-                    id: FilterId.dateRange
-                })
+                new DfControlDateRange.Model(FilterId.dateRange)
             ]
         )
     }

ui/src/modules/events/pages/events-list/events-list.page.component.html

@@ -49,6 +49,8 @@ <h1 class="page-title">
 
             </spline-inline-filter-with-overlay>
 
+            <dynamic-filter-container [model]="filterModel"></dynamic-filter-container>
+
         </div>
 
     </spline-search-dynamic-table>