@yomotech/view-toolkit 0.0.32 → 0.0.34

package/src/lib/containers/model/model.component.ts

@@ -1,436 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { AfterViewInit, Component, EventEmitter, Input, Output, SimpleChanges } from '@angular/core';
-import { FormsModule, NgForm } from '@angular/forms';
-import { CapacitorHttp } from '@capacitor/core';
-import { NzDatePickerModule } from 'ng-zorro-antd/date-picker';
-import { NzModalModule } from 'ng-zorro-antd/modal';
-import { NzSelectModule } from 'ng-zorro-antd/select';
-import { AutoCompleteModule } from 'primeng/autocomplete';
-import { DatePickerModule } from 'primeng/datepicker';
-import { InputTextModule } from 'primeng/inputtext';
-import { Label } from '../../components/label/label';
-import { Textbox } from '../../components/textbox/textbox';
-import { String } from '../../components/string/string';
-import { Autocomplete } from '../../components/autocomplete/autocomplete';
-
-@Component({
-  standalone: true,
-  selector: 'vl-model',
-  templateUrl: './model.component.html',
-  styleUrl: './model.component.css',
-  imports: [
-    CommonModule,
-    FormsModule,
-    NzModalModule,
-    NzSelectModule,
-    NzDatePickerModule,
-    DatePickerModule,
-    AutoCompleteModule,
-    InputTextModule,
-    Label,
-    Textbox,
-    String,
-    Autocomplete
-  ]
-})
-export class ModelComponent implements AfterViewInit {
-  matchData: any[] = [];
-  @Input() errorMessages: any = {};
-  @Input() isModalShow: boolean = false;
-  @Input() modalItemInfo: any = {};
-  @Input() selectedLanguageInfo: any = {};
-  @Input() userInfo: any = {};
-  @Output() invokeButtonClick: EventEmitter<any> = new EventEmitter();
-  @Output() invokeSetFormData: EventEmitter<any> = new EventEmitter();
-  @Output() modalClose = new EventEmitter<void>();
-  copyLayoutSchema: any = {};
-  isLoading: boolean = false;
-
-  constructor() {
-  }
-
-  ngAfterViewInit(): void {
-  }
-
-  async ngOnChanges(changes: SimpleChanges) {
-    if (this.isModalShow === true) {
-      if (this.modalItemInfo.layoutSchema) {
-        this.copyLayoutSchema = JSON.parse(JSON.stringify(this.modalItemInfo.layoutSchema));
-      }
-      if ((changes['selectedLanguageInfo'] || this.selectedLanguageInfo) && this.selectedLanguageInfo.selectedLanguage) {
-        this.modalItemInfo.layoutSchema = this.updateLayoutLanguage(this.copyLayoutSchema, this.selectedLanguageInfo.selectedLanguage)
-      }
-      if (this.modalItemInfo?.currentRecord) {
-        this.mapDataToPropertySchema(
-          this.modalItemInfo.currentRecord,
-          this.modalItemInfo
-        );
-      }
-      await this.setAutoCompleteData();
-    }
-  }
-
-  updateLayoutLanguage<T>(
-    schema: T,
-    translations: Record<string, string>
-  ): T {
-    const cloned = JSON.parse(JSON.stringify(schema));
-
-    const walk = (obj: any) => {
-      if (!obj || typeof obj !== 'object') return;
-
-      // 🔹 label.caption (most common in form schemas)
-      if (obj.label && typeof obj.label.caption === 'string') {
-        const original = obj.label.caption;
-        obj.label.caption = translations[original] ?? original;
-      }
-
-      // 🔹 direct caption (fallback / buttons / future-proof)
-      if (typeof obj.caption === 'string') {
-        const original = obj.caption;
-        obj.caption = translations[original] ?? original;
-      }
-
-      // 🚫 Skip huge data arrays (autocomplete datasets, etc.)
-      if (Array.isArray(obj.data)) return;
-
-      // 🔁 Recurse
-      Object.keys(obj).forEach((key) => {
-        const value = obj[key];
-        if (typeof value === 'object') {
-          walk(value);
-        }
-      });
-    };
-
-    walk(cloned);
-    return cloned;
-  }
-
-
-  mapDataToPropertySchema(data: any, modalItemInfo: any): void {
-    if (!data || !modalItemInfo?.propertySchema) return;
-    const [rootScope] = Object.keys(modalItemInfo.propertySchema);
-    if (!rootScope) return;
-
-    const schemaFields = modalItemInfo.propertySchema[rootScope];
-    Object.keys(schemaFields).forEach((fieldKey) => {
-      if (data.hasOwnProperty(fieldKey)) {
-        if (!schemaFields[fieldKey]) {
-          schemaFields[fieldKey] = {};
-        }
-        schemaFields[fieldKey].value = data[fieldKey];
-      }
-    });
-  }
-
-
-  async setAutoCompleteData() {
-    for (const section of this.modalItemInfo.layoutSchema.formSections) {
-      for (const field of section.formFields || []) {
-        const type =
-          this.modalItemInfo.propertySchema[
-            this.getScope(field.scope?.reference)
-          ]?.[field.scope.reference.split('/').pop()]?.type;
-        if (type === 'autocomplete' && field.option?.autocomplete) {
-          this.isLoading = true;
-          field['data'] = await this.fetchAutocompleteData(field);
-          this.isLoading = false;
-        }
-      }
-    }
-  }
-
-  async fetchAutocompleteData(formField: any) {
-    const config = formField.option?.autocomplete;
-    if (!config) return;
-    const request: any = this.resolveAutocompleteConfig(config, this.userInfo);
-    const response = await CapacitorHttp.request({
-      url: request.url,
-      method: request.method,
-      params: request.params,
-      headers: request.headers
-    });
-
-    return response.data?.length > 0 ? response.data : [];
-  }
-
-  resolveAutocompleteConfig(config: any, userInfo: any) {
-    const params: any = {};
-    Object.entries(config.params || {}).forEach(([key, value]: any) => {
-      // 🔹 Dynamic token
-      if (typeof value === 'string' && value.includes('{{')) {
-        params[key] = this.resolveToken(value, userInfo);
-      }
-      // 🔹 Computed param
-      else if (value?.type === 'company') {
-        params[key] = this.buildCompany(userInfo);
-      }
-      // 🔹 Static
-      else {
-        params[key] = value;
-      }
-    });
-
-    return {
-      url: `${userInfo.p5_backend_url}${config.url}`,
-      method: config.method || 'POST',
-      params,
-      headers: config.passToken
-        ? {
-          Authorization: `Bearer ${userInfo.token}`,
-          Accept: 'application/json'
-        }
-        : {}
-    };
-  }
-
-  buildCompany(userInfo: any): string {
-    return userInfo.p5_plant
-      ? `${userInfo.p5_group}/${userInfo.p5_client}/${userInfo.p5_plant}`
-      : `${userInfo.p5_group}/${userInfo.p5_client}/`;
-  }
-
-  resolveToken(template: string, context: any) {
-    return template.replace(/{{(.*?)}}/g, (_, path) => {
-      return path.split('.').reduce((acc: any, key: any) => acc?.[key], context) ?? '';
-    });
-  }
-
-  getScope(scope: any) {
-    let propertyScope = "";
-    let start = scope?.indexOf("#/") + 2;
-    let end = scope?.indexOf("/", start);
-    if (start && end) {
-      propertyScope = scope.substring(start, end);
-    }
-    return propertyScope;
-  }
-
-  autocompChangeEvent(event: any) {
-    const q = (event?.event.query || '').toLowerCase();
-    let fieldName = event?.formField.scope?.reference?.split('/')?.pop()
-    if (fieldName) {
-      this.matchData = event?.formField.data?.filter((x: any) => x[fieldName] && x[fieldName]?.toLowerCase()?.startsWith(q));
-    }
-  }
-
-  autocompFocusOutEvent(event: any) {
-    const selected = event?.event.target.value;
-    let fieldName = event?.formField.scope?.reference?.split('/')?.pop();
-    if (fieldName && (selected || typeof selected !== 'object')) {
-      let actualObj = event?.formField.data?.find((x: any) => x[fieldName] == selected)
-      if (actualObj) {
-        this.autocompSelectEvent(event)
-      }
-    }
-  }
-
-  autocompSelectEvent(event: any) {
-    const selected = event?.event.value;
-    const mapping = event.formField.option?.onSelect?.mapFields;
-    if (!selected || !mapping) return;
-    Object.entries(mapping).forEach(([targetProp, sourceKey]) => {
-      const scope = this.getScope(event.formField.scope.reference);
-      if (this.modalItemInfo.propertySchema?.[scope]?.[targetProp]) {
-        this.modalItemInfo.propertySchema[scope][targetProp].value = selected[sourceKey as string] ?? null;
-      }
-    });
-  }
-
-  setErroMessage(formField: any, errorMessages: any, errorType: any) {
-    let error: any = "";
-    let fieldName: any = formField.label?.value ? formField.label?.value : formField.label?.caption ? formField.label?.caption : this.modalItemInfo.propertySchema[this.getScope(formField.scope?.reference)][formField.scope?.reference.split('/').pop()]?.caption;
-    if (errorType == "required") {
-      error = this.selectedLanguageInfo?.errorMessages?.required ? this.selectedLanguageInfo?.errorMessages.required : errorMessages.required
-    }
-    if (error && error.toString().includes("{{requiredLength}}")) {
-      error = error.replace(/{{\s*requiredLength\s*}}/g, formField?.minlength.toString());
-    }
-    return error.replace(/{{\s*field\s*}}/g, fieldName);
-  }
-
-  getStyleWithoutClasses(styleObject: any) {
-    if (!styleObject) {
-      return { classes: '', style: {} };
-    }
-    const { classes, ...styleWithoutClasses } = styleObject;
-    return { classes: classes && classes.length > 0 ? classes[0] : '', style: styleWithoutClasses };
-  }
-
-  dateChangeEvent(formField: any, value: any) {
-    this.handleRules(formField, value);
-  }
-
-  onDateTyping(event: any) {
-    const input = event.target as HTMLInputElement;
-    if (!input) return;
-    let digits = input.value.replace(/\D/g, '');
-    digits = digits.substring(0, 8);
-    let formatted = '';
-    if (digits.length <= 4) {
-      formatted = digits;
-    } else if (digits.length <= 6) {
-      formatted = `${digits.slice(0, 4)}-${digits.slice(4)}`;
-    } else {
-      formatted = `${digits.slice(0, 4)}-${digits.slice(4, 6)}-${digits.slice(6)}`;
-    }
-    input.value = formatted;
-  }
-
-  forceNumericKeyboard(event: any) {
-    const input = event?.target as HTMLInputElement;
-    if (input && input.tagName === 'INPUT') {
-      input.setAttribute('inputmode', 'numeric'); // Android
-      input.setAttribute('pattern', '[0-9:]*');   // iOS
-      input.setAttribute('type', 'tel');           // strongest signal
-    }
-  }
-
-  onTimeTyping(event: any) {
-    const input: HTMLInputElement =
-      event?.target || event?.originalEvent?.target;
-    if (!input) return;
-    let digits = input.value.replace(/\D/g, '');
-    digits = digits.substring(0, 4);
-    let formatted = '';
-    if (digits.length <= 2) {
-      formatted = digits;
-    } else {
-      formatted = `${digits.slice(0, 2)}:${digits.slice(2)}`;
-    }
-
-    input.value = formatted;
-  }
-
-  timeChangeEvent(formField: any, value: any) {
-    this.handleRules(formField, value);
-  }
-
-  handleRules(formField: any, value: any) {
-    const scope = this.getScope(formField.scope.reference);
-    const field = formField.scope?.reference.split('/').pop()
-    const rules = formField.option?.rules;
-    this.modalItemInfo.propertySchema[scope][field].value = value;
-    if (!rules) return;
-    rules.forEach((rule: any) => {
-      let exist = this.isRuleTriggered(rule, formField)
-      if (!exist) return;
-      switch (rule.action) {
-        case 'calculateDuration':
-          this.applyDurationRule(rule, formField);
-          break;
-        case 'resetValue':
-          this.resetRule(rule, formField);
-          break;
-      }
-    });
-  }
-
-  resetRule(rule: any, formField: any) {
-    const scope = this.getScope(formField.scope.reference);
-    if (rule?.resetValue?.length > 0) {
-      rule.resetValue.forEach((prop: any) => {
-        this.modalItemInfo.propertySchema[scope][prop].value = null;
-      });
-    }
-  }
-
-  isRuleTriggered(rule: any, formField: any): boolean {
-    if (rule.when === 'timeRangeComplete') {
-      const scope = this.getScope(formField.scope.reference);
-      return (
-        this.modalItemInfo.propertySchema[scope]?.workDayTimeFrom?.value &&
-        this.modalItemInfo.propertySchema[scope]?.workDayTimeTo?.value
-      );
-    } else if (rule.when === 'change') {
-      return true;
-    }
-    return false;
-  }
-
-  applyDurationRule(rule: any, formField: any) {
-    const scope = this.getScope(formField.scope.reference);
-    const schema = this.modalItemInfo.propertySchema[scope];
-    const fromTimeVal: Date = schema?.workDayTimeFrom?.value;
-    const toTimeVal: Date = schema?.workDayTimeTo?.value;
-    const baseDateVal: Date = schema?.fromDate?.value;
-
-    // 🔒 Guard
-    if (!fromTimeVal || !toTimeVal || !baseDateVal) {
-      schema[rule.params.durationField].value = '';
-      return;
-    }
-
-    // 📅 Base date (From Date)
-    const baseDate = new Date(baseDateVal);
-    baseDate.setHours(0, 0, 0, 0);
-
-    // ⏱ FROM datetime
-    const fromDateTime = new Date(baseDate);
-    fromDateTime.setHours(
-      fromTimeVal.getHours(),
-      fromTimeVal.getMinutes(),
-      0,
-      0
-    );
-
-    // ⏱ TO datetime
-    let toDateTime = new Date(baseDate);
-    toDateTime.setHours(
-      toTimeVal.getHours(),
-      toTimeVal.getMinutes(),
-      0,
-      0
-    );
-
-    // 🌙 Overnight handling
-    if (toDateTime <= fromDateTime) {
-      toDateTime.setDate(toDateTime.getDate() + 1);
-    }
-
-    // ⏳ Duration calculation
-    const diffMs = toDateTime.getTime() - fromDateTime.getTime();
-    const totalMinutes = Math.floor(diffMs / 60000);
-    const hours = Math.floor(totalMinutes / 60);
-    const minutes = totalMinutes % 60;
-    const duration = `${hours}:${minutes.toString().padStart(2, '0')}`;
-    // ✅ Set duration
-    schema[rule.params.durationField].value = duration;
-
-    // ✅ Auto set To Date
-    schema.toDate.value = new Date(toDateTime);
-  }
-
-  invokeSetformData() {
-    this.invokeSetFormData.emit();
-  }
-
-  invokeFormBtnClick(option: any, propertySchema: any, form: NgForm) {
-    if (option.innerAction === 'submit') {
-      let valid = this.checkValidty(form);
-      if (valid) {
-        this.invokeButtonClick.emit({ option: option, propertySchema: propertySchema, recordIndex: this.modalItemInfo?.recordIndex });
-      }
-    } else {
-      this.invokeButtonClick.emit({ option: option, propertySchema: propertySchema });
-    }
-  }
-
-  checkValidty(form: NgForm): boolean {
-    if (!form) {
-      return false;
-    }
-
-    Object.values(form.controls).forEach(control => {
-      control.markAsTouched();
-      control.updateValueAndValidity();
-    });
-
-    return !!form.valid;
-  }
-
-  onCancel() {
-    this.modalClose.emit();
-  }
-}

package/src/lib/containers/pagination/pagination.component.html

@@ -1,41 +0,0 @@
-<div [ngStyle]="paginationStyle">
-    <ul [ngStyle]="listStyle" [style.z-index]="isMobile ? 99999 : 'auto'">
-
-        <li (click)="invokeGoToPage(0)" [ngStyle]="getPageItemStyle(undefined, currentPage === 0)">
-            ««
-        </li>
-
-        <li (click)="invokeGoToPage(currentPage - 1)" [ngStyle]="getPageItemStyle(undefined, currentPage === 0)">
-            «
-        </li>
-
-        <li *ngFor="let page of pages" (click)="invokeGoToPage(page)" [ngStyle]="getPageItemStyle(page)">
-            {{ page + 1 }}
-        </li>
-
-        <li (click)="invokeGoToPage(currentPage + 1)"
-            [ngStyle]="getPageItemStyle(undefined, currentPage === pages.length - 1)">
-            »
-        </li>
-
-        <li (click)="invokeGoToPage(pages.length - 1)"
-            [ngStyle]="getPageItemStyle(undefined, currentPage === pages.length - 1)">
-            »»
-        </li>
-    </ul>
-
-    <div *ngIf="itemInfo?.layoutSchema?.pagination?.pageSize" [ngStyle]="sizeControlStyle">
-
-        <label for="pageSize" [ngStyle]="labelStyle">
-            {{ itemInfo?.layoutSchema?.pagination?.caption }}
-        </label>
-
-        <select id="pageSize" [(ngModel)]="pageSize" (change)="invokeOnPageSizeChange(pageSize)"
-            [ngStyle]="selectStyle">
-
-            <option *ngFor="let size of [5, 10, 15, 20]" [value]="size">
-                {{ size }}
-            </option>
-        </select>
-    </div>
-</div>

package/src/lib/containers/pagination/pagination.component.ts

@@ -1,100 +0,0 @@
-import { Platform, PlatformModule } from '@angular/cdk/platform';
-import { CommonModule } from '@angular/common';
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-
-@Component({
-  standalone: true,
-  selector: 'vl-pagination',
-  templateUrl: './pagination.component.html',
-  styleUrl: './pagination.component.css',
-  imports: [
-    CommonModule,
-    FormsModule,
-    PlatformModule
-  ]
-})
-export class PaginationComponent {
-  @Input() itemInfo: any = {
-    layoutSchema: {},
-    propertySchema: {},
-    data: []
-  };
-
-  @Input() pageSize: any;
-  @Input() currentPage: number = 0;
-  @Input() pages: number[] = [];
-
-  @Output() pageSizeChange: EventEmitter<any> = new EventEmitter();
-  @Output() onGoToPage: EventEmitter<any> = new EventEmitter();
-
-  isMobile: boolean = false;
-
-  constructor(private platform: Platform) { }
-
-  ngOnInit() {
-    if (this.platform.ANDROID || this.platform.IOS) {
-      this.isMobile = true;
-    }
-  }
-
-  get paginationStyle(): any {
-    return this.getStyle(this.itemInfo?.layoutSchema?.pagination?.style);
-  }
-
-  get listStyle(): any {
-    return this.getStyle(this.itemInfo?.layoutSchema?.pagination?.listStyle);
-  }
-
-  get sizeControlStyle(): any {
-    return this.getStyle(this.itemInfo?.layoutSchema?.pagination?.sizeControlStyle);
-  }
-
-  get labelStyle(): any {
-    return this.getStyle(this.itemInfo?.layoutSchema?.pagination?.labelStyle);
-  }
-
-  get selectStyle(): any {
-    return this.getStyle(this.itemInfo?.layoutSchema?.pagination?.selectStyle);
-  }
-
-  getStyle(styleObject: any): Record<string, any> {
-    if (!styleObject || typeof styleObject !== 'object') {
-      return {};
-    }
-
-    const { classes, ...styleWithoutClasses } = styleObject;
-    return styleWithoutClasses;
-  }
-
-  getPageItemStyle(page?: number, disabled: boolean = false): Record<string, any> {
-    const pagination = this.itemInfo?.layoutSchema?.pagination || {};
-
-    const baseStyle = this.getStyle(pagination.itemStyle);
-    const activeStyle = page !== undefined && this.currentPage === page
-      ? this.getStyle(pagination.activeItemStyle)
-      : {};
-    const disabledStyle = disabled
-      ? this.getStyle(pagination.disabledItemStyle)
-      : {};
-
-    return {
-      ...baseStyle,
-      ...activeStyle,
-      ...disabledStyle,
-      'pointer-events': disabled ? 'none' : 'auto'
-    };
-  }
-
-  invokeOnPageSizeChange(pageSize: any) {
-    this.pageSizeChange.emit(Number(pageSize));
-  }
-
-  invokeGoToPage(page: number) {
-    if (page < 0 || page > this.pages.length - 1 || page === this.currentPage) {
-      return;
-    }
-
-    this.onGoToPage.emit(page);
-  }
-}