Table of Content

1. Components & Services Inheritance Structure
2. Project Structure

Components & Services Inheritance Structure

I developed the inheritance structure when I refactored the system to improve the extensibility and reusability. The base classes with generic types are used to capture common functionalities to reduce redundant code. In the figure below, I have Customer CRUD screen as an example. However, this also applies to other models such as Contract.

• DataService and TableService are base classes for the services of the model.
• All model classes need to extend HasIdInterface.
• XXXHomeComponent contains XXXCreateComponent, XXXTableComponent, XXXEditComponent, and XXXCustomerDeleteComponent. Each of which has the corresponding base class to extend. XXX refers to the model name, e.g. Customer, Contract, etc.

Project Structure

The project consists four main modules app/admin, app/auth, app/client, and app/shared.

• app/admin contains code to implement the CRUD screen for customers/parking-lots/contracts, dashboard, settings, and report generation
• app/auth contains code to implement the features for user registration/login, change/forget/reset Paassword
• app/client has no content becasue the system currently does not support access to the customer
• app/shared contains shared components/models/directives/pipes/services/utility classes

Free feel to explore the content of the directory by clicking the hyperlinks.

src
├── app
│   ├── admin
│   │   ├── contract
│   │   │   ├── components
│   │   │   │   ├── contract-create
│   │   │   │   ├── contract-delete
│   │   │   │   ├── contract-edit
│   │   │   │   ├── contract-home
│   │   │   │   ├── contract-table
│   │   │   │   ├── payment-create
│   │   │   │   ├── payment-edit
│   │   │   │   └── payment-table
│   │   │   ├── models
│   │   │   └── services
│   │   ├── customer
│   │   │   ├── components
│   │   │   │   ├── customer-create
│   │   │   │   ├── customer-delete
│   │   │   │   ├── customer-edit
│   │   │   │   ├── customer-home
│   │   │   │   ├── customer-search
│   │   │   │   └── customer-table
│   │   │   ├── models
│   │   │   └── services
│   │   ├── dashboard
│   │   │   ├── components
│   │   │   │   ├── active-parking-lot-table
│   │   │   │   ├── active-payment-table
│   │   │   │   ├── dashboard-home
│   │   │   │   ├── income-graph
│   │   │   │   └── payment-calendar
│   │   │   └── services
│   │   ├── home
│   │   ├── income
│   │   │   └── components
│   │   │       ├── income-home
│   │   │       └── income-table
│   │   ├── navbar
│   │   ├── parking
│   │   │   ├── components
│   │   │   │   ├── parking-area-create
│   │   │   │   ├── parking-area-delete
│   │   │   │   ├── parking-area-edit
│   │   │   │   ├── parking-home
│   │   │   │   ├── parking-lot-create
│   │   │   │   ├── parking-lot-delete
│   │   │   │   ├── parking-lot-edit
│   │   │   │   ├── parking-lot-search
│   │   │   │   ├── parking-lot-table
│   │   │   │   └── parking-table
│   │   │   ├── models
│   │   │   └── services
│   │   ├── report
│   │   │   ├── components
│   │   │   │   └── report-home
│   │   │   └── services
│   │   └── setting
│   │       └── components
│   │           ├── setting-change-password
│   │           ├── setting-customer-token
│   │           ├── setting-home
│   │           └── setting-tabset
│   ├── auth
│   │   ├── components
│   │   │   ├── auth-home
│   │   │   ├── login
│   │   │   ├── no-access
│   │   │   ├── password-change
│   │   │   ├── password-reset
│   │   │   └── register
│   │   ├── models
│   │   └── services
│   ├── client
│   └── shared
│       ├── components
│       │   ├── error-handler
│       │   ├── page-loading
│       │   ├── timepicker
│       │   └── toast-messages
│       ├── directives
│       ├── models
│       ├── pipe
│       ├── services
│       └── util
├── assets
└── environments