2.2 KiB
SwisssignChallengeUi
This project was generated using Angular CLI version 19.1.4.
Development server
To start a local development server, run:
# force is needed for Tailwind
npm i --force
ng serve
The default login is john@example.com for the username and password for the password.
No document is selected when you first arrive on the page. You must select a document first.
Generate code after API changes
When the API is changed, the client source code must be regenerated.
- Install the CLI
npm install -g @openapitools/openapi-generator-cli - Download the latest OpenAPI spec file from the API repository. Please don't commit it!
- Run
openapi-generator-cli generate -i [path_to_openapi.yml] -g typescript-angular -o src/gen/. Commit those changes
Choices
Tailwind
I've first heard of Tailwind a few months ago when setting up my blog with Astro. I've been bitten a few times by component libraries that provided components not easy to customize. That's especially true when the end-user wants something that is not idiomatically feasible.
It basically gives you CSS classes that you can use in your HTML, which was exactly what I needed for that project. LLMs use Tailwind very well as it is fairly popular and well-documented. No more writing CSS files with "!important" everywhere!
open-api-generator-cli
I discovered OpenAPI generators about a year ago. Turns out there's one for NPM, and it worked great to generate the services to interact with the API. When you make an API change, you're pretty much sure that your client is going to work - as long as the API respects the specification file.
ng2-pdf-viewer
I've never interacted with files programmatically. This library made it a bit easier, but I find that there's a lack of a button to print, zoom, download, ...
I think it's good enough and allowed me to quickly see if my API was returning a correctly-formatted PDF.
Potential improvements
The first thing I would do is use some global variable to store button styling. For example, it should be red when enabled and gray when disabled. It should also be with rounded borders. You get the idea.