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

package/table/src/abstractions/base-column.model.ts

@@ -1,69 +0,0 @@
-import { TextModel } from '@updevs/sdk';
-import { DataTypeEnum } from '@updevs/sdk/stores';
-import { TextAlignmentType, TextDecorationType, OverflowStrategyType, FontWeightType, WidthModel } from '@updevs/sdk/layout';
-import { OptionalType } from '@updevs/sdk/types';
-
-import { ColumnTypeEnum } from '../models/enums/column-type.enum';
-
-export class BaseColumnModel {
-    name!: string;
-    title?: TextModel;
-    titleAlignment: TextAlignmentType = 'left';
-    allowSort = true;
-    isItalic = false;
-    type = ColumnTypeEnum.Text;
-    /**
-     * Width.
-     */
-    width?: WidthModel;
-    alignment: TextAlignmentType = 'left';
-    decoration?: TextDecorationType;
-    weight: FontWeightType = 'normal';
-    overflowStrategy: OverflowStrategyType = 'truncate';
-    shouldSpaceAfterPrefix = true;
-    shouldSpaceBeforeSuffix = true;
-    isHidden = false;
-    prefix?: TextModel;
-    suffix?: TextModel;
-    get dataType(): DataTypeEnum {
-        switch (this.type) {
-            case ColumnTypeEnum.Boolean:
-                return DataTypeEnum.Boolean;
-            case ColumnTypeEnum.DateTime:
-            case ColumnTypeEnum.Date:
-            case ColumnTypeEnum.Time:
-                return DataTypeEnum.Date;
-            case ColumnTypeEnum.Currency:
-            case ColumnTypeEnum.Number:
-                return DataTypeEnum.Number;
-            case ColumnTypeEnum.Guid:
-                return DataTypeEnum.Guid;
-            default:
-                return DataTypeEnum.String;
-        }
-    }
-    get widthClass(): string {
-        if (!this.width || !!this.width.pixels) {
-            return '';
-        }
-
-        const prefix = !!this.width.gridColumn ? 'col' : 'w';
-        const auto = !!this.width.gridColumn && this.width.gridColumn === 0 ? 'auto' : '';
-
-        return `${prefix}-${auto || this.widthSize}`;
-    }
-    get widthSize(): number {
-        return !this.width ? 0 : this.width.gridColumn || this.width.percentage || 0;
-    }
-    get pixelsSize(): OptionalType<number> {
-        return this.width?.pixels;
-    }
-
-    constructor(columnType: ColumnTypeEnum, init?: Partial<BaseColumnModel>) {
-        if (!!init) {
-            Object.assign(this, init);
-        }
-
-        this.type = columnType;
-    }
-}

package/table/src/abstractions/base.column.ts

@@ -1,99 +0,0 @@
-import { inject, Directive } from '@angular/core';
-import { TextService } from '@updevs/sdk';
-
-import { BaseColumnModel } from './base-column.model';
-import { ColumnTypeEnum } from '../models/enums/column-type.enum';
-
-@Directive()
-export abstract class BaseColumn<TConfig extends BaseColumnModel> {
-    record!: any;
-    config!: TConfig;
-    get value(): any {
-        return (this.record as any)[this.config.name];
-    }
-    get isTextType(): boolean {
-        return this.config.type !== ColumnTypeEnum.Boolean
-            && this.config.type !== ColumnTypeEnum.Image
-            && this.config.type !== ColumnTypeEnum.Custom;
-    }
-    get prefix(): string {
-        return this.textService.getText(this.config.prefix);
-    }
-    get suffix(): string {
-        return this.textService.getText(this.config.suffix);
-    }
-    get prefixSpace(): string {
-        return !!this.prefix && this.config.shouldSpaceAfterPrefix ? ' ' : '';
-    }
-    get suffixSpace(): string {
-        return !!this.suffix && this.config.shouldSpaceBeforeSuffix ? ' ' : '';
-    }
-    readonly textService = inject(TextService);
-
-    private get alignmentClass(): string {
-        const prefix = this.isTextType ? 'text' : 'justify-content';
-
-        switch (this.config.alignment) {
-            case 'justify':
-                return `${prefix}-${(this.isTextType ? 'justify' : 'between')}`;
-            case 'center':
-                return `${prefix}-center`;
-            case 'right':
-                return `${prefix}-end`;
-            default:
-                return `${prefix}-start`;
-        }
-    }
-    private get overflowClass(): string {
-        switch (this.config.overflowStrategy) {
-            case 'no-wrap':
-                return 'text-nowrap';
-            case 'wrap':
-                return 'text-wrap';
-            case 'word-break':
-                return 'text-break';
-            default:
-                return 'text-truncate';
-        }
-    }
-    private get decorationClass(): string {
-        switch (this.config.decoration) {
-            case 'underline':
-                return 'text-decoration-underline';
-            case 'strikethrough':
-                return 'text-decoration-line-through';
-            case 'none':
-                return 'text-decoration-none';
-            default:
-                return '';
-        }
-    }
-    private get weightClass(): string {
-        switch (this.config.weight) {
-            case 'bold':
-                return 'fw-bold';
-            case 'bolder':
-                return 'fw-bolder';
-            case 'light':
-                return 'fw-light';
-            case 'lighter':
-                return 'fw-lighter';
-            default:
-                return 'fw-normal';
-        }
-    }
-
-    getRecordAs<T>(): T {
-        return this.record as T;
-    }
-
-    getClasses(): string[] {
-        return [
-            this.alignmentClass,
-            this.overflowClass,
-            this.decorationClass,
-            this.weightClass,
-            this.config.isItalic ? 'fst-italic' : ''
-        ];
-    }
-}

package/table/src/abstractions/filters-operands.service.ts

@@ -1,10 +0,0 @@
-import { DataTypeEnum } from '@updevs/sdk/stores';
-import { NonNullableDictionaryType } from '@updevs/sdk/types';
-
-import { FilterOperandConfig } from '../models/filter-operand.config';
-
-export abstract class FiltersOperandsService {
-    abstract get isLoaded(): boolean;
-    abstract getOperands(type: DataTypeEnum): FilterOperandConfig[];
-    abstract getAllOperands(): NonNullableDictionaryType<FilterOperandConfig[]>;
-}

package/table/src/components/columns/boolean-column/boolean-column.component.html

@@ -1,15 +0,0 @@
-<div [ngClass]="getClasses()">
-    @switch (config.displayType) {
-        @case ('text') {
-            {{ prefix }}{{ prefixSpace }}{{ !!value ? textService.getText(config.trueText) : textService.getText(config.falseText) }}{{ suffixSpace }}{{ suffix }}
-        }
-        @case ('toggle') {
-            {{ prefix }}{{ prefixSpace }}
-            <upd-icon [tablerIcon]="!!value ? 'toggle-right' : 'toggle-left'"></upd-icon>{{ suffixSpace }}{{ suffix }}
-        }
-        @case ('icon') {
-            {{ prefix }}{{ prefixSpace }}
-            <upd-icon [model]="!!value ? config.trueIcon : config.falseIcon"></upd-icon>{{ suffixSpace }}{{ suffix }}
-        }
-    }
-</div>

package/table/src/components/columns/boolean-column/boolean-column.component.scss

@@ -1 +0,0 @@
-

package/table/src/components/columns/boolean-column/boolean-column.component.spec.ts

@@ -1,21 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { BooleanColumnComponent } from './boolean-column.component';
-
-describe('BooleanColumnComponent', () => {
-  let component: BooleanColumnComponent;
-  let fixture: ComponentFixture<BooleanColumnComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [BooleanColumnComponent]
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(BooleanColumnComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/table/src/components/columns/boolean-column/boolean-column.component.ts

@@ -1,26 +0,0 @@
-import { Component } from '@angular/core';
-
-import { BaseColumn } from '../../../abstractions/base.column';
-import { BooleanColumnModel } from '../../../models/columns/boolean-column.model';
-
-@Component({
-    selector: 'upd-boolean-column',
-    templateUrl: './boolean-column.component.html',
-    styleUrl: './boolean-column.component.scss'
-})
-export class BooleanColumnComponent extends BaseColumn<BooleanColumnModel> {
-    override getClasses(): string[] {
-        return [
-            ...super.getClasses(),
-            this.colorClass
-        ];
-    }
-
-    private get colorClass(): string {
-        if (!this.config.shouldColorHighlight) {
-            return '';
-        }
-
-        return `text-${(!!this.value ? this.config.trueColor : this.config.falseColor)}`;
-    }
-}

package/table/src/components/columns/date-time-column/date-time-column.component.html

@@ -1 +0,0 @@
-<span [ngClass]="getClasses()">{{ prefix }}{{ prefixSpace }}{{ value | date:config.dateTimeFormat }}{{ suffixSpace }}{{ suffix }}</span>

package/table/src/components/columns/date-time-column/date-time-column.component.scss

@@ -1 +0,0 @@
-

package/table/src/components/columns/date-time-column/date-time-column.component.spec.ts

@@ -1,21 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { DateTimeColumnComponent } from './date-time-column.component';
-
-describe('DateTimeColumnComponent', () => {
-  let component: DateTimeColumnComponent;
-  let fixture: ComponentFixture<DateTimeColumnComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [DateTimeColumnComponent]
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(DateTimeColumnComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/table/src/components/columns/date-time-column/date-time-column.component.ts

@@ -1,11 +0,0 @@
-import { Component } from '@angular/core';
-
-import { BaseColumn } from '../../../abstractions/base.column';
-import { DateTimeColumnModel } from '../../../models/columns/date-time-column.model';
-
-@Component({
-    selector: 'upd-date-time-column',
-    templateUrl: './date-time-column.component.html',
-    styleUrl: './date-time-column.component.scss'
-})
-export class DateTimeColumnComponent extends BaseColumn<DateTimeColumnModel> {}

package/table/src/components/columns/number-column/number-column.component.html

@@ -1 +0,0 @@
-<span [ngClass]="getClasses()">{{ prefix }}{{ prefixSpace }}{{ value | number:config.numberFormat }}{{ suffixSpace }}{{ suffix }}</span>

package/table/src/components/columns/number-column/number-column.component.scss

@@ -1 +0,0 @@
-

package/table/src/components/columns/number-column/number-column.component.spec.ts

@@ -1,21 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { NumberColumnComponent } from './number-column.component';
-
-describe('NumberColumnComponent', () => {
-  let component: NumberColumnComponent;
-  let fixture: ComponentFixture<NumberColumnComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [NumberColumnComponent]
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(NumberColumnComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/table/src/components/columns/number-column/number-column.component.ts

@@ -1,11 +0,0 @@
-import { Component } from '@angular/core';
-
-import { BaseColumn } from '../../../abstractions/base.column';
-import { NumberColumnModel } from '../../../models/columns/number-column.model';
-
-@Component({
-    selector: 'upd-number-column',
-    templateUrl: './number-column.component.html',
-    styleUrl: './number-column.component.scss'
-})
-export class NumberColumnComponent extends BaseColumn<NumberColumnModel> {}

package/table/src/components/columns/text-column/text-column.component.html

@@ -1 +0,0 @@
-<span [ngClass]="getClasses()">{{ prefix }}{{ prefixSpace }}{{ value }}{{ suffixSpace }}{{ suffix }}</span>

package/table/src/components/columns/text-column/text-column.component.scss

@@ -1 +0,0 @@
-

package/table/src/components/columns/text-column/text-column.component.spec.ts

@@ -1,21 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { TextColumnComponent } from './text-column.component';
-
-describe('TextColumnComponent', () => {
-  let component: TextColumnComponent;
-  let fixture: ComponentFixture<TextColumnComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [TextColumnComponent]
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(TextColumnComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/table/src/components/columns/text-column/text-column.component.ts

@@ -1,31 +0,0 @@
-import { Component } from '@angular/core';
-
-import { BaseColumn } from '../../../abstractions/base.column';
-import { TextColumnModel } from '../../../models/columns/text-column.model';
-
-@Component({
-    selector: 'upd-text-column',
-    templateUrl: './text-column.component.html',
-    styleUrl: './text-column.component.scss'
-})
-export class TextColumnComponent extends BaseColumn<TextColumnModel> {
-    override getClasses(): string[] {
-        return [
-            ...super.getClasses(),
-            this.transformClass
-        ];
-    }
-
-    private get transformClass(): string {
-        switch (this.config.transform) {
-            case 'capitalize':
-                return 'text-capitalize';
-            case 'lowercase':
-                return 'text-lowercase';
-            case 'uppercase':
-                return 'text-uppercase';
-            default:
-                return '';
-        }
-    }
-}

package/table/src/components/columns-manager/columns-manager.component.html

@@ -1,3 +0,0 @@
-<ng-container *transloco="let t; prefix: 'UpDevs.Table.ColumnsManager'">
-    <upd-drag-and-drop [config]="config()" [(columns)]="columns"></upd-drag-and-drop>
-</ng-container>

package/table/src/components/columns-manager/columns-manager.component.scss

@@ -1 +0,0 @@
-

package/table/src/components/columns-manager/columns-manager.component.spec.ts

@@ -1,21 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { ColumnsManagerComponent } from './columns-manager.component';
-
-describe('ColumnVisibilityComponent', () => {
-  let component: ColumnsManagerComponent;
-  let fixture: ComponentFixture<ColumnsManagerComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ColumnsManagerComponent]
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(ColumnsManagerComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/table/src/components/columns-manager/columns-manager.component.ts

@@ -1,37 +0,0 @@
-import { Component, computed, signal } from '@angular/core';
-import { DragAndDropColumnConfig, DragAndDropColumnModel } from '@updevs/components/drag-and-drop';
-import { BaseModal } from '@updevs/components/modal';
-
-import { TableConfig } from '../../models/table.config';
-
-@Component({
-    selector: 'upd-columns-manager',
-    templateUrl: './columns-manager.component.html',
-    styleUrl: './columns-manager.component.scss'
-})
-export class ColumnsManagerComponent<T> extends BaseModal<TableConfig<T>> {
-    config = computed(() => ({ columns: [this.visibleColumn(), this.hiddenColumn()], canReorder: true }));
-    columns = signal<DragAndDropColumnModel[]>([]);
-
-    private readonly visibleColumn = computed<DragAndDropColumnConfig>(() =>
-        ({
-            name: 'visible',
-            title: { text: 'UpDevs.Table.VisibleColumns', isTranslated: false },
-            canBeEmpty: false,
-            items: this.data().columns.filter(c => !c.isHidden).map(c => ({
-                name: c.name,
-                text: c.title || { text: 'UpDevs.Table.ColumnTitleNotSet', isTranslated: false }
-            }))
-        })
-    );
-    private readonly hiddenColumn = computed<DragAndDropColumnConfig>(() =>
-        ({
-            name: 'hidden',
-            title: { text: 'UpDevs.Table.HiddenColumns', isTranslated: false },
-            items: this.data().columns.filter(c => c.isHidden).map(c => ({
-                name: c.name,
-                text: c.title || { text: 'UpDevs.Table.ColumnTitleNotSet', isTranslated: false }
-            }))
-        })
-    );
-}

package/table/src/components/filter-row/filter-row.component.html

@@ -1,29 +0,0 @@
-<upd-select class="w-100" [isDisabled]="isDisabled()" [items]="fieldsOptions()" (selectedItem)="onSelectField($event)"
-    [selected]="selectedField">
-</upd-select>
-<upd-select class="w-100" [isDisabled]="isDisabled()" [items]="comparisonOperatorOptions()" (selectedItem)="onSelectOperand($event)"
-    [selected]="selectedOperand">
-</upd-select>
-
-@if (isValueSectionEnabled()) {
-    @switch (fieldType) {
-        @case (DataTypeEnum.Number) {
-            <upd-input wrapperClasses="w-100" customClasses="h-100" type="number" (valueChange)="updateValue($event)"
-                [value]="selectedValue"></upd-input>
-        }
-        @case (DataTypeEnum.Date) {
-
-        }
-        @default {
-            <upd-input wrapperClasses="w-100" customClasses="h-100" type="text" (valueChange)="updateValue($event)"
-                [value]="selectedValue"></upd-input>
-        }
-    }
-} @else {
-    <div class="w-100">
-        <input type="text" class="form-control h-100" disabled>
-    </div>
-}
-
-<upd-button class="flex-shrink-1" colorStyle="danger" [isDisabled]="isDisabled()" [isOutline]="true" [isIcon]="true"
-    [iconModel]="{tablerIcon:'x'}" (clicked)="removeFilterItem()"></upd-button>

package/table/src/components/filter-row/filter-row.component.scss

@@ -1 +0,0 @@
-

package/table/src/components/filter-row/filter-row.component.spec.ts

@@ -1,21 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { FilterRowComponent } from './filter-row.component';
-
-describe('FilterRowComponent', () => {
-  let component: FilterRowComponent;
-  let fixture: ComponentFixture<FilterRowComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [FilterRowComponent]
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(FilterRowComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/table/src/components/filter-row/filter-row.component.ts

@@ -1,127 +0,0 @@
-import { Component, signal, inject, OnInit, input, model, HostBinding, Output, EventEmitter } from '@angular/core';
-import { TextService } from '@updevs/sdk';
-import { BaseSearchStore, DataTypeEnum } from '@updevs/sdk/stores';
-import { OptionalType } from '@updevs/sdk/types';
-import { SelectItem } from '@updevs/components/form-controls/select';
-import { BaseComponent } from '@updevs/sdk/layout';
-
-import { UpdTableConfigService } from '../../services/upd-table-config.service';
-import { FiltersOperandsService } from '../../abstractions/filters-operands.service';
-import { FilterItemModel } from '../../models/filter-item.model';
-import { BaseColumnModel } from '../../abstractions/base-column.model';
-import { FilterOperandConfig } from '../../models/filter-operand.config';
-
-@Component({
-    selector: 'upd-filter-row',
-    templateUrl: './filter-row.component.html',
-    styleUrl: './filter-row.component.scss'
-})
-export class FilterRowComponent extends BaseComponent implements OnInit {
-    @HostBinding('class') wrapperClasses = 'd-flex gap-2';
-
-    @Output() readonly removed: EventEmitter<void> = new EventEmitter();
-
-    DataTypeEnum = DataTypeEnum;
-
-    activeFilters = model.required<FilterItemModel[]>();
-    rowIndex = input.required<number>();
-    columns = input.required<BaseColumnModel[]>();
-    isDisabled = input.required<boolean>();
-    store = input<BaseSearchStore>();
-    currentFilter = input<FilterItemModel>();
-    currentField = signal<OptionalType<SelectItem>>(undefined);
-    currentOperand = signal<OptionalType<FilterOperandConfig>>(undefined);
-    fieldsOptions = signal<SelectItem[]>([]);
-    comparisonOperatorOptions = signal<SelectItem[]>([]);
-    isValueSectionEnabled = signal<boolean>(true);
-
-    get fieldType(): DataTypeEnum {
-        return this.currentField()?.objectData || DataTypeEnum.String;
-    }
-    get selectedField(): OptionalType<SelectItem> {
-        const currentFilter = this.currentFilter();
-        return !!currentFilter?.name
-            ? this.fieldsOptions().find(f => f.value === currentFilter.name)
-            : undefined;
-    }
-    get selectedOperand(): OptionalType<SelectItem> {
-        const currentFilter = this.currentFilter();
-        return !!currentFilter?.name
-            ? this.comparisonOperatorOptions().find(co => co.value === currentFilter.operandConfig?.operand)
-            : undefined;
-    }
-    get selectedValue(): OptionalType<any> {
-        const currentFilter = this.currentFilter();
-        return !!currentFilter?.name ? currentFilter.value : undefined;
-    }
-
-    private currentOperands: FilterOperandConfig[] = [];
-    private readonly configService = inject(UpdTableConfigService);
-    private readonly filtersOperandsService = inject(FiltersOperandsService);
-    private readonly textService = inject(TextService);
-
-    ngOnInit(): void {
-        if (!!this.store() && this.configService.config.shouldLoadFieldsFromServer) {
-            this.store()!.getFilterableFields().subscribe(fields =>
-                this.fieldsOptions.set(fields.map(f => ({ value: f.name!, text: f.description!, objectData: f.type })))
-            );
-        } else {
-            this.fieldsOptions.set(
-                this.columns().filter(c => !!c.title).map(c =>
-                    ({ value: c.name, text: this.textService.getText(c.title), objectData: c.dataType }))
-            );
-        }
-
-        if (!!this.selectedField) {
-            if (!!this.selectedOperand) {
-                this.onSelectOperand(this.selectedOperand);
-            }
-
-            this.onSelectField(this.selectedField);
-        }
-    }
-
-    onSelectField(item?: SelectItem): void {
-        this.currentField.set(item);
-
-        const dataType = item?.objectData;
-
-        if (!!dataType) {
-            this.currentOperands = this.filtersOperandsService.getOperands(dataType);
-            this.comparisonOperatorOptions.set(
-                this.currentOperands.map(o => ({ value: o.operand, text: this.textService.getText(o.text), listItem: { icon: o.icon } }))
-            );
-        } else {
-            this.comparisonOperatorOptions.set([]);
-        }
-
-        this.activeFilters.update(curr => {
-            curr[this.rowIndex()].name = this.currentField()?.value;
-            return [...curr];
-        });
-    }
-
-    onSelectOperand(item?: SelectItem): void {
-        this.currentOperand.set(this.currentOperands.find(co => co.operand === item?.value));
-        this.isValueSectionEnabled.set(!!this.currentOperand()?.requiresValue);
-        this.activeFilters.update(curr => {
-            curr[this.rowIndex()].operandConfig = this.currentOperand();
-            return [...curr];
-        });
-    }
-
-    updateValue(value?: any): void {
-        this.activeFilters.update(curr => {
-            curr[this.rowIndex()].value = value;
-            return [...curr];
-        });
-    }
-
-    removeFilterItem(): void {
-        this.activeFilters.update(curr => {
-            curr.splice(this.rowIndex(), 1);
-            return [...curr];
-        });
-        this.removed.emit();
-    }
-}