Side View

apps/page/customer-rd/src/lib/customer-search/customer-search.component.html

@@ -1,4 +1,5 @@
 <page-split-screen class="max-h-[calc(100vh-13.875rem)] h-[calc(100vh-13.875rem)]" [side]="side$ | async">
   <page-customer-results-side-view *sideTemplate="'results'"></page-customer-results-side-view>
+  <page-customer-main-side-view [processId]="processId$ | async" *sideTemplate="'main'"></page-customer-main-side-view>
   <router-outlet></router-outlet>
 </page-split-screen>

apps/page/customer-rd/src/lib/customer-search/customer-search.component.ts

@@ -39,6 +39,8 @@ export class CustomerSearchComponent implements OnInit, OnDestroy {
     return this._activatedRoute.firstChild?.snapshot;
   }
 
+  readonly processId$ = this._store.processId$;
+
   private _eventsSubscription: Subscription;
 
   private _customerChangedSubscription: Subscription;

apps/page/customer-rd/src/lib/customer-search/customer-search.module.ts

@@ -9,6 +9,7 @@ import { CustomerDetailsMainViewModule } from './details-main-view/details-main-
 import { CustomerHistoryMainViewModule } from './history-main-view/history-main-view.module';
 import { CustomerFilterMainViewModule } from './filter-main-view/filter-main-view.module';
 import { SplitScreenModule } from '../components/split-screen/split-screen.module';
+import { MainSideViewModule } from './main-side-view/main-side-view.module';
 
 @NgModule({
   imports: [
@@ -20,6 +21,7 @@ import { SplitScreenModule } from '../components/split-screen/split-screen.modul
     CustomerDetailsMainViewModule,
     CustomerHistoryMainViewModule,
     CustomerFilterMainViewModule,
+    MainSideViewModule,
   ],
   exports: [CustomerSearchComponent],
   declarations: [CustomerSearchComponent],

apps/page/customer-rd/src/lib/customer-search/main-side-view/main-side-view.component.css

@@ -0,0 +1,7 @@
+:host {
+  @apply bg-surface text-surface-content rounded-card flex flex-col h-full;
+}
+
+.side-view-shadow {
+  box-shadow: 0px -2px 24px rgba(220, 226, 233, 0.8);
+}

apps/page/customer-rd/src/lib/customer-search/main-side-view/main-side-view.component.html

@@ -0,0 +1,12 @@
+<a
+  [routerLink]="customerCreateNavigation.path"
+  [queryParams]="customerCreateNavigation.queryParams"
+  class="text-[1.375rem] font-bold text-[#596470] text-center py-4"
+  >Kundendaten erfassen</a
+>
+<div class="text-center pt-10 px-8 rounded-card side-view-shadow grow">
+  <h1 class="text-[1.625rem] font-bold">Kundensuche</h1>
+  <p class="text-lg mt-2">
+    Wir legen Ihnen gerne ein Onlinekonto an, dort können Sie Ihre Bestellungen einsehen.
+  </p>
+</div>

apps/page/customer-rd/src/lib/customer-search/main-side-view/main-side-view.component.ts

@@ -0,0 +1,24 @@
+import { CommonModule } from '@angular/common';
+import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { CustomerCreateNavigation } from '../../navigations/customer-create.navigation';
+import { NumberInput } from '@angular/cdk/coercion';
+
+@Component({
+  selector: 'page-customer-main-side-view',
+  templateUrl: 'main-side-view.component.html',
+  styleUrls: ['main-side-view.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [CommonModule, RouterModule],
+})
+export class MainSideViewComponent {
+  @Input()
+  processId: NumberInput;
+
+  get customerCreateNavigation() {
+    return this._navigation.defaultRoute({ processId: this.processId });
+  }
+
+  constructor(private _navigation: CustomerCreateNavigation) {}
+}

apps/page/customer-rd/src/lib/customer-search/main-side-view/main-side-view.module.ts

@@ -0,0 +1,9 @@
+import { NgModule } from '@angular/core';
+
+import { MainSideViewComponent } from './main-side-view.component';
+
+@NgModule({
+  imports: [MainSideViewComponent],
+  exports: [MainSideViewComponent],
+})
+export class MainSideViewModule {}

apps/page/customer-rd/src/lib/navigations/customer-create.navigation.ts

@@ -0,0 +1,30 @@
+import { NumberInput, coerceNumberProperty } from '@angular/cdk/coercion';
+import { Injectable } from '@angular/core';
+import { Params, Router, UrlTree } from '@angular/router';
+
+export interface NavigationRoute {
+  path: any[];
+  queryParams?: Params;
+  urlTree: UrlTree;
+}
+
+@Injectable({ providedIn: 'root' })
+export class CustomerCreateNavigation {
+  constructor(private _router: Router) {}
+
+  defaultRoute(params: { processId: NumberInput }): NavigationRoute {
+    const path = ['/kunde', coerceNumberProperty(params.processId), 'customer', 'create'];
+
+    const urlTree = this._router.createUrlTree(path, { queryParams: {} });
+
+    return {
+      path,
+      urlTree,
+    };
+  }
+
+  navigateToDefault(params: { processId: NumberInput }): Promise<boolean> {
+    const route = this.defaultRoute(params);
+    return this._router.navigate(route.path, { queryParams: route.queryParams });
+  }
+}

apps/page/customer-rd/src/lib/routes.ts

@@ -40,7 +40,8 @@ export const routes: Routes = [
         path: '',
         component: CustomerSearchComponent,
         children: [
-          { path: '', component: CustomerResultsMainViewComponent, data: { breadcumb: 'main' } },
+          { path: '', component: CustomerFilterMainViewComponent, data: { side: 'main', breadcumb: 'main' } },
+          { path: 'list', component: CustomerResultsMainViewComponent, data: { breadcumb: 'main' } },
           { path: 'filter', component: CustomerFilterMainViewComponent, data: { side: 'results', breadcumb: 'main' } },
           { path: ':customerId', component: CustomerDetailsViewMainComponent, data: { side: 'results', breadcumb: 'details' } },
           { path: ':customerId/history', component: CustomerHistoryMainViewComponent, data: { side: 'results', breadcumb: 'history' } },