attachment.component.ts

import { CommonModule } from '@angular/common';
import { Component, Input } from '@angular/core';

import { ApiError, EMPTY_STRING, Issue, getMessageForIssue } from '@alfa-client/tech-shared';
import { isNil } from 'lodash-es';
import { FileIconComponent } from '../icons/file-icon/file-icon.component';
import { SpinnerIconComponent } from '../icons/spinner-icon/spinner-icon.component';

@Component({
  selector: 'ods-attachment',
  standalone: true,
  imports: [CommonModule, SpinnerIconComponent, FileIconComponent],
  styles: [':host {@apply flex}'],
  template: `<button
    class="relative flex w-full items-start gap-3 border-b border-b-grayborder bg-background-100 px-3 py-2 hover:bg-background-200"
  >
    <div class="flex-shrink">
      <ods-file-icon
        *ngIf="fileType && !isLoading && !isError"
        [fileType]="fileType"
        size="large"
      />
      <ods-file-icon *ngIf="!isLoading && isError" fileType="exclamation" size="large" />
      <ods-spinner-icon *ngIf="isLoading && !isError" size="large" />
    </div>
    <div class="flex grow flex-col items-start break-all text-start text-text">
      <p *ngIf="!isError && !isLoading && caption" class="text-sm">
        {{ caption }}
      </p>
      <p *ngIf="isError && errorCaption" class="text-sm text-error">
        {{ errorCaption }}
      </p>
      <p *ngIf="isLoading && loadingCaption" class="text-sm">
        {{ loadingCaption }}
      </p>
      <p *ngIf="description && !isError" class="text-xs text-text/65">
        {{ description }}
      </p>
      <p *ngFor="let error of errorList" class="text-xs text-text/65">
        {{ error }}
      </p>
    </div>
    <ng-content select="[close]" *ngIf="!isLoading"></ng-content>
  </button>`,
})
export class AttachmentComponent {
  @Input() caption: string = '';
  @Input() errorCaption: string = '';
  @Input() loadingCaption: string = '';
  @Input() fileType: string = '';
  @Input() description = '';
  @Input() isLoading: boolean = false;
  @Input() set error(error: ApiError) {
    if (isNil(error)) {
      this.errorList = [];
      return;
    }
    error.issues.forEach((issue: Issue) =>
      this.errorList.push(getMessageForIssue(EMPTY_STRING, issue)),
    );
  }

  protected get isError() {
    return this.errorList.length > 0;
  }

  public errorList: string[] = [];
}