@yomotech/view-toolkit 0.0.32 → 0.0.33

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

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

@@ -1,101 +0,0 @@
-: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;
-}