iss-ctrl 0.0.6 → 0.0.8

package/projects/iss/src/components/controls/date-range-picker/date-range-emission.ts

@@ -1,5 +0,0 @@
-export interface DateRangeEmission {
-  duration: number;
-  start: string;
-  end: string;
-}

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

@@ -1,143 +0,0 @@
-import { Component, input, InputSignal, OnDestroy, OnInit, output, OutputEmitterRef } from "@angular/core";
-import { FormControl, FormGroup, NG_VALUE_ACCESSOR, ReactiveFormsModule } from "@angular/forms";
-import { provideDateFnsAdapter } from "@angular/material-date-fns-adapter";
-import { MAT_DATE_LOCALE } from "@angular/material/core";
-import { MatDatepickerModule } from "@angular/material/datepicker";
-import { MatFormFieldModule } from "@angular/material/form-field";
-import { MatIcon } from "@angular/material/icon";
-import { format } from "date-fns";
-import { enGB } from "date-fns/locale";
-import { Subscription } from "rxjs";
-import { DATE_FORMAT_ADAPTER } from "../../../shared/constants/date-format.const";
-import { ControlBase } from "../base/control-base";
-import { DateRangeEmission } from "./date-range-emission";
-
-@Component({
-  selector: "iss-ctrl-date-range-picker",
-  imports: [
-    MatFormFieldModule,
-    MatDatepickerModule,
-    ReactiveFormsModule,
-    MatIcon,
-  ],
-  providers: [
-    provideDateFnsAdapter(DATE_FORMAT_ADAPTER),
-    {provide: MAT_DATE_LOCALE, useValue: enGB},
-    {provide: NG_VALUE_ACCESSOR, useExisting: DateRangePickerControl, multi: true},
-  ],
-  template: `
-    <mat-form-field floatLabel="auto" class="">
-
-      <mat-label class="fs-16 fc-black">
-        <ng-content select="label"></ng-content>
-      </mat-label>
-      <mat-date-range-input
-        [formGroup]="range"
-        [rangePicker]="picker"
-        [min]="minDate()"
-        [max]="maxDate()"
-        [dateFilter]="calendarDaysFilter"
-      >
-        <input
-          matStartDate
-          formControlName="start"
-          placeholder="dd/mm/yyyy"
-          (click)="picker.open(); markAsTouched()"
-        />
-        <input
-          matEndDate
-          formControlName="end"
-          placeholder="dd/mm/yyyy"
-          (click)="picker.open(); markAsTouched()"
-        />
-      </mat-date-range-input>
-      @if (range.getRawValue().start || range.getRawValue().end) {
-        <mat-icon matSuffix style="cursor: pointer" (click)="clear($event)">close</mat-icon>
-      }
-      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
-      <mat-date-range-picker #picker></mat-date-range-picker>
-
-    </mat-form-field>
-  `
-})
-export class DateRangePickerControl extends ControlBase implements OnInit, OnDestroy {
-  disabledDays: InputSignal<number[]> = input<number[]>([]);
-  minDate: InputSignal<Date | null> = input<Date | null>(null);
-  maxDate: InputSignal<Date | null> = input<Date | null>(null);
-  onDateRangeObjectChange: OutputEmitterRef<DateRangeEmission> = output();
-  readonly range: FormGroup = new FormGroup({
-    start: new FormControl(null),
-    end: new FormControl(null),
-  });
-  protected calendarDaysFilter = (d: Date | null): boolean => {
-    const day: number = (d || new Date()).getDay();
-    return !(this.disabledDays().includes(day));
-  };
-  #sub: Subscription = new Subscription();
-
-  ngOnInit(): void {
-    this.#sub.add(
-      this.range.valueChanges.subscribe((values) => {
-        if (values.start && values.end) {
-          this.emitValue(this.#getEmissionValue(values.start, values.end));
-          this.onDateRangeObjectChange.emit(this.#getEmissionObject(values.start, values.end));
-        }
-      })
-    );
-  }
-
-  clear(event: MouseEvent) {
-    event.stopImmediatePropagation();
-    this.ctrl.setValue(null);
-    this.range.setValue({
-      start: null,
-      end: null,
-    });
-    this.propagateValue(null);
-    this.emitOnChangeEvent(null);
-  }
-
-  override writeValue(value: string | FormData | null) {
-    if (typeof value === "string") {
-      const valArr: string[] = value?.split(",");
-      const valObj = {
-        start: valArr[0],
-        end: valArr[1],
-      };
-      this.range.patchValue(valObj, {emitEvent: false});
-    }
-  }
-
-  ngOnDestroy(): void {
-    this.#sub.unsubscribe();
-  }
-
-  #getDuration(startDate: Date, endDate: Date) {
-    const start: number = new Date(startDate).getTime();
-    const end: number = new Date(endDate).getTime();
-    return Math.ceil((end - start) / (1000 * 60 * 60 * 24) + 1);
-  }
-
-  #getFormatedDate(date: Date) {
-    return format(date, "yyyy-MM-dd'T'HH:mm:ss");
-  }
-
-  #getFormatedEndDate(endDate: Date) {
-    const inputDate: Date = new Date(new Date(endDate).setHours(23, 59, 59));
-    return this.#getFormatedDate(inputDate);
-  }
-
-  #getEmissionValue(start: Date, end: Date): string {
-    const formatedStart: string = this.#getFormatedDate(start);
-    const formatedEnd: string = this.#getFormatedEndDate(end);
-    return `${formatedStart},${formatedEnd}`;
-  }
-
-  #getEmissionObject(start: Date, end: Date): DateRangeEmission {
-    return {
-      duration: this.#getDuration(start, end),
-      start: this.#getFormatedDate(start),
-      end: this.#getFormatedEndDate(end)
-    };
-  }
-}

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

@@ -1,28 +0,0 @@
-import { Component } from "@angular/core";
-import { ReactiveFormsModule } from "@angular/forms";
-import { VIEW_PROVIDER } from "../../../shared/constants/view-provider.const";
-import { FieldBase } from "../base/field-base";
-import { DateRangePickerControl } from "./date-range-picker.control";
-import { DateRangePickerViewer } from "./date-range-picker.viewer";
-
-@Component({
-  selector: "iss-field-date-range-picker",
-  viewProviders: [VIEW_PROVIDER],
-  imports: [
-    ReactiveFormsModule,
-    DateRangePickerControl,
-    DateRangePickerViewer
-  ],
-  template: `
-    @if (field.visible()) {
-      @if (field.mode() === "edit") {
-        <iss-ctrl-date-range-picker [formControlName]="field.name" [minDate]="field.config.minDate() ?? null" [maxDate]="field.config.maxDate() ?? null">
-          <label>{{ field.label() }}</label>
-        </iss-ctrl-date-range-picker>
-      } @else {
-        <iss-viewer-date-range-picker [field]="field" />
-      }
-    }
-  `
-})
-export class DateRangePickerField extends FieldBase {}

package/projects/iss/src/components/controls/date-range-picker/date-range-picker.viewer.ts

@@ -1,22 +0,0 @@
-import { DatePipe } from "@angular/common";
-import { Component, OnInit } from "@angular/core";
-import { ViewerBase } from "../base/viewer-base";
-
-@Component({
-  selector: "iss-viewer-date-range-picker",
-  imports: [
-    DatePipe
-  ],
-  template: `
-    @for (date of dateRange; track date; let last = $last) {
-      <span> {{ date | date: 'dd/MM/yyyy' }} {{ last ? '' : '- ' }} </span>
-    }
-  `
-})
-export class DateRangePickerViewer extends ViewerBase implements OnInit {
-  dateRange: string[] = [];
-
-  ngOnInit() {
-    this.dateRange = this.field().ctrlValue().split(",").map((val: any) => val.trim());
-  }
-}

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

@@ -1,109 +0,0 @@
-import { Component, input, InputSignal } from "@angular/core";
-import { FormControl, FormGroup, NG_VALIDATORS, NG_VALUE_ACCESSOR, ReactiveFormsModule } from "@angular/forms";
-import { MatDatepickerModule } from "@angular/material/datepicker";
-import { MatFormFieldModule } from "@angular/material/form-field";
-import { MatInputModule } from "@angular/material/input";
-import { MatTimepickerModule } from "@angular/material/timepicker";
-import { format } from "date-fns";
-import { ControlBase } from "../base/control-base";
-import { DatePickerControl } from "../date-picker/date-picker.control";
-import { TimePickerControl } from "../time-picker/time-picker.control";
-
-@Component({
-  selector: "iss-ctrl-datetime-picker",
-  imports: [
-    MatFormFieldModule,
-    MatInputModule,
-    MatTimepickerModule,
-    MatDatepickerModule,
-    ReactiveFormsModule,
-    DatePickerControl,
-    TimePickerControl,
-  ],
-  providers: [
-    {provide: NG_VALUE_ACCESSOR, useExisting: DatetimePickerControl, multi: true},
-    {provide: NG_VALIDATORS, useExisting: DatetimePickerControl, multi: true},
-  ],
-  template: `
-    <form [formGroup]="datetimeForm" class="d-flex flex-row gap-1">
-      <iss-ctrl-date-picker (focusout)="markAsTouched()" [disabledDays]="disabledDays()" [maxDate]="maxDate()" [minDate]="minDate()" formControlName="date" (onChange)="emit()">
-        <label>
-          <ng-content select="label"></ng-content>
-        </label>
-      </iss-ctrl-date-picker>
-      <iss-ctrl-time-picker
-        (focusout)="markAsTouched()"
-        [maxTime]="maxTime()"
-        [minTime]="minTime()"
-        formControlName="time"
-        (onChange)="emit()"
-      />
-    </form>
-  `
-})
-export class DatetimePickerControl extends ControlBase {
-  datetimeForm: FormGroup = new FormGroup({
-    date: new FormControl(null),
-    time: new FormControl(null),
-  });
-  disabledDays: InputSignal<number[]> = input<number[]>([]);
-  minDate: InputSignal<Date | null> = input<Date | null>(null);
-  maxDate: InputSignal<Date | null> = input<Date | null>(null);
-  minTime: InputSignal<string | null> = input<string | null>(null);
-  maxTime: InputSignal<string | null> = input<string | null>(null);
-
-  emit() {
-    const datetimeStr = this.#stringifyDateTime(this.datetimeForm.getRawValue());
-    this.propagateValue(datetimeStr);
-    this.emitOnChangeEvent(datetimeStr);
-  }
-
-  override writeValue(value: string | Date | null) {
-    this.datetimeForm.patchValue({
-      date: this.#stringifyDate(value),
-      time: this.#stringifyTime(value),
-    });
-  }
-
-  #stringifyDateTime(datetime: any): string | undefined {
-    if (!datetime) {
-      return undefined;
-    }
-    if (this.#stringifyDate(datetime) && this.#stringifyTime(datetime)) {
-      return `${this.#stringifyDate(datetime)}T${this.#stringifyTime(datetime)}`;
-    }
-    return undefined;
-  }
-
-  #stringifyDate(datetime: any) {
-    if (!datetime) {
-      return undefined;
-    }
-
-    if (datetime.date && typeof datetime.date === "string") {
-      return `${datetime.date.split("T")[0]}`;
-    }
-
-    const date = new Date(datetime);
-    if (!Number.isNaN(date.getTime())) {
-      return format(datetime, "yyyy-MM-dd");
-    }
-    return undefined;
-  }
-
-  #stringifyTime(datetime: any) {
-    if (!datetime) {
-      return undefined;
-    }
-
-    if (datetime.time && typeof datetime.time === "string") {
-      return `${datetime.time}`;
-    }
-
-    const date = new Date(datetime);
-    if (!Number.isNaN(date.getTime())) {
-      return format(datetime, "HH:mm:ss");
-    }
-    return undefined;
-  }
-}

package/projects/iss/src/components/controls/datetime-picker/datetime-picker.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 { DatetimePickerControl } from "./datetime-picker.control";
-import { DatePickerTimeViewer } from "./datetime-picker.viewer";
-
-@Component({
-  selector: "iss-field-datetime-picker",
-  viewProviders: [VIEW_PROVIDER],
-  imports: [
-    ReactiveFormsModule,
-    DatetimePickerControl,
-    ValidationMessageComponent,
-    DatePickerTimeViewer,
-  ],
-  template: `
-    @if (field.visible()) {
-      @if (field.mode() === "edit") {
-        <iss-ctrl-datetime-picker [formControlName]="field.name" [minDate]="field.config.minDate() ?? null" [maxDate]="field.config.maxDate() ?? null">
-          <label>{{ field.label() }}</label>
-        </iss-ctrl-datetime-picker>
-        <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched" />
-      } @else {
-        <iss-viewer-datetime-picker [field]="field" />
-      }
-    }
-  `
-})
-export class DatetimePickerField extends FieldBase {}

package/projects/iss/src/components/controls/datetime-picker/datetime-picker.viewer.ts

@@ -1,17 +0,0 @@
-import { DatePipe } from "@angular/common";
-import { Component } from "@angular/core";
-import { DATETIME_FORMAT } from "../../../shared/constants/date-format.const";
-import { ViewerBase } from "../base/viewer-base";
-
-@Component({
-  selector: "iss-viewer-datetime-picker",
-  imports: [
-    DatePipe
-  ],
-  template: `
-    {{ field().ctrlValue() | date: DATETIME_FORMAT }}
-  `
-})
-export class DatePickerTimeViewer extends ViewerBase {
-  protected readonly DATETIME_FORMAT = DATETIME_FORMAT;
-}

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

@@ -1,6 +0,0 @@
-export interface IssAttachment {
-  id: string,
-  name: string,
-  type: string,
-  size: number
-}

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

@@ -1,165 +0,0 @@
-import { Component, computed, CUSTOM_ELEMENTS_SCHEMA, input, InputSignal, output, OutputEmitterRef } from "@angular/core";
-import { MatProgressBar } from "@angular/material/progress-bar";
-import { MatTooltip } from "@angular/material/tooltip";
-import { ViewerBase } from "../base/viewer-base";
-import { IssFile } from "./file";
-
-@Component({
-  selector: "iss-viewer-attachment",
-  imports: [
-    MatTooltip,
-    MatProgressBar,
-  ],
-  template: `
-    @if (attachments()?.length) {
-      <section class="files-list">
-        @for (file of attachments(); track $index) {
-          <div class="file-item-container">
-            @if (file) {
-              <ds-attachments
-                [matTooltip]="file.name"
-                [file]="file.file ?? file"
-                [showDownload]="field().config.showDownloadButton"
-                [attr.readonly]="!field().config.showDeleteButton"
-                (downloadEvent)="onDownload($event)"
-                (deleteEvent)="onDelete($index)"
-              >
-              </ds-attachments>
-              @if (uploading()) {
-                <mat-progress-bar mode="indeterminate" />
-              }
-            }
-          </div>
-        }
-      </section>
-    }
-  `,
-  styles: `
-    .insideTableStyle {
-      width: 272px;
-    }
-
-    .files-list {
-      --file-item-width: 270px;
-      display: grid;
-      grid-template-columns: repeat(auto-fill, var(--file-item-width));
-      grid-gap: 0.5rem;
-      @media (max-width: 768px) {
-        grid-template-columns: repeat(auto-fill, minmax(var(--file-item-width), 1fr));
-      }
-
-
-    }
-
-    .mat-mdc-progress-bar {
-      --mat-progress-bar-active-indicator-color: var(--purple);
-      --mat-progress-bar-track-color: rgba(var(--rgb-purple), .25);
-    }
-
-
-    .file-item-container {
-      .file-item {
-        --file-bg: var(--off-white);
-        --file-radius: var(--box-radius);
-        --icon-color: var(--purple);
-        --icon-size: 2rem;
-        --file-border: transparent;
-
-        display: flex;
-        align-items: center;
-        background-color: var(--file-bg);
-        border: 1px solid var(--file-border);
-        border-radius: var(--file-radius);
-        padding: 0 1rem;
-        height: 70px;
-        gap: 0.75rem;
-
-        &.error {
-          --file-bg: rgba(var(--rgb-red), 10%);
-          --file-border: var(--red);
-          --icon-color: var(--red);
-        }
-
-        .icon {
-          color: var(--icon-color);
-          font-size: var(--icon-size);
-        }
-
-        .file-action {
-          display: flex;
-          align-items: center;
-          gap: 0.5rem;
-        }
-      }
-    }
-
-    ds-attachments::part(base) {
-      --file-width: 250px;
-    }
-
-    ::ng-deep {
-      .file-item .name-size {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        flex-grow: 1;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        min-width: 120px;
-      }
-    }
-  `,
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
-})
-export class AttachmentViewer extends ViewerBase {
-  uploading: InputSignal<boolean> = input(false);
-  uploadingError: InputSignal<string> = input("");
-  deleteOut: OutputEmitterRef<File[]> = output();
-  attachments = computed(() => {
-    return this.field().ctrlJsonValue().map((attachment: IssFile): IssFile => {
-      return {
-        name: attachment.name,
-        size: attachment.size,
-        type: attachment.type,
-        errorMsg: attachment.errorMsg,
-        file: attachment.file
-      };
-    });
-  });
-
-  protected onDownload($event: any) {
-    const fileUrl: string = this.#createObjectUrl($event.detail.value);
-    const anchorElement: HTMLAnchorElement = this.#createAnchorElement(fileUrl, $event.detail.value.name);
-    this.#useAnchorElementThenDispose(anchorElement, fileUrl);
-  }
-
-  protected onDelete(index: number) {
-    const fileHtmlElement: HTMLInputElement | null = document.getElementById("file") as HTMLInputElement;
-    if (fileHtmlElement) {
-      fileHtmlElement.value = "";
-    }
-    const updatedFiles = this.field().ctrlJsonValue().filter((_: any, i: number): boolean => i !== index);
-    this.field().ctrlJsonValue = computed(() => updatedFiles);
-    this.deleteOut.emit(this.field().ctrlJsonValue());
-  }
-
-  #createObjectUrl(file: File): string {
-    const blob: Blob = new Blob([file], {type: "application/octet-stream"});
-    return window.URL.createObjectURL(blob);
-  }
-
-  #createAnchorElement(fileUrl: string, fileName: string): HTMLAnchorElement {
-    const a: HTMLAnchorElement = document.createElement("a");
-    a.setAttribute("style", "display: none");
-    a.href = fileUrl;
-    a.download = fileName;
-    return a;
-  }
-
-  #useAnchorElementThenDispose(a: HTMLAnchorElement, fileUrl: string) {
-    a.click();
-    window.URL.revokeObjectURL(fileUrl);
-    a.remove();
-  }
-}

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

@@ -1,25 +0,0 @@
-import { Directive, HostListener, output, OutputEmitterRef } from "@angular/core";
-
-@Directive({selector: "[droppable]"})
-export class Droppable {
-  onDrop: OutputEmitterRef<FileList> = output();
-
-  @HostListener("dragover", ["$event"])
-  onDragOver(evt: any) {
-    evt.preventDefault();
-    evt.stopPropagation();
-  }
-
-  @HostListener("dragleave", ["$event"])
-  onDragLeave(evt: any) {
-    evt.preventDefault();
-    evt.stopPropagation();
-  }
-
-  @HostListener("drop", ["$event"])
-  onDropped(evt: any) {
-    evt.preventDefault();
-    evt.stopPropagation();
-    this.onDrop.emit(evt.dataTransfer.files);
-  }
-}

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

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