Product Flow Manager

An Angular 12 application for managing product flow with many-to-many relationships between Products, Steps, and Fields.

Features

• Product Management: Create, read, update, and delete products with different statuses
• Step Management: Define workflow steps with order and field associations
• Field Management: Create custom fields with various types (text, number, email, date, etc.)
• Many-to-Many Relationships:
  • Products can have multiple steps
  • Steps can have multiple fields
• UUID Support: All entities use UUID as primary keys, allowing front-end ID generation
• Responsive Design: Clean, modern interface that works on desktop and mobile

Architecture

Models

• Product: Has name, description, status, and associated step IDs
• Step: Has name, description, order, and associated field IDs
• Field: Has name, type, required flag, default value, and description

Services

• ProductService: Manages CRUD operations for products
• StepService: Manages CRUD operations for steps
• FieldService: Manages CRUD operations for fields

Components

• Product List/Form: View and manage products
• Step List/Form: View and manage workflow steps
• Field List/Form: View and manage custom fields

Prerequisites

• Node.js (version 14 or higher)
• npm (version 6 or higher)
• Angular CLI 12

Installation

1. Clone the repository:

   git clone <repository-url>
   cd product-flow

2. Install dependencies:

   npm install

Development Server

Run the development server with legacy OpenSSL support:

export NODE_OPTIONS="--openssl-legacy-provider"
ng serve

Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Project Structure

src/
├── app/
│   ├── components/
│   │   ├── product/
│   │   │   ├── product-list/
│   │   │   └── product-form/
│   │   ├── step/
│   │   │   ├── step-list/
│   │   │   └── step-form/
│   │   └── field/
│   │       ├── field-list/
│   │       └── field-form/
│   ├── models/
│   │   ├── product.model.ts
│   │   ├── step.model.ts
│   │   └── field.model.ts
│   ├── services/
│   │   ├── product.service.ts
│   │   ├── step.service.ts
│   │   └── field.service.ts
│   ├── app-routing.module.ts
│   ├── app.component.*
│   └── app.module.ts
└── styles.scss

Usage

Managing Products

1. Navigate to the Products tab
2. Click Create New Product to add a product
3. Fill in the form with product details
4. Select associated steps from the checkbox list
5. Save the product

Managing Steps

1. Navigate to the Steps tab
2. Click Create New Step to add a workflow step
3. Set the step name, description, and order
4. Associate fields with the step
5. Save the step

Managing Fields

1. Navigate to the Fields tab
2. Click Create New Field to add a custom field
3. Choose field type (text, number, email, date, boolean, select, textarea)
4. Set whether the field is required
5. Optionally set a default value and description
6. Save the field

Entity Relationships

• Products ↔ Steps: Many-to-many relationship via stepIds array in Product
• Steps ↔ Fields: Many-to-many relationship via fieldIds array in Step

Technologies Used

• Angular 12: Frontend framework
• TypeScript: Programming language
• RxJS: Reactive programming with Observables
• UUID: For unique identifier generation
• SCSS: Styling with advanced CSS features
• Angular Reactive Forms: Form handling and validation

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory.

Testing

Run ng test to execute the unit tests via Karma.

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

License

This project is licensed under the MIT License.