@updevs/components 1.0.0-alpha.6 → 1.0.0-alpha.9

package/table/src/components/search-section/search-section.component.ts

@@ -0,0 +1,111 @@
+import { Component, input, TemplateRef, HostBinding, signal, computed, model, OnInit, effect, inject } from '@angular/core';
+import { SearchRequestModel } from '@updevs/sdk/stores';
+import { BaseComponent, BgColorStyleType } from '@updevs/sdk/layout';
+import { OptionalType } from '@updevs/sdk/types';
+import { BadgeConfig } from '@updevs/components/badge';
+import { Subject, distinctUntilChanged, debounceTime } from 'rxjs';
+
+import { FilterItemModel } from '../../models/filter-item.model';
+import { TableConfigModel } from '../../models/table-config.model';
+import { FilterTools } from '../../tools/filters.tools';
+import { BaseColumnModel } from '../../abstractions/base-column.model';
+import { FiltersOperandsService } from '../../abstractions/filters-operands.service';
+
+@Component({
+    selector: 'upd-search-section',
+    templateUrl: './search-section.component.html',
+    styleUrl: './search-section.component.scss'
+})
+export class SearchSectionComponent<T> extends BaseComponent implements OnInit {
+    @HostBinding('class') wrapperClass = 'card-body border-bottom py-3 d-flex flex-column gap-2';
+
+    searchRequest = model.required<SearchRequestModel>();
+    hasChanges = model.required<boolean>();
+    columns = input.required<BaseColumnModel[]>();
+    isSearching = input.required<boolean>();
+    searchRequestSubject = input.required<Subject<SearchRequestModel>>();
+    config = input.required<TableConfigModel<T>>();
+    actionsTpl = input<TemplateRef<any>>();
+    activeFilters = signal<FilterItemModel[]>([]);
+    isFilterSectionOpen = signal(false);
+    canApplyFilters = computed(() => this.activeFilters().length > 0
+        && this.activeFilters().every(af => !!af.name && !!af.operandConfig?.operand && (!af.operandConfig?.requiresValue || !!af.value))
+    );
+    canPerformActions = computed(() => this.canApplyFilters() && !this.isSearching());
+    badgeConfig = computed<OptionalType<BadgeConfig>>(() =>
+        (this.searchRequest().filters?.length || 0) > 0
+            ? ({
+                isNotification: true,
+                isPill: true,
+                bgColor: 'primary-lt',
+                text: { text: this.searchRequest().filters!.length.toString(), isTranslated: true }
+            })
+            : undefined
+    );
+    filterSectionBtnColor = computed(() => this.isFilterSectionOpen() ? <BgColorStyleType> 'primary' : undefined);
+
+    readonly searchSubject = new Subject<string>();
+
+    private readonly filtersOperandsService = inject(FiltersOperandsService);
+
+    constructor() {
+        super();
+
+        effect(() => {
+            if ((this.searchRequest().filters?.length || 0) > 0) {
+                this.activeFilters.set(
+                    [...FilterTools.convertToFilterItem(this.searchRequest().filters || [], this.filtersOperandsService.getAllOperands())]
+                );
+            } else {
+                this.activeFilters.set([]);
+                this.isFilterSectionOpen.set(false);
+            }
+        }, { allowSignalWrites: true });
+    }
+
+    ngOnInit(): void {
+        const searchSub = this.searchSubject
+            .pipe(
+                distinctUntilChanged(),
+                debounceTime(this.config().searchInputDebounceTime)
+            )
+            .subscribe(term =>
+                this.searchRequestSubject().next({
+                    ...this.searchRequest(),
+                    description: term
+                })
+            );
+
+        this.addSubscriptions(searchSub);
+    }
+
+    search(): void {
+        this.searchRequestSubject().next({
+            ...this.searchRequest(),
+            filters: FilterTools.convertToRequestFilter(this.activeFilters(), this.config().columns)
+        });
+    }
+
+    toggleFilterSection(): void {
+        if (this.activeFilters().length === 0) {
+            this.addEmptyFilterRow();
+        }
+
+        this.isFilterSectionOpen.update(isOpen => !isOpen);
+    }
+
+    onRowRemoved(): void {
+        if (this.activeFilters().length === 0) {
+            this.isFilterSectionOpen.set(false);
+        }
+
+        this.search();
+    }
+
+    addEmptyFilterRow(): void {
+        this.activeFilters.update(curr => {
+            curr.push({});
+            return [...curr];
+        });
+    }
+}

package/table/src/directives/public-api.ts

@@ -0,0 +1 @@
+export * from './table-column.directive';

package/table/src/directives/table-column.directive.spec.ts

@@ -0,0 +1,8 @@
+import { TableColumnDirective } from './table-column.directive';
+
+describe('TableColumnDirective', () => {
+  it('should create an instance', () => {
+    const directive = new TableColumnDirective();
+    expect(directive).toBeTruthy();
+  });
+});

package/table/src/directives/table-column.directive.ts

@@ -0,0 +1,52 @@
+import { Directive, input, inject, ViewContainerRef, effect } from '@angular/core';
+import { DynamicComponentLoaderService } from '@updevs/sdk/layout';
+import { ComponentType } from '@updevs/sdk/types';
+
+import { BaseColumnModel } from '../abstractions/base-column.model';
+import { BaseColumn } from '../abstractions/base.column';
+import { ColumnTypeEnum } from '../models/enums/column-type.enum';
+import { TextColumnComponent } from '../components/columns/text-column/text-column.component';
+import { NumberColumnComponent } from '../components/columns/number-column/number-column.component';
+import { BooleanColumnComponent } from '../components/columns/boolean-column/boolean-column.component';
+import { DateTimeColumnComponent } from '../components/columns/date-time-column/date-time-column.component';
+
+@Directive({
+    selector: '[updTableColumn]'
+})
+export class TableColumnDirective<TConfig extends BaseColumnModel> {
+    record = input.required();
+    config = input.required<TConfig>();
+
+    private readonly viewContainerRef = inject(ViewContainerRef);
+    private readonly dynamicLoaderService = inject(DynamicComponentLoaderService);
+
+    constructor() {
+        effect(() => {
+            const component = this.dynamicLoaderService.load(this.getComponentType(), this.viewContainerRef);
+            component.instance.record = this.record();
+            component.instance.config = this.config();
+        });
+    }
+
+    getComponentType(): ComponentType<BaseColumn<TConfig>> {
+        switch (this.config().type) {
+            case ColumnTypeEnum.Text:
+                // @ts-ignore
+                return TextColumnComponent;
+            case ColumnTypeEnum.Number:
+                // @ts-ignore
+                return NumberColumnComponent;
+            case ColumnTypeEnum.Boolean:
+                // @ts-ignore
+                return BooleanColumnComponent;
+            case ColumnTypeEnum.Date:
+                // @ts-ignore
+                return DateTimeColumnComponent;
+            case ColumnTypeEnum.Guid:
+                // @ts-ignore
+                return TextColumnComponent;
+            default:
+                throw Error();
+        }
+    }
+}

package/table/src/index.ts

@@ -0,0 +1 @@
+export * from './public-api';

package/table/src/models/columns/boolean-column.model.ts

@@ -0,0 +1,29 @@
+import { IconModel } from '@updevs/icons';
+import { TextModel } from '@updevs/sdk';
+import { ColorStyleType } from '@updevs/sdk/layout';
+
+import { BaseColumnModel } from '../../abstractions/base-column.model';
+import { ColumnTypeEnum } from '../enums/column-type.enum';
+
+export class BooleanColumnModel extends BaseColumnModel {
+    displayType: 'text' | 'toggle' | 'icon' = 'text';
+    trueText: TextModel = { text: 'UpDevs.Table.Filters.Boolean.True', isTranslated: false };
+    falseText: TextModel = { text: 'UpDevs.Table.Filters.Boolean.False', isTranslated: false };
+    trueIcon: IconModel = { tablerIcon: 'square-check' };
+    falseIcon: IconModel = { tablerIcon: 'square' };
+    trueColor: ColorStyleType = 'success';
+    falseColor: ColorStyleType = 'secondary';
+    shouldColorHighlight = true;
+
+    constructor(init?: Partial<BooleanColumnModel>) {
+        super(ColumnTypeEnum.Boolean, init);
+
+        if (this.displayType !== 'text') {
+            this.alignment = 'center';
+        }
+
+        if (!!init) {
+            Object.assign(this, init);
+        }
+    }
+}

package/table/src/models/columns/date-time-column.model.ts

@@ -0,0 +1,20 @@
+import { DateTimeFormatEnum } from '@updevs/sdk/core';
+
+import { BaseColumnModel } from '../../abstractions/base-column.model';
+import { ColumnTypeEnum } from '../enums/column-type.enum';
+
+export class DateTimeColumnModel extends BaseColumnModel {
+    format = DateTimeFormatEnum.ShortDate;
+    customFormat?: string;
+    get dateTimeFormat(): string {
+        return this.customFormat || this.format;
+    }
+
+    constructor(init?: Partial<DateTimeColumnModel>) {
+        super(ColumnTypeEnum.DateTime, init);
+
+        if (!!init) {
+            Object.assign(this, init);
+        }
+    }
+}

package/table/src/models/columns/guid-column.model.ts

@@ -0,0 +1,16 @@
+import { ColumnTypeEnum } from '../enums/column-type.enum';
+import { TextColumnModel } from './text-column.model';
+
+export class GuidColumnModel extends TextColumnModel {
+    constructor(init?: Partial<GuidColumnModel>) {
+        super(init);
+
+        this.transform = 'uppercase';
+
+        if (!!init) {
+            Object.assign(this, init);
+        }
+
+        this.type = ColumnTypeEnum.Guid;
+    }
+}

package/table/src/models/columns/image-column.model.ts

@@ -0,0 +1,15 @@
+import { BaseColumnModel } from '../../abstractions/base-column.model';
+import { ColumnTypeEnum } from '../enums/column-type.enum';
+
+export class ImageColumnModel extends BaseColumnModel {
+    imageWidth?: number;
+    imageHeight?: number;
+
+    constructor(init?: Partial<ImageColumnModel>) {
+        super(ColumnTypeEnum.Image, init);
+
+        if (!!init) {
+            Object.assign(this, init);
+        }
+    }
+}

package/table/src/models/columns/number-column.model.ts

@@ -0,0 +1,19 @@
+import { BaseColumnModel } from '../../abstractions/base-column.model';
+import { ColumnTypeEnum } from '../enums/column-type.enum';
+
+export class NumberColumnModel extends BaseColumnModel {
+    minIntegerDigits = 1;
+    minFractionDigits = 0;
+    maxFractionDigits = 3;
+    get numberFormat(): string {
+        return `${this.minIntegerDigits}.${this.minFractionDigits}-${this.maxFractionDigits}`;
+    }
+
+    constructor(init?: Partial<NumberColumnModel>) {
+        super(ColumnTypeEnum.Number, init);
+
+        if (!!init) {
+            Object.assign(this, init);
+        }
+    }
+}

package/table/src/models/columns/public-api.ts

@@ -0,0 +1,6 @@
+export * from './boolean-column.model';
+export * from './date-time-column.model';
+export * from './guid-column.model';
+export * from './image-column.model';
+export * from './number-column.model';
+export * from './text-column.model';

package/table/src/models/columns/text-column.model.ts

@@ -0,0 +1,16 @@
+import { TextTransformType } from '@updevs/sdk/layout';
+
+import { BaseColumnModel } from '../../abstractions/base-column.model';
+import { ColumnTypeEnum } from '../enums/column-type.enum';
+
+export class TextColumnModel extends BaseColumnModel {
+    transform?: TextTransformType;
+
+    constructor(init?: Partial<TextColumnModel>) {
+        super(ColumnTypeEnum.Text, init);
+
+        if (!!init) {
+            Object.assign(this, init);
+        }
+    }
+}

package/table/src/models/enums/column-type.enum.ts

@@ -0,0 +1,13 @@
+export enum ColumnTypeEnum {
+    Text = 1,
+    DateTime = 2,
+    Number = 3,
+    Boolean = 4,
+    Date = 5,
+    Time = 6,
+    Image = 7,
+    Currency = 8,
+    Custom = 9,
+    Masked = 10,
+    Guid = 11
+}

package/table/src/models/enums/public-api.ts

@@ -0,0 +1 @@
+export * from './column-type.enum';

package/table/src/models/filter-item.model.ts

@@ -0,0 +1,7 @@
+import { FilterOperandConfig } from './filter-operand.config';
+
+export interface FilterItemModel {
+    name?: string;
+    operandConfig?: FilterOperandConfig;
+    value?: any;
+}

package/table/src/models/filter-operand.config.ts

@@ -0,0 +1,10 @@
+import { IconModel } from '@updevs/icons';
+import { TextModel } from '@updevs/sdk';
+import { FilterBooleanOperandEnum, FilterOperandEnum, FilterDateOperandEnum, FilterNumberOperandEnum } from '@updevs/sdk/stores';
+
+export interface FilterOperandConfig {
+    operand: FilterOperandEnum | FilterBooleanOperandEnum | FilterDateOperandEnum | FilterNumberOperandEnum;
+    text: TextModel;
+    icon: IconModel;
+    requiresValue: boolean;
+}

package/table/src/models/operands-lists/boolean-filter-operands-list.model.ts

@@ -0,0 +1,29 @@
+import { DictionaryType } from '@updevs/sdk/types';
+import { FilterOperandEnum, FilterBooleanOperandEnum } from '@updevs/sdk/stores';
+
+import { FilterOperandConfig } from '../filter-operand.config';
+import { FilterOperandsListConfig } from './filter-operands-list.config';
+
+const translationKey = 'UpDevs.Table.Filters.Boolean';
+
+export class BooleanFilterOperandsListModel {
+    static options: DictionaryType<FilterOperandConfig> = {
+        [FilterBooleanOperandEnum.True]: {
+            operand: FilterBooleanOperandEnum.True,
+            text: { text: `${translationKey}.True`, isTranslated: false },
+            icon: { tablerIcon: 'toggle-right' },
+            requiresValue: false
+        },
+        [FilterBooleanOperandEnum.False]: {
+            operand: FilterBooleanOperandEnum.False,
+            text: { text: `${translationKey}.False`, isTranslated: false },
+            icon: { tablerIcon: 'toggle-left' },
+            requiresValue: false
+        },
+        [FilterBooleanOperandEnum.IsEmpty]: FilterOperandsListConfig.options[FilterOperandEnum.IsEmpty],
+        [FilterBooleanOperandEnum.IsNotEmpty]: FilterOperandsListConfig.options[FilterOperandEnum.IsNotEmpty]
+    };
+    static get optionsAsList(): FilterOperandConfig[] {
+        return (Object.values(this.options) || []) as FilterOperandConfig[];
+    }
+}

package/table/src/models/operands-lists/date-filter-operands-list.model.ts

@@ -0,0 +1,28 @@
+import { DictionaryType } from '@updevs/sdk/types';
+import { FilterOperandEnum, FilterDateOperandEnum } from '@updevs/sdk/stores';
+
+import { FilterOperandConfig } from '../filter-operand.config';
+import { FilterOperandsListConfig } from './filter-operands-list.config';
+import { DateOrNumberOperandsListConfig } from './date-or-number-operands-list.config';
+
+export class DateFilterOperandsListModel {
+    static options: DictionaryType<FilterOperandConfig> = {
+        [FilterDateOperandEnum.Equals]: FilterOperandsListConfig.options[FilterOperandEnum.Equals],
+        [FilterDateOperandEnum.NotEquals]: FilterOperandsListConfig.options[FilterOperandEnum.NotEquals],
+        [FilterDateOperandEnum.GreaterThan]: DateOrNumberOperandsListConfig.options[FilterDateOperandEnum.GreaterThan],
+        [FilterDateOperandEnum.LessThan]: DateOrNumberOperandsListConfig.options[FilterDateOperandEnum.LessThan],
+        [FilterDateOperandEnum.GreaterThanOrEqualTo]: DateOrNumberOperandsListConfig.options[FilterDateOperandEnum.GreaterThanOrEqualTo],
+        [FilterDateOperandEnum.LessThanOrEqualTo]: DateOrNumberOperandsListConfig.options[FilterDateOperandEnum.LessThanOrEqualTo],
+        [FilterDateOperandEnum.IsEmpty]: FilterOperandsListConfig.options[FilterOperandEnum.IsEmpty],
+        [FilterDateOperandEnum.IsNotEmpty]: FilterOperandsListConfig.options[FilterOperandEnum.IsNotEmpty],
+        [FilterDateOperandEnum.Between]: {
+            operand: FilterDateOperandEnum.Between,
+            text: { text: 'UpDevs.Table.Filters.Date.Between', isTranslated: false },
+            icon: { tablerIcon: 'spacing-horizontal' },
+            requiresValue: true
+        }
+    };
+    static get optionsAsList(): FilterOperandConfig[] {
+        return (Object.values(this.options) || []) as FilterOperandConfig[];
+    }
+}

package/table/src/models/operands-lists/date-or-number-operands-list.config.ts

@@ -0,0 +1,35 @@
+import { DictionaryType } from '@updevs/sdk/types';
+import { FilterDateOperandEnum } from '@updevs/sdk/stores';
+
+import { FilterOperandConfig } from '../filter-operand.config';
+
+const translationKey = 'UpDevs.Table.Filters.DateOrNumber';
+
+export class DateOrNumberOperandsListConfig {
+    static options: DictionaryType<FilterOperandConfig> = {
+        [FilterDateOperandEnum.GreaterThan]: {
+            operand: FilterDateOperandEnum.GreaterThan,
+            text: { text: `${translationKey}.GreaterThan`, isTranslated: false },
+            icon: { tablerIcon: 'math-greater' },
+            requiresValue: true
+        },
+        [FilterDateOperandEnum.LessThan]: {
+            operand: FilterDateOperandEnum.LessThan,
+            text: { text: `${translationKey}.LessThan`, isTranslated: false },
+            icon: { tablerIcon: 'math-lower' },
+            requiresValue: true
+        },
+        [FilterDateOperandEnum.GreaterThanOrEqualTo]: {
+            operand: FilterDateOperandEnum.GreaterThanOrEqualTo,
+            text: { text: `${translationKey}.GreaterThanOrEqualTo`, isTranslated: false },
+            icon: { tablerIcon: 'math-equal-greater' },
+            requiresValue: true
+        },
+        [FilterDateOperandEnum.LessThanOrEqualTo]: {
+            operand: FilterDateOperandEnum.LessThanOrEqualTo,
+            text: { text: `${translationKey}.LessThanOrEqualTo`, isTranslated: false },
+            icon: { tablerIcon: 'math-equal-lower' },
+            requiresValue: true
+        }
+    };
+}

package/table/src/models/operands-lists/filter-operands-list.config.ts

@@ -0,0 +1,35 @@
+import { DictionaryType } from '@updevs/sdk/types';
+import { FilterOperandEnum } from '@updevs/sdk/stores';
+
+import { FilterOperandConfig } from '../filter-operand.config';
+
+const translationKey = 'UpDevs.Table.Filters.General';
+
+export class FilterOperandsListConfig {
+    static options: DictionaryType<FilterOperandConfig> = {
+        [FilterOperandEnum.Equals]: {
+            operand: FilterOperandEnum.Equals,
+            text: { text: `${translationKey}.Equals`, isTranslated: false },
+            icon: { tablerIcon: 'equal' },
+            requiresValue: true
+        },
+        [FilterOperandEnum.NotEquals]: {
+            operand: FilterOperandEnum.NotEquals,
+            text: { text: `${translationKey}.NotEquals`, isTranslated: false },
+            icon: { tablerIcon: 'equal-not' },
+            requiresValue: true
+        },
+        [FilterOperandEnum.IsEmpty]: {
+            operand: FilterOperandEnum.IsEmpty,
+            text: { text: `${translationKey}.IsEmpty`, isTranslated: false },
+            icon: { tablerIcon: 'droplet' },
+            requiresValue: false
+        },
+        [FilterOperandEnum.IsNotEmpty]: {
+            operand: FilterOperandEnum.IsNotEmpty,
+            text: { text: `${translationKey}.IsNotEmpty`, isTranslated: false },
+            icon: { tablerIcon: 'droplet', tablerIconType: 'solid' },
+            requiresValue: false
+        }
+    };
+}

package/table/src/models/operands-lists/guid-filter-operands-list.model.ts

@@ -0,0 +1,19 @@
+import { DictionaryType } from '@updevs/sdk/types';
+import { FilterGuidOperandEnum, FilterOperandEnum } from '@updevs/sdk/stores';
+
+import { FilterOperandConfig } from '../filter-operand.config';
+import { FilterOperandsListConfig } from './filter-operands-list.config';
+import { StringFilterOperandsListModel } from './string-filter-operands-list.model';
+
+export class GuidFilterOperandsListModel {
+    static options: DictionaryType<FilterOperandConfig> = {
+        [FilterGuidOperandEnum.Equals]: FilterOperandsListConfig.options[FilterOperandEnum.Equals],
+        [FilterGuidOperandEnum.NotEquals]: FilterOperandsListConfig.options[FilterOperandEnum.NotEquals],
+        [FilterGuidOperandEnum.IsEmpty]: FilterOperandsListConfig.options[FilterOperandEnum.IsEmpty],
+        [FilterGuidOperandEnum.IsNotEmpty]: FilterOperandsListConfig.options[FilterOperandEnum.IsNotEmpty],
+        [FilterGuidOperandEnum.In]: StringFilterOperandsListModel.options[FilterOperandEnum.In]
+    };
+    static get optionsAsList(): FilterOperandConfig[] {
+        return (Object.values(this.options) || []) as FilterOperandConfig[];
+    }
+}

package/table/src/models/operands-lists/number-filter-operands-list.model.ts

@@ -0,0 +1,28 @@
+import { DictionaryType } from '@updevs/sdk/types';
+import { FilterNumberOperandEnum, FilterOperandEnum, FilterDateOperandEnum } from '@updevs/sdk/stores';
+
+import { FilterOperandConfig } from '../filter-operand.config';
+import { FilterOperandsListConfig } from './filter-operands-list.config';
+import { DateOrNumberOperandsListConfig } from './date-or-number-operands-list.config';
+
+export class NumberFilterOperandsListModel {
+    static options: DictionaryType<FilterOperandConfig> = {
+        [FilterNumberOperandEnum.Equals]: FilterOperandsListConfig.options[FilterOperandEnum.Equals],
+        [FilterNumberOperandEnum.NotEquals]: FilterOperandsListConfig.options[FilterOperandEnum.NotEquals],
+        [FilterNumberOperandEnum.GreaterThan]: DateOrNumberOperandsListConfig.options[FilterDateOperandEnum.GreaterThan],
+        [FilterNumberOperandEnum.LessThan]: DateOrNumberOperandsListConfig.options[FilterDateOperandEnum.LessThan],
+        [FilterNumberOperandEnum.GreaterThanOrEqualTo]: DateOrNumberOperandsListConfig.options[FilterDateOperandEnum.GreaterThanOrEqualTo],
+        [FilterNumberOperandEnum.LessThanOrEqualTo]: DateOrNumberOperandsListConfig.options[FilterDateOperandEnum.LessThanOrEqualTo],
+        [FilterNumberOperandEnum.IsEmpty]: FilterOperandsListConfig.options[FilterOperandEnum.IsEmpty],
+        [FilterNumberOperandEnum.IsNotEmpty]: FilterOperandsListConfig.options[FilterOperandEnum.IsNotEmpty],
+        [FilterNumberOperandEnum.In]: {
+            operand: FilterNumberOperandEnum.In,
+            text: { text: 'UpDevs.Table.Filters.Number.In', isTranslated: false },
+            icon: { tablerIcon: 'spacing-horizontal' },
+            requiresValue: true
+        }
+    };
+    static get optionsAsList(): FilterOperandConfig[] {
+        return (Object.values(this.options) || []) as FilterOperandConfig[];
+    }
+}

package/table/src/models/operands-lists/string-filter-operands-list.model.ts

@@ -0,0 +1,49 @@
+import { DictionaryType } from '@updevs/sdk/types';
+import { FilterOperandEnum } from '@updevs/sdk/stores';
+
+import { FilterOperandConfig } from '../filter-operand.config';
+import { FilterOperandsListConfig } from './filter-operands-list.config';
+
+const translationKey = 'UpDevs.Table.Filters.String';
+
+export class StringFilterOperandsListModel {
+    static options: DictionaryType<FilterOperandConfig> = {
+        [FilterOperandEnum.Equals]: FilterOperandsListConfig.options[FilterOperandEnum.Equals],
+        [FilterOperandEnum.NotEquals]: FilterOperandsListConfig.options[FilterOperandEnum.NotEquals],
+        [FilterOperandEnum.StartsWith]: {
+            operand: FilterOperandEnum.StartsWith,
+            text: { text: `${translationKey}.StartsWith`, isTranslated: false },
+            icon: { tablerIcon: 'brackets-contain-start' },
+            requiresValue: true
+        },
+        [FilterOperandEnum.EndsWith]: {
+            operand: FilterOperandEnum.EndsWith,
+            text: { text: `${translationKey}.EndsWith`, isTranslated: false },
+            icon: { tablerIcon: 'brackets-contain-end' },
+            requiresValue: true
+        },
+        [FilterOperandEnum.Contains]: {
+            operand: FilterOperandEnum.Contains,
+            text: { text: `${translationKey}.Contains`, isTranslated: false },
+            icon: { tablerIcon: 'brackets-contain' },
+            requiresValue: true
+        },
+        [FilterOperandEnum.NotContains]: {
+            operand: FilterOperandEnum.NotContains,
+            text: { text: `${translationKey}.NotContains`, isTranslated: false },
+            icon: { tablerIcon: 'brackets-off' },
+            requiresValue: true
+        },
+        [FilterOperandEnum.IsEmpty]: FilterOperandsListConfig.options[FilterOperandEnum.IsEmpty],
+        [FilterOperandEnum.IsNotEmpty]: FilterOperandsListConfig.options[FilterOperandEnum.IsNotEmpty],
+        [FilterOperandEnum.In]: {
+            operand: FilterOperandEnum.In,
+            text: { text: `${translationKey}.In`, isTranslated: false },
+            icon: { tablerIcon: 'spacing-horizontal' },
+            requiresValue: true
+        }
+    };
+    static get optionsAsList(): FilterOperandConfig[] {
+        return (Object.values(this.options) || []) as FilterOperandConfig[];
+    }
+}

package/table/src/models/public-api.ts

@@ -0,0 +1,4 @@
+export * from './columns/public-api';
+export * from './enums/public-api';
+export * from './table.config';
+export * from './upd-table.config';

package/table/src/models/saved-view.model.ts

@@ -0,0 +1,13 @@
+import { SearchRequestModel } from '@updevs/sdk/stores';
+
+import { BaseColumnModel } from '../abstractions/base-column.model';
+
+export interface SavedViewModel {
+    id?: string;
+    name?: string;
+    tableName: string;
+    isDefault?: boolean;
+    userId?: string;
+    request: SearchRequestModel;
+    columns: BaseColumnModel[];
+}

package/table/src/models/table-config.model.ts

@@ -0,0 +1,32 @@
+import { TextModel } from '@updevs/sdk';
+import { BaseSearchStore } from '@updevs/sdk/stores';
+import { GetByIdType } from '@updevs/sdk/types';
+
+import { TableConfig } from './table.config';
+import { BaseColumnModel } from '../abstractions/base-column.model';
+
+export class TableConfigModel<T> implements TableConfig<T> {
+    name!: string;
+    store?: BaseSearchStore<T>;
+    columns: BaseColumnModel[] = [];
+    title?: TextModel;
+    canSearch = true;
+    canSaveViews = true;
+    canLoadSavedViews = true;
+    canManageColumns = true;
+    shouldAutoSearch = true;
+    hasCheckboxColumn = true;
+    isResponsive = true;
+    hasStickyHeader = false;
+    data: T[] = [];
+    preSelectedItems: T[] = [];
+    searchInputDebounceTime = 300;
+
+    constructor(init?: TableConfig<T>) {
+        if (!!init) {
+            Object.assign(this, init);
+        }
+    }
+
+    getIdFunction: GetByIdType<T> = (item: T) => (item as any).id;
+}

package/table/src/models/table.config.ts

@@ -0,0 +1,24 @@
+import { TextModel } from '@updevs/sdk';
+import { BaseSearchStore } from '@updevs/sdk/stores';
+import { GetByIdType } from '@updevs/sdk/types';
+
+import { BaseColumnModel } from '../abstractions/base-column.model';
+
+export interface TableConfig<T> {
+    name: string;
+    store?: BaseSearchStore<T>;
+    columns: BaseColumnModel[];
+    getIdFunction?: GetByIdType<T>;
+    title?: TextModel;
+    canSearch?: boolean;
+    canSaveViews?: boolean;
+    canLoadSavedViews?: boolean;
+    canManageColumns?: boolean;
+    shouldAutoSearch?: boolean;
+    hasCheckboxColumn?: boolean;
+    isResponsive?: boolean;
+    hasStickyHeader?: boolean;
+    data?: T[];
+    preSelectedItems?: T[];
+    searchInputDebounceTime?: number;
+}