2025-01-23 11:10:23 +01:00
|
|
|
# SwisssignChallengeUi
|
|
|
|
|
|
|
|
|
|
This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.1.4.
|
|
|
|
|
|
|
|
|
|
## Development server
|
|
|
|
|
|
|
|
|
|
To start a local development server, run:
|
|
|
|
|
|
|
|
|
|
```bash
|
2025-01-31 08:08:15 +01:00
|
|
|
# force is needed for Tailwind
|
|
|
|
|
npm i --force
|
2025-01-23 11:10:23 +01:00
|
|
|
ng serve
|
|
|
|
|
```
|
|
|
|
|
|
2025-01-31 15:50:39 +01:00
|
|
|
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**.
|
|
|
|
|
|
2025-01-29 18:15:23 +01:00
|
|
|
## Generate code after API changes
|
2025-01-23 11:10:23 +01:00
|
|
|
|
2025-01-29 18:15:23 +01:00
|
|
|
When the API is changed, the client source code must be regenerated.
|
2025-01-23 11:10:23 +01:00
|
|
|
|
2025-01-29 18:15:23 +01:00
|
|
|
1. Install the CLI `npm install -g @openapitools/openapi-generator-cli`
|
|
|
|
|
1. Download the latest OpenAPI spec file from the API repository. **Please don't commit it!**
|
|
|
|
|
1. Run `openapi-generator-cli generate -i [path_to_openapi.yml] -g typescript-angular -o src/gen/`. **Commit those changes**
|
2025-01-31 15:50:39 +01:00
|
|
|
|
|
|
|
|
## 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](https://openapi-generator.tech/docs/installation),
|
|
|
|
|
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.
|
