Name		Name	Last commit message	Last commit date
parent directory ..
e2e		e2e
public		public
src		src
.env.local.example		.env.local.example
.eslintrc.cjs		.eslintrc.cjs
.gitignore		.gitignore
.node-version		.node-version
.prettierignore		.prettierignore
DockerfilePlaywright		DockerfilePlaywright
README.md		README.md
histoire.config.ts		histoire.config.ts
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
parseAllowedLicences.sh		parseAllowedLicences.sh
playwright.config.ts		playwright.config.ts
postcss.config.js		postcss.config.js
prettier.config.js		prettier.config.js
sonar-project.properties		sonar-project.properties
tailwind.config.js		tailwind.config.js
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
vite.config.ts		vite.config.ts

README.md

Frontend

The frontend is the main entry point for users of RIS norms.

From here the users can handle their procedures ("Vorgänge").

Development

Prerequisites

Node.js (with a .node-version file) for simplified setup using `nodenv``

Quick-Start

npm i fetches all dependencies
npm run dev starts the application. By default on local port 5173. You will also need a running backend.
npm run test runs the tests (in watcher mode)
npm run coverage compiles a coverage report via v8
npm run style:check does linting and formatting
npm run style:fix will try to fix linting and formatting issues
npm run build builds the app
npm run histoire shows the frontend components in isolation

Vue 3 + TypeScript + Vite (from the vite/vue docs)

This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 <script setup> SFCs, check out the script setup docs to learn more.

Recommended IDE Setup

VS Code + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).

Type Support For `.vue` Imports in TS

TypeScript cannot handle type information for .vue imports by default, so we replace the tsc CLI with vue-tsc for type checking. In editors, we need TypeScript Vue Plugin (Volar) to make the TypeScript language service aware of .vue types.

If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a Take Over Mode that is more performant. You can enable it by the following steps:

Disable the built-in TypeScript Extension
1. Run Extensions: Show Built-in Extensions from VSCode's command palette
2. Find TypeScript and JavaScript Language Features, right click and select Disable (Workspace)
Reload the VSCode window by running Developer: Reload Window from the command palette.

Setup Playwright for E2E Tests

Playbook:

Make sure the backend runs here.
Make sure the frontend runs here.
Install Playwright
Let Playwright know where to connect to by using the .env file: cp .env.local.example .env.local
Run the E2E Test

Icons

All icons in the Google Material sets can be used.

To make the icon available in your code:

Find and select the icon
Copy the name (e.g. ic/baseline-upload-file)
Use the copied icon name in your import statement using the ~icons/ic prefix followed by the name. Example: import UploadFileOutlineRounded from "~icons/ic/baseline-upload-file"

Prepare your system:

npx --yes playwright install --with-deps chrome firefox webkit

Run all tests:

npm run test:e2e

Run just 1 specific test:

npm run test:e2e -- [testfile]

Debug an e2e test:

npm run test:e2e -- [testfile] --debug

Files

frontend

Directory actions

More options