cat-documents-ng 1.0.6 → 1.0.8

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

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

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

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

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