@yomotech/view-toolkit 0.0.31 → 0.0.32

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

@@ -0,0 +1,474 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectorRef, Component, EventEmitter, Input, NgZone, Output } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { UtilityService } from '../../services/utility.service';
+import { RequestService } from '../../services/request.service';
+
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { SimpleChanges } from '@angular/core';
+import { OAuthService } from 'angular-oauth2-oidc';
+import { CapacitorHttp } from '@capacitor/core';
+
+import { NzIconModule } from 'ng-zorro-antd/icon';
+import { NzButtonModule } from 'ng-zorro-antd/button';
+import { NzDatePickerModule } from 'ng-zorro-antd/date-picker';
+import { NzModalModule, NzModalService } from 'ng-zorro-antd/modal';
+
+import { DatePickerModule } from 'primeng/datepicker';
+import { Platform } from '@angular/cdk/platform';
+import { PaginationComponent } from '../pagination/pagination.component';
+import { String as StringComponent } from '../../components/string/string';
+
+
+@Component({
+  selector: 'vl-card',
+  imports: [
+    CommonModule,
+    FormsModule,
+    NzIconModule,
+    DatePickerModule,
+    NzButtonModule,
+    NzDatePickerModule,
+    NzModalModule,
+    // StringComponent,
+    PaginationComponent,
+    StringComponent
+  ],
+  standalone: true,
+  templateUrl: './card.component.html',
+  styleUrl: './card.component.css',
+})
+export class CardComponent {
+  @Input() itemInfo: any = {};
+  @Input() currentPage: number = 0;
+  @Input() pageSize: number = 5;
+  @Input() selectedLanguageInfo: any = {};
+  @Input() mobileDisplay: boolean = false;
+  @Input() pages: number[] = [];
+  @Output() cardButtonClick: EventEmitter<any> = new EventEmitter();
+  @Output() cardHeaderButtonClick: EventEmitter<any> = new EventEmitter();
+  @Output() linkDetails: EventEmitter<any> = new EventEmitter();
+  @Output() imageDetails: EventEmitter<any> = new EventEmitter();
+  @Output() onPageSizeChange: EventEmitter<any> = new EventEmitter();
+  @Output() onPageChange: EventEmitter<any> = new EventEmitter();
+  cardPerRow: string = "md:col-6 lg:col-";
+  isLoading: boolean = false;
+  layoutSchemaCopy: any = {};
+  headerSchemaCopy: any = {};
+  footerSchemaCopy: any = {};
+
+
+  constructor(
+    private utilityService: UtilityService,
+    private platform: Platform,
+    private http: HttpClient,
+    private cdr: ChangeDetectorRef,
+    private zone: NgZone,
+    private modalService: NzModalService,
+    private oauthService: OAuthService,
+    private requestService: RequestService) {
+  }
+
+  ngOnInit() {
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if ((this.platform.ANDROID || this.platform.IOS) && !this.platform?.isBrowser) {
+      this.mobileDisplay = true;
+    }
+    if (changes['itemInfo']) {
+      if (this.itemInfo.layoutSchema) {
+        this.layoutSchemaCopy = JSON.parse(JSON.stringify(this.itemInfo.layoutSchema));
+      }
+      if (this.itemInfo.header) {
+        this.headerSchemaCopy = JSON.parse(JSON.stringify(this.itemInfo.header));
+      }
+      if (this.itemInfo.footer) {
+        this.footerSchemaCopy = JSON.parse(JSON.stringify(this.itemInfo.footer));
+      }
+    }
+    if ((changes['selectedLanguageInfo'] || this.selectedLanguageInfo) && this.selectedLanguageInfo.selectedLanguage) {
+      this.itemInfo.footer = this.updatebuttonLanguage(this.footerSchemaCopy, this.selectedLanguageInfo.selectedLanguage)
+      this.itemInfo.header = this.updatebuttonLanguage(this.headerSchemaCopy, this.selectedLanguageInfo.selectedLanguage)
+      this.itemInfo.layoutSchema = this.updateLayoutLanguage(this.layoutSchemaCopy, this.selectedLanguageInfo.selectedLanguage)
+    }
+  }
+
+  private safeUpdate(fn: () => void) {
+    if (NgZone.isInAngularZone()) {
+      fn();
+      this.cdr.markForCheck();
+    } else {
+      this.zone.run(() => {
+        fn();
+        this.cdr.markForCheck();
+      });
+    }
+  }
+
+  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
+    }
+  }
+
+  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;
+  }
+
+  updatebuttonLanguage<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;
+
+      // ✅ Replace direct caption (e.g. button.caption)
+      if (typeof obj.caption === 'string') {
+        const original = obj.caption;
+        obj.caption = translations[original] ?? original;
+      }
+
+      // ✅ Replace modalTitle if present
+      if (typeof obj.modalTitle === 'string') {
+        const original = obj.modalTitle;
+        obj.modalTitle = translations[original] ?? original;
+      }
+
+      // 🔁 Recurse
+      Object.keys(obj).forEach((key) => {
+        const value = obj[key];
+        if (typeof value === 'object') {
+          walk(value);
+        }
+      });
+    };
+
+    walk(cloned);
+    return cloned;
+  }
+
+
+  updateLayoutLanguage<T>(
+    schema: T,
+    translations: Record<string, string>
+  ): T {
+    // Deep clone to avoid mutating original schema
+    const cloned = JSON.parse(JSON.stringify(schema));
+
+    const walk = (obj: any) => {
+      if (!obj || typeof obj !== 'object') return;
+
+      // ✅ If label.caption exists → translate it
+      if (obj.label && typeof obj.label.caption === 'string') {
+        const originalCaption = obj.label.caption;
+        obj.label.caption =
+          translations[originalCaption] ?? originalCaption;
+      }
+
+      // 🔁 Recurse into object properties
+      Object.keys(obj).forEach((key) => {
+        const value = obj[key];
+        if (typeof value === 'object') {
+          walk(value);
+        }
+      });
+    };
+
+    walk(cloned);
+    return cloned;
+  }
+
+  dateChangeEvent(filter: any, value: any) {
+    const scope = this.getScope(filter.scope.reference);
+    const field = filter.scope?.reference.split('/').pop();
+    this.itemInfo.propertySchema[scope][field].value = value
+    this.applyDateFilter(this.extractFilterValues(this.itemInfo.propertySchema[scope]))
+  }
+
+  async applyDateFilter(filters: any) {
+    const from = filters.fromDateFilter ? new Date(filters.fromDateFilter) : null;
+    const to = filters.toDateFilter ? new Date(filters.toDateFilter) : null;
+    if (to && from) {
+      const formattedFrom = this.formatToOffsetISO(from);
+      const formattedTo = this.formatToOffsetISO(to);
+      const keycloakInfo: any = await this.utilityService.getLocalStorage('KeycloakInfo');
+      const logined: any = await this.utilityService.getLocalStorage('loginedUser');
+      this.safeUpdate(() => this.isLoading = true);
+      if (this.platform.ANDROID || this.platform.IOS) {
+        let saveOrder = await this.getSaveOrder(keycloakInfo?.token, keycloakInfo, formattedFrom, formattedTo)
+        this.itemInfo.data = saveOrder?.length > 0 ? saveOrder : []
+        this.safeUpdate(() => this.isLoading = false);
+      } else {
+        this.requestService.getSaveOrder(logined?.token, logined, formattedFrom, formattedTo).subscribe((saveOrders: any) => {
+          const updatedData = this.utilityService.restoreDatesFromStorage(saveOrders, this.itemInfo.propertySchema);
+          this.itemInfo.data = updatedData?.length > 0 ? updatedData : []
+          this.safeUpdate(() => this.isLoading = false);
+        })
+      }
+    }
+  }
+
+  async getSaveOrder(
+    token: string,
+    userInfo: any,
+    fromDate: any,
+    toDate: any
+  ) {
+    if (!token) {
+      return;
+    }
+
+    const company = userInfo.p5_plant
+      ? `${userInfo.p5_group}/${userInfo.p5_client}/${userInfo.p5_plant}`
+      : `${userInfo.p5_group}/${userInfo.p5_client}/`;
+
+    const url = `${userInfo.p5_backend_url}/assetsmobileservice/Zeiterfassung/requestBookedTimeRecording`;
+
+    try {
+      const response = await CapacitorHttp.post({
+        url,
+        params: {
+          resourceNo: userInfo.p5_resource_no,
+          workDayFrom: fromDate,
+          workDayTo: toDate,
+          company,
+          appVersion: '1',
+        },
+        headers: {
+          Authorization: `Bearer ${token}`, // ✅ REQUIRED
+          Accept: 'application/json',
+        },
+        // ❗ NO BODY needed for this endpoint
+      });
+
+      console.log('getSaveOrder response:', response.data);
+      return response.data;
+
+    } catch (error) {
+      console.error('Failed to fetch saved orders', error);
+      throw error;
+    }
+  }
+
+  formatToOffsetISO(date: Date): string {
+    if (!date) return "";
+
+    const pad = (n: number, len = 2) => String(n).padStart(len, "0");
+    const year = date.getFullYear();
+    const month = pad(date.getMonth() + 1);
+    const day = pad(date.getDate());
+    const hours = pad(date.getHours());
+    const minutes = pad(date.getMinutes());
+    const seconds = pad(date.getSeconds());
+    const ms = pad(date.getMilliseconds(), 4); // 4-digit milliseconds
+
+    // timezone offset
+    const offset = -date.getTimezoneOffset(); // in minutes
+    const offSign = offset >= 0 ? "+" : "-";
+    const offHours = pad(Math.floor(Math.abs(offset) / 60));
+    const offMinutes = pad(Math.abs(offset) % 60);
+
+    return `${year}-${month}-${day}T${hours}:${minutes}:${seconds}:${ms}${offSign}${offHours}:${offMinutes}`;
+  }
+
+  extractFilterValues(schema: Record<string, any>): Record<string, any> {
+    return Object.keys(schema).reduce((acc, key) => {
+      if (key.includes('Filter') && schema[key]?.value !== undefined) {
+        acc[key] = schema[key].value;
+      }
+      return acc;
+    }, {} as Record<string, any>);
+  }
+
+  invokeOnPageSizeChange(pageSize: any) {
+    this.onPageSizeChange.emit(pageSize);
+  }
+
+  invokeGoToPage(page: any) {
+    this.onPageChange.emit(page);
+  }
+
+  invokeOnCardHeader(element: any) {
+    this.cardHeaderButtonClick.emit(element);
+  }
+
+  invokeOnCardFooter(element: any) {
+    // this.cardHeaderButtonClick.emit(element);
+    this.d4_SaveAll();
+  }
+
+  async invokeButtonClick(layout: any, record: any, recordIndex: any) {
+    if (layout?.option?.action === "delete" && layout?.option?.storageType == "localstorage") {
+      if (layout?.option?.deleteMessage) {
+        this.showConfirm(layout?.option, recordIndex);
+      }
+    } else if (layout?.option?.action === "save" && layout?.option?.storageType === "database") {
+      const final_array = this.utilityService.convertToDailyLogs(record);
+      await this.saveToDb(final_array, recordIndex, layout.option.data_url)
+    } else {
+      this.cardButtonClick.emit({ layout: layout, record: record, recordIndex: recordIndex });
+    }
+  }
+
+  showConfirm(option: any, recordIndex: any) {
+    this.modalService.confirm({
+      nzTitle: this.selectedLanguageInfo && this.selectedLanguageInfo?.selectedLanguage['Confirm'] ? this.selectedLanguageInfo.selectedLanguage['Confirm'] : 'Confirm',
+      nzContent: this.selectedLanguageInfo && this.selectedLanguageInfo?.selectedLanguage[option.deleteMessage] ? this.selectedLanguageInfo.selectedLanguage[option.deleteMessage] : option.deleteMessage,
+      nzOkText: this.selectedLanguageInfo && this.selectedLanguageInfo?.selectedLanguage['Delete'] ? this.selectedLanguageInfo.selectedLanguage['Delete'] : 'Delete',
+      nzCancelText: this.selectedLanguageInfo && this.selectedLanguageInfo?.selectedLanguage['Cancel'] ? this.selectedLanguageInfo.selectedLanguage['Cancel'] : 'Cancel',
+      nzOnOk: () => this.deleteRecord(recordIndex, option.data_url)
+    })
+  }
+
+  async d4_SaveAll() {
+    let allOrders: any[] = [];
+    for (let i = 0; i < this.itemInfo.data.length; i++) {
+      const element = this.itemInfo.data[i];
+      const dailyLogs = this.utilityService.convertToDailyLogs(element);
+      if (Array.isArray(dailyLogs)) {
+        allOrders.push(...dailyLogs);
+      }
+    }
+    await this.saveToDb(allOrders, null, true);
+  }
+
+
+  deleteRecord(recordIndex: any, data_url: any) {
+    this.itemInfo.data.splice(recordIndex, 1);
+    this.utilityService.setLocalStorage('timeRecords', JSON.stringify(this.itemInfo.data));
+  }
+
+  deleteAllRecord() {
+    this.itemInfo.data = []
+    this.utilityService.setLocalStorage('timeRecords', JSON.stringify(this.itemInfo.data));
+  }
+
+  async saveToDb(orders: any, orderIndex?: any, data_url?: any, deleteAll: boolean = false) {
+    this.safeUpdate(() => this.isLoading = true);
+    const token = this.oauthService.getAccessToken(); // whatever you have
+    const logined: any = await this.utilityService.getLocalStorage('loginedUser');
+    const keycloakInfo: any = await this.utilityService.getLocalStorage('KeycloakInfo');
+    let saveobject = {
+      ressourceNo: logined?.p5_resource_no ? logined.p5_resource_no : keycloakInfo?.p5_resource_no,
+      returnTimeRecordingLine: orders
+    }
+    if (this.platform.ANDROID || this.platform.IOS) {
+      const res = await this.mobileSaveDb(keycloakInfo.token, keycloakInfo, saveobject, orderIndex, data_url, deleteAll);
+    } else {
+      this.webSaveDb(token, logined, saveobject, orderIndex, data_url, deleteAll);
+    }
+  }
+
+  webSaveDb(token: any, userInfo: any, order: any = {}, orderIndex?: any, dataUrl?: any, deleteAll: boolean = false) {
+    if (token) {
+      const headers = new HttpHeaders({
+        'Authorization': `Bearer ${token}`,
+        'Accept': 'application/json'
+      });
+      let url2: any = `${userInfo.p5_backend_url}/assetsmobileservice/Zeiterfassung/registerTimeRecording?company=${userInfo.p5_group}/${userInfo.p5_client}/${userInfo.p5_plant ? userInfo.p5_plant : "  "}&appVersion=1&resourceNo=${userInfo.p5_resource_no}`
+      this.http.post(url2, order, { headers }).subscribe({
+        next: res => {
+          this.safeUpdate(() => this.isLoading = false);
+          if (orderIndex && orderIndex > -1) {
+            this.deleteRecord(orderIndex, dataUrl)
+          } else {
+            this.deleteAllRecord();
+          }
+        }
+      })
+    }
+  }
+
+  async mobileSaveDb(token: string, userInfo: any, order: any = {}, orderIndex: number, dataUrl: any, deleteAll: boolean = false) {
+    if (!token) {
+      console.log("NO-token", token);
+      return;
+    }
+
+    const company = userInfo.p5_plant
+      ? `${userInfo.p5_group}/${userInfo.p5_client}/${userInfo.p5_plant}`
+      : `${userInfo.p5_group}/${userInfo.p5_client}/`;
+
+    const url = `${userInfo.p5_backend_url}/assetsmobileservice/Zeiterfassung/registerTimeRecording`;
+
+    try {
+      const response = await CapacitorHttp.post({
+        url,
+        params: {
+          company,
+          appVersion: '1',
+          resourceNo: userInfo.p5_resource_no,
+        },
+        headers: {
+          Authorization: `Bearer ${token}`,
+          Accept: 'application/json',
+          'Content-Type': 'application/json',
+        },
+        data: order,
+      });
+      if (orderIndex != null && orderIndex > -1) {
+        this.deleteRecord(orderIndex, dataUrl);
+      } else {
+        this.deleteAllRecord();
+      }
+      this.safeUpdate(() => this.isLoading = false);
+
+
+      return response.data;
+
+    } catch (error) {
+      this.safeUpdate(() => this.isLoading = false);
+      console.error('Failed to save time recording', error);
+      throw error;
+    }
+  }
+
+  showLinkDetails(option: any, record: any) {
+    this.linkDetails.emit({ option: option, record: record })
+  }
+
+  showImageDetails(option: any, record: any) {
+    this.imageDetails.emit({ option: option, record: record })
+  }
+
+  getProperty(scope: any) {
+    const property = scope ? scope.split('/').pop() : '';
+    return { key: property, productSchema: this.itemInfo.propertySchema[this.getScope(scope)][property] };
+  }
+
+  getStyleWithoutClasses(styleObject: any) {
+    if (!styleObject) {
+      return { classes: '', style: {} };
+    }
+    const { classes, ...styleWithoutClasses } = styleObject;
+    return { classes: classes && classes.length > 0 ? classes[0] : '', style: styleWithoutClasses };
+  }
+
+  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;
+  }
+}

package/src/lib/containers/form/form.component.css

@@ -0,0 +1,101 @@
+:host {
+  display: block;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+}
+
+.form-renderer {
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  box-sizing: border-box;
+  padding: 12px;
+}
+
+.section-card {
+  border: 1px solid #e5e7eb;
+  border-radius: var(--radius-sm, 8px);
+  padding: 12px;
+  margin-bottom: 12px;
+  background: #ffffff;
+  box-sizing: border-box;
+}
+
+.section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 10px;
+  font-weight: 600;
+}
+
+.section-title {
+  font-size: 14px;
+  color: #0f172a;
+}
+
+.section-body {
+  position: relative;
+  width: 100%;
+  min-height: 78px;
+  box-sizing: border-box;
+}
+
+.field-row {
+  position: relative;
+  min-width: 0;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.field-row input,
+.field-row select,
+.field-row nz-select,
+.field-row textarea,
+.field-row button {
+  max-width: 100%;
+  box-sizing: border-box;
+}
+
+@media (max-width: 768px) {
+  .section-body {
+    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
+  }
+
+  .field-row {
+    grid-column: span 1 !important;
+  }
+}
+
+@media (min-width: 769px) and (max-width: 1024px) {
+  .section-body {
+    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
+  }
+
+  .field-row {
+    grid-column: span 6 !important;
+  }
+}
+
+:host-context(.mobile-frame) .section-body,
+:host-context(.device-mobile) .section-body {
+  grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
+}
+
+:host-context(.mobile-frame) .field-row,
+:host-context(.device-mobile) .field-row {
+  grid-column: span 1 !important;
+}
+
+:host-context(.tablet-frame) .section-body,
+:host-context(.device-tablet) .section-body {
+  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
+}
+
+:host-context(.tablet-frame) .field-row,
+:host-context(.device-tablet) .field-row {
+  grid-column: span 6 !important;
+}