carriera-intern 0.0.0

package/projects/carriera-intern-components/src/app/components/toolbar-dropdown/interval-dropdown.stories.ts

@@ -0,0 +1,77 @@
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+
+import { ReactiveFormsModule } from '@angular/forms';
+import { IntervalDropdownComponent } from './interval-dropdown.component';
+
+const meta: Meta<IntervalDropdownComponent> = {
+  title: 'Components/ToolbarDropdown',
+  component: IntervalDropdownComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [ReactiveFormsModule],
+    }),
+  ],
+  argTypes: {},
+  args: {},
+};
+
+export default meta;
+type Story = StoryObj<IntervalDropdownComponent>;
+
+// --- Stories ---
+
+export const Dashboard: Story = {
+  args: {},
+  render: (args) => ({
+    props: {
+      ...args,
+      options: [
+        { id: 1, name: 'Today' },
+        { id: 2, name: 'WTD' },
+        { id: 3, name: 'MTD' },
+        { id: 4, name: 'QTD' },
+        { id: 5, name: 'YTD' },
+        { id: 6, name: 'All Time' },
+        { id: 7, name: 'Custom' },
+      ],
+      selectedOption: { id: 6, name: 'All Time' },
+      onSelectionChange: (option: any) => {
+        console.log('Selection changed to:', option);
+      },
+      companyDays: 30,
+    },
+    template: `
+    <div style="width: 126px; margin-left: auto; margin-right: auto;">
+      <cai-interval-dropdown [options]="options" [selectedOption]="selectedOption" [companyDays]="companyDays" (onSelectionChange)="onSelectionChange($event)"></cai-interval-dropdown>
+    </div>
+    `,
+  }),
+};
+
+export const Custom: Story = {
+  args: {},
+  render: (args) => ({
+    props: {
+      ...args,
+      options: [
+        { id: 1, name: 'Today' },
+        { id: 2, name: 'WTD' },
+        { id: 3, name: 'MTD' },
+        { id: 4, name: 'QTD' },
+        { id: 5, name: 'YTD' },
+        { id: 6, name: 'All Time' },
+        { id: 7, name: 'Custom' },
+      ],
+      selectedOption: { id: 7, name: 'Custom' },
+      onSelectionChange: (option: any) => {
+        console.log('Selection changed to:', option);
+      },
+      companyDays: 30,
+    },
+    template: `
+    <div style="width: 126px; margin-left: auto; margin-right: auto;">
+      <cai-interval-dropdown [options]="options" [selectedOption]="selectedOption" [companyDays]="companyDays" (onSelectionChange)="onSelectionChange($event)"></cai-interval-dropdown>
+    </div>
+    `,
+  }),
+};

package/projects/carriera-intern-components/src/app/components/toolbar-dropdown/pipes/dropdown-filter-input-config.pipe.ts

@@ -0,0 +1,52 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+// interfaces
+import { CaiDateTimeConfig } from '../../input-datetime-picker/interfaces';
+
+@Pipe({
+  name: 'dropdownFilterInputConfig',
+})
+export class DropdownFilterInputConfigPipe implements PipeTransform {
+  transform({ configType }: { configType: string }): CaiDateTimeConfig {
+    switch (configType) {
+      case 'from':
+        return {
+          name: 'datepicker',
+          type: 'text',
+          label: 'From',
+          isDropdown: true,
+          placeholderIcon: 'date',
+          isRequired: true,
+          customClass: 'datetimeclass',
+          inverse: true,
+          size: 22,
+          hasStroke: true,
+        };
+      case 'to':
+        return {
+          name: 'datepicker',
+          type: 'text',
+          label: 'To',
+          isDropdown: true,
+          placeholderIcon: 'date',
+          isRequired: true,
+          customClass: 'datetimeclass',
+          inverse: true,
+          size: 22,
+          hasStroke: true,
+        };
+    }
+    return {
+      name: 'datepicker',
+      type: 'text',
+      label: 'Date',
+      isDropdown: true,
+      placeholderIcon: 'date',
+      isRequired: true,
+      customClass: 'datetimeclass',
+      inverse: true,
+      size: 22,
+      hasStroke: true,
+    };
+  }
+}

package/projects/carriera-intern-components/src/app/components/toolbar-dropdown/utils/helpers/interval-dropdown.helper.ts

@@ -0,0 +1,193 @@
+import {
+  AbstractControl,
+  FormControl,
+  FormGroup,
+  UntypedFormGroup,
+  ValidationErrors,
+  ValidatorFn,
+  Validators,
+} from '@angular/forms';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+export class IntervalDropdownHelper {
+  // Cache validators to avoid recreation
+  private static notInFutureValidator: ValidatorFn | null = null;
+  private static companyStartValidators = new Map<number, ValidatorFn>();
+
+  static createFormGroup(companyDays: number | null): UntypedFormGroup {
+    const formGroup = new FormGroup({
+      from: new FormControl({ value: null, disabled: false }, [
+        Validators.required,
+      ]),
+      to: new FormControl({ value: null, disabled: false }, [
+        Validators.required,
+      ]),
+    });
+
+    // Create destroy subject for proper cleanup
+    const destroy$ = new Subject<void>();
+
+    // Store destroy subject on form group for cleanup
+    (formGroup as any).__destroy$ = destroy$;
+
+    if (companyDays) {
+      const companyStartDate = new Date();
+      companyStartDate.setDate(companyStartDate.getDate() - companyDays);
+
+      const notBeforeCompanyStartValidator =
+        this.getOrCreateNotBeforeCompanyStartValidator(companyStartDate);
+      const notInFutureValidator = this.getOrCreateNotInFutureValidator();
+      const toNotBeforeFromValidator =
+        this.createToNotBeforeFromValidator(formGroup);
+
+      formGroup
+        .get('from')
+        ?.setValidators([
+          Validators.required,
+          notBeforeCompanyStartValidator,
+          notInFutureValidator,
+        ]);
+      formGroup
+        .get('to')
+        ?.setValidators([
+          Validators.required,
+          notBeforeCompanyStartValidator,
+          notInFutureValidator,
+          toNotBeforeFromValidator,
+        ]);
+    } else {
+      // Even without company days, still validate against future dates
+      const notInFutureValidator = this.getOrCreateNotInFutureValidator();
+      const toNotBeforeFromValidator =
+        this.createToNotBeforeFromValidator(formGroup);
+
+      formGroup
+        .get('from')
+        ?.setValidators([Validators.required, notInFutureValidator]);
+      formGroup
+        .get('to')
+        ?.setValidators([
+          Validators.required,
+          notInFutureValidator,
+          toNotBeforeFromValidator,
+        ]);
+    }
+
+    // Add cross-field validation: when 'from' changes, re-validate 'to'
+    // Use takeUntil to prevent memory leaks
+    formGroup
+      .get('from')
+      ?.valueChanges.pipe(takeUntil(destroy$))
+      .subscribe(() => {
+        formGroup.get('to')?.updateValueAndValidity();
+      });
+
+    return formGroup;
+  }
+
+  /**
+   * Cleanup method to prevent memory leaks
+   * Call this when the form group is no longer needed
+   */
+  static destroyFormGroup(formGroup: UntypedFormGroup): void {
+    const destroy$ = (formGroup as any).__destroy$;
+    if (destroy$) {
+      destroy$.next();
+      destroy$.complete();
+    }
+  }
+
+  /**
+   * Get or create cached not-in-future validator
+   */
+  private static getOrCreateNotInFutureValidator(): ValidatorFn {
+    if (!this.notInFutureValidator) {
+      this.notInFutureValidator = this.createNotInFutureValidator();
+    }
+    return this.notInFutureValidator;
+  }
+
+  /**
+   * Get or create cached company start validator
+   */
+  private static getOrCreateNotBeforeCompanyStartValidator(
+    companyStartDate: Date
+  ): ValidatorFn {
+    const dateKey = companyStartDate.getTime();
+    if (!this.companyStartValidators.has(dateKey)) {
+      this.companyStartValidators.set(
+        dateKey,
+        this.createNotBeforeCompanyStartValidator(companyStartDate)
+      );
+    }
+    return this.companyStartValidators.get(dateKey)!;
+  }
+
+  /**
+   * Clear validator cache (useful for testing or memory management)
+   */
+  static clearValidatorCache(): void {
+    this.notInFutureValidator = null;
+    this.companyStartValidators.clear();
+  }
+
+  private static createNotBeforeCompanyStartValidator(
+    companyStartDate: Date
+  ): ValidatorFn {
+    return (control: AbstractControl): ValidationErrors | null => {
+      if (!control.value) {
+        return null; // Let required validator handle empty values
+      }
+
+      const selectedDate = new Date(control.value);
+      if (selectedDate < companyStartDate) {
+        return { beforeCompanyStart: true };
+      }
+
+      return null;
+    };
+  }
+
+  private static createNotInFutureValidator(): ValidatorFn {
+    return (control: AbstractControl): ValidationErrors | null => {
+      if (!control.value) {
+        return null; // Let required validator handle empty values
+      }
+
+      const selectedDate = new Date(control.value);
+      const today = new Date();
+      today.setHours(23, 59, 59, 999); // End of today
+
+      if (selectedDate > today) {
+        return { inFuture: true };
+      }
+
+      return null;
+    };
+  }
+
+  private static createToNotBeforeFromValidator(
+    formGroup: FormGroup
+  ): ValidatorFn {
+    return (control: AbstractControl): ValidationErrors | null => {
+      if (!control.value) {
+        return null; // Let required validator handle empty values
+      }
+
+      const fromDate = formGroup.get('from')?.value;
+      if (!fromDate) {
+        return null; // Wait for from date to be set
+      }
+
+      const toDate = new Date(control.value);
+      const fromDateObj = new Date(fromDate);
+
+      if (toDate < fromDateObj) {
+        return { toBeforeFrom: true };
+      }
+
+      return null;
+    };
+  }
+}

package/projects/carriera-intern-components/src/app/directives/hover-svg-directives.ts

@@ -0,0 +1,49 @@
+import {
+  Directive,
+  ElementRef,
+  HostListener,
+  Input,
+  Renderer2,
+} from "@angular/core";
+
+@Directive({
+  selector: "[appHoverSvg]",
+  standalone: true,
+})
+export class HoverSvgDirective {
+  @Input() set fill(value: string | null | undefined) {
+    if (value) {
+      this._fill = value;
+
+      this.renderer2.setStyle(this.elRef.nativeElement, "fill", this._fill);
+    }
+  }
+
+  @Input() set fillHover(value: string | null | undefined) {
+    if (value) {
+      this._fillHover = value;
+    }
+  }
+
+  public _fill: string = "";
+  public _fillHover: string = "";
+
+  constructor(
+    private elRef: ElementRef,
+    private renderer2: Renderer2
+  ) {}
+
+  @HostListener("mouseover")
+  onMouseOver() {
+    this.renderer2.setStyle(
+      this.elRef.nativeElement,
+      "fill",
+      this._fillHover ? this._fillHover : this._fill
+    );
+  }
+
+  @HostListener("mouseleave")
+  onMouseLeave() {
+    this.renderer2.setStyle(this.elRef.nativeElement, "fill", this._fill);
+  }
+}

package/projects/carriera-intern-components/src/app/directives/index.ts

@@ -0,0 +1,3 @@
+export * from './hover-svg-directives';
+export * from './infinite-scroll.directive';
+export * from './intersection-observer.directive';

package/projects/carriera-intern-components/src/app/directives/infinite-scroll.directive.ts

@@ -0,0 +1,64 @@
+import {
+  Directive,
+  ElementRef,
+  EventEmitter,
+  HostListener,
+  Input,
+  Output,
+} from '@angular/core';
+
+@Directive({
+  selector: '[caiInfiniteScroll]',
+  standalone: true,
+})
+export class InfiniteScrollDirective {
+  @Input() scrollThreshold: number = 100; // Distance from bottom in pixels
+  @Input() debounceTime: number = 100; // Debounce time in milliseconds
+  @Output() scrolledToBottom = new EventEmitter<void>();
+
+  private debounceTimer: ReturnType<typeof setTimeout> | undefined;
+  private isLoading = false;
+
+  constructor(private elementRef: ElementRef) {}
+
+  @HostListener('scroll', ['$event'])
+  onScroll(event: Event): void {
+    if (this.isLoading) return;
+
+    // Clear previous timer
+    if (this.debounceTimer) {
+      clearTimeout(this.debounceTimer);
+    }
+
+    // Set debounce timer
+    this.debounceTimer = setTimeout(() => {
+      this.checkScrollPosition(event);
+    }, this.debounceTime);
+  }
+
+  private checkScrollPosition(event: Event): void {
+    const element = event.target as HTMLElement;
+    const scrollTop = element.scrollTop;
+    const scrollHeight = element.scrollHeight;
+    const clientHeight = element.clientHeight;
+
+    // Calculate distance from bottom
+    const distanceFromBottom = scrollHeight - (scrollTop + clientHeight);
+
+    // Check if we're within the threshold distance from bottom
+    if (distanceFromBottom <= this.scrollThreshold) {
+      this.isLoading = true;
+      this.scrolledToBottom.emit();
+
+      // Reset loading state after a short delay to prevent rapid firing
+      setTimeout(() => {
+        this.isLoading = false;
+      }, 500);
+    }
+  }
+
+  // Public method to reset loading state (useful when new data is loaded)
+  public resetLoadingState(): void {
+    this.isLoading = false;
+  }
+}

package/projects/carriera-intern-components/src/app/directives/intersection-observer.directive.ts

@@ -0,0 +1,50 @@
+import {
+  Directive,
+  ElementRef,
+  EventEmitter,
+  Input,
+  Output,
+  OnInit,
+  OnDestroy,
+} from '@angular/core';
+
+@Directive({
+  selector: '[caiIntersectionObserver]',
+  standalone: true,
+})
+export class IntersectionObserverDirective implements OnInit, OnDestroy {
+  @Input() threshold: number = 0.1; // Percentage of element that must be visible (0.0 to 1.0)
+  @Input() rootMargin: string = '0px'; // Margin around the root
+  @Output() inView = new EventEmitter<boolean>();
+
+  private observer: IntersectionObserver | null = null;
+
+  constructor(private elementRef: ElementRef) {}
+
+  ngOnInit(): void {
+    this.createObserver();
+  }
+
+  ngOnDestroy(): void {
+    if (this.observer) {
+      this.observer.disconnect();
+    }
+  }
+
+  private createObserver(): void {
+    const options: IntersectionObserverInit = {
+      threshold: this.threshold,
+      rootMargin: this.rootMargin,
+    };
+
+    this.observer = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          this.inView.emit(true);
+        }
+      });
+    }, options);
+
+    this.observer.observe(this.elementRef.nativeElement);
+  }
+}

package/projects/carriera-intern-components/src/app/enums/alignment.enum.ts

@@ -0,0 +1,4 @@
+export enum eAlignment {
+  LEFT = 'left',
+  RIGHT = 'right',
+}

package/projects/carriera-intern-components/src/app/enums/general-actions.enum.ts

@@ -0,0 +1,71 @@
+export enum eGeneralActions {
+    ADD = 'Add',
+    ADD_LOWERCASE = 'add',
+    ADD_NEW_ITEM = 'Add New Item',
+    UPDATE = 'Update',
+    UPDATE_LOWERCASE = 'update',
+    DELETE = 'Delete',
+    DELETE_LOWERCASE = 'delete',
+    EDIT = 'Edit',
+    EDIT_LOWERCASE = 'edit',
+    EDIT_UPPERCASE = 'EDIT',
+
+    SAVE = 'Save',
+    SAVE_LOWERCASE = 'save',
+    CANCEL = 'Cancel',
+    CANCEL_LOWERCASE = 'cancel',
+    ENTER = 'Enter',
+    ESCAPE = 'Escape',
+    CONFIRM = 'Confirm',
+    CONFIRM_LOWERCASE = 'confirm',
+    SET = 'Set',
+    SET_LOWERCASE = 'set',
+    REMOVE = 'Remove',
+    REMOVE_LOWERCASE = 'remove',
+
+    SELECT = 'Select',
+    SELECT_LOWERCASE = 'select',
+    SEARCH = 'Search',
+    SEARCH_LOWERCASE = 'search',
+
+    SELECT_ALL = 'Select All',
+    SELECT_REMAINING = 'Select Remaining',
+    CLEAR_SELECTED = 'Clear Selected',
+
+    ACTIVATE = 'Activate',
+    ACTIVATE_LOWERCASE = 'activate',
+    DEACTIVATE = 'deactivate',
+    DEACTIVATE_LOWERCASE = 'deactivate',
+
+    CLOSE = 'Close',
+    CLOSE_LOWERCASE = 'close',
+    CLOSE_UPPERCASE = 'CLOSE',
+    OPEN = 'Open',
+    OPEN_LOWERCASE = 'open',
+
+    NEXT = 'Next',
+    NEXT_LOWERCASE = 'next',
+    PREVIOUS = 'Previous',
+    PREVIOUS_LOWERCASE = 'previous',
+
+    CLEAR = 'Clear',
+    CLEAR_LOWERCASE = 'clear',
+    CLEAR_ALL = 'Clear All',
+
+    SHOW_MORE = 'show more',
+
+    OPEN_MODAL = 'open-modal',
+
+    EXPAND = 'Expand',
+    EXPAND_LOWERCASE = 'expand',
+    EXPAND_UPPERCASE = 'EXPAND',
+
+    COLLAPSE = 'Collapse',
+    COLLAPSE_LOWERCASE = 'collapse',
+    COLLAPSE_UPPERCASE = 'COLLAPSE',
+
+    SORT_BY = 'Sort By',
+
+    COPY = 'Copy',
+    COPIED = 'Copied',
+}

package/projects/carriera-intern-components/src/app/enums/index.ts

@@ -0,0 +1,3 @@
+export * from './string-placeholder.enum';
+export * from './general-actions.enum';
+export * from './alignment.enum';

package/projects/carriera-intern-components/src/app/enums/string-placeholder.enum.ts

@@ -0,0 +1,3 @@
+export enum eStringPlaceholder {
+    EMPTY = ''
+} 

package/projects/carriera-intern-components/src/app/models/pm.model.ts

@@ -0,0 +1,11 @@
+export interface PmItem {
+  id?: number;
+  logoName?: string | null;   
+  title?: string | null; 
+}
+
+export interface IPmDropdownAction {
+  selectedId?: number,
+  isAddNew?: boolean,
+  isClear?: boolean
+}

package/projects/carriera-intern-components/src/app/models/review.model.ts

@@ -0,0 +1,29 @@
+import { AvatarFile, Driver, Size } from '../components/avatar/models';
+
+export interface IReview {
+  ratingId: number | null;
+  thumb: string | null;
+  reviewId: number;
+  comment: string;
+  isEdited: boolean;
+  companyUser: CompanyUser;
+  companyUserId: number;
+  isItCurrentCompanyUser: boolean;
+  createdAt: string; // ISO datum-vreme
+  updatedAt: string;
+}
+
+export interface CompanyUser {
+  id: number;
+  userId: number;
+  fullName: string;
+  avatarFile: AvatarTest;
+  departmentId: number;
+}
+
+interface AvatarTest {
+  driver: Driver;
+  size: Size;
+  rounded: boolean;
+  inverse: boolean;
+}

package/projects/carriera-intern-components/src/app/models/truck.model.ts

@@ -0,0 +1,5 @@
+export interface Truck {
+  truckId: number;
+  truckType: string;
+  truckNumber: string;
+}

package/projects/carriera-intern-components/src/app/pipes/bytes-to-human-readable.pipe.spec.ts

@@ -0,0 +1,8 @@
+import { BytesToHumanReadablePipe } from './bytes-to-human-readable.pipe';
+
+describe('BytesToHumanReadablePipe', () => {
+  it('create an instance', () => {
+    const pipe = new BytesToHumanReadablePipe();
+    expect(pipe).toBeTruthy();
+  });
+});

package/projects/carriera-intern-components/src/app/pipes/bytes-to-human-readable.pipe.ts

@@ -0,0 +1,29 @@
+// src/app/bytes-to-human-readable.pipe.ts
+
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'bytesToHumanReadable',
+})
+export class BytesToHumanReadablePipe implements PipeTransform {
+  transform(bytes: number | null | undefined, precision: number = 2): string {
+    if (bytes === null || bytes === undefined || isNaN(bytes)) {
+      return '';
+    }
+
+    if (bytes === 0) {
+      return '0 Bytes';
+    }
+
+    const units = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(1024));
+
+    const unitIndex = Math.min(i, units.length - 1);
+
+    const value = bytes / Math.pow(1024, unitIndex);
+
+    const formattedValue = parseFloat(value.toFixed(precision));
+
+    return `${formattedValue} ${units[unitIndex]}`;
+  }
+}

package/projects/carriera-intern-components/src/app/pipes/currency.pipe.spec.ts

@@ -0,0 +1,8 @@
+import { CurrencyPipe } from './currency.pipe';
+
+describe('CurrencyPipe', () => {
+  it('create an instance', () => {
+    const pipe = new CurrencyPipe();
+    expect(pipe).toBeTruthy();
+  });
+});