Common View All Library

This library provides a dynamic, configuration-driven interface for Angular applications, including dynamic forms and data tables.

📋 Features

• Dynamic Form Generation from JSON configuration (using Formly)
• Data Table Display with sorting, pagination, and filtering (using Angular Material)
• Advanced Table Features: Column customization, Excel/PDF export (SAS URL based), multi-select
• Responsive Design: Optimized for both mobile and desktop views
• Configurable API Integration: Flexible base URL and prefix mapping for different services

🚀 Quick Setup

1. Installation

npm install @srikanthsai27/common-view-all-lib-test

2. Configuration

Configure the library in your app.config.ts or AppModule:

import { COMMON_VIEW_ALL_CONFIG } from '@srikanthsai27/common-view-all-lib-test';

const commonViewAllConfig = {
  commonBaseURL: 'https://your-api-base-url.com',
  apiPrefix: {
    UAD: 'uad-api',
    TAX: 'tax-api',
    FORMS: 'forms-api',
    PRODUCTS: 'products-api',
    INTEGRATION: 'integration-api',
    DOCUMENTS: 'documents-api',
    CHECKLIST: 'checklist-api'
  }
};

// In your providers array:
{ provide: COMMON_VIEW_ALL_CONFIG, useValue: commonViewAllConfig }

3. Usage

Import the component and use it in your template:

import { CommonViewAllComponent } from '@srikanthsai27/common-view-all-lib-test';

@Component({
  selector: 'app-report-page',
  standalone: true,
  imports: [CommonViewAllComponent],
  template: `
    <lib-common-view-all [screenConfigID]="'YOUR_SCREEN_CONFIG_ID'"></lib-common-view-all>
  `,
})
export class ReportPageComponent {}

🔧 Core Components

CommonViewAllComponent

The main entry point that fetches configuration and renders both the search form and the result table.

• Input: screenConfigID: string - The ID used to fetch the UI configuration from the backend.

Services

• LibCommonService: Handles common UI interactions and error dialogs.
• LibRestService: Manages API calls with configurable prefixes.
• LibFormlyApiService: Facilitates dynamic form generation and validation.

🌍 Required Dependencies

Ensure your project has the following dependencies installed:

• @angular/material
• @angular/cdk
• @ngx-formly/core
• @ngx-translate/core
• moment
• rxjs

🌍 Translation Keys

Add the following keys to your translation files (e.g., en.json):

{
  "search_criteria": "Search Criteria",
  "search": "Search",
  "reset": "Reset",
  "Edit_Filters": "Edit Filters",
  "not_find_search_filter": "No search filters found",
  "ERROR": "Error occurred",
  "customErrMsg": "Please contact support",
  "corsMessage": "CORS error"
}

📄 License

MIT