iss-ctrl 0.0.3 → 0.0.4

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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