From 564afb7e32cd14b751d76c92ba2ccab943f41e63 Mon Sep 17 00:00:00 2001 From: Lorenz Hilpert Date: Mon, 4 Sep 2023 13:17:47 +0000 Subject: [PATCH] =?UTF-8?q?Merged=20PR=201621:=20#4272=20Men=C3=BC=20zeigt?= =?UTF-8?q?=20Bestellungen,=20Kundenkarte=20und=20Details=20an?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit #4272 Menü zeigt Bestellungen, Kundenkarte und Details an --- apps/isa-app/src/assets/icons.json | 5 + .../customer-menu/customer-menu.component.css | 3 + .../customer-menu.component.html | 49 ++++++++ .../customer-menu/customer-menu.component.ts | 111 ++++++++++++++++++ .../src/lib/components/customer-menu/index.ts | 1 + .../details-main-view.component.html | 34 ++---- .../details-main-view.component.ts | 4 +- .../details-main-view.module.ts | 2 + .../history-main-view.component.html | 17 ++- .../history-main-view.component.ts | 5 + .../history-main-view.module.ts | 3 +- .../kundenkarte-main-view.component.html | 11 +- .../kundenkarte-main-view.component.ts | 5 +- .../orders-main-view.component.html | 14 +-- .../orders-main-view.component.ts | 11 +- .../menu/src/lib/menu-item.directive.ts | 2 +- .../components/menu/src/lib/menu.component.ts | 2 +- tailwind-plugins/menu.plugin.js | 2 +- tailwind.config.js | 5 + 19 files changed, 224 insertions(+), 62 deletions(-) create mode 100644 apps/page/customer-rd/src/lib/components/customer-menu/customer-menu.component.css create mode 100644 apps/page/customer-rd/src/lib/components/customer-menu/customer-menu.component.html create mode 100644 apps/page/customer-rd/src/lib/components/customer-menu/customer-menu.component.ts create mode 100644 apps/page/customer-rd/src/lib/components/customer-menu/index.ts diff --git a/apps/isa-app/src/assets/icons.json b/apps/isa-app/src/assets/icons.json index acf3a5239..9ef60e5d5 100644 --- a/apps/isa-app/src/assets/icons.json +++ b/apps/isa-app/src/assets/icons.json @@ -271,6 +271,11 @@ "name": "calendar-today", "data": "M180-80q-24 0-42-18t-18-42v-620q0-24 18-42t42-18h65v-60h65v60h340v-60h65v60h65q24 0 42 18t18 42v620q0 24-18 42t-42 18H180Zm0-60h600v-430H180v430Zm0-490h600v-130H180v130Zm0 0v-130 130Z", "viewBox": "0 -960 960 960" + }, + { + "name": "apps", + "data": "M226-160q-28 0-47-19t-19-47q0-28 19-47t47-19q28 0 47 19t19 47q0 28-19 47t-47 19Zm254 0q-28 0-47-19t-19-47q0-28 19-47t47-19q28 0 47 19t19 47q0 28-19 47t-47 19Zm254 0q-28 0-47-19t-19-47q0-28 19-47t47-19q28 0 47 19t19 47q0 28-19 47t-47 19ZM226-414q-28 0-47-19t-19-47q0-28 19-47t47-19q28 0 47 19t19 47q0 28-19 47t-47 19Zm254 0q-28 0-47-19t-19-47q0-28 19-47t47-19q28 0 47 19t19 47q0 28-19 47t-47 19Zm254 0q-28 0-47-19t-19-47q0-28 19-47t47-19q28 0 47 19t19 47q0 28-19 47t-47 19ZM226-668q-28 0-47-19t-19-47q0-28 19-47t47-19q28 0 47 19t19 47q0 28-19 47t-47 19Zm254 0q-28 0-47-19t-19-47q0-28 19-47t47-19q28 0 47 19t19 47q0 28-19 47t-47 19Zm254 0q-28 0-47-19t-19-47q0-28 19-47t47-19q28 0 47 19t19 47q0 28-19 47t-47 19Z", + "viewBox": "0 -960 960 960" } ], diff --git a/apps/page/customer-rd/src/lib/components/customer-menu/customer-menu.component.css b/apps/page/customer-rd/src/lib/components/customer-menu/customer-menu.component.css new file mode 100644 index 000000000..a30e58ec1 --- /dev/null +++ b/apps/page/customer-rd/src/lib/components/customer-menu/customer-menu.component.css @@ -0,0 +1,3 @@ +:host { + @apply inline-block; +} diff --git a/apps/page/customer-rd/src/lib/components/customer-menu/customer-menu.component.html b/apps/page/customer-rd/src/lib/components/customer-menu/customer-menu.component.html new file mode 100644 index 000000000..0f0297400 --- /dev/null +++ b/apps/page/customer-rd/src/lib/components/customer-menu/customer-menu.component.html @@ -0,0 +1,49 @@ + + + +
+ + Kundendetails + Bestellungen + Kundenkarte + Historie + +
+ diff --git a/apps/page/customer-rd/src/lib/components/customer-menu/customer-menu.component.ts b/apps/page/customer-rd/src/lib/components/customer-menu/customer-menu.component.ts new file mode 100644 index 000000000..87e74107d --- /dev/null +++ b/apps/page/customer-rd/src/lib/components/customer-menu/customer-menu.component.ts @@ -0,0 +1,111 @@ +import { BooleanInput, NumberInput, coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion'; +import { CdkMenuModule } from '@angular/cdk/menu'; +import { Component, ChangeDetectionStrategy, Input } from '@angular/core'; +import { IconComponent } from '@shared/components/icon'; +import { SharedMenuModule } from '@shared/components/menu'; +import { combineLatest } from 'rxjs'; +import { map } from 'rxjs/operators'; +import { CustomerSearchNavigation } from '../../navigations'; +import { ComponentStore } from '@ngrx/component-store'; +import { RouterLink } from '@angular/router'; +import { AsyncPipe, NgIf } from '@angular/common'; + +export interface CustomerMenuComponentState { + customerId?: number; + processId?: number; + hasCustomerCard?: boolean; + showCustomerDetails: boolean; + showCustomerOrders: boolean; + showCustomerHistory: boolean; + showCustomerCard: boolean; +} + +@Component({ + selector: 'page-customer-menu', + templateUrl: 'customer-menu.component.html', + styleUrls: ['customer-menu.component.css'], + changeDetection: ChangeDetectionStrategy.OnPush, + host: { class: 'page-customer-menu' }, + standalone: true, + imports: [CdkMenuModule, SharedMenuModule, IconComponent, RouterLink, NgIf, AsyncPipe], +}) +export class CustomerMenuComponent extends ComponentStore { + @Input() set customerId(value: NumberInput) { + this.patchState({ customerId: coerceNumberProperty(value) }); + } + + @Input() set hasCustomerCard(value: BooleanInput) { + this.patchState({ hasCustomerCard: coerceBooleanProperty(value) }); + } + + @Input() set processId(value: NumberInput) { + this.patchState({ processId: coerceNumberProperty(value) }); + } + + @Input() set showCustomerDetails(value: BooleanInput) { + this.patchState({ showCustomerDetails: coerceBooleanProperty(value) }); + } + + @Input() set showCustomerOrders(value: BooleanInput) { + this.patchState({ showCustomerOrders: coerceBooleanProperty(value) }); + } + + @Input() set showCustomerHistory(value: BooleanInput) { + this.patchState({ showCustomerHistory: coerceBooleanProperty(value) }); + } + + @Input() set showCustomerCard(value: BooleanInput) { + this.patchState({ showCustomerCard: coerceBooleanProperty(value) }); + } + + readonly customerId$ = this.select((state) => state.customerId); + + readonly processId$ = this.select((state) => state.processId); + + readonly hasCustomerCard$ = this.select((state) => state.hasCustomerCard); + + readonly showCustomerDetails$ = this.select((state) => state.showCustomerDetails); + + readonly showCustomerOrders$ = this.select((state) => state.showCustomerOrders); + + readonly showCustomerHistory$ = this.select((state) => state.showCustomerHistory); + + readonly showCustomerCard$ = this.select((state) => state.showCustomerCard); + + historyRoute$ = combineLatest([this.showCustomerHistory$, this.processId$, this.customerId$]).pipe( + map( + ([showCustomerHistory, processId, customerId]) => + showCustomerHistory && processId && customerId && this._navigation.historyRoute({ processId, customerId }) + ) + ); + + ordersRoute$ = combineLatest([this.showCustomerOrders$, this.processId$, this.customerId$]).pipe( + map( + ([showCustomerOrders, processId, customerId]) => + showCustomerOrders && processId && customerId && this._navigation.ordersRoute({ processId, customerId }) + ) + ); + + kundenkarteRoute$ = combineLatest([this.showCustomerCard$, this.hasCustomerCard$, this.processId$, this.customerId$]).pipe( + map( + ([showCustomerCard, hasCustomerCard, processId, customerId]) => + showCustomerCard && hasCustomerCard && processId && customerId && this._navigation.kundenkarteRoute({ processId, customerId }) + ) + ); + + customerDetailsRoute$ = combineLatest([this.showCustomerDetails$, this.processId$, this.customerId$]).pipe( + map( + ([showCustomerDetails, processId, customerId]) => + showCustomerDetails && processId && customerId && this._navigation.detailsRoute({ processId, customerId }) + ) + ); + + constructor(private _navigation: CustomerSearchNavigation) { + super({ + showCustomerCard: true, + showCustomerDetails: true, + showCustomerHistory: true, + showCustomerOrders: true, + }); + } +} diff --git a/apps/page/customer-rd/src/lib/components/customer-menu/index.ts b/apps/page/customer-rd/src/lib/components/customer-menu/index.ts new file mode 100644 index 000000000..9a48acfaa --- /dev/null +++ b/apps/page/customer-rd/src/lib/components/customer-menu/index.ts @@ -0,0 +1 @@ +export * from './customer-menu.component'; diff --git a/apps/page/customer-rd/src/lib/customer-search/details-main-view/details-main-view.component.html b/apps/page/customer-rd/src/lib/customer-search/details-main-view/details-main-view.component.html index 8fe62c1e8..79b2bcc0a 100644 --- a/apps/page/customer-rd/src/lib/customer-search/details-main-view/details-main-view.component.html +++ b/apps/page/customer-rd/src/lib/customer-search/details-main-view/details-main-view.component.html @@ -1,31 +1,13 @@
-
-
- Bestellungen - Kundenkarte - Historie +
+
+

diff --git a/apps/page/customer-rd/src/lib/customer-search/details-main-view/details-main-view.component.ts b/apps/page/customer-rd/src/lib/customer-search/details-main-view/details-main-view.component.ts index daac23263..18e7e46f8 100644 --- a/apps/page/customer-rd/src/lib/customer-search/details-main-view/details-main-view.component.ts +++ b/apps/page/customer-rd/src/lib/customer-search/details-main-view/details-main-view.component.ts @@ -1,9 +1,8 @@ import { Component, ChangeDetectionStrategy, OnInit, OnDestroy } from '@angular/core'; import { Subject, combineLatest } from 'rxjs'; -import { debounceTime, filter, first, map, share, switchMap, takeUntil, tap, throttleTime } from 'rxjs/operators'; +import { first, map, switchMap, takeUntil } from 'rxjs/operators'; import { CustomerSearchNavigation } from '../../navigations'; import { CustomerSearchStore } from '../store'; -import { CrmCustomerService } from '@domain/crm'; import { ShippingAddressDTO, NotificationChannel, ShoppingCartDTO, PayerDTO, BuyerDTO } from '@swagger/checkout'; import { DomainCheckoutService } from '@domain/checkout'; import { CantAddCustomerToCartData, CantAddCustomerToCartModalComponent, CantSelectGuestModalComponent } from '../../modals'; @@ -13,7 +12,6 @@ import { ApplicationService } from '@core/application'; import { CheckoutNavigationService, ProductCatalogNavigationService } from '@shared/services'; import { Router } from '@angular/router'; import { log, logAsync } from '@utils/common'; -import { isBoolean } from 'lodash'; const GENDER_MAP = { 2: 'Herr', diff --git a/apps/page/customer-rd/src/lib/customer-search/details-main-view/details-main-view.module.ts b/apps/page/customer-rd/src/lib/customer-search/details-main-view/details-main-view.module.ts index 751e69d1b..411ec6458 100644 --- a/apps/page/customer-rd/src/lib/customer-search/details-main-view/details-main-view.module.ts +++ b/apps/page/customer-rd/src/lib/customer-search/details-main-view/details-main-view.module.ts @@ -8,6 +8,7 @@ import { DetailsMainViewBillingAddressesComponent } from './details-main-view-bi import { DetailsMainViewDeliveryAddressesComponent } from './details-main-view-delivery-addresses/details-main-view-delivery-addresses.component'; import { LoaderComponent } from '@shared/components/loader'; import { IconComponent } from '@shared/components/icon'; +import { CustomerMenuComponent } from '../../components/customer-menu'; @NgModule({ imports: [ @@ -19,6 +20,7 @@ import { IconComponent } from '@shared/components/icon'; DetailsMainViewDeliveryAddressesComponent, LoaderComponent, IconComponent, + CustomerMenuComponent, ], exports: [CustomerDetailsViewMainComponent], declarations: [CustomerDetailsViewMainComponent], diff --git a/apps/page/customer-rd/src/lib/customer-search/history-main-view/history-main-view.component.html b/apps/page/customer-rd/src/lib/customer-search/history-main-view/history-main-view.component.html index 980e36a23..3a3233c13 100644 --- a/apps/page/customer-rd/src/lib/customer-search/history-main-view/history-main-view.component.html +++ b/apps/page/customer-rd/src/lib/customer-search/history-main-view/history-main-view.component.html @@ -2,16 +2,13 @@
-
- - - +
+

Historie

diff --git a/apps/page/customer-rd/src/lib/customer-search/history-main-view/history-main-view.component.ts b/apps/page/customer-rd/src/lib/customer-search/history-main-view/history-main-view.component.ts index 8bfa03170..d8abec73e 100644 --- a/apps/page/customer-rd/src/lib/customer-search/history-main-view/history-main-view.component.ts +++ b/apps/page/customer-rd/src/lib/customer-search/history-main-view/history-main-view.component.ts @@ -27,6 +27,10 @@ export class CustomerHistoryMainViewComponent extends ComponentStore isKundenkarte || isOnlineKontoMitKundenkarte) + ); + customer$ = this._store.customer$; detailsRoute$ = combineLatest([this.processId$, this.customerId$]).pipe( @@ -65,6 +69,7 @@ export class CustomerHistoryMainViewComponent extends ComponentStore { + this.patchState({ fetching: false }); console.error(err); }; diff --git a/apps/page/customer-rd/src/lib/customer-search/history-main-view/history-main-view.module.ts b/apps/page/customer-rd/src/lib/customer-search/history-main-view/history-main-view.module.ts index fb306fe53..7bc50c142 100644 --- a/apps/page/customer-rd/src/lib/customer-search/history-main-view/history-main-view.module.ts +++ b/apps/page/customer-rd/src/lib/customer-search/history-main-view/history-main-view.module.ts @@ -6,9 +6,10 @@ import { CustomerHistoryMainViewComponent } from './history-main-view.component' import { UiIconModule } from '@ui/icon'; import { RouterModule } from '@angular/router'; import { LoaderModule } from '@shared/components/loader'; +import { CustomerMenuComponent } from '../../components/customer-menu'; @NgModule({ - imports: [CommonModule, RouterModule, SharedHistoryListModule, UiIconModule, LoaderModule], + imports: [CommonModule, RouterModule, SharedHistoryListModule, UiIconModule, LoaderModule, CustomerMenuComponent], exports: [CustomerHistoryMainViewComponent], declarations: [CustomerHistoryMainViewComponent], }) diff --git a/apps/page/customer-rd/src/lib/customer-search/kundenkarte-main-view/kundenkarte-main-view.component.html b/apps/page/customer-rd/src/lib/customer-search/kundenkarte-main-view/kundenkarte-main-view.component.html index 3e55bbf77..a593833dc 100644 --- a/apps/page/customer-rd/src/lib/customer-search/kundenkarte-main-view/kundenkarte-main-view.component.html +++ b/apps/page/customer-rd/src/lib/customer-search/kundenkarte-main-view/kundenkarte-main-view.component.html @@ -1,12 +1,5 @@ -
- - - +
+

Kundenkarte

diff --git a/apps/page/customer-rd/src/lib/customer-search/kundenkarte-main-view/kundenkarte-main-view.component.ts b/apps/page/customer-rd/src/lib/customer-search/kundenkarte-main-view/kundenkarte-main-view.component.ts index c019d5d78..c38a487de 100644 --- a/apps/page/customer-rd/src/lib/customer-search/kundenkarte-main-view/kundenkarte-main-view.component.ts +++ b/apps/page/customer-rd/src/lib/customer-search/kundenkarte-main-view/kundenkarte-main-view.component.ts @@ -9,6 +9,7 @@ import { AsyncPipe, NgFor, NgIf } from '@angular/common'; import { IconComponent } from '@shared/components/icon'; import { CustomerSearchNavigation } from '../../navigations'; import { BonusCardInfoDTO } from '@swagger/crm'; +import { CustomerMenuComponent } from '../../components/customer-menu'; @Component({ selector: 'page-customer-kundenkarte-main-view', @@ -17,13 +18,15 @@ import { BonusCardInfoDTO } from '@swagger/crm'; changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'page-customer-kundenkarte-main-view' }, standalone: true, - imports: [KundenkarteComponent, NgFor, AsyncPipe, NgIf, IconComponent, RouterLink], + imports: [CustomerMenuComponent, KundenkarteComponent, NgFor, AsyncPipe, NgIf, IconComponent, RouterLink], }) export class KundenkarteMainViewComponent implements OnInit, OnDestroy { private _onDestroy$ = new Subject(); customerId$ = this._activatedRoute.params.pipe(map((params) => params.customerId)); + processId$ = this._store.processId$; + kundenkarte$ = this.customerId$.pipe( switchMap((customerId) => this._customerService.getCustomerCard(customerId).pipe( diff --git a/apps/page/customer-rd/src/lib/customer-search/orders-main-view/orders-main-view.component.html b/apps/page/customer-rd/src/lib/customer-search/orders-main-view/orders-main-view.component.html index 4454ecc1c..0a3636d2e 100644 --- a/apps/page/customer-rd/src/lib/customer-search/orders-main-view/orders-main-view.component.html +++ b/apps/page/customer-rd/src/lib/customer-search/orders-main-view/orders-main-view.component.html @@ -1,13 +1,11 @@

- - - +

Bestellungen

diff --git a/apps/page/customer-rd/src/lib/customer-search/orders-main-view/orders-main-view.component.ts b/apps/page/customer-rd/src/lib/customer-search/orders-main-view/orders-main-view.component.ts index e8df444f4..550e27f56 100644 --- a/apps/page/customer-rd/src/lib/customer-search/orders-main-view/orders-main-view.component.ts +++ b/apps/page/customer-rd/src/lib/customer-search/orders-main-view/orders-main-view.component.ts @@ -8,6 +8,7 @@ import { RouterLink } from '@angular/router'; import { IconComponent } from '@shared/components/icon'; import { LoaderComponent } from '@shared/components/loader'; import { CustomerOrderListItemComponent } from './order-list-item/order-list-item.component'; +import { CustomerMenuComponent } from '../../components/customer-menu'; @Component({ selector: 'page-customer-orders-main-view', @@ -16,11 +17,19 @@ import { CustomerOrderListItemComponent } from './order-list-item/order-list-ite changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'page-customer-orders-main-view' }, standalone: true, - imports: [AsyncPipe, NgFor, NgIf, RouterLink, IconComponent, LoaderComponent, CustomerOrderListItemComponent], + imports: [CustomerMenuComponent, AsyncPipe, NgFor, NgIf, RouterLink, IconComponent, LoaderComponent, CustomerOrderListItemComponent], }) export class CustomerOrdersMainViewComponent implements OnInit, OnDestroy { private _onDestroy = new Subject(); + processId$ = this._store.processId$; + + customerId$ = this._store.customerId$; + + hasKundenkarte$ = combineLatest([this._store.isKundenkarte$, this._store.isOnlineKontoMitKundenkarte$]).pipe( + map(([isKundenkarte, isOnlineKontoMitKundenkarte]) => isKundenkarte || isOnlineKontoMitKundenkarte) + ); + orders$ = this._store.customerOrders$; fetching$ = this._store.fetchingCustomerOrders$; diff --git a/apps/shared/components/menu/src/lib/menu-item.directive.ts b/apps/shared/components/menu/src/lib/menu-item.directive.ts index e753bac91..0dc3085a1 100644 --- a/apps/shared/components/menu/src/lib/menu-item.directive.ts +++ b/apps/shared/components/menu/src/lib/menu-item.directive.ts @@ -1,7 +1,7 @@ import { Highlightable } from '@angular/cdk/a11y'; import { Directive, ElementRef, HostListener, Input, Renderer2 } from '@angular/core'; -@Directive({ selector: '[menuItem]', host: { class: 'menu-item', role: 'menuitem', tabindex: '-1' } }) +@Directive({ selector: '[menuItem], [sharedMenuItem]', host: { class: 'menu-item', role: 'menuitem', tabindex: '-1' } }) export class MenuItemDirective implements Highlightable { private _onClick = (_: MenuItemDirective) => {}; diff --git a/apps/shared/components/menu/src/lib/menu.component.ts b/apps/shared/components/menu/src/lib/menu.component.ts index 335ab0319..0ca40294d 100644 --- a/apps/shared/components/menu/src/lib/menu.component.ts +++ b/apps/shared/components/menu/src/lib/menu.component.ts @@ -2,7 +2,7 @@ import { Component, ContentChildren, QueryList } from '@angular/core'; import { MenuItemDirective } from './menu-item.directive'; @Component({ - selector: 'menu', + selector: 'menu, shared-menu', template: ``, host: { class: 'menu', role: 'menu' }, exportAs: 'menu', diff --git a/tailwind-plugins/menu.plugin.js b/tailwind-plugins/menu.plugin.js index f8be0fec7..680c96451 100644 --- a/tailwind-plugins/menu.plugin.js +++ b/tailwind-plugins/menu.plugin.js @@ -7,7 +7,7 @@ module.exports = plugin(function ({ addComponents, theme, addBase, matchUtilitie '--menu-content': theme('colors.components.menu.content'), '--menu-item-height': theme('spacing.12'), '--menu-item-padding': `${theme('spacing.1')} ${theme('spacing.3')}`, - '--menu-border-radius': theme('borderRadius.menu'), + '--menu-border-radius': theme('borderRadius.DEFAULT'), '--menu-item-hover-background': theme('colors.components.menu.hover.DEFAULT'), '--menu-item-hover-content': theme('colors.components.menu.hover.content'), '--menu-item-hover-border': theme('colors.components.menu.hover.border'), diff --git a/tailwind.config.js b/tailwind.config.js index 3d54f1c56..4cf54a447 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,3 +1,5 @@ +const plugin = require('tailwindcss/plugin'); + /** @type {import('tailwindcss').Config} */ module.exports = { content: ['./apps/**/*.{html,ts}'], @@ -202,5 +204,8 @@ module.exports = { require('./tailwind-plugins/select-bullet.plugin.js'), require('./tailwind-plugins/section.plugin.js'), require('./tailwind-plugins/typography.plugin.js'), + plugin(({ addVariant }) => { + addVariant('open', '&.open'); + }), ], };