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. <lib-document-container [contextId]="contextId">

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. <document-viewer [selectedDocument]="selectedDocument">

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.

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.

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.