base_project

This commit is contained in:
risadmin_prod 2025-10-20 03:18:59 +00:00
commit d86cae974e
1789 changed files with 113779 additions and 0 deletions

View File

@ -0,0 +1,16 @@
# Editor configuration, see https://editorconfig.org
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true
[*.ts]
quote_type = single
[*.md]
max_line_length = off
trim_trailing_whitespace = false

View File

@ -0,0 +1,17 @@
name: CI
on: [push]
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v1
- name: Run a one-line script
run: echo Hello, world!
- name: Run a multi-line script
run: |
echo Add other actions to build,
echo test, and deploy your project.

View File

@ -0,0 +1,42 @@
# See http://help.github.com/ignore-files/ for more about ignoring files.
# compiled output
/dist
/tmp
/out-tsc
# dependencies
/node_modules
# IDEs and editors
/.idea
.project
.classpath
.c9/
*.launch
.settings/
*.sublime-workspace
# IDE - VSCode
.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json
# misc
/.angular/cache
/.sass-cache
/connect.lock
/coverage
/libpeerconnection.log
npm-debug.log
yarn-error.log
testem.log
/typings
# System Files
.DS_Store
Thumbs.db

View File

@ -0,0 +1,60 @@
# Directory Structure for Angular Clarity Boilerplate
This document outlines the directory structure for the Angular Clarity boilerplate project.
/
├── .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.txt # Project README file ignore the README.md file
└── tsconfig.json # TypeScript configuration
## Detailed Content and Customizations:
### Project Root: `/`
- This is the base directory for the entire Angular Clarity boilerplate.
### `.vscode/`
- Contains VSCode-specific settings to help with development consistency.
### `node_modules/`
- Contains all the npm packages and dependencies for the project.
### `src/`
- Contains the main source code for the application.
- `app/`: The root component and module for the application.
- `core/`: Provides singleton services and modules that are used across the application.
- `shared/`: Contains shared components, directives, and pipes.
- `app-routing.module.ts`: Defines the main routes for the application.
- `app.component.html`: The main HTML template for the root component.
- `app.component.scss`: The main stylesheet for the root component.
- `app.module.ts`: The root module that ties everything together.
- `assets/`: Contains static assets like images, fonts, and icons.
- `environments/`: Contains environment-specific configuration files (e.g., for development and production).
- `index.html`: The main HTML file that is served to the browser.
- `main.ts`: The main entry point for the application.
- `styles.scss`: The global stylesheet for the application.
### Root Level Configuration Files:
- These files are crucial for the project's configuration, build process, and development environment.
- `.editorconfig`: Ensures consistent coding styles across different editors.
- `.gitignore`: Specifies which files and folders should be ignored by Git.
- `angular.json`: The configuration file for the Angular CLI.
- `package.json`: Defines the project's dependencies and scripts.
- `README.txt`: The main documentation file for the project.
- `tsconfig.json`: The configuration file for the TypeScript compiler.

View File

@ -0,0 +1,68 @@
### io8coder_breakdown.md
**io8coder Breakdown for "Angular Clarity Boilerplate":**
**B - Business Understanding:**
* **Goal:** To provide a robust and scalable boilerplate for developing Angular applications using the Clarity Design System.
* **Target Audience:** Angular developers looking to quickly start new projects with a pre-configured, best-practice project structure.
* **Key Features:**
* Pre-configured Angular project with Clarity Design System.
* Responsive layout and navigation.
* Scalable architecture with core and shared modules.
* Example components and routing.
* **Monetization/Value:** An open-source project that accelerates development, ensures consistency, and reduces setup time.
**M - Model Definition:**
* **Data Model (Example):**
* `User`:
* `id` (unique identifier)
* `username` (string)
* `email` (string)
* `Product`:
* `id` (unique identifier)
* `name` (string)
* `description` (string)
* `price` (number)
* **User Interface (UI) Model:**
* **Layout:** Main layout with a header, sidebar, and content area.
* **Navigation:** Vertical navigation in the sidebar with collapsible sections.
* **Header:** Main header with branding and user profile/actions.
* **Components:** Examples of Clarity components such as data grids, forms, modals, and alerts.
* **API Model (Example - to be implemented by the developer):**
* `GET /api/users`: Retrieve a list of users.
* `GET /api/users/{id}`: Retrieve a single user.
* `POST /api/users`: Create a new user.
* `PUT /api/users/{id}`: Update an existing user.
* `DELETE /api/users/{id}`: Delete a user.
**A - Architecture Design:**
* **Frontend:** Angular, TypeScript, HTML, SCSS.
* **UI Framework:** Clarity Design System.
* **State Management (Optional - to be integrated):** NgRx or other state management libraries.
* **Backend:** This is a frontend boilerplate and is backend-agnostic. It can be connected to any backend (e.g., Node.js, Python, Java) via RESTful or GraphQL APIs.
* **Database:** Not applicable for the frontend boilerplate.
* **Deployment:** Can be deployed to any static web hosting service (e.g., Firebase Hosting, Netlify, Vercel, AWS S3).
**D - Development Plan:**
* **Phase 1: Initial Setup & Customization**
* Clone the boilerplate repository.
* Install dependencies.
* Customize the theme (branding, colors, logos).
* Configure environment variables.
* **Phase 2: Feature Development**
* Create new feature modules.
* Develop components using Clarity components.
* Implement routing for new pages.
* Integrate with backend APIs.
* Add state management if needed.
* **Phase 3: Testing**
* Write unit tests for components and services.
* Write end-to-end tests for user flows.
* **Phase 4: Build & Deployment**
* Build the application for production.
* Deploy to a hosting service.
* Set up CI/CD pipelines for automated builds and deployments.

View File

@ -0,0 +1,59 @@
**io8coder Plan for "Angular Clarity Boilerplate":**
**Project Title:** Angular Clarity Boilerplate
**Project Goal:** To provide developers with a feature-rich, scalable, and easy-to-use boilerplate for building enterprise-grade Angular applications with the Clarity Design System.
**Key Deliverables:**
1. A pre-configured Angular project.
2. Integration with the Clarity Design System.
3. A responsive layout with a header, sidebar, and content area.
4. Example modules (core, shared) and components.
5. A clear and well-documented project structure.
**Technology Stack:**
* **Frontend:** Angular, TypeScript, HTML, SCSS.
* **UI Framework:** Clarity Design System.
* **Package Manager:** npm.
* **Build Tool:** Angular CLI.
**Phased Approach:**
**Phase 1: Project Setup and Core Architecture (Estimated: 1 day)**
* **Task 1.1:** Initialize a new Angular project.
* **Task 1.2:** Integrate the Clarity Design System.
* **Task 1.3:** Set up the core and shared modules.
* **Task 1.4:** Create the main layout component with a header, sidebar, and content area.
**Phase 2: Navigation and Routing (Estimated: 1 day)**
* **Task 2.1:** Implement the main routing module (`app-routing.module.ts`).
* **Task 2.2:** Create a navigation service to manage sidebar menu items.
* **Task 2.3:** Add example routes and components (e.g., dashboard, about page).
* **Task 2.4:** Implement lazy loading for feature modules.
**Phase 3: Example Components and Theming (Estimated: 2 days)**
* **Task 3.1:** Create example components using various Clarity components (datagrid, forms, modals, etc.).
* **Task 3.2:** Implement a theme service for switching between light and dark themes.
* **Task 3.3:** Add custom styles and branding.
**Phase 4: Documentation and Finalization (Estimated: 1 day)**
* **Task 4.1:** Write a comprehensive `README.txt` file.
* **Task 4.2:** Add comments and documentation to the code.
* **Task 4.3:** Clean up the codebase and remove any unnecessary files.
**Testing Strategy:**
* **Unit Tests:** Use Jasmine and Karma to write unit tests for components and services.
* **End-to-End Tests:** Use Protractor or Cypress for end-to-end testing of user flows.
* **Manual Testing:** Perform manual testing to ensure the application is working as expected.
**Assumptions:**
* The developer has a basic understanding of Angular and the Clarity Design System.
* The developer has Node.js and the Angular CLI installed.

View File

@ -0,0 +1,63 @@
# Analysis Document
Generated: Tuesday, September 16, 2025
## Project Overview
The project is an **Angular Clarity Boilerplate**, designed to serve as a foundational template for building modern, scalable, and feature-rich web applications. It provides a pre-configured Angular project integrated with the VMware Clarity Design System, enabling developers to kickstart new projects with a robust and consistent architecture, thereby accelerating the development lifecycle.
## Business Analysis
The primary business need is to **streamline the initial setup phase of new Angular projects** within an organization or for individual developers. The target audience is **Angular developers and development teams** who require a standardized, best-practice project structure. The value proposition is centered around increasing development efficiency, enforcing UI/UX consistency through the Clarity Design System, and reducing the boilerplate code that developers need to write for every new project.
## User Requirements (Developer Requirements)
The "users" of this boilerplate are developers. Their core requirements are:
- Developers must be able to **quickly set up a new project** by cloning the repository and installing dependencies.
- Developers must be provided with a **clear and understandable project structure** that promotes scalability and maintainability.
- The boilerplate must include a **pre-built, responsive application layout** (e.g., header, sidebar, content area).
- Developers must have access to **pre-configured core and shared modules** for common functionalities like services, guards, and reusable components.
- The boilerplate must be **easily extendable** with new feature modules and components.
## Functional Requirements
The boilerplate will provide the following functional capabilities out-of-the-box:
- **Pre-configured Angular Environment:** A ready-to-use Angular CLI project with all necessary dependencies and build configurations.
- **Clarity Design System Integration:** Full integration of Clarity UI components and styles, ready for immediate use.
- **Scalable Architecture:** A modular structure featuring a `CoreModule` for singleton services and a `SharedModule` for reusable UI components, directives, and pipes.
- **Responsive Layout:** A default application shell with a responsive header, navigation sidebar, and main content area.
- **Routing:** A pre-configured routing module with examples of lazy-loaded feature modules.
- **Theming:** Basic support for Clarity's light and dark themes.
## Non-Functional Requirements
- **Performance:** The initial boilerplate should be lightweight, ensuring fast development server startup times and optimized production builds.
- **Usability (Developer Experience):** The codebase must be clean, well-commented, and logically organized to provide an excellent developer experience.
- **Maintainability:** The modular architecture must facilitate easy updates to dependencies and allow for the addition of new features without introducing breaking changes to the core structure.
- **Scalability:** The architecture is designed to support the growth of large, enterprise-scale applications.
- **Extensibility:** The boilerplate should be easy to customize and extend with additional libraries, modules, and configurations as per project-specific needs.
## User Stories (Developer Stories)
### User Story 1: Quick Project Initialization
- **As a developer, I want to clone the repository and run `npm install` and `ng serve` to get a live development server running, so that I can bypass manual setup and start building features immediately.**
- **Acceptance Criteria:**
- Given I have Node.js and Angular CLI installed,
- When I clone the repository, install dependencies, and run the start command,
- Then the application compiles successfully and is accessible in my browser at `localhost:4200`.
### User Story 2: Add a New Feature
- **As a developer, I want to create a new lazy-loaded feature module with its own components and routing, so that I can add new sections to the application in a scalable way.**
- **Acceptance Criteria:**
- Given the boilerplate is running,
- When I use the Angular CLI to generate a new module and add it to the main routing configuration,
- Then I can navigate to the new feature's route, and its components are rendered correctly.
### User Story 3: Utilize Shared Components
- **As a developer, I want to use a component from the `SharedModule` within a new feature module, so that I can reuse common UI elements and maintain consistency.**
- **Acceptance Criteria:**
- Given I have a new feature module,
- When I import the `SharedModule` into my feature module,
- Then I can use the shared components (e.g., a custom card or loader) in my feature's templates without errors.
## Business Rules (Architectural Principles)
- Singleton services (e.g., logging, authentication) must be provided in the `CoreModule`.
- Reusable components, pipes, and directives that do not have a dependency on services must be declared and exported in the `SharedModule`.
- All major application features should be encapsulated within their own lazy-loaded modules.
- Environment-specific variables (e.g., API endpoints) must be managed in the `environments` folder.

View File

@ -0,0 +1,138 @@
# Architecture Document
Generated: Tuesday, September 16, 2025
## System Overview
The Angular Clarity Boilerplate is a frontend-only, single-page application (SPA) template. It is designed to serve as a foundational starting point for developing enterprise-grade web applications. The system provides a pre-configured, modular, and scalable architecture using the Angular framework and is visually styled with the VMware Clarity Design System. Its primary purpose is to accelerate development by providing a structured and feature-rich starting point.
## Architecture Pattern
The boilerplate is built upon a **Component-Based Architecture**, which is fundamental to the Angular framework. The UI is composed of a tree of reusable and encapsulated components.
The overall architectural pattern follows best practices for scalable Angular applications, emphasizing a **Modular Design**. The application is segregated into a `CoreModule`, a `SharedModule`, and is designed for the addition of multiple `FeatureModules`. This structure promotes separation of concerns, reusability, and maintainability.
## Component Design (Frontend)
- **AppModule:** The root module of the application, responsible for bootstrapping the `AppComponent` and importing essential modules like the `CoreModule` and `AppRoutingModule`.
- **AppComponent:** The main application shell component. It contains the primary layout, including the Clarity header, sidebar navigation, and the main content area where routed components are displayed via `<router-outlet>`.
- **CoreModule:** This module is designed to be imported only once by the `AppModule`. It contains singleton services, route guards, and other one-time setup logic (e.g., HTTP interceptors). This pattern prevents services from being provided multiple times across the application.
- **SharedModule:** This module contains commonly used components, directives, and pipes that can be reused across different feature modules. It is imported by feature modules whenever they need access to these shared elements. It primarily exports common Angular modules (like `CommonModule`, `FormsModule`) and Clarity UI modules.
- **Feature Modules (Conceptual):** The architecture is designed for developers to create new feature modules (e.g., `DashboardModule`, `AdminModule`). These modules encapsulate all the components, services, and routing related to a specific business domain. They are typically **lazy-loaded** to improve initial application load performance.
## Data Architecture
### Primary Database
- Not applicable. As a frontend-only boilerplate, this project does not include a database. It is designed to connect to any backend with a data persistence layer.
### Data Model (Client-Side)
- Data models will be defined using **TypeScript interfaces or classes** within feature modules. These models will represent the structure of data objects retrieved from or sent to the backend API.
- **Example `User` model:**
```typescript
export interface User {
id: number;
name: string;
email: string;
role: 'admin' | 'user';
}
Of course. Here is the architecture_document.md for the Angular Clarity boilerplate project, presented in a single code block for easy copying.
Markdown
# Architecture Document
Generated: Tuesday, September 16, 2025
## System Overview
The Angular Clarity Boilerplate is a frontend-only, single-page application (SPA) template. It is designed to serve as a foundational starting point for developing enterprise-grade web applications. The system provides a pre-configured, modular, and scalable architecture using the Angular framework and is visually styled with the VMware Clarity Design System. Its primary purpose is to accelerate development by providing a structured and feature-rich starting point.
## Architecture Pattern
The boilerplate is built upon a **Component-Based Architecture**, which is fundamental to the Angular framework. The UI is composed of a tree of reusable and encapsulated components.
The overall architectural pattern follows best practices for scalable Angular applications, emphasizing a **Modular Design**. The application is segregated into a `CoreModule`, a `SharedModule`, and is designed for the addition of multiple `FeatureModules`. This structure promotes separation of concerns, reusability, and maintainability.
## Component Design (Frontend)
- **AppModule:** The root module of the application, responsible for bootstrapping the `AppComponent` and importing essential modules like the `CoreModule` and `AppRoutingModule`.
- **AppComponent:** The main application shell component. It contains the primary layout, including the Clarity header, sidebar navigation, and the main content area where routed components are displayed via `<router-outlet>`.
- **CoreModule:** This module is designed to be imported only once by the `AppModule`. It contains singleton services, route guards, and other one-time setup logic (e.g., HTTP interceptors). This pattern prevents services from being provided multiple times across the application.
- **SharedModule:** This module contains commonly used components, directives, and pipes that can be reused across different feature modules. It is imported by feature modules whenever they need access to these shared elements. It primarily exports common Angular modules (like `CommonModule`, `FormsModule`) and Clarity UI modules.
- **Feature Modules (Conceptual):** The architecture is designed for developers to create new feature modules (e.g., `DashboardModule`, `AdminModule`). These modules encapsulate all the components, services, and routing related to a specific business domain. They are typically **lazy-loaded** to improve initial application load performance.
## Data Architecture
### Primary Database
- Not applicable. As a frontend-only boilerplate, this project does not include a database. It is designed to connect to any backend with a data persistence layer.
### Data Model (Client-Side)
- Data models will be defined using **TypeScript interfaces or classes** within feature modules. These models will represent the structure of data objects retrieved from or sent to the backend API.
- **Example `User` model:**
```typescript
export interface User {
id: number;
name: string;
email: string;
role: 'admin' | 'user';
}
Data Flow
API Call: A component's method calls a function in its corresponding service (e.g., userService.getUsers()).
Service Layer: The service uses Angular's HttpClient to make an HTTP request to the backend API.
Data Retrieval: The service receives the HTTP response and typically returns an Observable of the data, typed with the appropriate TypeScript interface.
Component Update: The component subscribes to the Observable. Once the data is received, it updates its local state, triggering Angular's change detection to re-render the template and display the new data.
API Design (Backend Communication)
This boilerplate is backend-agnostic. It is designed to communicate with any backend that exposes a RESTful or GraphQL API.
Communication Protocol
HTTP/HTTPS: Communication is handled via standard HTTP requests using Angular's HttpClient service.
Example Service Implementation
An example of a service making API calls:
// in user.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { User } from '../models/user.model';
import { environment } from '../../environments/environment';
@Injectable({
providedIn: 'root'
})
export class UserService {
private apiUrl = `${environment.apiBaseUrl}/users`;
constructor(private http: HttpClient) { }
getUsers(): Observable<User[]> {
return this.http.get<User[]>(this.apiUrl);
}
getUserById(id: number): Observable<User> {
return this.http.get<User>(`${this.apiUrl}/${id}`);
}
}
Error Handling
HTTP interceptors can be provided in the CoreModule to handle API errors globally (e.g., logging errors, redirecting on 401 Unauthorized responses).
Security Architecture
Authentication: Authentication logic (e.g., handling JWTs, interacting with OAuth providers) should be encapsulated within an AuthService provided in the CoreModule.
Authorization (Route Guards): The architecture uses Angular's Route Guards to protect routes. An AuthGuard can be implemented to prevent unauthorized users from accessing certain parts of the application.
Client-Side Security: The boilerplate does not inherently protect against all client-side vulnerabilities. Developers should follow best practices for preventing XSS and CSRF attacks.
Scalability Considerations
Lazy Loading: The architecture strongly encourages the use of lazy-loaded feature modules. This ensures that the initial application bundle size remains small, leading to faster load times. As new features are added, they do not impact the initial load performance.
Modular Design: The strict separation of concerns into Core, Shared, and Feature modules makes the codebase easier to manage, test, and scale as the application grows in complexity.
State Management: For applications with complex state, a state management library like NgRx or Akita can be easily integrated into this architecture without requiring significant refactoring.

View File

@ -0,0 +1,62 @@
# Product Requirements Document (PRD) - Angular Clarity Boilerplate
## 1. Product Vision
To provide a robust, scalable, and feature-rich boilerplate that serves as a foundational template for building modern, enterprise-grade web applications using Angular and the VMware Clarity Design System. The vision is to accelerate the development lifecycle by offering a pre-configured, best-practice project structure.
## 2. Target Audience
The primary target audience consists of **Angular developers and development teams** who require a standardized, efficient, and consistent starting point for new projects. This includes:
* **Enterprise Development Teams:** Teams that need to maintain a consistent look and feel across multiple applications.
* **Independent Developers:** Individuals looking to quickly bootstrap new projects without spending significant time on initial setup and configuration.
## 3. User Stories (Developer Stories)
### User Story 1: Quick Project Initialization
- **As a developer, I want to clone the repository and run `npm install` and `ng serve` to get a live development server running, so that I can bypass manual setup and start building features immediately.**
- **Acceptance Criteria:**
- Given I have Node.js and Angular CLI installed,
- When I clone the repository, install dependencies, and run the start command,
- Then the application compiles successfully and is accessible in my browser at `localhost:4200`.
### User Story 2: Add a New Feature
- **As a developer, I want to create a new lazy-loaded feature module with its own components and routing, so that I can add new sections to the application in a scalable way.**
- **Acceptance Criteria:**
- Given the boilerplate is running,
- When I use the Angular CLI to generate a new module and add it to the main routing configuration,
- Then I can navigate to the new feature's route, and its components are rendered correctly.
### User Story 3: Utilize Shared Components
- **As a developer, I want to use a component from the `SharedModule` within a new feature module, so that I can reuse common UI elements and maintain consistency.**
- **Acceptance Criteria:**
- Given I have a new feature module,
- When I import the `SharedModule` into my feature module,
- Then I can use the shared components (e.g., a custom card or loader) in my feature's templates without errors.
## 4. Functional Requirements
- **FR-001: Pre-configured Angular Environment:** A ready-to-use Angular CLI project with all necessary dependencies and build configurations.
- **FR-002: Clarity Design System Integration:** Full integration of Clarity UI components and styles, ready for immediate use.
- **FR-003: Scalable Architecture:** A modular structure featuring a `CoreModule` for singleton services and a `SharedModule` for reusable UI components, directives, and pipes.
- **FR-004: Responsive Layout:** A default application shell with a responsive header, navigation sidebar, and main content area.
- **FR-005: Routing:** A pre-configured routing module with examples of lazy-loaded feature modules.
- **FR-006: Theming:** Basic support for Clarity's light and dark themes.
## 5. Non-Functional Requirements
- **NFR-001: Performance:** The initial boilerplate should be lightweight, ensuring fast development server startup times and optimized production builds.
- **NFR-002: Usability (Developer Experience):** The codebase must be clean, well-commented, and logically organized to provide an excellent developer experience.
- **NFR-003: Maintainability:** The modular architecture must facilitate easy updates to dependencies and allow for the addition of new features without introducing breaking changes to the core structure.
- **NFR-004: Scalability:** The architecture is designed to support the growth of large, enterprise-scale applications.
- **NFR-005: Extensibility:** The boilerplate should be easy to customize and extend with additional libraries, modules, and configurations as per project-specific needs.
## 6. Out of Scope
The following features and functionalities are explicitly out of scope for the boilerplate:
- **Backend Implementation:** This is a frontend-only boilerplate and does not include any backend code or database.
- **Authentication/Authorization Logic:** While the architecture supports the implementation of security features, no pre-built authentication or authorization logic is included.
- **State Management:** The boilerplate does not include a state management library (e.g., NgRx, Akita) by default, allowing developers to choose the best solution for their needs.
- **Business Logic:** No specific business logic or application features are included beyond the basic structural components.
- **CI/CD Pipelines:** While the project is ready for CI/CD, no pre-configured pipelines are included.

View File

@ -0,0 +1,73 @@
# Project Plan - Angular Clarity Boilerplate
## 1. Project Goal
To develop and deliver a comprehensive, scalable, and well-documented Angular boilerplate. The final product will serve as a foundational template, enabling developers to rapidly bootstrap new enterprise-grade web applications using the VMware Clarity Design System.
## 2. Methodology
The project will follow an iterative development approach, focusing on establishing a solid architectural foundation first. The goal is to create a robust Minimum Viable Product (MVP) boilerplate that is immediately useful and can be enhanced over time with additional features and refinements based on developer feedback.
## 3. Key Phases & Workflow
1. **Phase 1: Foundation & Architecture Definition:** Define the core architectural patterns, including the modular structure (`Core`, `Shared`, `Feature` modules) and establish the base project setup.
2. **Phase 2: MVP Scope & Requirements:** Outline the essential features for the initial boilerplate release, including Clarity integration, responsive layout, and routing. Document these in the PRD and Architecture Document.
3. **Phase 3: Backlog Creation & Planning:** Break down the architectural and functional requirements into a prioritized list of development tasks.
4. **Phase 4: Development & Integration:** Implement the core architecture, integrate the Clarity Design System, and build out the foundational components and modules.
5. **Phase 5: Quality Assurance & Documentation:** Thoroughly test the boilerplate for stability and ease of use. Ensure all key architectural decisions are well-documented within the code and in project documents like the `README.txt`.
6. **Phase 6: Release & Future Iteration:** Package and release the initial version of the boilerplate. Plan for future enhancements based on potential developer needs and feedback.
## 4. Initial Backlog (MVP Focus)
The following tasks represent the initial backlog for creating the boilerplate:
### Architecture & Setup Tasks
- Initialize a new project using the Angular CLI.
- Define and implement the `CoreModule` for singleton services.
- Define and implement the `SharedModule` for reusable components, pipes, and directives.
- Configure the main `AppRoutingModule` and set up a basic routing structure.
- Establish the environment configuration files (`environments` folder).
### Clarity Design System Integration
- Install all necessary Clarity npm packages (`@clr/angular`, `@clr/ui`, `@cds/core`).
- Import Clarity's global styles and icon assets into the project.
- Implement the main application layout (`AppComponent`) using Clarity's header, sidebar, and content area components.
- Ensure the layout is fully responsive.
### Boilerplate Feature Tasks
- Create an example of a lazy-loaded `FeatureModule` to demonstrate the pattern.
- Add a dashboard or home page component as a default view.
- Include examples of common Clarity components (e.g., a datagrid, a form) on example pages to showcase usage.
- Implement basic support for switching between Clarity's light and dark themes.
### Documentation Tasks
- Create a comprehensive `README.txt` with setup instructions, an overview of the architecture, and usage guidelines.
- Add inline comments to the code to explain key architectural patterns and configurations.
- Generate all required project documentation (`analysis_document.md`, `architecture_document.md`, etc.).
## 5. Feature Prioritization Strategy
Prioritization will focus on establishing a stable and usable foundation. **Must-have** features include the core modular architecture and full integration of the Clarity layout. **Should-have** features include example pages and components. **Could-have** features for future iterations might include state management integration or CI/CD templates.
## 6. Key Technologies
- **Frontend Framework:** Angular
- **Programming Language:** TypeScript
- **UI Library:** VMware Clarity Design System
- **Styling:** SCSS
- **Package Manager:** npm
- **Build Tool:** Angular CLI
## 7. Success Metrics (MVP)
- The boilerplate can be successfully cloned and set up with just `npm install` and `ng serve`.
- The resulting application is stable, responsive, and free of console errors.
- The project structure is logical and easy for an Angular developer to understand.
- All core architectural patterns (Core/Shared/Feature modules, lazy loading) are correctly implemented and demonstrated.
## 8. Future Considerations (Post-MVP)
- Integrating a state management library (e.g., NgRx, Akita) with an example implementation.
- Adding more complex example pages (e.g., a settings page, a user profile).
- Creating custom Angular Schematics to automate the creation of new feature modules that follow the boilerplate's conventions.
- Including pre-configured templates for CI/CD pipelines (e.g., GitHub Actions).

View File

@ -0,0 +1,95 @@
# Requirements Document
Generated: Tuesday, September 16, 2025
## Functional Requirements (Developer-Facing)
### FR-001: Project Initialization
- **Description:** The system shall provide a developer-ready Angular project that can be set up with minimal effort.
- **Acceptance Criteria:**
- A developer shall be able to clone the project from a Git repository.
- A developer shall be able to install all required dependencies using a single `npm install` command.
- A developer shall be able to start the local development server using the `ng serve` command.
- The boilerplate shall compile without errors and be viewable in a web browser.
- **Priority:** High
### FR-002: Modular Architecture
- **Description:** The system shall be structured with a scalable and maintainable modular architecture.
- **Acceptance Criteria:**
- The project shall include a `CoreModule` for providing singleton services and one-time imports.
- The project shall include a `SharedModule` for reusable components, directives, and pipes.
- The architecture shall support the creation of lazy-loaded `FeatureModules` to encapsulate business domain logic.
- **Priority:** High
### FR-003: Clarity Design System Integration
- **Description:** The system shall be fully integrated with the VMware Clarity Design System for UI components and styling.
- **Acceptance Criteria:**
- All necessary Clarity npm packages shall be included as dependencies.
- Clarity's global stylesheets and assets shall be correctly configured and loaded.
- The boilerplate shall use Clarity components for its core layout (header, sidebar, etc.).
- Developers shall be able to use any Clarity component within their feature modules.
- **Priority:** High
### FR-004: Responsive Application Layout
- **Description:** The system shall provide a default, responsive application layout.
- **Acceptance Criteria:**
- The boilerplate shall include a main application shell with a header, a collapsible sidebar for navigation, and a main content area.
- The layout shall adapt correctly to various screen sizes, including desktop, tablet, and mobile.
- **Priority:** High
### FR-005: Routing and Navigation
- **Description:** The system shall include a pre-configured routing system for navigating between different views.
- **Acceptance Criteria:**
- The project shall have a main `AppRoutingModule`.
- The boilerplate shall provide an example of a lazy-loaded feature route.
- Navigation links in the sidebar shall correctly navigate to their corresponding routes.
- **Priority:** Medium
## Non-Functional Requirements
### NFR-001: Performance (Developer Experience)
- **Description:** The boilerplate should be optimized for a fast and efficient development workflow.
- **Acceptance Criteria:**
- The initial `ng serve` compilation time shall be reasonably fast.
- Live-reloading times during development shall be minimal.
- The production build (`ng build --prod`) shall be optimized, with tree-shaking and minification enabled.
- **Priority:** Medium
### NFR-002: Usability (Developer Experience)
- **Description:** The codebase should be intuitive and easy for an Angular developer to understand and extend.
- **Acceptance Criteria:**
- The project structure shall be logical and follow established Angular best practices.
- The code shall be clean, well-formatted, and include comments for complex or non-obvious sections.
- A comprehensive `README.txt` file shall guide developers on setup, architecture, and usage.
- **Priority:** High
### NFR-003: Maintainability
- **Description:** The codebase should be structured to allow for easy updates, modifications, and extensions.
- **Acceptance Criteria:**
- The modular architecture shall allow for independent development and testing of features.
- Dependencies shall be clearly defined in `package.json` and easy to update.
- The separation of concerns between modules should be strictly enforced.
- **Priority:** High
## Data Requirements (Client-Side)
### Entity Modeling:
- **Description:** The boilerplate will not have predefined data models but will require developers to define them using TypeScript.
- **Attributes:**
- Data models shall be defined as **TypeScript interfaces or classes**.
- These models will represent the structure of data consumed from and sent to a backend API.
## Interface Requirements
### UI/UX Requirements (Frontend Boilerplate):
- **Layout:** A clean, professional single-page application layout based on the Clarity Design System.
- **Header:** A top header bar, typically containing the application title/logo and user-related actions (e.g., profile, logout).
- **Sidebar:** A collapsible vertical navigation sidebar containing links to different feature areas of the application.
- **Content Area:** A main content area where the components for the currently active route are displayed.
- **Styling:** Adherence to the styles and design tokens provided by the Clarity Design System.
### API Requirements (Backend Interaction):
- **Backend Agnostic:** The boilerplate is a frontend application and makes no assumptions about the backend technology stack.
- **Communication Protocol:** The boilerplate shall use Angular's `HttpClient` module to communicate with a backend over HTTP/HTTPS.
- **API Endpoint Configuration:** The base URL for the backend API shall be configurable via the `environments` files (e.g., `environment.ts`, `environment.prod.ts`).
- **Data Format:** The boilerplate is designed to work with APIs that transact data in **JSON** format.
- **Error Handling:** The architecture shall support a centralized way to handle API errors, typically through an `HttpInterceptor` provided in the `CoreModule`.

View File

@ -0,0 +1,81 @@
# Angular Boilerplate Project - Sprint Plan (Sprint 1)
## Sprint Goal
To establish the foundational architecture of the Angular Clarity Boilerplate, including setting up the core project structure, integrating the Clarity Design System, implementing the main responsive layout, and creating a clear, documented starting point for developers.
## Sprint Duration
[Assumed: A focused 1-week sprint to deliver the core boilerplate MVP.]
## Team Capacity
[Assumed: Full developer availability for the sprint duration.]
## Product Backlog Items (Developer Stories) for Sprint 1
1. **User Story: Quick Project Initialization**
* **As a developer, I want to clone the repository and run `npm install` and `ng serve` to get a live development server running, so that I can bypass manual setup and start building features immediately.**
* **Acceptance Criteria:**
* The project is initialized using the latest stable Angular CLI.
* All necessary dependencies are defined in `package.json`.
* The application compiles successfully without errors.
2. **User Story: Scalable Architecture Foundation**
* **As a developer, I want a well-defined modular structure (`Core`, `Shared`), so that I can build a scalable and maintainable application.**
* **Acceptance Criteria:**
* A `CoreModule` is created for singleton services and one-time imports.
* A `SharedModule` is created for reusable components, directives, and pipes.
* The `AppModule` is cleanly organized and imports the necessary foundational modules.
3. **User Story: Clarity Design System Integration**
* **As a developer, I want a responsive application layout built with the Clarity Design System, so that I have a professional and consistent UI foundation.**
* **Acceptance Criteria:**
* Clarity dependencies are added and correctly configured.
* The main `AppComponent` uses Clarity components for the header, sidebar navigation, and main content area.
* The layout is responsive and functions correctly on desktop, tablet, and mobile screen sizes.
## Sprint Tasks (Derived from User Stories)
### Architecture & Setup Tasks:
- **Task:** Initialize a new Angular project using the Angular CLI.
- **Task:** Clean up default boilerplate files and structure the project directories.
- **Task:** Create the `CoreModule` and ensure it is imported only once in the `AppModule`.
- **Task:** Create the `SharedModule` with common exports (`CommonModule`, `FormsModule`, etc.).
- **Task:** Set up the main `AppRoutingModule` with a default route.
- **Task:** Configure environment files (`environment.ts`, `environment.prod.ts`) with a placeholder for an API base URL.
### Clarity Integration Tasks:
- **Task:** Install `@clr/angular`, `@clr/ui`, and `@cds/core` npm packages.
- **Task:** Configure `angular.json` to include Clarity's global CSS files and assets.
- **Task:** Implement the main application layout in `app.component.html` using `<clr-main-container>`, `<clr-header>`, and `<clr-vertical-nav>`.
- **Task:** Add placeholder navigation links in the vertical navigation sidebar.
- **Task:** Ensure the Clarity icons are properly loaded and can be used within the application.
### Documentation & General Tasks:
- **Task:** Create the initial `README.txt` file with project setup instructions.
- **Task:** Write inline comments for the `CoreModule` and `SharedModule` explaining their purpose.
- **Task:** Set up basic linting rules in `.eslintrc.json` to enforce code quality.
- **Task:** Configure the `.gitignore` file to exclude unnecessary files from version control.
## Definition of Done (DoD) for Sprint 1
- All selected user stories are implemented and meet their acceptance criteria.
- The boilerplate can be successfully set up and run by another developer following the `README.txt`.
- The core architecture (`CoreModule`, `SharedModule`) is in place.
- The main application layout using Clarity is implemented and responsive.
- All code is reviewed, formatted, and merged into the main branch.
- No known critical bugs or console errors in the initial boilerplate.
## Potential Impediments
- Issues with Clarity dependency versions or peer dependencies.
- Unexpected complexities in configuring Clarity's global styles with the Angular CLI.
- Difficulties in achieving the desired responsive behavior with the Clarity layout components.
## Next Steps
- Daily stand-ups to track progress and identify any blockers.
- Prepare for Sprint 2, which will focus on adding example feature modules, advanced routing (lazy loading), and more complex Clarity component examples.
- Sprint Review at the end of the sprint to demonstrate the working boilerplate.
- Sprint Retrospective to refine the development process.

View File

@ -0,0 +1,39 @@
# Technology Stack Document
Generated: Tuesday, September 16, 2025
## Frontend Technologies
* **Framework:** **Angular**. The boilerplate is built on the latest stable version of the Angular framework, chosen for its robustness, component-based architecture, and suitability for large-scale, enterprise applications.
* **Language:** **TypeScript**. As a superset of JavaScript, TypeScript is used for its strong typing, which improves code quality, maintainability, and developer productivity.
* **Styling:** **SCSS**. SCSS is used for its advanced features over standard CSS, such as variables, nesting, and mixins, allowing for more organized and maintainable stylesheets.
* **UI Framework:** **VMware Clarity Design System**. This comprehensive design system provides a set of accessible, high-quality UI components and a consistent visual language, which accelerates UI development.
* **Core Libraries:**
* **RxJS:** Used extensively throughout Angular for reactive programming and managing asynchronous operations.
* **Zone.js:** A signaling mechanism that enables Angular's automatic change detection.
## Backend Technologies
* **Backend Agnostic:** This is a frontend-only boilerplate and is not tied to any specific backend technology. It is designed to communicate with any backend that exposes a RESTful or GraphQL API.
## Database Technologies
* **Not Applicable:** As a frontend project, the boilerplate does not include a database.
## Infrastructure & Deployment
* **Web Server:** The built application consists of static files that can be served by any modern web server (e.g., **Nginx**, **Apache**, **Caddy**).
* **Hosting:** The project can be deployed to any static site hosting provider, such as **Firebase Hosting**, **Netlify**, **Vercel**, **AWS S3**, or **GitHub Pages**.
* **Containerization (Optional):** The application can be easily containerized using **Docker** for consistent deployment environments.
## Development & Build Tools
* **Build Tool:** **Angular CLI**. The command-line interface for Angular is used for creating, building, testing, and deploying the application.
* **Package Manager:** **npm**. The Node Package Manager is used for managing all project dependencies.
* **Version Control:** **Git**. Git is the standard for version control and source code management.
* **Testing:**
* **Unit Testing:** **Jasmine** (framework) and **Karma** (test runner) are the default tools for unit testing in Angular.
* **End-to-End (E2E) Testing:** The project can be configured to use **Protractor** or more modern alternatives like **Cypress** or **Playwright**.
* **Code Formatting/Linting:**
* **ESLint:** Used for identifying and reporting on patterns in ECMAScript/JavaScript code.
* **Prettier:** An opinionated code formatter that enforces a consistent style.
* **EditorConfig:** Helps maintain consistent coding styles for multiple developers working on the same project across various editors and IDEs.

View File

@ -0,0 +1,52 @@
# Angular-Clarity
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 16.0.4 [Angular.io](https://angular.io/) version 16.0.4 and [Clarity Design System](https://vmware.github.io/clarity/news) by VMware version 6.4.5/15.5.0
## Install
- clone project `git clone https://github.com/superpck/angular-clarity`
- goto project folder `cd angular-clarity`
- install necessary package `npm install`
- Fix some vulnerabilities (if founded) `npm audit fix --force`
- Run application with command `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
- or Run `ng serve --port 8080 --open` with another port and open web browser.
## Code scaffolding
Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
## Build
- Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
- or `ng build --base-href ./ --prod --output-hashing none`
## Running unit tests
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
## Running end-to-end tests
Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
## Further help
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
## Screenshot
About Page
![About](1.png)
Login Page
![Datagrid](6.png)
Datagrid
![Datagrid](2.png)
Datagrid expand row and single action
![expand](3.png)
Modal
![modal](4.png)
sweetalert2
![sweetalert2](5.png)

View File

@ -0,0 +1,202 @@
# 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
---
## ✅ Whats 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.

View File

@ -0,0 +1,21 @@
# Security Policy
## Supported Versions
Use this section to tell people about which versions of your project are
currently being supported with security updates.
| Version | Supported |
| ------- | ------------------ |
| 5.1.x | :white_check_mark: |
| 5.0.x | :x: |
| 4.0.x | :white_check_mark: |
| < 4.0 | :x: |
## Reporting a Vulnerability
Use this section to tell people how to report a vulnerability.
Tell them where to go, how often they can expect to get an update on a
reported vulnerability, what to expect if the vulnerability is accepted or
declined, etc.

View File

@ -0,0 +1,134 @@
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"angularclarity": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"style": "scss"
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"allowedCommonJsDependencies": [
"lodash", "xlsx", "file-saver","@swimlane/ngx-datatable","@swimlane/ngx-charts","jquery","highcharts","chart.js",
"clone-deep","@ckeditor/ckeditor5-build-classic","@ctrl/ngx-codemirror"
],
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"node_modules/@clr/icons/clr-icons.min.css",
"node_modules/@clr/ui/clr-ui.min.css",
"src/styles.scss",
"node_modules/ngx-toastr/toastr.css"
],
"scripts": [
"node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js",
"node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js",
"node_modules/@clr/icons/clr-icons.min.js"
],
"vendorChunk": true,
"extractLicenses": false,
"buildOptimizer": false,
"sourceMap": true,
"optimization": false,
"namedChunks": true
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "10mb",
"maximumError": "10mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "200kb",
"maximumError": "4mb"
}
]
}
},
"defaultConfiguration": ""
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "angularclarity:build"
},
"configurations": {
"production": {
"browserTarget": "angularclarity:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "angularclarity:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": []
}
},
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "angularclarity:serve"
},
"configurations": {
"production": {
"devServerTarget": "angularclarity:serve:production"
}
}
}
}
}
},
"cli": {
"analytics": "6e7a3b23-d894-47dd-8b4b-7fdeba9a5abd"
}
}

View File

@ -0,0 +1,12 @@
# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
# For additional information regarding the format and rule options, please see:
# https://github.com/browserslist/browserslist#queries
# You can see what browsers were selected by your queries by running:
# npx browserslist
> 0.5%
last 2 versions
Firefox ESR
not dead
not IE 9-11 # For IE 9-11 support, remove 'not'.

View File

@ -0,0 +1,32 @@
// @ts-check
// Protractor configuration file, see link for more information
// https://github.com/angular/protractor/blob/master/lib/config.ts
const { SpecReporter } = require('jasmine-spec-reporter');
/**
* @type { import("protractor").Config }
*/
exports.config = {
allScriptsTimeout: 11000,
specs: [
'./src/**/*.e2e-spec.ts'
],
capabilities: {
browserName: 'chrome'
},
directConnect: true,
baseUrl: 'http://localhost:4200/',
framework: 'jasmine',
jasmineNodeOpts: {
showColors: true,
defaultTimeoutInterval: 30000,
print: function() {}
},
onPrepare() {
require('ts-node').register({
project: require('path').join(__dirname, './tsconfig.json')
});
jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
}
};

View File

@ -0,0 +1,23 @@
import { AppPage } from './app.po';
import { browser, logging } from 'protractor';
describe('workspace-project App', () => {
let page: AppPage;
beforeEach(() => {
page = new AppPage();
});
it('should display welcome message', () => {
page.navigateTo();
expect(page.getTitleText()).toEqual('angularclarity app is running!');
});
afterEach(async () => {
// Assert that there are no errors emitted from the browser
const logs = await browser.manage().logs().get(logging.Type.BROWSER);
expect(logs).not.toContain(jasmine.objectContaining({
level: logging.Level.SEVERE,
} as logging.Entry));
});
});

View File

@ -0,0 +1,11 @@
import { browser, by, element } from 'protractor';
export class AppPage {
navigateTo(): Promise<unknown> {
return browser.get(browser.baseUrl) as Promise<unknown>;
}
getTitleText(): Promise<string> {
return element(by.css('app-root .content span')).getText() as Promise<string>;
}
}

View File

@ -0,0 +1,13 @@
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/e2e",
"module": "commonjs",
"target": "es5",
"types": [
"jasmine",
"jasminewd2",
"node"
]
}
}

View File

@ -0,0 +1,32 @@
// Karma configuration file, see link for more information
// https://karma-runner.github.io/1.0/config/configuration-file.html
module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine', '@angular-devkit/build-angular'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-coverage-istanbul-reporter'),
require('@angular-devkit/build-angular/plugins/karma')
],
client: {
clearContext: false // leave Jasmine Spec Runner output visible in browser
},
coverageIstanbulReporter: {
dir: require('path').join(__dirname, './coverage/ang'),
reports: ['html', 'lcovonly', 'text-summary'],
fixWebpackSourcePaths: true
},
reporters: ['progress', 'kjhtml'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false,
restartOnFileChange: true
});
};

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,89 @@
{
"name": "angular-clarity",
"version": "16.0.4",
"subVersion": "2023.06.02-01",
"scripts": {
"ng": "ng",
"start": "node --max_old_space_size=8192 ./node_modules/@angular/cli/bin/ng serve --port 4201 -o",
"start:https": "ng serve --port 4201 --ssl -o",
"build-prod": "node --max_old_space_size=64384 ./node_modules/@angular/cli/bin/ng build --prod ",
"build": "node --max_old_space_size=8192 ./node_modules/@angular/cli/bin/ng build --base-href ./ --configuration production --aot --build-optimizer",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "^16.0.4",
"@angular/cdk": "^16.2.4",
"@angular/common": "^16.0.4",
"@angular/compiler": "^16.0.4",
"@angular/core": "^16.0.4",
"@angular/forms": "^16.0.4",
"@angular/platform-browser": "^16.0.4",
"@angular/platform-browser-dynamic": "^16.0.4",
"@angular/router": "^16.0.4",
"@auth0/angular-jwt": "^5.1.2",
"@cds/core": "^6.9.0",
"@ckeditor/ckeditor5-angular": "^7.0.1",
"@ckeditor/ckeditor5-build-classic": "^40.0.0",
"@clr/angular": "^15.5.0",
"@clr/core": "^4.0.15",
"@clr/icons": "^13.0.2",
"@clr/ui": "^15.5.0",
"@ctrl/ngx-codemirror": "^7.0.0",
"@ngx-translate/core": "^16.0.3",
"@ngx-translate/http-loader": "^16.0.0",
"@swimlane/ngx-charts": "^20.4.1",
"@webcomponents/custom-elements": "^1.6.0",
"@webcomponents/webcomponentsjs": "^2.8.0",
"angular-gridster2": "^16.0.0",
"angularx-qrcode": "^16.0.2",
"chart.js": "^4.4.0",
"dom-to-image": "^2.6.0",
"express": "^4.18.2",
"file-saver": "^2.0.5",
"highcharts": "^11.1.0",
"highcharts-angular": "^3.1.2",
"jquery": "^3.7.1",
"jspdf": "^2.5.1",
"jszip": "^3.10.1",
"lit-html": "^3.1.0",
"lodash": "^4.17.21",
"moment": "^2.29.4",
"ng-dynamic-component": "^10.1.1",
"ng2-charts": "^5.0.3",
"ng2-ckeditor": "^1.3.7",
"ng2-search-filter": "^0.5.1",
"ngx-captcha": "^13.0.0",
"ngx-chips": "^3.0.0",
"ngx-cookie-service": "^16.0.0",
"ngx-drag-drop": "^16.1.0",
"ngx-image-cropper": "^7.0.2",
"ngx-toastr": "^17.0.2",
"numeral": "^2.0.6",
"rxjs": "^7.8.1",
"sweetalert2": "^11.4.8",
"tslib": "^2.5.2",
"xlsx": "https://cdn.sheetjs.com/xlsx-0.19.3/xlsx-0.19.3.tgz",
"zone.js": "~0.13.0"
},
"devDependencies": {
"@angular-devkit/build-angular": "^16.0.4",
"@angular/cli": "^16.0.4",
"@angular/compiler-cli": "^16.0.4",
"@types/jasmine": "~4.3.2",
"@types/jasminewd2": "~2.0.10",
"@types/node": "^20.2.5",
"jasmine-core": "~5.0.0",
"jasmine-spec-reporter": "~7.0.0",
"karma": "~6.4.2",
"karma-chrome-launcher": "~3.2.0",
"karma-coverage-istanbul-reporter": "~3.0.3",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "^2.0.0",
"ts-node": "^10.9.1",
"tslint": "~6.1.3",
"typescript": "^5.1.0"
}
}

View File

@ -0,0 +1,42 @@
import { Injectable } from '@angular/core';
import{environment} from 'src/environments/environment';
/**
* This is a singleton class
*/
@Injectable()
export class AppConfig {
//Provide all the Application Configs here
public version: string = "1.0.0";
public locale: string = "en-US";
public currencyFormat = { style: "currency", currency: "USD" };
public dateFormat = { year: 'numeric', month: 'short', day: 'numeric' };
// port in enviroment
// API Related configs
public apiPort: string; // this.apiURL //9191 to pc used and 8080/billingback to jboss
public apiProtocol: string;
public apiHostName: string;
public baseApiPath: string;
public backendURL: string = environment.backendUrl;
constructor() {
if (this.apiProtocol === undefined) {
this.apiProtocol = window.location.protocol;
}
if (this.apiHostName === undefined) {
this.apiHostName = window.location.hostname;
}
if (this.apiPort === undefined) {
this.apiPort = window.location.port;
}
if (this.apiHostName.includes("infomud") || this.apiHostName.includes("heroku")) {
this.baseApiPath = this.apiProtocol + "//" + this.apiHostName + "/";
}
else {
this.baseApiPath = this.backendURL + "/";
}
if (this.locale === undefined) {
this.locale = navigator.language;
}
}
}

View File

@ -0,0 +1,14 @@
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
{path: '', redirectTo: 'login', pathMatch: 'full'}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }

View File

@ -0,0 +1,3 @@
<router-outlet></router-outlet>

View File

@ -0,0 +1,35 @@
import { TestBed, async } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AppComponent } from './app.component';
describe('AppComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
RouterTestingModule
],
declarations: [
AppComponent
],
}).compileComponents();
}));
it('should create the app', () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.componentInstance;
expect(app).toBeTruthy();
});
it(`should have as title 'angularclarity'`, () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.componentInstance;
expect(app.title).toEqual('angularclarity');
});
it('should render title', () => {
const fixture = TestBed.createComponent(AppComponent);
fixture.detectChanges();
const compiled = fixture.nativeElement;
expect(compiled.querySelector('.content span').textContent).toContain('angularclarity app is running!');
});
});

View File

@ -0,0 +1,18 @@
import { Component } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'angularclarity';
constructor(private translate: TranslateService) {
// Set the default language
this.translate.setDefaultLang('en');
}
switchLanguage(language: string) {
this.translate.use(language);
}
}

View File

@ -0,0 +1,130 @@
import { ExcelService } from './services/excel.service';
import { BrowserModule } from '@angular/platform-browser';
import { ToastrModule } from 'ngx-toastr';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ClarityModule } from '@clr/angular';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HashLocationStrategy, LocationStrategy } from '@angular/common';
import { HttpClientModule, HTTP_INTERCEPTORS,HttpClient } from '@angular/common/http';
import { MainModule } from './modules/main/main.module';
import { LoginModule } from './modules/login/login.module';
import { MainService } from './services/main.service';
import { AlertService } from './services/alert.service';
import { HelperModule } from './pipes/helpers.module';
import { LogoComponent } from './modules/logo/logo.component';
import { AppConfig } from './app-config';
import { JwtInterceptor } from './services/jwt.interceptor';
import { UserInfoService } from './services/user-info.service';
import { AuthGuard } from './services/auth_guard.service';
import { LoginService } from './services/api/login.service';
import { ApiRequestService } from './services/api/api-request.service';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import {CUSTOM_ELEMENTS_SCHEMA, NgModule } from "@angular/core";
import { TranslateService } from './services/api/translate.service';
import { RealnetMenuService } from './services/api/realnet-menu.service';
import { UserProfileService } from './services/admin/user-profile.service';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import '@clr/icons';
import '@clr/icons/shapes/all-shapes';
import { AboutComponent } from './modules/main/admin/about/about.component';
import { LayoutComponent } from './modules/main/layout/layout.component';
import { SetupiconComponent } from './modules/main/builder/setupicon/setupicon.component';
import { MenumaintanceComponent } from './modules/main/admin/menumaintance/menumaintance.component';
import { UsermaintanceComponent } from './modules/main/admin/usermaintance/usermaintance.component';
import { UsergrpmaintenanceComponent } from './modules/main/admin/usergrpmaintenance/usergrpmaintenance.component';
import { MenuaccesscontrolComponent } from './modules/main/admin/menuaccesscontrol/menuaccesscontrol.component';
import { SystemparametersComponent } from './modules/main/admin/systemparameters/systemparameters.component';
import { AccesstypeComponent } from './modules/main/admin/accesstype/accesstype.component';
import { SequencegenaratorComponent } from './modules/main/fnd/sequencegenarator/sequencegenarator.component';
import { ReportbuildallComponent } from './modules/main/builder/report-build/reportbuildall/reportbuildall.component';
import { ReportrunnerallComponent } from './modules/main/builder/report-runner/reportrunnerall/reportrunnerall.component';
import { ReportbuildaddComponent } from './modules/main/builder/report-build/reportbuildadd/reportbuildadd.component';
import { DashboardrunnerComponent } from './modules/main/builder/dashboardrunner/dashboardrunner.component';
import { DashrunnerallComponent } from './modules/main/builder/dashboardrunner/dashrunnerall/dashrunnerall.component';
import { AllnewdashComponent } from './modules/main/builder/dashboardnew/allnewdash/allnewdash.component';
import { AddnewdashComponent } from './modules/main/builder/dashboardnew/addnewdash/addnewdash.component';
import { DashboardComponent } from './modules/main/fnd/dashboard/dashboard.component';
import { ReportBuild2allComponent } from './modules/main/builder/report-build2/report-build2all/report-build2all.component';
import { ReportBuild2addComponent } from './modules/main/builder/report-build2/report-build2add/report-build2add.component';
export function HttpLoaderFactory(http: HttpClient) {
return new TranslateHttpLoader(http , './assets/i18n/', '.json');
}
@NgModule({
declarations: [
AppComponent,
LogoComponent,
AboutComponent,
AccesstypeComponent,
SequencegenaratorComponent,
LayoutComponent,
SetupiconComponent,
MenumaintanceComponent,
UsermaintanceComponent,
UsergrpmaintenanceComponent,
MenuaccesscontrolComponent,
SystemparametersComponent,
ReportbuildallComponent,
ReportrunnerallComponent,
ReportbuildaddComponent,
DashboardrunnerComponent,
DashrunnerallComponent,
AllnewdashComponent,
AddnewdashComponent,
DashboardComponent,
ReportBuild2allComponent,
ReportBuild2addComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
ClarityModule,
HttpClientModule,
BrowserAnimationsModule,
ToastrModule.forRoot(),
HelperModule,
MainModule,
LoginModule,
FormsModule,
ReactiveFormsModule,
DragDropModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient]
}
})
],
providers: [
MainService,
AlertService,
ExcelService,
UserInfoService,
LoginService,
ApiRequestService,
TranslateService,
RealnetMenuService,
UserProfileService,
// ProjectSetupService,
// TechnologyStackService,
// DropdownService,
// WireframeService,
// SuregitService,
AuthGuard,
AppConfig,
{ provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true },
{ provide: LocationStrategy, useClass: HashLocationStrategy } // HashLocationStrategy to use # and remove # PathLocationStrategy
],
bootstrap: [AppComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA ]
})
export class AppModule { }

View File

@ -0,0 +1,169 @@
export class field{
_id?:any;
name?:any;
type?:any;
icon?:any;
toggle?:any;
required?:any;
regex?:any;
errorText?:any;
label?:any;
description?:any;
placeholder?:any;
className?:any;
subtype?:any;
handle?:any;
min?:number;
max?:number;
inline?:any;
value?:any;
size?:any;
values?:Array<value>;
div_name?:any;
gridLine_name?:any;
children?: field[];
tooltipmsg?:any;
maxcharacters?:any;
visibilty?:any;
duplicateVal?:any;
encryptData?:any;
personalHealthInfo?:any;
descriptionText?:any;
heightpx?:any;
showDescription?:boolean;
personalInfo?:boolean;
readOnly?:any;
sessionVar?:any;
allowedDays?:any;
allowedHrsFrom?:any;
allowedHrsTo?:any;
showSeconds?:boolean;
datePicker?:any;
alphabeticalOrdering?:boolean;
fieldLayout?:any;
otherChoice?:boolean;
dynamicList?:any;
iconType?:any;
target?:any;
defaultCamera?:any;
imgoption?:Array<value>;
questions?:Array<value1>;
maxDuration?:any;
maxNo?:number;
decimalPlaces?:number;
currencyType?:any;
formatNo?:any;
providersData?:any;
apikey?:any;
expanded?:boolean;
files?:Array<any>;
password?:any;
content?:any;
theme?:any;
norows?:number;
nocolumns?:number;
editordata?:any;
}
export class value{
label?:any="";
value?:any="";
}
export class value1{
label1?:any="";
value1?:any="";
}
export interface IProperty {
url?: string;
loading?: boolean;
itemsPerPage?: number;
total?: number;
p?: number;
sizeLimit?: number;
title?: string;
text?: string;
items?: any[];
sub?: any;
isBlocked?: boolean;
isDeleted?: boolean;
isEmailVerified?: string;
successMsg?: string;
msg?: string;
userId?: string;
status?: number;
userPlaceholder?: string;
searchKey?: string;
fullName?: string;
email?: string;
countryCode?: string;
dialCode?: string;
phoneNumber?: string;
value?: Date;
data?: any;
name_es?: string;
name_en?: string;
countries?: any;
states?: any;
cities?: any;
countries1?: any;
states1?: any;
cities1?: any;
countries2?: any;
states2?: any;
cities2?: any;
localities?: any;
buildings?: any;
country_id?: string;
state_id?: string;
city_id?: string;
locality_id?: string;
building_id?: string;
countryCount?: number;
stateCount?: number;
cityCount?: number;
stateCityCount?: number;
localityCount?: number;
buildingCount?: number;
countriesAdd?: any;
statesAdd?: any;
citiesAdd?: any;
localitiesAdd?: any;
country_idAdd?: string;
state_idAdd?: string;
city_idAdd?: string;
locality_idAdd?: string;
countryCountAdd?: number;
stateCountAdd?: number;
cityCountAdd?: number;
localityCountAdd?: number;
successText?: string;
propertyTypes?: any;
propertyTypesCount?: number;
amenities?: any;
amenitiesCount?: number;
projectTypes?: any;
projectTypesCount?: number;
routeName?: string;
icon?: any;
userType?: string;
overlay?: any;
is_broker_seller_dev?: number;
is_buyer_renter?: number;
is_broker?: number;
is_data_collector?: number;
image?: any;
index?: number;
name?: string;
phone?: string;
type?: number;
property_id?: string;
banks?: any;
bankCount?: string;
flag?: number;
page?: number;
property_for?: any;
status_id?:any;
type_id?:any;
post_type?:any;
developer_id?:any;
}

View File

@ -0,0 +1,4 @@
export enum Role {
// User = 'User',
Admin = 'Admin'
}

View File

@ -0,0 +1,30 @@
export class Systemparameter{
public schedulerTime: number;
public leaseTaxCode: String;
public vesselConfProcessLimit: number;
public rowToDisplay: any;
public linkToDisplay: any;
public rowToAdd: any;
public lovRowToDisplay:any;
public lovLinkToDisplay: any;
public oidserverName: any;
public oidBase: any;
public oidAdminUser: any;
public oidServerPort: any;
public userDefaultGroup: any;
public defaultDepartment: any;
public defaultPosition: any;
public singleCharge: any;
public firstDayOftheWeek:any;
public hourPerShift: any;
public cnBillingFrequency: any;
public billingDepartmentCode: any;
public basePriceList: any;
public nonContainerServiceOrder: any;
public ediMaeSchedulerONOFF: any;
public ediSchedulerONOFF: any;
public company_Display_Name:any;
public upload_Logo:any;
}

View File

@ -0,0 +1,14 @@
export class User {
public id: number;
public name: string;
public gender: string;
public dob: string;
public email: string;
public picture:Blob;
public location:string;
public address1:string;
public country:string;
public phone:number;
}

View File

@ -0,0 +1,12 @@
export class userdepartment{
public departmentCode:String;
public active:String;
public description:String;
public createdOn:Date;
public createdBy:String;
public updatedOn:Date;
public updatedBy:String;
public id:number;
}

View File

@ -0,0 +1,10 @@
export class Usergrpmain {
public usrGrp: number;
public groupName:string;
public groupDesc:string;
public createby:string;
public createdate:Date;
public groupLevel:string;
public status:string;
}

View File

@ -0,0 +1,38 @@
import { userdepartment } from "./userdepartment";
import { userposition } from "./userposition";
export class Usermain {
public userId: number;
public changePassw:string;
public confirmPassword:string;
public createby:string;
public createdate:Date;
public customerId:number;
public customerNumer:String;
public departmentCode:string;
public departmentCodeString:string;
public email:string;
public firstLogin:String;
public fullName:String;
public langCode: String;
public notification:String;
public password1: String;
public password2: String;
public password3: String;
public password4: String;
public positionCodeString:String;
public pwdChangedCnt:string;
public shortName: string;
public status:string;
public updateby:string;
public updatedate:Date;
public username: string;
public userPassw: string;
public usrGrpId:number;
public title: string;
public expiryDate: Date;
public lastPwdChangedDate:Date;
}

View File

@ -0,0 +1,9 @@
export class userposition{
public positionCode:String;
public active:String;
public description:String;
public createdOn:Date;
public createdBy:String;
public updatedOn:Date;
public updatedBy:String;
}

View File

@ -0,0 +1,4 @@
export interface ActiveTechnology {
id;
name;
}

View File

@ -0,0 +1,13 @@
export class AdhocParam{
public id: number;
public table_allias_name: string;
public column_name: string;
public column_allias_name: string;
}

View File

@ -0,0 +1,9 @@
export class Audit {
public accountId: number;
public createdAt: Date;
public createdBy: string;
public updatedAt: Date;
public updatedBy: string;
}

View File

@ -0,0 +1,9 @@
import { Audit } from "./Audit";
export class Bcf_TechnologyStack extends Audit {
public id: number;
public tech_stack: string;
public tech_stack_key: string;
public tags: string;
public base_prj_file_name: string;
public active: boolean;
}

View File

@ -0,0 +1,4 @@
export interface ColumnList {
// id: number;
table_name: string;
}

View File

@ -0,0 +1,11 @@
export class DateParam{
public date_id: number;
public col_table_alies_name_date: string;
public col_date_query: string;
public column_alias_date_query: string;
}

View File

@ -0,0 +1,10 @@
export interface FileData {
id: number;
text: string;
/* public id: number;
public text: string; */
/* constructor(id: number, text: string) {
this.id = id;
this.text = text;
} */
}

View File

@ -0,0 +1,4 @@
export interface FileDetails {
id: number;
text: string;
}

View File

@ -0,0 +1,14 @@
import { Audit } from "./Audit";
import { ProjectSetup } from "./Project_setup";
import { Rn_Fb_Header } from "./Rn_Fb_Header";
export class ModuleSetup extends Audit {
public id: number;
public moduleName: string;
public description: string;
public modulePrefix: string;
public copyTo?: string;
public technologyStack: string;
public project: ProjectSetup;
public rn_fb_headers: Rn_Fb_Header[];
}

View File

@ -0,0 +1,22 @@
import { Audit } from "./Audit";
import { ModuleSetup } from "./Module_Setup";
export class ProjectSetup extends Audit {
public id: number;
public projectName: string;
public description: string;
public copyTo?: string;
public technologyStack: string;
public techStackId: number;
public projectPrefix: string;
public dbName: string;
public dbUserName: string;
public dbPassword: string;
public portNumber: string;
public namespace: string;
public tags:string;
public category:string;
public accessibility:boolean;
public modules: ModuleSetup[];
}

View File

@ -0,0 +1,12 @@
export class RbColumns{
public id: number;
public column_name: string;
public functions: string;
public column_allias_name: string;
public table_allies_name: string;
public asc_desc: string;
}

View File

@ -0,0 +1,7 @@
export class RbTables{
public table_id: number;
public table_name: string;
public table_allias_name: string;
}

View File

@ -0,0 +1,8 @@
export class ReportBuilder {
public report_id: number;
public report_name:string;
public description: string;
public report_tags: string;
public servicename:string;
}

View File

@ -0,0 +1,4 @@
export class ReportBuilderQuery {
public master_select: string;
}

View File

@ -0,0 +1,14 @@
import { Audit } from "./Audit";
import { Rn_Cff_ActionBuilder_Line } from "./Rn_Cff_ActionBuilder_Line";
import { Rn_Fb_Header } from "./Rn_Fb_Header";
export class Rn_Cff_ActionBuilder_Header extends Audit {
public id: number;
public rn_fb_header: Rn_Fb_Header;
public technologyStack: string;
public controllerName: string;
public methodName: string;
public actionName: string;
public fileLocation: string;
public actionBuilderLines: Rn_Cff_ActionBuilder_Line[];
}

View File

@ -0,0 +1,18 @@
import { Audit } from "./Audit";
import { Rn_Cff_ActionBuilder_Header } from "./Rn_Cff_ActionBuilder_Header";
export class Rn_Cff_ActionBuilder_Line extends Audit {
public id: number;
public actionType1: string;
public actionType2: string;
public dataType: string;
public variableName: string;
public assignment: string;
public message: string;
public conditions: string;
public forward: string;
public equation: string;
public seq: number;
public action: string;
public rn_cff_actionBuilderHeader: Rn_Cff_ActionBuilder_Header;
}

View File

@ -0,0 +1,22 @@
import { Audit } from "./Audit";
import { Rn_Fb_Lines } from "./Rn_Fb_Lines";
export class Rn_Fb_Header extends Audit {
public id: number;
public techStack: string;
public objectType: string;
public subObjectType: string;
public uiName: string;
public formType: string;
public tableName: string;
public lineTableName: string;
public multilineTableName: string;
public formCode: string;
public build: boolean;
public updated: boolean;
public menuName: string;
public headerName: string;
public convertedTableName: string;
public rn_fb_lines: Rn_Fb_Lines[];
}

View File

@ -0,0 +1,49 @@
import { Audit } from "./Audit";
export class Rn_Fb_Lines extends Audit {
public id: number;
public fieldName: string;
public mapping: string;
public dataType: string;
public formCode: string;
public key1: string;
public type1: string;
public mandatory: boolean;
public hidden: boolean;
public readonly: boolean;
public dependent: boolean;
public dependent_on: string;
public dependent_sp: string;
public dependent_sp_param: string;
public validation_1: boolean;
public val_type: string;
public val_sp: string;
public val_sp_param: string;
public sequence: boolean;
public seq_name: string;
public seq_sp: string;
public seq_sp_param: string;
public default_1: boolean;
public default_type: string;
public default_value: string;
public default_sp: string;
public default_sp_param: string;
public calculated_field: boolean;
public cal_sp: string;
public cal_sp_param: string;
public add_to_grid: boolean;
public sp_for_autocomplete: boolean;
public sp_name_for_autocomplete: string;
public sp_for_dropdown: boolean;
public sp_name_for_dropdown: string;
public type_field: string;
public methodName: string;
public seq: number;
public form_type: string;
public section_num: number;
public button_num: string;
public type2: string;
public table_name?: string;
public line_table_name: string;
public line_table_no: number;
}

View File

@ -0,0 +1,17 @@
import { Audit } from "./Audit";
import { Rn_Sub_Menu } from './Rn_Sub_Menu';
export class Rn_Main_Menu extends Audit {
public menuItemId: number;
public menuItemDesc: string;
public mainMenuActionName : string;
public mainMenuIconName: string;
public menu_type: string;
public mcreate:String;
public mdelete:String;
public medit:String;
public menuId:Number;
public mquery:String;
public mvisible:String;
public subMenus: Rn_Sub_Menu[];
}

View File

@ -0,0 +1,16 @@
import { Audit } from "./Audit";
export class Rn_Sub_Menu extends Audit {
public menuItemId: number;
public menuItemDesc: string;
public mainMenuActionName : string;
public mainMenuIconName: string;
public menu_type: string;
public mcreate:String;
public mdelete:String;
public medit:String;
public menuId:Number;
public mquery:String;
public mvisible:String;
//public menu_icon: string;
}

View File

@ -0,0 +1,12 @@
export class StdParam{
public std_id: number;
public col_table_alies_name_std_para: string;
public col_std_para_query: string;
public field_type: string;
public sp_for_dd: string;
}

View File

@ -0,0 +1,14 @@
export class WhereParam{
public where_id: number;
public explecity: string;
public where_coloumn1_tbl_alias_name: string;
public where_coloumn: string;
public where_condition: string;
public switch_control: string;
public where_coloumn2_tbl_alias_name:string;
public where_coloumn2:string;
}

View File

@ -0,0 +1,29 @@
export interface WireFrame {
header: Header;
line: Line;
}
export interface Header {
section: Section[];
}
export interface Line {
section: Section[];
}
export interface Section {
id: number;
fieldName: string;
mapping: string;
dataType: string;
type_field: string;
section_num: number;
fields: Field[];
}
export interface Field {
id: number;
fieldName: string;
mapping: string;
dataType: string;
type_field: string;
section_num: number;
seq: number;
}

View File

@ -0,0 +1,114 @@
export interface WidgetModel {
name: string;
identifier: string;
}
export interface SubmenuItem {
name: string;
identifier: string;
}
export interface WidgetModel1 {
name: string;
submenu?: SubmenuItem[];
showSubmenu?: boolean; // Optional property to control submenu visibility
identifier: string;
}
export interface DashboardContentModel {
cols: number;
rows: number;
y: number;
x: number;
chartid: number;
component?: any;
name: string;
type?:string;
}
export interface DashboardModel {
id: number;
username: string;
dashboard: Array<DashboardContentModel>;
}
export interface DashboardContentModel2 {
cols: number;
rows: number;
y: number;
x: number;
chartid: number;
charttitle?: string;
component?: any;
name: string;
type?: string;
values?:Array<value>;
imgoption?:Array<value>;
keyValue?:string;
fieldtext?:any;
dropdown_type?:string;
imageURL?:string;
}
export interface DashboardModel2 {
id: number;
username: string;
dashboard: Array<DashboardContentModel2>;
}
export class value{
label?:any="";
value?:any="";
}
export class value1{
label1?:any="";
value1?:any="";
}
export const WidgetsMock: WidgetModel[] = [
{
name: 'Radar Chart',
identifier: 'radar_chart'
},
{
name: 'Doughnut Chart',
identifier: 'doughnut_chart'
},
{
name: 'Line Chart',
identifier: 'line_chart'
},
{
name: 'Bar Chart',
identifier: 'bar_chart'
},
{
name: 'Pie Chart',
identifier: 'pie_chart'
},
{
name: 'Polar Area Chart',
identifier: 'polar_area_chart'
},
{
name: 'Bubble Chart',
identifier: 'bubble_chart'
},
{
name: 'Scatter Chart',
identifier: 'scatter_chart'
},
{
name: 'Dynamic Chart',
identifier: 'dynamic_chart'
},
{
name: 'Financial Chart',
identifier: 'financial_chart'
},
{
name: 'To Do',
identifier: 'to_do_chart'
}
]

View File

@ -0,0 +1,9 @@
export class Gitfile {
public content :String;
public url :String;
public sha:String;
public encoding:String;
public size:String;
}

View File

@ -0,0 +1,14 @@
export class RptBuilder{
public id:number;
public name;
public folder: string;
public query: string;
public date_param_flag:boolean;
public adhoc_param_flag:boolean;
public adhoc_param_string: string;
public std_param_json: string;
}

View File

@ -0,0 +1,9 @@
export class Suregit {
public path :String;
public sha :String;
public url :String;
public type:Number;
public mode:String;
public size:String;
}

View File

@ -0,0 +1,9 @@
export class Surename {
public id :number;
public message :String;
public name :String;
public timestamp:Number;
public email:String;
public username:String;
public sha:any;
}

View File

@ -0,0 +1,9 @@
export class Surestar {
public id :number;
public email :String;
public watchers_count :number;
public forks_count:Number;
public stars_count:number;
public size:String;
}

View File

@ -0,0 +1,55 @@
export interface WidgetModel {
name: string;
identifier: string;
}
export interface DashboardContentModel {
cols: number;
rows: number;
y: number;
x: number;
chartid: number;
component?: any;
name: string;
}
export interface DashboardModel {
id: number;
username: string;
dashboard: Array<DashboardContentModel>;
}
export const WidgetsMock: WidgetModel[] = [
// {
// name: 'Text field',
// identifier: 'text_field'
// },
{
name: 'Text area',
identifier: 'text_area'
},
{
name: 'Table field',
identifier: 'table_field'
},
// {
// name: 'Background Color',
// identifier: 'background_color'
// },
// {
// name: 'Box field',
// identifier: 'box_field'
// },
{
name: 'Image field',
identifier: 'img_field'
},
{
name: 'Line field',
identifier: 'line_field'
},
{
name: 'QR code',
identifier: 'qr_code'
}
]

View File

@ -0,0 +1,10 @@
import { Audit } from "../builder/Audit";
export class Bcf_Exception_Rule_Library extends Audit {
id: number;
tech_stack: string;
object_type: string;
sub_object_type: string;
object_name_variable: string;
object_name_dynamic_string: string;
}

View File

@ -0,0 +1,17 @@
import { Audit } from "../builder/Audit";
import { Bcf_Extractor_Params } from "./Bcf_Extractor_Params";
export class Bcf_Extractor extends Audit {
id: number;
tech_stack: string;
tech_stack_key: string;
object_type: string;
sub_object_type: string;
form_type_name: string;
std_wf_name: string;
icon_file_name: string;
sample_file_name: string;
extractor_stage: string;
rn_bcf_extractor_Params: Bcf_Extractor_Params[];
}

View File

@ -0,0 +1,20 @@
import { Audit } from "../builder/Audit";
export class Bcf_Extractor_Params extends Audit {
id: number;
tech_stack: string;
object_type: string;
sub_object_type: string;
file_code: any;
name_string: string;
address_string: string;
moved_address_string: string;
reference_address_string: string;
description: string;
file_name_var: string;
file_name_dynamic_string: string;
is_extraction_enabled: boolean;
is_creation_enabled: boolean;
total_project_path_dynamic_string:string;
}

View File

@ -0,0 +1,16 @@
import { Audit } from "../builder/Audit";
export class Bcf_Rule_Library extends Audit {
id: number;
group_id: number;
rule_name: string;
tech_stack: string;
object_type: string;
sub_object_type: string;
file_code: string;
rule_type: string;
identifier_start_string: string;
identifier_end_string: string;
replacement_string: string;
}

View File

@ -0,0 +1,13 @@
import { BiDashLine } from './BiDashLine';
export class BiDashHeader{
public header_id: number;
public dashboard_name: string;
public components: BiDashLine[];
}

View File

@ -0,0 +1,17 @@
export class BiDashLine{
public section_type: string;
public widgets1: string;
public widgets2: string;
public widgets3: string;
public widgets4: string;
public widgets5: string;
public widgets6: string;
}

View File

@ -0,0 +1,10 @@
export class BiWidget {
public id: number;
public widget_name: string;
public widget_description: string;
public chart_type: string;
public sql_query:string;
public label:string;
public color_scheme:string;
}

View File

@ -0,0 +1,37 @@
//import { Audit } from "./Audit";
import { Audit } from "../builder/Audit";
export class DynamicForm extends Audit {
public id: number;
public form_id: number;
public form_version: number;
public comp1: string;
public comp2: string;
public comp3: string;
public comp4: string;
public comp5: string;
public comp6: string;
public comp7: string;
public comp8: string;
public comp9: string;
public comp10: string;
public comp11: string;
public comp12: string;
public comp13: string;
public comp14: string;
public comp15: string;
public comp16: string;
public comp17: string;
public comp18: string;
public comp19: string;
public comp20: string;
public comp21: string;
public comp22: string;
public comp23: string;
public comp24: string;
public comp25: string;
public comp_l26: string;
public comp_l27: string;
public comp_l28: string;
public comp_l29: string;
public comp_l30: string;
}

View File

@ -0,0 +1,47 @@
import { Audit } from "../builder/Audit";
export class ExtensionField extends Audit {
public id: number;
public field_name: string;
public mapping: string;
public data_type: string;
public form_code: string;
public type: string;
public isActive: boolean;
/* public mandatory: string;
public hidden: string;
public readonly: string;
public dependent: string;
public dependent_on: string;
public dependent_sp: string;
public dependent_sp_param: string;
public validation_1: string;
public val_type: string;
public val_sp: string;
public val_sp_param: string;
public sequence: string;
public seq_name: string;
public seq_sp: string;
public seq_sp_param: string;
public default1: string;
public default_type: string;
public default_value: string;
public default_sp: string;
public default_sp_param: string;
public calculated_field: string;
public cal_sp: string;
public cal_sp_param: string;
public add_to_grid: string;
public attr1: string;
public attr2: string;
public attr3: string;
public drop_value: string;
public dropdown: string;
public sp_name: string;
public ext_dd_id: string;
public sp_name_forautocomplete: string;
public ext_dependent_id: string;
public radio: string;
public radio_option: string; */
}

View File

@ -0,0 +1,4 @@
export interface Mapping {
label: string;
value: string;
}

View File

@ -0,0 +1,12 @@
import { Audit } from "../builder/Audit";
export class Rn_Forms_Component_Setup extends Audit {
public component_id: number;
public label: string;
public type: string;
public mapping: string;
public mandatory: string;
public readonly: string;
public drop_values: string;
public sp: string;
}

View File

@ -0,0 +1,11 @@
import { Rn_Forms_Component_Setup } from "./Rn_Forms_Component_Setup";
import { Audit } from "../builder/Audit";
export class Rn_Forms_Setup extends Audit {
public form_id: number;
public form_name: string;
public form_desc: string;
public related_to: string;
public page_event: string;
public button_caption: string;
public components: Rn_Forms_Component_Setup[];
}

View File

@ -0,0 +1,20 @@
export class RuleCopy {
public from_tech_stack: string;
public from_object_type: string;
public from_sub_object_type: string;
public to_tech_stack: string;
public to_object_type: string;
public to_sub_object_type: string;
}
export interface Rule {
tech_stack: string;
object_type: string;
sub_object_type: string;
version: string;
replacement_string: string;
keyword: string;
priority: number;
service: string;
}

View File

@ -0,0 +1,10 @@
export class student {
public id: number;
public wf_id:number;
public current_json: string;
public status: string;
}

View File

@ -0,0 +1,4 @@
export interface TableList {
// id: number;
table_name: string;
}

View File

@ -0,0 +1,4 @@
export class ValidationError {
field: any;
message: any;
}

View File

@ -0,0 +1,10 @@
export class ApiRegisteryLine {
public id: number;
public url: string;
public method: string;
public header_id: number;
}

View File

@ -0,0 +1,10 @@
export class book {
public id: number;
public booktype: string;
public bookname: string;
public price: number;
public writer: string;
public code:number;
}

View File

@ -0,0 +1,10 @@
export class Department {
public id: number;
public department_code: string;
public description: string;
public active: string;
public created_by:string;
public created_on:string;
public updated_by:string;
public updated_on:string;
}

View File

@ -0,0 +1,10 @@
export class HealthCheckup {
public id: number;
public ip: string;
public port: number;
public serviceName: string;
public createProject: boolean;
public buildProject: boolean;
public createDeployment: boolean;
public deployApp: boolean;
}

View File

@ -0,0 +1,9 @@
export class College {
public studentid: number;
public wf_instance_id:number;
public studentname: string;
public department: string;
public joiningDate: string;
public phone: number;
public emailId:string;
}

View File

@ -0,0 +1,4 @@
export interface TableList {
// id: number;
table_name: string;
}

View File

@ -0,0 +1,11 @@
import {book} from '../../models/fnd/book';
export class university {
public id: number;
public name: string;
public email: string;
public subject: string;
public phone: number;
public books: book[];
}

View File

@ -0,0 +1,45 @@
.clr-input {
color: #212529;
padding: 0.75rem 0.75rem;
margin-top: 10px;
margin-bottom: 10px;
}
input[type=text], [type=password], [type=number], [type=email], [type=date], textarea {
width: 80%;
padding: 15px 15px;
background-color: rgb(255, 255, 255);
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
.eye {
position: absolute;
}
#hide1 {
display: none;
}
.container {
align-content: center;
}
.center {
width: auto;
margin: 0 auto;
}
.required-field, .error_mess {
color: red;
}
select {
margin: 15px 0px;
width: 80%;
padding: 5px 5px;
border: 1px solid #ccc;
border-radius: 4px;
}/*# sourceMappingURL=about-work.component.css.map */

View File

@ -0,0 +1 @@
{"version":3,"sources":["about-work.component.scss","about-work.component.css"],"names":[],"mappings":"AAAA;EACE,cAAA;EAGA,wBAAA;EACA,gBAAA;EACA,mBAAA;ACDF;;ADGA;EACE,UAAA;EACA,kBAAA;EACA,oCAAA;EAEA,qBAAA;EACA,sBAAA;EACA,kBAAA;EACA,sBAAA;ACDF;;ADGA;EACE,kBAAA;ACAF;;ADGA;EACE,aAAA;ACAF;;ADGA;EACE,qBAAA;ACAF;;ADGA;EACE,WAAA;EACA,cAAA;ACAF;;ADGA;EACE,UAAA;ACAF;;ADGA;EACE,gBAAA;EACA,UAAA;EACA,gBAAA;EACA,sBAAA;EACA,kBAAA;ACAF","file":"about-work.component.css"}

View File

@ -0,0 +1,261 @@
<!-- <div *ngIf="data1 else showThis"> -->
<!-- <div *ngIf="editMode === 'data1';then basic_property"> -->
<div class="container center">
<h2 class="text-center"><b>Welcome to <strong>cloudnsure!</strong></b></h2>
<h5 *ngIf="!companyForm" class="text-center" style="margin-top: 10px;">Tell Us More About You <img src="../../../../assets/images/icon/handshakeicon.png" ></h5>
<h5 *ngIf="companyForm" class="text-center" style="margin-top: 10px;">Tell Us About Your Work!</h5>
<!-- <h5 class="text-center">You're signing up as <strong style="font-size: 20px;">{{ email }}</strong></h5> -->
<div class="display_msg">
<form [formGroup]="custentryForm" class="form" style="text-align: center;" *ngIf="!companyForm">
<br>
<div class="center">
<!-- <label for="controllerName"><strong>First Name</strong><span class="required-field">*</span></label><br/> -->
<input class="form__field" type="text" formControlName="first_name" placeholder="First Name" >
<div *ngIf="custsubmitted && custentryForm.controls.first_name.errors" class="error_mess">
<div *ngIf="custsubmitted && custentryForm.controls.first_name.errors.required" class="error_mess">*This field is Required</div>
</div>
</div>
<br>
<div class="center">
<!-- <label for="controllerName"><strong>Last Name</strong><span class="required-field">*</span></label><br/> -->
<input class="form__field" type="text" id="name" formControlName="last_name" placeholder="Last Name" >
<div *ngIf="custsubmitted && custentryForm.controls.last_name.errors" class="error_mess">
<div *ngIf="custsubmitted && custentryForm.controls.last_name.errors.required" class="error_mess">*This field is Required</div>
</div>
</div>
<br>
<div class="center">
<!-- <label for="controllerName"><strong>Mobile</strong><span class="required-field">*</span></label><br/> -->
<input formControlName="mob_no" class="form__field" type="number" placeholder="Mobile Number" ng2TelInput/>
<div *ngIf="custsubmitted && custentryForm.controls.mob_no.errors" class="error_mess">
<div *ngIf="custsubmitted && custentryForm.controls.mob_no.errors.required" class="error_mess">*This field is Required</div>
<div *ngIf="custsubmitted && custentryForm.controls.mob_no.errors.minlength" class="error_mess">*Number must be 10 digit.</div>
<div *ngIf="custsubmitted && custentryForm.controls.mob_no.errors.pattern" class="error_mess">*Invalid mobile number</div>
</div>
</div>
<br>
<div class="center">
<!-- <label for="controllerName"><strong>Date Of Birth</strong><span class="required-field">*</span></label><br/> -->
<input class="form__field" type="date" formControlName="date_of_birth" >
<div *ngIf="custsubmitted && custentryForm.controls.date_of_birth.errors" class="error_mess">
<div *ngIf="custsubmitted && custentryForm.controls.date_of_birth.errors.required" class="error_mess">*This field is Required</div>
</div>
</div>
<br>
<div class="center">
<!-- <label for="controllerName"><strong>Gender</strong><span class="required-field">*</span></label><br> -->
<select formControlName="gender" class="form__field">
<option [value]="null">Choose Gender</option>
<option>Male</option>
<option>Female</option>
<option>Other</option>
</select>
<div *ngIf="custsubmitted && custentryForm.controls.gender.errors" class="error_mess">
<div *ngIf="custsubmitted && custentryForm.controls.gender.errors.required" class="error_mess">*This field is Required</div>
</div>
</div>
<br>
<div class="center">
<!-- <label for="controllerName"><strong>Password</strong><span class="required-field">*</span></label><br/> -->
<input [type]="newpHide ? 'password': 'text'" class="form__field" placeholder="Password" formControlName="new_password" minlenght="6" maxlength="40" style="width: 89%;" [autocomplete]="true">
<clr-icon [attr.shape]="newIcon" (click)="newShapeChanger()"></clr-icon>
<div *ngIf="custsubmitted && custentryForm.controls.new_password.errors" class="error_mess">
<div *ngIf="custsubmitted && custentryForm.controls.new_password.errors.required" class="error_mess">*This field is Required</div>
<div *ngIf="custsubmitted && custentryForm.controls.new_password.errors.minlength" class="error_mess">*Password must be 6 characters or longer.</div>
</div>
</div>
<br>
<div class="center">
<!-- <label for="controllerName"><strong>Re-enter Password</strong><span class="required-field">*</span></label><br/> -->
<input type="password" class="form__field" formControlName="confirm_password" placeholder="Re-enter Password">
<div *ngIf="custsubmitted && custentryForm.controls.confirm_password.errors" class="error_mess">
<div *ngIf="custsubmitted && custentryForm.controls.confirm_password.errors.required" class="error_mess">*This field is Required</div>
<div *ngIf="custentryForm.controls.confirm_password.errors.confirmedValidator" class="error_mess">* Password and Confirm Password must be match.</div>
</div>
</div>
<br>
<div class="center text-center">
<button type="submit" class="btn btn--primary uppercase" (click)="oncustSubmit()">Submit</button>
</div>
</form>
<p *ngIf="!companyForm"> Wrong account? <a routerLink="/login">Log in</a> instead.</p>
</div>
<div class="display_msg">
<form [formGroup]="entryForm" class="form" style="text-align: center;" *ngIf="companyForm" >
<!-- <div class="clr-col-md-4 clr-col-sm-12 center">
<label for="controllerName"><strong>Name</strong><span class="required-field">*</span></label><br/>
<input class="clr-input" type="text" id="name" formControlName="name" placeholder="Enter Name" >
<div *ngIf="submitted && entryForm.controls.name.errors" class="error_mess">
<div *ngIf="submitted && entryForm.controls.name.errors.required" class="error_mess">*This field is Required</div>
</div>
</div> -->
<br>
<div class="center">
<!-- <label for="controllerName"><strong>Company Name</strong><span class="required-field">*</span></label><br/> -->
<input class="form__field" type="text" id="name" formControlName="companyName" placeholder="Company Name" >
<div *ngIf="submitted && entryForm.controls.companyName.errors" class="error_mess">
<div *ngIf="submitted && entryForm.controls.companyName.errors.required" class="error_mess">*This field is Required</div>
</div>
</div>
<br>
<div class="center">
<!-- <label for="controllerName"><strong>Workspace</strong><span class="required-field">*</span></label><br/> -->
<input class="form__field" type="text" placeholder="Workspace" formControlName="workspace" >
<div *ngIf="submitted && entryForm.controls.workspace.errors" class="error_mess">
<div *ngIf="submitted && entryForm.controls.workspace.errors.required" class="error_mess">*This field is Required</div>
</div>
</div>
<br>
<div class="center">
<!-- <label for="controllerName"><strong>GST Number</strong><span class="required-field">*</span></label><br/> -->
<input class="form__field" type="text" placeholder="GST Number" formControlName="gstNumber"
[(ngModel)]="entryForm.value.gstNumber" (ngModelChange)="entryForm.value.gstNumber = $event?.toUpperCase()">
<div *ngIf="submitted && entryForm.controls.gstNumber.errors" class="error_mess">
<div *ngIf="submitted && entryForm.controls.gstNumber.errors.required" class="error_mess">*This field is Required</div>
</div>
</div>
<!-- <div class="clr-col-md-4 clr-col-sm-12 center">
<label for="controllerName"><strong>Password</strong><span class="required-field">*</span></label><br/>
<input class="clr-input" type="password" id="password" formControlName="password">
<div *ngIf="submitted && entryForm.controls.password.errors" class="error_mess">
<div *ngIf="submitted && entryForm.controls.password.errors.required" class="error_mess">*This field is Required</div>
<div *ngIf="submitted && entryForm.controls.password.errors.minlength" class="error_mess">*Password must be 8 characters or longer.</div>
</div>
</div>
<br/>
<div class="clr-col-md-4 clr-col-sm-12 center">
<label for="controllerName"><strong>Re-enter Password</strong><span class="required-field">*</span></label><br/>
<input class="clr-input" type="password" id="confirm_password" formControlName="confirm_password">
<div *ngIf="submitted && entryForm.controls.confirm_password.errors" class="error_mess">
<div *ngIf="submitted && entryForm.controls.confirm_password.errors.required" class="error_mess">*This field is Required</div>
<div *ngIf="entryForm.controls.confirm_password.errors.confirmedValidator" class="error_mess">* Password and Confirm Password must be match.</div>
</div>
</div> -->
<!-- <br>
<div class="clr-col-md-4 clr-col-sm-12 center">
<label for="controllerName"><strong>Mobile</strong><span class="required-field">*</span></label><br/>
<input formControlName="mobile" class="clr-input" type="number" placeholder="Enter Mobile No" ng2TelInput/>
<div *ngIf="submitted && entryForm.controls.mobile.errors" class="error_mess">
<div *ngIf="submitted && entryForm.controls.mobile.errors.required" class="error_mess">*This field is Required</div>
<div *ngIf="submitted && entryForm.controls.mobile.errors.minlength" class="error_mess">*Number must be 10 digit.</div>
<div *ngIf="submitted && entryForm.controls.mobile.errors.pattern" class="error_mess">*Invalid mobile number</div>
</div>
</div> -->
<!-- <br>
<div class="clr-col-md-4 clr-col-sm-12 center">
<label for="controllerName"><strong>Email</strong><span class="required-field">*</span></label><br/>
<input class="clr-input" type="text" id="email" name="email" formControlName="email" placeholder="Enter Email" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$">
<div *ngIf="submitted && entryForm.controls.email.errors" class="error_mess">
<div *ngIf="submitted && entryForm.controls.email.errors.required" class="error_mess">*This field is Required</div>
<div *ngIf="submitted && entryForm.controls.email.errors.pattern" class="error_mess">*Email must be a valid email address</div>
</div>
</div> -->
<br>
<div class="center">
<!-- <label for="controllerName"><strong>Pancard</strong><span class="required-field">*</span></label><br/> -->
<input class="form__field" type="text" placeholder="Pancard Number" formControlName="pancard" [(ngModel)]="entryForm.value.pancard" (ngModelChange)="entryForm.value.pancard = $event?.toUpperCase()">
<div *ngIf="submitted && entryForm.controls.pancard.errors" class="error_mess">
<div *ngIf="submitted && entryForm.controls.pancard.errors.required" class="error_mess">*This field is Required</div>
</div>
</div>
<br>
<div class="center">
<!-- <label for="country"><strong>Country</strong><span class="required-field">*</span></label><br/> -->
<input class="form__field" type="text" id="country" formControlName="country" placeholder="Country Name" >
<div *ngIf="submitted && entryForm.controls.country.errors" class="error_mess">
<div *ngIf="submitted && entryForm.controls.country.errors.required" class="error_mess">*This field is Required</div>
</div>
</div>
<br>
<div class="center">
<!-- <label for="state"><strong>State/Province</strong><span class="required-field">*</span></label><br/> -->
<input class="form__field" type="text" id="state" formControlName="state" placeholder="State/Province Name" >
<div *ngIf="submitted && entryForm.controls.state.errors" class="error_mess">
<div *ngIf="submitted && entryForm.controls.state.errors.required" class="error_mess">*This field is Required</div>
</div>
</div>
<br>
<div class="center">
<!-- <label for="city"><strong>City</strong></label><br/> -->
<input class="form__field" type="text" id="city" formControlName="city" placeholder="City Name" >
<div *ngIf="submitted && entryForm.controls.city.errors" class="error_mess">
<div *ngIf="submitted && entryForm.controls.city.errors.required" class="error_mess">*This field is Required</div>
</div>
</div>
<br>
<div class="center">
<!-- <label for="street_address"><strong>Street Address</strong></label><br/> -->
<textarea col="10" row="2" id="street_address" class="form__field" formControlName="street_address" placeholder="Address" [autocomplete]="true"></textarea>
<div *ngIf="submitted && entryForm.controls.street_address.errors" class="error_mess">
<div *ngIf="submitted && entryForm.controls.street_address.errors.required" class="error_mess">*This field is Required</div>
</div>
</div>
<br>
<div class="center">
<!-- <label for="street_address2"><strong>Street Address 2</strong></label><br/> -->
<textarea col="10" row="2" id="street_address2" class="form__field" formControlName="street_address2" placeholder="Address 2" [autocomplete]="true"></textarea>
<div *ngIf="submitted && entryForm.controls.street_address2.errors" class="error_mess">
<div *ngIf="submitted && entryForm.controls.street_address2.errors.required" class="error_mess">*This field is Required</div>
</div>
</div>
<!-- <div class="clr-col-md-4 clr-col-sm-12 center">
<label for="controllerName"><strong>Working</strong><span class="required-field">*</span></label><br/>
<input class="clr-input" type="text" placeholder="Enter Working" formControlName="working" >
<div *ngIf="submitted && entryForm.controls.working.errors" class="error_mess">
<div *ngIf="submitted && entryForm.controls.working.errors.required" class="error_mess">*This field is Required</div>
</div>
</div>
<br> -->
<br>
<div class="center text-center">
<button type="submit" class="btn btn--primary uppercase" (click)="onSubmit()" >continue</button>
</div>
</form>
<p *ngIf="companyForm"> Wrong account? <a routerLink="/login">Log in</a> instead.</p>
</div>
<!-- <h4>Wrong account? <a href="">Log in</a> instead.</h4> -->
</div>
<!-- </div> -->
<!-- <div *ngIf="data1==false">
<h2>error page</h2>
</div> -->
<!-- <ng-template #showThis>
<h2 style="text-align: center; color: red;"><strong><b>This is error page</b></strong></h2> -->
<!-- <a routerLink="/error-page"></a> -->
<!-- <a [routerLink]="['/error-page']"> -->
<!-- link to user component -->
<!-- </a> -->
<!-- <button (click)="back()"></button> -->
<!--
</ng-template> -->
<!-- <ng-template #showThis>
<h2 style="text-align: center; color: red;"><strong><b>This is error page</b></strong></h2>
</ng-template> -->
<!-- <ng-template #basic_property>
hjshfj
</ng-template> -->

View File

@ -0,0 +1,122 @@
// .clr-input {
// color: #212529;
// // border: 1px solid #ced4da;
// // border-radius: 0.25rem;
// padding: 0.75rem 0.75rem;
// margin-top: 10px;
// margin-bottom: 10px;
// }
// input[type=text],[type=password],[type=number],[type=email],[type=date],textarea {
// width: 80%;
// padding: 15px 15px;
// background-color:rgb(255, 255, 255);
// // margin: 8px 0;
// display: inline-block;
// border: 1px solid #ccc;
// border-radius: 4px;
// box-sizing: border-box;
// }
// .eye {
// position: absolute;
// }
// #hide1 {
// display: none;
// }
// .container {
// align-content: center;
// }
// .center {
// width: auto;
// margin: 0 auto;
// }
.required-field,.error_mess{
color:indianred;
font-weight: bold;
}
// select{
// margin:15px 0px;
// width: 80%;
// padding: 5px 5px;
// border: 1px solid #ccc;
// border-radius: 4px;
// }
$background: #f5f6fa;
$text: #9c9c9c;
$input-bg-color: #fff;
$input-text-color: #a3a3a3;
$button-bg-color: #7f8ff4;
$button-text-color: #fff;
$google-button-bg-color: #7f8ff4;
$linkedin-button-bg-color: #4b76eb;
:root {
background: $background;
color: $text;
font: 1rem "PT Sans", sans-serif;
}
//** helper
.display_msg {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.form {
&__field {
width: 360px;
padding: 7px 9px;
margin: 0 12px;
background-color:rgb(255, 255, 255);
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
}
.btn {
display: inline-block;
background: transparent;
color: inherit;
font: inherit;
border: 0;
outline: 0;
padding: 0;
transition: all 200ms ease-in;
cursor: pointer;
&--primary {
background: $button-bg-color;
color: $button-text-color;
box-shadow: 0 0 10px 2px rgba(0, 0, 0, .1);
border-radius: 2px;
width: 100%;
&:hover {
background: darken($button-bg-color, 4%);
}
&:active {
background: $button-bg-color;
box-shadow: inset 0 0 10px 2px rgba(0, 0, 0, .2);
}
}
}
// form {
// margin-left: 8%;
// }

View File

@ -0,0 +1,25 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { AboutWorkComponent } from './about-work.component';
describe('AboutWorkComponent', () => {
let component: AboutWorkComponent;
let fixture: ComponentFixture<AboutWorkComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ AboutWorkComponent ]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(AboutWorkComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

View File

@ -0,0 +1,301 @@
import {Component, OnInit} from '@angular/core';
import {AbstractControl, FormBuilder, FormControl, FormGroup, ValidationErrors, Validators} from '@angular/forms';
import {ActivatedRoute, Router} from '@angular/router';
import { UserProfileService } from 'src/app/services/admin/user-profile.service';
import { UserRegistrationService } from 'src/app/services/admin/user-registration.service';
import { environment } from 'src/environments/environment';
import { CustomerService } from './customer.service';
import { ToastrService } from 'ngx-toastr';
@Component({
selector: 'app-about-work',
templateUrl: './about-work.component.html',
styleUrls: ['./about-work.component.scss']
})
export class AboutWorkComponent implements OnInit {
// LoginUrl = environment.portalurl;
public entryForm: FormGroup;
public custentryForm: FormGroup; // user
public customerentryForm: FormGroup;
aboutdata;
id: number;
checknumberId: number;
data1: boolean;
name:string;
email: string;
submitted = false;
custsubmitted = false;
constructor(
private router: Router,
private route: ActivatedRoute,
private userRegistration: UserRegistrationService,
private _fb: FormBuilder,
private userprofile: UserProfileService,
private customerservice: CustomerService,
private toastr: ToastrService
) {
}
companyid = 1;
ngOnInit(): void {
this.route.queryParams.subscribe(params => {
this.email = params['email'];
console.log(this.email)
});
this.id = this.route.snapshot.params['id'];
this.checknumberId = this.route.snapshot.params['checknumberId'];
this.name = this.userRegistration.getStoredName();
console.log(this.id, this.checknumberId);
this.userRegistration.removeStoredName();
// this.data1 = this.route.snapshot.data['data1'];
// if (this.id >= 0) {
// this.onCheck();
// }
// else {
// this.router.navigate(['../about-work']);
// }
this.onCheck();
// this.email = this.userRegistration.getStoredEmail();
this.custentryForm = this._fb.group({
first_name: [null, [Validators.required]],
last_name:[null, [Validators.required]],
mob_no:[null,[Validators.required,Validators.pattern('^[0-9]{10}$')]],
email:[this.email],
usrGrpId:[41],
new_password: [null, [Validators.required,Validators.minLength(6),Validators.maxLength(40)]],
confirm_password: [null, [Validators.required]],
account_id:[this.companyid],
date_of_birth:[null, [Validators.required]],
gender:[null,Validators.required]
}, {
validator: ConfirmedValidator('new_password', 'confirm_password')
});
this.entryForm = this._fb.group({
companyName:[null, [Validators.required]],
pancard:[null,[Validators.required]],
workspace:[null,[Validators.required]],
email: [this.email,[Validators.required,Validators.email]],
gstNumber:[null,[Validators.required]],
mobile: [this.custentryForm.value.mob_no, [Validators.pattern('^[0-9]{10}$')]],
country:[null,[Validators.required]],
state:[null,[Validators.required]],
city:[null],
street_address:[null],
street_address2:[null],
}, {
});
this.customerentryForm = this._fb.group({
first_name: [null],
last_name:[null],
date_of_birth:[null],
gender:[null],
companyId:[null],
time_zone:[null,],
gst_state:[null],
email:[null],
entity_name:[this.companyid],
});
}
companyForm:boolean = false;
oncustSubmit(){
console.log(this.custentryForm.value);
// this.custentryForm.value.entity_name = this.companyid;
if (this.custentryForm.invalid) {
this.custsubmitted = true;
return;
}else{
// this.companyForm = true;
// this.oncustContinue();
this.onContinue();
}
}
selectedFile;
oncustContinue() {
console.log(this.custentryForm.value);
this.customerservice.saveCustomer(this.custentryForm.value, this.selectedFile).subscribe((data => {
console.log(data);
console.log(data.id, "User id");
console.log("Roles", data.role);
console.log(data.checknumberId, "checknumber");
this.aboutdata = data;
if (data.role == "USER") {
this.router.navigate(["../login/"]);
// window.location.href = `${this.LoginUrl}/#/login`;
} else {
this.router.navigate(["../pricing/" + data.id]);
}
}))
}
userId;
onSubmit(){
this.entryForm.value.email = this.email
if (this.entryForm.invalid) {
this.submitted = true;
return;
}else{
this.onContinue();
}
}
onContinue() {
// this.entryForm.value.mobile = this.custentryForm.value.mob_no;
console.log(this.custentryForm.value);
// this.userprofile.addUserinSignUP(this.entryForm.value).subscribe(data => {
// console.log(data);
// this.companyid = data.account_id;
// console.log(this.companyid, "company id");
// this.aboutdata = data;
// this.custentryForm.value.account_id = data?.account_id
// // this.custentryForm.value.new_password =
// console.log(this.custentryForm.value);
this.userprofile.adduserData(this.custentryForm.value).subscribe(cdata => {
console.log(cdata);
this.userId = cdata.userId;
if (cdata) {
this.toastr.success("Registrated Successfully");
this.router.navigate(["../login/"]);
} else {
this.router.navigate(["../login/"]);
}
// this.customerentryForm.get('companyId').setValue(this.companyid);
// this.customerentryForm.get('gst_state').setValue(this.entryForm.value.state);
// this.customerentryForm.get('entity_name').setValue(this.entryForm.value.companyName);
// this.customerentryForm.get('first_name').setValue(this.custentryForm.value.first_name);
// this.customerentryForm.get('last_name').setValue(this.custentryForm.value.last_name);
// this.customerentryForm.get('date_of_birth').setValue(this.custentryForm.value.date_of_birth);
// this.customerentryForm.get('gender').setValue(this.custentryForm.value.gender);
// this.customerentryForm.get('email').setValue(this.email);
// this.customerservice.saveCustomer(this.customerentryForm.value, this.selectedFile).subscribe(data => {
// console.log(data);
// console.log(data.id, "User id");
// this.aboutdata = data;
// if (data.status >= 200 && data.status <= 299) {
// console.log(data?.body)
// this.router.navigate(["../pricing/" + this.companyid +"/" +this.userId]);
// }
// })
},(error)=>{
console.log(error);
this.toastr.error(error?.error.message);
})
// })
}
onCheck() {
this.userprofile.getUser(this.id, this.checknumberId).subscribe((data => {
// console.log(data.userId, "User id");
console.log("data", data.email);
console.log(data);
this.data1 = data;
this.email = data.email;
this.name=data.fullName;
(<FormControl>this.entryForm.controls['email']).setValue(data.email);
(<FormControl>this.entryForm.controls['name']).setValue(data.fullName);
console.log(this.name)
}))
}
onCountryChange(event) {
console.log(event.dialCode);
console.log(event.name);
console.log(event.iso2);
}
back() {
this.router.navigate(["../../all"], {relativeTo: this.route});
}
newpHide: boolean = true;
newIcon: string = "eye";
newShapeChanger() {
this.newpHide = !this.newpHide;
if(this.newpHide){
this.newIcon = 'eye'
} else {
this.newIcon = 'eye-hide'
}
}
cnewpHide: boolean = true;
cnewIcon: string = "eye";
cnewShapeChanger() {
this.cnewpHide = !this.cnewpHide;
if(this.cnewpHide){
this.cnewIcon = 'eye'
} else {
this.cnewIcon = 'eye-hide'
}
}
}
// export function passwordMatchValidator(control: AbstractControl): ValidationErrors | null {
// const password = control.get('password');
// const confirmPassword = control.get('confirmPassword');
// if (password.value !== confirmPassword.value) {
// return { passwordMismatch: true };
// }
// return null;
// }
export function ConfirmedValidator(controlName: string, matchingControlName: string){
return (formGroup: FormGroup) => {
const control = formGroup.controls[controlName];
const matchingControl = formGroup.controls[matchingControlName];
if (matchingControl.errors && !matchingControl.errors.confirmedValidator) {
return;
}
if (control.value !== matchingControl.value) {
matchingControl.setErrors({ confirmedValidator: true });
} else {
matchingControl.setErrors(null);
}
}
}

Some files were not shown because too many files have changed in this diff Show More