mirror of
https://dev.azure.com/hugendubel/ISA/_git/ISA-Frontend
synced 2025-12-28 22:42:11 +01:00
feat(crm): add crm-data-access library with initial component and tests
- Introduced the crm-data-access library with a basic component. - Added necessary configuration files, including ESLint and TypeScript settings. - Implemented unit tests for the component to ensure functionality. Refs: #5254
This commit is contained in:
Lorenz Hilpert
9
.vscode/settings.json
vendored
9
.vscode/settings.json
vendored
@@ -87,6 +87,11 @@
|
||||
}
|
||||
],
|
||||
"nxConsole.generateAiAgentRules": true,
|
||||
"chat.mcp.enabled": true,
|
||||
"chat.mcp.discovery.enabled": true
|
||||
"chat.mcp.discovery.enabled": {
|
||||
"claude-desktop": true,
|
||||
"windsurf": true,
|
||||
"cursor-global": true,
|
||||
"cursor-workspace": true
|
||||
},
|
||||
"chat.mcp.access": "all"
|
||||
}
|
||||
|
||||
@@ -1,128 +1,136 @@
|
||||
# Tech Stack Documentation
|
||||
|
||||
## Core Technologies
|
||||
|
||||
### Frontend Framework
|
||||
|
||||
- **[Angular](https://angular.dev/overview)** (Latest Version)
|
||||
- Modern web framework for building scalable single-page applications
|
||||
- Leverages TypeScript for enhanced type safety and developer experience
|
||||
|
||||
### State Management
|
||||
|
||||
- **[NgRx](https://ngrx.io/docs)**
|
||||
- Redux-inspired state management for Angular applications
|
||||
- Provides predictable state container and powerful dev tools
|
||||
- Used for managing complex application state and side effects
|
||||
|
||||
### Styling
|
||||
|
||||
- **[Tailwind CSS](https://tailwindcss.com/)**
|
||||
- Utility-first CSS framework
|
||||
- Enables rapid UI development with pre-built classes
|
||||
- Highly customizable through configuration
|
||||
|
||||
## Development Tools
|
||||
|
||||
### Language
|
||||
|
||||
- **[TypeScript](https://www.typescriptlang.org/docs/handbook/intro.html)**
|
||||
- Strongly typed programming language
|
||||
- Provides enhanced IDE support and compile-time error checking
|
||||
- Used throughout the entire application
|
||||
|
||||
### Runtime
|
||||
|
||||
- **[Node.js](https://nodejs.org/docs/latest-v22.x/api/index.html)**
|
||||
- JavaScript runtime environment
|
||||
- Used for development server and build tools
|
||||
- Required for running npm scripts and development tools
|
||||
|
||||
### Testing Framework
|
||||
|
||||
- **[Jest](https://jestjs.io/docs/getting-started)**
|
||||
|
||||
- Primary testing framework
|
||||
- Used for unit and integration tests
|
||||
- Provides snapshot testing capabilities
|
||||
|
||||
- **[Spectator](https://ngneat.github.io/spectator/)**
|
||||
- Angular testing utility library
|
||||
- Simplifies component testing
|
||||
- Reduces boilerplate in test files
|
||||
|
||||
### UI Development
|
||||
|
||||
- **[Storybook](https://storybook.js.org/docs/get-started/frameworks/angular)**
|
||||
- UI component development environment
|
||||
- Enables isolated component development
|
||||
- Serves as living documentation for components
|
||||
|
||||
### Utilities
|
||||
|
||||
- **[date-fns](https://date-fns.org/docs/Getting-Started)**
|
||||
- Modern JavaScript date utility library
|
||||
- Used for consistent date formatting and manipulation
|
||||
- Tree-shakeable to optimize bundle size
|
||||
- **[Lodash](https://lodash.com/)**
|
||||
- Utility library for common JavaScript tasks
|
||||
- **[UUID](https://www.npmjs.com/package/uuid)**
|
||||
- Generates unique identifiers
|
||||
- **[Zod](https://github.com/colinhacks/zod)**
|
||||
- TypeScript-first schema validation library
|
||||
|
||||
## Additional Technical Areas
|
||||
|
||||
### Authentication & Authorization
|
||||
|
||||
- **[angular-oauth2-oidc](https://github.com/manfredsteyer/angular-oauth2-oidc)**
|
||||
- Simplifies implementing OAuth2 and OIDC authentication in Angular.
|
||||
- **[angular-oauth2-oidc-jwks](https://github.com/manfredsteyer/angular-oauth2-oidc)**
|
||||
- Adds JWKS support for secure token management.
|
||||
|
||||
### Real-Time Communication
|
||||
|
||||
- **[@microsoft/signalr](https://www.npmjs.com/package/@microsoft/signalr)**
|
||||
- Provides real-time communication between client and server components.
|
||||
|
||||
### Barcode Scanning
|
||||
|
||||
- **[Scandit Web Data Capture Barcode](https://www.scandit.com/documentation/web/)**
|
||||
- Robust barcode scanning capabilities integrated into the application.
|
||||
- **[Scandit Web Data Capture Core](https://www.scandit.com/documentation/web/)**
|
||||
- Core library supporting the barcode scanning features.
|
||||
|
||||
### Tooling
|
||||
|
||||
- **[Nx](https://nx.dev/)**
|
||||
- Powerful monorepo tool for Angular and other frontend applications.
|
||||
- **[Husky](https://typicode.github.io/husky/#/)**
|
||||
- Manages Git hooks for consistent developer workflows.
|
||||
- **[ESLint](https://eslint.org/) & [Prettier](https://prettier.io/)**
|
||||
- Linting and formatting tools to maintain consistent code quality.
|
||||
- **[Storybook](https://storybook.js.org/)**
|
||||
- Isolated component development and living documentation environment.
|
||||
|
||||
## Development Environment Setup
|
||||
|
||||
1. **Required Software**
|
||||
|
||||
- Node.js (Latest LTS version)
|
||||
- npm (comes with Node.js)
|
||||
- Git
|
||||
|
||||
2. **IDE Recommendations**
|
||||
|
||||
- Visual Studio Code with following extensions:
|
||||
- Angular Language Service
|
||||
- ESLint
|
||||
- Prettier
|
||||
- Tailwind CSS IntelliSense
|
||||
|
||||
3. **Getting Started**
|
||||
```bash
|
||||
npm install # Install dependencies
|
||||
npm run start # Start development server
|
||||
npm run test # Run tests
|
||||
npm run storybook # Start Storybook
|
||||
```
|
||||
# Tech Stack Documentation
|
||||
|
||||
## Core Technologies
|
||||
|
||||
### Frontend Framework
|
||||
|
||||
- **[Angular](https://angular.dev/overview)** (Latest Version)
|
||||
- Modern web framework for building scalable single-page applications
|
||||
- Leverages TypeScript for enhanced type safety and developer experience
|
||||
|
||||
### State Management
|
||||
|
||||
- **[NgRx](https://ngrx.io/docs)**
|
||||
- Redux-inspired state management for Angular applications
|
||||
- Provides predictable state container and powerful dev tools
|
||||
- Used for managing complex application state and side effects
|
||||
|
||||
### Styling
|
||||
|
||||
- **[Tailwind CSS](https://tailwindcss.com/)**
|
||||
- Utility-first CSS framework
|
||||
- Enables rapid UI development with pre-built classes
|
||||
- Highly customizable through configuration
|
||||
|
||||
## Development Tools
|
||||
|
||||
### Language
|
||||
|
||||
- **[TypeScript](https://www.typescriptlang.org/docs/handbook/intro.html)**
|
||||
- Strongly typed programming language
|
||||
- Provides enhanced IDE support and compile-time error checking
|
||||
- Used throughout the entire application
|
||||
|
||||
### Runtime
|
||||
|
||||
- **[Node.js](https://nodejs.org/docs/latest-v22.x/api/index.html)**
|
||||
- JavaScript runtime environment
|
||||
- Used for development server and build tools
|
||||
- Required for running npm scripts and development tools
|
||||
|
||||
### Testing Framework
|
||||
|
||||
- **[Jest](https://jestjs.io/docs/getting-started)**
|
||||
|
||||
- Primary testing framework
|
||||
- Used for unit and integration tests
|
||||
- Provides snapshot testing capabilities
|
||||
|
||||
- **[Spectator](https://ngneat.github.io/spectator/)**
|
||||
- Angular testing utility library
|
||||
- Simplifies component testing
|
||||
- Reduces boilerplate in test files
|
||||
|
||||
### UI Development
|
||||
|
||||
- **[Storybook](https://storybook.js.org/docs/get-started/frameworks/angular)**
|
||||
- UI component development environment
|
||||
- Enables isolated component development
|
||||
- Serves as living documentation for components
|
||||
|
||||
### Utilities
|
||||
|
||||
- **[date-fns](https://date-fns.org/docs/Getting-Started)**
|
||||
- Modern JavaScript date utility library
|
||||
- Used for consistent date formatting and manipulation
|
||||
- Tree-shakeable to optimize bundle size
|
||||
- **[Lodash](https://lodash.com/)**
|
||||
- Utility library for common JavaScript tasks
|
||||
- **[UUID](https://www.npmjs.com/package/uuid)**
|
||||
- Generates unique identifiers
|
||||
- **[Zod](https://github.com/colinhacks/zod)**
|
||||
- TypeScript-first schema validation library
|
||||
|
||||
## Additional Technical Areas
|
||||
|
||||
### Authentication & Authorization
|
||||
|
||||
- **[angular-oauth2-oidc](https://github.com/manfredsteyer/angular-oauth2-oidc)**
|
||||
- Simplifies implementing OAuth2 and OIDC authentication in Angular.
|
||||
- **[angular-oauth2-oidc-jwks](https://github.com/manfredsteyer/angular-oauth2-oidc)**
|
||||
- Adds JWKS support for secure token management.
|
||||
|
||||
### Real-Time Communication
|
||||
|
||||
- **[@microsoft/signalr](https://www.npmjs.com/package/@microsoft/signalr)**
|
||||
- Provides real-time communication between client and server components.
|
||||
|
||||
### Barcode Scanning
|
||||
|
||||
- **[Scandit Web Data Capture Barcode](https://www.scandit.com/documentation/web/)**
|
||||
- Robust barcode scanning capabilities integrated into the application.
|
||||
- **[Scandit Web Data Capture Core](https://www.scandit.com/documentation/web/)**
|
||||
- Core library supporting the barcode scanning features.
|
||||
|
||||
### Tooling
|
||||
|
||||
- **[Nx](https://nx.dev/)**
|
||||
- Powerful monorepo tool for Angular and other frontend applications.
|
||||
- **[Husky](https://typicode.github.io/husky/#/)**
|
||||
- Manages Git hooks for consistent developer workflows.
|
||||
- **[ESLint](https://eslint.org/) & [Prettier](https://prettier.io/)**
|
||||
- Linting and formatting tools to maintain consistent code quality.
|
||||
- **[Storybook](https://storybook.js.org/)**
|
||||
- Isolated component development and living documentation environment.
|
||||
|
||||
## Domain Libraries
|
||||
|
||||
### Customer Relationship Management (CRM)
|
||||
|
||||
- **`@isa/crm/data-access`**
|
||||
- Handles data access logic for customer-related features.
|
||||
- Contains services for fetching and managing customer data.
|
||||
|
||||
## Development Environment Setup
|
||||
|
||||
1. **Required Software**
|
||||
|
||||
- Node.js (Latest LTS version)
|
||||
- npm (comes with Node.js)
|
||||
- Git
|
||||
|
||||
2. **IDE Recommendations**
|
||||
|
||||
- Visual Studio Code with following extensions:
|
||||
- Angular Language Service
|
||||
- ESLint
|
||||
- Prettier
|
||||
- Tailwind CSS IntelliSense
|
||||
|
||||
3. **Getting Started**
|
||||
```bash
|
||||
npm install # Install dependencies
|
||||
npm run start # Start development server
|
||||
npm run test # Run tests
|
||||
npm run storybook # Start Storybook
|
||||
```
|
||||
|
||||
7
libs/crm/data-access/README.md
Normal file
7
libs/crm/data-access/README.md
Normal file
@@ -0,0 +1,7 @@
|
||||
# crm-data-access
|
||||
|
||||
This library was generated with [Nx](https://nx.dev).
|
||||
|
||||
## Running unit tests
|
||||
|
||||
Run `nx test crm-data-access` to execute the unit tests.
|
||||
34
libs/crm/data-access/eslint.config.cjs
Normal file
34
libs/crm/data-access/eslint.config.cjs
Normal file
@@ -0,0 +1,34 @@
|
||||
const nx = require('@nx/eslint-plugin');
|
||||
const baseConfig = require('../../../eslint.config.js');
|
||||
|
||||
module.exports = [
|
||||
...baseConfig,
|
||||
...nx.configs['flat/angular'],
|
||||
...nx.configs['flat/angular-template'],
|
||||
{
|
||||
files: ['**/*.ts'],
|
||||
rules: {
|
||||
'@angular-eslint/directive-selector': [
|
||||
'error',
|
||||
{
|
||||
type: 'attribute',
|
||||
prefix: 'crm',
|
||||
style: 'camelCase',
|
||||
},
|
||||
],
|
||||
'@angular-eslint/component-selector': [
|
||||
'error',
|
||||
{
|
||||
type: 'element',
|
||||
prefix: 'crm',
|
||||
style: 'kebab-case',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
files: ['**/*.html'],
|
||||
// Override or add rules here
|
||||
rules: {},
|
||||
},
|
||||
];
|
||||
20
libs/crm/data-access/project.json
Normal file
20
libs/crm/data-access/project.json
Normal file
@@ -0,0 +1,20 @@
|
||||
{
|
||||
"name": "crm-data-access",
|
||||
"$schema": "../../../node_modules/nx/schemas/project-schema.json",
|
||||
"sourceRoot": "libs/crm/data-access/src",
|
||||
"prefix": "crm",
|
||||
"projectType": "library",
|
||||
"tags": [],
|
||||
"targets": {
|
||||
"test": {
|
||||
"executor": "@nx/vite:test",
|
||||
"outputs": ["{options.reportsDirectory}"],
|
||||
"options": {
|
||||
"reportsDirectory": "../../../coverage/libs/crm/data-access"
|
||||
}
|
||||
},
|
||||
"lint": {
|
||||
"executor": "@nx/eslint:lint"
|
||||
}
|
||||
}
|
||||
}
|
||||
1
libs/crm/data-access/src/index.ts
Normal file
1
libs/crm/data-access/src/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export * from './lib/crm-data-access/crm-data-access.component';
|
||||
@@ -0,0 +1 @@
|
||||
<p>CrmDataAccess works!</p>
|
||||
@@ -0,0 +1,21 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { CrmDataAccessComponent } from './crm-data-access.component';
|
||||
|
||||
describe('CrmDataAccessComponent', () => {
|
||||
let component: CrmDataAccessComponent;
|
||||
let fixture: ComponentFixture<CrmDataAccessComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [CrmDataAccessComponent],
|
||||
}).compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(CrmDataAccessComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,10 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
|
||||
@Component({
|
||||
selector: 'crm-crm-data-access',
|
||||
imports: [CommonModule],
|
||||
templateUrl: './crm-data-access.component.html',
|
||||
styleUrl: './crm-data-access.component.css',
|
||||
})
|
||||
export class CrmDataAccessComponent {}
|
||||
13
libs/crm/data-access/src/test-setup.ts
Normal file
13
libs/crm/data-access/src/test-setup.ts
Normal file
@@ -0,0 +1,13 @@
|
||||
import '@angular/compiler';
|
||||
import '@analogjs/vitest-angular/setup-zone';
|
||||
|
||||
import {
|
||||
BrowserTestingModule,
|
||||
platformBrowserTesting,
|
||||
} from '@angular/platform-browser/testing';
|
||||
import { getTestBed } from '@angular/core/testing';
|
||||
|
||||
getTestBed().initTestEnvironment(
|
||||
BrowserTestingModule,
|
||||
platformBrowserTesting(),
|
||||
);
|
||||
30
libs/crm/data-access/tsconfig.json
Normal file
30
libs/crm/data-access/tsconfig.json
Normal file
@@ -0,0 +1,30 @@
|
||||
{
|
||||
"extends": "../../../tsconfig.base.json",
|
||||
"compilerOptions": {
|
||||
"importHelpers": true,
|
||||
"moduleResolution": "bundler",
|
||||
"strict": true,
|
||||
"noImplicitOverride": true,
|
||||
"noPropertyAccessFromIndexSignature": true,
|
||||
"noImplicitReturns": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"module": "preserve"
|
||||
},
|
||||
"angularCompilerOptions": {
|
||||
"enableI18nLegacyMessageIdFormat": false,
|
||||
"strictInjectionParameters": true,
|
||||
"strictInputAccessModifiers": true,
|
||||
"typeCheckHostBindings": true,
|
||||
"strictTemplates": true
|
||||
},
|
||||
"files": [],
|
||||
"include": [],
|
||||
"references": [
|
||||
{
|
||||
"path": "./tsconfig.lib.json"
|
||||
},
|
||||
{
|
||||
"path": "./tsconfig.spec.json"
|
||||
}
|
||||
]
|
||||
}
|
||||
27
libs/crm/data-access/tsconfig.lib.json
Normal file
27
libs/crm/data-access/tsconfig.lib.json
Normal file
@@ -0,0 +1,27 @@
|
||||
{
|
||||
"extends": "./tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "../../../dist/out-tsc",
|
||||
"declaration": true,
|
||||
"declarationMap": true,
|
||||
"inlineSources": true,
|
||||
"types": []
|
||||
},
|
||||
"exclude": [
|
||||
"src/**/*.spec.ts",
|
||||
"src/test-setup.ts",
|
||||
"jest.config.ts",
|
||||
"src/**/*.test.ts",
|
||||
"vite.config.ts",
|
||||
"vite.config.mts",
|
||||
"vitest.config.ts",
|
||||
"vitest.config.mts",
|
||||
"src/**/*.test.tsx",
|
||||
"src/**/*.spec.tsx",
|
||||
"src/**/*.test.js",
|
||||
"src/**/*.spec.js",
|
||||
"src/**/*.test.jsx",
|
||||
"src/**/*.spec.jsx"
|
||||
],
|
||||
"include": ["src/**/*.ts"]
|
||||
}
|
||||
29
libs/crm/data-access/tsconfig.spec.json
Normal file
29
libs/crm/data-access/tsconfig.spec.json
Normal file
@@ -0,0 +1,29 @@
|
||||
{
|
||||
"extends": "./tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "../../../dist/out-tsc",
|
||||
"types": [
|
||||
"vitest/globals",
|
||||
"vitest/importMeta",
|
||||
"vite/client",
|
||||
"node",
|
||||
"vitest"
|
||||
]
|
||||
},
|
||||
"include": [
|
||||
"vite.config.ts",
|
||||
"vite.config.mts",
|
||||
"vitest.config.ts",
|
||||
"vitest.config.mts",
|
||||
"src/**/*.test.ts",
|
||||
"src/**/*.spec.ts",
|
||||
"src/**/*.test.tsx",
|
||||
"src/**/*.spec.tsx",
|
||||
"src/**/*.test.js",
|
||||
"src/**/*.spec.js",
|
||||
"src/**/*.test.jsx",
|
||||
"src/**/*.spec.jsx",
|
||||
"src/**/*.d.ts"
|
||||
],
|
||||
"files": ["src/test-setup.ts"]
|
||||
}
|
||||
27
libs/crm/data-access/vite.config.mts
Normal file
27
libs/crm/data-access/vite.config.mts
Normal file
@@ -0,0 +1,27 @@
|
||||
/// <reference types='vitest' />
|
||||
import { defineConfig } from 'vite';
|
||||
import angular from '@analogjs/vite-plugin-angular';
|
||||
import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
|
||||
import { nxCopyAssetsPlugin } from '@nx/vite/plugins/nx-copy-assets.plugin';
|
||||
|
||||
export default defineConfig(() => ({
|
||||
root: __dirname,
|
||||
cacheDir: '../../../node_modules/.vite/libs/crm/data-access',
|
||||
plugins: [angular(), nxViteTsPaths(), nxCopyAssetsPlugin(['*.md'])],
|
||||
// Uncomment this if you are using workers.
|
||||
// worker: {
|
||||
// plugins: [ nxViteTsPaths() ],
|
||||
// },
|
||||
test: {
|
||||
watch: false,
|
||||
globals: true,
|
||||
environment: 'jsdom',
|
||||
include: ['{src,tests}/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
|
||||
setupFiles: ['src/test-setup.ts'],
|
||||
reporters: ['default'],
|
||||
coverage: {
|
||||
reportsDirectory: '../../../coverage/libs/crm/data-access',
|
||||
provider: 'v8' as const,
|
||||
},
|
||||
},
|
||||
}));
|
||||
@@ -48,6 +48,7 @@
|
||||
"@isa/core/notifications": ["libs/core/notifications/src/index.ts"],
|
||||
"@isa/core/storage": ["libs/core/storage/src/index.ts"],
|
||||
"@isa/core/tabs": ["libs/core/tabs/src/index.ts"],
|
||||
"@isa/crm/data-access": ["libs/crm/data-access/src/index.ts"],
|
||||
"@isa/icons": ["libs/icons/src/index.ts"],
|
||||
"@isa/oms/data-access": ["libs/oms/data-access/src/index.ts"],
|
||||
"@isa/oms/feature/return-details": [
|
||||
|
||||
Reference in New Issue
Block a user