cat-documents-ng 1.0.6 → 1.0.7

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

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

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

@@ -1,316 +0,0 @@
-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();
-    }
-  }
-}