README.md

# GoofyClient

## Lokale Entwicklungsumgebung

Besteht aus:

* Node 16 (getestet: 16.18.1)
* NPM 8 (getestet: 8.19.2)
* Docker (Linux) bzw. Docker Desktop (Linux, Mac, Windows)
  * docker compose v2 [installieren](https://github.com/docker/compose) (Linux) bzw. aktivieren (Docker Desktop)
* Einem Editor wie [Visual Studio Code](https://code.visualstudio.com/)

### Node 16 / NPM 8 installieren

Linux:

* Der eigenen Distribution entsprechende Dokumentation unter https://nodejs.org/en/download/package-manager/
* Beispiel Debian:
  * https://deb.nodesource.com/setup_16.x prüfen auf Schadcode
  * Installieren:
```
curl -fsSL https://deb.nodesource.com/setup_16.x | bash - &&\
apt-get install -y nodejs
```

Mac:

* Homebrew installieren:
  * Anleitung auf https://brew.sh folgen
  * Hinweis: https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh prüfen auf Schadcode vor der Installation
* Node 16 installieren: `brew install node@16`

Windows:

* Download des Installers von https://nodejs.org/download/release/v16.18.1/

## Client starten

Um den Client zum Laufen zu bekommen, muss zunächst ein `npm install --legacy-peer-deps` ausgeführt werden.

-> nach dem Ausführen sollte sich ein `node_modules` Ordner im Verzeichnis befinden.

Im Anschluß wird der Client über `npm start` gestartet.

Hinweise:

* Bei nicht nachvollziehbaren Problemen während der Installation kann es helfen, den `node_modules` Ordner zu löschen und anschließend erneut zu installieren.
* Prüfen, dass `npm install` die _package-lock.json_ nicht anpasst, wenn das nicht wirklich gewollt ist. Das kann geschehen, wenn ein älteres/neueres NPM verwendet wurde oder ein NPM-Proxy in der _~/.npmrc_ eingetragen ist.

---

## Common information to Nx from Nx

This project was generated using [Nx](https://nx.dev).

[Nx Documentation](https://nx.dev/angular)

[10-minute video showing all Nx features](https://nx.dev/angular/getting-started/what-is-nx)

[Interactive Tutorial](https://nx.dev/angular/tutorial/01-create-application)

## Adding capabilities to your workspace

Nx supports many plugins which add capabilities for developing different types of applications and different tools.

These capabilities include generating applications, libraries, etc as well as the devtools to test, and build projects as well.

Below are our core plugins:

- [Angular](https://angular.io)
  - `ng add @nrwl/angular`
- [Node](https://nodejs.org)
  - `ng add @nrwl/node`

There are also many [community plugins](https://nx.dev/nx-community) you could add.

## Generate a library

Run `ng g lib my-lib` to generate a library.

Libraries are sharable across libraries and applications. They can be imported from `@goofy-client/mylib`.

## Generate a Component

Run

```bash
npx nx g @nrwl/angular:component 'component-name' --project=my-app
```

to generate a new component.

## Delete a generated Library

```bash
nx g @nrwl/workspace:remove 'library-name'
```

## Beispiel für Libraries und anderes anlegen

Libraries usw. werden durch das [Nx Plugin for Angular](https://nx.dev/packages/angular) erzeugt.

Anlegen eines Features (funktionale Einheit) am Beispiel des Historie-Tab auf der Vorgangdetail-Seite:

* historie: UI
* historie-shared: Services, State (NgRX)

```
npx nx g @nrwl/angular:lib historie
npx nx g @nrwl/angular:lib historie-shared
```

Libraries enthalten:

- Services
- Container-Komponenten:
  - Bereitstellen von Daten durch Services
  - Einbinden von Child-Komponenten
- Child-Komponenten
  - Darstellen von Daten, via @Input() übergeben
  - Zurückgeben von Daten, via @Output() / Emitter

Container-Komponente anlegen:

```
npx nx g @nrwl/angular:component historie-container --project=historie --export
```

Child-Komponente anlegen - soll nur in übergeordnete Container-Komponenten eingebunden werden:

```
npx nx g @nrwl/angular:component historie-list --project=historie --path=libs/historie/src/lib/historie-container
```

Service anlegen:

_TODO: Wo werden Services verwendet (nur in Container-Komponenten einbinden), was ist der Inhalt?_

```
npx nx g service historie --project=historie-shared --flat
```

Repository anlegen:

_Kein Nx generator vorhanden - muss manuell getan werden._

Dateien für NgRx state management anlegen:

```
npx nx g @nrwl/angular:ngrx --name=historie --directory=+state --module=libs/historie-shared/src/lib/historie-shared.module.ts --facade=true --root=false
```

Hinweis: Die Datei _libs/historie/tsconfig.json_ enthält möglicherweise zu restriktive Compiler-Optionen. Hinzufügen von `"strictPropertyInitialization": true` beruhigt die IDE, jedoch nicht die Unit Tests. Geholfen hat, alle _compilerOptions_ sowie _angularCompilerOptions_ zu entfernen.

## Allgemein

Man kann mit Hilfe von `nx --help` eine Liste von Befehlen mit kurzen Erläuterung bekommen.

</br>

## NG/NX short explanation

- Angular ClI = **ng**
- Nx Cli = **nx**

Nx Cli baut auf Angular Cli auf ist jedoch wesentlich schneller bspw. durch

- _advanced code analysis_
- _computation caching (reuse previous results)_

Sofern die Commands für das Generieren von Code genutzt werden, so ist der generierte Code immer derselbe!

## `Install NX global`

```bash
npm install -g nx
```

Mit `nx` bzw. `nx --list` krieg man eine Liste alle verfügbaren, schon von nx **vordefinierten** commands an

</br>

## Anbei ein Ausschnitt der verfügbaren Befehle/Scripte und einer kurzen Erläuterung

| Command | Description | Examples |
| :------ | :------ | :----- |
| `start` | Startet den Client mit dem Port **4300** und der **proxy.conf.json** | `npm start / npm run start`
| `build` | Baut das Projekt(und cached den build) | `npm run build`
| `test` | Führt alle Test's aus(**app** + **ibraries**) | `npm run test / npm test`
| `test:cov` | Führt alle Test's aus und zeigt am Ende eine Übersicht der Testabdeckung | `npm run test:cov`
| `lint` | Führt das **eslint** für die, von den lokalen Änderungen **direkt** betroffenen, libraries aus | `npm run lint`
| `dep-graph` | Öffnet ein Fenster zur graphischen Veranschaulichung des Zusammenspielst von app, e2e und der einzelnen libraries | `npm run dep-graph`
| `cypress:open` | Öffnet ein Fenster mit cpress-runner für die Integrationtest's welche auch gleich da ausgeführt werden können | `npm run cypress:open`
| `test:lib` | Führt alle Test's einer library aus(mit watch mode) | `npm run test:lib --lib=vorgang`
| `test:debug:lib` | Führt alle Test's einer library und zeigt zusätzlich eine genauere Fehlermeldung an(mit watch mode) | `npm run test:debug:lib --lib=vorgang`

## Affected

Hier eine kurze Liste mit den wichtigsten Befehlen:

`affected:*`: </br>
 Bezieht sich meistens auf die von den lokalen Änderungen betroffenen Libraries, kann sich aber auch auf die betroffenen Projekte beziehen.

- `affected:libs`
Zeigt eine Liste der Libraries die von den lokalen Änderungen betroffen sind </br>
(hier kann man zusätzlich auch den `dep-graph` zur Hand nehmen für eine bessere Übersicht)
- `affected:test`
Führt die Test's für die Libraries aus die von den lokalen Änderungen betroffen sind.</br>
(inklusive der app Test's)
- `affected:lint`
Führt das eslint über die betroffenen Libraries aus. </br>
Man bekommt am Ende eine Zusammenfassung von den Warnings und Errors.
- `affected:dep-graph`
Selektiert die von den lokalen Änderung betroffenen Libraries vor und stellt diese in Rot dar. </br>
(sonst identisch zu `dep-graph`)

`affected:apps`, `affected:e2e`, `affected:build` beziehen sich jeweils auf ganze Projekte/Apps.

## **Ngrx**

Command zum Generieren einer state.
Beispiel für den fachlichen Vorgang:

```code
nx g @nrwl/angular:ngrx vorgang --module=libs/vorgang-shared/src/lib/vorgang.module.ts
```

Es wird eine Menge Testcode generiert, es ist dem entsprechend abzuwägen, ob man sich die generieren lässt oder die Struktur selber anlegt und sich das rausschmeißen des generierten Codes spart.

Die generierten Daten kommen in ein `+state` Verzeichnis.
die Schnittstelle zu den Componenten der `service`.

## **Marbles**

Für Mehr Info: <https://github.com/ReactiveX/rxjs/blob/master/docs_app/content/guide/testing/marble-testing.md#marble-syntax>

| Marble Syntax | Description |
| :------ | :------ |
| `'-'` | frame: 1 "frame" of virtual time passing (see above description of frames).
| `'\|'` | complete: The successful completion of an observable. This is the observable producer signaling `complete()`.
| `'#'` | error: An error terminating the observable. This is the observable producer signaling `error()`.

Das Frontend wird als Mono Repository via [Nx](https://nx.dev/getting-started/intro) organisiert.

Voneinander trennbare funktionale Bereiche innerhalb einer Anwendung sind in Libaries unterteilt.

## HTTP-Fehler simulieren

1. `netcat` in einer Bash simuliert einen HTTP-Server auf Port 8081, der auf jeden Request einen 500er Fehler zurück gibt.

```bash
while true; do
  { echo -e "HTTP/1.1 500 Internal Server Error\r\nContent-Length: 25\r\nContent-Type: text/plain\r\nDate: $(date)\r\n"; \
    echo '500 Internal Server Error';  \
  } | nc -l 8081;
done
```

2. Test in einem Terminal mit `curl -IL localhost:8081`

3. _proxy.conf.json_ so konfigurieren, dass für den zu testenden HTTP-Pfad auf den netcat-Server umgeleitet wird. Anschließend `npm start` neu starten. Beispiel für _/api/histories_:

```json
{
	"/api/histories": {
		"target": {
			"host": "localhost",
			"port": 8081,
			"protocol": "http:"
		},
		"secure": false,
		"logLevel": "debug"
	},
	"/api": {
		"target": {
			"host": "localhost",
			"port": 8080,
			"protocol": "http:"
		},
		"secure": false,
		"logLevel": "debug"
	}
}
```

## Library umbenennen

Beispiel: `settings` nach `user-settings`

1. `nx g @nrwl/workspace:move --projectName settings --destination user-settings`
2. `find user-settings/* -depth -execdir rename  's/settings/user-settings/g' {} \;`
3. `git add --all` (Git Historie umbenannter Dateien bleibt erhalten)
4. Globales Suchen/Ersetzen im Code, Großschreibung beachten
   - /settings => /user-settings
   - Settings => UserSettings
   - goofy-client-settings => goofy-client-user-settings

## NodeJs

Für eine angenehme Handhabung mehrerer NodeJs Version kann [nvm](https://nodejs.org/en/download/package-manager/#nvm)  oder `n` genutzt wird.

### NVM

Installiert werden kann es unter anderem mit `curl https://raw.githubusercontent.com/creationix/nvm/master/install.sh | bash`.

Anschließend `source ~/.profile` zum fetchen ausführen.

`nvm ls-remote` -> kann man sich eine Liste verfügbarer Versionen anzeigen lassen.
`nvm install v16.8.1` -> installiert die entsprechende Version.
`nvm use v16.18.1` -> setzt die Version als Default/aktuell genutzte Version.

### N