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

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

@@ -0,0 +1,12 @@
+import { UpdTableConfig } from './upd-table.config';
+
+export class UpdTableConfigModel implements UpdTableConfig {
+    shouldLoadFieldsFromServer = false;
+    urlToLoadOperandsFromServer?: string;
+
+    constructor(init?: UpdTableConfig) {
+        if (!!init) {
+            Object.assign(this, init);
+        }
+    }
+}

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

@@ -0,0 +1,7 @@
+import { Provider } from '@angular/core';
+
+export interface UpdTableConfig {
+    shouldLoadFieldsFromServer?: boolean;
+    urlToLoadOperandsFromServer?: string;
+    filtersOperandsService?: Provider;
+}

package/table/src/public-api.ts

@@ -0,0 +1,5 @@
+export * from './abstractions/public-api';
+export * from './directives/public-api';
+export * from './models/public-api';
+export * from './table.component';
+export * from './upd-table.module';

package/table/src/services/default-filters-operands.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { DefaultFiltersOperandsService } from './default-filters-operands.service';
+
+describe('FiltersOperandsService', () => {
+    let service: DefaultFiltersOperandsService;
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({});
+        service = TestBed.inject(DefaultFiltersOperandsService);
+    });
+
+    it('should be created', () => {
+        expect(service).toBeTruthy();
+    });
+});

package/table/src/services/default-filters-operands.service.ts

@@ -0,0 +1,62 @@
+import { Injectable, inject } from '@angular/core';
+import { DataTypeEnum } from '@updevs/sdk/stores';
+import { NonNullableDictionaryType } from '@updevs/sdk/types';
+import { forkJoin } from 'rxjs';
+
+import { FiltersOperandsService } from '../abstractions/filters-operands.service';
+import { UpdTableConfigService } from './upd-table-config.service';
+import { FilterOperandConfig } from '../models/filter-operand.config';
+import { FiltersOperandsStore } from './stores/filters-operands.store';
+import { StringFilterOperandsListModel } from '../models/operands-lists/string-filter-operands-list.model';
+import { NumberFilterOperandsListModel } from '../models/operands-lists/number-filter-operands-list.model';
+import { BooleanFilterOperandsListModel } from '../models/operands-lists/boolean-filter-operands-list.model';
+import { DateFilterOperandsListModel } from '../models/operands-lists/date-filter-operands-list.model';
+import { GuidFilterOperandsListModel } from '../models/operands-lists/guid-filter-operands-list.model';
+
+@Injectable()
+export class DefaultFiltersOperandsService extends FiltersOperandsService {
+    get isLoaded(): boolean {
+        return this._isLoaded;
+    }
+
+    private _isLoaded = false;
+    private readonly configService = inject(UpdTableConfigService);
+    private readonly filterOperandsStore = inject(FiltersOperandsStore);
+    private readonly cachedData: NonNullableDictionaryType<FilterOperandConfig[]> = {};
+
+    constructor() {
+        super();
+
+        if (!!this.configService.config.urlToLoadOperandsFromServer) {
+            forkJoin({
+                guidOps: this.filterOperandsStore.load(DataTypeEnum.Guid),
+                stringOps: this.filterOperandsStore.load(DataTypeEnum.String),
+                numberOps: this.filterOperandsStore.load(DataTypeEnum.Number),
+                dateOps: this.filterOperandsStore.load(DataTypeEnum.Date),
+                booleanOps: this.filterOperandsStore.load(DataTypeEnum.Boolean)
+            }).subscribe(resp => {
+                this.cachedData[DataTypeEnum.Guid] = resp.guidOps;
+                this.cachedData[DataTypeEnum.String] = resp.stringOps;
+                this.cachedData[DataTypeEnum.Number] = resp.numberOps;
+                this.cachedData[DataTypeEnum.Date] = resp.dateOps;
+                this.cachedData[DataTypeEnum.Boolean] = resp.booleanOps;
+                this._isLoaded = true;
+            });
+        } else {
+            this.cachedData[DataTypeEnum.Guid] = GuidFilterOperandsListModel.optionsAsList;
+            this.cachedData[DataTypeEnum.String] = StringFilterOperandsListModel.optionsAsList;
+            this.cachedData[DataTypeEnum.Number] = NumberFilterOperandsListModel.optionsAsList;
+            this.cachedData[DataTypeEnum.Date] = DateFilterOperandsListModel.optionsAsList;
+            this.cachedData[DataTypeEnum.Boolean] = BooleanFilterOperandsListModel.optionsAsList;
+            this._isLoaded = true;
+        }
+    }
+
+    override getOperands(type: DataTypeEnum): FilterOperandConfig[] {
+        return this._isLoaded ? this.cachedData[type] : [];
+    }
+
+    override getAllOperands(): NonNullableDictionaryType<FilterOperandConfig[]> {
+        return this.cachedData;
+    }
+}

package/table/src/services/storages/saved-views.storage.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { SavedViewsStorage } from './saved-views.storage';
+
+describe('SavedViewsStorage', () => {
+    let service: SavedViewsStorage;
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({});
+        service = TestBed.inject(SavedViewsStorage);
+    });
+
+    it('should be created', () => {
+        expect(service).toBeTruthy();
+    });
+});

package/table/src/services/storages/saved-views.storage.ts

@@ -0,0 +1,76 @@
+import { Injectable, inject, Signal, computed } from '@angular/core';
+import { Tools, BaseSignalStorage } from '@updevs/sdk/core';
+import { OptionalType } from '@updevs/sdk/types';
+import { SecurityStorage } from '@updevs/sdk/security';
+
+import { SavedViewModel } from '../../models/saved-view.model';
+
+@Injectable()
+export class SavedViewsStorage extends BaseSignalStorage {
+    private readonly securityStorage = inject(SecurityStorage);
+    private readonly lastStateKey = 'last-state';
+    private get loggedUserId(): string {
+        return this.securityStorage.getUserInfo()?.id || 'nl';
+    }
+
+    constructor() {
+        super('saved-views');
+    }
+
+    saveView(data: SavedViewModel): void {
+        data.id = data.id || Tools.Guid.generate();
+        data.userId = this.loggedUserId;
+
+        this.save(data, this.getUserKey(data.id, data.tableName));
+    }
+
+    saveLastState(data: SavedViewModel): void {
+        data.id = this.lastStateKey;
+        this.saveView(data);
+    }
+
+    getById(tableName: string, id: string): Signal<OptionalType<SavedViewModel>> {
+        return this.get(this.getUserKey(id, tableName));
+    }
+
+    getAll(tableName: string): Signal<SavedViewModel[]> {
+        return computed(() => {
+            const records = this.getAllItems<SavedViewModel>();
+            return records().filter(sv =>
+                sv.tableName.toLowerCase() === tableName.toLowerCase()
+                && sv.userId === this.loggedUserId
+                && sv.id !== this.lastStateKey
+            );
+        });
+    }
+
+    getLastState(tableName: string): Signal<OptionalType<SavedViewModel>> {
+        return this.getById(tableName, this.lastStateKey);
+    }
+
+    resetAllIsDefault(tableName: string): void {
+        const savedViews = this.getAll(tableName)();
+        savedViews.forEach(sv => {
+            sv.isDefault = false;
+            this.saveView(sv);
+        });
+    }
+
+    removeViews(tableName: string, ...keys: string[]): void {
+        super.remove(...keys.map(k => this.getUserKey(k, tableName)));
+    }
+
+    getByName(tableName: string, name: string): OptionalType<SavedViewModel> {
+        const records = this.getAllItems<SavedViewModel>();
+        return records().find(sv =>
+            sv.tableName.toLowerCase() === tableName.toLowerCase()
+            && sv.userId === this.loggedUserId
+            && sv.name?.toLowerCase() === name?.toLowerCase()
+            && sv.id !== this.lastStateKey
+        );
+    }
+
+    private getUserKey(key: string, tableName: string): string {
+        return `${this.loggedUserId}${this._separator}${tableName}${this._separator}${key}`;
+    }
+}

package/table/src/services/stores/filters-operands.store.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { FiltersOperandsStore } from './filters-operands.store';
+
+describe('FiltersOperandsService', () => {
+  let service: FiltersOperandsStore;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(FiltersOperandsStore);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

package/table/src/services/stores/filters-operands.store.ts

@@ -0,0 +1,17 @@
+import { Injectable } from '@angular/core';
+import { BaseStore, DataTypeEnum } from '@updevs/sdk/stores';
+import { Observable } from 'rxjs';
+
+import { UpdTableConfigService } from '../upd-table-config.service';
+import { FilterOperandConfig } from '../../models/filter-operand.config';
+
+@Injectable()
+export class FiltersOperandsStore extends BaseStore {
+    constructor(configService: UpdTableConfigService) {
+        super({ baseUrl: configService.config.urlToLoadOperandsFromServer || '' });
+    }
+
+    load(fieldType: DataTypeEnum): Observable<FilterOperandConfig[]> {
+        return this._requestService.makeGet<FilterOperandConfig[]>(this.getRequestModel(fieldType.toString()));
+    }
+}

package/table/src/services/upd-table-config.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { UpdTableConfigService } from './upd-table-config.service';
+
+describe('UpdTableConfigService', () => {
+  let service: UpdTableConfigService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(UpdTableConfigService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

package/table/src/services/upd-table-config.service.ts

@@ -0,0 +1,17 @@
+import { Injectable, Inject } from '@angular/core';
+
+import { TableConstants } from '../tools/table.constants';
+import { UpdTableConfig } from '../models/upd-table.config';
+import { UpdTableConfigModel } from '../models/upd-table-config.model';
+
+@Injectable()
+export class UpdTableConfigService {
+    /**
+     * Configuration (See: #upsee[p:models, i:UpdTableConfigModel]).
+     */
+    readonly config: UpdTableConfigModel;
+
+    constructor(@Inject(TableConstants.defaultOptionsInjectionToken) layoutConfig: UpdTableConfig) {
+        this.config = new UpdTableConfigModel(layoutConfig);
+    }
+}

package/table/src/table.component.html

@@ -0,0 +1,155 @@
+<ng-container *transloco="let t; prefix: 'UpDevs.Table'">
+    <div class="card">
+        @if (!!configModel().title || !configModel().canSearch) {
+            <div class="card-header">
+                @if (!!configModel().title) {
+                    <h3 class="card-title">{{ textService.getText(configModel().title) }}</h3>
+                }
+                <ng-template [ngTemplateOutlet]="actionsTpl"></ng-template>
+            </div>
+        }
+
+        @if (configModel().canSearch) {
+            <upd-search-section [actionsTpl]="!configModel().title ? actionsTpl : undefined" [isSearching]="isSearching()"
+                [(searchRequest)]="searchRequest" [searchRequestSubject]="searchRequestSubject" [config]="configModel()"
+                [(hasChanges)]="hasSearchChanged" [columns]="columns()">
+            </upd-search-section>
+        }
+
+        <div [class.table-responsive]="configModel().isResponsive">
+            <!-- TODO: implement pixel sized table - complex... -->
+            <table class="table card-table table-vcenter table-nowrap" [class.fixed]="hasWidth"
+                [class.pixel-sized]="isWidthInPixels">
+                <thead [class.sticky-top]="configModel().hasStickyHeader">
+                <tr>
+                    @if (configModel().hasCheckboxColumn) {
+                        <th class="checkbox-selector">
+                            <upd-checkbox customClasses="m-0 ps-0" (changed)="toggleAllSelection($event)"
+                                [(isChecked)]="isMainCheckboxChecked" [(isIndeterminate)]="isMainCheckboxIndeterminate"></upd-checkbox>
+                        </th>
+                    }
+
+                    @for (col of columns(); track col) {
+                        <th [ngClass]="col.widthClass" [style.width.px]="col.pixelsSize">
+                            {{ textService.getText(col.title) }}
+                            @if (canSortColumn(col.name)) {
+                                <upd-icon [tablerIcon]="getSortingIcon(col.name)" tablerIconWeight="bold" colorClass="text-body-tertiary"
+                                    [tablerIconSize]="16" (click)="sortByColumn(col.name)">
+                                </upd-icon>
+                            }
+                        </th>
+                    }
+
+                    @if (!!pendingWidthColClass) {
+                        <th [ngClass]="pendingWidthColClass"></th>
+                    }
+                </tr>
+                </thead>
+
+                <tbody>
+                    @if (isSearching()) {
+                        <tr>
+                            <td [colSpan]="numberOfColumns">
+                                <div class="empty">
+                                    <h1 class="text-body-tertiary">{{ t('Loading') }}...</h1>
+                                    <div class="progress progress-sm w-25">
+                                        <div class="progress-bar progress-bar-indeterminate bg-body-tertiary"></div>
+                                    </div>
+                                </div>
+                            </td>
+                        </tr>
+                    } @else {
+                        @for (record of data(); track record) {
+                            <tr>
+                                @if (configModel().hasCheckboxColumn) {
+                                    <td>
+                                        <upd-checkbox customClasses="m-0 ps-0" (changed)="toggleItemSelection(record)"
+                                            [isChecked]="selectionModel().isSelected(record)"></upd-checkbox>
+                                    </td>
+                                }
+
+                                @for (col of columns(); track col) {
+                                    <td>
+                                        <ng-container updTableColumn [record]="record" [config]="col"></ng-container>
+                                    </td>
+                                }
+
+                                @if (!!pendingWidthColClass) {
+                                    <td></td>
+                                }
+                            </tr>
+                        } @empty {
+                            <tr>
+                                <td [colSpan]="numberOfColumns">
+                                    <div class="empty">
+                                        <p class="empty-title">{{ t('NoRecordsFoundTitle') }}</p>
+                                        <p class="empty-subtitle text-secondary">{{ t('NoRecordsFoundSubtitle') }}</p>
+                                    </div>
+                                </td>
+                            </tr>
+                        }
+                    }
+                </tbody>
+            </table>
+        </div>
+        <upd-paginator wrapperClasses="card-footer" [shouldDisplayPreviousText]="false" [shouldDisplayNextText]="false"
+            [(pageSize)]="pageSize" [shouldDisplayFirstText]="false" [shouldDisplayLastText]="false" [(currentPage)]="currentPage"
+            [totalRecords]="totalRecords()" (changed)="onPageSettingsChanged()">
+        </upd-paginator>
+    </div>
+
+    <ng-template #actionsTpl>
+        <div class="ms-auto d-flex gap-2">
+            @if (!!activeSavedView()) {
+                @if (activeSavedView()!.isDefault) {
+                    <div class="ribbon ribbon-top ribbon-start">
+                        <upd-icon tablerIcon="heart" [tablerIconSize]="20"></upd-icon>
+                    </div>
+                }
+                <div class="tag align-self-center py-3 text-primary bg-primary-lt border-primary" updPopover="{{ t('CurrentSavedView') }}"
+                    [updPopoverActAsTooltip]="true">
+                    <upd-icon tablerIcon="list-details" [tablerIconSize]="20"></upd-icon>
+                    <span class="me-1">{{ activeSavedView()!.name }}</span>
+                </div>
+            }
+            @if (hiddenColumns() > 0) {
+                <div class="tag align-self-center py-3 text-orange bg-orange-lt border-orange" updPopover="{{ t('HiddenColumnsTooltip') }}"
+                    [updPopoverActAsTooltip]="true">
+                    <upd-icon tablerIcon="eye-off" [tablerIconSize]="20"></upd-icon>
+                    <span class="me-1">{{ hiddenColumns() }}</span>
+                </div>
+            }
+            @if (!!activeSavedView() || hiddenColumns() > 0) {
+                <upd-button (clicked)="resetViewState()" colorStyle="danger" updPopover="{{ t('ResetView') }}"
+                    [updPopoverActAsTooltip]="true" [isIcon]="true" [isOutline]="true">
+                    <upd-icon tablerIcon="restore" [tablerIconSize]="20"></upd-icon>
+                </upd-button>
+            }
+            @if (configModel().canSaveViews) {
+                <upd-button customClasses="gap-2" [isDisabled]="!hasSearchChanged()" (clicked)="openSaveSearchModal()"
+                    updPopover="{{ t('SaveCurrentView') }}" [updPopoverActAsTooltip]="true" [isIcon]="true">
+                    <upd-icon tablerIcon="device-floppy" [tablerIconSize]="20"></upd-icon>
+                </upd-button>
+            }
+            @if (configModel().canManageColumns) {
+                <upd-button customClasses="gap-2" (clicked)="openColumnsManagerModal()">
+                    <upd-icon tablerIcon="columns" [tablerIconSize]="20"></upd-icon>
+                    {{ t('ColumnsManagerButton') }}
+                </upd-button>
+            }
+            @if (configModel().canSaveViews || configModel().canLoadSavedViews) {
+                <upd-button customClasses="gap-2" (clicked)="isSavedViewsDropdownOpen = true" #savedViewsBtn>
+                    <upd-icon tablerIcon="folders" [tablerIconSize]="20"></upd-icon>
+                    {{ t('SavedViews.ButtonTitle') }}
+                </upd-button>
+                <upd-dropdown wrapperClasses="overflow-x-hidden mt-1" [isOpen]="isSavedViewsDropdownOpen"
+                    [dropdownReference]="savedViewsRef()" [items]="savedViewsOptions()" [shouldCloseOnOutsideClick]="true"
+                    (isOpenChange)="isSavedViewsDropdownOpen = $event" [minWidth]="350" (selectedItem)="selectSavedView($event)">
+                    @if (savedViewsOptions().length < 1) {
+                        <span class="m-2">{{ t('NoSavedViews') }}</span>
+                    }
+                </upd-dropdown>
+            }
+        </div>
+    </ng-template>
+</ng-container>

package/table/src/table.component.scss

@@ -0,0 +1,14 @@
+.fixed {
+    table-layout: fixed !important;
+}
+
+.fixed td,
+.fixed th {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+
+.checkbox-selector {
+    width: 52px !important;
+}

package/table/src/table.component.spec.ts

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