cat-documents-ng 1.0.4 → 1.0.6

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

@@ -0,0 +1,157 @@
+:host {
+  display: block;
+}
+.backdrop-shadow {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  /* Shadow effect */
+  z-index: 1000;
+  /* Ensure it appears below the sidebar */
+}
+.sidebar-header {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  padding: 0;
+  width: 100%;
+  gap: 1rem;
+  ::ng-deep{
+    .p-messages{
+      .p-message-success{
+        margin-left: 2rem;
+        font-size: 15px;
+      }
+      .p-message-wrapper{
+        padding: 1rem 1rem;
+
+      }
+    }
+  }
+}
+
+.sidebar-title {
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: #212529;
+  flex: 0 1 auto;
+  white-space: nowrap;
+  min-width: 0;
+}
+
+.header-content {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-left: auto;
+  margin-right: 0;
+}
+
+.close-button {
+  background: none;
+  border: none;
+  color: #6c757d;
+  cursor: pointer;
+  padding: 0.5rem;
+  border-radius: 0.375rem;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 2rem;
+  min-height: 2rem;
+  margin-right: 0.5rem;
+
+  &:hover {
+    background-color: #e9ecef;
+    color: #495057;
+  }
+
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 0 3px rgba(15, 139, 253, 0.3);
+  }
+
+  i {
+    font-size: 1rem;
+  }
+}
+
+.sidebar-content {
+  height: 100%;
+  overflow-y: auto;
+  padding: 0;
+}
+
+/* Custom close button styles */
+.header-actions {
+  .p-button-text.p-button-rounded {
+    width: 2rem;
+    height: 2rem;
+    border-radius: 50%;
+    
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.1);
+    }
+  }
+}
+
+// Custom PrimeNG Sidebar Styles
+::ng-deep {
+  .p-sidebar {
+    .p-sidebar-header {
+      // padding: 1.5rem 1.5rem 0 1.5rem;
+      border-bottom: 1px solid #e9ecef;
+      margin-bottom: 1rem;
+      background-color: #f8f9fa;
+    }
+
+    .p-sidebar-content {
+      padding: 0 1.5rem 1.5rem 1.5rem;
+      height: calc(100% - 80px);
+      overflow-y: auto;
+    }
+
+    &.p-sidebar-right {
+      .p-sidebar-content {
+        padding-left: 1.5rem;
+        padding-right: 1.5rem;
+      }
+    }
+
+    &.p-sidebar-left {
+      .p-sidebar-content {
+        padding-left: 1.5rem;
+        padding-right: 1.5rem;
+      }
+    }
+  }
+
+  // Responsive adjustments
+  @media (max-width: 768px) {
+    .p-sidebar {
+      width: 100% !important;
+      max-width: 100% !important;
+      
+      .p-sidebar-header {
+        padding: 1rem 1rem 0 1rem;
+      }
+      
+      .p-sidebar-content {
+        padding: 0 1rem 1rem 1rem;
+      }
+    }
+  }
+}

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

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

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

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

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

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