iss-ctrl 0.0.6 → 0.0.8

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

@@ -1,189 +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 { 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

@@ -1,117 +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/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

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

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

@@ -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.field.ts

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

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