@yomotech/view-toolkit 0.0.30 → 0.0.32

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

@@ -0,0 +1,436 @@
+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

@@ -0,0 +1,41 @@
+<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

@@ -0,0 +1,100 @@
+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);
+  }
+}