carriera-intern 0.0.0

package/projects/carriera-intern-components/src/app/components/list-contact-dropdown/list-contact-dropdown.component.ts

@@ -0,0 +1,208 @@
+import { Component, input, output, signal, ViewChild } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import {
+  FormControl,
+  FormGroup,
+  FormsModule,
+  ReactiveFormsModule,
+  UntypedFormGroup,
+} from '@angular/forms';
+
+// Components
+import { InputComponent } from '../input/input.component';
+import { SvgIconComponent } from 'angular-svg-icon';
+
+// Bootstrap
+import {
+  NgbPopover,
+  NgbDropdownModule,
+  NgbPopoverModule,
+  NgbTooltip,
+} from '@ng-bootstrap/ng-bootstrap';
+
+// Models
+import { Contact } from './models/contact.interface';
+
+// Pipes
+import { MapContactsPipe } from './pipes/map-contacts.pipe';
+import { HighlightSearchPipe } from '../input/pipes/highlight-search.pipe';
+import { CopyComponent } from '../copy/copy.component';
+import { ContactsHeightPipe } from './pipes/contacts-height.pipe';
+import { DepartmentsHeightPipe } from './pipes/departments-height.pipe';
+import { ContactCountPipe } from './pipes/contact-count.pipe';
+
+@Component({
+  selector: 'cai-list-contact-dropdown',
+  templateUrl: './list-contact-dropdown.component.html',
+  styleUrl: './list-contact-dropdown.component.scss',
+  imports: [
+    // Modules
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+
+    // Components
+    InputComponent,
+    SvgIconComponent,
+    CopyComponent,
+
+    // Bootstrap
+    NgbDropdownModule,
+    NgbPopoverModule,
+    NgbTooltip,
+
+    // Pipes
+    MapContactsPipe,
+    HighlightSearchPipe,
+    ContactsHeightPipe,
+    DepartmentsHeightPipe,
+    ContactCountPipe,
+  ],
+})
+export class ListContactDropdownComponent {
+  @ViewChild('dropdown') dropdown!: NgbPopover;
+
+  // Inputs
+  id = input<string>('');
+  contacts = input<Contact[]>([]);
+
+  // Outputs
+  onAdd = output();
+  onDelete = output();
+  onEdit = output();
+  onOpen = output();
+  onClose = output();
+
+  closing = signal<boolean>(false);
+  open = signal<boolean>(false);
+
+  selectedIds = signal<{ departmentId: number; contactId: number[] }[]>([]);
+
+  form: UntypedFormGroup = new FormGroup({
+    search: new FormControl(''),
+  });
+
+  selectedContactIds() {
+    return this.selectedIds().flatMap((entry) => entry.contactId);
+  }
+
+  closeDropdown() {
+    this.open.set(false);
+    this.dropdown?.close();
+    this.form.get('search')?.reset();
+    this.onClose.emit();
+  }
+
+  openDropdown() {
+    this.open.set(true);
+    this.onOpen.emit();
+  }
+
+  isDepartmentOpen(departmentId: number | null | undefined): boolean {
+    if (!departmentId) return false;
+    return !!this.selectedIds().find(
+      (entry) => entry.departmentId === departmentId
+    );
+  }
+
+  isContactOpen(contactId: number | null | undefined): boolean {
+    if (!contactId) return false;
+    return !!this.selectedContactIds().find((id) => id === contactId);
+  }
+
+  handleOpenDropdown() {
+    this.openDropdown();
+  }
+
+  handleCloseDropdown() {
+    this.closeDropdown();
+  }
+
+  emitOnAdd(event: Event) {
+    event.stopPropagation();
+    this.closeDropdown();
+    this.onAdd.emit();
+  }
+
+  emitOnEdit(event: Event) {
+    event.stopPropagation();
+    this.closeDropdown();
+    this.onEdit.emit();
+  }
+
+  emitOnDelete(event: Event) {
+    event.stopPropagation();
+    this.closeDropdown();
+    this.onDelete.emit();
+  }
+
+  handleContactClick(contactId: number) {
+    const currentSelected = this.selectedIds();
+    const existingEntry = currentSelected.find((entry) =>
+      entry.contactId.includes(contactId)
+    );
+
+    // Find the contact's actual department ID
+    const contact = this.contacts().find((c) => c.id === contactId);
+    const departmentId = contact?.department?.id || 0;
+
+    if (existingEntry) {
+      const updatedEntry = {
+        ...existingEntry,
+        contactId: existingEntry.contactId.filter((id) => id !== contactId),
+      };
+
+      this.selectedIds.set(
+        currentSelected.map((entry) =>
+          entry === existingEntry ? updatedEntry : entry
+        )
+      );
+    } else {
+      // Check if there's already an entry for this department
+      const departmentEntry = currentSelected.find(
+        (entry) => entry.departmentId === departmentId
+      );
+
+      if (departmentEntry) {
+        // Add contact to existing department entry
+        const updatedDepartmentEntry = {
+          ...departmentEntry,
+          contactId: [...departmentEntry.contactId, contactId],
+        };
+
+        this.selectedIds.set(
+          currentSelected.map((entry) =>
+            entry === departmentEntry ? updatedDepartmentEntry : entry
+          )
+        );
+      }
+    }
+  }
+
+  handleDepartmentClick(departmentId: number) {
+    const currentSelected = this.selectedIds();
+    const existingEntry = currentSelected.find(
+      (entry) => entry.departmentId === departmentId
+    );
+
+    if (existingEntry) {
+      // Remove the department entry and all contacts from this department
+      this.selectedIds.set(
+        currentSelected.filter((entry) => entry.departmentId !== departmentId)
+      );
+    } else {
+      // Add new department selection
+      this.selectedIds.set([
+        ...currentSelected,
+        { departmentId: departmentId, contactId: [] },
+      ]);
+    }
+  }
+
+  handleClick() {
+    if (!this.open()) {
+      this.open.set(true);
+      return;
+    }
+  }
+}

package/projects/carriera-intern-components/src/app/components/list-contact-dropdown/list-contact-dropdown.stories.ts

@@ -0,0 +1,52 @@
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+
+import { ReactiveFormsModule } from '@angular/forms';
+import { ListContactDropdownComponent } from './list-contact-dropdown.component';
+import { brokerContacts } from './mock/brokerContacts.json';
+
+const meta: Meta<ListContactDropdownComponent> = {
+  title: 'Components/ListContactDropdown',
+  component: ListContactDropdownComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [ReactiveFormsModule],
+    }),
+  ],
+  argTypes: {},
+  args: {
+    id: 'my-input',
+    contacts: [],
+  },
+};
+
+export default meta;
+type Story = StoryObj<ListContactDropdownComponent>;
+
+// --- Stories ---
+
+export const Default: Story = {
+  args: {
+    id: 'default-input',
+    contacts: brokerContacts,
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+      onAdd: () => {
+        console.log('onClear');
+      },
+      onDelete: () => {
+        console.log('onDelete');
+      },
+      onEdit: () => {
+        console.log('onEdit');
+      },
+    },
+    template: `
+    <div style="width: 500px; height: 26px; padding-left: 50px;">
+      <cai-list-contact-dropdown [id]="id" [contacts]="contacts" (onAdd)="onAdd()" (onDelete)="onDelete()" (onEdit)="onEdit()">
+      </cai-list-contact-dropdown>
+    </div>
+    `,
+  }),
+};

package/projects/carriera-intern-components/src/app/components/list-contact-dropdown/mock/brokerContacts.json

@@ -0,0 +1,74 @@
+{
+  "brokerContacts": [
+    {
+      "id": 505,
+      "brokerId": 647,
+      "email": "jovan@rute.co",
+      "phone": "(381) 123-1231",
+      "contactName": "Jovan Kostic",
+      "department": {
+        "id": 7,
+        "name": "Manager",
+        "count": 0,
+        "companyUsers": null
+      },
+      "extensionPhone": null
+    },
+    {
+      "id": 506,
+      "brokerId": 647,
+      "email": "petar@rute.co",
+      "phone": "(381) 123-1231",
+      "contactName": "Petar Petrovic",
+      "department": {
+        "id": 2,
+        "name": "Dispatch",
+        "count": 0,
+        "companyUsers": null
+      },
+      "extensionPhone": null
+    },
+    {
+      "id": 507,
+      "brokerId": 647,
+      "email": "marko@rute.co",
+      "phone": "(381) 123-1231",
+      "contactName": "Marko Markovic",
+      "department": {
+        "id": 5,
+        "name": "Safety",
+        "count": 0,
+        "companyUsers": null
+      },
+      "extensionPhone": "123"
+    },
+    {
+      "id": 508,
+      "brokerId": 647,
+      "email": "luka@rute.co",
+      "phone": "(381) 123-1231",
+      "contactName": "Luka Lukic",
+      "department": {
+        "id": 9,
+        "name": "Other",
+        "count": 0,
+        "companyUsers": null
+      },
+      "extensionPhone": null
+    },
+    {
+      "id": 509,
+      "brokerId": 647,
+      "email": "dispecerdugacaktkestprobatest@rute.co",
+      "phone": "(381) 123-1231",
+      "contactName": "Dispec Dispecer Dugacak Tekst Proba Test",
+      "department": {
+        "id": 2,
+        "name": "Dispatch",
+        "count": 0,
+        "companyUsers": null
+      },
+      "extensionPhone": "12"
+    }
+  ]
+}

package/projects/carriera-intern-components/src/app/components/list-contact-dropdown/models/contact.interface.ts

@@ -0,0 +1,23 @@
+export interface Contact {
+  id?: number | null;
+  brokerId?: number | null;
+  shipperId?: number | null;
+  email?: string | null;
+  phone?: string | null;
+  contactName?: string | null;
+  fullName?: string | null;
+  extensionPhone?: string | null;
+  department?: Department | null;
+}
+
+export interface Department {
+  id?: number | null;
+  name?: string | null;
+  count?: number | null;
+  companyUsers?: any | null;
+}
+
+export interface ContactList {
+  department?: Department;
+  contacts?: Contact[];
+}

package/projects/carriera-intern-components/src/app/components/list-contact-dropdown/pipes/contact-count.pipe.ts

@@ -0,0 +1,14 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { ContactList } from '../models/contact.interface';
+
+@Pipe({
+  name: 'contactCount',
+})
+export class ContactCountPipe implements PipeTransform {
+  transform(contactList: ContactList[]): number {
+    return contactList.reduce(
+      (total, list) => total + (list.contacts?.length || 0),
+      0
+    );
+  }
+}

package/projects/carriera-intern-components/src/app/components/list-contact-dropdown/pipes/contacts-height.pipe.ts

@@ -0,0 +1,34 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { ContactList } from '../models/contact.interface';
+
+@Pipe({
+  name: 'contactsHeight',
+})
+export class ContactsHeightPipe implements PipeTransform {
+  transform(
+    departmentId: number,
+    contactList: ContactList,
+    selectedIds: { departmentId: number; contactId: number[] }[]
+  ): number {
+    const contactCount = contactList.contacts?.length || 0;
+
+    // Get the selected contact IDs for this department
+    const selectedContactIds =
+      selectedIds.find((entry) => entry.departmentId === departmentId)
+        ?.contactId || [];
+
+    // Get the visible contact IDs in the current filtered list
+    const visibleContactIds =
+      contactList.contacts?.map((contact) => contact.id) || [];
+
+    // Only count selected contacts that are currently visible in the filtered list
+    const visibleSelectedContacts = selectedContactIds.filter((contactId) =>
+      visibleContactIds.includes(contactId)
+    ).length;
+
+    return (
+      (contactCount - visibleSelectedContacts) * 30 +
+      visibleSelectedContacts * 74
+    );
+  }
+}

package/projects/carriera-intern-components/src/app/components/list-contact-dropdown/pipes/departments-height.pipe.ts

@@ -0,0 +1,57 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { ContactList } from '../models/contact.interface';
+
+@Pipe({
+  name: 'departmentsHeight',
+})
+export class DepartmentsHeightPipe implements PipeTransform {
+  transform(
+    contactLists: ContactList[],
+    selectedIds: { departmentId: number; contactId: number[] }[]
+  ): number {
+    let totalHeight = 52;
+
+    // Calculate height for each visible department
+    contactLists.forEach((contactList) => {
+      // Base height for each department (30px) + 1px for the divider
+      totalHeight += 31;
+
+      // If department is open (has id in selectedIds), add contacts height calculation
+      const isDepartmentOpen = selectedIds.some(
+        (entry) => entry.departmentId === contactList.department?.id
+      );
+
+      if (isDepartmentOpen) {
+        const contactCount = contactList.contacts?.length || 0;
+
+        // Get the selected contact IDs for this department
+        const selectedContactIds =
+          selectedIds.find(
+            (entry) => entry.departmentId === contactList.department?.id
+          )?.contactId || [];
+
+        // Get the visible contact IDs in the current filtered list
+        const visibleContactIds =
+          contactList.contacts?.map((contact) => contact.id) || [];
+
+        // Only count selected contacts that are currently visible in the filtered list
+        const visibleSelectedContacts = selectedContactIds.filter((contactId) =>
+          visibleContactIds.includes(contactId)
+        ).length;
+
+        // Add contacts height calculation (same logic as contacts height pipe)
+        const contactsHeight =
+          (contactCount - visibleSelectedContacts) * 30 +
+          visibleSelectedContacts * 74;
+
+        totalHeight += contactsHeight;
+      }
+    });
+
+    if (totalHeight === 52) {
+      return 134;
+    }
+
+    return totalHeight;
+  }
+}

package/projects/carriera-intern-components/src/app/components/list-contact-dropdown/pipes/map-contacts.pipe.ts

@@ -0,0 +1,51 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { Contact, ContactList } from '../models/contact.interface';
+
+@Pipe({
+  name: 'mapContacts',
+})
+export class MapContactsPipe implements PipeTransform {
+  transform(contacts: Contact[], searchValue: string | null): ContactList[] {
+    if (!contacts || contacts.length === 0) {
+      return [];
+    }
+
+    // Filter contacts by name if search value is provided
+    let filteredContacts = contacts;
+    if (searchValue && searchValue.trim()) {
+      const searchTerm = searchValue.toLowerCase().trim();
+      filteredContacts = contacts.filter((contact) =>
+        contact.contactName?.toLowerCase().includes(searchTerm)
+      );
+    }
+
+    // Group contacts by department
+    const departmentMap = new Map<number, ContactList>();
+
+    filteredContacts.forEach((contact) => {
+      const departmentId = contact.department?.id || 0;
+      const departmentName = contact.department?.name || 'No Department';
+
+      if (!departmentMap.has(departmentId)) {
+        departmentMap.set(departmentId, {
+          department: {
+            id: departmentId,
+            name: departmentName,
+            count: 0,
+            companyUsers: null,
+          },
+          contacts: [],
+        });
+      }
+
+      const contactList = departmentMap.get(departmentId)!;
+      contactList.contacts?.push(contact);
+      contactList.department!.count = (contactList.department!.count || 0) + 1;
+    });
+
+    // Convert map to array and sort by department name
+    return Array.from(departmentMap.values()).sort((a, b) =>
+      (a.department?.name || '').localeCompare(b.department?.name || '')
+    );
+  }
+}