cat-documents-ng 1.0.6 → 1.0.8

package/src/lib/document/components/sidebar/sidebar.component.spec.ts

@@ -1,114 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { SidebarComponent } from './sidebar.component';
-import { SidebarModule } from 'primeng/sidebar';
-import { ConfirmDialogModule } from 'primeng/confirmdialog';
-import { ConfirmationService } from 'primeng/api';
-import { Injector } from '@angular/core';
-
-describe('SidebarComponent', () => {
-  let component: SidebarComponent;
-  let fixture: ComponentFixture<SidebarComponent>;
-  let mockConfirmationService: jasmine.SpyObj<ConfirmationService>;
-  let mockInjector: jasmine.SpyObj<Injector>;
-
-  beforeEach(async () => {
-    mockConfirmationService = jasmine.createSpyObj('ConfirmationService', ['confirm']);
-    mockInjector = jasmine.createSpyObj('Injector', ['get']);
-    mockInjector.get.and.returnValue(mockConfirmationService);
-
-    await TestBed.configureTestingModule({
-      declarations: [ SidebarComponent ],
-      imports: [ SidebarModule, ConfirmDialogModule ],
-      providers: [
-        ConfirmationService
-      ]
-    })
-    .compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(SidebarComponent);
-    component = fixture.componentInstance;
-    
-    // Mock the injector
-    (component as any).injector = mockInjector;
-    (component as any).confirmationService = mockConfirmationService;
-    
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should open sidebar when open() is called', () => {
-    component.open();
-    expect(component.visible).toBe(true);
-  });
-
-  it('should close sidebar when close() is called', () => {
-    component.visible = true;
-    component.close();
-    expect(component.visible).toBe(false);
-  });
-
-  it('should show confirmation dialog when close button is clicked with unsaved changes', () => {
-    component.visible = true;
-    component.hasUnsavedChanges = true;
-    
-    component.handleClose();
-    
-    expect(mockConfirmationService.confirm).toHaveBeenCalled();
-    expect(component.visible).toBe(true); // Should still be open
-  });
-
-  it('should close sidebar when close button is clicked without unsaved changes', () => {
-    component.visible = true;
-    component.hasUnsavedChanges = false;
-    
-    component.handleClose();
-    
-    expect(component.visible).toBe(false);
-    expect(mockConfirmationService.confirm).not.toHaveBeenCalled();
-  });
-
-  it('should close and emit onClose when confirmation is accepted', () => {
-    component.visible = true;
-    component.hasUnsavedChanges = true;
-    
-    // Simulate confirmation accepted
-    mockConfirmationService.confirm.and.callFake((options: any) => {
-      options.accept();
-    });
-    
-    spyOn(component.onClose, 'emit');
-    component.handleClose();
-    
-    expect(component.visible).toBe(false);
-    expect(mockConfirmationService.confirm).toHaveBeenCalled();
-    expect(component.onClose.emit).toHaveBeenCalled();
-  });
-
-  it('should keep sidebar open when confirmation is rejected', () => {
-    component.visible = true;
-    component.hasUnsavedChanges = true;
-    
-    // Simulate confirmation rejected
-    mockConfirmationService.confirm.and.callFake((options: any) => {
-      options.reject();
-    });
-    
-    component.handleClose();
-    
-    expect(component.visible).toBe(true);
-    expect(mockConfirmationService.confirm).toHaveBeenCalled();
-  });
-
-  it('should check for unsaved changes correctly', () => {
-    component.hasUnsavedChanges = true;
-    expect(component.checkForUnsavedChanges()).toBe(true);
-    
-    component.hasUnsavedChanges = false;
-    expect(component.checkForUnsavedChanges()).toBe(false);
-  });
-});

package/src/lib/document/components/sidebar/sidebar.component.ts

@@ -1,223 +0,0 @@
-import { Component, Input, Output, EventEmitter, OnDestroy, HostListener } from '@angular/core';
-import { SHARED } from '../../../../Shared/constant/SHARED';
-import { Subject } from 'rxjs';
-import { ConfirmationService } from 'primeng/api';
-import { ConfirmationDialogComponent } from '../../../../Shared/components/confirmation-dialog/confirmation-dialog.component';
-
-// Interface for confirmation options
-interface ConfirmationOptions {
-  message: string;
-  header?: string;
-  icon?: string;
-  acceptLabel?: string;
-  rejectLabel?: string;
-  acceptIcon?: string;
-  rejectIcon?: string;
-  acceptButtonClass?: string;
-  rejectButtonClass?: string;
-}
-
-@Component({
-  selector: 'lib-sidebar',
-  templateUrl: './sidebar.component.html',
-  styleUrls: ['./sidebar.component.scss'],
-  standalone: false
-})
-export class SidebarComponent implements OnDestroy {
-  // Flag to prevent multiple confirmations
-  private isShowingConfirmation: boolean = false;
-
-  @Input() set visible(value: boolean) {
-    this._visible = value;
-  }
-  
-  get visible(): boolean {
-    return this._visible;
-  }
-  
-  private _visible: boolean = false;
-
-  @Input() position: 'left' | 'right' = 'right';
-  @Input() width: string = SHARED.WIDTH;
-  @Input() title: string = SHARED.EMPTY;
-  @Input() showCloseButton: boolean = true;
-  @Input() modal: boolean = true;
-  @Input() dismissible: boolean = true;
-  @Input() styleClass: string = SHARED.EMPTY;
-  @Input() appendTo: string = 'body';
-  @Input() blockScroll: boolean = true;
-  @Input() closeIcon: string = SHARED.CLOSE_ICON;
-  @Input() showSaveButton: boolean = false;
-  @Input() saveButtonText: string = SHARED.SAVE;
-  @Input() saveButtonDisabled: boolean = false;
-  @Input() successMessage: string = SHARED.SUCCESS_MESSAGE;
-  @Input() errorMessage: string = SHARED.EMPTY;
-  @Input() hasUnsavedChanges: boolean = false;
-
-  @Output() visibleChange = new EventEmitter<boolean>();
-  @Output() onShow = new EventEmitter<void>();
-  @Output() onHide = new EventEmitter<void>();
-  @Output() onSave = new EventEmitter<void>();
-  @Output() onClose = new EventEmitter<void>();
-  
-  showSuccessMessage: boolean = false;
-  showErrorMessage: boolean = false;
-  private destroy$ = new Subject<void>();
-
-  unsavedChangesConfirmationOptions: ConfirmationOptions = {
-    message: SHARED.UNSAVED_CHANGES_MESSAGE,
-    acceptLabel: SHARED.YES,
-    rejectLabel: SHARED.NO,
-    acceptIcon: SHARED.ACCEPT_ICON,
-    rejectIcon: SHARED.REJECT_ICON,
-    acceptButtonClass: SHARED.ACCEPT_BUTTON_STYLE_CLASS,
-    rejectButtonClass: SHARED.REJECT_BUTTON_STYLE_CLASS
-  };
-
-  constructor(private confirmationService: ConfirmationService) {}
-
-  /**
-   * Handles the onHide event from PrimeNG sidebar
-   * Only emits when actually closing, not when showing confirmation
-   */
-  onSidebarHide(): void {
-    if (!this.isShowingConfirmation) {
-      this.onHide.emit();
-    }
-  }
-
-  /**
-   * Handles the visibleChange event from PrimeNG sidebar
-   * Intercepts automatic closing to show confirmation if needed
-   */
-  onVisibleChange(value: boolean): void {
-    if (!value && this.hasUnsavedChanges && !this.isShowingConfirmation) {
-      this._visible = true;
-      this.showUnsavedChangesConfirmation();
-      return;
-    }
-    
-    this.visibleChange.emit(value);
-  }
-
-  /**
-   * Opens the sidebar
-   */
-  open(): void {
-    this._visible = true;
-    this.clearMessages();
-    this.visibleChange.emit(this._visible);
-    this.onShow.emit();
-  }
-
-  /**
-   * Closes the sidebar
-   */
-  close(): void {
-    this._visible = false;
-    this.clearMessages();
-    this.visibleChange.emit(this._visible);
-    this.onHide.emit();
-  }
-
-  /**
-   * Handles escape key press
-   * Shows confirmation if there are unsaved changes
-   */
-  @HostListener('document:keydown.escape', ['$event'])
-  handleEscapeKey(event: KeyboardEvent): void {
-    if (this.visible) {
-      event.preventDefault();
-      this.handleClose();
-    }
-  }
-
-  /**
-   * Handles backdrop click events
-   * Prevents default PrimeNG behavior and shows confirmation if needed
-   */
-  handleBackdropClick(event: Event): void {
-    event.preventDefault();
-    event.stopPropagation();
-    this.handleClose();
-  }
-
-  /**
-   * Handles all closing scenarios (backdrop click, escape key, close button, etc.)
-   * This is the single entry point for all closing logic
-   */
-  handleClose(): void {
-    if (this.hasUnsavedChanges && !this.isShowingConfirmation) {
-      this.showUnsavedChangesConfirmation();
-    } else {
-      this.close();
-    }
-  }
-
-  /**
-   * Shows confirmation dialog for unsaved changes
-   */
-  private showUnsavedChangesConfirmation(): void {
-    if (this.isShowingConfirmation) {
-      return;
-    }
-    this.isShowingConfirmation = true;
-    ConfirmationDialogComponent.confirm(
-      this.confirmationService,
-      this.unsavedChangesConfirmationOptions,
-      () => {
-        this.isShowingConfirmation = false;
-        this.close();
-        this.onClose.emit();
-      },
-      () => {
-        this.isShowingConfirmation = false;
-      }
-    );
-  }
-
-  /**
-   * Shows success message and closes sidebar after delay
-   */
-  showSuccess(): void {
-    this.showSuccessMessage = true;
-    this.showErrorMessage = false;
-    setTimeout(() => {
-      this.close();
-    }, 2000);
-  }
-
-  /**
-   * Shows error message
-   */
-  showError(message?: string): void {
-    this.showErrorMessage = true;
-    this.showSuccessMessage = false;
-    this.errorMessage = message || SHARED.EMPTY;
-  }
-
-  /**
-   * Clears all messages
-   */
-  clearMessages(): void {
-    this.showSuccessMessage = false;
-    this.showErrorMessage = false;
-  }
-
-  /**
-   * Checks if there are unsaved changes
-   * @returns True if there are unsaved changes, false otherwise
-   */
-  checkForUnsavedChanges(): boolean {
-    return this.hasUnsavedChanges;
-  }
-
-  /**
-   * Lifecycle hook that is called when component is destroyed.
-   * Cleans up subscriptions.
-   */
-  ngOnDestroy(): void {
-    this.destroy$.next();
-    this.destroy$.complete();
-  }
-}

package/src/lib/document/components/user-list/user-list.component.html

@@ -1,33 +0,0 @@
-<div class="user-list-container" [@slideInFromTop]>
-  <div class="user-cards">
-    <div 
-      *ngFor="let user of filteredUserData" 
-      class="user-card"
-      [class.selected]="selectedUser === user.name"
-      [style.border-color]="selectedUser === user.name ? getAvatarColor(user.color) : 'transparent'"
-      (click)="onUserSelect(user.name, user._id)"
-    >
-      @if(user.name === "Application Docs"){
-        <div class="user-avatar" [ngClass]="'avatar-' + user.color">
-          <span class="initials"><i class="pi pi-user"></i></span>
-        </div>
-      }@else {
-        <div class="user-avatar" [ngClass]="'avatar-' + user.color">
-          <span class="initials">{{ user.initials }}</span>
-        </div>
-      }
-      <div class="user-info">
-        <div class="username">{{ user.name }}</div>
-        <div class="document-counts">
-        <span style="color : #16A34A;"> {{ user.approved }} approved </span><span>/ {{ user.pending }} outstanding</span>
-        </div>
-      </div>
-     
-    </div>
-    
-    <!-- Show message when filtered list is empty -->
-    <div *ngIf="filteredUserData.length === 0 && shouldShowContainer" class="no-users-message" [@slideInFromTop]>
-      <p>No users available for this category.</p>
-    </div>
-  </div>
-</div>

package/src/lib/document/components/user-list/user-list.component.scss

@@ -1,118 +0,0 @@
-.user-list-container {
-  padding: 1rem;
-  padding-bottom: 0.5rem;
-}
-
-.user-cards {
-  display: flex;
-  flex-wrap: wrap;
-  transition: all 0.3s ease-in-out;
-}
-
-.user-card {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  padding: 1rem;
-  border: 2px solid transparent;
-  border-radius: 8px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  background: white;
-  min-width: 140px;
-  max-width: 300px;
-  height: 70px;
-  position: relative;
-  flex-shrink: 0;
-}
-
-.user-card:hover {
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
-}
-
-.user-card.selected {
-  background-color: #f8fafc;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
-  border-width: 2px;
-}
-
-.user-avatar {
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: bold;
-  color: white;
-  font-size: 14px;
-  flex-shrink: 0;
-  font-weight: 400;
-}
-
-.avatar-orange { background-color: #FEF3C7; color:  #B45309;}
-.avatar-blue { background-color: #DBEAFE; color: #1D4ED8;}
-.avatar-green { background-color: #22C55E1A; color: #36AA86;}
-.avatar-grey { background-color: #EBECED; color: #5B6676;}
-.avatar-purple { background-color: #3B82F61A; color: #3B82F6;}
-
-.user-info {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-}
-
-.username {
-  font-weight: 600;
-  color: #1f2937;
-  margin-bottom: 0.25rem;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  line-height: 1.2;
-}
-
-.document-counts {
-  font-size: 0.875rem;
-  color: #6b7280;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  line-height: 1.35;
-  padding-bottom: 2px;
-}
-
-.selection-indicator {
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  width: 20px;
-  height: 20px;
-  background-color: #10b981;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: white;
-  font-size: 12px;
-  flex-shrink: 0;
-}
-
-.no-users-message {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 2rem;
-  background: #f8fafc;
-  border-radius: 8px;
-  border: 2px dashed #d1d5db;
-  margin: 1rem 0;
-  
-  p {
-    color: #6b7280;
-    font-size: 0.875rem;
-    font-weight: 500;
-    margin: 0;
-    text-align: center;
-  }
-}

package/src/lib/document/components/user-list/user-list.component.spec.ts

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

package/src/lib/document/components/user-list/user-list.component.ts

@@ -1,181 +0,0 @@
-
-import { Component, Input, Output, EventEmitter, OnInit, OnChanges, SimpleChanges, ChangeDetectorRef, ChangeDetectionStrategy } from '@angular/core';
-import { trigger, state, style, transition, animate } from '@angular/animations';
-import { SHARED, USERLIST } from '../../../../Shared/constant/SHARED';
-import { DocumentStore } from '../../state/document.store';
-import { DocumentQuery } from '../../state/document.query';
-import { UserListModel } from '../../models/user-list.model';
-import { UserListService } from '../../services/user-list.service';
-import { DocumentCategory } from '../../models/document-category.model';
-import { DocumentHelperService } from '../../services/document.service';
-import { Subscription } from 'rxjs';
-
-@Component({
-  selector: 'lib-user-list',
-  standalone : false,
-  templateUrl: './user-list.component.html',
-  styleUrls: ['./user-list.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  animations: [
-    trigger('slideInFromTop', [
-      state('void', style({
-        opacity: 0,
-        transform: 'translateY(-10px)'
-      })),
-      state('*', style({
-        opacity: 1,
-        transform: 'translateY(0)'
-      })),
-      transition('void => *', [
-        animate('300ms ease-out')
-      ])
-    ]),
-    trigger('fadeIn', [
-      state('void', style({
-        opacity: 0,
-        transform: 'scale(0.8)'
-      })),
-      state('*', style({
-        opacity: 1,
-        transform: 'scale(1)'
-      })),
-      transition('void => *', [
-        animate('200ms ease-in-out')
-      ])
-    ])
-  ]
-})
-export class UserListComponent implements OnInit, OnChanges {
-  
-  @Input() userList: UserListModel[] = SHARED.EMPTY_ARRAY;
-  @Input() categories: DocumentCategory[] = SHARED.EMPTY_ARRAY;
-  @Output() userSelected = new EventEmitter<string>();
-  
-  userData: UserListModel[] = SHARED.EMPTY_ARRAY;
-  filteredUserData: UserListModel[] = SHARED.EMPTY_ARRAY;
-  selectedUser: string | undefined;
-  shouldShowContainer: boolean = true;
-  
-  private userListSubscription: Subscription = new Subscription();
-  private categoriesSubscription: Subscription = new Subscription();
-  
-  constructor(
-    public documentService : DocumentHelperService,
-    private documentStore: DocumentStore,
-    private documentQuery: DocumentQuery,
-    private userListService: UserListService,
-    private cdr: ChangeDetectorRef
-  ){
-
-  }
-
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes[SHARED.USER_LIST] && !changes[SHARED.USER_LIST].firstChange) {
-      this.initializeUserData();
-    }
-    if (changes[SHARED.CATEGORIES] && !changes[SHARED.CATEGORIES].firstChange) {
-      this.updateFilteredUserData();
-    }
-  }
-
-  initializeUserData(): void {
-    if (this.userList && this.userList.length > 0) {
-      this.userData = this.userListService.processUserData(this.userList);
-      this.updateFilteredUserData();
-    }
-  }
-
-  updateFilteredUserData(): void {
-    if (this.userData.length > 0 && this.categories.length > 0) {
-      this.filteredUserData = this.userListService.filterUsersByCategory(this.userData, this.categories);
-      this.shouldShowContainer = true;
-      if (this.selectedUser) {
-        const selectedUserInFiltered = this.filteredUserData.find(user => user.name === this.selectedUser);
-        if (!selectedUserInFiltered) {
-          this.selectedUser = undefined;
-          this.documentStore.setSelectedUserId(null);
-          this.userSelected.emit(SHARED.EMPTY);
-        }
-      }
-    } else {
-      this.filteredUserData = this.userData;
-      this.shouldShowContainer = true;
-    }
-  }
-
-  ngOnInit(): void {
-    this.initializeUserData();
-    this.userListSubscription.add(
-      this.documentQuery.selectUserList().subscribe(userList => {
-        if (userList && userList.length > 0) {
-          this.userList = userList;
-          this.initializeUserData();
-          this.cdr.markForCheck();
-        }
-      })
-    );
-
-    this.categoriesSubscription.add(
-      this.documentQuery.selectDocumentCategories().subscribe(categories => {
-        if (categories && categories.length > 0) {
-          this.categories = categories;
-          this.updateFilteredUserData();
-          this.cdr.markForCheck();
-        }
-      })
-    );
-
-    this.userListSubscription.add(
-      this.documentQuery.selectDocumentListResponse().subscribe(() => {
-        const currentUserList = this.documentQuery.getUserList();
-        if (currentUserList && currentUserList.length > 0) {
-          this.userList = currentUserList;
-          this.initializeUserData();
-          this.cdr.markForCheck();
-        }
-      })
-    );
-
-    this.documentQuery.selectSelectedUserId().subscribe(userId => {
-      if (userId) {
-        const user = this.userData.find(u => u._id === userId);
-        this.selectedUser = user ? user.name : undefined;
-      } else {
-        this.selectedUser = undefined;
-      }
-      this.cdr.markForCheck();
-    });
-
-    this.documentQuery.selectShowUserList().subscribe(show => {
-      if (!show && this.selectedUser) {
-        this.selectedUser = undefined;
-        this.userSelected.emit(SHARED.EMPTY);
-      }
-    });
-  }
-
-  onUserSelect(username: string, id: string): void {
-    if (this.selectedUser === username) {
-      this.selectedUser = undefined;
-      this.userListService.unselectUser();
-      this.userSelected.emit(SHARED.EMPTY);
-    } else {
-      this.selectedUser = username;
-      this.documentStore.setSelectedUserId(id);
-      this.userSelected.emit(username);
-    }
-  }
-
-  getAvatarColor(color: string | undefined): string {
-    if (!color) {
-      return SHARED.DEFAULT_COLOR;
-    }
-    return SHARED.COLOR_MAP[color as keyof typeof SHARED.COLOR_MAP] || SHARED.DEFAULT_COLOR;
-  }
-
-
-  ngOnDestroy(): void {
-    this.userListSubscription.unsubscribe();
-    this.categoriesSubscription.unsubscribe();
-  }
-}