203 lines
10 KiB
Plaintext
203 lines
10 KiB
Plaintext
# Angular Clarity Boilerplate
|
||
|
||
This project is an Angular boilerplate application that uses the [Clarity Design System](https://clarity.design/) by VMware. It serves as a starter template for building modern, responsive, and feature-rich web applications.
|
||
|
||
This boilerplate is pre-configured with a standard project structure and includes essential modules and components to kickstart your development process.
|
||
|
||
---
|
||
|
||
## 🚀 Features
|
||
|
||
* **Angular:** The latest version of the Angular framework.
|
||
* **Clarity Design System:** A comprehensive set of UX guidelines, HTML/CSS components, and Angular components.
|
||
* **Responsive Layout:** A responsive navigation and layout structure.
|
||
* **Scalable Architecture:** A well-organized and scalable project structure.
|
||
* **Theming:** Easily customizable themes (light and dark).
|
||
|
||
---
|
||
|
||
## 🛠️ Getting Started
|
||
|
||
Follow these instructions to get a copy of the project up and running on your local machine for development and testing purposes.
|
||
|
||
### Prerequisites
|
||
|
||
Make sure you have [Node.js](https://nodejs.org/) and the [Angular CLI](https://angular.io/cli) installed on your system.
|
||
|
||
```bash
|
||
npm install -g @angular/cli
|
||
|
||
## Installation
|
||
|
||
Install the dependencies:
|
||
npm install
|
||
|
||
Running the Application
|
||
Run the following command to start the development server:
|
||
ng serve
|
||
|
||
The app will automatically reload if you change any of the source files.
|
||
|
||
|
||
## DEPENDENCIES
|
||
|
||
This project includes the following main dependencies:
|
||
|
||
@angular/animations: The Angular animations library.
|
||
@angular/common: Commonly needed services, pipes, and directives.
|
||
@angular/compiler: The Angular template compiler.
|
||
@angular/core: Core Angular framework.
|
||
@angular/forms: Angular's form validation and handling library.
|
||
@angular/platform-browser: Everything needed to run Angular in a web browser.
|
||
@angular/router: The Angular router for navigation.
|
||
@cds/core: Clarity Design System core components.
|
||
@clr/angular: Angular components for Clarity.
|
||
@clr/ui: HTML/CSS components for Clarity.
|
||
rxjs: Reactive extensions for JavaScript.
|
||
zone.js: A signaling mechanism for Angular that allows it to detect when to run change detection.
|
||
|
||
|
||
📂 Project Structure
|
||
/
|
||
├── .vscode/ # VSCode settings
|
||
├── node_modules/ # Node.js modules
|
||
├── src/ # Application source code
|
||
│ ├── app/ # Application components and modules
|
||
│ │ ├── core/ # Core module (singleton services, guards, etc.)
|
||
│ │ ├── shared/ # Shared module (common components, pipes, etc.)
|
||
│ │ ├── app-routing.module.ts
|
||
│ │ ├── app.component.html
|
||
│ │ ├── app.component.scss
|
||
│ │ └── app.module.ts
|
||
│ ├── assets/ # Static assets (images, icons, etc.)
|
||
│ ├── environments/ # Environment-specific configuration
|
||
│ ├── index.html # Main HTML file
|
||
│ ├── main.ts # Main entry point
|
||
│ └── styles.scss # Global styles
|
||
├── .editorconfig # Editor configuration
|
||
├── .gitignore # Git ignore file
|
||
├── angular.json # Angular CLI configuration
|
||
├── package.json # Project dependencies and scripts
|
||
├── README.md # This README file
|
||
└── tsconfig.json # TypeScript configuration
|
||
|
||
|
||
---
|
||
|
||
## ✅ What’s already built in this codebase (with file locations)
|
||
|
||
### Authentication & Login
|
||
- Login page (UI + logic):
|
||
- src/app/modules/login/login-page/login-page.component.html
|
||
- src/app/modules/login/login-page/login-page.component.ts
|
||
- src/app/modules/login/login-page/login-page.component.spec.ts
|
||
- Login routing + module:
|
||
- src/app/modules/login/login-routing.module.ts
|
||
- src/app/modules/login/login.module.ts
|
||
- Auth services:
|
||
- src/app/services/api/login.service.ts
|
||
- src/app/services/auth_guard.service.ts
|
||
- src/app/services/jwt.interceptor.ts
|
||
- Account flows:
|
||
- Forgot/reset password: src/app/modules/login/forgotresetpassword/forgotresetpassword.component.html
|
||
- Forgot/reset password (alt): src/app/modules/login/forgotresetpassword1/forgotresetpassword1.component.html
|
||
- Email verification: src/app/modules/login/emailverification/emailverification.component.{ts,html}
|
||
- Add guest: src/app/modules/login/addguest/addguest.component.html
|
||
- About work: src/app/modules/login/about-work/about-work.component.{ts,html}
|
||
|
||
### Shell, Layout, Navigation (Menus/Sidebar/Topbar)
|
||
- Application shell and layout (includes navbar/sidebar containers):
|
||
- src/app/modules/main/layout/layout.component.{ts,html,scss}
|
||
- Main module + routing:
|
||
- src/app/modules/main/main.module.ts
|
||
- src/app/modules/main/main-routing.module.ts
|
||
- Menu models and admin menu management:
|
||
- Models: src/app/models/builder/Rn_Main_Menu.ts, src/app/models/builder/Rn_Sub_Menu.ts, src/app/models/builder/Rn_Fb_Header.ts
|
||
- Services: src/app/services/admin/menu-register.service.ts, src/app/services/admin/menu-group.service.ts, src/app/services/admin/menumaintance.service.ts
|
||
- Components (CRUD):
|
||
- src/app/modules/main/admin/menu-register/* (add/edit/all/readonly)
|
||
- src/app/modules/main/admin/menu-group/* (all/edit/read-only)
|
||
- src/app/modules/main/admin/menumaintance/menumaintance.component.{ts,html}
|
||
- src/app/modules/main/admin/submenu/submenu.component.{ts,html}
|
||
- src/app/services/api/realnet-menu.service.ts
|
||
|
||
### User & Access Management
|
||
- User management (list/add/edit/profile/settings, groups):
|
||
- src/app/modules/main/admin/user/user.component.{ts,html}
|
||
- src/app/modules/main/admin/usermaintance/usermaintance.component.{ts,html}
|
||
- src/app/modules/main/admin/usermaintanceadd/usermaintanceadd.component.{ts,html}
|
||
- src/app/modules/main/admin/usermaintanceedit/usermaintanceedit.component.{ts,html}
|
||
- src/app/modules/main/admin/usergrpmaintenance/usergrpmaintenance.component.ts
|
||
- src/app/modules/main/admin/profile-setting/profile-setting.component.html
|
||
- Services: src/app/services/admin/usermaintance.service.ts, src/app/services/admin/usergrpmaintaince.service.ts, src/app/services/admin/user-profile.service.ts, src/app/services/admin/user-registration.service.ts
|
||
- Access types / permissions:
|
||
- src/app/modules/main/admin/accesstype/accesstype.component.{ts,html}
|
||
- src/app/services/admin/accesstype.service.ts
|
||
- Guard: src/app/services/auth_guard.service.ts
|
||
|
||
### System Administration & Configuration
|
||
- System parameters, health, logs, connectors, webhooks:
|
||
- System parameters: src/app/modules/main/admin/systemparameters/systemparameters.component.html; service: src/app/services/admin/sysparameter.service.ts
|
||
- Health checkup: src/app/services/admin/health-checkup.service.ts
|
||
- Session logger UI: src/app/modules/main/admin/sessionlogger/sessionlogger.component.html; service: src/app/services/admin/sessionlogger.service.ts
|
||
- Connectors & mapping: src/app/services/admin/sure-connector.service.ts, src/app/services/admin/connector-mapping.service.ts
|
||
- Outgoing webhooks: src/app/services/admin/outgoingwebhook.service.ts
|
||
- Audit reporting: src/app/services/admin/auditreport.service.ts; API: src/app/services/api/audittrail.service.ts
|
||
- Deployment profile: src/app/services/admin/deploymentprofile.service.ts
|
||
|
||
### Foundation (FND) and Data Management
|
||
- Token registry:
|
||
- src/app/modules/main/fnd/Token_registery/Token_registery.component.{ts,html}
|
||
- src/app/modules/main/fnd/Token_registery/Token_registery.service.ts
|
||
- API registry (CRUD + lines):
|
||
- src/app/modules/main/fnd/apiregistery/apiregistery.component.{ts,html}
|
||
- src/app/modules/main/fnd/apiregistery/allapiregistery/allapiregistery.component.{ts,html}
|
||
- src/app/modules/main/fnd/apiregistery/Apiregisteryline/Apiregisteryline.component.{ts,html}
|
||
- Sequence generator:
|
||
- src/app/modules/main/fnd/sequencegenarator/sequencegenarator.component.{ts,html}
|
||
- Extensions:
|
||
- src/app/modules/main/fnd/extension/* (add/edit/all/components)
|
||
- Document master:
|
||
- src/app/modules/main/admin/documentmaster/documentmaster.component.{ts,html}
|
||
- Data management (bulk import, mapping rules):
|
||
- Bulk import: src/app/modules/main/datamanagement/bulkimport/**/*.{ts,html}
|
||
- Mapping rules: src/app/modules/main/datamanagement/mappingrule/**/*.{ts,html}
|
||
- Services: src/app/services/fnd/bulkimport.service.ts, src/app/services/fnd/datamanagement.service.ts
|
||
|
||
### Reporting & Dashboards
|
||
- Report builder and runner (multiple generations):
|
||
- Builder: src/app/modules/main/builder/report-build/**/*.{ts,html}
|
||
- Builder v2: src/app/modules/main/builder/report-build2/**/*.{ts,html}
|
||
- Runner: src/app/modules/main/builder/report-runner/**/*.{ts,html}
|
||
- Dashboard (new + runner): src/app/modules/main/builder/dashboardnew/**/*, src/app/modules/main/builder/dashboardrunner/**/*
|
||
- Services: src/app/services/api/report-builder.service.ts, src/app/services/builder/*.ts
|
||
|
||
### Query (Super Admin)
|
||
- Query management:
|
||
- src/app/modules/main/superadmin/query/**/*.{ts,html}
|
||
- src/app/modules/main/superadmin/queryadd/queryadd.component.ts
|
||
- src/app/modules/main/superadmin/queryedit/queryedit.component.ts
|
||
- API: src/app/services/api/query-runner.service.ts
|
||
|
||
### Shared Utilities
|
||
- Pipes:
|
||
- src/app/pipes/*.ts (e.g., search-filter.pipe.ts, thai-date*.pipe.ts, time-pipe.pipe.ts, sanitize.pipe.ts)
|
||
- Notifications/Alerts services:
|
||
- src/app/services/notification.service.ts, src/app/services/alerts.service.ts, src/app/services/fnd/alerts.service.ts
|
||
- CSV/Excel helpers:
|
||
- src/app/services/csv.service.ts, src/app/services/excel.service.ts
|
||
- i18n assets:
|
||
- src/assets/i18n/en.json, src/assets/i18n/hi.json
|
||
- App-level routing + module:
|
||
- src/app/app-routing.module.ts
|
||
- src/app/app.module.ts
|
||
|
||
---
|
||
|
||
## Quick Start (recap)
|
||
1. npm install -g @angular/cli
|
||
2. npm install
|
||
3. ng serve
|
||
|
||
This project already includes: authentication flow, guarded routes, admin menus and access, user and group management, system configuration screens, FND (token/api registry, sequences, extensions), data management (bulk import, mapping rules), reporting and dashboards, super-admin queries, shared utilities (pipes, alerts, CSV/Excel), i18n scaffolding, and a Clarity-based layout and navigation.
|