iss-ctrl 0.0.2 → 0.0.3

package/projects/playground/src/components/select-wrapper.component.ts

@@ -0,0 +1,48 @@
+import {Component} from "@angular/core";
+import {FormGroup, ReactiveFormsModule} from "@angular/forms";
+import {Outlet} from "../../../iss/src/components/outlet/outlet";
+
+
+@Component({
+  selector: "app-select-wrapper",
+  imports: [
+    Outlet,
+    ReactiveFormsModule
+  ],
+  template: `
+    <form [formGroup]="form">
+      <iss-form-outlet [fields]="field" />
+    </form>
+  `,
+  styles: ``
+})
+export default class SelectWrapperComponent {
+  form = new FormGroup({});
+  field: any = [
+    {
+      "id": 37,
+      "name": "district",
+      "title": "District",
+      "hint": null,
+      "api": "/v1/private/subsidiaries/{key}/districts",
+      "order": 10,
+      "type": "select",
+      "stepName": "REQUESTER",
+      "options": [
+        {value: "1", label: "ONE"},
+        {value: "2", label: "TWO"},
+        {value: "3", label: "THREE"},
+      ],
+      "value": "1,2",
+      "jsonValue": [{value: "1", label: "ONE"}, {value: "2", label: "TWO"}],
+      "validation": {
+        "required": true
+      },
+      "mode": "edit",
+      "events": [],
+      "config": {
+        "multiple": true
+      }
+    }
+  ];
+}

package/projects/playground/src/components/ships-container.component.ts

@@ -0,0 +1,23 @@
+import {Component} from "@angular/core";
+import {FormControl, ReactiveFormsModule} from "@angular/forms";
+import {MatLabel} from "@angular/material/form-field";
+import {ChipsControl} from "../../../iss/src/components/controls/chips/chips.control";
+
+@Component({
+  selector: "app-ships-container",
+  imports: [
+    ReactiveFormsModule,
+    MatLabel,
+    ChipsControl,
+  ],
+  template: `
+    <mat-label>Chips</mat-label>
+    <iss-ctrl-chips [formControl]="ctrl" (onChange)="eventLog($event)"/>
+  `,
+  styles: ``
+})
+export default class ShipsContainerComponent {
+  ctrl: FormControl = new FormControl();
+
+  eventLog($event: string | FormData) { }
+}

package/projects/playground/src/components/slide-toggle-wrapper.component.ts

@@ -0,0 +1,40 @@
+import {Component} from "@angular/core";
+import {FormGroup, ReactiveFormsModule} from "@angular/forms";
+import {Outlet} from "../../../iss/src/components/outlet/outlet";
+
+
+@Component({
+  selector: "app-slide-toggle-wrapper",
+  imports: [
+    Outlet,
+    ReactiveFormsModule
+  ],
+  template: `
+    <form [formGroup]="form">
+      <iss-form-outlet [fields]="field" />
+    </form>
+  `,
+  styles: ``
+})
+export default class SlideToggleWrapperComponent {
+  form = new FormGroup({});
+  field: any = [
+    {
+      "id": 37,
+      "name": "slide-toggle",
+      "title": "test",
+      "hint": null,
+      "api": "/v1/private/subsidiaries/{key}/districts",
+      "order": 10,
+      "type": "slideToggle",
+      "stepName": "REQUESTER",
+      "mode": "view",
+      "value": "false",
+      "options": [],
+      "validation": {
+        "required": true
+      },
+      "events": []
+    }
+  ];
+}

package/projects/playground/src/components/textarea-container.component.ts

@@ -0,0 +1,23 @@
+import {Component, OnInit} from "@angular/core";
+import {FormControl, ReactiveFormsModule} from "@angular/forms";
+import {MatLabel} from "@angular/material/form-field";
+import {TextareaControl} from "../../../iss/src/components/controls/textarea/textarea.control";
+
+@Component({
+  selector: "app-textarea",
+  imports: [
+    ReactiveFormsModule,
+    MatLabel,
+    TextareaControl,
+  ],
+  template: `
+    <mat-label>textarea</mat-label>
+    <iss-ctrl-textarea [formControl]="ctrl" [min]="3"/>
+  `,
+  styles: ``
+})
+export default class TextareaContainerComponent implements OnInit {
+  ctrl: FormControl = new FormControl("");
+
+  ngOnInit(): void { }
+}

package/projects/playground/src/components/textarea-wrapper.component.ts

@@ -0,0 +1,54 @@
+import {Component, OnInit} from "@angular/core";
+import {FormGroup, ReactiveFormsModule} from "@angular/forms";
+import {Outlet} from "../../../iss/src/components/outlet/outlet";
+import {VALIDATORS} from "../../../iss/src/shared/indexes/validators.index";
+
+@Component({
+  selector: "app-textarea-wrapper",
+  imports: [
+    Outlet,
+    ReactiveFormsModule,
+  ],
+  template: `
+    <form [formGroup]="form">
+      <iss-form-outlet [fields]="field" />
+    </form>
+  `,
+  styles: ``
+})
+export default class TextareaWrapperComponent implements OnInit {
+  form = new FormGroup({});
+  field: any = [];
+
+  constructor() {
+    Object.assign(VALIDATORS, {
+      maxLengthValidator: () => import("../validators/customValidator.validator").then(c => c.maxLengthValidator),
+    });
+  }
+
+  ngOnInit() {
+    this.field = [
+      {
+        "id": 37,
+        "name": "textarea",
+        "title": "textarea",
+        "hint": null,
+        "api": "/v1/private/subsidiaries/{key}/districts",
+        "order": 10,
+        "mode": "edit",
+        "type": "textarea",
+        "config": {
+          // "max": 50,
+          // "min": 2,
+        },
+        "stepName": "REQUESTER",
+        "validation": {
+          "required": true,
+          "maxLengthValidator": 10,
+          "maxLength": 5
+        },
+        "events": []
+      }
+    ];
+  }
+}

package/projects/playground/src/components/time-picker-container.component.ts

@@ -0,0 +1,23 @@
+import {Component} from "@angular/core";
+import {FormControl, ReactiveFormsModule} from "@angular/forms";
+import {TimePickerControl} from "../../../iss/src/components/controls/time-picker/time-picker.control";
+
+@Component({
+  selector: "app-time-picker-container",
+  imports: [
+    ReactiveFormsModule,
+    TimePickerControl
+  ],
+  template: `
+    <iss-ctrl-time-picker [formControl]="timePicker" interval="15min" [minTime]="'07:00'" [maxTime]="'18:00'">
+      <label>Time Picker</label>
+    </iss-ctrl-time-picker>
+  `,
+})
+export default class TimePickerContainerComponent {
+  timePicker = new FormControl();
+
+  ngOnInit(): void {
+    // this.timePicker.setValue("00:00");
+  }
+}

package/projects/playground/src/components/time-picker-wrapper.component.ts

@@ -0,0 +1,43 @@
+import {Component, OnInit} from "@angular/core";
+import {FormGroup, ReactiveFormsModule} from "@angular/forms";
+import {Outlet} from "../../../iss/src/components/outlet/outlet";
+
+
+@Component({
+  selector: "app-toggle-button-wrapper",
+  imports: [
+    Outlet,
+    ReactiveFormsModule
+  ],
+  template: `
+    <form [formGroup]="form">
+      <iss-form-outlet [fields]="field" />
+    </form>
+  `,
+  styles: ``
+})
+export default class TimePickerWrapperComponent implements OnInit {
+  form: FormGroup = new FormGroup({});
+  field: any = [
+    {
+      "id": 37,
+      "name": "time",
+      "title": "time",
+      "hint": null,
+      "order": 10,
+      "mode": "view",
+      "type": "time",
+      "validation": {
+        "required": true
+      },
+      "events": [],
+      "value": "13:12"
+    }
+  ];
+
+  ngOnInit(): void {
+    setTimeout(() => {
+      this.form.get("time")?.setValue("14:00");
+    }, 2000);
+  }
+}

package/projects/playground/src/components/toggle-button-wrapper.component.ts

@@ -0,0 +1,49 @@
+import {Component} from "@angular/core";
+import {FormGroup, ReactiveFormsModule} from "@angular/forms";
+import {Outlet} from "../../../iss/src/components/outlet/outlet";
+
+
+@Component({
+  selector: "app-toggle-button-wrapper",
+  imports: [
+    Outlet,
+    ReactiveFormsModule
+  ],
+  template: `
+    <form [formGroup]="form">
+      <iss-form-outlet [fields]="field" />
+    </form>
+  `,
+  styles: ``
+})
+export default class ToggleButtonWrapperComponent {
+  form = new FormGroup({});
+  field: any = [
+    {
+      "id": 37,
+      "name": "district",
+      "title": "District",
+      "hint": null,
+      "api": "/v1/private/subsidiaries/{key}/districts",
+      "order": 10,
+      "multiple": true,
+      "type": "toggle",
+      "stepName": "REQUESTER",
+      "value": "1,2",
+      "jsonValue": [{value: "1", label: "ONE"}, {value: "2", label: "TWO"}],
+      "options": [
+        {value: "1", label: "ONE"},
+        {value: "2", label: "TWO"},
+        {value: "3", label: "THREE"},
+      ],
+      "validation": {
+        "required": true
+      },
+      "mode": "view",
+      "events": [],
+      "config": {
+        "multiple": true
+      }
+    }
+  ];
+}

package/projects/playground/src/components/user-picker-wrapper.component.ts

@@ -0,0 +1,37 @@
+import {Component} from "@angular/core";
+import {FormGroup, FormsModule, ReactiveFormsModule} from "@angular/forms";
+import {Outlet} from "../../../iss/src/components/outlet/outlet";
+
+@Component({
+  selector: "app-user-picker-wrapper",
+  imports: [
+    FormsModule,
+    Outlet,
+    ReactiveFormsModule
+  ],
+  template: `
+    <form [formGroup]="form">
+      <iss-form-outlet [fields]="field" />
+    </form>
+  `,
+  styles: ``
+})
+export default class UserPickerWrapperComponent {
+  form: FormGroup = new FormGroup({});
+  field: any = [
+    {
+      "id": 37,
+      "name": "userPicker",
+      "title": "User Picker",
+      "hint": null,
+      "api": "/v1/private/subsidiaries/{key}/userPicker",
+      "order": 10,
+      "type": "userPicker",
+      "validation": {
+        "required": true
+      },
+      "events": [],
+      "value": "13:12"
+    }
+  ];
+}

package/projects/playground/src/eServices/create-request.component.ts

@@ -0,0 +1,28 @@
+import {Component, inject, input, InputSignal, OnInit} from "@angular/core";
+import {FormGroup, ReactiveFormsModule} from "@angular/forms";
+import {Outlet} from "../../../iss/src/components/outlet/outlet";
+import {SS} from "../services/ss.service";
+
+@Component({
+  selector: "app-create",
+  imports: [ReactiveFormsModule, Outlet],
+  template: `
+    @if (!service.isLoading()) {
+      <form [formGroup]="form">
+        <iss-form-outlet [fields]="service.value().form.fields" />
+      </form>
+    }
+  `,
+})
+export default class CreateRequestComponent implements OnInit {
+  form: FormGroup = new FormGroup({});
+  ss: SS = inject(SS);
+  code: InputSignal<string | undefined> = input();
+  service: any;
+
+  ngOnInit(): void {
+    this.ss.get(this.code()).subscribe((service) => {
+      this.service.set(service);
+    });
+  }
+}

package/projects/playground/src/eServices/e-service.component.ts

@@ -0,0 +1,112 @@
+import {DatePipe} from "@angular/common";
+import {HttpClient} from "@angular/common/http";
+import {Component, CUSTOM_ELEMENTS_SCHEMA, inject, OnInit} from "@angular/core";
+import {
+  MatCell,
+  MatCellDef,
+  MatColumnDef,
+  MatHeaderCell,
+  MatHeaderCellDef,
+  MatHeaderRow,
+  MatHeaderRowDef,
+  MatNoDataRow,
+  MatRow,
+  MatRowDef,
+  MatTable,
+  MatTableDataSource
+} from "@angular/material/table";
+import {ActivatedRoute, Params, RouterLink} from "@angular/router";
+import {map, switchMap} from "rxjs";
+
+@Component({
+  selector: "app-e-service",
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  imports: [
+    RouterLink,
+    MatTable,
+    MatColumnDef,
+    MatCellDef,
+    MatHeaderCellDef,
+    MatHeaderRowDef,
+    MatRowDef,
+    MatNoDataRow,
+    MatHeaderCell,
+    MatCell,
+    MatHeaderRow,
+    MatRow,
+    DatePipe
+  ],
+  template: `
+    <ds-button color="primary" shape="default" [routerLink]="['create']">Create</ds-button>
+    <hr/>
+    <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
+
+      <ng-container matColumnDef="requestNumber">
+        <th mat-header-cell *matHeaderCellDef>request id</th>
+        <td mat-cell *matCellDef="let element">
+          <a [routerLink]="['/', element.requestNumber, 'view']">{{ element.requestNumber }}</a>
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="createdAt">
+        <th mat-header-cell *matHeaderCellDef> create at</th>
+        <td mat-cell *matCellDef="let element"> {{ element.createdAt | date: "yyyy-MM-dd hh:mm a" }}</td>
+      </ng-container>
+
+      <ng-container matColumnDef="status">
+        <th mat-header-cell *matHeaderCellDef> status</th>
+        <td mat-cell *matCellDef="let element"> {{ element.status }}</td>
+      </ng-container>
+
+      <ng-container matColumnDef="requester">
+        <th mat-header-cell *matHeaderCellDef>requester</th>
+        <td mat-cell *matCellDef="let element"> {{ element.requester }}</td>
+      </ng-container>
+
+      <ng-container matColumnDef="pendingWith">
+        <th mat-header-cell *matHeaderCellDef> pending with</th>
+        <td mat-cell *matCellDef="let element"> {{ element.pendingWith }}</td>
+      </ng-container>
+
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+
+      <!-- Row shown when there is no matching data. -->
+      <tr class="mat-row" *matNoDataRow>
+        <td class="mat-cell" colspan="4">No data matching the filter"</td>
+      </tr>
+    </table>
+  `,
+  styles: ``
+})
+export default class EServiceComponent implements OnInit {
+  requests: any = [];
+  displayedColumns = ["requestNumber", "createdAt", "status", "requester", "pendingWith"];
+  dataSource = new MatTableDataSource([]);
+  #http: HttpClient = inject(HttpClient);
+  #activatedRout: ActivatedRoute = inject(ActivatedRoute);
+
+  ngOnInit(): void {
+    this.#activatedRout.params.pipe(switchMap((params: Params) => {
+      return this.getRequests().pipe(
+        map((requests: any) => {
+          let filtered = requests?.data.filter((request: any) => request.serviceCode.toLowerCase() === params["code"].toLowerCase());
+          return filtered.map((request: any) => ({
+            requestNumber: request.requestNumber.toLowerCase(),
+            createdAt: request.createdAt,
+            status: request.status,
+            requester: request.requester,
+            pendingWith: request.ownerInfo?.email
+          }));
+        })
+      );
+    })).subscribe((requests: any) => {
+      this.dataSource = new MatTableDataSource(requests);
+      this.requests = requests;
+    });
+  }
+
+  getRequests() {
+    return this.#http.get(`https://ss-webdev.stc.com.sa/v1/private/requests/inbox?filterBy=pending&page=1&includes=user`);
+  }
+}

package/projects/playground/src/eServices/view-request.component.ts

@@ -0,0 +1,13 @@
+import {Component} from "@angular/core";
+
+@Component({
+  selector: "app-view",
+  imports: [],
+  template: `
+    <p>
+      view works!
+    </p>
+  `,
+  styles: ``
+})
+export default class ViewRequestComponent {}

package/projects/playground/src/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>iss</title>
+  <base href="/">
+  <meta content="width=device-width, initial-scale=1" name="viewport">
+  <link href="favicon.ico" rel="icon" type="image/x-icon">
+</head>
+<body>
+<app-root></app-root>
+</body>
+</html>

package/projects/playground/src/interceptors/header.interceptor.ts

@@ -0,0 +1,71 @@
+import {HttpHeaders, HttpInterceptorFn, HttpRequest} from "@angular/common/http";
+import * as JsEncrypt from "jsencrypt";
+
+export const authInterceptor: HttpInterceptorFn = (request: HttpRequest<any>, next) => {
+  const ENCRYPTION_PUBLIC_KEY = "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEApqahhkCiwgaP3ZglC0KA+AbsYoaPH5KzX1fvVVr9iynMHUoTbd1i0ft7FnaTw2kCRea+bbKKTP4OoizZEbPDG6Sd/pDVvwjPQl7KD+EFKSphbTCk+ZnK5sT3tbbiBMFQl0yS1geHUhrf+NZQZzNgrga4sy+GRCD77YFZMrJEU+8atpQjV10qAtYilc6IZsWpaSrATzpYxVL6Y1ePnskpgf2cMzOIFGVAjhGKjlb6lvX3BqY9c0tn3DOtLUDlwwrwp1vSUMEsPfrqAQjbKzaufoFCN4jcVjm3sEzYSpqwuwgD9EcFG6gwhzhKPXzdLh8YNa3c8nXFsUcBUuTOxNy9zwIDAQAB";
+  const API_CLIENT = "6N6RzIAAwpxO1rn97KD3jl";
+  let contentType = "application/json";
+
+  const encrypt = new JsEncrypt.JSEncrypt({default_key_size: "2048"});
+  encrypt.setPublicKey(ENCRYPTION_PUBLIC_KEY);
+
+  if (request.url.includes("attachment") || request.url.includes("reports")) {
+    contentType = "application/pdf";
+  }
+
+  let requestHeaders: HttpHeaders;
+
+  if (request.url.includes("private/notifications")) {
+    requestHeaders = new HttpHeaders({
+      "api-client": encrypt.encrypt(API_CLIENT + ";" + new Date().toUTCString()) + "",
+      "api-date": new Date().toUTCString(),
+      "agent": "web",
+      "Content-Type": contentType,
+      "accept-language": getCurrentLang(),
+      "ss-authorization": getAuthToken(),
+      "timezoneOffset": getTimeZone()
+    });
+  } else {
+    requestHeaders = new HttpHeaders({
+      "api-client": encrypt.encrypt(API_CLIENT + ";" + new Date().toUTCString()) + "",
+      "api-date": new Date().toUTCString(),
+      "agent": "web",
+      "accept-language": getCurrentLang(),
+      "ss-authorization": getAuthToken(),
+      "timezoneOffset": getTimeZone()
+    });
+  }
+
+  if (!request.url.includes("upload")) {
+    requestHeaders.append("content-type", contentType);
+  }
+
+  if (request.headers.get("skip") !== "true") {
+    request = request.clone({
+      headers: requestHeaders,
+    });
+  } else {
+    request = request.clone({
+      headers: request.headers.delete("skip", "true"),
+    });
+  }
+  return next(request);
+};
+
+function getCurrentLang(): any {
+  return "en";
+}
+
+function getAuthToken(): any {
+  const token = localStorage.getItem("token");
+  if (token && token.includes("Bearer")) {
+    return token;
+  } else {
+    return "Bearer " + token;
+  }
+}
+
+function getTimeZone() {
+  const offset = new Date().getTimezoneOffset(), o = Math.abs(offset);
+  return (offset < 0 ? "+" : "-") + ("00" + Math.floor(o / 60)).slice(-2) + ":" + ("00" + (o % 60)).slice(-2);
+}

package/projects/playground/src/main.ts

@@ -0,0 +1,8 @@
+import {bootstrapApplication} from "@angular/platform-browser";
+import {defineCustomElements} from "@basic-ui-components-stc/basic-ui-components/loader";
+import {AppComponent} from "./app/app.component";
+import {appConfig} from "./app/app.config";
+
+bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err));
+
+defineCustomElements(window).then();

package/projects/playground/src/services/ss.service.ts

@@ -0,0 +1,62 @@
+import {HttpClient} from "@angular/common/http";
+import {inject, Injectable} from "@angular/core";
+import {EMPTY, map, Observable} from "rxjs";
+
+@Injectable({providedIn: "root"})
+export class SS {
+  #http: HttpClient = inject(HttpClient);
+
+  get(serviceCode: string | undefined): Observable<any> {
+    if (!serviceCode) {
+      return EMPTY;
+    }
+    const api = `https://ss-webdev.stc.com.sa/v1/private/services/${serviceCode}?includes=clientForm`;
+    return this.#http.get(api).pipe(
+      map((res: any) => res?.data),
+      map((service: any) => this.#fieldAdaptor(service)),
+      map((service: any) => this.#addChildrenFieldsToItsParent(service)),
+      map((service: any) => this.#removeChildrenFromFieldsLevel(service)),
+    );
+  }
+
+  #fieldAdaptor(service: any) {
+    service.form.fields = service.form.formFields.map((field: any) => {
+      return {
+        id: field.id,
+        name: field.fieldName,
+        title: field.title.en,
+        hint: field.hint.en,
+        api: field.api,
+        order: field.order,
+        type: field.fieldTypeName,
+        stepName: field.stepName,
+        parent: field.parentFieldName,
+        options: field.source.map((option: any) => {
+          option.label = option.title.en;
+          return option;
+        }),
+        value: field.value,
+        jsonValue: field.jsonValue,
+        events: field.formFieldEvents,
+        mode: field.viewMode ?? "edit",
+        validation: field.properties?.validation,
+        config: field.properties?.configuration,
+      };
+    });
+    delete service.form.formFields;
+    return service;
+  }
+
+  #addChildrenFieldsToItsParent(service: any) {
+    service.form.fields = service.form.fields.map((field: any) => {
+      field.children = service.form.fields.filter((f: any) => f.parent === field.name);
+      return field;
+    });
+    return service;
+  }
+
+  #removeChildrenFromFieldsLevel(service: any) {
+    service.form.fields = service.form.fields.filter((f: any) => !f.parent);
+    return service;
+  }
+}