carriera-intern 0.0.0 → 1.1.76

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

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

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

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

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

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

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

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

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

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