Created sidebar example again but in mvp pattern

goofy-client/apps/showcase/src/app/app.component.html

@@ -2,6 +2,7 @@
     <a class="{{a}}" routerLink="sidebar">Sidebar</a><br />
     <a class="{{a}}" routerLink="buttons">Buttons</a><br />
     <a class="{{a}}" routerLink="mvp-demo">MVP-Pattern Demo</a><br />
+    <a class="{{a}}" routerLink="mvp-sidebar">MVP-Pattern Sidebar</a><br />
     <lib-button iconMat="dark_mode" class="{{toggle}}" (click)="toggleDarkLight()">Toogle theme</lib-button><br />
 </div>
 <div class="{{demo}}">

goofy-client/apps/showcase/src/app/app.routes.ts

@@ -2,9 +2,11 @@ import { Route } from '@angular/router';
 import {SidebarComponent} from "./sidebar/sidebar.component";
 import {ButtonsComponent} from "./buttons/buttons.component";
 import {DemoContainerComponent} from "./mvp-demo/demo-container.component";
+import {SidebarContainerComponent} from "./mvp-sidebar/sidebar-container.component";
 
 export const appRoutes: Route[] = [
     { path: 'sidebar', component: SidebarComponent },
     { path: 'buttons', component: ButtonsComponent },
     { path: 'mvp-demo', component: DemoContainerComponent },
+    { path: 'mvp-sidebar', component: SidebarContainerComponent },
 ];

goofy-client/apps/showcase/src/app/mvp-sidebar/menu.ts

+export enum menu {
+    neu,
+    angenommen,
+    in_bearbeitung,
+    beschieden,
+    abgeschlossen,
+    verworfen,
+    zu_loeschen,
+}

goofy-client/apps/showcase/src/app/mvp-sidebar/sidebar-container.component.html

+<app-sidebar-ui [selected]="selected" [count]="count" (updateSelected)="updateSelected($event)"></app-sidebar-ui>
\ No newline at end of file

goofy-client/apps/showcase/src/app/mvp-sidebar/sidebar-container.component.ts

+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { menu } from './menu';
+import {SidebarUiComponent} from "./sidebar-ui.component";
+
+@Component({
+	selector: 'app-sidebar-container',
+	standalone: true,
+	imports: [CommonModule, SidebarUiComponent],
+	templateUrl: './sidebar-container.component.html',
+})
+export class SidebarContainerComponent {
+	public selected = menu.neu;
+	public count = 0;
+	
+	public updateSelected(item: menu) {
+		// from here we can go even up the service level. 
+		// in this example there is no service
+		// possible is also to give the selected menu out through an eventemitter
+		this.selected = item;
+		this.count++;
+	}
+}

goofy-client/apps/showcase/src/app/mvp-sidebar/sidebar-presenter.service.ts

+import {Injectable} from '@angular/core';
+import { menu } from './menu';
+import {Subject} from "rxjs";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class SidebarPresenter {
+
+  updateSelected = new Subject<menu>();
+  
+  constructor() { }
+  
+  handleClick(item: menu) {
+    // handle click on menu item
+    // decide what to do
+    this.updateSelected.next(item);
+  }
+}

goofy-client/apps/showcase/src/app/mvp-sidebar/sidebar-ui.component.html

+<lib-sidebar-fixed>
+    <lib-button
+            [iconStyle]="dotRecipe({color: selected === menu.neu ? 'neuAktiv' : 'neu'})" 
+            (click)="click(menu.neu)" 
+            label="Neu"
+            labelRight="{{count}}"
+    />
+    <lib-button
+            [iconStyle]="dotRecipe({color: selected === menu.angenommen ? 'angenommenAktiv' : 'angenommen' })"
+            (click)="click(menu.angenommen)" 
+            label="Angenommen"
+            labelRight="{{count*2}}"
+    />
+    <lib-button 
+            [iconStyle]="dotRecipe({color: selected === menu.in_bearbeitung ? 'in_bearbeitungAktiv' : 'in_bearbeitung'})" 
+            (click)="click(menu.in_bearbeitung)" 
+            label="In Bearbeitung"
+            labelRight="{{count*3}}"
+    />
+    <lib-button 
+            [iconStyle]="dotRecipe({color: selected === menu.beschieden ? 'beschiedenAktiv' : 'beschieden'})" 
+            (click)="click(menu.beschieden)" 
+            label="Beschieden"
+            labelRight="{{count*4}}"
+    />
+    <lib-button
+            [iconStyle]="dotRecipe({color: selected === menu.abgeschlossen ? 'abgeschlossenAktiv' : 'abgeschlossen'})" 
+            (click)="click(menu.abgeschlossen)" 
+            label="Abgeschlossen"
+            labelRight="{{count*5}}"
+    />
+    <lib-button
+            [iconStyle]="dotRecipe({color: selected === menu.verworfen ? 'verworfenAktiv': 'verworfen'})" 
+            (click)="click(menu.verworfen)" 
+            label="Zu löschen"
+            labelRight="{{count*6}}"
+    />
+</lib-sidebar-fixed>

goofy-client/apps/showcase/src/app/mvp-sidebar/sidebar-ui.component.ts

+import {Component, EventEmitter, Input, Output} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {dotRecipe, UiAlfaModule} from "ui-alfa";
+import { menu } from './menu';
+import {SidebarPresenter} from "./sidebar-presenter.service";
+
+@Component({
+	selector: 'app-sidebar-ui',
+	standalone: true,
+	imports: [CommonModule, UiAlfaModule],
+	templateUrl: './sidebar-ui.component.html',
+})
+export class SidebarUiComponent {
+	@Input() selected = menu.neu;
+	@Input() count = 0;
+	@Output() updateSelected = new EventEmitter<menu>();
+
+	constructor(private presenter: SidebarPresenter) {
+		// bind to events from presenter
+		this.presenter.updateSelected.subscribe(v => this.updateSelected.emit(v));
+	}
+	
+	public click(item: menu) {
+		this.presenter.handleClick(item);
+	}
+	
+	readonly dotRecipe = dotRecipe;
+	readonly menu = menu;
+}