iss-ctrl 0.0.5 → 0.0.7

package/projects/iss/src/components/controls/file-picker/file-handler.ts

@@ -0,0 +1,109 @@
+import { HttpClient } from "@angular/common/http";
+import { inject, Injectable } from "@angular/core";
+import { EMPTY, forkJoin, map, Observable } from "rxjs";
+import { ATTACHMENT_DOWNLOAD_URL, ATTACHMENT_UPLOAD_RESPONSE_MAPPER, ATTACHMENT_UPLOAD_URL } from "../../../shared/tokens/attachment.token";
+import { replacePlaceholders } from "../../../shared/utilities/replace-placeholder.util";
+import { IssAttachment } from "./attachment";
+import { IssFile } from "./file";
+
+@Injectable({providedIn: "root"})
+export class FileHandler {
+  ATTACHMENT_UPLOAD_URL = inject(ATTACHMENT_UPLOAD_URL);
+  ATTACHMENT_DOWNLOAD_URL: string = inject(ATTACHMENT_DOWNLOAD_URL);
+  attachmentAdapter = inject(ATTACHMENT_UPLOAD_RESPONSE_MAPPER);
+  #http: HttpClient = inject(HttpClient);
+  readonly #units: string[] = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+
+  upload(data: FormData) {
+    const url = this.ATTACHMENT_UPLOAD_URL;
+    return this.#http.post(url, data, {
+      headers: {"Content-Type": "multipart/form-data"},
+    }).pipe(
+      map((res: any): IssAttachment[] => this.attachmentAdapter(res)),
+    );
+  }
+
+  formDataFactory(files: IssFile[], multiple: boolean): FormData | null {
+    if (files.length === 0) {
+      return null;
+    }
+    const fd: FormData = new FormData();
+    let formDataKey = "file";
+    if (multiple) {
+      formDataKey = "files";
+    }
+    for (let i = 0; i < files.length; i++) {
+      // @ts-ignore
+      fd.append(formDataKey, files[i]);
+    }
+    return fd;
+  }
+
+  formDataHasValue(formData: FormData) {
+    if (formData) {
+      for (const key of formData.keys()) {
+        if (formData.get(key)) {
+          return true;
+        }
+      }
+    }
+    return false;
+  }
+
+  getFileFromFormData(formData: FormData, name: string): IssFile[] {
+    if (!formData) {
+      return [];
+    }
+    const fileFD: IssFile[] = formData.getAll("file") as unknown as IssFile[];
+    const filesFD: IssFile[] = formData.getAll("files") as unknown as IssFile[];
+    if (filesFD.length) {
+      return filesFD.filter((f) => f.name === name);
+    }
+    if (fileFD.length) {
+      return fileFD.filter((f) => f.name === name);
+    }
+    return [];
+  }
+
+  formatFileSize(x: string | number) {
+    let l: number = 0;
+    let n: number = parseInt(x.toString(), 10) || 0;
+
+    while (n >= 1024 && ++l) {
+      n /= 1024;
+    }
+    return Math.floor(n) + " " + this.#units[l];
+  }
+
+  fetchFileInfo(id: string): Observable<IssFile> {
+    const url: string = replacePlaceholders(this.ATTACHMENT_DOWNLOAD_URL, {fileId: id});
+    const httpRequestOptions: any = {observe: "response", responseType: "blob"};
+    return this.#http.get(url, httpRequestOptions).pipe(map((res: any) => this.#processFileBinaryStream(res, id)));
+  }
+
+  fetchFiles(ids: string) {
+    if (ids) {
+      return forkJoin(ids.split(",").map((id: string) => {
+        return this.fetchFileInfo(id);
+      }));
+    }
+    return EMPTY;
+  }
+
+  #processFileBinaryStream(res: any, fileId: string): any {
+    const fileNameHeader = res.headers.get("content-disposition");
+    const typeHeader = res.headers.get("content-type");
+    let fileName = "";
+    if (fileNameHeader) {
+      fileName = decodeURIComponent(fileNameHeader.split(";")[1].split("=")[1].replaceAll("\"", ""));
+    }
+    const file: File = new File([res.body], fileName, {type: typeHeader});
+    return {
+      id: fileId,
+      name: file.name,
+      type: file.type,
+      size: this.formatFileSize(file.size),
+      file: file,
+    };
+  }
+}

package/projects/iss/src/components/controls/file-picker/file-picker.control.ts

@@ -0,0 +1,189 @@
+import { Component, computed, CUSTOM_ELEMENTS_SCHEMA, effect, input, InputSignal, OnDestroy, Signal, signal, WritableSignal } from "@angular/core";
+import { NG_VALUE_ACCESSOR, ReactiveFormsModule } from "@angular/forms";
+import { HintsComponent } from "../../shared/hints.component";
+import { ControlBase } from "../base/control-base";
+import { IssAttachment } from "./attachment";
+import { Droppable } from "./droppable";
+import { IssFile } from "./file";
+
+@Component({
+  selector: "iss-ctrl-file-picker",
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  imports: [
+    ReactiveFormsModule,
+    Droppable,
+    HintsComponent,
+  ],
+  providers: [
+    {provide: NG_VALUE_ACCESSOR, useExisting: FilePickerControl, multi: true}
+  ],
+  template: `
+    <ds-file-picker (click)="inputFile.click(); markAsTouched()" (onDrop)="captureFile($event)" droppable>
+      <input
+        #inputFile
+        (change)="captureFile($any($event.target).files)"
+        [accept]="accept()"
+        [formControl]="ctrl"
+        [multiple]="multiple()"
+        [style.display]="'none'"
+        id="file"
+        type="file"
+      />
+    </ds-file-picker>
+
+    <iss-ctrl-hints [hints]="hints()" [touched]="touched()" />
+    <!--<iss-viewer-attachment (deleteOut)="onDelete($event)" [field]="filesValue()" [uploading]="uploading()"/>-->
+  `,
+  styles: `
+    .file-uploader {
+      --uploader-height: 150px;
+      --uploader-width: 100%;
+      --uploader-bg: var(--off-white);
+      --uploader-border: 1px dashed var(--dark-gray);
+      --uploader-radius: var(--box-radius);
+      --uploader-padding: 1rem;
+
+      height: var(--uploader-height);
+      background-color: var(--uploader-bg);
+      border: var(--uploader-border);
+      border-radius: var(--uploader-radius);
+      padding: var(--uploader-padding);
+      text-align: center;
+      cursor: pointer;
+
+      & --input {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        gap: 0.75rem;
+      }
+    }`
+})
+export class FilePickerControl extends ControlBase implements OnDestroy {
+  accept: InputSignal<string | undefined> = input();
+  showDownloadButton: InputSignal<boolean> = input(true);
+  showDeleteButton: InputSignal<boolean> = input(true);
+  uploading: InputSignal<boolean> = input(false);
+  uploadedFiles: InputSignal<IssAttachment[]> = input<IssAttachment[]>([]);
+  uploadingError: InputSignal<string | undefined> = input<string | undefined>(undefined);
+  filesValue: Signal<any> = computed(() => this.#returnAttachmentViewObject());
+  protected attachments: WritableSignal<IssFile[]> = signal([]);
+  #uploadedFilesEffectRef = effect(() => {
+    this.#markUploadedFiles();
+    this.filesValue = computed(() => this.#returnAttachmentViewObject());
+  });
+
+  /*todo needs review and refactor*/
+
+  ngOnDestroy(): void {
+    this.#uploadedFilesEffectRef.destroy();
+  }
+
+  override writeValue(val: FormData | string | null): void {
+    if (typeof val === "string") {
+      return;
+    }
+    this.#reset();
+    if (val) {
+      this.attachments.set([...this.attachments(), ...this.#convertFormDataToFiles(val)]);
+    }
+  }
+
+  protected onDelete(files: IssFile[]): void {
+    this.attachments.set(files);
+  }
+
+  protected captureFile($event: FileList) {
+    if (!$event) {
+      return;
+    }
+    if (!$event.length) {
+      return;
+    }
+    this.markAsTouched();
+    const files: File[] = Array.from($event);
+    const issFiles: IssFile[] = files.map((file: File): IssFile => {
+      return {
+        name: file.name,
+        size: file.size,
+        type: file.type,
+        selected: Date.now(),
+        file: file,
+      };
+    });
+    this.#updateAttachments(issFiles);
+    const emission: Signal<FormData | null> = computed(() => this.#formDataFactory(this.attachments()));
+    this.emitOnChangeEvent(emission());
+  }
+
+  #updateAttachments(selectedFiles: IssFile[]) {
+    if (!this.multiple()) {
+      this.attachments.set([]);
+      this.attachments()[0] = selectedFiles[0];
+      return;
+    }
+    this.attachments.update((files: IssFile[]) => {
+      files = [...files, ...selectedFiles];
+      return files;
+    });
+  }
+
+  #formDataFactory(files: IssFile[]): FormData | null {
+    if (files.length === 0) {
+      return null;
+    }
+    const fd: FormData = new FormData();
+    let formDataKey = "file";
+    if (this.multiple()) {
+      formDataKey = "files";
+    }
+    for (let i = 0; i < files.length; i++) {
+      fd.append(formDataKey, (files[i].file as File));
+    }
+    return fd;
+  }
+
+  #reset() {
+    this.attachments.set([]);
+  }
+
+  #convertFormDataToFiles(val: FormData): IssFile[] {
+    if (!val || !(val instanceof FormData)) {
+      return [];
+    }
+    const files: File[] = [];
+    for (const pair of val.entries()) {
+      if (pair[1] instanceof File) {
+        files.push(pair[1]);
+      }
+    }
+    return files;
+  }
+
+  #markUploadedFiles() {
+    this.attachments.update((attachments: IssFile[]) => {
+      return attachments.map((attachment: IssFile) => {
+        // const uploadedFile = this.uploadedFiles().find((f) => f.selected === attachment.selected && f.name === attachment.name);
+        if (this.uploadingError()) {
+          attachment.errorMsg = this.uploadingError();
+        }
+        // if (uploadedFile) {
+        //   attachment.id = uploadedFile.id;
+        // }
+        return attachment;
+      });
+    });
+  }
+
+  #returnAttachmentViewObject() {
+    return {
+      config: {
+        showDownloadButton: this.showDownloadButton(),
+        showDeleteButton: this.showDownloadButton()
+      },
+      ctrlJsonValue: signal(this.attachments())
+    };
+  }
+}

package/projects/iss/src/components/controls/file-picker/file-picker.field.ts

@@ -0,0 +1,117 @@
+import { Component, computed, effect, inject, OnDestroy, Signal, signal, WritableSignal, } from "@angular/core";
+import { FormControl, ReactiveFormsModule } from "@angular/forms";
+import { MatLabel } from "@angular/material/input";
+import { catchError, EMPTY } from "rxjs";
+import { VIEW_PROVIDER } from "../../../shared/constants/view-provider.const";
+import { ValidationMessageComponent } from "../../shared/validation-message.component";
+import { FieldBase } from "../base/field-base";
+import { IssAttachment } from "./attachment";
+import { AttachmentViewer } from "./attachment.viewer";
+import { IssFile } from "./file";
+import { FileHandler } from "./file-handler";
+import { FilePickerControl } from "./file-picker.control";
+
+@Component({
+  selector: "iss-field-file-picker",
+  viewProviders: [VIEW_PROVIDER],
+  imports: [
+    ReactiveFormsModule,
+    FilePickerControl,
+    ValidationMessageComponent,
+    AttachmentViewer,
+    MatLabel
+  ],
+  template: `
+    @if (field.visible()) {
+      <mat-label>{{ field.label() }}</mat-label>
+      @if (field.mode() === "edit") {
+        <input type="hidden" [formControlName]="field.name">
+        <!-- [showDeleteButton]="field.config.showDeleteButton" [showDownloadButton]="field.config.showDownloadButton"-->
+        <iss-ctrl-file-picker
+          [formControl]="picker"
+          [accept]="field.validation.fileType"
+          (onChange)="captureFile($event)"
+          [multiple]="field.config.multiple()"
+          [uploading]="uploading()"
+          [uploadedFiles]="attachments()"
+          [uploadingError]="uploadingError()"
+        />
+        <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="ctrl.touched" />
+      } @else {
+        <iss-viewer-attachment [uploading]="uploading()" [field]="viewField()" />
+      }
+    }
+  `
+})
+export class FilePickerField extends FieldBase implements OnDestroy {
+  picker = new FormControl();
+  fileHandlerService = inject(FileHandler);
+  uploading: WritableSignal<boolean> = signal(false);
+  viewField: Signal<any> = computed(() => this.#generateViewField(this.field.ctrlJsonValue()));
+  attachments: WritableSignal<IssAttachment[]> = signal([]);
+  uploadingError = signal<string | undefined>(undefined);
+  #valueEffect = effect(() => {
+    if (this.ctrlValueChange() && this.field.value) {
+      this.fileHandlerService.fetchFiles(this.ctrlValueChange()).subscribe((res: any) => {
+        const filesOnly = res.map((attachment: any) => attachment.file);
+        const formDataValue: FormData | null = this.fileHandlerService.formDataFactory(filesOnly, !!this.field.config.multiple());
+        this.picker.setValue(formDataValue);
+        this.field.ctrlJsonValue.set(res);
+      });
+    }
+  });
+
+  captureFile(formData: FormData) {
+    this.uploading.set(true);
+    const notUploadedFiles: FormData = this.#getNotUploadedFiles(formData);
+    if (this.fileHandlerService.formDataHasValue(notUploadedFiles)) {
+      this.fileHandlerService.upload(notUploadedFiles).pipe(
+        catchError((err) => {
+          this.uploading.set(false);
+          this.uploadingError.set(err?.message ?? "Uploading Failed!");
+          console.error(err);
+          return EMPTY;
+        }),
+      ).subscribe((res: any) => {
+        this.attachments.set(res);
+        const stringifiedValue = this.stringifyIssAttachment(this.attachments());
+        this.ctrl.setValue(stringifiedValue);
+        this.uploading.set(false);
+      });
+    } else {
+      this.uploading.set(false);
+    }
+  }
+
+  stringifyIssAttachment(attachments: IssAttachment[]): string {
+    return attachments.map((attachment: IssAttachment) => attachment.id).join(",");
+  }
+
+  override ngOnDestroy() {
+    super.ngOnDestroy();
+    this.#valueEffect.destroy();
+  }
+
+  #generateViewField(value: IssFile[]) {
+    return {
+      config: {
+        showDownloadButton: true,
+        showDeleteButton: false
+      },
+      ctrlJsonValue: signal(value ?? [])
+    };
+  }
+
+  #getNotUploadedFiles(formData: FormData): FormData {
+    const fd: FormData = new FormData();
+    if (formData) {
+      for (const pair of formData.entries()) {
+        const file: IssFile = pair[1] as unknown as IssFile;
+        if (!file.id) {
+          fd.append(pair[0], pair[1]);
+        }
+      }
+    }
+    return fd;
+  }
+}

package/projects/iss/src/components/controls/file-picker/file.ts

@@ -0,0 +1,9 @@
+export interface IssFile {
+  id?: string;
+  name: string;
+  size: string | number;
+  type: string;
+  selected?: number;
+  errorMsg?: string;
+  file?: File;
+}

package/projects/iss/src/components/controls/file-picker/format-file-size.util.ts

@@ -0,0 +1,9 @@
+export function formatFileSize(x: string | number) {
+  const units: string[] = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+  let l = 0;
+  let n = parseInt(x.toString(), 10) || 0;
+  while (n >= 1024 && ++l) {
+    n /= 1024;
+  }
+  return `${Math.floor(n)}${units[l]}`;
+}

package/projects/iss/src/components/controls/input/input.control.ts

@@ -0,0 +1,95 @@
+import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA, effect, EffectRef, input, InputSignal, OnDestroy, output, OutputEmitterRef } from "@angular/core";
+import { toSignal } from "@angular/core/rxjs-interop";
+import { NG_VALIDATORS, NG_VALUE_ACCESSOR, ReactiveFormsModule, Validator } from "@angular/forms";
+import { MatFormFieldModule } from "@angular/material/form-field";
+import { MatInput, MatInputModule } from "@angular/material/input";
+import { HintsComponent } from "../../shared/hints.component";
+import { ControlBase } from "../base/control-base";
+
+@Component({
+  selector: "iss-ctrl-input",
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    ReactiveFormsModule,
+    MatFormFieldModule,
+    HintsComponent,
+    MatInput,
+    MatInputModule,
+  ],
+  providers: [
+    {provide: NG_VALUE_ACCESSOR, useExisting: InputControl, multi: true},
+    {provide: NG_VALIDATORS, useExisting: InputControl, multi: true}
+  ],
+  template: `
+    <mat-form-field floatLabel="auto" class="">
+      <mat-label class="fs-16 fc-black">
+        <ng-content select="label"></ng-content>
+      </mat-label>
+      <ng-content select="[issPrefix]"></ng-content>
+      <div (click)="emitPrefixClick()" class="cursor-pointer">
+        @if (prefixText()) {
+          <span matTextPrefix>{{ prefixText() }}</span>
+        }
+        @if (prefixIcon()) {
+          <ds-icon matPrefix icon="{{prefixIcon()}}"></ds-icon>
+        }
+      </div>
+      <input
+        matInput
+        (blur)="markAsTouched()"
+        (input)="emitOnChangeEvent()"
+        [formControl]="ctrl"
+        [maxlength]="max()"
+        [minlength]="min()"
+        [placeholder]="placeholder()"
+        [type]="type()"
+      />
+      <ng-content select="[issSuffix]"></ng-content>
+      <div (click)="emitSuffixClick()" class="cursor-pointer">
+        @if (suffixText()) {
+          <span matTextSuffix>{{ suffixText() }}</span>
+        }
+        @if (suffixIcon()) {
+          <ds-icon matSuffix icon="{{suffixIcon()}}"></ds-icon>
+        }
+      </div>
+      <iss-ctrl-hints [hints]="hints()" />
+    </mat-form-field>
+  `
+})
+export class InputControl extends ControlBase implements Validator, OnDestroy {
+  type: InputSignal<string> = input("text");
+  prefixIcon: InputSignal<string> = input("");
+  prefixText: InputSignal<string> = input("");
+  suffixIcon: InputSignal<string> = input("");
+  suffixText: InputSignal<string> = input("");
+  onPrefixClick: OutputEmitterRef<string> = output();
+  onSuffixClick: OutputEmitterRef<string> = output();
+  #ctrlChanges = toSignal(this.ctrl.valueChanges);
+  #effect: EffectRef = effect(() => {
+    if (this.#ctrlChanges()) {
+      this.emitValue(this.#ctrlChanges());
+    }
+  });
+  #disabledEffect: EffectRef = effect(() => {
+    if (this.disabled()) {
+      this.ctrl.disable();
+    } else {
+      this.ctrl.enable();
+    }
+  });
+
+  emitSuffixClick() {
+    this.onSuffixClick.emit(this.ctrl.getRawValue());
+  }
+
+  emitPrefixClick() {
+    this.onPrefixClick.emit(this.ctrl.getRawValue());
+  }
+
+  ngOnDestroy() {
+    this.#effect.destroy();
+    this.#disabledEffect.destroy();
+  }
+}

package/projects/iss/src/components/controls/input/input.field.ts

@@ -0,0 +1,31 @@
+import { Component } from "@angular/core";
+import { ReactiveFormsModule } from "@angular/forms";
+import { VIEW_PROVIDER } from "../../../shared/constants/view-provider.const";
+import { ValidationMessageComponent } from "../../shared/validation-message.component";
+import { FieldBase } from "../base/field-base";
+import { InputControl } from "./input.control";
+import { InputViewer } from "./input.viewer";
+
+@Component({
+  selector: "iss-field-input",
+  viewProviders: [VIEW_PROVIDER],
+  imports: [
+    ReactiveFormsModule,
+    InputControl,
+    ValidationMessageComponent,
+    InputViewer
+  ],
+  template: `
+    @if (field.visible()) {
+      @if (field.mode() === "edit") {
+        <iss-ctrl-input [formControlName]="field.name" [type]="field.config.type() ?? ''" [placeholder]="field.config.placeholder() ?? ''" [min]="field.config.min() ?? null" [max]="field.config.max() ?? null">
+          <label>{{ field.label() }}</label>
+        </iss-ctrl-input>
+        <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched" />
+      } @else {
+        <iss-viewer-input [field]="field" />
+      }
+    }
+  `
+})
+export class InputField extends FieldBase {}

package/projects/iss/src/components/controls/input/input.viewer.ts

@@ -0,0 +1,10 @@
+import { Component } from "@angular/core";
+import { ViewerBase } from "../base/viewer-base";
+
+@Component({
+  selector: "iss-viewer-input",
+  template: `
+    {{ field().ctrlValue() }}
+  `,
+})
+export class InputViewer extends ViewerBase {}