UI Components

This document details the user interface components used in the Digibit ERP system, organized by their functionality and purpose.

Shared Components

Header Component (header.component.ts)

The header component provides the main navigation menu for the application.

Features: - Multi-language support with language switcher - Main navigation menu with dropdowns - Import functionality for articles and companies - User authentication controls (login/logout) - Responsive design

Template Structure:

<p-menubar [model]="items"></p-menubar>

Key Properties: - items: Array of MenuItem objects defining the navigation structure - Language switching functionality - Document type selection for creating new documents

Message Component (message.component.ts)

Handles application-wide notifications and messages.

Features: - Toast notifications - Error message display - Success confirmations - Warning alerts

Files Upload Component (files-upload.component.ts)

Provides drag-and-drop file upload functionality.

Features: - Drag and drop interface - Multiple file selection - Progress indicators - File type validation

Page Components

Companies Module

Companies Component (companies.component.ts)

  • Displays a list of all companies
  • Provides filtering and search capabilities
  • Allows creation of new companies
  • Implements table view with pagination

Company Component (company.component.ts)

  • Form for viewing/editing individual company details
  • Dynamic field support for custom attributes
  • Validation for required fields

Company New Component (company-new.component.ts)

  • Form for creating new companies
  • Similar functionality to Company component but for new entries

Articles Module

Articles Component (articles.component.ts)

  • Displays a comprehensive list of articles (products/inventory items)
  • Advanced filtering options
  • Bulk operations support
  • Export capabilities

Article Component (article.component.ts)

  • Detailed view and editing form for individual articles
  • Includes pricing, inventory, and supplier information
  • Thumbnail image management

Article New Component (article-new.component.ts)

  • Creation form for new articles
  • Comprehensive field validation

Documents Module

Documents Component (documents.component.ts)

  • Manages document workflows
  • Shows document status and history
  • Filtering by document type and status

Document Component (document.component.ts)

  • Form for creating and editing documents
  • Links to related articles and companies
  • Status tracking and workflow management

Document New Component (document-new.component.ts)

  • Wizard-style interface for creating new documents
  • Guided workflow for document creation

Production Module

Production Component (production.component.ts)

  • Production monitoring dashboard
  • Real-time production status
  • Machine utilization tracking

Production Orders Component (production-orders.component.ts)

  • Management of production orders
  • Scheduling and tracking capabilities
  • Resource allocation

Production Order Component (production-order.component.ts)

  • Detailed view of individual production orders
  • Operation tracking and scheduling
  • Material requirements

Operations Module

Operations Component (operations.component.ts)

  • Lists all defined operations
  • Operation categorization and grouping
  • Capacity planning tools

Operation Component (operation.component.ts)

  • Detailed operation definition
  • Time estimates and resource requirements
  • Predecessor/successor relationships

Bill of Materials Module

Bill Of Materials Component (bill-of-materials.component.ts)

  • Lists all bills of materials
  • Hierarchical view of components
  • Version management

Bill Of Material Component (bill-of-material.component.ts)

  • Detailed BOM editor
  • Component hierarchy management
  • Quantity and unit specifications

Settings Module

Settings Component (settings.component.ts)

  • Application configuration options
  • User preferences
  • System settings management

Dynamic Field Generator Component (dynamic-field-generator.component.ts)

  • Tool for creating custom fields
  • Field type selection (text, number, date, etc.)
  • Validation rules configuration

Form Components

Dynamic Forms

Many components utilize dynamic forms that can adapt to different data structures:

  • Dynamic Field Support: Components can render custom fields based on configuration
  • Validation Engine: Built-in validation for required fields and data types
  • Conditional Logic: Fields that appear based on other field values

UI Framework Components

PrimeNG Components Used

The application extensively uses PrimeNG components:

  • DataTable: For displaying tabular data with sorting, filtering, and pagination
  • Menubar: For the main navigation menu
  • Dialog: For modal dialogs and popups
  • InputText/InputNumber: For form inputs
  • Dropdown: For selection controls
  • Calendar: For date selection
  • FileUpload: For file handling
  • Toast: For notifications
  • Dock: For tab-like interface at the bottom of the screen
  • Badge: For indicators and labels
  • Tooltip: For contextual help and information

Custom Styling

  • SCSS-based styling with modular approach
  • Theme support through PrimeNG themes
  • Responsive design for different screen sizes
  • Consistent color scheme and typography

Component Communication

Parent-Child Communication

Components communicate through: - Input properties (@Input) for passing data down - Output events (@Output) for emitting data up - Template reference variables for direct access

Service-Based Communication

Components share data through services: - Observable-based data streams - Shared state management - Event broadcasting

Best Practices Implemented

Component Design Principles

  1. Single Responsibility: Each component has a clear, focused purpose
  2. Reusability: Shared components are designed for reuse across the application
  3. Maintainability: Clean, well-commented code with clear separation of concerns
  4. Performance: Efficient change detection and minimal DOM manipulation
  5. Accessibility: Keyboard navigation and screen reader support where applicable

Template Structure

  • Semantic HTML elements
  • Proper labeling for form controls
  • Consistent class naming conventions
  • Minimal inline styles

Error Handling

  • Form validation with user-friendly error messages
  • Graceful degradation when services are unavailable
  • Loading states for asynchronous operations
  • Proper error boundaries to prevent application crashes

Component Lifecycle

Most components follow Angular's lifecycle hooks appropriately: - OnInit: Initialize data and subscriptions - OnDestroy: Clean up subscriptions to prevent memory leaks - AfterViewInit: Manipulate DOM elements after view initialization

This component architecture provides a solid foundation for building maintainable and scalable UI in the Digibit ERP system.