cat-documents-ng 1.0.4 → 1.0.6

package/src/lib/document/components/document-zoom-controls/document-zoom-controls.component.scss

@@ -0,0 +1,320 @@
+
+.control-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0;
+  width: 100%;
+}
+
+// Document name editing section
+.document-name-display {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  cursor: pointer;
+  padding: 0.75rem;
+  border-radius: 0.5rem;
+  transition: all 0.2s ease;
+  border: 1px solid transparent;
+  margin-right: auto;
+
+  &:hover {
+    background-color: transparent;
+    border-color: transparent;
+    transform: none;
+    box-shadow: none;
+  }
+
+  // Highlighting for editable document names
+  &.clickable-doc-name {
+    &:hover {
+    }
+  }
+
+  // Non-editable document names remain neutral
+  &.non-clickable-doc-name {
+    cursor: default;
+  }
+
+  .alias-name {
+    font-weight: 600;
+    color: #1e293b;
+    font-size: 1.125rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    line-height: 1.4;
+    
+    .edit-icon-small {
+      font-size: 0.75rem;
+      color: #64748b;
+      opacity: 0.7;
+      transition: all 0.2s ease;
+      padding: 0.25rem;
+      border-radius: 0.25rem;
+    }
+  }
+
+  // Only apply hover styles when document is editable
+  &.clickable-doc-name .alias-name:hover {
+    color: #1d4ed8;
+  }
+
+  .document-name {
+    font-size: 0.875rem;
+    color: #64748b;
+    font-weight: 400;
+    line-height: 1.3;
+    word-break: break-all;
+  }
+
+  // Only show edit icon hover effects when document is editable
+  &.clickable-doc-name:hover .edit-icon-small {
+    opacity: 1;
+    color: #475569;
+  }
+}
+
+
+// Inline editing style to match header-with-underline design
+.document-edit-container {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+  padding: 0;
+  background: transparent;
+  border-radius: 0;
+  border: none;
+
+  .document-name-input {
+    border: none !important;
+    border-bottom: 2px solid #3b82f6 !important;
+    border-radius: 0 !important;
+    padding: 0.25rem 0 !important;
+    font-size: 1.125rem !important;
+    font-weight: 600 !important;
+    color: #1e293b !important;
+    background: transparent !important;
+    transition: border-color 0.2s ease;
+    width: auto;
+    min-width: 12rem;
+    max-width: 100%;
+    box-shadow: none !important;
+    outline: none !important;
+
+    &:focus {
+      outline: none !important;
+      border-bottom-color: #1d4ed8 !important;
+      box-shadow: none !important;
+    }
+
+    &::placeholder {
+      color: #94a3b8;
+      font-weight: 400;
+    }
+  }
+
+  .document-name-subline {
+    font-size: 0.875rem;
+    color: #94a3b8;
+    padding-left: 0;
+    line-height: 1.3;
+  }
+}
+
+// Ensure PrimeNG input styles don't reintroduce borders/shadows
+:host ::ng-deep .document-name-input.p-inputtext,
+:host ::ng-deep .document-name-input.p-inputtext:enabled:focus,
+:host ::ng-deep .document-name-input.p-inputtext:focus {
+  border: none !important;
+  border-bottom: 2px solid #3b82f6 !important;
+  border-radius: 0 !important;
+  box-shadow: none !important;
+  outline: none !important;
+  background: transparent !important;
+}
+
+// Neutralize PrimeNG hover styles
+:host ::ng-deep .document-name-input.p-inputtext:hover,
+:host ::ng-deep .document-name-input.p-inputtext:enabled:hover {
+  border: none !important;
+  border-bottom: 2px solid #1d4ed8 !important;
+  border-radius: 0 !important;
+  box-shadow: none !important;
+  outline: none !important;
+  background: transparent !important;
+}
+
+.error-message-wrapper {
+  color: #dc2626;
+  font-size: 0.875rem;
+  font-weight: 500;
+  padding: 0.5rem 0.75rem;
+  background-color: #fef2f2;
+  border: 1px solid #fecaca;
+  border-radius: 0.5rem;
+  margin-top: 0.25rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+
+  &::before {
+    content: "⚠";
+    font-size: 1rem;
+  }
+}
+
+// Zoom controls section
+.zoom-controls {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  transition: all 0.2s ease;
+  margin-left: auto;
+  padding-right: 10px;
+  .zoom-button {
+    width: 44px;
+    height: 44px;
+    border-radius: 0.5rem;
+    border: none;
+    background: white;
+    color: #475569;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    font-size: 1.25rem;
+    font-weight: 600;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+
+    &:hover:not(:disabled) {
+      background: #3b82f6;
+      color: white;
+      transform: translateY(-2px);
+      box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
+    }
+
+    &:active:not(:disabled) {
+      transform: translateY(0);
+      box-shadow: 0 2px 6px rgba(59, 130, 246, 0.3);
+    }
+
+    &:disabled {
+      opacity: 0.4;
+      cursor: not-allowed;
+      background: #f1f5f9;
+      color: #94a3b8;
+      transform: none;
+    }
+
+    i {
+      font-size: 1rem;
+      transition: transform 0.2s ease;
+    }
+
+    &:hover:not(:disabled) i {
+      transform: scale(1.1);
+    }
+  }
+
+  .zoom-level {
+    min-width: 4.5rem;
+    text-align: center;
+    font-weight: 700;
+    color: #1e293b;
+    font-size: 1rem;
+    background: white;
+    padding: 0.75rem 1rem;
+    border-radius: 0.5rem;
+    border: 1px solid #e2e8f0;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+    transition: all 0.2s ease;
+    user-select: none;
+
+    &:hover {
+      background: #f8fafc;
+      border-color: #cbd5e1;
+      transform: translateY(-1px);
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    }
+  }
+
+  .reset-button {
+    padding: 0.75rem 1.25rem;
+    border: 1px solid #cbd5e1;
+    background: white;
+    color: #64748b;
+    border-radius: 0.5rem;
+    font-size: 0.875rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+    white-space: nowrap;
+
+    &:hover {
+      background: #f8fafc;
+      border-color: #94a3b8;
+      color: #475569;
+      transform: translateY(-1px);
+      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
+    }
+
+    &:active {
+      transform: translateY(0);
+    }
+  }
+}
+
+// Responsive design
+@media (max-width: 768px) {
+  .control-container {
+    gap: 0.75rem;
+    flex-direction: column;
+    align-items: stretch;
+    justify-content: flex-start;
+  }
+
+  .document-name-display {
+    margin-right: 0;
+    margin-bottom: 0.5rem;
+  }
+
+  .zoom-controls {
+    margin-left: 0;
+    align-self: flex-end;
+  }
+
+  .zoom-controls {
+    padding: 0.75rem;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+    justify-content: center;
+
+    .zoom-button {
+      width: 40px;
+      height: 40px;
+    }
+
+    .zoom-level {
+      min-width: 4rem;
+      padding: 0.5rem 0.75rem;
+    }
+
+    .reset-button {
+      padding: 0.5rem 1rem;
+      font-size: 0.8rem;
+    }
+  }
+
+  .document-name-display {
+    padding: 0.5rem;
+
+    .alias-name {
+      font-size: 1rem;
+    }
+  }
+}

package/src/lib/document/components/document-zoom-controls/document-zoom-controls.component.spec.ts

@@ -0,0 +1,59 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { DocumentZoomControlsComponent } from './document-zoom-controls.component';
+import { DocumentZoomService } from '../../services/document-zoom.service';
+import { ButtonModule } from 'primeng/button';
+
+describe('DocumentZoomControlsComponent', () => {
+  let component: DocumentZoomControlsComponent;
+  let fixture: ComponentFixture<DocumentZoomControlsComponent>;
+  let zoomService: jasmine.SpyObj<DocumentZoomService>;
+
+  beforeEach(async () => {
+    const spy = jasmine.createSpyObj('DocumentZoomService', ['zoomIn', 'zoomOut', 'resetZoom'], {
+      zoomLevel$: { subscribe: () => {} },
+      zoomConfig: { minZoom: 25, maxZoom: 400 }
+    });
+
+    await TestBed.configureTestingModule({
+      declarations: [DocumentZoomControlsComponent],
+      imports: [ButtonModule],
+      providers: [
+        { provide: DocumentZoomService, useValue: spy }
+      ]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(DocumentZoomControlsComponent);
+    component = fixture.componentInstance;
+    zoomService = TestBed.inject(DocumentZoomService) as jasmine.SpyObj<DocumentZoomService>;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should call zoomIn when zoom in button is clicked', () => {
+    component.zoomIn();
+    expect(zoomService.zoomIn).toHaveBeenCalled();
+  });
+
+  it('should call zoomOut when zoom out button is clicked', () => {
+    component.zoomOut();
+    expect(zoomService.zoomOut).toHaveBeenCalled();
+  });
+
+  it('should call resetZoom when reset button is clicked', () => {
+    component.resetZoom();
+    expect(zoomService.resetZoom).toHaveBeenCalled();
+  });
+
+  it('should disable zoom out button when at minimum zoom', () => {
+    component.currentZoom = 25;
+    expect(component.isZoomOutDisabled).toBe(true);
+  });
+
+  it('should disable zoom in button when at maximum zoom', () => {
+    component.currentZoom = 400;
+    expect(component.isZoomInDisabled).toBe(true);
+  });
+});

package/src/lib/document/components/document-zoom-controls/document-zoom-controls.component.ts

@@ -0,0 +1,150 @@
+import { Component, OnInit, OnDestroy, Input, Output, EventEmitter } from '@angular/core';
+import { DocumentZoomService } from '../../services/document-zoom.service';
+import { DocumentHttpService } from '../../services/document-http.service';
+import { DocumentListItem } from '../../models/document-list-response.model';
+import { Subscription } from 'rxjs';
+import { SHARED } from '../../../../Shared/constant/SHARED';
+import { ERRORS } from '../../../../Shared/constant/ERROR';
+
+@Component({
+  selector: 'document-zoom-controls',
+  templateUrl: './document-zoom-controls.component.html',
+  styleUrls: ['./document-zoom-controls.component.scss'],
+  standalone:false
+})
+export class DocumentZoomControlsComponent implements OnInit, OnDestroy {
+  @Input() selectedDocument?: DocumentListItem;
+  @Input() contextId?: string = SHARED.EMPTY;
+  @Input() isFormHide: boolean = false;
+  @Output() documentNameUpdated = new EventEmitter<void>();
+
+  currentZoom: number = 100;
+  private subscription: Subscription = new Subscription();
+
+  // Document name editing properties
+  isEditingDocumentName: boolean = false;
+  documentName: string = SHARED.EMPTY;
+  fileNameError: string = SHARED.EMPTY;
+  disallowedCharsRegex: RegExp = /[<>:"\/\\|?*]/;
+
+  constructor(
+    private zoomService: DocumentZoomService,
+    private documentHttpService: DocumentHttpService
+  ) {}
+
+  ngOnInit(): void {
+    this.subscription.add(
+      this.zoomService.zoomLevel$.subscribe(zoom => {
+        this.currentZoom = zoom;
+      })
+    );
+  }
+
+  ngOnDestroy(): void {
+    this.subscription.unsubscribe();
+  }
+
+  get isZoomOutDisabled(): boolean {
+    return this.currentZoom <= this.zoomService.zoomConfig.minZoom;
+  }
+
+  get isZoomInDisabled(): boolean {
+    return this.currentZoom >= this.zoomService.zoomConfig.maxZoom;
+  }
+
+  zoomIn(): void {
+    this.zoomService.zoomIn();
+  }
+
+  zoomOut(): void {
+    this.zoomService.zoomOut();
+  }
+
+  resetZoom(): void {
+    this.zoomService.resetZoom();
+  }
+
+  // Document name editing methods
+  onDocumentNameClick(): void {
+    // Only allow editing if the document alias is editable
+    if (!this.selectedDocument?.isAliasEditable) {
+      return;
+    }
+    
+    this.isEditingDocumentName = true;
+    if (this.selectedDocument?.aliasName && this.selectedDocument.aliasName.trim() !== SHARED.EMPTY) {
+      this.documentName = this.selectedDocument.aliasName;
+    } else if (this.selectedDocument?.docName) {
+      const lastDotIndex = this.selectedDocument.docName.lastIndexOf('.');
+      if (lastDotIndex !== -1) {
+        this.documentName = this.selectedDocument.docName.substring(0, lastDotIndex);
+      } else {
+        this.documentName = this.selectedDocument.docName;
+      }
+    }
+    
+    setTimeout(() => {
+      const inputElement = document.querySelector('.document-name-input') as HTMLInputElement;
+      if (inputElement) {
+        inputElement.focus();
+        inputElement.select();
+      }
+    }, 100);
+  }
+
+  cancelDocumentNameEdit(): void {
+    this.isEditingDocumentName = false;
+    this.fileNameError = SHARED.EMPTY;
+  }
+
+  onDocumentNameChange(event: Event): void {
+    const input = event.target as HTMLInputElement;
+    this.documentName = input.value;
+    if (this.disallowedCharsRegex.test(this.documentName)) {
+      this.fileNameError = ERRORS.ERROR_FILE_NAME_INVALID_CHARACTERS;
+    } else if (this.documentName.trim() === SHARED.EMPTY) {
+      this.fileNameError = ERRORS.ERROR_FILE_NAME_EMPTY;
+    } else {
+      this.fileNameError = SHARED.EMPTY;
+    }
+  }
+
+  handleSaveClick(): void {
+    if (!this.selectedDocument?._id) {
+      return;
+    }
+
+    let hasChanged = false;
+    if (this.selectedDocument.aliasName && this.selectedDocument.aliasName.trim() !== SHARED.EMPTY) {
+      hasChanged = this.documentName !== this.selectedDocument.aliasName;
+    } else if (this.selectedDocument.docName) {
+      const docNameWithoutExtension = this.selectedDocument.docName.lastIndexOf(SHARED.DOT) !== -1 
+        ? this.selectedDocument.docName.substring(0, this.selectedDocument.docName.lastIndexOf(SHARED.DOT))
+        : this.selectedDocument.docName;
+      hasChanged = this.documentName !== docNameWithoutExtension;
+    }
+    
+    if (hasChanged && !this.fileNameError) {
+      const payload = { aliasName: this.documentName };
+      this.documentHttpService.updateDocumentName(this.selectedDocument._id, payload)
+        .subscribe({
+          next: (res: any) => {
+            if (res && res.aliasName) {
+              this.selectedDocument!.aliasName = res.aliasName;
+            } else {
+              this.selectedDocument!.aliasName = this.documentName;
+            }
+            this.isEditingDocumentName = false;
+            this.fileNameError = SHARED.EMPTY;
+            this.documentNameUpdated.emit();
+          },
+          error: (error: any) => {
+            this.fileNameError = error.message;
+          }
+        });
+    } else {
+      this.isEditingDocumentName = false;
+      this.fileNameError = SHARED.EMPTY;
+    }
+  }
+}

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

@@ -0,0 +1,44 @@
+<div class="document-sidebar-container">
+  <!-- Menu items are now used for navigation to specific sections, not for filtering documents -->
+  <p-card class="widget-menu-wrapper h-full">
+    @if(applicationNumber){
+      <div class="flex align-items-center justify-content-between widget-menu-header-wrapper">
+        <p class="mb-0 application-title-wrapper">ID - {{applicationNumber}}</p>
+        <div class="expand-icon-wrapper">
+          <i class="ri-arrow-left-s-line text-primary flex align-items-center justify-content-center w-full h-full"></i>
+        </div>
+      </div>
+    }
+
+    <div class="widget-menu-container" >
+      <div class="widget-menu-wrapper h-ful l custom-scroll">
+       <p-menu [model]="categories" styleClass="w-full md:w-15rem">
+            <ng-template pTemplate="submenuheader" let-item>
+                <span [style]="{
+                    color : '#9EA0B3'
+                }">{{  item.label }} Documents</span>
+            </ng-template>
+            <ng-template pTemplate="item" let-item>
+                <a pRipple 
+                   class="flex align-items-center p-menuitem-link"
+                   [class.selected-menu-item]="selectedMenuItemId === item._id"
+                   [class.disabled-menu-item]="item.isSelectable === false"
+                   [class.pointer-events-none]="item.isSelectable === false"
+                   [style.opacity]="item.isSelectable === false ? '0.5' : '1'"
+                   [style.cursor]="item.isSelectable === false ? 'not-allowed' : 'pointer'"
+                   (click)="onMenuItemClick($event, item)">
+                    <span [class]="item.icon" class="text-xl"></span>
+                    <span class="ml-2">{{ item.label }}</span>
+                    <p-badge *ngIf="item.menuData?.shouldShowBadge" 
+                           class="ml-auto" 
+                           [severity]="item.menuData?.badgeSeverity" 
+                           [value]="item.menuData?.badgeValue" />
+                </a>
+            </ng-template>
+        </p-menu>
+      </div>
+    </div>
+  </p-card>
+</div>
+
+