myrta-ui 17.0.19 → 17.0.20

package/src/lib/components/form/input-file/input-file.component.ts

@@ -0,0 +1,329 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, TemplateRef } from '@angular/core';
+import { NgxFileDropEntry } from 'ngx-file-drop';
+import { HttpEvent, HttpEventType } from '@angular/common/http';
+import { catchError } from 'rxjs/operators';
+import { EMPTY } from 'rxjs';
+import { v4 as uuidv4 } from 'uuid';
+import { InputFileModel, UploadedFileModel, UploadedResultModel } from '../../../models/input-file/input-file.model';
+import { formatBytes } from '../../../helpers/extension/input-file.extension';
+import { FileUploadService } from '../../../services/file-upload/file-upload.service';
+import { ErrorMessagesEnum } from './enums/error-messages.enum';
+import { InputFileTargetTypes, InputFileTargetTypesEnum } from './input-file.enum';
+
+@Component({
+  selector: 'mrx-input-file',
+  templateUrl: './input-file.component.html',
+  styleUrls: ['./input-file.component.less'],
+})
+export class InputFileComponent {
+  formatBytes = formatBytes;
+  extensions?: string;
+  allowedExtensions: string[] = [];
+  files: InputFileModel[] = [];
+
+  @Input() public autoUpload = true;
+  @Input() public required = false;
+  @Input() public disabled = false;
+  @Input() public viewOnly = false;
+  @Input() public lightDisabled = false;
+  @Input() public bottomFiles = false;
+  @Input() public maxSize = 31457280;
+  @Input() public maxFiles = 5;
+  @Input() public minFiles = 0;
+  @Input() public formData: any = {}; // Параметры, которые будут передаваться в форме
+  @Input() public uploadEndPoint!: string;
+  @Input() public deleteEndPoint?: string;
+  @Input() public downloadEndPoint?: string;
+  @Input() public fileNamePlaceholder?: string;
+  @Input() public showInputWithError = true;
+  @Input() public showDeleteButton = true;
+  @Input() public isTooltipValue = false;
+  @Input() public isDownloadingFile = true;
+  @Input() public isHideListFiles = false;
+  @Input() public target: InputFileTargetTypes = '_self';
+  @Input() public deleteConfirm?: (file: UploadedFileModel, result: (ok: boolean) => void) => void;
+
+  @Input() public innerTemplate!: TemplateRef<any>;
+
+  @Input() public uploadAdditionalData: any = {};
+
+  // ERROR
+  @Input() public invalid = false;
+  @Input() public invalidMessage: string | string[] = '';
+  @Input() public checkInvalid: true | false | null = null;
+
+  // ERROR MESSAGES
+  @Input() public messageTooManyFiles: string = ErrorMessagesEnum.TooManyFiles;
+  @Input() public messageFileTooBig: string = ErrorMessagesEnum.FileTooBig;
+  @Input() public messageEmptyFile: string = ErrorMessagesEnum.EmptyFile;
+  @Input() public messageInvalidFileFormat: string = ErrorMessagesEnum.InvalidFileFormat;
+
+  // PLACEHOLDERS
+  @Input() public placeholder = 'Перенесите файл с устройства или нажмите на данное поле для добавления файла';
+  @Input() public placeholderFileMaxSize = 'Размер файла: не больше';
+  @Input() public placeholderFileFormat = 'Формат файла:';
+
+  @Input('files')
+  set initFiles(data: UploadedFileModel[] | UploadedFileModel) {
+    if (data) {
+      if (Array.isArray(data)) {
+        this.files = data.map(s => ({ ...s }));
+      } else {
+        this.files = [{ ...data }];
+      }
+    } else {
+      this.files = [];
+    }
+  }
+
+  @Input('allowedExtensions')
+  public set initAllowedExtensions(val: string[]) {
+    if (val) {
+      this.allowedExtensions = val;
+      this.extensions = val.join(', ');
+    } else {
+      this.allowedExtensions = [];
+      this.extensions = undefined;
+    }
+  }
+
+  @Output() public filesChanged: EventEmitter<InputFileModel[]> = new EventEmitter();
+  @Output() public checkDroppedFile: EventEmitter<InputFileModel> = new EventEmitter();
+
+  constructor(private fileUploadService: FileUploadService) {
+  }
+
+  get canAdd() {
+    if (this.showInputWithError) {
+      return this.maxFiles > this.files.filter(s => !s.error).length;
+    } else {
+      return this.maxFiles > this.files.length;
+    }
+  }
+
+  public get getTarget(): string {
+    return InputFileTargetTypesEnum[this.target]
+  }
+
+  public get isInvalidMessage(): boolean {
+    return !!this.invalidMessage || !!this.invalidMessage?.length;
+  }
+
+  public get checkValidClasses(): string {
+    return this.checkInvalid === false ?
+      'mrx-input-checked-success' :
+      this.checkInvalid === true ? 'mrx-input-checked-error' : '';
+  }
+
+  public get getClasses(): string {
+    return `${this.checkValidClasses}`;
+  }
+
+  public get isValid(): boolean {
+    return this.baseValidate();
+  }
+
+  public getTooltipValue(value: string | undefined): string {
+    return this.isTooltipValue && value ? value : ''
+  }
+
+  protected baseValidate(): boolean {
+    return true;
+  }
+
+  trackByFn(index: number, item: InputFileModel) {
+    return Boolean(item.id) ? item.id : item.tempUuid;
+  }
+
+  public delete(event: any, file: InputFileModel): void {
+    event.stopPropagation();
+
+    if (this.deleteConfirm) {
+      this.deleteConfirm(file, (ok) => {
+        if (ok) {
+          this._deleteFile(file);
+        }
+      });
+    } else {
+      this._deleteFile(file);
+    }
+  }
+
+  canCancelUploading(file: InputFileModel): boolean {
+    return !!file.uploading && file.percentage ? file.percentage < 90 : false;
+  }
+
+  clear(file: InputFileModel): void {
+    if (file.uploading) {
+      if (file.execution) {
+        file.execution.unsubscribe();
+      }
+    }
+
+    const findFileIdx = this.files.indexOf(file);
+    if (findFileIdx >= 0) {
+      this.files.splice(findFileIdx, 1);
+    }
+  }
+
+  public downloadUrl(file: UploadedFileModel): string {
+    if (this.downloadEndPoint) {
+      return this._transformUrl(this.downloadEndPoint, file);
+    } else {
+      return '';
+    }
+  }
+
+  public dropped(files: NgxFileDropEntry[]) {
+    for (const droppedFile of files) {
+      if (droppedFile.fileEntry.isFile) {
+        const fileEntry = droppedFile.fileEntry as FileSystemFileEntry;
+        fileEntry.file((file: File) => {
+          this._uploadFile(file);
+        });
+      }
+    }
+  }
+
+  private _transformUrl(url: string, file: UploadedFileModel): string {
+    return url.replace(/{id}/, file.id)
+  }
+
+  private _formDataKeys(): string[] {
+    return Object.keys(this.formData);
+  }
+
+  private _createFormData(): FormData {
+    const form = new FormData();
+    if (this.maxFiles) {
+      form.append('MaxFiles', this.maxFiles.toString(10));
+    }
+    const keys = this._formDataKeys();
+    keys.forEach(key => form.append(key, this.formData[key]));
+    return form;
+  }
+
+  private _deleteFile(file: InputFileModel) {
+    const findFile = this.files.find(s => s.id === file.id);
+
+    if (findFile) {
+      if (this.deleteEndPoint) {
+        findFile.deleting = true;
+
+        this.fileUploadService.delete(this._transformUrl(this.deleteEndPoint, findFile)).subscribe(result => {
+          this.files.splice(this.files.indexOf(findFile), 1);
+          this.filesChanged.emit(this.files);
+        });
+
+      } else {
+        this.files.splice(this.files.indexOf(findFile), 1);
+        this.filesChanged.emit(this.files);
+      }
+    }
+  }
+
+  private _uploadFile(file: File): void {
+    const data = {
+      id: '',
+      tempUuid: uuidv4(),
+      name: file.name,
+      length: file.size,
+      uploading: true,
+      percentage: 0,
+      file: file
+    } as InputFileModel;
+
+    if (!this.checkForUpload(data)) {
+      return;
+    }
+
+    const formData = this._createFormData();
+    formData.append('File', file);
+
+    if (this.uploadAdditionalData && Object.keys(this.uploadAdditionalData).length) {
+      Object.keys(this.uploadAdditionalData).forEach(key => {
+        formData.append(key, this.uploadAdditionalData[key]);
+      })
+    }
+
+    if (this.autoUpload) {
+      data.execution = this.fileUploadService.upload(this.uploadEndPoint, formData).pipe(
+        catchError((err) => {
+          data.uploading = false;
+          return EMPTY;
+        })
+      )
+        .subscribe((event: HttpEvent<UploadedResultModel>) => {
+          switch (event.type) {
+            case HttpEventType.Sent:
+              break;
+            case HttpEventType.ResponseHeader:
+              break;
+            case HttpEventType.UploadProgress:
+              if (event.total) {
+                data.percentage = Math.round(event.loaded / event.total * 100);
+              }
+              break;
+            case HttpEventType.Response:
+              if (event.body) {
+                data.uploading = false;
+                data.percentage = 0;
+                data.id = event.body.uuid;
+                data.file = undefined;
+                data.error = event.body.message;
+                if (data.execution) {
+                  data.execution.unsubscribe();
+                }
+
+                if (this.files.every(s => !s.uploading)) {
+                  const completedFiles = this.files.filter(s => !s.error);
+                  this.filesChanged.emit(completedFiles);
+                }
+              }
+          }
+        });
+    } else {
+      data.uploading = false;
+      data.id = data.tempUuid || '';
+
+      if (this.files.every(s => !s.uploading)) {
+        this.filesChanged.emit(this.files);
+      }
+    }
+  }
+
+  private checkForUpload(data: InputFileModel): boolean {
+    this.checkDroppedFile.emit(data)
+
+    if (!this.canAdd) {
+      data.error = this.messageTooManyFiles;
+      data.uploading = false;
+      this.files.push(data);
+      return false;
+    }
+
+    this.files.push(data);
+
+    if (data.file && data.file.size > this.maxSize) {
+      data.error = this.messageFileTooBig;
+      data.uploading = false;
+      return false;
+    }
+
+    if (data.file && data.file.size == 0) {
+      data.error = this.messageEmptyFile;
+      data.uploading = false;
+      return false;
+    }
+
+    if (this.allowedExtensions.length > 0 && !this.allowedExtensions.some(
+      s => data.file && data.file.name.toLowerCase().endsWith(s.toLowerCase()))) {
+
+      data.error = this.messageInvalidFileFormat;
+      data.uploading = false;
+      return false;
+    }
+
+    return true;
+  }
+}

package/src/lib/components/form/input-file/input-file.enum.ts

@@ -0,0 +1,8 @@
+export enum InputFileTargetTypesEnum {
+  '_self' = '_self',
+  '_blank' = '_blank',
+  '_parent' = '_parent',
+  '_top' = '_top',
+}
+
+export type InputFileTargetTypes = '_self' | '_blank' | '_parent' | '_top'

package/src/lib/components/form/input-file/input-file.module.ts

@@ -0,0 +1,18 @@
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { NgxFileDropModule } from 'ngx-file-drop';
+import { InputFileComponent } from './input-file.component';
+import { HttpClientModule } from '@angular/common/http';
+import { FileUploadService } from '../../../services/file-upload/file-upload.service';
+import { ErrorMessageModule } from '../../error-message/error-message.module';
+import { CdkTooltipModule } from '../../cdk-tooltip/cdk-tooltip.module';
+
+@NgModule({
+  declarations: [InputFileComponent],
+  imports: [CommonModule, FormsModule, HttpClientModule, NgxFileDropModule, ErrorMessageModule, CdkTooltipModule],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  exports: [InputFileComponent],
+  providers: [FileUploadService]
+})
+export class InputFileModule {}

package/src/lib/components/form/input-file-image/assets/input-file-image-avatar.less

@@ -0,0 +1,93 @@
+.mrx-input-file-image.mrx-input-file-image-type-avatar {
+  max-width: 154px;
+  min-width: 154px;
+  min-height: 154px;
+  max-height: 154px;
+  height: 154px;
+
+  .mrx-input-file-image-avatar {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    width: 100%;
+    height: 100%;
+
+    &-item {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+      word-break: break-word;
+
+      .icon-close {
+        position: absolute;
+        top: 8px;
+        right: 8px;
+        cursor: pointer;
+      }
+
+      img {
+        word-wrap: break-word;
+        object-fit: cover;
+      }
+
+      &:hover {
+        border-color: var(--Main2);
+      }
+
+      &-error {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        text-align: center;
+        width: 100%;
+        height: 100%;
+        border: 1px solid var(--system-bg-controls-negative-default);
+        border-radius: var(--border-radius-1);
+        color: var(--system-text-negative);
+      }
+
+      &-uploading {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        gap: var(--spacing-3);
+        width: 100%;
+        height: 100%;
+        border: 1px solid var(--neutral-bg-stroke-default);
+        border-radius: 4px;
+
+        &-text {
+          font-size: var(--body-md-font-size);
+          font-family: var(--body-md-font-family);
+          font-weight: var(--body-md-font-weight);
+          line-height: var(--body-md-line-height);
+          text-align: center;
+          color: var(--neutral-text-primary);
+        }
+
+        &-progress {
+          width: 96px;
+          height: 4px;
+          border-radius: 2px;
+          background-color: var(--neutral-bg-island-default);
+          display: flex;
+          justify-content: flex-start;
+
+          span {
+            display: block;
+            height: 100%;
+            width: 0;
+            background-color: var(--brand-bg-primary-default);
+            border-radius: 2px;
+          }
+        }
+      }
+    }
+  }
+}

package/src/lib/components/form/input-file-image/assets/input-file-image-controls.less

@@ -0,0 +1,35 @@
+.mrx-input-file-image {
+  &-preview, &-avatar {
+    &-item {
+      &:hover {
+        .mrx-input-file-image-controls {
+          display: flex;
+        }
+      }
+    }
+  }
+
+  &-controls {
+    position: absolute;
+    top: -16px;
+    right: -16px;
+    background: #FFFFFF;
+    box-shadow: 0px 1px 4px rgba(58, 58, 58, 0.3);
+    border-radius: 5px;
+    padding: 5px;
+    display: none;
+
+    &-item {
+      min-width: 16px;
+      height: 16px;
+      cursor: pointer;
+
+      &:not(:last-child) {
+        position: relative;
+        padding-right: 8px;
+        border-right: 1px solid #BFC5CC;;
+        margin-right: 8px;
+      }
+    }
+  }
+}

package/src/lib/components/form/input-file-image/assets/input-file-image-drop.less

@@ -0,0 +1,24 @@
+.mrx-input-file-image {
+  .mrx-input-file-image-drop {
+    width: 100%;
+    height: 100%;
+
+    &-disabled {
+      .mrx-input-file-image-input {
+        border-color: var(--neutral-bg-stroke-default);
+        background-color: var(--neutral-bg-disabled);
+        cursor: default;
+      }
+    }
+
+    .ngx-file-drop__drop-zone {
+      height: 100%;
+      border: none;
+      border-radius: 0;
+
+      .ngx-file-drop__content {
+        height: 100%;
+      }
+    }
+  }
+}

package/src/lib/components/form/input-file-image/assets/input-file-image-input.less

@@ -0,0 +1,45 @@
+.mrx-input-file-image-input {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: var(--spacing-4);
+    width: 100%;
+    height: 100%;
+    min-height: 100px;
+    gap: var(--spacing-2);
+    border-radius: var(--border-radius-1);
+    background-image:
+      repeating-linear-gradient(0deg, var(--neutral-bg-stroke-default, #DAD5CE), var(--neutral-bg-stroke-default, #DAD5CE) 6px, transparent 6px, transparent 10px, var(--neutral-bg-stroke-default, #DAD5CE) 10px),
+      repeating-linear-gradient(90deg, var(--neutral-bg-stroke-default, #DAD5CE), var(--neutral-bg-stroke-default, #DAD5CE) 6px, transparent 6px, transparent 10px, var(--neutral-bg-stroke-default, #DAD5CE) 10px),
+      repeating-linear-gradient(180deg, var(--neutral-bg-stroke-default, #DAD5CE), var(--neutral-bg-stroke-default, #DAD5CE) 6px, transparent 6px, transparent 10px, var(--neutral-bg-stroke-default, #DAD5CE) 10px),
+      repeating-linear-gradient(270deg, var(--neutral-bg-stroke-default, #DAD5CE), var(--neutral-bg-stroke-default, #DAD5CE) 6px, transparent 6px, transparent 10px, var(--neutral-bg-stroke-default, #DAD5CE) 10px);
+    background-size: 1px 100%, 100% 1px, 1px 100%, 100% 1px;
+    background-position: 0 0, 0 0, 100% 0, 0 100%;
+    background-repeat: no-repeat;
+    cursor: pointer;
+
+    &-placeholder {
+        font-size: var(--body-md-font-size);
+        font-family: var(--body-md-font-family);
+        font-weight: var(--body-md-font-weight);
+        line-height: var(--body-md-line-height);
+        text-align: center;
+        color: var(--neutral-text-secondary);
+    }
+
+    &-info {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        * {
+            font-size: var(--body-sm-font-size);
+            font-family: var(--body-sm-font-family);
+            font-weight: var(--body-sm-font-weight);
+            line-height: var(--body-sm-line-height);
+            text-align: center;
+            color: var(--neutral-text-secondary);
+        }
+    }
+}

package/src/lib/components/form/input-file-image/assets/input-file-image-preview.less

@@ -0,0 +1,107 @@
+.mrx-input-file-image {
+  &-preview {
+    width: 100%;
+
+    &-item {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+      gap: var(--spacing-2);
+      border: 1px solid var(--neutral-bg-stroke-default);
+      border-radius: var(--border-radius-1);
+      transition: .2s;
+      word-break: break-word;
+      height: 100%;
+      min-height: 218px;
+      padding: var(--spacing-4);
+
+      .icon-close {
+        position: absolute;
+        top: 8px;
+        right: 8px;
+        cursor: pointer;
+      }
+
+      &.mrx-input-file-image-error {
+        border: 1px solid var(--system-bg-controls-negative-default);
+      }
+
+      &__image {
+        height: 128px;
+        position: relative;
+
+        img {
+          word-wrap: break-word;
+          height: 100%;
+          width: 100%;
+          object-fit: cover;
+        }
+      }
+
+      &:hover {
+        border-color: var(--neutral-bg-stroke-hover);
+      }
+
+      &-info {
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing-2);
+      }
+
+      &-name {
+        font-family: var(--body-md-font-family);
+        font-size: var(--body-md-font-size);
+        font-weight: var(--body-md-font-weight);
+        line-height: var(--body-md-line-height);
+        color: var(--neutral-text-primary);
+      }
+
+      &-description {
+        font-family: var(--body-md-font-family);
+        font-size: var(--body-md-font-size);
+        font-weight: var(--body-md-font-weight);
+        line-height: var(--body-md-line-height);
+        color: var(--neutral-text-secondary);
+      }
+
+      &-error {
+        max-height: 236px;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        color: var(--system-text-negative);
+      }
+
+      &-uploading {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+
+        &-progress {
+          width: 96px;
+          height: 4px;
+          background-color: var(--neutral-bg-island-default);
+          display: flex;
+          justify-content: flex-start;
+
+          span {
+            display: block;
+            height: 100%;
+            width: 0;
+            background-color: var(--brand-bg-primary-default);
+            border-radius: 2px;
+          }
+        }
+      }
+    }
+
+    .row {
+      row-gap: var(--spacing-3);
+    }
+  }
+}

package/src/lib/components/form/input-file-image/assets/input-file-image.less

@@ -0,0 +1,7 @@
+.mrx-input-file-image {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+  gap: var(--spacing-3);
+}

package/src/lib/components/form/input-file-image/components/file-image-edit-modal/assets/input-image-cropper.less

@@ -0,0 +1,25 @@
+:host::ng-deep {
+  .mrx-input-image-cropper {
+    &__wrapper {
+      position: relative;
+    }
+
+    &__controls {
+      padding: 8px;
+      background: rgba(31, 34, 38, 0.5);
+      border-radius: 4px;
+      position: absolute;
+      left: 50%;
+      bottom: 24px;
+      transform: translateX(-50%);
+
+      svg {
+        cursor: pointer;
+
+        &:not(:last-child) {
+          margin-right: 16px;
+        }
+      }
+    }
+  }
+}