carriera-intern 0.0.0

package/projects/carriera-intern-components/src/app/components/document-preview/document-preview.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DocumentPreviewComponent } from './document-preview.component';
+
+describe('DocumentPreviewComponent', () => {
+  let component: DocumentPreviewComponent;
+  let fixture: ComponentFixture<DocumentPreviewComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DocumentPreviewComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(DocumentPreviewComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/projects/carriera-intern-components/src/app/components/document-preview/document-preview.component.ts

@@ -0,0 +1,277 @@
+import {
+  Component,
+  EventEmitter,
+  Input,
+  input,
+  OnChanges,
+  OnInit,
+  Output,
+  output,
+  signal,
+  SimpleChanges,
+} from '@angular/core';
+
+//Components
+import { SvgIconComponent } from 'angular-svg-icon';
+import { InputComponent } from '../input/input.component';
+
+//Models
+import { AppFile } from '../drop-zone/models';
+import { DocumentTag } from './interfaces';
+
+//Pipes
+import { BytesToHumanReadablePipe } from '../../pipes/bytes-to-human-readable.pipe';
+import { HighlightSearchPipe } from '../input/pipes/highlight-search.pipe';
+
+//Bootstrap
+import { NgbPopoverModule, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
+
+//Modules
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+
+//Configs
+import { ButtonActionsConfig } from './utils/config';
+
+/**
+ * This component displays a preview of a document, including its name, size,
+ * and provides actions to delete, download, and tag the document.
+ */
+@Component({
+  selector: 'cai-document-preview',
+  imports: [
+    //Components
+    SvgIconComponent,
+    InputComponent,
+
+    //Forms
+    ReactiveFormsModule,
+    CommonModule,
+
+    //Pipes
+    BytesToHumanReadablePipe,
+    HighlightSearchPipe,
+    //Bootstrap
+    NgbPopoverModule,
+    NgbTooltipModule,
+  ],
+  templateUrl: './document-preview.component.html',
+  styleUrl: './document-preview.component.scss',
+})
+export class DocumentPreviewComponent implements OnChanges, OnInit {
+  //inputs
+  @Input() cdlDetailsMode: boolean = false;
+  @Input() multipleDetailsDocs: boolean = false;
+  @Input() noTagOption: boolean = false;
+  @Input() drawerMode: boolean = false;
+  @Input() isCoverDetails: boolean = false;
+  @Input() isNewTag: boolean = false;
+  @Input() hasExpired: boolean = false;
+  @Input() searchText: string | null = null;
+  tags = input<DocumentTag[]>([]);
+
+  //outputs
+  @Output() onFileNameChange = new EventEmitter<{
+    fileId?: number;
+    newFileName: string;
+  }>();
+  @Output() onDocumentPreviewClick = new EventEmitter<{ fileId: number }>();
+
+  //signals
+  public showInput = signal<boolean>(false);
+  public showDeleteModal = signal<boolean>(false);
+  public isImageLandscape = signal<boolean | null>(null);
+
+  public showTag: boolean = false;
+  public selectedTag: DocumentTag | null = null;
+
+  public inputFormControl = new FormControl();
+
+  //Configs
+  public buttonActionsConfig = ButtonActionsConfig;
+
+  constructor() {}
+
+  ngOnInit(): void {
+    this.initTag();
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {}
+
+  onButtonActionsClick(key: string) {
+    switch (key) {
+      case 'delete':
+        this.handleDelete();
+        break;
+      case 'download':
+        this.handleDownload();
+        break;
+      case 'share':
+        this.handleShare();
+        break;
+    }
+  }
+
+  get tagLabel(): string {
+    if (this.isNewTag && this.viewMode() === 'large') {
+      return 'New';
+    }
+    if (this.selectedTag?.tagName) {
+      return this.selectedTag.tagName;
+    }
+    if (this.file().categoryTag && !this.selectedTag) {
+      return this.file().categoryTag!;
+    }
+    if (
+      !this.selectedTag &&
+      !this.file().categoryTag &&
+      this.tags().length > 0
+    ) {
+      return 'No Tag';
+    }
+
+    return '';
+  }
+
+  showFileNameInput(event: Event) {
+    event.stopPropagation();
+    if (this.inputFormControl.dirty)
+      this.inputFormControl.setValue(this.file().fileName);
+    this.showInput.set(true);
+  }
+
+  hideFileNameInput() {
+    setTimeout(() => {
+      this.showInput.set(false);
+    }, 100);
+  }
+
+  handleEdit(event: any) {
+    this.hideFileNameInput();
+
+    this.onFileNameChange.emit({
+      fileId: this.file().fileId,
+      newFileName: event,
+    });
+  }
+
+  /**
+   * The application file to be displayed in the preview. This is a required input.
+   * @type {InputSignal<AppFile>}
+   */
+  file = input.required<AppFile>();
+  /**
+   * /**
+   * The view mode in whic the file is displayed. This is a required input.
+   * @type {InputSignal<string>}
+   */
+  viewMode = input.required<string>();
+  /**
+   * An output event that emits the file name when the delete action is triggered.
+   * @type {OutputEmitterRef<string>}
+   */
+  onDelete = output<string>();
+
+  /**
+   * An output event that emits the file name when the download action is triggered.
+   * @type {OutputEmitterRef<string>}
+   */
+  onDownload = output<string>();
+
+  /**
+   * Handles the delete action. Emits the `fileName` of the current `file` via the `onDelete` output.
+   */
+  handleDelete() {
+    this.showDeleteModal.set(true);
+  }
+
+  /**
+   * Cancels the delete operation and hides the confirmation modal.
+   */
+  cancelDelete() {
+    this.showDeleteModal.set(false);
+  }
+
+  /**
+   * Confirms the deletion and emits the `onDelete` event.
+   */
+  confirmDelete() {
+    this.onDelete.emit(this.file().fileName);
+    this.showDeleteModal.set(false);
+  }
+
+  /**
+   * Handles the download action. Emits the `fileName` of the current `file` via the `onDownload` output.
+   */
+  handleDownload() {
+    this.onDownload.emit(this.file().fileName);
+  }
+
+  /**
+   * Callback triggered when the tag popover is shown. Used to update internal state.
+   */
+  onTagShown() {
+    this.showTag = true;
+  }
+
+  /**
+   * Callback triggered when the tag popover is hidden. Used to update internal state.
+   */
+  onTagHidden() {
+    this.showTag = false;
+  }
+
+  /**
+   * Emits when a tag is selected or removed for the file.
+   * Contains the file name and the selected tag.
+   * @type {OutputEmitterRef<{ fileName: string; tag: DocumentTag }>}
+   */
+  onTagChange = output<{ fileName: string; tag: DocumentTag | null }>();
+
+  /**
+   * Selects a tag and emits the `onTagChange` output.
+   * @param newTag The newly selected tag string.
+   */
+  getTag(newTag: DocumentTag) {
+    this.selectedTag = newTag;
+    this.onTagChange.emit({
+      fileName: this.file().fileName,
+      tag: newTag,
+    });
+  }
+
+  initTag() {
+    this.selectedTag =
+      this.tags().find((tag) => tag.tagId === this.file().tags?.[0]) || null;
+  }
+
+  /**
+   * Removes the currently selected tag. Does not emit an event — must be called manually.
+   */
+  removeTag() {
+    this.selectedTag = null;
+    this.onTagChange.emit({
+      fileName: this.file().fileName,
+      tag: null,
+    });
+  }
+
+  /**
+   * Placeholder for handling document sharing. Currently logs the file name to the console.
+   */
+  handleShare() {
+    //TODO
+  }
+
+  handleClickOnDocumentPreview(event: Event) {
+    const target = event.target;
+    if (!(target instanceof Element)) return;
+
+    if (
+      target.closest('.document-actions, .delete-modal, .document-name, button')
+    )
+      return;
+
+    this.onDocumentPreviewClick.emit({ fileId: this.file().fileId! });
+  }
+}

package/projects/carriera-intern-components/src/app/components/document-preview/document-preview.stories.ts

@@ -0,0 +1,256 @@
+import { Meta, StoryObj } from '@storybook/angular';
+import { DocumentPreviewComponent } from './document-preview.component';
+import { DocumentTag } from './interfaces';
+
+const meta: Meta<DocumentPreviewComponent> = {
+  title: 'Components/DocumentPreview',
+  component: DocumentPreviewComponent,
+  tags: ['autodocs'],
+  decorators: [],
+  args: {
+    file: {
+      fileName: 'example.pdf',
+      baseName: 'example',
+      type: 'pdf',
+      size: 12345,
+      imagePreviewUrl: '/assets/exampledoc.png',
+      pageCount: 5,
+      file: new File([], 'example.pdf'),
+      tags: [],
+      tagChanged: false,
+      fileNameChanged: false,
+      categoryTag: null,
+    },
+    viewMode: 'small',
+  },
+};
+
+export default meta;
+type Story = StoryObj<DocumentPreviewComponent>;
+
+// --- Stories ---
+
+export const PDF: Story = {
+  args: {
+    file: {
+      fileName: 'example.pdf',
+      baseName: 'example',
+      type: 'pdf',
+      size: 12345,
+      imagePreviewUrl: '/assets/exampledoc.png',
+      pageCount: 5,
+      file: new File([], 'example.pdf'),
+      tags: [2],
+      tagChanged: false,
+      fileNameChanged: false,
+      categoryTag: null,
+    },
+    tags: [
+      { tagId: 1, tagName: 'EIN' },
+      { tagId: 2, tagName: 'Invoice' },
+      { tagId: 3, tagName: 'Truck' },
+      { tagId: 4, tagName: 'Car' },
+    ],
+    viewMode: 'small',
+    cdlDetailsMode: false,
+    drawerMode: false,
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+      onTagChange: (event: { fileName: string; tag: DocumentTag }) => {
+        args.file.tags = [event.tag.tagId];
+      },
+    },
+    template: `
+        <cai-document-preview [file]="file" [tags]="tags" [viewMode]="viewMode" [cdlDetailsMode]="cdlDetailsMode" (onTagChange)="onTagChange($event)"></cai-document-preview>
+    `,
+  }),
+};
+
+export const CDLView: Story = {
+  args: {
+    file: {
+      fileName: 'File Name Example',
+      baseName: 'example',
+      type: 'pdf',
+      size: 12345,
+      imagePreviewUrl: '/assets/exampledoc.png',
+      pageCount: 5,
+      file: new File([], 'cdl.png'),
+      tags: [],
+      tagChanged: false,
+      fileNameChanged: false,
+      categoryTag: null,
+    },
+    tags: [],
+    viewMode: 'small',
+    cdlDetailsMode: true,
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+      onTagChange: (event: { fileName: string; tag: DocumentTag }) => {
+        args.file.tags = [event.tag.tagId];
+      },
+    },
+    template: `
+        <cai-document-preview [file]="file" [tags]="tags" [viewMode]="viewMode" [cdlDetailsMode]="cdlDetailsMode" (onTagChange)="onTagChange($event)"></cai-document-preview>
+    `,
+  }),
+};
+
+export const PNG: Story = {
+  args: {
+    file: {
+      fileName: 'truck.png',
+      baseName: 'truck',
+      type: 'png',
+      size: 12345,
+      imagePreviewUrl: '/assets/truck.png',
+      pageCount: 5,
+      file: new File([], 'truck.png'),
+      tags: [],
+      tagChanged: false,
+      fileNameChanged: false,
+      categoryTag: null,
+    },
+    tags: [
+      { tagId: 1, tagName: 'EIN' },
+      { tagId: 2, tagName: 'Invoice' },
+      { tagId: 3, tagName: 'Truck' },
+      { tagId: 4, tagName: 'Car' },
+    ],
+    viewMode: 'small',
+    noTagOption: true,
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+      onTagChange: (event: { fileName: string; tag: DocumentTag }) => {
+        args.file.tags = [event.tag.tagId];
+      },
+    },
+    template: `
+        <cai-document-preview [file]="file" [tags]="tags" [viewMode]="viewMode" [noTagOption]="noTagOption" (onTagChange)="onTagChange($event)"></cai-document-preview>
+    `,
+  }),
+};
+
+export const DrawerMode: Story = {
+  args: {
+    file: {
+      fileName: 'example.png',
+      baseName: 'example',
+      type: 'png',
+      size: 12345,
+      imagePreviewUrl: '/assets/exampledoc.png',
+      pageCount: 5,
+      file: new File([], 'example.png'),
+      tags: [],
+      tagChanged: false,
+      fileNameChanged: false,
+      categoryTag: null,
+    },
+    viewMode: 'small',
+    noTagOption: false,
+    drawerMode: true,
+    tags: [
+      { tagId: 1, tagName: 'EIN' },
+      { tagId: 2, tagName: 'Invoice' },
+      { tagId: 3, tagName: 'Truck' },
+      { tagId: 4, tagName: 'Car' },
+    ],
+    hasExpired: false,
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+      onTagChange: (event: { fileName: string; tag: DocumentTag }) => {
+        args.file.tags = [event.tag.tagId];
+      },
+    },
+    template: `
+        <cai-document-preview [file]="file" [categoryTag]="categoryTag" [viewMode]="viewMode" [noTagOption]="noTagOption" [drawerMode]="drawerMode" [hasExpired]="hasExpired" [tags]="tags" (onTagChange)="onTagChange($event)"></cai-document-preview>
+    `,
+  }),
+};
+
+export const CoverView: Story = {
+  args: {
+    file: {
+      fileName: 'cdl.png',
+      baseName: 'cdl',
+      type: 'png',
+      size: 12345,
+      imagePreviewUrl: '/assets/cdl.png',
+      pageCount: 5,
+      file: new File([], 'cdl.png'),
+      tags: [],
+      tagChanged: false,
+      fileNameChanged: false,
+      categoryTag: null,
+    },
+    viewMode: 'small',
+    noTagOption: false,
+    isCoverDetails: true,
+    hasExpired: false,
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+      onTagChange: (event: { fileName: string; tag: DocumentTag }) => {
+        args.file.tags = [event.tag.tagId];
+      },
+    },
+    template: `
+      <cai-document-preview [file]="file" [viewMode]="viewMode" [noTagOption]="noTagOption" [hasExpired]="hasExpired" [isCoverDetails]="isCoverDetails" (onTagChange)="onTagChange($event)"></cai-document-preview>
+    `,
+  }),
+};
+
+export const LargeViewDocument: Story = {
+  args: {
+    file: {
+      fileName: 'example.pdf',
+      baseName: 'example',
+      type: 'pdf',
+      size: 12345,
+      imagePreviewUrl: '/assets/exampledoc.png',
+      pageCount: 5,
+      file: new File([], 'example.pdf'),
+      tags: [1],
+      tagChanged: false,
+      fileNameChanged: false,
+      categoryTag: null,
+    },
+    viewMode: 'large',
+    tags: [
+      { tagId: 1, tagName: 'EIN' },
+      { tagId: 2, tagName: 'Invoice' },
+      { tagId: 3, tagName: 'Truck' },
+      { tagId: 4, tagName: 'Car' },
+    ],
+    hasExpired: false,
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+      onTagChange: (event: { fileName: string; tag: DocumentTag }) => {
+        args.file.tags = [event.tag.tagId];
+      },
+    },
+    template: `
+      <div display="flex" justify-content="center" align-items="center">
+          <cai-document-preview
+            [file]="file"
+            [viewMode]="viewMode"
+            [cdlDetailsMode]="cdlDetailsMode"
+            [tags]="tags"
+            [hasExpired]="hasExpired"
+            (onTagChange)="onTagChange($event)"
+          ></cai-document-preview>
+        </div>
+      `,
+  }),
+};

package/projects/carriera-intern-components/src/app/components/document-preview/interfaces/document-tag.interface.ts

@@ -0,0 +1,4 @@
+export interface DocumentTag {
+  tagId: number;
+  tagName: string;
+}

package/projects/carriera-intern-components/src/app/components/document-preview/interfaces/index.ts

@@ -0,0 +1 @@
+export * from './document-tag.interface';

package/projects/carriera-intern-components/src/app/components/document-preview/utils/config/button-actions.config.ts

@@ -0,0 +1,30 @@
+export class ButtonActionsConfig {
+  static actions = [
+    {
+      key: 'label',
+      icon: 'cai-label',
+      label: 'Tag',
+      tooltipClass: 'tooltip tooltip-m-b-2',
+      onClick: null,
+      isPopover: true,
+    },
+    {
+      key: 'share',
+      icon: 'cai-share',
+      label: 'Share',
+      tooltipClass: 'tooltip tooltip-m-b-2',
+    },
+    {
+      key: 'download',
+      icon: 'cai-download',
+      label: 'Download',
+      tooltipClass: 'tooltip tooltip-m-b-2',
+    },
+    {
+      key: 'delete',
+      icon: 'cai-delete',
+      label: 'Delete',
+      tooltipClass: 'tooltip tooltip-bg-red-500 tooltip-m-b-2',
+    },
+  ];
+}

package/projects/carriera-intern-components/src/app/components/document-preview/utils/config/index.ts

@@ -0,0 +1 @@
+export * from './button-actions.config';