tuain-ng-forms-lib 17.2.20 → 17.2.22

package/src/lib/classes/forms/piece-propagate.ts

@@ -0,0 +1,47 @@
+import { BehaviorSubject } from 'rxjs';
+import { FormPiece } from './piece';
+
+const VISIBLE = 'visible';
+const DISABLED = 'disabled';
+
+export class FormPiecePropagate extends FormPiece {
+  protected propagationCustomAttributes: string[] = [];
+  protected _attributeChange: BehaviorSubject<any>;
+
+  constructor(pieceDefinition: any, formConfig: any) {
+    super(pieceDefinition, formConfig);
+    this._attributeChange = new BehaviorSubject<any>(null);
+  }
+
+  get attributeChange() { return this._attributeChange.asObservable(); }
+
+  propagateAttribute(name, value) {
+    this._attributeChange?.next({ name, value });
+  }
+
+  override setCustomAttribute(name: string, value: any): void {
+    super.setCustomAttribute(name, value);
+    if (this.propagationCustomAttributes?.includes(name)) {
+      const fullName = `customAttributes.${name}`;
+      this.propagateAttribute(fullName, value);
+    }
+  }
+
+  override setVisibility(visible: boolean, forced: boolean | null = null): void {
+    super.setVisibility(visible, forced);
+    this.propagateAttribute(VISIBLE, this._visible);
+  }
+
+  override set enabled(enabled) {
+    super.enabled = enabled;
+    this.propagateAttribute(DISABLED, this._disabled);
+  }
+
+  override formStateChange(state) {
+    super.formStateChange(state);
+    if (state) {
+      this.propagateAttribute(VISIBLE, this._visible);
+      this.propagateAttribute(DISABLED, this._disabled);
+    }
+  }
+}

package/src/lib/classes/forms/piece.ts

@@ -0,0 +1,164 @@
+import { Subject, takeUntil } from 'rxjs';
+
+export class FormPiece {
+  private destroy$ = new Subject<void>();
+
+  protected _formState: string = '';
+  protected _visibleForced: boolean;
+  protected _isForced: boolean;
+  protected _absoluteVisible: boolean = true;
+  protected _absoluteDisabled: boolean = false;
+  protected _widget: any = null;
+
+  protected visibleStates: string[] = [];
+  protected enabledStates: string[] = [];
+
+  public _form: any = null;
+  public _formConfig: any;
+  public _visible: boolean = true;
+  public _disabled: boolean = false;
+  public customAttributes: any = {};
+
+  constructor(pieceDefinition: any, formConfig: any) {
+    this._formConfig = formConfig;
+    this._isForced = false;
+    this._visibleForced = false;
+    this.setVisibleStates(pieceDefinition.visibleStates);
+    this.setEnabledStates(pieceDefinition.enabledStates);
+
+    this.enabled = !pieceDefinition?.disabled ?? false;
+    this.setVisibility(pieceDefinition?.visible ?? true);
+    this.customAttributes = pieceDefinition?.customAttributes ?? {};
+    if (pieceDefinition?.customAttributes) {
+      Object.keys(pieceDefinition?.customAttributes)
+        ?.forEach(attr => this.customAttributes[attr] = pieceDefinition?.customAttributes[attr])
+    }
+  }
+
+  getCustomAttribute(name: string): any { return this.customAttributes?.[name] ?? null; }
+  setCustomAttribute(name: string, value: any): void { if (name) { this.customAttributes[name] = value; } }
+
+  setCustomAttributes(attributes: any): FormPiece {
+    Object.entries(attributes).forEach(([name, value]) => {
+      this.setCustomAttribute(name, value);
+    });
+    return this;
+  }
+
+  matchAttribute(name: string, value: string): boolean { return this.customAttributes?.[name] === value; }
+
+  setVisibleStates(newStates: any): void {
+    const visibleStates = (!Array.isArray(newStates) && typeof newStates === 'string')
+      ? newStates.split(',').map(state => state.trim()).filter(state => state.length > 0)
+      : newStates;
+    this.visibleStates = (Array.isArray(visibleStates)) ? [...(new Set(visibleStates))] : [];
+  }
+
+  addVisibleState(state: string) {
+    if (!this.visibleStates.includes(state)) {
+      this.visibleStates.push(state);
+    }
+  }
+
+  removeVisibleState(state: string) {
+    const existStateIdx = this.visibleStates.findIndex(st => st === state);
+    if (existStateIdx >= 0) {
+      this.visibleStates.splice(existStateIdx, 1);
+    }
+  }
+
+  setEnabledStates(newStates: any): void {
+    const enabledStates = (!Array.isArray(newStates) && typeof newStates === 'string')
+      ? newStates.split(',').map(state => state.trim()).filter(state => state.length > 0)
+      : newStates;
+    this.enabledStates = (Array.isArray(enabledStates)) ? [...(new Set(enabledStates))] : [];
+  }
+
+  addEnabledState(state: string) {
+    if (!this.enabledStates.includes(state)) {
+      this.enabledStates.push(state);
+    }
+  }
+
+  removeEnabledState(state: string) {
+    const existStateIdx = this.enabledStates.findIndex(st => st === state);
+    if (existStateIdx >= 0) {
+      this.enabledStates.splice(existStateIdx, 1);
+    }
+  }
+
+  viewOnState(state: string): boolean { return (this.visibleStates && state) ? this.visibleStates.includes(state) : false; }
+  enabledOnState(state: string): boolean { return (this.enabledStates && state) ? this.enabledStates.includes(state) : false; }
+
+  get absoluteVisible(): boolean { return this._absoluteVisible; }
+  get absoluteDisabled(): boolean { return this._absoluteDisabled; }
+
+  get visible(): boolean { return this._visible; }
+  set visible(visible: boolean) { this.setVisibility(visible); }
+
+  visibleOn(state: string): boolean {
+    return this._absoluteVisible && this.viewOnState(state);
+  }
+
+  enabledOn(state: string): boolean {
+    return !this._absoluteDisabled && this.enabledOnState(state);
+  }
+
+  setVisibility(visible: boolean, forced: boolean | null = null): void {
+    this._absoluteVisible = !!visible;
+    if (forced !== null) {
+      this._isForced = forced;
+      this._visibleForced = visible;
+    }
+    this._visible = this._absoluteVisible && this.viewOnState(this._formState);
+  }
+
+  show(forced: boolean | null = null): void {
+    this.setVisibility(true, forced);
+  }
+
+  hide(forced: boolean | null = null): void {
+    this.setVisibility(false, forced);
+  }
+
+  get enabled(): boolean { return !this._disabled; }
+  set enabled(enabled) {
+    this._absoluteDisabled = !enabled;
+    this._disabled = this._absoluteDisabled || !this.enabledOnState(this._formState);
+  }
+
+  get editable(): boolean { return !this._disabled; }
+
+  get disabled(): boolean { return this._disabled; }
+
+  set disabled(disabled) { this.enabled = !disabled; }
+
+  enable(): void { this.enabled = true; }
+  disable(): void { this.enabled = false; }
+
+  formStateChangeCustomSubscribe(form, formChangeSubject) { }
+
+  formStateChange(state) {
+    if (state) {
+      this._formState = state;
+      this._visible = this._absoluteVisible && this.viewOnState(state);
+      this._disabled = this._absoluteDisabled || !this.enabledOnState(state);
+    }
+  }
+
+  connectWithParentForm(form, formChangeSubject) {
+    this._form = form;
+    this.formStateChangeCustomSubscribe(form, formChangeSubject);
+    formChangeSubject
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(event => this.formStateChange(event?.state));
+  }
+
+  set widget(widget) { this._widget = widget; }
+  get widget() { return this._widget; }
+
+  destroy() {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+}

package/src/lib/classes/forms/section.ts

@@ -0,0 +1,165 @@
+import { Subject } from 'rxjs';
+import { FormPiecePropagate } from './piece-propagate';
+import { FormAction } from './action';
+import { RecordFormSubSection } from './subsection';
+
+const ACTIVE = 'active';
+
+export class RecordFormSection extends FormPiecePropagate {
+  private readonly _activation = new Subject<string>();
+  private readonly _inactivation = new Subject<string>();
+  private _active = false;
+  private _sectionId: string | null = null;
+  private _sectionCode: string | null = null;
+  private _sectionTitle: string | null = null;
+  private _subSections: RecordFormSubSection[] = [];
+  private _subSectionsObj: any;
+  private _exclusiveSubSectionsByAttr = {};
+
+  constructor(sectionReceived, formObject, formConfig) {
+    super(sectionReceived, formConfig);
+    this.propagationCustomAttributes = this._formConfig?.propagationCustomAttributes?.sections ?? [];
+    if (!sectionReceived) { return; }
+    this._sectionId = (sectionReceived.sectionId) ? sectionReceived.sectionId.toString() : '';
+    this._sectionCode = (sectionReceived.sectionCode) ? sectionReceived.sectionCode : '';
+    this._sectionTitle = (sectionReceived.sectionTitle) ? sectionReceived.sectionTitle : '';
+    this._subSections = [];
+    this._subSectionsObj = {};
+    if (sectionReceived.subsections) {
+      const subsections = sectionReceived.subsections.map(subSecDef => {
+        const visibleStates = subSecDef.visibleStates ?? [];
+        if (subSecDef.elements && Array.isArray(subSecDef.elements)) {
+          subSecDef.elements = subSecDef.elements.map(elm => ({ code: elm.elementCode, type: elm.elementTypeName }));
+        }
+        return { ...subSecDef, visibleStates };
+      });
+      for (const subsectionReceived of subsections) {
+        const subSectionToAdd = new RecordFormSubSection(subsectionReceived, formObject, formConfig);
+        const subsectionCode = subSectionToAdd.subsectionCode;
+        if (subsectionCode) {
+          this._subSections.push(subSectionToAdd);
+          this._subSectionsObj[subsectionCode] = subSectionToAdd;
+        }
+      }
+    }
+  }
+
+  get code() { return this._sectionCode; }
+  get activation() { return this._activation.asObservable(); }
+  get inactivation() { return this._inactivation.asObservable(); }
+
+  get active() { return this._active; }
+  get sectionId() { return this._sectionId; }
+  get sectionCode() { return this._sectionCode; }
+  get sectionTitle() { return this._sectionTitle; }
+  get subSections() { return this._subSections; }
+  get subSectionsObj() { return this._subSectionsObj; }
+
+  set active(active) { this._active = active; }
+  set sectionId(sectionId) { this._sectionId = sectionId; }
+  set sectionCode(sectionCode) { this._sectionCode = sectionCode; }
+  set sectionTitle(sectionTitle) { this._sectionTitle = sectionTitle; }
+  set subSections(subSections) { this._subSections = subSections; }
+  set subSectionsObj(subSectionsObj) { this._subSectionsObj = subSectionsObj; }
+
+  activate() {
+    if (!this._active) {
+      this._active = true;
+      this._sectionCode && this._activation.next(this._sectionCode);
+    }
+  }
+
+  inactivate() {
+    if (this._active) {
+      this._active = false;
+      this._sectionCode && this._inactivation.next(this._sectionCode);
+    }
+  }
+
+  get title() { return this._sectionTitle; }
+  set title(title) { this._sectionTitle = title; }
+
+  getVisibleSubsections(state) {
+    return this._subSections.filter(subSection => subSection.visible);
+  }
+
+  getSubsection(subSectionCode) {
+    return (this._subSectionsObj && this._subSectionsObj[subSectionCode])
+      ? this._subSectionsObj[subSectionCode] : null;
+  }
+
+  activateSubSection(subSectionCode) {
+    if (subSectionCode === this._exclusiveSubSectionsByAttr[ACTIVE]) { return; }
+    const subSection = (this._subSectionsObj && this._subSectionsObj[subSectionCode])
+      ? this._subSectionsObj[subSectionCode] : null;
+    if (subSection) {
+      subSection?.activate();
+      this._exclusiveSubSectionsByAttr[ACTIVE] = subSectionCode;
+    }
+  }
+
+  getFields() {
+    let fieldsArray: any[] = [];
+    if (this._subSections && this._subSections.length > 0) {
+      for (const subSection of this._subSections) {
+        const subsectionFields: any[] = subSection.getFields() ?? [];
+        if (subsectionFields?.length > 0) {
+          fieldsArray = fieldsArray.concat(subsectionFields);
+        }
+      }
+    }
+    return fieldsArray;
+  }
+
+  getActions(): FormAction[] {
+    let actionArray: any[] = [];
+    if (this._subSections && this._subSections.length > 0) {
+      for (const subSection of this._subSections) {
+        const subSectionActions = subSection.getActions() ?? [];
+        if (subSectionActions?.length > 0) {
+          actionArray = actionArray.concat(subSectionActions);
+        }
+      }
+    }
+    return actionArray;
+  }
+
+  getActionNames(): string[] {
+    let actionArray: string[] = [];
+    if (this._subSections && this._subSections.length > 0) {
+      for (const subSection of this._subSections) {
+        actionArray = actionArray.concat(subSection.getActionNames());
+      }
+    }
+    return actionArray;
+  }
+
+  getFieldNames() {
+    let fieldsArray: string[] = [];
+    if (this._subSections && this._subSections.length > 0) {
+      for (const subSection of this._subSections) {
+        fieldsArray = fieldsArray.concat(subSection.getFieldNames());
+      }
+    }
+    return fieldsArray;
+  }
+
+  getField(name) {
+    let field = null;
+    if (this._subSections && this._subSections.length > 0) {
+      for (const subSection of this._subSections) {
+        field = subSection.getField(name);
+        if (field) {
+          return field;
+        }
+      }
+    }
+    return null;
+  }
+
+  override formStateChangeCustomSubscribe(form, formChangeSubject) {
+    this._subSections?.forEach(subsection => {
+      subsection?.connectWithParentForm(form, formChangeSubject);
+    });
+  }
+}

package/src/lib/classes/forms/subsection.ts

@@ -0,0 +1,109 @@
+import { FormPiecePropagate } from './piece-propagate';
+import { FormAction } from './action';
+import { elementTypes } from './form.constants';
+
+export class RecordFormSubSection extends FormPiecePropagate {
+  private _customRender: string | null = null;
+  private _subsectionId: string | null = null;
+  private _subsectionCode: string | null = null;
+  private _subsectionTitle: string | null = null;
+  private _subSectionElements: any[] = [];
+  private _subSectionFields: any[] = [];
+  private _subSectionTables: any[] = [];
+  private _subSectionActions: any[] = [];
+  private _elementsArray: any = {};
+  private _active = false;
+
+  constructor(subsectionReceived, formObject, formConfig) {
+    super(subsectionReceived, formConfig);
+    this.propagationCustomAttributes = this._formConfig?.propagationCustomAttributes?.subsections ?? [];
+    if (!subsectionReceived) { return; }
+    this._subsectionId = (subsectionReceived.subsectionId) ? subsectionReceived.subsectionId.toString() : '';
+    this._subsectionCode = (subsectionReceived.subsectionCode) ? subsectionReceived.subsectionCode : '';
+    this._subsectionTitle = (subsectionReceived.subsectionTitle) ? subsectionReceived.subsectionTitle : '';
+    if (subsectionReceived.elements) {
+      for (const receivedElement of subsectionReceived.elements) {
+        let elementObject: any = null;
+        let arrayToAdd: any[] = [];
+        const { type, code } = receivedElement;
+        switch (type) {
+          case elementTypes.field:
+            elementObject = formObject.getField(code);
+            arrayToAdd = this._subSectionFields;
+            break;
+          case elementTypes.table:
+            elementObject = formObject.getTable(code);
+            arrayToAdd = this._subSectionTables;
+            break;
+          case elementTypes.action:
+            elementObject = formObject.getAction(code);
+            arrayToAdd = this._subSectionActions;
+            break;
+        }
+        if (elementObject) {
+          elementObject.elementType = type;
+          arrayToAdd.push(elementObject);
+          this._subSectionElements.push(elementObject);
+          this._elementsArray[code] = elementObject;
+        }
+      }
+    }
+  }
+
+  get customRender() { return this._customRender; }
+  set customRender(customRenderName) { this._customRender = customRenderName; }
+
+  get subsectionId() { return this._subsectionId; }
+  get subsectionCode() { return this._subsectionCode; }
+  get subsectionTitle() { return this._subsectionTitle; }
+  get subSectionElements() { return this._subSectionElements; }
+  get subSectionFields() { return this._subSectionFields; }
+  get subSectionTables() { return this._subSectionTables; }
+  get subSectionActions() { return this._subSectionActions; }
+  get elementsArray() { return this._elementsArray; }
+  get active() { return this._active; }
+
+  set subsectionId(subsectionId) { this._subsectionId = subsectionId; }
+  set subsectionCode(subsectionCode) { this._subsectionCode = subsectionCode; }
+  set subsectionTitle(subsectionTitle) { this._subsectionTitle = subsectionTitle; }
+  set subSectionElements(subSectionElements) { this._subSectionElements = subSectionElements; }
+  set subSectionFields(subSectionFields) { this._subSectionFields = subSectionFields; }
+  set subSectionTables(subSectionTables) { this._subSectionTables = subSectionTables; }
+  set subSectionActions(subSectionActions) { this._subSectionActions = subSectionActions; }
+  set elementsArray(elementsArray) { this._elementsArray = elementsArray; }
+  set active(active) { this._active = active; }
+
+  getField(name) {
+    return this._subSectionFields.find(fld => fld.name === name);
+  }
+
+  getFields() {
+    return this._subSectionFields;
+  }
+
+  getFieldNames() {
+    return this._subSectionFields.map(field => field.code);
+  }
+
+  getActions(): FormAction[] {
+    return this._subSectionActions;
+  }
+
+  getActionNames(): string[] {
+    return this._subSectionActions.map(action => action.actionCode);
+  }
+
+  activate() {
+    if (!this._active) {
+      this._active = true;
+      // this.subsectionCode && this._activation.next(this.subsectionCode);
+    }
+  }
+
+  inactivate() {
+    if (this._active) {
+      this._active = false;
+      // this.subsectionCode && this._inactivation.next(this.subsectionCode);
+    }
+  }
+}

package/src/lib/classes/forms/table/action.ts

@@ -0,0 +1,41 @@
+import { FormPiece } from '../piece';
+export class TableAction extends FormPiece {
+  actionCode: string;
+  actionTitle: string;
+  iconName: string;
+  actionType: string;
+  actionClass: string;
+  stateField: string;
+  newState: string;
+  backend: boolean;
+
+  restrictedOnField: string | null = null;
+  restrictedOnValue: string | null = null;
+  restrictedOnOperator: string | null = null;
+
+  constructor(actionDefinition, formConfig) {
+    super(actionDefinition, formConfig);
+
+    this.actionCode = actionDefinition.actionCode;
+    this.actionTitle = actionDefinition.actionTitle;
+    this.iconName = actionDefinition.iconName || this.actionCode;
+    this.actionType = actionDefinition.actionType || 'STANDARD';
+    this.actionClass = actionDefinition.actionClass || 'INLINE';
+    this.newState = actionDefinition.newState;
+    this.stateField = actionDefinition.stateField || '';
+    this.backend = actionDefinition?.serverAction ?? false;
+    this.restrictedOnField = actionDefinition.fieldRestrictedCode ?? null;
+    if (this.restrictedOnField) {
+      this.restrictedOnValue = actionDefinition.valueRestricted ?? null;
+      this.restrictedOnOperator = actionDefinition.operatorRestricted || null;
+    }
+  }
+
+  override formStateChange(state) {
+    if (state) {
+      this._formState = state;
+      this._visible = this._absoluteVisible && this.viewOnState(state);
+      this._disabled = this._absoluteDisabled || !this.enabledOnState(state);
+    }
+  }
+}

package/src/lib/classes/forms/table/column.ts

@@ -0,0 +1,94 @@
+import { FormPiece } from '../piece';
+
+export interface FilterDef {
+  operators: string[];
+  options: any[];
+}
+
+export interface FilterSetup {
+  fieldCode: string;
+  operator: string;
+  values: any[];
+}
+export class RecordTableColumn extends FormPiece {
+  fieldCode: string = '';
+  fieldTitle: string = '';
+  fieldType: string = '';
+  fieldAlignment: string = '';
+  fieldFormat: string = '';
+  sortable: boolean = true;
+  searchable: boolean = true;
+  sortDirections: string[] = [];
+  // Filtros
+  filterVisible: boolean = false;
+  filterDef: FilterDef | null = null;
+  filterSetup: FilterSetup | null = null;
+
+  constructor(recTableColReceived, formConfig) {
+    super(recTableColReceived, formConfig);
+    this.filterDef = null;
+    if (recTableColReceived) {
+      this.fieldCode = recTableColReceived.fieldCode;
+      this.fieldTitle = recTableColReceived.fieldTitle;
+      this.fieldType = recTableColReceived.fieldTypeCode || this._formConfig.fieldTypes.text;
+      const defaultTypeAlignment = (this._formConfig.tableFieldStyles[this.fieldType] != null) ? this._formConfig.tableFieldStyles[this.fieldType]['text-align'] : 'left';
+      this.fieldAlignment = (recTableColReceived.alignment != null) ? recTableColReceived.alignment.toLowerCase() : defaultTypeAlignment;
+      this._absoluteVisible = recTableColReceived?.visible ?? true;
+      this.sortable = recTableColReceived?.sortable ?? false;
+      this.searchable = recTableColReceived?.searchable ?? true;
+      this.sortDirections = (this.sortable) ? ['ascend', 'descend'] : [];
+      this.fieldFormat = recTableColReceived.format || '';
+      this.customAttributes = recTableColReceived?.customAttributes ?? {};
+    }
+  }
+
+  setSearchable(searchable = true) { this.searchable = searchable; }
+
+  hideFilter() {
+    this.filterVisible = false;
+  }
+
+  addFilterDefinition(filterDefinition) {
+    this.filterDef = {
+      operators: filterDefinition.operators,
+      options: filterDefinition.options ?? null,
+    };
+  }
+
+  get filterDefinition() {
+    return this.filterDef;
+  }
+
+  addFilter(columnValues, operator) {
+    this.filterSetup = {
+      fieldCode: this.fieldCode,
+      operator: operator ?? this.filterDef?.operators[0] ?? 'IN',
+      values: columnValues,
+    }
+  }
+
+  get filter() {
+    return this.filterSetup;
+  }
+
+  removeFilter() {
+    this.filterSetup = null;
+  }
+
+  get options() {
+    if (this.filterDef?.operators?.length === 1 && this.filterDef?.operators[0] === 'IN') {
+      return this.filterDef?.options;
+    }
+    return null;
+  }
+
+  serSortDirections(ascend: boolean, descend: boolean) {
+    this.sortDirections = [];
+    if (ascend) {
+      this.sortDirections.unshift('ascend');
+    }
+    if (descend) {
+      this.sortDirections.unshift('descend');
+    }
+  }
+}