Installation
To install the library, use the following npm command:
npm i cat-documents-ng
CatDocumentLib
This project was generated using
Angular CLI version 19.0.0.
Using the Components
To use the lib-document-container component in your project, include it in your template as follows:
it needs an contextId to get document-container deatils.
Using the Document Viewer
If you want to use the standalone document-viewer component, include it in your template like this:
the document which you want to see pass it to the document-viewer.
Both components are designed to integrate seamlessly into your Angular application.
Usage
Add DocumentModule to your module's imports
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { DocumentModule } from 'cat-documents-ng';
@NgModule({
imports: [BrowserModule, DocumentModule],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
class AppModule {}
platformBrowserDynamic().bootstrapModule(AppModule);
DoumentContainer Overview
The DocumentContainerComponent is a comprehensive Angular component for managing and displaying a list of documents, integrating services and folder components.
Features
Document Fetching:
Fetches documents based on contextId using DocumentService.
Handles subscription management for observables.
Component Integration:
Uses FolderContainerComponent to display folder panels.
Displays documents via DocumentListComponent.
Template Highlights
Grid Layout: Organizes folder and document displays in a scrollable container.
Component Embedding: Integrates lib-folder-container and lib-document-list for seamless functionality.
Key Properties and Methods
Properties:
contextId: Input for context identification.
documentList: Stores the list of documents fetched from the service.
Methods:
ngOnInit(): Fetches documents using DocumentService based on contextId.
ngOnDestroy(): Cleans up subscriptions on component destruction.
!
Alt text for the image
DocumentUploadComponent Overview
The DocumentUploadComponent is a robust Angular component for handling file uploads with real-time progress tracking and user-friendly interfaces.
Features
File Upload:
Allows drag-and-drop or manual selection of files.
Accepts .pdf and .png file formats.
Supports multiple file uploads.
Progress Tracking:
Displays individual file upload progress.
Shows overall progress as a percentage.
Error Handling:
Provides feedback for upload errors.
Allows users to remove failed uploads.
Template Highlights
Drag-and-Drop Interface: Encourages intuitive file uploads.
Progress Bars: Visualizes upload progress for individual files and total size.
Dynamic Interaction: Includes removal options for uploaded or in-progress files.
Key Properties and Methods
Properties:
contextId: Input for the context to associate with uploaded files.
uploadedFiles: List of uploaded files.
totalSizePercent: Tracks overall upload progress.
Methods:
choose(event, callback): Triggers file explorer.
handleTemplatedUpload(file): Processes and uploads a single file.
onSelectedFiles(event): Handles new file selections and initiates uploads.
handleDocumentRemove(file, index): Removes a file from the upload list.
getProgress(file): Retrieves upload progress for a specific file.
DocumentViewerComponent Overview
The DocumentViewerComponent is an Angular component for managing and viewing detailed document information, including images and PDFs.
Features
Document Display:
Displays documents as images or PDFs based on the content type.
Alert and Summary Integration:
Provides alerts and timeline summaries for document status.
Editable Notes:
Allows users to add and edit notes related to the document.
Property Details:
Displays detailed property information associated with the document.
Template Highlights
Content Viewer: Dynamically displays images or PDFs based on document type.
Interactive Alerts: Shows verification status with interactive visuals.
Timeline Summary: Uses a timeline to show document-related events.
Property Details: Displays additional document-related property information.
Key Properties and Methods
Properties:
selectedDocument: Input for the currently selected document.
notes: Editable notes associated with the document.
countries: List of countries for additional document metadata.
propertyDetails: Additional details related to the document.
alertData: Data for alerts and verification statuses.
Methods:
isImage(contentType): Determines if the document is an image based on MIME type.
!
Alt text for the image
DocumentListComponent Overview
The DocumentListComponent is an Angular component designed to display a list of documents and manage interactions such as viewing document details and uploading new files. It integrates seamlessly with other components like the Document Viewer and Upload Sidebar to provide a comprehensive document management experience.
Features
Displays a list of documents using the lib-document-list-item component.
Supports user interaction for viewing individual documents.
Includes functionality to upload new documents via a sidebar.
Configurable through input properties for customization and integration.
Key Properties
Input Properties
contextId: (string)
Represents the context identifier for document operations.
Default Value: SHARED.EMPTY
documentList: (DocumentModel[])
An array of documents to display in the component.
Default Value: []
Internal Properties
selectedDocument: (DocumentModel)
Represents the currently selected document for viewing in the dialog.
isSidebarVisible: (boolean)
Determines the visibility of the document upload sidebar.
Default Value: false
isdialogVisible: (boolean)
Determines the visibility of the document viewer dialog.
Default Value: false
Key Methods
handleFileUploadClick(event: MouseEvent): void
Handles the click event for the file upload button.
Prevents event propagation and displays the upload sidebar.
Parameters:
event: The MouseEvent triggered by the button click.
handleClickForDocument(document: DocumentModel): void
Selects a document to view and displays it in the dialog.
Parameters:
document: The document clicked by the user.
handleCloseModal(): void
Closes the document viewer dialog and resets the selected document.
FolderBlockComponent Overview
The FolderBlockComponent is an Angular component designed for displaying folder blocks with functionality to filter based on folder IDs.
Features
Folder Display:
Renders a grid of folder blocks with details such as file count and status.
Each folder block is represented by a FolderBlockModel.
Status Indicators:
Displays counts for missing and pending files using SHARED constants.
Template Highlights
Folder Details: Displays file counts, folder name, and dynamic status indicators.
Filter Interaction: Allows users to filter documents by clicking on a folder.
Key Properties and Methods
Properties:
folderBlocks: Input property for an array of FolderBlockModel representing folder data.
missingFileCount & pendingFileCount: Display counts for missing and pending files.
Methods:
handleClickForFilter(folderBlockId): Validates the folder ID and triggers filtering logic.
FolderContainerComponent Overview
The FolderContainerComponent is responsible for rendering a container that displays a list of documents along with associated folder panel data.
Features
Folder and Document Integration:
Combines folder panel data (FOLDERPANEL) and a list of documents (DocumentModel[]).
Displays folder blocks using FolderBlockComponent.
Data Sourcing:
Sources folder panel data from FOLDERPANEL.
Accepts a document list as an input.
Template Highlights
Folder Blocks Display: Uses lib-folder-block to render folder panels.
Key Properties
Properties:
documentList: Input for a list of documents to display.
folderBlocks: Data sourced from FOLDERPANEL for folder blocks.
Additional Resources
For more information on using the Angular CLI, including detailed command references, visit the
Angular CLI Overview and Command Reference page.