CSSS Admin Application

This Angular application is used by administrators to update the CSSS site database.

Development

Install dependencies and start the local server:

npm install
npm start

The application is served at http://localhost:8080/ and reloads when source files change. npm start regenerates the backend API client before starting Angular.

API validation constraints

Generate TypeScript constraint objects from the local OpenAPI 3.1 document:

npm run api:constraints

The command reads src/app/api/backend-api.schema.json and writes src/app/api/backend-api.constraints.ts. Generated constraints keep requiredness and nullability separate and expose values such as minLength, maxLength, numeric bounds, patterns, array bounds, formats, enums, and defaults.

Use those values with Signal Forms validators:

import { honoraryMemberCreateConstraints } from '@api/backend-api.constraints';

const constraints = honoraryMemberCreateConstraints;

if (constraints.name.required) {
  required(path.name);
}
maxLength(path.name, constraints.name.maxLength);

npm run prebuild, npm start, and npm run build regenerate the constraint file after generating the local API client. Handwritten cross-field and UI-only validation remains in the dialogs.

Generate a CRUD feature

The separately packaged schematic in schematics/ creates the table, dialog, source service, and their specs. Build and link it locally before generating:

cd schematics
npm install
npm run build
npm link

cd ..
npm link csss-crud

Run the generator from the application root:

ng generate csss-crud:crud <feature-name> --model <ResponseType> --create-type <CreateType>

--model is the API response interface and --create-type is the create-request interface. For example, using the generated candidate API models:

ng generate csss-crud:crud candidates --model Candidate --create-type CandidateCreate

Files are created under src/app/pages/dashboard/<feature-name>. The schematic deliberately does not edit routes or navigation. After generation:

1. Verify the source service inferred the correct API service, method names, and signatures.
2. Verify its primary key and add valid default model values.
3. Add the Signal Forms model and fields, then apply its generated API constraints.
4. Define the AG Grid columns.
5. Add the feature to the dashboard routes.
6. Add its top-bar navigation item.

Generation fails if any destination file already exists.

Testing

Application unit tests use Angular's Vitest builder:

npm test -- --watch=false

Run the schematic's Node-environment Vitest suite from the application root:

npm run test:schematics

Quality checks

npm run lint
npx ng build

npm run build also regenerates the backend API client before invoking the Angular build.