cat-documents-ng 1.0.4 → 1.0.6

package/src/lib/document/components/documents-menu/documents-menu.component.scss

@@ -0,0 +1,363 @@
+.expand-icon-wrapper {
+  border: 1px solid var(--primary-color);
+  height: 24px;
+  width: 24px;
+  border-radius: 50%;
+  background: var(--blue-bg-light);
+}
+
+::ng-deep {
+  .p-badge.p-badge-success {
+    background-color: #DCFCE7;
+    color: #16A34A;
+    font-family: inherit;
+    font-size: 12px;
+    font-weight: 400;
+    font-style: inherit;
+  }
+  
+  .p-badge.p-badge-danger {
+    background-color: #FEE2E2;
+    color: #DC2626;
+    font-family: inherit;
+    font-size: 12px;
+    font-weight: 400;
+    font-style: inherit;
+  }
+  
+  .p-badge.p-badge-warning {
+    background-color: #FEF3C7;
+    color: #D97706;
+    font-family: inherit;
+    font-size: 12px;
+    font-weight: 400;
+    font-style: inherit;
+  }
+  
+  .p-badge.p-badge-info{
+    background-color: #E5E7EB;
+    color: black;
+    font-family: inherit;
+    font-size: 12px;
+    font-weight: 400;
+    font-style: inherit;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #1f2937;
+  }
+  @media screen and (min-width: 768px) {
+    .md\:w-15rem {
+      width: 100% !important;
+    }
+  }
+
+  .p-menu{
+      // .p-menuitem:not(p-highlight):not(p-disabled)>.p-menuitem-content:hover{
+      //   color: rgba(0, 102, 255, 1) !important;
+      //   border: none !important;
+      //     // background: transparent !important;
+      //     // background-color: transparent !important;
+      // }
+    }
+
+  .p-menu {
+    border: none;
+  }
+  .custom-scroll{
+    scrollbar-gutter: inherit;
+  }
+
+  // Styles for selected menu items
+  .selected-menu-item {
+    background-color: rgba(0, 102, 255, 0.1) !important;
+    color: var(--primary-color) !important;
+    border: 1px solid rgba(68, 72, 109, 0.1) !important;
+    border-radius: 10px !important;
+    
+    .text-xl {
+      color: var(--primary-color) !important;
+    }
+ 
+  }
+
+  // Styles for disabled menu items
+  .disabled-menu-item {
+    opacity: 0.5 !important;
+    cursor: not-allowed !important;
+    pointer-events: none !important;
+    
+    .text-xl {
+      color: #9EA0B3 !important;
+    }
+    
+    .ml-2 {
+      color: #9EA0B3 !important;
+    }
+    
+    .p-badge {
+      opacity: 0.5 !important;
+    }
+  }
+
+  // Ensure deselected items have no background immediately
+  .p-menuitem-link:not(.selected-menu-item) {
+    background-color: #ffffff !important;
+    border: none !important;
+    border-radius: 0 !important;
+    
+    .text-xl {
+      color: var(--text-color) !important;
+    }
+  }
+}
+::ng-deep {
+  .p-panelmenu .p-panelmenu-content {
+    border: none !important;
+  }
+}
+.application-title-wrapper {
+  color: #9ea0b3;
+  font-weight: 500;
+}
+
+.widget-menu-wrapper {
+  margin-top: 8px;
+}
+
+.widget-menu-header-wrapper {
+  padding: 4px 4px 4px 16px;
+}
+
+.widget-menu-container {
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.custom-scroll {
+  overflow-y: hidden;
+  scrollbar-gutter: stable;
+}
+
+.custom-scroll:hover {
+  overflow-y: auto;
+}
+
+::ng-deep {
+  .document-sidebar-container {
+    .p-card {
+      height: 100%;
+      box-shadow: none;
+
+      .p-card-content {
+        height: 100%;
+        padding: 0 !important;
+      }
+
+      .p-card-body {
+        height: 100%;
+        width: 100%;
+        padding: 12px 8px;
+        border-radius: 10px;
+        border: 1px solid #e5e7eb;
+      }
+    }
+    .widget-menu-wrapper
+      .p-panelmenu-panel
+      .p-panelmenu-expanded
+      .p-panelmenu-content {
+      border: none !important;
+    }
+  }
+
+  .widget-menu-wrapper {
+    .p-panelmenu {
+      .p-panelmenu-header {
+        .p-panelmenu-header-content {
+          border: none;
+          color: var(--text-color);
+          font-weight: 400 !important;
+          background-color: var(--surface-0) !important;
+
+          .p-panelmenu-header-action {
+            color: var(--text-color);
+            font-weight: 400 !important;
+            position: relative;
+            padding: 12px;
+
+            .p-icon-wrapper {
+              position: absolute;
+              right: 0;
+              top: 16px;
+              margin-right: 7px;
+              transform: rotate(90deg) !important;
+              transition: none !important;
+            }
+
+            .p-menuitem-text {
+              max-width: 75%;
+              display: -webkit-box;
+              -webkit-line-clamp: 1;
+              -webkit-box-orient: vertical;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: normal;
+              word-break: break-all;
+            }
+          }
+
+          .p-menuitem-link-active {
+            border: 1px solid rgba(68, 72, 109, 0.1);
+            border-radius: 10px;
+            padding: 12px;
+            color: var(--primary-color);
+            background-color: rgba(0, 102, 255, 0.1) !important;
+
+            .p-menuitem-icon {
+              color: var(--primary-color);
+            }
+
+            .p-menuitem-text {
+              color: var(--primary-color);
+            }
+          }
+        }
+      }
+
+      .company-action-wrapper:not(.p-disabled).p-highlight
+        .p-panelmenu-header-content {
+        margin: 12px 0 !important;
+      }
+
+      .no-highlight.p-panelmenu-header:not(.p-disabled).p-highlight
+        .p-panelmenu-header-content {
+        background-color: transparent !important;
+        border-radius: 10px;
+        padding: 12px;
+        // border: 1px solid rgba(68, 72, 109, 0.1) !important;
+        border-bottom: 0 !important;
+        border-bottom-left-radius: 0 !important;
+        border-bottom-right-radius: 0 !important;
+
+        .p-panelmenu-header-action {
+          padding: 0 !important;
+
+          .p-icon-wrapper {
+            transform: rotate(180deg) !important;
+            transition: none !important;
+            top: 0 !important;
+          }
+        }
+      }
+    }
+
+    .p-panelmenu
+      .p-panelmenu-content
+      .p-menuitem
+      > .p-menuitem-content
+      .p-menuitem-link {
+      background-color: #ffffff !important;
+      color: var(--text-color);
+      padding: 12px 6px !important;
+
+      .p-menuitem-text {
+        max-width: 75%;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: normal;
+        word-break: break-all;
+      }
+    }
+
+    .p-panelmenu
+      .p-panelmenu-content
+      .p-menuitem
+      > .p-menuitem-content
+      .p-menuitem-link-active {
+      border: 1px solid rgba(68, 72, 109, 0.1);
+      border-radius: 10px;
+      padding: 12px;
+      color: var(--primary-color);
+      box-shadow: none !important;
+      background-color: rgba(0, 102, 255, 0.1) !important;
+
+      .p-menuitem-icon {
+        color: var(--primary-color);
+      }
+
+      .p-menuitem-text {
+        color: var(--primary-color);
+      }
+    }
+
+    .p-panelmenu
+      .p-panelmenu-content
+      .p-menuitem.p-focus
+      > .p-menuitem-content {
+      background-color: #ffffff !important;
+    }
+
+    // Ensure deselected items have white background when not focused
+    .p-panelmenu
+      .p-panelmenu-content
+      .p-menuitem:not(.p-focus)
+      > .p-menuitem-content
+      .p-menuitem-link {
+      background-color: #ffffff !important;
+    }
+
+    // Immediate deselection styling - ensure no lingering selected styles
+    .p-panelmenu
+      .p-panelmenu-content
+      .p-menuitem
+      > .p-menuitem-content
+      .p-menuitem-link:not(.selected-menu-item) {
+      background-color: #ffffff !important;
+      border: none !important;
+      border-radius: 0 !important;
+      color: var(--text-color) !important;
+      
+      .p-menuitem-icon {
+        color: var(--text-color) !important;
+      }
+      
+      .p-menuitem-text {
+        color: var(--text-color) !important;
+      }
+    }
+
+    .p-panelmenu-panel {
+      .p-panelmenu-expanded {
+        .p-panelmenu-content {
+          border: 1px solid rgba(68, 72, 109, 0.1) !important;
+          border-top: 0 !important;
+          border-bottom-left-radius: 10px;
+          border-bottom-right-radius: 10px;
+        }
+      }
+
+      .widget-separator {
+        border-top: 1px solid rgba(68, 72, 109, 0.1) !important;
+
+        .p-panelmenu-header-content {
+          .p-panelmenu-header-action {
+            padding: 0 !important;
+          }
+        }
+      }
+    }
+  }
+}
+
+.no-documents-message {
+  padding: 12px 16px;
+  text-align: center;
+  
+  .text-muted {
+    color: #9EA0B3;
+    font-size: 14px;
+    font-style: italic;
+  }
+}

package/src/lib/document/components/documents-menu/documents-menu.component.spec.ts

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

package/src/lib/document/components/documents-menu/documents-menu.component.ts

@@ -0,0 +1,316 @@
+import { Component, Input, OnInit, OnChanges, SimpleChanges, Output, EventEmitter, OnDestroy } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { DocumentStore } from '../../state/document.store';
+import { DocumentQuery } from '../../state/document.query';
+import { DocumentCategory, DocumentCategoryItem } from '../../models/document-category.model';
+import { DocumentMenuService } from '../../services/document-menu.service';
+import { DocumentHelperService } from '../../services/document.service';
+import { SHARED } from '../../../../Shared/constant/SHARED';
+
+interface MenuItemData {
+  totalDocuments: number;
+  approvedDocuments: number;
+  badgeValue: string;
+  badgeSeverity: 'success' | 'info' | 'warning' | 'danger';
+  shouldShowBadge: boolean;
+}
+
+@Component({
+  selector: 'lib-documents-menu',
+  standalone: false,
+  templateUrl: './documents-menu.component.html',
+  styleUrl: './documents-menu.component.scss'
+})
+export class DocumentsMenuComponent implements OnInit, OnChanges, OnDestroy {
+  @Input() catagories: DocumentCategory[] = SHARED.EMPTY_ARRAY
+  @Input() applicationNumber : string = SHARED.EMPTY
+  @Input() contextId: string = SHARED.EMPTY;
+  @Output() menuItemSelected = new EventEmitter<{
+    item: DocumentCategoryItem; 
+    category: DocumentCategory;
+    navigationInfo?: {
+      menuItemId: string;
+      menuItemLabel: string;
+      categoryLabel: string;
+      categoryIndex: number;
+    };
+  }>();
+  
+  selectedMenuItem: string | null = null;
+  selectedMenuItemId: string | null = null;
+
+  // Store the categories from the store
+  private storeCategories: DocumentCategory[] = SHARED.EMPTY_ARRAY;
+  
+  // Cache for categories to avoid repeated processing
+  private _cachedCategories: DocumentCategory[] = SHARED.EMPTY_ARRAY;
+
+  // Subscriptions to track for cleanup
+  private selectedMenuItemSubscription!: Subscription;
+  private documentCategoriesSubscription!: Subscription;
+  private documentListResponseSubscription!: Subscription;
+
+  constructor(
+    private documentStore: DocumentStore,
+    private documentQuery: DocumentQuery,
+    private documentMenuService: DocumentMenuService,
+    private documentHelperService: DocumentHelperService
+  ) {}
+
+  /**
+   * Initialize the component
+   * @returns {void}
+   * @memberof DocumentsMenuComponent
+   */
+  ngOnInit(): void {
+    this.selectedMenuItemSubscription = this.documentQuery.selectSelectedMenuItem().subscribe(menuItemId => {
+      this.selectedMenuItemId = menuItemId;
+      this.selectedMenuItem = this.findMenuItemLabelById(menuItemId);
+    });
+
+    // Subscribe to document categories from the store
+    this.documentCategoriesSubscription = this.documentQuery.selectDocumentCategories().subscribe(categories => {
+      if (categories && categories.length > 0) {
+        this.storeCategories = categories;
+        this.updateCachedCategories();
+        this.updateMenuItemsData();
+      }
+    });
+
+    // Subscribe to document list response to update menu item selectability
+    this.setupDocumentListResponseSubscription();
+  }
+
+  /**
+   * Handle changes to input properties
+   * @param {SimpleChanges} changes - The changes to the input properties
+   * @returns {void}
+   * @memberof DocumentsMenuComponent
+   */
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes[SHARED.CATAGORIES] && this.catagories) {
+      this.updateCachedCategories();
+      this.updateMenuItemsData();
+    }
+    
+    if (changes[SHARED.CONTEXT_ID] && !changes[SHARED.CONTEXT_ID].firstChange) {
+      this.handleContextIdChange();
+    }
+  }
+
+  /**
+   * Gets the categories to use for the menu
+   * Priority: Store categories > Input categories
+   * Categories maintain their original order as provided by the API
+   */
+  get categories(): DocumentCategory[] {
+    return this._cachedCategories;
+  }
+
+  /**
+   * Updates the cached categories when data changes
+   * Maintains the original order as provided by the API
+   */
+  private updateCachedCategories(): void {
+    const nextCategories = this.storeCategories.length > 0 ? this.storeCategories : this.catagories;
+    if (!this._cachedCategories || this._cachedCategories.length === 0) {
+      this._cachedCategories = nextCategories;
+      return;
+    }
+    const previousById = new Map<string, boolean>();
+    this._cachedCategories.forEach(category => {
+      category.items?.forEach(item => {
+        if ((item as any).isSelectable !== undefined) {
+          previousById.set(item._id, (item as any).isSelectable);
+        }
+      });
+    });
+
+    this._cachedCategories = nextCategories.map(category => ({
+      ...category,
+      items: category.items?.map(item => ({
+        ...item,
+        isSelectable: previousById.has(item._id) ? previousById.get(item._id)! : (item as any).isSelectable
+      }))
+    }));
+  }
+
+  /**
+   * Finds the label of a menu item by its _id
+   * @param id The _id to search for
+   * @returns The label of the menu item or null if not found
+   */
+  private findMenuItemLabelById(id: string | null): string | null {
+    if (!id) return null;
+    
+    for (const category of this.categories) {
+      if (category.items) {
+        const item = category.items.find(item => item._id === id);
+        if (item) {
+          return item.label;
+        }
+      }
+    }
+    return null;
+  }
+
+  /**
+   * Finds the category for a menu item by its _id
+   * @param id The _id to search for
+   * @returns The category or null if not found
+   */
+  private findMenuItemCategoryById(id: string | null): DocumentCategory | null {
+    if (!id) return null;
+    
+    for (const category of this.categories) {
+      if (category.items) {
+        const item = category.items.find(item => item._id === id);
+        if (item) {
+          return category;
+        }
+      }
+    }
+    return null;
+  }
+  
+  /**
+   * Update menu use catagories
+   */
+  private updateMenuItemsData(): void {
+    this.updateCachedCategories();
+    
+    this._cachedCategories.forEach(category => {
+      if (category.items) {
+        category.items.forEach(item => {
+          const menuData = {
+            totalDocuments: this.documentMenuService.getTotalDocuments(item),
+            approvedDocuments: this.documentMenuService.getApprovedDocuments(item),
+            badgeValue: this.documentMenuService.getBadgeValue(item),
+            badgeSeverity: this.documentMenuService.getBadgeSeverity(item),
+            shouldShowBadge: this.documentMenuService.shouldShowBadge(item)
+          };
+          (item as any).menuData = menuData;
+          
+          // Initialize isSelectable as true (default state)
+          if (item.isSelectable === undefined) {
+            item.isSelectable = true;
+          }
+        });
+      }
+    });
+  }
+
+  /**
+   * Sets up subscription to document list response to update menu item selectability
+   */
+  private setupDocumentListResponseSubscription(): void {
+    this.documentListResponseSubscription = this.documentQuery.selectDocumentListResponse().subscribe(documentListResponse => {
+      this.updateMenuItemsSelectability(documentListResponse);
+    });
+  }
+
+  /**
+   * Updates menu items with selectability status based on filtered document list
+   * @param documentListResponse - The filtered document list response
+   */
+  private updateMenuItemsSelectability(documentListResponse: any): void {
+    if (this._cachedCategories && this._cachedCategories.length > 0) {
+      // Only update if we have a valid response (not null/undefined)
+      // If response is null, keep previous selectability to avoid flicker/reset during refresh
+      if (documentListResponse !== null && documentListResponse !== undefined) {
+        this._cachedCategories = this.documentMenuService.updateMenuItemsWithSelectabilityStatus(
+          this._cachedCategories, 
+          documentListResponse
+        );
+      } else {
+        // Do nothing; preserve existing isSelectable values
+      }
+    }
+  }
+  
+  /**
+   * Handle the menu item click for navigation
+   * @param {*} event - Event 
+   * @param {DocumentCategoryItem} item - catagory item
+   */
+  onMenuItemClick(event: any, item: DocumentCategoryItem): void {
+    // Prevent selection if the menu item is not selectable
+    if (item.isSelectable === false) {
+      event.preventDefault();
+      event.stopPropagation();
+      return;
+    }
+
+    if (this.selectedMenuItemId === item._id) {
+      this.selectedMenuItem = null;
+      this.selectedMenuItemId = null;
+      this.documentStore.setSelectedMenuItem(null);
+      this.menuItemSelected.emit({
+        item: item, 
+        category: this.findMenuItemCategoryById(item._id)!,
+        navigationInfo: undefined
+      });
+    } else {
+      this.selectedMenuItem = item.label;
+      this.selectedMenuItemId = item._id;
+      this.documentStore.setSelectedMenuItem(item._id);
+      const category = this.findMenuItemCategoryById(item._id);
+      if (category) {
+        this.menuItemSelected.emit({
+          item: item, 
+          category: category,
+          navigationInfo: {
+            menuItemId: item._id,
+            menuItemLabel: item.label,
+            categoryLabel: category.label,
+            categoryIndex: this.categories.findIndex(cat => cat === category)
+          }
+        });
+      }
+    }
+  }
+
+
+  /**
+   * Get the selected menu item
+   * @returns {string | null} - The selected menu item
+   */
+  getSelectedMenuItem(): string | null {
+    return this.selectedMenuItem;
+  }
+
+  /**
+   * Handles contextId changes by clearing current selection
+   */
+  private handleContextIdChange(): void {
+    if (this.contextId && this.contextId !== SHARED.EMPTY) {
+      this.selectedMenuItem = null;
+      this.selectedMenuItemId = null;
+      this.documentStore.setSelectedMenuItem(null);
+    }
+  }
+
+  /**
+   * Get the selected menu item id
+   * @returns {string | null} - The selected menu item id
+   */
+  getSelectedMenuItemId(): string | null {
+    return this.selectedMenuItemId;
+  }
+
+  /**
+   * Clean up subscriptions when component is destroyed
+   * Prevents memory leaks and ensures proper cleanup
+   */
+  ngOnDestroy(): void {
+    if (this.selectedMenuItemSubscription) {
+      this.selectedMenuItemSubscription.unsubscribe();
+    }
+    if (this.documentCategoriesSubscription) {
+      this.documentCategoriesSubscription.unsubscribe();
+    }
+    if (this.documentListResponseSubscription) {
+      this.documentListResponseSubscription.unsubscribe();
+    }
+  }
+}