@verisoft/ui-core 0.0.1

package/src/lib/components/table-filter/table-filter.model.ts

@@ -0,0 +1,22 @@
+import { InjectionToken } from '@angular/core';
+import { BaseFormDirectiveCore } from '../base-form';
+
+export const TABLE_FILTER_COMPONENT_TOKEN = new InjectionToken<TableFilterCore<any>>(
+    'TableFilterComponentToken'
+);
+
+export interface FilterDefinition {
+    optionLabel: string;
+    label: string;
+    optionValue?: string;
+    url?: string;
+    filterType?: 'dropdown' | 'checkbox' | 'calendar' | 'multiselect';
+    initialValue?: any;
+}
+
+export interface TableFilterCore<T> extends BaseFormDirectiveCore<T> {
+    filterDefinitions: FilterDefinition[];
+    title: string;
+    hideSearch?: boolean;
+    debounceTime?: number;
+}

package/src/lib/components/textarea/index.ts

@@ -0,0 +1 @@
+export * from './textarea.model';

package/src/lib/components/textarea/textarea.model.ts

@@ -0,0 +1,13 @@
+import { InjectionToken } from '@angular/core';
+import { BaseFormCore } from '../base-form';
+
+export const TEXTAREA_COMPONENT_TOKEN = new InjectionToken<TextareaCore>(
+    'TextareaComponentToken'
+);
+
+export interface TextareaCore extends BaseFormCore {
+    rows: number;
+    cols: number;
+    autoResize: boolean;
+    floatLabel: string | undefined;
+}

package/src/lib/components/textfield/index.ts

@@ -0,0 +1 @@
+export * from './textfield.model';

package/src/lib/components/textfield/textfield.model.ts

@@ -0,0 +1,13 @@
+import { InjectionToken } from '@angular/core';
+import { FieldSizeType, FieldTypeType } from '../../common';
+import { BaseFormCore } from '../base-form';
+
+export const TEXTFIELD_COMPONENT_TOKEN = new InjectionToken<TextfieldCore>(
+    'TextfieldComponentToken'
+);
+
+export interface TextfieldCore extends BaseFormCore {
+    size?: FieldSizeType;
+    type: FieldTypeType;
+    floatLabel: boolean;
+}

package/src/lib/components/tristatecheckbox/index.ts

@@ -0,0 +1 @@
+export * from './tristatecheckbox.model'

package/src/lib/components/tristatecheckbox/tristatecheckbox.model.ts

@@ -0,0 +1,9 @@
+import { InjectionToken } from '@angular/core';
+import { BaseFormCore } from '../base-form';
+
+export const TRISTATE_CHECKBOX_COMPONENT_TOKEN = new InjectionToken<TristateCheckboxCore>(
+    'TristateCheckboxComponentToken'
+);
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface TristateCheckboxCore extends BaseFormCore {}

package/src/lib/components/unsubscribe.component.ts

@@ -0,0 +1,12 @@
+import { Directive, OnDestroy } from '@angular/core';
+import { Subject } from 'rxjs';
+
+@Directive()
+export abstract class UnsubscribeComponent implements OnDestroy {
+  destroyed$ = new Subject<void>();
+
+  ngOnDestroy() {
+    this.destroyed$.next();
+    this.destroyed$.complete();
+  }
+}

package/src/lib/directives/datasource.directive.ts

@@ -0,0 +1,275 @@
+/* eslint-disable @angular-eslint/directive-selector */
+import { HttpClient } from '@angular/common/http';
+import {
+  ChangeDetectorRef,
+  Directive,
+  inject,
+  Input,
+  OnChanges,
+  OnInit,
+  SimpleChanges,
+} from '@angular/core';
+import {
+  BASE_URL_PATH,
+  convertDatasource,
+  DataSourceFunctionType,
+  DatasourceType,
+  DEFAULT_SEARCH_LIMIT,
+  FilterEvent,
+  LazyLoadEvent,
+  normalizeRequest,
+  Page,
+  RequestParams,
+} from '@verisoft/core';
+import {
+  BehaviorSubject,
+  catchError,
+  debounceTime,
+  filter,
+  map,
+  of,
+  switchMap,
+  takeUntil,
+  tap,
+} from 'rxjs';
+import {
+  DataSourceComponentModel,
+  DEFAULT_DEBOUNCE_TIME,
+  setComponentProperties,
+  setDataToArray,
+} from '../common';
+import {
+  DROPDOWN_COMPONENT_TOKEN,
+  DropdownCore,
+  GENERIC_FIELD_COMPONENT_TOKEN,
+  GenericFieldCore,
+  MULTISELECT_COMPONENT_TOKEN,
+  MultiselectCore,
+  UnsubscribeComponent,
+} from '../components';
+
+type ExtendedRequestType<T> = RequestParams<T> & { useNewData: boolean}
+
+@Directive({
+  selector:
+    'v-dropdown[useDatasource], v-multiselect[useDatasource], v-generic-field[useDatasource]',
+  standalone: true,
+})
+export class DatasourceDirective<T>
+  extends UnsubscribeComponent
+  implements OnChanges, OnInit
+{
+  @Input() datasource!: DatasourceType<T>;
+
+  @Input() autoBind = true;
+
+  @Input() loadingText = '... loading ...';
+
+  @Input() filterField: string | undefined = 'fulltext';
+
+  @Input() transformFn?: (data: T) => unknown;
+
+  get activeComponent(): DataSourceComponentModel<T> {
+    return (this.dropdownComponent ??
+      this.multiSelectComponent ??
+      this.genericField) as DataSourceComponentModel<T>;
+  }
+
+  private httpClient = inject(HttpClient);
+
+  private baseUrl: string = inject(BASE_URL_PATH);
+
+  private changeDetectorRef = inject(ChangeDetectorRef);
+
+  private isAllDataLoaded = false;
+
+  private parameters$ = new BehaviorSubject<Partial<ExtendedRequestType<T>>>({});
+
+  private lastParameter = {};
+
+  private dropdownComponent = inject<DropdownCore<T>>(
+    DROPDOWN_COMPONENT_TOKEN,
+    { optional: true }
+  );
+
+  private multiSelectComponent = inject<MultiselectCore<T>>(
+    MULTISELECT_COMPONENT_TOKEN,
+    {
+      optional: true,
+    }
+  );
+
+  private genericField = inject<GenericFieldCore<T>>(
+    GENERIC_FIELD_COMPONENT_TOKEN,
+    { optional: true }
+  );
+
+  private dataSourceService?: DataSourceFunctionType<T>;
+
+  private loadingPlaceholderItem: { [key: string]: unknown } = {};
+
+  ngOnInit(): void {
+    this.activeComponent.showed
+      .pipe(takeUntil(this.destroyed$))
+      .subscribe(() => {
+        if (
+          !this.autoBind &&
+          !this.activeComponent.options &&
+          !this.activeComponent.loading
+        ) {
+          this.parameters$.next({});
+        }
+      });
+
+    this.activeComponent.lazyLoad
+      .pipe(takeUntil(this.destroyed$))
+      .subscribe((value: LazyLoadEvent) => {
+        this.parameters$.next({ offset: value?.offset, limit: value?.limit });
+      });
+
+    this.activeComponent.filtered
+      .pipe(takeUntil(this.destroyed$))
+      .subscribe((value: FilterEvent) => {
+        const property = this.filterField ?? this.activeComponent.optionLabel;
+        if (property) {
+          this.parameters$.next({
+            offset: 0,
+            filter: {
+              [property]: value.filter ? value.filter : undefined,
+            } as Partial<T>,
+            useNewData: true,
+          });
+        }
+      });
+
+    this.parameters$
+      .pipe(
+        takeUntil(this.destroyed$),
+        filter(request => !this.isDataForRequestLoaded(request)),
+        map((request) => {
+          const extendedParams = normalizeRequest({ ...this.lastParameter, ...request }) as ExtendedRequestType<T>;
+          extendedParams.useNewData = request.useNewData ?? false;
+          return extendedParams;
+        }),
+        tap((request) => {
+          this.lastParameter = request;
+        }),
+        debounceTime(DEFAULT_DEBOUNCE_TIME),
+        tap(() => {
+          this.changeComponent(this.activeComponent, {
+            loading: true,
+          });
+        }),
+        switchMap((request) =>
+          this.dataSourceService
+            ? this.dataSourceService(request as RequestParams<T>).pipe(
+                map((response) => ({ request, response }))
+              )
+            : of({
+                request,
+                response: {
+                  data: [] as T[],
+                  total: 0,
+                  limit: request.limit,
+                  offset: request.offset,
+                } as Page<T>,
+              })
+        ),
+        catchError((request) => {
+          this.changeComponent(this.activeComponent, {
+            loading: false,
+          });
+          return of({
+            request: request as ExtendedRequestType<T>,
+            response: {
+              data: [] as T[],
+              total: 0,
+              limit: request.limit,
+              offset: request.offset,
+            } as Page<T>,
+          });
+        })
+      )
+      .subscribe(({ request, response }) =>
+        this.setDataToControl(request, response)
+      );
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['datasource']) {
+      this.dataSourceService = convertDatasource(
+        this.datasource,
+        this.baseUrl,
+        this.httpClient
+      );
+
+      this.activeComponent.loading = true;
+      this.changeDetectorRef.detectChanges();
+      if (this.autoBind) {
+        this.parameters$.next({ offset: 0 });
+      }
+    }
+  }
+
+  private isDataForRequestLoaded(request: Partial<ExtendedRequestType<T>>) {
+    if (request.useNewData){
+      return false;
+    }
+
+    const offset = request.offset ?? 0;
+    const limit = request.limit ?? DEFAULT_SEARCH_LIMIT;
+    const options = this.activeComponent.options;
+    if (!options){
+      return false;
+    }
+
+    if (options.length < offset + limit) {
+      return false;
+    }
+    
+    const allItemsFilled = options.slice(offset, offset + limit).every(item => item !== undefined && item != this.loadingPlaceholderItem);    
+    return allItemsFilled;
+  }
+
+  private setDataToControl(request: ExtendedRequestType<T>, result: Page<T>): void {
+    this.isAllDataLoaded = result.total <= result.data.length;
+    const data = result.data;
+    const total = result.total;
+    const offset = request.offset;
+    const transferedData = this.transformFn
+      ? data.map((x) => this.transformFn?.(x))
+      : data;
+
+    if (this.activeComponent.optionLabel) {
+      this.loadingPlaceholderItem[this.activeComponent.optionLabel] =
+        this.loadingText;
+    }
+
+    if (this.activeComponent.optionValue) {
+      this.loadingPlaceholderItem[this.activeComponent.optionValue] = -1;
+    }
+
+    const options = request.useNewData ? undefined : this.activeComponent.options;
+    const newOptions = setDataToArray(
+      options,
+      transferedData,
+      offset,
+      total,
+      this.loadingPlaceholderItem
+    );
+
+    this.changeComponent(this.activeComponent, {
+      options: newOptions as T[],
+      loading: false,
+      lazy: !this.isAllDataLoaded,
+    });
+  }
+
+  private changeComponent(
+    component: DataSourceComponentModel<T>,
+    value: Partial<DataSourceComponentModel<T>>
+  ) {
+    setComponentProperties(component, value);
+    this.changeDetectorRef.detectChanges();
+  }
+}

package/src/lib/directives/index.ts

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

package/src/lib/pipes/error/error.codes.ts

@@ -0,0 +1,6 @@
+type ErrorCodesFn = (value?: any) => string;
+
+export const ErrorCodesFns: { [key: string]: ErrorCodesFn } = {
+  required: () => `This field is required!`,
+  validationError: (value: any) => `Validation error: ${value}`,
+};

package/src/lib/pipes/error/error.models.ts

@@ -0,0 +1,27 @@
+import { AbstractControl, ValidationErrors } from '@angular/forms';
+
+type ErrorValue = { key: string; value: string } | null;
+
+export function getFirstErrorFromControl<T extends AbstractControl>(
+  control: T
+): ErrorValue {
+  if (!control || !control.errors) {
+    return null;
+  }
+  const errors = control.errors ?? false;
+  if (errors) {
+    const key = Object.keys(control.errors)[0];
+    const value = control.errors[key];
+    return { key, value };
+  }
+  return null;
+}
+
+export function getFirstError(errors: ValidationErrors): ErrorValue {
+  if (errors) {
+    const key = Object.keys(errors)[0];
+    const value = errors[key];
+    return { key, value };
+  }
+  return null;
+}

package/src/lib/pipes/error/error.pipe.ts

@@ -0,0 +1,27 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { ValidationErrors } from '@angular/forms';
+import { ErrorCodesFns } from './error.codes';
+import { getFirstError } from './error.models';
+
+const EMPTY = '';
+
+@Pipe({
+  name: 'error',
+  standalone: true,
+})
+export class ErrorPipe implements PipeTransform {
+  transform(errors: ValidationErrors | undefined | null): string {
+    if (!errors) {
+      return EMPTY;
+    }
+    const error = getFirstError(errors);
+    if (error) {
+      const errorFn = ErrorCodesFns[error.key];
+      if (!errorFn) {
+        return EMPTY;
+      }
+      return ErrorCodesFns[error.key](error.value);
+    }
+    return EMPTY;
+  }
+}

package/src/lib/pipes/error/warning.codes.ts

@@ -0,0 +1,5 @@
+type WarningCodesFn = (value?: any) => string;
+
+export const WarningCodesFns: { [key: string]: WarningCodesFn } = {
+  validationWarning: (value: any) => `${value}`,
+};

package/src/lib/pipes/error/warning.pipe.ts

@@ -0,0 +1,27 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { ValidationErrors } from '@angular/forms';
+import { getFirstError } from './error.models';
+import { WarningCodesFns } from './warning.codes';
+
+const EMPTY = '';
+
+@Pipe({
+  name: 'warning',
+  standalone: true,
+})
+export class WarningPipe implements PipeTransform {
+  transform(warnings: ValidationErrors | undefined | null): string {
+    if (!warnings) {
+      return EMPTY;
+    }
+    const error = getFirstError(warnings);
+    if (error) {
+      const errorFn = WarningCodesFns[error.key];
+      if (!errorFn) {
+        return EMPTY;
+      }
+      return WarningCodesFns[error.key](error.value);
+    }
+    return EMPTY;
+  }
+}

package/src/lib/pipes/gov/gov-color.pipe.ts

@@ -0,0 +1,24 @@
+import { Pipe, PipeTransform } from "@angular/core";
+import { ControlSeverity, ControlSeverityType, GovControlSeverity } from "../../common";
+
+@Pipe({
+    name: 'govColor',
+    standalone: true,
+})
+export class GovColorPipe implements PipeTransform {
+    transform(color: ControlSeverityType): string {
+        switch (color) {
+            case ControlSeverity.danger:
+                return GovControlSeverity.error;
+            
+            case ControlSeverity.info:
+                return GovControlSeverity.neutral;
+
+            case ControlSeverity.help:
+            case ControlSeverity.contrast:
+                return GovControlSeverity.primary;
+        }
+
+        return color;
+    }
+}

package/src/lib/pipes/gov/gov-size.pipe.ts

@@ -0,0 +1,16 @@
+import { Pipe, PipeTransform } from "@angular/core";
+import { FieldSizeType } from "../../common";
+
+@Pipe({
+    name: 'govSize',
+    standalone: true,
+})
+export class GovSizePipe implements PipeTransform {
+    transform(size: FieldSizeType | undefined): string | undefined {
+        if (size) {
+            return size.substring(0, 1);
+        }
+
+        return size;
+    }
+}

package/src/lib/pipes/index.ts

@@ -0,0 +1,8 @@
+export * from './error/error.codes';
+export * from './error/error.models';
+export * from './error/error.pipe';
+export * from './error/warning.pipe';
+export * from './error/warning.codes';
+export * from './gov/gov-size.pipe';
+export * from './gov/gov-color.pipe';
+export * from './keyOrFn/keyOrFn.pipe';

package/src/lib/pipes/keyOrFn/keyOrFn.pipe.ts

@@ -0,0 +1,23 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'keyOrFn',
+  pure: false,
+  standalone: true,
+})
+export class KeyOrFunctionPipe implements PipeTransform {
+  transform(keyOrFn: any, row: any): any {
+    if (keyOrFn instanceof Function) {
+      return keyOrFn(row);
+    } else if (typeof keyOrFn === 'string') {
+      const value = row[keyOrFn];
+      if (value) {
+        return value;
+      }
+    } else if (typeof keyOrFn === 'boolean') {
+      return keyOrFn;
+    }
+    return '';
+  }
+}

package/src/test-setup.ts

@@ -0,0 +1,8 @@
+// @ts-expect-error https://thymikee.github.io/jest-preset-angular/docs/getting-started/test-environment
+globalThis.ngJest = {
+  testEnvironmentOptions: {
+    errorOnUnknownElements: true,
+    errorOnUnknownProperties: true,
+  },
+};
+import 'jest-preset-angular/setup-jest';

package/tsconfig.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "target": "es2022",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ],
+  "extends": "../../../tsconfig.base.json",
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}

package/tsconfig.lib.json

@@ -0,0 +1,17 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": []
+  },
+  "exclude": [
+    "src/**/*.spec.ts",
+    "src/test-setup.ts",
+    "jest.config.ts",
+    "src/**/*.test.ts"
+  ],
+  "include": ["src/**/*.ts"]
+}

package/tsconfig.lib.prod.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}

package/tsconfig.spec.json

@@ -0,0 +1,16 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "module": "commonjs",
+    "target": "es2016",
+    "types": ["jest", "node"]
+  },
+  "files": ["src/test-setup.ts"],
+  "include": [
+    "jest.config.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts"
+  ]
+}