cat-documents-ng 1.0.4 → 1.0.6

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

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

package/src/lib/document/constant/DOCUMENT_HISTORY.ts

@@ -0,0 +1,52 @@
+/**
+ * Constants for Document History labels and styling
+ */
+export const DOCUMENT_HISTORY = {
+  // Document History Labels
+  LABELS: {
+    DOCUMENT_REQUESTED: 'Document Requested',
+    DOCUMENT_UPLOADED: 'Document Uploaded',
+    DOCUMENT_REJECTED: 'Document Rejected',
+    DOCUMENT_ACCEPTED: 'Document Accepted'
+  },
+
+  // Icon classes for different actions
+  ICONS: {
+    DOCUMENT_REQUESTED: 'pi pi-file',
+    DOCUMENT_UPLOADED: 'pi pi-cloud-upload',
+    DOCUMENT_REJECTED: 'pi pi-times',
+    DOCUMENT_ACCEPTED: 'pi pi-check'
+  },
+
+  // Text color classes - matching the design in the image
+  TEXT_COLORS: {
+    DOCUMENT_REQUESTED: 'text-gray-700', // Dark gray for better readability
+    DOCUMENT_UPLOADED: 'text-green-700', // Dark green for uploaded
+    DOCUMENT_REJECTED: 'text-red-700',   // Dark red for rejected
+    DOCUMENT_ACCEPTED: 'text-green-700'  // Dark green for accepted
+  },
+
+  // Background color classes - matching the light gray design from image
+  BG_COLORS: {
+    DOCUMENT_REQUESTED: 'bg-gray-100',   // Light gray like in the image
+    DOCUMENT_UPLOADED: 'bg-green-50',    // Very light green
+    DOCUMENT_REJECTED: 'bg-red-50',      // Very light red
+    DOCUMENT_ACCEPTED: 'bg-green-50'     // Very light green
+  },
+
+  // Border color classes - subtle borders
+  BORDER_COLORS: {
+    DOCUMENT_REQUESTED: 'border-gray-300', // Medium gray border
+    DOCUMENT_UPLOADED: 'border-green-300', // Light green border
+    DOCUMENT_REJECTED: 'border-red-300',   // Light red border
+    DOCUMENT_ACCEPTED: 'border-green-300'  // Light green border
+  },
+
+  // Icon background color classes - matching the circular icon design
+  ICON_BG_COLORS: {
+    DOCUMENT_REQUESTED: 'icon-bg-blue',    // Blue for requested (as shown in image)
+    DOCUMENT_UPLOADED: 'icon-bg-green',    // Green for uploaded
+    DOCUMENT_REJECTED: 'icon-bg-red',      // Red for rejected
+    DOCUMENT_ACCEPTED: 'icon-bg-green'     // Green for accepted
+  }
+}; 

package/src/lib/document/directives/document.directive.ts

@@ -0,0 +1,32 @@
+import { Directive, TemplateRef, ViewContainerRef } from "@angular/core";
+import { DocumentModel } from "../models/document.model";
+import { DocumentHelperService } from "../services/document.service";
+
+/**
+ * Directive to display the document data
+ */
+@Directive({
+    selector: '[doc]',
+    standalone: false
+})
+export class DocumentDirective {
+
+    /**
+     * Creates an instance of DocumentDirective.
+     * @param documentService Service to get the document data.
+     * @param templateRef Reference to the template.
+     * @param vcr View container reference to manage the view.
+     */
+    constructor(
+        private documentService: DocumentHelperService,
+        private templateRef: TemplateRef<any>,
+        private vcr: ViewContainerRef
+    ) {
+        this.documentService.get().subscribe((document: DocumentModel | null) => {
+            this.vcr.clear();
+            if (document) {
+                this.vcr.createEmbeddedView(this.templateRef, { $implicit: document });
+            }
+        });
+    }
+}

package/src/lib/document/directives/permission.directive.ts

@@ -0,0 +1,72 @@
+import { Directive, Input, ElementRef, Renderer2, SimpleChanges, OnChanges } from '@angular/core';
+import { SessionService } from '../../../Shared/services/session.service';
+
+/**
+ * Directive to conditionally show or hide elements based on user permissions.
+ * @class HasPermissionDirective
+ * @typedef {HasPermissionDirective}
+ */
+@Directive({
+  selector: '[permission]',
+  standalone: false
+})
+export class HasPermissionDirective implements OnChanges {
+  
+  /**
+   * The required permission(s) to display the element.
+   * Accepts a single string or an array of strings.
+   * @type {string | string[]}
+   */
+  @Input() permission?: string | string[];
+
+  /**
+   * Creates an instance of HasPermissionDirective.
+   * @param {ElementRef} el - Reference to the host element.
+   * @param {Renderer2} renderer - Angular Renderer for DOM manipulation.
+   * @param {SessionService} sessionService - Service to retrieve user permissions.
+   */
+  constructor(
+    private el: ElementRef,
+    private renderer: Renderer2,
+    public sessionService: SessionService
+  ) {}
+
+  /**
+   * Lifecycle hook that is called when input properties change.
+   * @param {SimpleChanges} changes - The changes in input properties.
+   */
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes['permission']) {
+      this.checkPermission();
+    }
+  }
+
+  /**
+   * Checks if the user has the required permission(s).
+   * Hides the element if the permission is not found.
+   */
+  private checkPermission() {
+    // If no permission is required (empty string, null, or undefined), show the element
+    if (!this.permission || this.permission === '' || (Array.isArray(this.permission) && this.permission.length === 0)) {
+      this.renderer.removeStyle(this.el.nativeElement, 'display');
+      return;
+    }
+
+    const userPermissionsObjects = this.sessionService.getUserPermissions();
+    const userPermissionNames = userPermissionsObjects?.map((perm: any) => perm.name) || [];
+
+    const requiredPermissions = Array.isArray(this.permission)
+      ? this.permission
+      : [this.permission];
+
+    const hasPermission = requiredPermissions.some(permission =>
+      userPermissionNames.includes(permission)
+    );
+
+    if (!hasPermission) {
+      this.renderer.setStyle(this.el.nativeElement, 'display', 'none');
+    } else {
+      this.renderer.removeStyle(this.el.nativeElement, 'display');
+    }
+  }
+}

package/src/lib/document/document.module.ts

@@ -0,0 +1,351 @@
+import { APP_INITIALIZER, CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DocumentContainerComponent } from './components/document-container/document-container.component';
+import { FolderContainerComponent } from './components/folder-container/folder-container.component';
+import { FolderBlockComponent } from './components/folder-block/folder-block.component';
+import { DocumentListComponent } from './components/document-list/document-list.component';
+import { AccordionModule } from 'primeng/accordion';
+import { DocumentListItemComponent } from './components/document-list-item/document-list-item.component';
+import { ButtonModule } from 'primeng/button';
+import { SidebarModule } from 'primeng/sidebar';
+import { FileUploadModule } from 'primeng/fileupload';
+import { DocumentUploadComponent } from './components/document-upload/document-upload.component';
+import { MessageService } from 'primeng/api';
+import { ConfirmationService } from 'primeng/api';
+import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
+import { ProgressBarModule } from 'primeng/progressbar';
+import { BadgeModule } from 'primeng/badge';
+import { ListboxModule } from 'primeng/listbox';
+import { TimelineModule } from 'primeng/timeline';
+import { CheckboxModule } from 'primeng/checkbox';
+import { InputTextareaModule } from 'primeng/inputtextarea';
+import { FormsModule } from '@angular/forms';
+import { DocumentViewerComponent } from './components/document-viewer/document-viewer.component';
+import { DocumentHistoryComponent } from './components/document-history/document-history.component';
+import { DocumentContentViewerComponent } from './components/document-content-viewer/document-content-viewer.component';
+import { DocumentZoomControlsComponent } from './components/document-zoom-controls/document-zoom-controls.component';
+import { PdfViewerModule } from 'ng2-pdf-viewer';
+import { NgxDocViewerModule } from 'ngx-doc-viewer';
+import { DialogModule } from 'primeng/dialog';
+import { AppConfigService } from '../../Shared/services/app-config.service';
+import { GlobalErrorHandler } from '../../Shared/services/global-error.handler';
+import { DropdownModule } from 'primeng/dropdown';
+import { InputTextModule } from 'primeng/inputtext';
+import { DocumentDirective } from './directives/document.directive';
+import { LinkedDocumentComponent } from './components/linked-document/linked-document.component';
+import { DocumentsMenuComponent } from './components/documents-menu/documents-menu.component';
+import { MenuModule } from 'primeng/menu';
+import { PanelMenuModule } from 'primeng/panelmenu';
+import { CardModule } from 'primeng/card';
+import { TableModule } from 'primeng/table';
+import { UserListComponent } from './components/user-list/user-list.component';
+import { DocumentStatusComponent } from './components/document-status/document-status.component';
+import { DocumentActionsComponent } from './components/document-actions/document-actions.component';
+import { DocumentSearchComponent } from './components/document-search/document-search.component';
+import { SharedModule } from '../../Shared/shared.module';
+import { DocumentActionsService } from './services/document-actions.service';
+import { DocumentContentTypeService } from './services/document-content-type.service';
+import { SidebarComponent } from './components/sidebar/sidebar.component';
+import { RequestDocumentComponent } from './components/request-document/request-document.component';
+import { RadioButtonModule } from 'primeng/radiobutton';
+import { ToastModule } from 'primeng/toast';
+import { TooltipModule } from 'primeng/tooltip';
+import { MessagesModule } from 'primeng/messages';
+import { MessageModule } from 'primeng/message';
+
+/**
+ * @module DocumentModule
+ * 
+ * The `DocumentModule` handles the organization and display of document and folder components 
+ * in the application. This module is designed to support features like folder containers, 
+ * document lists, and individual document items.
+ */
+@NgModule({
+  declarations: [
+    /**
+     * The main container for managing documents.
+     * DocumentContainerComponent
+     */
+    DocumentContainerComponent,
+
+    /**
+     * A container component to manage folders.
+     * FolderContainerComponent
+     */
+    FolderContainerComponent,
+
+    /**
+     * A block component that represents an individual folder.
+     * FolderBlockComponent
+     */
+    FolderBlockComponent,
+
+    /**
+     * A component to display a list of documents.
+     * DocumentListComponent
+     */
+    DocumentListComponent,
+
+    /**
+     * A component representing an individual item in the document list.
+     * DocumentListItemComponent
+     */
+    DocumentListItemComponent,
+
+    /** 
+     * A component representing to upload a file.
+     */
+    DocumentUploadComponent,
+
+    /**
+     * A component representing and allow you to view the document.
+     */
+    DocumentViewerComponent,
+
+    /**
+     * A component representing document history timeline.
+     */
+    DocumentHistoryComponent,
+
+    /**
+     * A reusable component for viewing different types of document content.
+     */
+    DocumentContentViewerComponent,
+
+    /**
+     * A component providing zoom controls for document viewing.
+     */
+    DocumentZoomControlsComponent,
+
+    /**
+     * A directive to show the document.
+     */
+    DocumentDirective,
+
+    /**
+     * A component which have linked documents.
+     */
+    LinkedDocumentComponent,
+    DocumentsMenuComponent,
+    UserListComponent,
+    DocumentStatusComponent,
+    DocumentActionsComponent,
+    DocumentSearchComponent,
+    /**
+     * A sidebar component for content projection.
+     */
+    SidebarComponent,
+    /**
+     * A component to request a document (without upload), with description.
+     */
+    RequestDocumentComponent,
+
+  ],
+  imports: [
+    /**
+     * Angular's CommonModule is imported to access common directives like `ngIf` and `ngFor`.
+     */
+    CommonModule,
+
+    /**
+     * PrimeNG AccordionModule is used for creating collapsible sections in the UI.
+     */
+    AccordionModule,
+
+    /**
+     * HttpClientModule for the http calls
+     */
+    HttpClientModule,
+
+    /**
+     * PrimeNG ButtonModule is used for creating buttons in the UI.
+     */
+    ButtonModule,
+
+    /**
+     * PrimeNG SidebarModule is used for creating sidebars.
+     */
+    SidebarModule,
+
+    /**
+     * PrimeNG FileUploadModule is used for uploading file.
+     */
+    FileUploadModule,
+
+    /**
+     * PrimeNG ProgressBarModule is used for showing progress.
+     */
+    ProgressBarModule,
+
+    /**
+     * PrimeNG BadgeModule is used for showing badge value.
+     */
+    BadgeModule,
+
+    /**
+     * PrimeNG ListboxModule is used for showing listbox value.
+     */
+    ListboxModule,
+
+    /**
+     * PrimeNG CheckboxModule is used for showing checkbox value.
+     */
+    CheckboxModule,
+
+    /**
+     * PrimeNG RadioButtonModule is used for showing radio button values.
+     */
+    RadioButtonModule,
+
+    /**
+     * PrimeNG TimelineModule is used for showing timeline value.
+     */
+    TimelineModule,
+    /**
+     * PrimeNG InputTextareaModule is used for showing textarea value.
+     */
+    InputTextareaModule,
+    /**
+     * FormsModule to handle the forms.
+     */
+    FormsModule,
+    /**
+     *  PdfViewerModule to handle and make visible the pdf.
+     */
+    PdfViewerModule,
+    /**
+     * NgxDocViewerModule to handle and make visible Office documents.
+     */
+    NgxDocViewerModule,
+    /**
+     * PrimeNG DialogModule is used for showing dialog.
+     */
+    DialogModule,
+    /**
+     * PrimeNG DropdownModule is used for creating dropdown menus, allowing users to select options from a list.
+     */
+    DropdownModule,
+    /**
+     * PrimeNG InputTextModule is used for creating InputTextFeilds, allowing users to enter name for a document.
+     */
+    InputTextModule,
+
+    MenuModule,
+    PanelMenuModule,
+    CardModule,
+    TableModule,
+    SharedModule,
+    InputTextareaModule,
+    ToastModule,
+    TooltipModule,
+    MessagesModule,
+    MessageModule
+    
+  ],
+  exports: [
+  /**
+   * Exports the `DocumentContainerComponent` to be used in other modules.
+   */
+    DocumentContainerComponent,
+    /**
+     * Exports the `DocumentViewerComponent` to be used in other modules.
+     */
+    DocumentViewerComponent,
+
+    /**
+     * Exports the `DocumentContentViewerComponent` to be used in other modules.
+     */
+    DocumentContentViewerComponent,
+
+    /**
+     * Exports the `DocumentZoomControlsComponent` to be used in other modules.
+     */
+    DocumentZoomControlsComponent,
+    /**
+     * Exports the `DocumentActionsComponent` to be used in other modules.
+     */
+    DocumentActionsComponent,
+    /**
+     * A component to display a list of documents.
+     * DocumentListComponent
+     */
+    DocumentListComponent,
+
+    /**
+     * A component for uploading documents.
+     * DocumentUploadComponent
+     */
+    DocumentUploadComponent,
+
+    /**
+     * A directive to show the document.
+     */
+    DocumentDirective,
+
+    /**
+     * A component for searching documents.
+     */
+    DocumentSearchComponent,
+
+    /**
+     * A sidebar component for content projection.
+     */
+    SidebarComponent,
+    RequestDocumentComponent,
+
+
+  ],
+  providers: [
+    /**
+     * Provide the messageservice to be used in other components.
+     */
+    MessageService,
+
+    /**
+     * Provide the DocumentActionsService to be used in other components.
+     */
+    DocumentActionsService,
+
+    /**
+     * Provide the DocumentContentTypeService to be used in other components.
+     */
+    DocumentContentTypeService,
+
+    /**
+     * Provide the ConfirmationService to be used in other components.
+     */
+    ConfirmationService,
+
+    /**
+     * Provide the messageservice to be used in other components.
+     */
+    { provide: GlobalErrorHandler, useClass: GlobalErrorHandler },
+    /**
+     * Initializes the application configuration by loading it from the AppConfigService
+     * before the application starts.
+     * This ensures that the configuration is available for the rest of the app when needed.
+     * The configuration is loaded asynchronously using the APP_INITIALIZER.
+     * @returns {Function} - A function that loads the configuration from the AppConfigService.
+     */
+    {
+      provide: APP_INITIALIZER,
+      /**
+       * This useFactory is executed when the app initializes.
+       * It calls the AppConfigService to load the configuration.
+       * If an error occurs, it throws an error.
+       * @param {AppConfigService} configService - The service responsible for loading the application configuration.
+       * @returns {Function} - A function that loads the configuration from the AppConfigService.
+       */
+      useFactory: (configService: AppConfigService) => () =>
+        configService.loadAppConfig().catch((error) => {
+          throw new Error(error);
+        }),
+      deps: [AppConfigService],
+      multi: true,
+    },
+    
+  ]
+  ,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class DocumentModule { }