carriera-intern 0.0.0 → 1.1.76

package/projects/carriera-intern-components/src/app/components/dispatch-location/dispatch-location.stories.ts

@@ -1,184 +0,0 @@
-import { Meta, StoryObj } from '@storybook/angular';
-
-// Components
-import { DispatchLocationComponent } from './dispatch-location.component';
-
-const meta: Meta<DispatchLocationComponent> = {
-  title: 'Components/DispatchLocation',
-  component: DispatchLocationComponent,
-  argTypes: {
-    locationData: {
-      control: 'object',
-      defaultValue: null,
-    },
-  },
-  args: {
-    locationData: null,
-    isEditable: false,
-  },
-  globals: {
-    backgrounds: { value: 'table' },
-  },
-};
-
-export default meta;
-type Story = StoryObj<DispatchLocationComponent>;
-
-// --- Stories ---
-
-export const Default: Story = {
-  args: {
-    locationData: null,
-    isEditable: true,
-  },
-
-  render: (args) => ({
-    props: {
-      ...args,
-    },
-    template: `
-    <div style="display: flex; gap: 2px; flex-direction: column;">
-        <div style="display: flex; gap: 2px;">
-            <div style="width: 80px; height: 34px; border-radius: 3px; background-color: #F7F7F7;"></div>
-            <div style="width: 200px; height: 34px; border-radius: 3px; background-color: #F7F7F7;"></div>
-            <div style="width: 240px; height: 34px; border-radius: 3px; background-color: #F7F7F7;"></div>
-            <div style="width: auto; min-width: 0; flex: 1; height: 34px; border-radius: 3px; background-color: #F7F7F7;"></div>
-
-        </div>
-        <div style="display: flex; gap: 2px;">
-            <div style="width: 80px; height: 34px; border-radius: 3px; background-color: #F7F7F7;"></div>
-            <div style="width: 200px; height: 34px; border-radius: 3px; background-color: #F7F7F7;"></div>
-            <div style="width: 240px; height: 34px; border-radius: 3px; background-color: #F7F7F7;"></div>
-            <div style="width: auto; min-width: 0; flex: 1; height: 34px; border-radius: 3px; background-color: #F7F7F7;"></div>
-
-        </div>
-        <div style="display: flex; gap: 2px;">
-            <div style="width: 80px; height: 34px; border-radius: 3px; background-color: #F7F7F7;"></div>
-            <div style="width: 200px; position: relative;">
-              <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
-                  <cai-dispatch-location [locationData]="locationData" [isEditable]="isEditable">
-                  </cai-dispatch-location>
-              </div>
-              <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #F7F7F7; border-radius: 3px;"></div>
-            </div>
-            <div style="width: 240px; height: 34px; border-radius: 3px; background-color: #F7F7F7;"></div>
-            <div style="width: auto; min-width: 0; flex: 1; height: 34px; border-radius: 3px; background-color: #F7F7F7;"></div>
-
-        </div>
-        <div style="display: flex; gap: 2px;">
-            <div style="width: 80px; height: 34px; border-radius: 3px; background-color: #F7F7F7;"></div>
-            <div style="width: 200px; height: 34px; border-radius: 3px; background-color: #F7F7F7;"></div>
-            <div style="width: 240px; height: 34px; border-radius: 3px; background-color: #F7F7F7;"></div>
-            <div style="width: auto; min-width: 0; flex: 1; height: 34px; border-radius: 3px; background-color: #F7F7F7;"></div>
-
-        </div>
-    </div>
-    `,
-  }),
-};
-
-export const WithData: Story = {
-  args: {
-    locationData: {
-      city: 'Jacksonville',
-      stateShortName: 'FL',
-    },
-    highlightedLocationString: 'Jacksonville, FL',
-    isParking: true,
-    lastStatusData: {
-      hours: 0,
-      minutes: 0,
-      seconds: 0,
-    },
-    isEditable: true,
-  },
-
-  render: (args) => ({
-    props: {
-      ...args,
-    },
-    template: `
-    <div style="display: flex; gap: 2px; flex-direction: column;">
-        <div style="display: flex; gap: 2px;">
-            <div style="width: 80px; height: 34px; border-radius: 3px; background-color: #F7F7F7;"></div>
-            <div style="width: 200px; height: 34px; border-radius: 3px; background-color: #F7F7F7;"></div>
-            <div style="width: 240px; height: 34px; border-radius: 3px; background-color: #F7F7F7;"></div>
-            <div style="width: auto; min-width: 0; flex: 1; height: 34px; border-radius: 3px; background-color: #F7F7F7;"></div>
-        </div>
-        <div style="display: flex; gap: 2px;">
-            <div style="width: 80px; height: 34px; border-radius: 3px; background-color: #F7F7F7;"></div>
-            <div style="width: 200px; position: relative;">
-              <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;">
-                  <cai-dispatch-location 
-                    [locationData]="locationData" 
-                    [highlightedLocationString]="highlightedLocationString"
-                    [isParking]="isParking"
-                    [lastStatusData]="lastStatusData"
-                    [isEditable]="isEditable"
-                  >
-                  </cai-dispatch-location>
-              </div>
-              <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #F7F7F7; border-radius: 3px;"></div>
-            </div>
-            <div style="width: 240px; height: 34px; border-radius: 3px; background-color: #F7F7F7;"></div>
-            <div style="width: auto; min-width: 0; flex: 1; height: 34px; border-radius: 3px; background-color: #F7F7F7;"></div>
-        </div>
-        <div style="display: flex; gap: 2px;">
-            <div style="width: 80px; height: 34px; border-radius: 3px; background-color: #F7F7F7;"></div>
-            <div style="width: 200px; height: 34px; border-radius: 3px; background-color: #F7F7F7;"></div>
-            <div style="width: 240px; height: 34px; border-radius: 3px; background-color: #F7F7F7;"></div>
-            <div style="width: auto; min-width: 0; flex: 1; height: 34px; border-radius: 3px; background-color: #F7F7F7;"></div>
-        </div>
-    </div>
-    `,
-  }),
-};
-
-export const WithExternalFocusButton: Story = {
-  args: {
-    locationData: null,
-    isEditable: true,
-  },
-
-  render: (args) => ({
-    props: {
-      ...args,
-      focusComponent(component: any) {
-        component.focus();
-      },
-      onBlur() {
-        console.log('onBlur');
-      },
-    },
-    template: `
-    <div style="display: flex; gap: 16px; flex-direction: column;">
-      <button 
-        style="padding: 8px 16px; background-color: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer;"
-        (click)="focusComponent(dispatchLocationRef)"
-      >
-        Focus Location Input
-      </button>
-      
-      <div style="display: flex; gap: 2px; flex-direction: column;">
-        <div style="display: flex; gap: 2px;">
-          <div style="width: 80px; height: 34px; border-radius: 3px; background-color: #F7F7F7;"></div>
-          <div style="width: 200px; position: relative;">
-            <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;">
-              <cai-dispatch-location 
-                #dispatchLocationRef
-                [locationData]="locationData" 
-                [isEditable]="isEditable"
-                (onBlur)="onBlur()"
-              >
-              </cai-dispatch-location>
-            </div>
-            <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #F7F7F7; border-radius: 3px;"></div>
-          </div>
-          <div style="width: 240px; height: 34px; border-radius: 3px; background-color: #F7F7F7;"></div>
-          <div style="width: auto; min-width: 0; flex: 1; height: 34px; border-radius: 3px; background-color: #F7F7F7;"></div>
-        </div>
-      </div>
-    </div>
-    `,
-  }),
-};

package/projects/carriera-intern-components/src/app/components/dispatch-location/interfaces/index.ts

@@ -1 +0,0 @@
-export * from './last-status-data.interface';

package/projects/carriera-intern-components/src/app/components/dispatch-location/interfaces/last-status-data.interface.ts

@@ -1,6 +0,0 @@
-export interface ILastStatusData {
-  hours: number;
-  minutes: number;
-  days?: number;
-  seconds?: number;
-}

package/projects/carriera-intern-components/src/app/components/dispatch-location/pipes/last-status-format.pipe.ts

@@ -1,35 +0,0 @@
-// Angular
-import { Pipe, PipeTransform } from '@angular/core';
-
-// Interfaces
-import { ILastStatusData } from '../interfaces';
-
-@Pipe({
-  name: 'lastStatusFormat',
-})
-export class LastStatusFormatPipe implements PipeTransform {
-  transform(value: ILastStatusData | null | undefined): string {
-    if (!value) {
-      return '';
-    }
-
-    const { days, hours, minutes } = value;
-
-    // If days and hours are present
-    if (days && days > 0) {
-      return `${days}d ${hours}h ago`;
-    }
-
-    // If hours and minutes are present
-    if (hours && hours > 0) {
-      return `${hours}h ${minutes}m ago`;
-    }
-
-    // If only minutes are present
-    if (minutes && minutes > 0) {
-      return `${minutes} min ago`;
-    }
-
-    return 'Just now';
-  }
-}

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

@@ -1,229 +0,0 @@
-@let fileType = file().type; @let fileSize = file().size;
-@let pdf = fileType === "pdf";
-@let video = ["avi", "mp4", "mov"].includes(fileType);
-@let image = ["jpg", "png", "jpeg", "gif"].includes(fileType);
-@let pageCount = file().pageCount;
-@let imagePreviewUrl = file().imagePreviewUrl;
-@let showTagModal = showTag === true; @let selected = !!this.selectedTag;
-@let largeView = viewMode() === "large";
-@let categoryTag = file().categoryTag;
-
-<div
-  #document
-  class="document"
-  [class.noTouch]="!largeView && showDeleteModal()"
-  [class.delete-modal-large]="largeView && showDeleteModal()"
-  [class.buttonsVisibility]="showTagModal"
-  [class.large-view]="largeView"
-  [class.cdl-details-mode]="cdlDetailsMode"
-  [class.multiple-details-docs]="cdlDetailsMode && multipleDetailsDocs"
-  [class.document-portrait]="cdlDetailsMode && !isImageLandscape()"
-  [class.document-landscape]="cdlDetailsMode && isImageLandscape()"
-  [class.drawerMode]="drawerMode"
-  [class.is-cover-details]="isCoverDetails"
-  [class.has-expired]="hasExpired && !isCoverDetails"
-  [class.has-expired-cover-details]="hasExpired && isCoverDetails"
-  (click)="handleClickOnDocumentPreview($event)"
->
-  <div class="document-image-container">
-    <img [src]="imagePreviewUrl" class="document-image" draggable="false" />
-    <div class="badge-tag-container">
-      <div class="badges">
-        <span
-          [ngClass]="{
-            'category-tag': categoryTag && !selected,
-            tag: !selected && !categoryTag && !!tags().length && !largeView,
-            'user-tag': selected,
-            'new-tag': isNewTag && largeView,
-          }"
-        >
-          {{ tagLabel }}
-        </span>
-      </div>
-      <div class="badges" [class.bottomTags]="largeView">
-        <p
-          class="badge file-type"
-          [class]="{
-            pdf: pdf,
-            video: video,
-            image: image,
-          }"
-        >
-          {{ fileType }}
-        </p>
-        <p class="badge page-count">
-          @if (pdf && pageCount) {
-            <span>{{ pageCount }} p.</span>
-          }
-          <span class="file-size"> {{ fileSize | bytesToHumanReadable }}</span>
-        </p>
-      </div>
-    </div>
-    @if (showDeleteModal()) {
-      <ng-container *ngTemplateOutlet="deleteModal"></ng-container>
-    }
-  </div>
-  <div class="document-name" (click)="showFileNameInput($event)">
-    @if (!showInput()) {
-      <p
-        class="file-name"
-        [innerHTML]="file().fileName | highlightSearch: searchText : true"
-      ></p>
-    }
-    @if (showInput()) {
-      <div class="input" (click)="$event.stopPropagation()">
-        <cai-input
-          [formControl]="inputFormControl"
-          [config]="{
-            type: 'text',
-            name: file().fileName,
-            isEdit: true,
-            autofocus: true,
-            placeholderBehavior: 'hidden',
-          }"
-          (onBlur)="hideFileNameInput()"
-          (onClear)="hideFileNameInput()"
-          (onOptionAdded)="handleEdit($event)"
-        ></cai-input>
-      </div>
-    }
-  </div>
-  <div class="document-actions" [class.noTagOption]="noTagOption">
-    @if (!largeView) {
-      @if (!!tags().length) {
-        <div class="document-actions-container label">
-          <button
-            class="document-actions-button"
-            [class.tagIcon]="showTagModal"
-            [ngbPopover]="tagPopover"
-            popoverClass="tagPopover"
-            positionTarget="document"
-            autoClose="outside inside"
-            container="body"
-            [openDelay]="20"
-            (shown)="onTagShown()"
-            (hidden)="onTagHidden()"
-            placement="right-top left-top"
-          >
-            <svg-icon
-              name="cai-label"
-              ngbTooltip="Tag"
-              [placement]="drawerMode ? 'bottom' : 'top'"
-              container="body"
-              triggers="mouseenter:mouseleave"
-              tooltipClass="tooltip tooltip-m-b-2"
-              class="icon"
-            ></svg-icon>
-          </button>
-        </div>
-      }
-      <div class="document-actions-container">
-        <button
-          class="document-actions-button download"
-          (click)="handleDownload()"
-        >
-          <svg-icon
-            name="cai-download"
-            ngbTooltip="Download"
-            [placement]="drawerMode ? 'bottom' : 'top'"
-            container="body"
-            triggers="mouseenter:mouseleave"
-            tooltipClass="tooltip tooltip-m-b-2"
-            class="icon"
-          ></svg-icon>
-        </button>
-        <button class="document-actions-button delete" (click)="handleDelete()">
-          <svg-icon
-            name="cai-delete"
-            ngbTooltip="Delete"
-            [placement]="drawerMode ? 'bottom' : 'top'"
-            container="body"
-            triggers="mouseenter:mouseleave"
-            tooltipClass="tooltip tooltip-bg-red-500 tooltip-m-b-2"
-            class="icon"
-          ></svg-icon>
-        </button>
-      </div>
-    }
-    @if (largeView) {
-      <ng-container *ngTemplateOutlet="buttonsTemplate"></ng-container>
-    }
-  </div>
-</div>
-
-<!-- Tag Popover -->
-<ng-template #tagPopover>
-  <div class="tag-popover">
-    <div class="dropdown-list">
-      @if (selectedTag?.tagId) {
-        <div class="tag-header" (click)="removeTag()">
-          <div class="header">
-            <span class="tag-header-text">REMOVE TAG</span>
-            <svg-icon name="cai-minus" class="minus-icon"></svg-icon>
-          </div>
-          <div class="divider"></div>
-        </div>
-      }
-      <div class="tag-list">
-        @for (tag of tags(); track $index) {
-          <div
-            class="tag-item"
-            (click)="getTag(tag)"
-            [class.selectedDesign]="selectedTag?.tagId === tag.tagId"
-          >
-            <span class="tag-text">{{ tag.tagName }}</span>
-            <svg-icon name="cai-checkmark" class="checkmark-icon"></svg-icon>
-          </div>
-        }
-      </div>
-    </div>
-  </div>
-</ng-template>
-
-<!-- Delete Modal -->
-<ng-template #deleteModal>
-  <div class="delete-modal">
-    <div class="delete-header">
-      <span class="delete-header-text"
-        >Are you sure you want to delete this file?</span
-      >
-    </div>
-    <div class="modal-buttons">
-      <button class="delete-button" (click)="confirmDelete()">Delete</button>
-      <button class="cancel-button" (click)="cancelDelete()">Cancel</button>
-    </div>
-  </div>
-</ng-template>
-
-<!-- Buttons Template -->
-<ng-template #buttonsTemplate>
-  <div #buttonsContainer class="document-actions-container">
-    @for (action of buttonActionsConfig.actions; track action.key) {
-      @let labelKey = action.key === "label";
-      <button
-        class="document-actions-button {{ action.key }}"
-        [class.tagIcon]="labelKey && showTagModal"
-        [ngbPopover]="labelKey ? tagPopover : null"
-        popoverClass="labelKey && tagPopover"
-        autoClose="outside inside"
-        container="body"
-        [positionTarget]="labelKey ? buttonsContainer : undefined"
-        [openDelay]="20"
-        (shown)="onTagShown()"
-        (hidden)="onTagHidden()"
-        placement="right-top left-top"
-        (click)="onButtonActionsClick(action.key)"
-      >
-        <svg-icon
-          [name]="action.icon"
-          [ngbTooltip]="action.label"
-          placement="left"
-          container="body"
-          triggers="mouseenter:mouseleave"
-          [tooltipClass]="action.tooltipClass"
-          class="icon"
-        ></svg-icon>
-      </button>
-    }
-  </div>
-</ng-template>