Syneo/Barcoding

Appearance

Module Quick Start Guide ​

This guide helps developers quickly understand and work with the module system.

Finding a Module ​

By Name ​

Use the Quick Reference table in the Module Index to find:

  • Package name
  • Category
  • Primary purpose

By Category ​

Browse modules by functional area:

  • Operations: Jobs, Piecework, Order, Parts, Requisition, Store, Production Line
  • Quality: NCR, TQ, Health & Safety
  • HR: HR, Skills
  • Assets: Assets, Tools, Fleet
  • IT: IT, Hosting, DMS
  • Maintenance: Faults, Routine
  • Business: Reports, Projects
  • Support: Ticket
  • Testing: Test Leads
  • Config: Manual, Sites, Costsheets, Website
  • CRM: CRM-SRM

By Feature ​

Search the Module Index for keywords like:

  • "employee", "timesheet" → HR Module
  • "calibration", "equipment" → Tools Module
  • "customer", "quotation" → CRM-SRM Module
  • "quality", "conformance" → NCR or TQ Module

Accessing a Module ​

In Backend Application ​

  1. Start the Backend app: yarn start-back (port 4200)
  2. Navigate to the module through the menu
  3. URL pattern: http://localhost:4200/modules/<module-name>/<route>

Example URLs:

  • HR Dashboard: http://localhost:4200/modules/hr/dashboard
  • Ticket List: http://localhost:4200/modules/ticket/ticketsList
  • NCR Dashboard: http://localhost:4200/modules/ncr/dashboard

Module Menu Structure ​

Most modules have these standard routes:

  • /dashboard - Module overview and metrics
  • /settings - Module configuration
  • /<entity>List - Entity list view
  • /<entity>View/:id - Entity detail view

Understanding a Module ​

1. Check the Documentation ​

Start with the Module Index for:

  • Module purpose
  • Key features
  • Package name

2. Explore the Code Structure ​

bash
# Navigate to module directory
cd web/projects/packages/@barcoding/modules/<module-name>

# View module structure
tree src/lib -L 2

3. Review Key Files ​

  • Module Definition: src/lib/<name>.module.ts
  • Routing: src/lib/<name>.routing.ts
  • Main Component: src/lib/<name>.component.ts
  • State (if exists): src/lib/store/<name>.store.ts

4. Check Components ​

bash
# List all components
ls src/lib/components/

Common component patterns:

  • <name>Dashboard - Dashboard view
  • <name>List - List/grid view
  • <name>View - Detail view
  • <name>Form - Create/edit form
  • <name>Settings - Settings page

Working with a Module ​

Running the Module in Development ​

bash
# Start the Backend application
cd web
yarn start-back

# Navigate to http://localhost:4200
# Access module through the application menu

Building a Specific Module ​

bash
cd web

# Build in development mode
ng build @barcoding/module-<name>

# Build for production
ng build @barcoding/module-<name> --configuration production

Testing a Module ​

bash
cd web

# Run unit tests
yarn test @barcoding/module-<name>

# Run with watch mode
yarn test:watch @barcoding/module-<name>

# Run with coverage
yarn test:coverage @barcoding/module-<name>

Debugging a Module ​

  1. Browser DevTools

    • Open Chrome DevTools (F12)
    • Navigate to Sources tab
    • Find module in webpack sources
    • Set breakpoints in TypeScript files

  2. Angular DevTools

    • Install Angular DevTools browser extension
    • Inspect component tree
    • View component properties and state

  3. NGXS DevTools

    • Install Redux DevTools browser extension
    • Monitor state changes
    • Time-travel debugging
    • Action replay

Common Module Tasks ​

Finding API Endpoints ​

Modules use SDK services from @barcoding/sdk:

typescript
// Look for service injection in components
constructor(
  private entityController: EntityControllerService
) {}

// API methods follow pattern:
this.entityController.apiEntityControllerFind().subscribe(...)

To find available API methods:

bash
# View SDK service
cat web/projects/packages/@barcoding/sdk/src/lib/services/<entity>-controller.service.ts

Understanding Module State ​

Check the NGXS store:

bash
# View module state
cat web/projects/packages/@barcoding/modules/<name>/src/lib/store/<name>.store.ts

State typically includes:

  • Entity lists
  • Selected entity
  • Loading flags
  • Filter/search criteria

Check the Module Ecosystem for:

  • Inter-module relationships
  • Data flow between modules
  • Integration points

Module Development Workflow ​

1. Understand Requirements ​

  • What business problem does this solve?
  • Who are the users?
  • What are the main workflows?

2. Review Similar Modules ​

Look at existing modules with similar patterns:

  • Simple CRUD: Assets, Fleet, Sites
  • Complex Workflows: Jobs, CRM-SRM, Projects
  • Reporting: Reports, HR (reports)
  • Quality: NCR, TQ

3. Plan Module Structure ​

Decide on:

  • Main entities
  • Required components (Dashboard, List, View, Form)
  • State management needs
  • API endpoints required

4. Implement Components ​

Follow the standard pattern:

Dashboard → List → View → Form → Settings

5. Add State Management (if needed) ​

Use NGXS for:

  • Entity lists
  • Selected entity
  • Filter states
  • Shared data across components

6. Integrate with API ​

Use SDK services:

typescript
// Inject service
constructor(private apiService: MyControllerService) {}

// Make API calls
this.apiService.apiMyControllerFind().subscribe(
  data => { /* handle success */ },
  error => { /* handle error */ }
);

7. Test Thoroughly ​

  • Unit tests for components and services
  • E2E tests for user workflows
  • Manual testing in all applications

8. Document ​

  • Add to module documentation
  • Update API documentation if needed
  • Add inline code comments

Troubleshooting ​

Module Not Loading ​

Check:

  1. Module is registered in application routing
  2. Module is built (check dist directory)
  3. No compilation errors in console
  4. Route path is correct

API Calls Failing ​

Check:

  1. API is running (port 3000 or 3001)
  2. SDK is up to date (yarn build-sdk)
  3. Authentication token is valid
  4. Network tab in DevTools for error details

State Not Updating ​

Check:

  1. Actions are dispatched correctly
  2. State reducer is handling action
  3. Component is subscribed to correct selector
  4. NGXS DevTools shows state changes

Grid Not Displaying Data ​

Check:

  1. Data source is bound correctly
  2. API returns data (check Network tab)
  3. Grid columns are defined
  4. No console errors

Quick Reference ​

Module Locations ​

bash
# Modules source
web/projects/packages/@barcoding/modules/

# Built modules
web/dist/barcoding/module-<name>/

# Module tests
web/projects/packages/@barcoding/modules/<name>/src/**/*.spec.ts

Common Commands ​

bash
# Build module
ng build @barcoding/module-<name>

# Test module
yarn test @barcoding/module-<name>

# Lint module
ng lint @barcoding/module-<name>

# Serve application with module
yarn start-back

Key Dependencies ​

  • @barcoding/core - Universal utilities
  • @barcoding/auth-core - Authentication
  • @barcoding/backend-core - Backend utilities
  • @barcoding/sdk - API client
  • @angular/core - Angular framework
  • @progress/kendo-angular-* - UI components
  • @ngxs/store - State management

Next Steps ​

Getting Help ​

If you need assistance:

  1. Check the Module Index for module-specific information
  2. Review the Module Overview for patterns and guidelines
  3. Examine similar existing modules for examples
  4. Check CLAUDE.md for development environment details

Syneo/Barcoding Documentation

Copyright © 2025