iss-ctrl 0.0.3 → 0.0.4

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

@@ -1,115 +0,0 @@
-import {HttpClient} from "@angular/common/http";
-import {inject, Injectable} from "@angular/core";
-import {EMPTY, forkJoin, map, Observable} from "rxjs";
-import {IssAttachment} from "../../../shared/interfaces/attachment.interface";
-import {IssFile} from "../../../shared/interfaces/file.interface";
-import {ATTACHMENT_DOWNLOAD_URL, ATTACHMENT_UPLOAD_RESPONSE_MAPPER, ATTACHMENT_UPLOAD_URL} from "../../../shared/tokens/attachment.token";
-import {replacePlaceholders} from "../../../shared/utilities/replace-placeholder.util";
-
-@Injectable({providedIn: "root"})
-export class FileHandlerService {
-  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)),
-      map((res: IssAttachment[]): IssAttachment[] => {
-        return res.map((attachment) => {
-          attachment.selected = this.getFileFromFormData(data, attachment.name)[0]?.selected;
-          return attachment;
-        });
-      })
-    );
-  }
-
-  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

@@ -1,187 +0,0 @@
-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 {IssAttachment} from "../../../shared/interfaces/attachment.interface";
-import {IssFile} from "../../../shared/interfaces/file.interface";
-import {HintsComponent} from "../../shared/hints.component";
-import {ControlBase} from "../base/control.base";
-import {DroppableDirective} from "./droppable.directive";
-
-@Component({
-  selector: "iss-ctrl-file-picker",
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  imports: [
-    ReactiveFormsModule,
-    DroppableDirective,
-    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-vwr-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());
-  });
-
-  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.wrapper.ts

@@ -1,120 +0,0 @@
-import {Component, computed, effect, inject, OnDestroy, Signal, signal, WritableSignal,} from "@angular/core";
-import {FormControl, ReactiveFormsModule} from "@angular/forms";
-import {MatLabel} from "@angular/material/form-field";
-import {catchError, EMPTY} from "rxjs";
-import {VIEW_PROVIDER} from "../../../shared/constants/provider.const";
-import {IssAttachment} from "../../../shared/interfaces/attachment.interface";
-import {IssFile} from "../../../shared/interfaces/file.interface";
-import {ValidationMessageComponent} from "../../shared/validation-message.component";
-import {WrapperBase} from "../base/wrapper.base";
-import {AttachmentViewer} from "./attachment.viewer";
-import {FileHandlerService} from "./file-handler.service";
-import {FilePickerControl} from "./file-picker.control";
-
-@Component({
-  selector: "iss-wrp-file-picker",
-  viewProviders: [VIEW_PROVIDER],
-  imports: [
-    ReactiveFormsModule,
-    MatLabel,
-    FilePickerControl,
-    ValidationMessageComponent,
-    AttachmentViewer
-  ],
-  template: `
-    @if (field.isVisible() && field.registered()) {
-      @if (!(field.config.hideLabel)) {
-        <mat-label>{{ field.label() }}</mat-label>
-      }
-      @if (field.mode() === "edit") {
-        <input type="hidden" [formControlName]="field.name">
-        <iss-ctrl-file-picker
-          [formControl]="picker"
-          [accept]="field.validation.fileType"
-          [showDeleteButton]="field.config.showDeleteButton"
-          [showDownloadButton]="field.config.showDownloadButton"
-          (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-vwr-attachment [uploading]="uploading()" [field]="viewField()" />
-      }
-    }
-  `
-})
-export class FilePickerWrapper extends WrapperBase implements OnDestroy {
-  picker = new FormControl();
-  fileHandlerService = inject(FileHandlerService);
-  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/input/input.control.ts

@@ -1,95 +0,0 @@
-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.viewer.ts

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

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

@@ -1,40 +0,0 @@
-import {Component} from "@angular/core";
-import {ReactiveFormsModule} from "@angular/forms";
-import {MatLabel} from "@angular/material/form-field";
-import {VIEW_PROVIDER} from "../../../shared/constants/provider.const";
-import {ValidationMessageComponent} from "../../shared/validation-message.component";
-import {WrapperBase} from "../base/wrapper.base";
-import {InputControl} from "./input.control";
-import {InputViewer} from "./input.viewer";
-
-@Component({
-  selector: "iss-wrp-input",
-  viewProviders: [VIEW_PROVIDER],
-  imports: [
-    ReactiveFormsModule,
-    MatLabel,
-    InputControl,
-    InputViewer,
-    ValidationMessageComponent
-  ],
-  template: `
-    @if (field.isVisible() && field.registered()) {
-      @if (!(field.config.hideLabel)) {
-        <mat-label>{{ field.label() }}</mat-label>
-      }
-      @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"
-        />
-        <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched" />
-      } @else {
-        <iss-vwr-input [field]="field" />
-      }
-    }
-  `
-})
-export class InputWrapper extends WrapperBase {}