diff --git a/angular.json b/angular.json index d7b13ee15..566c1eff8 100644 --- a/angular.json +++ b/angular.json @@ -1504,5 +1504,8 @@ } } } + }, + "cli": { + "analytics": false } } \ No newline at end of file diff --git a/apps/core/breadcrumb/src/lib/defs/breadcrumb.model.ts b/apps/core/breadcrumb/src/lib/defs/breadcrumb.model.ts index dcafc90f0..2685bf713 100644 --- a/apps/core/breadcrumb/src/lib/defs/breadcrumb.model.ts +++ b/apps/core/breadcrumb/src/lib/defs/breadcrumb.model.ts @@ -22,7 +22,7 @@ export interface Breadcrumb { /** * Url */ - path: string; + path: string | any[]; /** * Query Parameter diff --git a/apps/core/environment/src/lib/environment.service.ts b/apps/core/environment/src/lib/environment.service.ts index 66c5b33f7..a8090f6be 100644 --- a/apps/core/environment/src/lib/environment.service.ts +++ b/apps/core/environment/src/lib/environment.service.ts @@ -3,9 +3,9 @@ import { Platform } from '@angular/cdk/platform'; import { NativeContainerService } from 'native-container'; import { BreakpointObserver } from '@angular/cdk/layout'; -const MATCH_TABLET = '(max-width: 1023px)'; +const MATCH_TABLET = '(max-width: 1024px)'; -const MATCH_DESKTOP_SMALL = '(min-width: 1024px and max-width: 1439px)'; +const MATCH_DESKTOP_SMALL = '(min-width: 1025px) and (max-width: 1439px)'; const MATCH_DESKTOP = '(min-width: 1440px)'; diff --git a/apps/core/toast/src/lib/toast.component.html b/apps/core/toast/src/lib/toast.component.html index 2a14d6ef3..d6f34927d 100644 --- a/apps/core/toast/src/lib/toast.component.html +++ b/apps/core/toast/src/lib/toast.component.html @@ -3,9 +3,9 @@
-

{{ data.title }}

+

{{ data.title }}

-

{{ data.text }}

+

{{ data.text }}
diff --git a/apps/isa-app/src/app/guards/can-activate-product.guard.ts b/apps/isa-app/src/app/guards/can-activate-product.guard.ts index f8efc83cb..07a938f1d 100644 --- a/apps/isa-app/src/app/guards/can-activate-product.guard.ts +++ b/apps/isa-app/src/app/guards/can-activate-product.guard.ts @@ -2,6 +2,7 @@ import { Injectable } from '@angular/core'; import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot } from '@angular/router'; import { ApplicationProcess, ApplicationService } from '@core/application'; import { DomainCheckoutService } from '@domain/checkout'; +import { ProductCatalogNavigationService } from '@shared/services'; import { first } from 'rxjs/operators'; @Injectable({ providedIn: 'root' }) @@ -9,6 +10,7 @@ export class CanActivateProductGuard implements CanActivate { constructor( private readonly _applicationService: ApplicationService, private readonly _checkoutService: DomainCheckoutService, + private readonly _navigationService: ProductCatalogNavigationService, private readonly _router: Router ) {} @@ -38,7 +40,7 @@ export class CanActivateProductGuard implements CanActivate { } if (!lastActivatedProcessId) { - await this.fromCartProcess(processes, route); + await this.fromCartProcess(processes); return false; } else { await this._router.navigate(this.getUrlFromSnapshot(route, ['/kunde', String(lastActivatedProcessId)])); @@ -48,7 +50,7 @@ export class CanActivateProductGuard implements CanActivate { } // Bei offener Artikelsuche/Kundensuche und Klick auf Footer Artikelsuche - async fromCartProcess(processes: ApplicationProcess[], route: ActivatedRouteSnapshot) { + async fromCartProcess(processes: ApplicationProcess[]) { const newProcessId = Date.now(); await this._applicationService.createProcess({ id: newProcessId, @@ -57,7 +59,7 @@ export class CanActivateProductGuard implements CanActivate { name: `Vorgang ${this.processNumber(processes.filter((process) => process.type === 'cart'))}`, }); - await this._router.navigate(this.getUrlFromSnapshot(route, ['/kunde', String(newProcessId)])); + await this._navigationService.navigateToProductSearch({ processId: newProcessId }); } // Bei offener Warenausgabe und Klick auf Footer Artikelsuche diff --git a/apps/isa-app/src/config/config.feature.json b/apps/isa-app/src/config/config.feature.json index 1368c80c3..c57541ac6 100644 --- a/apps/isa-app/src/config/config.feature.json +++ b/apps/isa-app/src/config/config.feature.json @@ -263,6 +263,16 @@ "name": "event-available", "data": "M438 830 296 688l58-58 84 84 168-168 58 58-226 226ZM200 976q-33 0-56.5-23.5T120 896V336q0-33 23.5-56.5T200 256h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840 336v560q0 33-23.5 56.5T760 976H200Zm0-80h560V496H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Z", "viewBox": "0 96 960 960" + }, + { + "name": "remove", + "data": "M200 606v-60h560v60H200Z", + "viewBox": "0 96 960 960" + }, + { + "name": "add", + "data": "M450 856V606H200v-60h250V296h60v250h250v60H510v250h-60Z", + "viewBox": "0 96 960 960" } ], "aliases": [ diff --git a/apps/isa-app/src/config/config.json b/apps/isa-app/src/config/config.json index f8ad5bdba..d12ee4447 100644 --- a/apps/isa-app/src/config/config.json +++ b/apps/isa-app/src/config/config.json @@ -264,6 +264,16 @@ "name": "event-available", "data": "M438 830 296 688l58-58 84 84 168-168 58 58-226 226ZM200 976q-33 0-56.5-23.5T120 896V336q0-33 23.5-56.5T200 256h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840 336v560q0 33-23.5 56.5T760 976H200Zm0-80h560V496H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Z", "viewBox": "0 96 960 960" + }, + { + "name": "remove", + "data": "M200 606v-60h560v60H200Z", + "viewBox": "0 96 960 960" + }, + { + "name": "add", + "data": "M450 856V606H200v-60h250V296h60v250h250v60H510v250h-60Z", + "viewBox": "0 96 960 960" } ], "aliases": [ diff --git a/apps/isa-app/src/config/config.test.json b/apps/isa-app/src/config/config.test.json index a1cb54a75..34d4f59fd 100644 --- a/apps/isa-app/src/config/config.test.json +++ b/apps/isa-app/src/config/config.test.json @@ -264,6 +264,16 @@ "name": "event-available", "data": "M438 830 296 688l58-58 84 84 168-168 58 58-226 226ZM200 976q-33 0-56.5-23.5T120 896V336q0-33 23.5-56.5T200 256h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840 336v560q0 33-23.5 56.5T760 976H200Zm0-80h560V496H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Z", "viewBox": "0 96 960 960" + }, + { + "name": "remove", + "data": "M200 606v-60h560v60H200Z", + "viewBox": "0 96 960 960" + }, + { + "name": "add", + "data": "M450 856V606H200v-60h250V296h60v250h250v60H510v250h-60Z", + "viewBox": "0 96 960 960" } ], "aliases": [ diff --git a/apps/isa-app/src/styles.scss b/apps/isa-app/src/styles.scss index 62def6709..ce062a8f1 100644 --- a/apps/isa-app/src/styles.scss +++ b/apps/isa-app/src/styles.scss @@ -11,15 +11,21 @@ @import './scss/customer'; @import './scss/branch'; -* { - @apply font-sans; -} - -body { - @apply bg-background; -} - @layer base { + :root { + font-size: 16px; + } + + @media screen and (min-width: 1680px) { + :root { + font-size: 19px; + } + } + + body { + @apply bg-background; + } + ::-webkit-scrollbar { width: 0; // remove scrollbar space height: 0; diff --git a/apps/modal/availabilities/src/lib/availabilities.component.scss b/apps/modal/availabilities/src/lib/availabilities.component.scss index 4db655a21..6f9f0c656 100644 --- a/apps/modal/availabilities/src/lib/availabilities.component.scss +++ b/apps/modal/availabilities/src/lib/availabilities.component.scss @@ -3,7 +3,7 @@ } .subtitle { - @apply text-center text-regular my-6; + @apply text-center text-p2 my-6; } .bold { @@ -62,7 +62,7 @@ hr { @apply flex flex-row items-center; .cta-reserve { - @apply absolute bg-transparent text-brand text-base font-bold border-none px-1 -mr-1; + @apply absolute bg-transparent text-brand text-p2 font-bold border-none px-1 -mr-1; right: 85px; } } diff --git a/apps/modal/notifications/src/lib/notifications.component.scss b/apps/modal/notifications/src/lib/notifications.component.scss index 7ca5b79d1..f9915b88e 100644 --- a/apps/modal/notifications/src/lib/notifications.component.scss +++ b/apps/modal/notifications/src/lib/notifications.component.scss @@ -6,7 +6,7 @@ modal-notifications { } .notification-card { - @apply text-center text-xl text-inactive-branch block bg-white rounded-t-card font-bold no-underline py-4 border-none outline-none shadow-card -ml-4; + @apply text-center text-xl text-inactive-branch block bg-white rounded-t font-bold no-underline py-4 border-none outline-none shadow-card -ml-4; width: calc(100% + 2rem); } @@ -33,7 +33,7 @@ modal-notifications { } h2 { - @apply font-bold text-2xl ml-4; + @apply font-bold text-h3 ml-4; } } @@ -66,11 +66,11 @@ modal-notifications { @apply flex flex-row justify-between items-start; h1 { - @apply text-regular font-bold mb-2; + @apply text-p2 font-bold mb-2; } .notification-edit-cta { - @apply bg-transparent text-brand text-base font-bold border-none px-1 -mr-1; + @apply bg-transparent text-brand text-p2 font-bold border-none px-1 -mr-1; } } } diff --git a/apps/modal/printer/src/lib/modal-printer.component.scss b/apps/modal/printer/src/lib/modal-printer.component.scss index 1f54e997c..eac2b7b58 100644 --- a/apps/modal/printer/src/lib/modal-printer.component.scss +++ b/apps/modal/printer/src/lib/modal-printer.component.scss @@ -6,7 +6,7 @@ } .error-message { - @apply text-center text-regular font-semibold text-brand; + @apply text-center text-p2 font-semibold text-brand; } } @@ -30,7 +30,7 @@ ui-select { @apply mt-px-35 text-center; .print-btn { - @apply border-none outline-none bg-brand text-white font-bold text-cta-l px-px-25 py-px-15 rounded-full my-8; + @apply border-none outline-none bg-brand text-white font-bold text-p1 px-px-25 py-px-15 rounded-full my-8; &:disabled { @apply bg-inactive-branch; diff --git a/apps/modal/reorder/src/lib/reorder.component.scss b/apps/modal/reorder/src/lib/reorder.component.scss index 2031768c1..5f2686b0e 100644 --- a/apps/modal/reorder/src/lib/reorder.component.scss +++ b/apps/modal/reorder/src/lib/reorder.component.scss @@ -3,7 +3,7 @@ } h3 { - @apply text-regular font-semibold text-center; + @apply text-p2 font-semibold text-center; } hr { @@ -23,11 +23,11 @@ hr { @apply flex flex-col ml-5; .product-name { - @apply text-regular font-bold; + @apply text-p2 font-bold; } .product-format { - @apply mt-5 text-regular font-bold flex items-center; + @apply mt-5 text-p2 font-bold flex items-center; .format-icon { @apply mr-2; @@ -35,11 +35,11 @@ hr { } .product-ean { - @apply text-regular font-bold; + @apply text-p2 font-bold; } .quantity { - @apply text-regular font-bold; + @apply text-p2 font-bold; } } } diff --git a/apps/modal/reviews/src/lib/reviews.component.scss b/apps/modal/reviews/src/lib/reviews.component.scss index db0831194..39e589aaa 100644 --- a/apps/modal/reviews/src/lib/reviews.component.scss +++ b/apps/modal/reviews/src/lib/reviews.component.scss @@ -31,12 +31,12 @@ } .title { - @apply ml-5 text-regular font-bold; + @apply ml-5 text-p2 font-bold; } .btn-expand, .btn-collapse { - @apply border-none bg-transparent outline-none text-regular text-ucla-blue font-bold -mt-2; + @apply border-none bg-transparent outline-none text-p2 text-ucla-blue font-bold -mt-2; ui-icon { @apply inline mx-1 align-middle; diff --git a/apps/page/assortment/src/lib/price-update/price-update-list/price-update-item.component.html b/apps/page/assortment/src/lib/price-update/price-update-list/price-update-item.component.html index 07d4910f3..215be2e7a 100644 --- a/apps/page/assortment/src/lib/price-update/price-update-list/price-update-item.component.html +++ b/apps/page/assortment/src/lib/price-update/price-update-list/price-update-item.component.html @@ -1,8 +1,8 @@

{{ item?.task?.instruction }}

-

+

gültig ab {{ item?.task?.dueDate | date }}

@@ -20,15 +20,15 @@
- {{ environment.isTablet() ? (item?.product?.contributors | substr: 42) : item?.product?.contributors }} + {{ environment.isTablet() ? (item?.product?.contributors | substr: 38) : item?.product?.contributors }}
{{ item?.product?.name }} @@ -43,7 +43,7 @@ src="assets/images/Icon_{{ item?.product?.format }}.svg" [alt]="item?.product?.formatDetail" /> - {{ item?.product?.formatDetail }} + {{ environment.isTablet() ? (item?.product?.formatDetail | substr: 25) : item?.product?.formatDetail }}
diff --git a/apps/page/assortment/src/lib/price-update/price-update-list/price-update-list.component.html b/apps/page/assortment/src/lib/price-update/price-update-list/price-update-list.component.html index 5df13469a..f87b88cc1 100644 --- a/apps/page/assortment/src/lib/price-update/price-update-list/price-update-list.component.html +++ b/apps/page/assortment/src/lib/price-update/price-update-list/price-update-list.component.html @@ -8,7 +8,7 @@ Drucken
-
+
-
+
{{ items?.length ?? 0 }} Titel @@ -26,7 +26,7 @@
-
+
diff --git a/apps/page/assortment/src/lib/price-update/price-update.component.html b/apps/page/assortment/src/lib/price-update/price-update.component.html index 58364f1e5..9e48ad064 100644 --- a/apps/page/assortment/src/lib/price-update/price-update.component.html +++ b/apps/page/assortment/src/lib/price-update/price-update.component.html @@ -1,5 +1,5 @@
-

Preisänderung

+

Preisänderung

+
+
+
+ +
+
+ + Artikel ist ein Fortsetzungsartikel,
+ Artikel muss über eine Aboabteilung
+ bestellt werden. + +
+
+ +
+
- +
+ +
-
-
-
- - {{ contributor }}{{ last ? '' : ';' }} - +
+ + {{ contributor }}{{ last ? '' : ';' }} + +
+ +
+ +
+ +
+ {{ item.product?.name }} +
+ +
+
+ + {{ item.product?.formatDetail }} +
+ +
Band/Reihe {{ item?.product?.volume }}
+ +
{{ publicationDate$ | async }}
+
+ +
+
+ {{ item.catalogAvailability?.price?.value?.value | currency: item.catalogAvailability?.price?.value?.currency:'code' }} +
+ +
+ {{ takeAwayAvailability?.retailPrice?.value?.value | currency: takeAwayAvailability?.retailPrice?.value?.currency:'code' }}
+ - -
-
- {{ item.product?.name }} +
+ {{ promotionPoints }} Lesepunkte
-
-
-
- - {{ item.product?.formatDetail }} + +
+
+ +
+
{{ item.product?.manufacturer }}
+ +
+ {{ item?.product?.locale }} +
+
+ +
+
+
+ + + {{ takeAwayAvailability.inStock || 0 }}x + +
+
+ + {{ stockTooltipText$ | async }} + + +
+
{{ item.product?.ean }}
+ +
+ + {{ (item?.specs)[0]?.value }} + +
+
+ +
+
+ +
+ +
+ + +
+ +
+ +
+ + +
+ +
+ +
+ + +
+ +
+ +
+ + + +
+ + Download +
+ +
+ +
+
+
+ +
+ {{ sscText }}
-
Band/Reihe {{ item?.product?.volume }}
- -
{{ publicationDate$ | async }}
-
- -
-
- {{ item.catalogAvailability?.price?.value?.value | currency: item.catalogAvailability?.price?.value?.currency:'code' }} -
- -
- {{ - takeAwayAvailability?.retailPrice?.value?.value | currency: takeAwayAvailability?.retailPrice?.value?.currency:'code' - }} -
- -
{{ promotionPoints }} Lesepunkte
-
+
-
-
{{ item.product?.manufacturer }}
- -
-
- - - - {{ takeAwayAvailability.inStock || 0 }}x - - -
- - {{ stockTooltipText$ | async }} - -
-
{{ item?.product?.locale }}
- -
-
{{ item.product?.ean }}
-
-
-
- - - - -
- - - - -
- - - - -
- - - - - - - Download - -
-
-
- -
+
-
- - {{ (item?.specs)[0]?.value }} - -
-
-
- -
- {{ sscText }} -
- -
-
- -
+
-
- -
-
- - Artikel ist ein Fortsetzungsartikel,
- Artikel muss über eine Aboabteilung
- bestellt werden. - -
-
- +
+
+
+
+ Auch verfügbar als + + + + + format icon + {{ format.product?.formatDetail }} + {{ format.catalogAvailability?.price?.value?.value | currency: '€' }} + + +
-
- - -
+
-
- -
- Auch verfügbar als - - - - - format icon - {{ format.product?.formatDetail }} - {{ format.catalogAvailability?.price?.value?.value | currency: '€' }} - - - -
- -
- - -
-
+
+
{{ item.texts[0].value }}
-
+ + +
-

{{ text.label }}

+

{{ text.label }}

{{ text.value }} - + +
+ +
+
+ + +
+ + +
+ + +
+
- - -
- +
+
diff --git a/apps/page/catalog/src/lib/article-details/article-details.component.scss b/apps/page/catalog/src/lib/article-details/article-details.component.scss index f1767e77f..1101da76a 100644 --- a/apps/page/catalog/src/lib/article-details/article-details.component.scss +++ b/apps/page/catalog/src/lib/article-details/article-details.component.scss @@ -1,269 +1,99 @@ :host { - @apply flex flex-col; + @apply box-border block h-[calc(100vh-16.5rem)] desktop-small:h-[calc(100vh-15.1rem)]; } -.product-card { - @apply flex flex-col bg-white w-full rounded-card shadow-card; - - .product-details { - @apply flex flex-row p-5; - - .bookmark { - @apply absolute flex; - top: 52px; - right: 25px; - z-index: 100; - } - - .bookmark-badge { - @apply p-0 m-0 outline-none border-none bg-transparent relative; - } - - .promotion-badge { - margin-top: -1px; - } - - .bookmark-badge-gap { - @apply mt-px-35; - } - - .product-image { - @apply flex flex-col items-center justify-start mr-5; - - .recessions { - @apply flex flex-col items-center mt-4 bg-transparent border-none outline-none; - - .cta-recessions { - @apply text-regular text-dark-cerulean font-bold mt-2; - } - } - - .image-button { - @apply border-none outline-none bg-transparent relative; - - ui-icon { - @apply absolute text-dark-cerulean inline-block; - bottom: 1rem; - right: 1rem; - } - } - - img { - @apply rounded-xl shadow-card; - box-shadow: 0 0 18px 0 #b8b3b7; - max-height: 315px; - max-width: 195px; - } - } - - .product-info { - @apply w-full; - - .title { - @apply text-3xl font-bold mb-6; - } - - .format, - .ssc, - .quantity { - @apply font-bold text-lg; - } - - .stock { - min-height: 44px; - } - - .quantity { - @apply flex justify-end mt-4; - - ui-icon { - @apply mr-1 text-ucla-blue; - } - } - - .format { - @apply flex items-center; - - .format-icon { - @apply flex mr-2; - height: 18px; - } - } - - .ssc { - @apply flex justify-end my-2; - } - - .price { - @apply font-bold text-xl; - } - - .shelfinfo { - @apply text-ucla-blue; - } - - .fetching { - @apply w-52 h-px-20; - background-color: #e6eff9; - animation: load 0.75s linear infinite; - } - - .xsmall { - @apply w-6; - } - - .small { - @apply w-16; - } - - .medium { - @apply w-40; - } - - .availability-icons { - @apply flex flex-row items-center justify-end text-dark-cerulean mt-4; - - ui-icon { - @apply mx-1; - } - - .truck { - @apply -mb-px-5 -mt-px-5; - } - - .truck_b2b { - @apply -mb-px-10 -mt-px-10; - } - - .label { - @apply font-bold; - } - - .download-icon { - @apply flex flex-row items-center; - } - } - - .cta-print { - @apply bg-transparent text-brand font-bold text-xl outline-none border-none p-0; - } - } - - .row { - @apply grid items-end; - grid-template-columns: auto auto; - } - } - - .right { - @apply text-right self-start; - } - - hr { - @apply bg-glitter h-1; - } - - .product-description { - @apply flex flex-col flex-grow px-5 py-5; - min-height: calc(100vh - 769px); - - .info { - @apply whitespace-pre-line; - } - - .product-text { - @apply flex flex-col whitespace-pre-line mb-px-100 break-words; - - h3 { - @apply my-4; - } - - .header { - @apply text-regular font-bold; - } - - .scroll-top-cta { - @apply flex items-center justify-center self-end border-none outline-none bg-white relative rounded p-0 mt-8 mr-4; - box-shadow: 0px 0px 20px 0px rgba(89, 100, 112, 0.5); - transform: rotate(-90deg); - border-radius: 100%; - width: 58px; - height: 58px; - - .arrow { - color: #1f466c; - } - } - } - } - - .product-actions { - @apply text-right px-5 py-4; - - .cta-availabilities { - @apply text-brand border-none border-brand bg-white font-bold text-lg px-4 py-2 rounded-full; - } - .cta-continue { - @apply text-white bg-brand font-bold text-lg px-4 py-2 rounded-full border-none ml-4 no-underline; - - &:disabled { - @apply bg-inactive-branch; - } - } - } - - .product-formats { - @apply grid whitespace-nowrap items-center px-5 py-4; - grid-template-rows: auto; - grid-template-columns: auto 1fr; - max-width: 100%; - - .label { - @apply mr-2; - } - - .product-family { - @apply mr-4 text-active-customer font-bold no-underline px-2; - - .format-detail { - @apply flex items-center; - - img { - @apply mr-2; - } - } - - .price { - @apply ml-1; - } - } - } +.page-article-details__container { + @apply h-full w-full bg-white rounded shadow-card flex flex-col; } -.product-recommendations { - @apply sticky bottom-0 border-none outline-none left-0 right-0 flex items-center px-5 h-16 bg-white w-full; - box-shadow: #dce2e9 0px -2px 18px 0px; - - .label { - @apply uppercase text-active-customer font-bold text-small; - } - - img { - @apply absolute right-5 bottom-5 h-12; - } +.page-article-details__product-details { + @apply grid gap-x-5; + grid-template-columns: max-content auto; + grid-template-rows: 2.1875rem repeat(11, minmax(auto, max-content)); + grid-template-areas: + '. . . bookmark' + 'image contributors contributors contributors' + 'image title title print' + 'image title title .' + 'image misc misc price' + 'image misc misc price' + 'image origin origin stock' + 'image origin origin stock' + 'image specs availabilities availabilities' + 'image specs ssc ssc' + 'image . ssc ssc' + 'image . ssc ssc'; } -.recommendations-overlay { - @apply absolute w-full top-0 rounded-t-card; - top: 56px; +.page-article-details__product-bookmark { + grid-area: bookmark; +} - .product-button { - @apply flex flex-row justify-center items-center w-full text-xl bg-white text-ucla-blue font-bold border-none outline-none rounded-t-card; - box-shadow: 0 -2px 24px 0 #dce2e9; - height: 60px; +.page-article-details__product-image-recessions { + grid-area: image; +} + +.page-article-details__product-contributors { + grid-area: contributors; +} + +.page-article-details__product-print { + grid-area: print; +} + +.page-article-details__product-title { + grid-area: title; +} + +.page-article-details__product-misc { + grid-area: misc; +} + +.page-article-details__product-price-info { + grid-area: price; +} + +.page-article-details__product-origin-infos { + grid-area: origin; +} + +.page-article-details__product-stock { + grid-area: stock; +} + +.page-article-details__product-ean-specs { + grid-area: specs; +} + +.page-article-details__product-availabilities { + grid-area: availabilities; +} + +.page-article-details__shelf-ssc { + grid-area: ssc; +} + +.page-article-details__product-description-text { + word-break: break-word; +} + +.page-article-details__product-formats { + @apply grid whitespace-nowrap items-center max-w-full; + grid-template-rows: auto; + grid-template-columns: auto 1fr; +} + +.page-article-details__scroll-top-cta { + @apply flex items-center justify-center self-end border-none outline-none bg-white relative rounded p-0 mt-8 mr-4; + box-shadow: 0px 0px 20px 0px rgba(89, 100, 112, 0.5); + transform: rotate(-90deg); + border-radius: 100%; + width: 58px; + height: 58px; +} + +.page-article-details__actions { + &:disabled { + @apply bg-inactive-branch; } } - -.autor { - @apply text-active-customer font-bold no-underline; -} diff --git a/apps/page/catalog/src/lib/article-details/article-details.component.ts b/apps/page/catalog/src/lib/article-details/article-details.component.ts index 0498d07bf..94c58b5ef 100644 --- a/apps/page/catalog/src/lib/article-details/article-details.component.ts +++ b/apps/page/catalog/src/lib/article-details/article-details.component.ts @@ -8,7 +8,7 @@ import { BranchDTO } from '@swagger/checkout'; import { UiModalService } from '@ui/modal'; import { ModalReviewsComponent } from '@modal/reviews'; import { BehaviorSubject, combineLatest, Subscription } from 'rxjs'; -import { debounceTime, filter, first, map, shareReplay, switchMap } from 'rxjs/operators'; +import { debounceTime, filter, first, map, shareReplay, switchMap, withLatestFrom } from 'rxjs/operators'; import { ArticleDetailsStore } from './article-details.store'; import { ModalImagesComponent } from 'apps/modal/images/src/public-api'; import { ProductImageService } from 'apps/cdn/product-image/src/public-api'; @@ -20,6 +20,8 @@ import { DateAdapter } from '@ui/common'; import { DatePipe } from '@angular/common'; import { PurchaseOptionsModalService } from '@shared/modals/purchase-options-modal'; import { DomainAvailabilityService } from '@domain/availability'; +import { EnvironmentService } from '@core/environment'; +import { ProductCatalogNavigationService } from '@shared/services'; @Component({ selector: 'page-article-details', @@ -113,6 +115,19 @@ export class ArticleDetailsComponent implements OnInit, OnDestroy { shareReplay(1) ); + get isTablet$() { + return this._environment.matchTablet$.pipe( + map((state) => state?.matches), + shareReplay() + ); + } + + get resultsPath() { + return this._navigationService.getArticleSearchResultsPath(this.applicationService.activatedProcessId); + } + + showMore: boolean = false; + constructor( public readonly applicationService: ApplicationService, private activatedRoute: ActivatedRoute, @@ -126,6 +141,8 @@ export class ArticleDetailsComponent implements OnInit, OnDestroy { public elementRef: ElementRef, private _purchaseOptionsModalService: PurchaseOptionsModalService, private _availability: DomainAvailabilityService, + private _navigationService: ProductCatalogNavigationService, + private _environment: EnvironmentService, private _router: Router ) {} @@ -161,16 +178,30 @@ export class ArticleDetailsComponent implements OnInit, OnDestroy { filter((f) => !!f) ); + const more$ = this.activatedRoute.params.subscribe(() => (this.showMore = false)); + this.subscriptions.add(processIdSubscription); + this.subscriptions.add(more$); this.subscriptions.add(this.store.loadItemById(id$)); this.subscriptions.add(this.store.loadItemByEan(ean$)); - this.subscriptions.add(this.store.item$.pipe(filter((item) => !!item)).subscribe((item) => this.updateBreadcrumb(item))); + this.subscriptions.add( + this.store.item$ + .pipe( + withLatestFrom(this.isTablet$), + filter(([item, isTablet]) => !!item) + ) + .subscribe(([item, isTablet]) => (isTablet ? this.updateBreadcrumb(item) : this.updateBreadcrumbDesktop(item))) + ); } ngOnDestroy() { this.subscriptions.unsubscribe(); } + getDetailsPath(ean?: string) { + return this._navigationService.getArticleDetailsPath({ processId: this.applicationService.activatedProcessId, ean }); + } + async updateBreadcrumb(item: ItemDTO) { const crumbs = await this.breadcrumb .getBreadcrumbsByKeyAndTags$(this.applicationService.activatedProcessId, ['catalog', 'details', `${item.id}`]) @@ -184,13 +215,41 @@ export class ArticleDetailsComponent implements OnInit, OnDestroy { this.breadcrumb.addBreadcrumbIfNotExists({ key: this.applicationService.activatedProcessId, name: item.product?.name, - path: `/kunde/${this.applicationService.activatedProcessId}/product/details/${item.id}`, + path: this._navigationService.getArticleDetailsPath({ processId: this.applicationService.activatedProcessId, itemId: item.id }), params: this.activatedRoute.snapshot.queryParams, tags: ['catalog', 'details', `${item.id}`], section: 'customer', }); } + async updateBreadcrumbDesktop(item: ItemDTO) { + const crumbs = await this.breadcrumb + .getBreadcrumbsByKeyAndTags$(this.applicationService.activatedProcessId, ['catalog', 'details']) + .pipe(first()) + .toPromise(); + + if (crumbs.length === 0) { + this.breadcrumb.addBreadcrumbIfNotExists({ + key: this.applicationService.activatedProcessId, + name: item.product?.name, + path: this._navigationService.getArticleDetailsPath({ processId: this.applicationService.activatedProcessId, itemId: item.id }), + params: this.activatedRoute.snapshot.queryParams, + tags: ['catalog', 'details', `${item.id}`], + section: 'customer', + }); + } else { + const crumb = crumbs.find((_) => true); + this.breadcrumb.patchBreadcrumb(crumb.id, { + key: this.applicationService.activatedProcessId, + name: item.product?.name, + path: this._navigationService.getArticleDetailsPath({ processId: this.applicationService.activatedProcessId, itemId: item.id }), + params: this.activatedRoute.snapshot.queryParams, + tags: ['catalog', 'details', `${item.id}`], + section: 'customer', + }); + } + } + async print() { const item = await this.store.item$.pipe(first()).toPromise(); this.uiModal.open({ @@ -302,9 +361,8 @@ export class ArticleDetailsComponent implements OnInit, OnDestroy { } } - scrollTop() { - const element = this.elementRef.nativeElement.closest('.main-wrapper'); - element?.scrollTo({ top: 0, behavior: 'smooth' }); + scrollTop(div: HTMLDivElement) { + div?.scrollTo({ top: 0, behavior: 'smooth' }); } loadImage() { diff --git a/apps/page/catalog/src/lib/article-details/recommendations/article-recommendations.component.scss b/apps/page/catalog/src/lib/article-details/recommendations/article-recommendations.component.scss index 84066c8c8..d75030829 100644 --- a/apps/page/catalog/src/lib/article-details/recommendations/article-recommendations.component.scss +++ b/apps/page/catalog/src/lib/article-details/recommendations/article-recommendations.component.scss @@ -1,7 +1,6 @@ :host { - @apply flex flex-col bg-white; + @apply flex flex-col bg-white h-[calc(100vh-16.5rem-3.75rem)] desktop-small:h-[calc(100vh-15.1rem-3.75rem)]; box-shadow: 0px -2px 24px 0px #dce2e9; - height: calc(100vh - 342px); } h1 { @@ -18,7 +17,7 @@ p { @apply mt-10; .label { - @apply flex flex-row items-center uppercase text-dark-cerulean font-bold text-sm ml-6; + @apply flex flex-row items-center uppercase text-dark-cerulean font-bold text-p3 ml-6; ui-icon { @apply mr-2; @@ -26,7 +25,7 @@ p { } .empty-message { - @apply flex justify-center text-cta-l mt-12; + @apply flex justify-center text-p1 mt-12; } .article { @@ -40,7 +39,7 @@ p { } .format { - @apply text-regular mt-2; + @apply text-p2 mt-2; } .price { diff --git a/apps/page/catalog/src/lib/article-search/article-search.component.html b/apps/page/catalog/src/lib/article-search/article-search.component.html index f1542cfc1..0680b43f9 100644 --- a/apps/page/catalog/src/lib/article-search/article-search.component.html +++ b/apps/page/catalog/src/lib/article-search/article-search.component.html @@ -1,13 +1 @@ - - - - - - diff --git a/apps/page/catalog/src/lib/article-search/article-search.component.scss b/apps/page/catalog/src/lib/article-search/article-search.component.scss index 980e55b37..94c80264c 100644 --- a/apps/page/catalog/src/lib/article-search/article-search.component.scss +++ b/apps/page/catalog/src/lib/article-search/article-search.component.scss @@ -1,17 +1,3 @@ :host { - @apply flex flex-col w-full box-content relative; -} - -.filter { - @apply font-sans flex self-end items-center mb-4 font-bold bg-wild-blue-yonder border-0 text-regular py-px-8 px-px-15 rounded-filter justify-center z-sticky; - width: 106px; - min-width: 106px; - - .label { - @apply ml-px-5; - } - - &.active { - @apply bg-active-customer text-white ml-px-5; - } + @apply flex flex-col w-full h-[calc(100vh-16.5rem)] desktop-small:h-[calc(100vh-15.1rem)] box-content relative; } diff --git a/apps/page/catalog/src/lib/article-search/article-search.component.ts b/apps/page/catalog/src/lib/article-search/article-search.component.ts index 596b74f4f..8518e227a 100644 --- a/apps/page/catalog/src/lib/article-search/article-search.component.ts +++ b/apps/page/catalog/src/lib/article-search/article-search.component.ts @@ -1,13 +1,15 @@ import { ChangeDetectionStrategy, Component, OnDestroy, OnInit } from '@angular/core'; -import { ActivatedRoute, Router } from '@angular/router'; +import { ActivatedRoute } from '@angular/router'; import { BreadcrumbService } from '@core/breadcrumb'; -import { UiFilterAutocompleteProvider } from '@ui/filter'; -import { isEqual } from 'lodash'; -import { BehaviorSubject, Observable, Subject } from 'rxjs'; -import { filter, first, map, takeUntil, withLatestFrom } from 'rxjs/operators'; +import { Observable, Subject } from 'rxjs'; +import { map, takeUntil, withLatestFrom } from 'rxjs/operators'; import { ArticleSearchService } from './article-search.store'; import { FocusSearchboxEvent } from './focus-searchbox.event'; import { ArticleSearchMainAutocompleteProvider } from './providers'; +import { ProductCatalogNavigationService } from '@shared/services'; +import { FilterAutocompleteProvider } from 'apps/shared/components/filter/src/lib'; +import { isEqual } from 'lodash'; +import { EnvironmentService } from '@core/environment'; @Component({ selector: 'page-article-search', @@ -15,9 +17,8 @@ import { ArticleSearchMainAutocompleteProvider } from './providers'; styleUrls: ['article-search.component.scss'], providers: [ FocusSearchboxEvent, - ArticleSearchService, { - provide: UiFilterAutocompleteProvider, + provide: FilterAutocompleteProvider, useClass: ArticleSearchMainAutocompleteProvider, multi: true, }, @@ -28,22 +29,16 @@ export class ArticleSearchComponent implements OnInit, OnDestroy { private _onDestroy$ = new Subject(); private _processId$: Observable; - initialFilter$ = this._articleSearch.filter$.pipe( - filter((filter) => !!filter), - first() - ); + get isTablet() { + return this._environmentService.matchTablet(); + } - hasFilter$ = this._articleSearch.filter$.pipe( - withLatestFrom(this.initialFilter$), - map(([filter, initialFilter]) => !isEqual(filter?.getQueryParams(), initialFilter?.getQueryParams())) - ); - - filterActive$ = new BehaviorSubject(false); constructor( private _breadcrumb: BreadcrumbService, - private _router: Router, private _articleSearch: ArticleSearchService, - private _activatedRoute: ActivatedRoute + private _activatedRoute: ActivatedRoute, + private _navigationService: ProductCatalogNavigationService, + private _environmentService: EnvironmentService ) {} ngOnInit() { @@ -60,12 +55,17 @@ export class ArticleSearchComponent implements OnInit, OnDestroy { .pipe(takeUntil(this._onDestroy$), withLatestFrom(this._processId$)) .subscribe(([state, processId]) => { if (state.searchState === '') { + const params = state.filter.getQueryParams(); if (state.hits === 1) { const item = state.items.find((f) => f); - this._router.navigate(['/kunde', processId, 'product', 'details', item.id]); + this._navigationService.navigateToDetails({ + processId, + itemId: item.id, + queryParams: this.isTablet ? undefined : params, + }); } else { - const params = state.filter.getQueryParams(); - this._router.navigate(['/kunde', processId, 'product', 'search', 'results'], { + this._navigationService.navigateToResults({ + processId, queryParams: params, }); } @@ -73,6 +73,20 @@ export class ArticleSearchComponent implements OnInit, OnDestroy { }); } + cleanupQueryParams(params: Record = {}) { + const clean = { ...params }; + + for (const key in clean) { + if (Object.prototype.hasOwnProperty.call(clean, key)) { + if (clean[key] == undefined) { + delete clean[key]; + } + } + } + + return clean; + } + initProcessId() { this._processId$ = this._activatedRoute.parent.data.pipe(map((data) => Number(data.processId))); } @@ -96,7 +110,7 @@ export class ArticleSearchComponent implements OnInit, OnDestroy { await this._breadcrumb.addBreadcrumbIfNotExists({ key: processId, name: 'Artikelsuche', - path: `/kunde/${processId}/product`, + path: this._navigationService.getArticleSearchBasePath(processId), params: queryParams, tags: ['catalog', 'main'], section: 'customer', diff --git a/apps/page/catalog/src/lib/article-search/article-search.module.ts b/apps/page/catalog/src/lib/article-search/article-search.module.ts index 1176f1ea1..e6a3a3ec6 100644 --- a/apps/page/catalog/src/lib/article-search/article-search.module.ts +++ b/apps/page/catalog/src/lib/article-search/article-search.module.ts @@ -6,12 +6,13 @@ import { ArticleSearchComponent } from './article-search.component'; import { SearchResultsModule } from './search-results/search-results.module'; import { SearchMainModule } from './search-main/search-main.module'; import { SearchFilterModule } from './search-filter/search-filter.module'; +import { ArticleSearchService } from './article-search.store'; import { SharedFilterOverlayModule } from '@shared/components/filter-overlay'; @NgModule({ imports: [CommonModule, RouterModule, UiIconModule, SearchResultsModule, SearchMainModule, SearchFilterModule, SharedFilterOverlayModule], exports: [ArticleSearchComponent], declarations: [ArticleSearchComponent], - providers: [], + providers: [ArticleSearchService], }) export class ArticleSearchModule {} diff --git a/apps/page/catalog/src/lib/article-search/article-search.store.ts b/apps/page/catalog/src/lib/article-search/article-search.store.ts index b25c6d95c..52840eff8 100644 --- a/apps/page/catalog/src/lib/article-search/article-search.store.ts +++ b/apps/page/catalog/src/lib/article-search/article-search.store.ts @@ -3,24 +3,31 @@ import { DomainCatalogService } from '@domain/catalog'; import { Observable, Subject } from 'rxjs'; import { debounceTime, map, switchMap, tap, withLatestFrom } from 'rxjs/operators'; -import { UiFilter } from '@ui/filter'; import { ComponentStore, tapResponse } from '@ngrx/component-store'; -import { ItemDTO, QueryTokenDTO } from '@swagger/cat'; +import { ItemDTO, QueryTokenDTO, UISettingsDTO } from '@swagger/cat'; import { ApplicationService } from '@core/application'; import { BranchDTO } from '@swagger/checkout'; +import { Filter } from 'apps/shared/components/filter/src/lib'; export interface ArticleSearchState { processId: number; - filter: UiFilter; + filter: Filter; searchState: '' | 'fetching' | 'empty' | 'error'; items: ItemDTO[]; hits: number; selectedBranch: BranchDTO; selectedItemIds: number[]; + defaultSettings?: UISettingsDTO; } @Injectable() export class ArticleSearchService extends ComponentStore { + get defaultSettings() { + return this.get((s) => s.defaultSettings); + } + + readonly defaultSettings$ = this.select((s) => s.defaultSettings); + get processId() { return this.get((s) => s.processId); } @@ -100,19 +107,19 @@ export class ArticleSearchService extends ComponentStore { } async setDefaultFilter(defaultQueryParams?: Record) { - const filter = await this.catalog - .getSettings() - .pipe(map((settings) => UiFilter.create(settings))) - .toPromise(); + const defaultSettings = await this.catalog.getSettings().toPromise(); + + const filter = Filter.create(defaultSettings); if (!!defaultQueryParams) { filter?.fromQueryParams(defaultQueryParams); } this.setFilter(filter); + this.patchState({ defaultSettings }); } - setFilter(filter: UiFilter) { + setFilter(filter: Filter) { this.patchState({ filter }); } diff --git a/apps/page/catalog/src/lib/article-search/providers/article-search-main-autocomplete.provider.ts b/apps/page/catalog/src/lib/article-search/providers/article-search-main-autocomplete.provider.ts index eea7a73d6..4b115d2d2 100644 --- a/apps/page/catalog/src/lib/article-search/providers/article-search-main-autocomplete.provider.ts +++ b/apps/page/catalog/src/lib/article-search/providers/article-search-main-autocomplete.provider.ts @@ -1,18 +1,18 @@ import { Injectable } from '@angular/core'; import { DomainCatalogService } from '@domain/catalog'; -import { UiFilterAutocomplete, UiFilterAutocompleteProvider, UiInput } from '@ui/filter'; +import { FilterAutocomplete, FilterAutocompleteProvider, FilterInput } from 'apps/shared/components/filter/src/lib'; import { Observable, of } from 'rxjs'; import { catchError, map } from 'rxjs/operators'; @Injectable() -export class ArticleSearchMainAutocompleteProvider extends UiFilterAutocompleteProvider { +export class ArticleSearchMainAutocompleteProvider extends FilterAutocompleteProvider { for = 'catalog'; constructor(private domainCatalogSearch: DomainCatalogService) { super(); } - complete(input: UiInput): Observable { + complete(input: FilterInput): Observable { const token = input?.parent?.parent?.getQueryToken(); const filter = token?.filter; const type = Object.keys(token?.input).join(';'); diff --git a/apps/page/catalog/src/lib/article-search/search-filter/search-filter.component.html b/apps/page/catalog/src/lib/article-search/search-filter/search-filter.component.html index e75b5db3a..ec6b26809 100644 --- a/apps/page/catalog/src/lib/article-search/search-filter/search-filter.component.html +++ b/apps/page/catalog/src/lib/article-search/search-filter/search-filter.component.html @@ -1,30 +1,33 @@
- +
+ + +
-
-

Filter

- +

Filter

+ + > +
+ +
+ + +
-
- - - -
diff --git a/apps/page/catalog/src/lib/article-search/search-filter/search-filter.component.scss b/apps/page/catalog/src/lib/article-search/search-filter/search-filter.component.scss index 68abb540e..8c1de6264 100644 --- a/apps/page/catalog/src/lib/article-search/search-filter/search-filter.component.scss +++ b/apps/page/catalog/src/lib/article-search/search-filter/search-filter.component.scss @@ -1,15 +1,11 @@ :host { - @apply block bg-glitter; + @apply block bg-white h-[calc(100vh-16.5rem)] desktop-small:h-[calc(100vh-15.1rem)]; } .catalog-search-filter-content { @apply relative mx-auto p-4; } -.btn-close { - @apply absolute text-cool-grey top-3 p-4 right-4 outline-none border-none bg-transparent; -} - .catalog-search-filter-content-main { h1.title { @apply text-center; @@ -17,14 +13,12 @@ } .cta-wrapper { - @apply fixed bottom-8 whitespace-nowrap; - left: 50%; - transform: translateX(-50%); + @apply text-center whitespace-nowrap absolute bottom-8 left-0 w-full; } .cta-reset-filter, .cta-apply-filter { - @apply text-lg font-bold px-6 py-3 rounded-full border-solid border-2 border-brand outline-none mx-2; + @apply text-lg font-bold px-6 py-[0.85rem] rounded-full border-solid border-2 border-brand outline-none mx-2; &:disabled { @apply bg-inactive-branch cursor-not-allowed border-none text-white; @@ -38,3 +32,7 @@ .cta-apply-filter { @apply text-white bg-brand; } + +::ng-deep page-article-search-filter shared-filter shared-filter-input-group-main { + @apply desktop:hidden px-16; +} diff --git a/apps/page/catalog/src/lib/article-search/search-filter/search-filter.component.ts b/apps/page/catalog/src/lib/article-search/search-filter/search-filter.component.ts index aac38df2b..637508576 100644 --- a/apps/page/catalog/src/lib/article-search/search-filter/search-filter.component.ts +++ b/apps/page/catalog/src/lib/article-search/search-filter/search-filter.component.ts @@ -1,8 +1,13 @@ -import { ChangeDetectionStrategy, Component, EventEmitter, OnInit, Output, ViewChild } from '@angular/core'; -import { UiFilter, UiFilterComponent } from '@ui/filter'; -import { Observable } from 'rxjs'; -import { map, take } from 'rxjs/operators'; +import { ChangeDetectionStrategy, Component, EventEmitter, OnDestroy, OnInit, Output, ViewChild } from '@angular/core'; +import { ApplicationService } from '@core/application'; +import { EnvironmentService } from '@core/environment'; +import { Observable, Subject } from 'rxjs'; +import { first, map, takeUntil, withLatestFrom } from 'rxjs/operators'; import { ArticleSearchService } from '../article-search.store'; +import { ActivatedRoute } from '@angular/router'; +import { ProductCatalogNavigationService } from '@shared/services'; +import { Filter, FilterComponent } from 'apps/shared/components/filter/src/lib'; +import { BreadcrumbService } from '@core/breadcrumb'; @Component({ selector: 'page-article-search-filter', @@ -10,51 +15,104 @@ import { ArticleSearchService } from '../article-search.store'; styleUrls: ['search-filter.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, }) -export class ArticleSearchFilterComponent implements OnInit { +export class ArticleSearchFilterComponent implements OnInit, OnDestroy { @Output() close = new EventEmitter(); + _processId$ = this._activatedRoute.parent.data.pipe(map((data) => Number(data.processId))); + fetching$: Observable; - filter$: Observable; + filter$: Observable; searchboxHint$ = this.articleSearch.searchboxHint$; - @ViewChild(UiFilterComponent, { static: false }) - uiFilterComponent: UiFilterComponent; + @ViewChild(FilterComponent, { static: false }) + uiFilterComponent: FilterComponent; - constructor(private articleSearch: ArticleSearchService) {} + get isTablet() { + return this._environment.matchTablet(); + } + + private _onDestroy$ = new Subject(); + + constructor( + private articleSearch: ArticleSearchService, + private _environment: EnvironmentService, + private _activatedRoute: ActivatedRoute, + public application: ApplicationService, + private _navigationService: ProductCatalogNavigationService, + private _breadcrumb: BreadcrumbService + ) {} ngOnInit() { this.fetching$ = this.articleSearch.fetching$; - this.filter$ = this.articleSearch.filter$.pipe( - map((filter) => UiFilter.create(filter)) - // tap((filter) => - // filter.fromQueryParams({ - // main_qs: 'harry potter', - // filter_format: 'eb;!hc', - // filter_dbhwgr: '110;121', - // main_author: 'author', - // filter_region: '9780*|9781*;97884*', - // 'filter_reading-age': '1-10', - // main_stock: '1-', - // }) - // ) - ); + this.filter$ = this.articleSearch.filter$.pipe(map((filter) => Filter.create(filter))); } - applyFilter(value: UiFilter) { + ngOnDestroy(): void { + this._onDestroy$.next(); + this._onDestroy$.complete(); + } + + async closeFilter(): Promise { + const processId = await this._processId$.pipe(first()).toPromise(); + const itemId = this._navigationService.getOutletParams(this._activatedRoute)?.right?.id; + + if (this.isTablet) { + return this.closeFilterTablet(processId); + } + + if (!itemId) { + if (this._navigationService.getOutletLocations(this._activatedRoute)?.left === 'search') { + return await this._navigationService.navigateToProductSearch({ processId, queryParamsHandling: 'preserve' }); + } + return await this._navigationService.navigateToResults({ processId, queryParamsHandling: 'preserve' }); + } else { + return await this._navigationService.navigateToDetails({ processId, itemId, queryParamsHandling: 'preserve' }); + } + } + + async closeFilterTablet(processId: number): Promise { + const latestBreadcrumb = await this._breadcrumb.getLastActivatedBreadcrumbByKey$(processId).pipe(first()).toPromise(); + if (latestBreadcrumb?.tags?.find((tag) => tag === 'results')) { + return await this._navigationService.navigateToResults({ processId, queryParamsHandling: 'preserve' }); + } else { + return await this._navigationService.navigateToProductSearch({ processId, queryParamsHandling: 'preserve' }); + } + } + + applyFilter(value: Filter) { this.uiFilterComponent?.cancelAutocomplete(); this.articleSearch.setFilter(value); this.articleSearch.search({ clear: true }); - this.articleSearch.searchCompleted.pipe(take(1)).subscribe((s) => { - if (s.searchState === '') { - this.close.emit(); - } - }); + this.articleSearch.searchCompleted + .pipe(takeUntil(this._onDestroy$), withLatestFrom(this._processId$)) + .subscribe(([state, processId]) => { + if (state.searchState === '') { + const params = state.filter.getQueryParams(); + if (state.hits === 1 && this.isTablet) { + const item = state.items.find((f) => f); + this._navigationService.navigateToDetails({ + processId, + itemId: item.id, + queryParams: this.isTablet ? undefined : params, + }); + } else if (this.isTablet) { + this._navigationService.navigateToResults({ + processId, + queryParams: params, + }); + } + } + }); } - resetFilter(value: UiFilter) { + clearFilter(value: Filter) { + value.unselectAll(); + } + + resetFilter(value: Filter) { const queryParams = { main_qs: value?.getQueryParams()?.main_qs || '' }; this.articleSearch.setDefaultFilter(queryParams); } diff --git a/apps/page/catalog/src/lib/article-search/search-filter/search-filter.module.ts b/apps/page/catalog/src/lib/article-search/search-filter/search-filter.module.ts index 3a4ee2555..a08408c56 100644 --- a/apps/page/catalog/src/lib/article-search/search-filter/search-filter.module.ts +++ b/apps/page/catalog/src/lib/article-search/search-filter/search-filter.module.ts @@ -1,13 +1,13 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { UiFilterNextModule } from '@ui/filter'; +import { RouterModule } from '@angular/router'; import { UiIconModule } from '@ui/icon'; import { UiSpinnerModule } from '@ui/spinner'; - import { ArticleSearchFilterComponent } from './search-filter.component'; +import { FilterNextModule } from 'apps/shared/components/filter/src/lib'; @NgModule({ - imports: [CommonModule, UiFilterNextModule, UiIconModule, UiSpinnerModule], + imports: [CommonModule, RouterModule, FilterNextModule, UiIconModule, UiSpinnerModule], exports: [ArticleSearchFilterComponent], declarations: [ArticleSearchFilterComponent], providers: [], diff --git a/apps/page/catalog/src/lib/article-search/search-main/search-main.component.html b/apps/page/catalog/src/lib/article-search/search-main/search-main.component.html index ca7255e02..5a5d4ccab 100644 --- a/apps/page/catalog/src/lib/article-search/search-main/search-main.component.html +++ b/apps/page/catalog/src/lib/article-search/search-main/search-main.component.html @@ -1,26 +1,50 @@ -
-

Artikelsuche

-

+

+

Artikelsuche

+

Welchen Artikel suchen Sie?

- - + +
+ + + + Filter + +
-
-

Deine letzten Suchanfragen

-
    -
  • -
diff --git a/apps/page/catalog/src/lib/article-search/search-main/search-main.component.scss b/apps/page/catalog/src/lib/article-search/search-main/search-main.component.scss index 0f4b0e794..6e647e668 100644 --- a/apps/page/catalog/src/lib/article-search/search-main/search-main.component.scss +++ b/apps/page/catalog/src/lib/article-search/search-main/search-main.component.scss @@ -1,71 +1,13 @@ :host { - @apply flex flex-col box-border; + @apply flex flex-col box-border h-full; } -.title { - @apply text-page-heading font-bold; -} - -.info { - @apply text-2xl mt-1 mb-px-30; -} - -.filter-chips { - @apply flex flex-row justify-center; -} - -.card-search-article { - @apply bg-white rounded p-4 text-center; - - box-shadow: 0 -2px 24px 0 #dce2e9; -} - -.card-search-article { - min-height: calc(100vh - 380px); -} - -ui-filter-filter-group-main { - @apply mb-8 w-full; +.page-search-main__filter { + &.active { + @apply bg-[#596470] text-white ml-px-5; + } } ::ng-deep page-article-search-main ui-filter-filter-group-main .ui-filter-chip:not(.selected) { @apply bg-glitter; } - -ui-filter-input-group-main { - @apply block mx-auto; - max-width: 600px; -} - -.recent-searches-wrapper { - @apply flex flex-col mx-auto items-start py-6 bg-white; - width: 50%; - z-index: 0; - - .recent-searches-header { - @apply text-sm font-bold mb-4; - } - - ul { - @apply flex flex-col justify-start overflow-hidden items-start m-0 p-0 bg-white w-full; - z-index: 0; - - .recent-searches-items { - @apply list-none pb-px-15; - - button { - @apply flex flex-row items-center outline-none border-none bg-white text-black text-base m-0 p-0; - - ui-icon { - @apply flex w-px-35 h-px-35 justify-center items-center mr-3 rounded-full text-black; - background-color: #e6eff9; - } - - p { - @apply m-0 p-0 whitespace-nowrap overflow-hidden overflow-ellipsis; - max-width: 400px; - } - } - } - } -} diff --git a/apps/page/catalog/src/lib/article-search/search-main/search-main.component.ts b/apps/page/catalog/src/lib/article-search/search-main/search-main.component.ts index 0f42ef09f..18ff8cd50 100644 --- a/apps/page/catalog/src/lib/article-search/search-main/search-main.component.ts +++ b/apps/page/catalog/src/lib/article-search/search-main/search-main.component.ts @@ -3,11 +3,13 @@ import { ActivatedRoute } from '@angular/router'; import { BreadcrumbService } from '@core/breadcrumb'; import { ApplicationService } from '@core/application'; import { DomainCatalogService } from '@domain/catalog'; -import { UiFilter, UiFilterInputGroupMainComponent } from '@ui/filter'; import { combineLatest, NEVER, Subscription } from 'rxjs'; -import { catchError, debounceTime, first, switchMap } from 'rxjs/operators'; +import { catchError, debounceTime, first, switchMap, map, shareReplay } from 'rxjs/operators'; import { ArticleSearchService } from '../article-search.store'; import { isEqual } from 'lodash'; +import { EnvironmentService } from '@core/environment'; +import { Filter, FilterInputGroupMainComponent } from 'apps/shared/components/filter/src/lib'; +import { ProductCatalogNavigationService } from '@shared/services'; @Component({ selector: 'page-article-search-main', @@ -26,15 +28,39 @@ export class ArticleSearchMainComponent implements OnInit, OnDestroy { subscriptions = new Subscription(); - @ViewChild(UiFilterInputGroupMainComponent, { static: false }) - uiInputGroupMain: UiFilterInputGroupMainComponent; + hasFilter$ = combineLatest([this.searchService.filter$, this.searchService.defaultSettings$]).pipe( + map(([filter, defaultFilter]) => { + const filterQueryParams = filter?.getQueryParams(); + return !isEqual(this.resetQueryParamsQueryAndOrderBy(filterQueryParams), Filter.create(defaultFilter).getQueryParams()); + }) + ); + + @ViewChild(FilterInputGroupMainComponent, { static: false }) + sharedFilterInputGroupMain: FilterInputGroupMainComponent; + + get isDesktop$() { + return this._environment.matchDesktop$.pipe( + map((state) => state?.matches), + shareReplay() + ); + } + + get filterRoute() { + const itemId = this._navigationService?.getOutletParams(this.route)?.right?.id; + return this._navigationService.getArticleSearchResultsAndFilterPath({ + processId: this.application.activatedProcessId, + itemId, + }); + } constructor( private searchService: ArticleSearchService, private catalog: DomainCatalogService, private route: ActivatedRoute, private application: ApplicationService, - private breadcrumb: BreadcrumbService + private breadcrumb: BreadcrumbService, + private _environment: EnvironmentService, + private _navigationService: ProductCatalogNavigationService ) {} ngOnInit() { @@ -44,7 +70,7 @@ export class ArticleSearchMainComponent implements OnInit, OnDestroy { .subscribe(async ([processId, queryParams]) => { const processChanged = processId !== this.searchService.processId; - if (!(this.searchService.filter instanceof UiFilter)) { + if (!(this.searchService.filter instanceof Filter)) { await this.searchService.setDefaultFilter(); } @@ -57,6 +83,7 @@ export class ArticleSearchMainComponent implements OnInit, OnDestroy { const cleanQueryParams = this.cleanupQueryParams(queryParams); if (!isEqual(cleanQueryParams, this.cleanupQueryParams(this.searchService.filter.getQueryParams()))) { + // Reset Filter on Product Search Shell Navigation click await this.searchService.setDefaultFilter(queryParams); } @@ -85,16 +112,30 @@ export class ArticleSearchMainComponent implements OnInit, OnDestroy { this.updateBreadcrumb(this.searchService.processId, this.searchService.filter.getQueryParams()); } - search(filter: UiFilter) { - this.uiInputGroupMain.cancelAutocomplete(); + search(filter: Filter) { + this.sharedFilterInputGroupMain.cancelAutocomplete(); this.searchService.setFilter(filter); this.searchService.search({ clear: true }); } - setQueryHistory(filter: UiFilter, query: string) { + setQueryHistory(filter: Filter, query: string) { filter.fromQueryParams({ main_qs: query }); } + resetQueryParamsQueryAndOrderBy(params: Record = {}) { + const clean = { ...params }; + + for (const key in clean) { + if (key === 'main_qs' || key?.includes('order_by')) { + clean[key] = undefined; + } else if (key?.includes('order_by')) { + delete clean[key]; + } + } + + return clean; + } + cleanupQueryParams(params: Record = {}) { const clean = { ...params }; diff --git a/apps/page/catalog/src/lib/article-search/search-main/search-main.module.ts b/apps/page/catalog/src/lib/article-search/search-main/search-main.module.ts index b3309153e..a5a6d3a59 100644 --- a/apps/page/catalog/src/lib/article-search/search-main/search-main.module.ts +++ b/apps/page/catalog/src/lib/article-search/search-main/search-main.module.ts @@ -1,11 +1,12 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { UiFilterNextModule } from '@ui/filter'; import { UiIconModule } from '@ui/icon'; import { ArticleSearchMainComponent } from './search-main.component'; +import { FilterNextModule } from 'apps/shared/components/filter/src/lib'; +import { RouterModule } from '@angular/router'; @NgModule({ - imports: [CommonModule, UiIconModule, UiFilterNextModule], + imports: [CommonModule, RouterModule, UiIconModule, FilterNextModule], exports: [ArticleSearchMainComponent], declarations: [ArticleSearchMainComponent], providers: [], diff --git a/apps/page/catalog/src/lib/article-search/search-results/search-result-item-loading.component.html b/apps/page/catalog/src/lib/article-search/search-results/search-result-item-loading.component.html index 3b3031c06..190ccf673 100644 --- a/apps/page/catalog/src/lib/article-search/search-results/search-result-item-loading.component.html +++ b/apps/page/catalog/src/lib/article-search/search-results/search-result-item-loading.component.html @@ -1,17 +1,43 @@ -
-
-
-
-
-
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
+ + + +
+
+
+
+
-
-
-
+
+
+
+
-
+
+
+
+
+
+
+
+
+
+
+ diff --git a/apps/page/catalog/src/lib/article-search/search-results/search-result-item-loading.component.scss b/apps/page/catalog/src/lib/article-search/search-results/search-result-item-loading.component.scss index ae87be8c4..68c26a24d 100644 --- a/apps/page/catalog/src/lib/article-search/search-results/search-result-item-loading.component.scss +++ b/apps/page/catalog/src/lib/article-search/search-results/search-result-item-loading.component.scss @@ -1,61 +1,3 @@ :host { - @apply flex flex-row rounded-card bg-white mb-2 p-4; - height: 187px; -} - -.thumbnail { - width: 70px; - height: 90px; - @apply bg-ucla-blue rounded-card; -} - -.space { - @apply flex-grow; -} - -.col { - @apply flex flex-col flex-grow; -} - -.row { - @apply flex flex-row justify-between flex-grow; -} - -.author { - width: 150px; - @apply h-4 bg-ucla-blue ml-4 mb-2; -} - -.title { - width: 300px; - @apply h-6 bg-ucla-blue ml-4; -} - -.price { - width: 100px; - @apply h-6 bg-ucla-blue ml-4; -} - -.category { - width: 200px; - @apply h-4 bg-ucla-blue ml-4; -} - -.manufacturer { - width: 200px; - @apply h-4 bg-ucla-blue ml-4; -} - -.stock { - width: 75px; - @apply h-4 bg-ucla-blue ml-4; -} - -.ava { - width: 150px; - @apply h-4 bg-ucla-blue ml-4; -} - -.animation { - animation: load 1s linear infinite; + @apply flex flex-row rounded bg-white mb-2 p-4 w-full h-[212px] desktop-small:h-[181px]; } diff --git a/apps/page/catalog/src/lib/article-search/search-results/search-result-item-loading.component.ts b/apps/page/catalog/src/lib/article-search/search-results/search-result-item-loading.component.ts index a6684f60f..284bbb9b5 100644 --- a/apps/page/catalog/src/lib/article-search/search-results/search-result-item-loading.component.ts +++ b/apps/page/catalog/src/lib/article-search/search-results/search-result-item-loading.component.ts @@ -1,4 +1,7 @@ -import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { Component, ChangeDetectionStrategy, HostBinding } from '@angular/core'; +import { ActivatedRoute } from '@angular/router'; +import { ProductCatalogNavigationService } from '@shared/services'; +import { shareReplay } from 'rxjs/operators'; @Component({ selector: 'page-search-result-item-loading', @@ -7,5 +10,13 @@ import { Component, ChangeDetectionStrategy } from '@angular/core'; changeDetection: ChangeDetectionStrategy.OnPush, }) export class SearchResultItemLoadingComponent { - constructor() {} + get mainOutletActive$() { + return this._navigationService?.mainOutletActive$(this._activatedRoute).pipe(shareReplay()); + } + + constructor(private _navigationService: ProductCatalogNavigationService, private _activatedRoute: ActivatedRoute) {} + + @HostBinding('style') get class() { + return this._navigationService.mainOutletActive(this._activatedRoute) ? { height: '6.125rem' } : ''; + } } diff --git a/apps/page/catalog/src/lib/article-search/search-results/search-result-item.component.html b/apps/page/catalog/src/lib/article-search/search-results/search-result-item.component.html index f6ac5bc17..b61b9cc47 100644 --- a/apps/page/catalog/src/lib/article-search/search-results/search-result-item.component.html +++ b/apps/page/catalog/src/lib/article-search/search-results/search-result-item.component.html @@ -1,81 +1,122 @@ - -
- -
- -
- - {{ contributor }}{{ last ? '' : ';' }} - + +
+
- {{ item?.product?.name }} -
+
+ + {{ contributor }}{{ last ? '' : ';' }} + +
-
- {{ item?.catalogAvailability?.price?.value?.value | currency: 'EUR':'code' }} -
+
+ {{ item?.product?.name }} +
-
- -
- -
- -
- - {{ stock?.inStock }} - x +
+
+ + {{ item?.product?.formatDetail | substr: 25 }}
- - -
- - - - x -
- -
- - {{ stockTooltipText$ | async }} - - +
-
- {{ item?.catalogAvailability?.ssc }} - {{ item?.catalogAvailability?.sscText }} -
+
+ {{ item?.product?.manufacturer | substr: 18 }} | {{ item?.product?.ean }} +
-
- - {{ item?.product?.formatDetail }} -
+
+ {{ item?.product?.volume }} | + {{ publicationDate }} +
-
- {{ item?.product?.manufacturer | substr: 18 }} | {{ item?.product?.ean }}
- {{ item?.product?.volume }} | - {{ publicationDate }} +
+ {{ item?.catalogAvailability?.price?.value?.value | currency: 'EUR':'code' }} +
+ +
+ +
+ +
+ +
+ + {{ stock?.inStock }} + x +
+ + +
+ + - + x +
+ +
+ + {{ stockTooltipText$ | async }} + + +
+ {{ item?.catalogAvailability?.ssc }} - + {{ !isTablet ? item?.catalogAvailability?.sscText : (item?.catalogAvailability?.sscText | substr: 18) }} +
diff --git a/apps/page/catalog/src/lib/article-search/search-results/search-result-item.component.scss b/apps/page/catalog/src/lib/article-search/search-results/search-result-item.component.scss index dbfbcedd3..4142b0a40 100644 --- a/apps/page/catalog/src/lib/article-search/search-results/search-result-item.component.scss +++ b/apps/page/catalog/src/lib/article-search/search-results/search-result-item.component.scss @@ -1,113 +1,90 @@ -.product-list-result-content { - @apply text-black no-underline grid; - grid-template-columns: 102px 50% auto; - grid-template-rows: auto; +:host { + @apply flex flex-col w-full h-[13.25rem] desktop-small:h-[11.3125rem]; +} + +.page-search-result-item__item-card { + @apply grid grid-flow-col; + grid-template-columns: 3.9375rem auto; + box-shadow: 0px 0px 10px rgba(220, 226, 233, 0.5); +} + +.page-search-result-item__item-grid-container { + @apply grid grid-flow-row gap-[0.375rem]; grid-template-areas: - 'item-thumbnail item-contributors item-contributors' - 'item-thumbnail item-title item-price' - 'item-thumbnail item-title item-data-selector' - 'item-thumbnail item-format item-stock' - 'item-thumbnail item-misc item-ssc'; + 'contributors contributors contributors' + 'title title price' + 'title title price' + 'title title select' + 'format format select' + 'manufacturer manufacturer stock' + 'misc ssc ssc'; } -.item-thumbnail { - grid-area: item-thumbnail; - width: 70px; - @apply mr-8; - img { - max-width: 100%; - max-height: 150px; - @apply rounded-card shadow-cta; - } -} - -.item-contributors { - grid-area: item-contributors; - height: 22px; - text-overflow: ellipsis; - overflow: hidden; - max-width: 600px; - white-space: nowrap; - - a { - @apply text-active-customer font-bold no-underline; - } -} - -.item-title { - grid-area: item-title; - @apply font-bold text-2xl; - height: 64px; - max-height: 64px; -} - -.item-title.xl { - @apply font-bold text-xl; -} - -.item-title.lg { - @apply font-bold text-lg; -} - -.item-title.md { - @apply font-bold text-base; -} - -.item-title.sm { - @apply font-bold text-sm; -} - -.item-title.xs { - @apply font-bold text-xs; -} - -.item-price { - grid-area: item-price; - @apply font-bold text-xl text-right; -} - -.item-format { - grid-area: item-format; - @apply flex flex-row items-center font-bold text-lg whitespace-nowrap; - - img { - @apply mr-2; - } -} - -.item-stock { - grid-area: item-stock; - @apply flex flex-row justify-end items-baseline font-bold text-lg; - - ui-icon { - @apply text-active-customer mr-2; - } -} - -.item-misc { - grid-area: item-misc; -} - -.item-ssc { - grid-area: item-ssc; - @apply font-bold text-right; -} - -.item-ssc.xs { - @apply font-bold text-xs; -} - -.item-data-selector { - @apply w-full flex justify-end; - grid-area: item-data-selector; -} - -ui-select-bullet { - @apply p-4 -m-4 z-dropdown; -} - -@media (min-width: 1025px) { - .item-contributors { - max-width: 780px; +.page-search-result-item__item-grid-container-main { + @apply gap-x-4; + grid-template-rows: 1.3125rem 1.3125rem auto; + grid-template-columns: 30% 30% 20% 8.8% auto; + grid-template-areas: + 'contributors format stock price .' + 'title manufacturer ssc . select' + 'title misc . . .'; +} + +.page-search-result-item__item-contributors { + grid-area: contributors; +} + +.page-search-result-item__item-price { + grid-area: price; +} + +.page-search-result-item__item-title { + grid-area: title; +} + +.page-search-result-item__item-format { + grid-area: format; +} + +.page-search-result-item__item-manufacturer { + grid-area: manufacturer; +} + +.page-search-result-item__item-misc { + grid-area: misc; +} + +.page-search-result-item__item-select-bullet { + grid-area: select; +} + +.page-search-result-item__item-stock { + grid-area: stock; +} + +.page-search-result-item__item-ssc { + grid-area: ssc; +} + +.page-search-result-item__item-image { + box-shadow: 0px 6px 18px rgba(0, 0, 0, 0.197935); +} + +.active, +.hover:hover { + @apply bg-[#D8DFE5] border border-solid border-[#0556B4]; + + .page-search-result-item__item-select-bullet { + .isa-select-bullet::before { + @apply bg-[#fff]; + } + + .isa-select-bullet:checked:before { + @apply bg-[#596470]; + } + + .isa-select-bullet:hover::before { + @apply bg-[#778490]; + } } } diff --git a/apps/page/catalog/src/lib/article-search/search-results/search-result-item.component.ts b/apps/page/catalog/src/lib/article-search/search-results/search-result-item.component.ts index 2dcd017d7..ed3ccb1d6 100644 --- a/apps/page/catalog/src/lib/article-search/search-results/search-result-item.component.ts +++ b/apps/page/catalog/src/lib/article-search/search-results/search-result-item.component.ts @@ -1,14 +1,17 @@ import { DatePipe } from '@angular/common'; -import { Component, ChangeDetectionStrategy, Input, EventEmitter, Output } from '@angular/core'; +import { Component, ChangeDetectionStrategy, Input, EventEmitter, Output, HostListener, HostBinding } from '@angular/core'; import { ApplicationService } from '@core/application'; +import { EnvironmentService } from '@core/environment'; import { DomainAvailabilityService, DomainInStockService } from '@domain/availability'; import { ComponentStore } from '@ngrx/component-store'; import { ItemDTO } from '@swagger/cat'; import { DateAdapter } from '@ui/common'; import { isEqual } from 'lodash'; import { combineLatest } from 'rxjs'; -import { debounceTime, switchMap, map, shareReplay, filter } from 'rxjs/operators'; +import { debounceTime, switchMap, map, shareReplay, filter, first } from 'rxjs/operators'; import { ArticleSearchService } from '../article-search.store'; +import { ProductCatalogNavigationService } from '@shared/services'; +import { ActivatedRoute } from '@angular/router'; export interface SearchResultItemComponentState { item?: ItemDTO; @@ -36,16 +39,7 @@ export class SearchResultItemComponent extends ComponentStore s.item); - @Input() - get selected() { - return this.get((s) => s.selected); - } - set selected(selected: boolean) { - if (this.selected !== selected) { - this.patchState({ selected }); - } - } - readonly selected$ = this.select((s) => s.selected); + selected$ = this._articleSearchService.selectedItemIds$.pipe(map((selectedItemIds) => selectedItemIds.includes(this.item?.id))); @Input() get selectable() { @@ -58,7 +52,7 @@ export class SearchResultItemComponent extends ComponentStore(); + selectedChange = new EventEmitter(); get contributors() { return this.item?.product?.contributors?.split(';').map((val) => val.trim()); @@ -77,6 +71,22 @@ export class SearchResultItemComponent extends ComponentStore -
{{ hits }} Titel
- +
+
+ + + + + Filter + +
+ +
+ {{ hits ?? + 0 }} + Titel +
+
+ +
+ +
-
- -
+ -
+
diff --git a/apps/page/catalog/src/lib/article-search/search-results/search-results.component.scss b/apps/page/catalog/src/lib/article-search/search-results/search-results.component.scss index c366b4122..3dbf5e1fe 100644 --- a/apps/page/catalog/src/lib/article-search/search-results/search-results.component.scss +++ b/apps/page/catalog/src/lib/article-search/search-results/search-results.component.scss @@ -1,34 +1,36 @@ :host { - @apply box-border grid; - max-height: calc(100vh - 364px); - height: 100vh; - grid-template-rows: auto 1fr; + @apply box-border grid h-[calc(100vh-16.5rem)] desktop-small:h-[calc(100vh-15.1rem)]; + grid-template-rows: auto auto 1fr; } .product-list { - @apply m-0 p-0 mt-2; + @apply m-0 p-0 mt-px-2; } -.product-list-result { - @apply list-none bg-white rounded-card p-4 mb-2; - height: 187px; - max-height: 187px; +.page-search-results__result-item { + @apply mb-px-10; } -.filter-wrapper { - @apply block relative; +.page-search-results__result-item-main { + @apply mb-[5px]; +} - .hits { - @apply text-inactive-branch font-semibold absolute top-2 right-0; - } +.page-search-results__order-by { + @apply bg-white rounded px-6 desktop-small:px-8; +} - ui-order-by-filter { - @apply mx-auto; +.page-search-results__order-by-main { + @apply pl-[4.9375rem] px-4; +} + +.page-search-results__filter { + &.active { + @apply bg-[#596470] text-white ml-px-5; } } .actions { - @apply fixed bottom-28 inline-grid grid-flow-col gap-7; + @apply fixed bottom-16 inline-grid grid-flow-col gap-7; left: 50%; transform: translateX(-50%); @@ -44,3 +46,24 @@ @apply bg-brand text-white; } } + +::ng-deep page-search-results .page-search-results__order-by-main shared-order-by-filter { + @apply grid grid-flow-col justify-items-start gap-x-4 justify-start; + grid-template-columns: 30% 30% 20% 8.8% auto; + + .group { + @apply desktop-small:justify-start; + } + + .group:last-child { + @apply justify-self-end; + + .order-by-filter-button { + @apply ml-12 mr-0; + } + } + + .order-by-filter-button { + @apply ml-0 mr-12; + } +} diff --git a/apps/page/catalog/src/lib/article-search/search-results/search-results.component.ts b/apps/page/catalog/src/lib/article-search/search-results/search-results.component.ts index 0729f59bc..bc2356e3d 100644 --- a/apps/page/catalog/src/lib/article-search/search-results/search-results.component.ts +++ b/apps/page/catalog/src/lib/article-search/search-results/search-results.component.ts @@ -3,18 +3,20 @@ import { Component, ChangeDetectionStrategy, OnInit, OnDestroy, ViewChild, ViewC import { ActivatedRoute } from '@angular/router'; import { ApplicationService } from '@core/application'; import { BreadcrumbService } from '@core/breadcrumb'; +import { EnvironmentService } from '@core/environment'; import { DomainCheckoutService } from '@domain/checkout'; import { ItemDTO } from '@swagger/cat'; import { AddToShoppingCartDTO } from '@swagger/checkout'; -import { UiFilter } from '@ui/filter'; import { UiErrorModalComponent, UiModalService } from '@ui/modal'; import { CacheService } from 'apps/core/cache/src/public-api'; import { isEqual } from 'lodash'; import { BehaviorSubject, combineLatest, Subscription } from 'rxjs'; -import { debounceTime, first, map, switchMap } from 'rxjs/operators'; +import { debounceTime, first, map, shareReplay, switchMap, withLatestFrom } from 'rxjs/operators'; import { ArticleSearchService } from '../article-search.store'; import { AddedToCartModalComponent } from './added-to-cart-modal/added-to-cart-modal.component'; import { SearchResultItemComponent } from './search-result-item.component'; +import { ProductCatalogNavigationService } from '@shared/services'; +import { Filter, FilterInputGroupMainComponent } from 'apps/shared/components/filter/src/lib'; @Component({ selector: 'page-search-results', @@ -27,6 +29,9 @@ export class ArticleSearchResultsComponent implements OnInit, OnDestroy { @ViewChild('scrollContainer', { static: true }) scrollContainer: CdkVirtualScrollViewport; + @ViewChild(FilterInputGroupMainComponent, { static: false }) + sharedFilterInputGroupMain: FilterInputGroupMainComponent; + results$ = this.searchService.items$; fetching$ = this.searchService.fetching$; hits$ = this.searchService.hits$; @@ -35,6 +40,8 @@ export class ArticleSearchResultsComponent implements OnInit, OnDestroy { selectedItemIds$ = this.searchService.selectedItemIds$; + searchboxHint$ = this.searchService.searchboxHint$; + selectedItems$ = combineLatest([this.results$, this.selectedItemIds$]).pipe( map(([items, selectedItemIds]) => { return items?.filter((item) => selectedItemIds?.find((selectedItemId) => item.id === selectedItemId)); @@ -47,14 +54,39 @@ export class ArticleSearchResultsComponent implements OnInit, OnDestroy { trackByItemId: TrackByFunction = (index, item) => item.id; + get isTablet() { + return this._environment.matchTablet(); + } + + hasFilter$ = combineLatest([this.searchService.filter$, this.searchService.defaultSettings$]).pipe( + map(([filter, defaultFilter]) => { + const filterQueryParams = filter?.getQueryParams(); + return !isEqual(this.resetQueryParamsQueryAndOrderBy(filterQueryParams), Filter.create(defaultFilter).getQueryParams()); + }) + ); + + get filterRoute() { + const itemId = this._navigationService?.getOutletParams(this.route)?.right?.id; + return this._navigationService.getArticleSearchResultsAndFilterPath({ + processId: this.application.activatedProcessId, + itemId, + }); + } + + get mainOutletActive$() { + return this._navigationService?.mainOutletActive$(this.route).pipe(shareReplay()); + } + constructor( public searchService: ArticleSearchService, private route: ActivatedRoute, - private application: ApplicationService, + public application: ApplicationService, private breadcrumb: BreadcrumbService, private cache: CacheService, private _uiModal: UiModalService, - private _checkoutService: DomainCheckoutService + private _checkoutService: DomainCheckoutService, + private _environment: EnvironmentService, + private _navigationService: ProductCatalogNavigationService ) {} ngOnInit() { @@ -72,7 +104,7 @@ export class ArticleSearchResultsComponent implements OnInit, OnDestroy { const branchChanged = selectedBranch?.id !== this.searchService?.selectedBranch?.id; if (processChanged) { - if (!!this.searchService.processId && this.searchService.filter instanceof UiFilter) { + if (!!this.searchService.processId && this.searchService.filter instanceof Filter) { this.cacheCurrentData( this.searchService.processId, this.searchService.filter.getQueryParams(), @@ -87,7 +119,7 @@ export class ArticleSearchResultsComponent implements OnInit, OnDestroy { this.searchService.setBranch(selectedBranch); } - if (!(this.searchService.filter instanceof UiFilter)) { + if (!(this.searchService.filter instanceof Filter)) { await this.searchService.setDefaultFilter(); } @@ -117,6 +149,27 @@ export class ArticleSearchResultsComponent implements OnInit, OnDestroy { await this.removeDetailsBreadcrumb(processId); }) ); + + this.subscriptions.add( + this.searchService.searchCompleted.pipe(withLatestFrom(this.application.activatedProcessId$)).subscribe(([state, processId]) => { + if (state.searchState === '') { + const params = state.filter.getQueryParams(); + if ((state.hits === 1 && this.isTablet) || (!this.isTablet && !this._navigationService.mainOutletActive(this.route))) { + const item = state.items.find((f) => f); + this._navigationService.navigateToDetails({ + processId, + itemId: item.id, + queryParams: this.isTablet ? undefined : params, + }); + } else if (this.isTablet || this._navigationService.mainOutletActive(this.route)) { + this._navigationService.navigateToResults({ + processId, + queryParams: params, + }); + } + } + }) + ); } ngOnDestroy() { @@ -127,7 +180,26 @@ export class ArticleSearchResultsComponent implements OnInit, OnDestroy { this.unselectAll(); } - search() { + resetQueryParamsQueryAndOrderBy(params: Record = {}) { + const clean = { ...params }; + + for (const key in clean) { + if (key === 'main_qs') { + clean[key] = undefined; + } else if (key?.includes('order_by')) { + delete clean[key]; + } + } + + return clean; + } + + search(filter?: Filter) { + if (!!filter) { + this.sharedFilterInputGroupMain.cancelAutocomplete(); + this.searchService.setFilter(filter); + } + this.searchService.search({ clear: true }); } @@ -187,7 +259,7 @@ export class ArticleSearchResultsComponent implements OnInit, OnDestroy { await this.breadcrumb.addBreadcrumbIfNotExists({ key: processId, name, - path: `/kunde/${this.application.activatedProcessId}/product/search/results`, + path: this._navigationService.getArticleSearchResultsPath(this.application.activatedProcessId), params: queryParams, section: 'customer', tags: ['catalog', 'filter', 'results'], @@ -250,29 +322,44 @@ export class ArticleSearchResultsComponent implements OnInit, OnDestroy { this.searchService.patchState({ selectedItemIds: [] }); } - async addSelectedItemsToCart() { + async addToCart(item?: ItemDTO) { this.loading$.next(true); - const selectedItems = await this.selectedItems$.pipe(first()).toPromise(); + + if (!!item) { + await this.addItemsToCart(item); + } else { + await this.addItemsToCart(); + } + + this.loading$.next(false); + } + + private _createShoppingCartItem(item: ItemDTO): AddToShoppingCartDTO { + return { + quantity: 1, + availability: { + availabilityType: item?.catalogAvailability?.status, + price: item?.catalogAvailability?.price, + supplierProductNumber: item?.ids?.dig ? String(item?.ids?.dig) : item?.product?.supplierProductNumber, + }, + product: { + catalogProductNumber: String(item?.id), + ...item?.product, + }, + itemType: item?.type, + promotion: { points: item?.promoPoints }, + }; + } + + async addItemsToCart(item?: ItemDTO) { + const selectedItems = !item ? await this.selectedItems$.pipe(first()).toPromise() : [item]; const items: AddToShoppingCartDTO[] = []; + const canAddItemsPayload = []; for (const item of selectedItems) { + const shoppingCartItem = this._createShoppingCartItem(item); const isDownload = item?.product?.format === 'EB' || item?.product?.format === 'DL'; - const shoppingCartItem: AddToShoppingCartDTO = { - quantity: 1, - availability: { - availabilityType: item?.catalogAvailability?.status, - price: item?.catalogAvailability?.price, - supplierProductNumber: item?.ids?.dig ? String(item.ids?.dig) : item?.product?.supplierProductNumber, - }, - product: { - catalogProductNumber: String(item?.id), - ...item?.product, - }, - itemType: item.type, - promotion: { points: item?.promoPoints }, - }; - if (isDownload) { shoppingCartItem.destination = { data: { target: 16 } }; canAddItemsPayload.push({ diff --git a/apps/page/catalog/src/lib/article-search/search-results/search-results.module.ts b/apps/page/catalog/src/lib/article-search/search-results/search-results.module.ts index 3f88269e0..48770dbf7 100644 --- a/apps/page/catalog/src/lib/article-search/search-results/search-results.module.ts +++ b/apps/page/catalog/src/lib/article-search/search-results/search-results.module.ts @@ -8,7 +8,6 @@ import { UiCommonModule } from '@ui/common'; import { UiIconModule } from '@ui/icon'; import { UiSelectBulletModule } from '@ui/select-bullet'; import { UiTooltipModule } from '@ui/tooltip'; -import { UiOrderByFilterModule } from 'apps/ui/filter/src/lib/next/order-by-filter/order-by-filter.module'; import { UiSpinnerModule } from 'apps/ui/spinner/src/lib/ui-spinner.module'; import { AddedToCartModalComponent } from './added-to-cart-modal/added-to-cart-modal.component'; import { StockInfosPipe } from './order-by-filter/stick-infos.pipe'; @@ -16,6 +15,9 @@ import { SearchResultItemLoadingComponent } from './search-result-item-loading.c import { SearchResultItemComponent } from './search-result-item.component'; import { ArticleSearchResultsComponent } from './search-results.component'; import { SearchResultSelectedPipe } from './selected/search-result-selected.pipe'; +import { FilterAutocompleteProvider, FilterNextModule, OrderByFilterModule } from 'apps/shared/components/filter/src/lib'; +import { FocusSearchboxEvent } from '../focus-searchbox.event'; +import { ArticleSearchMainAutocompleteProvider } from '../providers'; @NgModule({ imports: [ @@ -27,9 +29,10 @@ import { SearchResultSelectedPipe } from './selected/search-result-selected.pipe UiIconModule, UiSelectBulletModule, UiSpinnerModule, - UiOrderByFilterModule, + OrderByFilterModule, ScrollingModule, UiTooltipModule, + FilterNextModule, ], exports: [ArticleSearchResultsComponent, SearchResultItemComponent], declarations: [ @@ -40,6 +43,13 @@ import { SearchResultSelectedPipe } from './selected/search-result-selected.pipe SearchResultSelectedPipe, AddedToCartModalComponent, ], - providers: [], + providers: [ + FocusSearchboxEvent, + { + provide: FilterAutocompleteProvider, + useClass: ArticleSearchMainAutocompleteProvider, + multi: true, + }, + ], }) export class SearchResultsModule {} diff --git a/apps/page/catalog/src/lib/page-catalog-routing.module.ts b/apps/page/catalog/src/lib/page-catalog-routing.module.ts index 7823b4a74..dd83fcb4f 100644 --- a/apps/page/catalog/src/lib/page-catalog-routing.module.ts +++ b/apps/page/catalog/src/lib/page-catalog-routing.module.ts @@ -2,10 +2,65 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { ArticleDetailsComponent } from './article-details/article-details.component'; import { ArticleSearchComponent } from './article-search/article-search.component'; +import { ArticleSearchFilterComponent } from './article-search/search-filter/search-filter.component'; import { ArticleSearchMainComponent } from './article-search/search-main/search-main.component'; import { ArticleSearchResultsComponent } from './article-search/search-results/search-results.component'; import { PageCatalogComponent } from './page-catalog.component'; +const auxiliaryRoutes = [ + { + path: 'search', + component: ArticleSearchComponent, + outlet: 'left', + children: [ + { + path: '', + component: ArticleSearchMainComponent, + }, + ], + }, + { + path: 'filter', + component: ArticleSearchFilterComponent, + outlet: 'right', + }, + { + path: 'filter/:id', + component: ArticleSearchFilterComponent, + outlet: 'right', + }, + { + path: 'results', + component: ArticleSearchResultsComponent, + outlet: 'left', + }, + { + path: 'results', + component: ArticleSearchResultsComponent, + outlet: 'main', + }, + { + path: 'results/:id', + component: ArticleSearchResultsComponent, + outlet: 'left', + }, + { + path: 'results/ean/:ean', + component: ArticleSearchResultsComponent, + outlet: 'left', + }, + { + path: 'details/ean/:ean', + component: ArticleDetailsComponent, + outlet: 'right', + }, + { + path: 'details/:id', + component: ArticleDetailsComponent, + outlet: 'right', + }, +]; + const routes: Routes = [ { path: '', @@ -19,12 +74,16 @@ const routes: Routes = [ path: '', component: ArticleSearchMainComponent, }, - { - path: 'results', - component: ArticleSearchResultsComponent, - }, ], }, + { + path: 'results', + component: ArticleSearchResultsComponent, + }, + { + path: 'filter', + component: ArticleSearchFilterComponent, + }, { path: 'details/ean/:ean', component: ArticleDetailsComponent, @@ -33,6 +92,7 @@ const routes: Routes = [ path: 'details/:id', component: ArticleDetailsComponent, }, + ...auxiliaryRoutes, { path: '', pathMatch: 'full', diff --git a/apps/page/catalog/src/lib/page-catalog.component.html b/apps/page/catalog/src/lib/page-catalog.component.html index cd97797d6..24a822cf9 100644 --- a/apps/page/catalog/src/lib/page-catalog.component.html +++ b/apps/page/catalog/src/lib/page-catalog.component.html @@ -8,4 +8,25 @@ > - + + + + + + + + + + + +
+
+ +
+ +
+ +
+
+ + diff --git a/apps/page/catalog/src/lib/page-catalog.component.scss b/apps/page/catalog/src/lib/page-catalog.component.scss index 47f1d1c07..40f77a196 100644 --- a/apps/page/catalog/src/lib/page-catalog.component.scss +++ b/apps/page/catalog/src/lib/page-catalog.component.scss @@ -1,5 +1,5 @@ :host { - @apply block relative; + @apply block relative h-[calc(100vh-16.5rem)] desktop-small:h-[calc(100vh-15.1rem)]; } shell-breadcrumb { diff --git a/apps/page/catalog/src/lib/page-catalog.component.ts b/apps/page/catalog/src/lib/page-catalog.component.ts index 0aa24f786..55ec3507f 100644 --- a/apps/page/catalog/src/lib/page-catalog.component.ts +++ b/apps/page/catalog/src/lib/page-catalog.component.ts @@ -1,4 +1,5 @@ import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, OnDestroy, OnInit, Renderer2, ViewChild } from '@angular/core'; +import { ActivatedRoute, Router } from '@angular/router'; import { ApplicationService } from '@core/application'; import { AuthService } from '@core/auth'; import { EnvironmentService } from '@core/environment'; @@ -6,8 +7,8 @@ import { BranchSelectorComponent } from '@shared/components/branch-selector'; import { BreadcrumbComponent } from '@shared/components/breadcrumb'; import { BranchDTO } from '@swagger/checkout'; import { UiErrorModalComponent, UiModalService } from '@ui/modal'; -import { BehaviorSubject, from, fromEvent, Observable, Subject } from 'rxjs'; -import { first, map, switchMap, takeUntil } from 'rxjs/operators'; +import { fromEvent, Observable, Subject } from 'rxjs'; +import { first, map, shareReplay, switchMap, takeUntil, withLatestFrom } from 'rxjs/operators'; @Component({ selector: 'page-catalog', @@ -28,16 +29,41 @@ export class PageCatalogComponent implements OnInit, AfterViewInit, OnDestroy { _onDestroy$ = new Subject(); + get isTablet$() { + return this._environmentService.matchTablet$.pipe( + map((state) => state.matches), + shareReplay() + ); + } + + get isDesktop$() { + return this._environmentService.matchDesktop$.pipe( + map((state) => { + return state.matches; + }), + shareReplay() + ); + } + + routerEvents$ = this._router.events.pipe(shareReplay()); + + showMainOutlet$ = this.routerEvents$.pipe(map((_) => !!this._activatedRoute?.children?.find((child) => child?.outlet === 'main'))); + + showLeftOutlet$ = this.routerEvents$.pipe(map((_) => !!this._activatedRoute?.children?.find((child) => child?.outlet === 'left'))); + + showRightOutlet$ = this.routerEvents$.pipe(map((_) => !!this._activatedRoute?.children?.find((child) => child?.outlet === 'right'))); + constructor( public application: ApplicationService, private _uiModal: UiModalService, public auth: AuthService, private _environmentService: EnvironmentService, - private _renderer: Renderer2 + private _renderer: Renderer2, + private _activatedRoute: ActivatedRoute, + private _router: Router ) {} ngOnInit() { - // this.auth.getClaims(); this.activatedProcessId$ = this.application.activatedProcessId$.pipe(map((processId) => String(processId))); this.selectedBranch$ = this.activatedProcessId$.pipe(switchMap((processId) => this.application.getSelectedBranch$(Number(processId)))); @@ -46,19 +72,19 @@ export class PageCatalogComponent implements OnInit, AfterViewInit, OnDestroy { } ngAfterViewInit(): void { - if (this._environmentService.isTablet()) { - fromEvent(this.branchSelectorRef.nativeElement, 'focusin') - .pipe(takeUntil(this._onDestroy$)) - .subscribe((_) => { + fromEvent(this.branchSelectorRef.nativeElement, 'focusin') + .pipe(takeUntil(this._onDestroy$), withLatestFrom(this.isTablet$)) + .subscribe(([_, isTablet]) => { + if (isTablet) { this._renderer.setStyle(this.branchSelectorRef?.nativeElement, 'width', this.branchSelectorWidth); - }); + } + }); - fromEvent(this.branchSelectorRef.nativeElement, 'focusout') - .pipe(takeUntil(this._onDestroy$)) - .subscribe((_) => { - this._renderer.removeStyle(this.branchSelectorRef?.nativeElement, 'width'); - }); - } + fromEvent(this.branchSelectorRef.nativeElement, 'focusout') + .pipe(takeUntil(this._onDestroy$)) + .subscribe((_) => { + this._renderer.removeStyle(this.branchSelectorRef?.nativeElement, 'width'); + }); } ngOnDestroy(): void { diff --git a/apps/page/checkout/src/lib/checkout-dummy/checkout-dummy.component.scss b/apps/page/checkout/src/lib/checkout-dummy/checkout-dummy.component.scss index b5bda2876..cef2dcd4a 100644 --- a/apps/page/checkout/src/lib/checkout-dummy/checkout-dummy.component.scss +++ b/apps/page/checkout/src/lib/checkout-dummy/checkout-dummy.component.scss @@ -3,7 +3,7 @@ } .wrapper { - @apply block bg-white shadow-card rounded-card pt-6; + @apply block bg-white shadow-card rounded pt-6; .header { @apply text-right; @@ -12,11 +12,11 @@ @apply text-center; .title { - @apply text-2xl text-page-heading font-bold; + @apply text-h3 text-h2 font-bold; } .paragraph { - @apply text-2xl mt-1 mb-0; + @apply text-h3 mt-1 mb-0; } } } diff --git a/apps/page/checkout/src/lib/checkout-review/checkout-review.component.scss b/apps/page/checkout/src/lib/checkout-review/checkout-review.component.scss index b72708421..a694d058f 100644 --- a/apps/page/checkout/src/lib/checkout-review/checkout-review.component.scss +++ b/apps/page/checkout/src/lib/checkout-review/checkout-review.component.scss @@ -14,7 +14,7 @@ button { } .card { - @apply bg-white rounded-card shadow-card; + @apply bg-white rounded shadow-card; } .card-empty { @@ -26,7 +26,7 @@ button { width: fit-content; h1 { - @apply text-2xl font-bold my-1; + @apply text-h3 font-bold my-1; font-size: 26px; } @@ -87,7 +87,7 @@ button { } .sub-header { - @apply text-center text-2xl font-normal my-0 mb-8; + @apply text-center text-h3 font-normal my-0 mb-8; } hr { @@ -134,7 +134,7 @@ h1 { } .branch-name { - @apply text-regular overflow-hidden overflow-ellipsis ml-4; + @apply text-p2 overflow-hidden overflow-ellipsis ml-4; } .book-icon { @@ -156,7 +156,7 @@ h1 { } .shipping-cost-info { - @apply text-sm mr-4 self-end; + @apply text-p3 mr-4 self-end; } .total-value { @@ -164,5 +164,5 @@ h1 { } .total-item-reading-points { - @apply text-base font-bold text-ucla-blue; + @apply text-p2 font-bold text-ucla-blue; } diff --git a/apps/page/checkout/src/lib/checkout-review/shopping-cart-item/shopping-cart-item.component.scss b/apps/page/checkout/src/lib/checkout-review/shopping-cart-item/shopping-cart-item.component.scss index 34861fc62..760fe1404 100644 --- a/apps/page/checkout/src/lib/checkout-review/shopping-cart-item/shopping-cart-item.component.scss +++ b/apps/page/checkout/src/lib/checkout-review/shopping-cart-item/shopping-cart-item.component.scss @@ -23,7 +23,7 @@ button { img { max-width: 100%; max-height: 150px; - @apply rounded-card shadow-cta; + @apply rounded shadow-cta; } } @@ -59,11 +59,11 @@ button { } .item-title.md { - @apply font-bold text-base; + @apply font-bold text-p2; } .item-title.sm { - @apply font-bold text-sm; + @apply font-bold text-p3; } .item-title.xs { @@ -88,7 +88,7 @@ button { } .quantity-error { - @apply text-dark-goldenrod font-bold text-sm whitespace-nowrap; + @apply text-dark-goldenrod font-bold text-p3 whitespace-nowrap; } ui-quantity-dropdown { @@ -113,7 +113,7 @@ button { } .item-availability-message { - @apply text-dark-goldenrod font-bold text-sm whitespace-nowrap; + @apply text-dark-goldenrod font-bold text-p3 whitespace-nowrap; } } diff --git a/apps/page/checkout/src/lib/checkout-review/special-comment/special-comment.component.scss b/apps/page/checkout/src/lib/checkout-review/special-comment/special-comment.component.scss index 2b4b06d0f..852aa1734 100644 --- a/apps/page/checkout/src/lib/checkout-review/special-comment/special-comment.component.scss +++ b/apps/page/checkout/src/lib/checkout-review/special-comment/special-comment.component.scss @@ -13,11 +13,11 @@ label { } textarea { - @apply flex-grow text-base border-none outline-none p-0 resize-none; + @apply flex-grow text-p2 border-none outline-none p-0 resize-none; } button { - @apply text-brand font-bold text-cta-l outline-none border-none bg-transparent ml-1; + @apply text-brand font-bold text-p1 outline-none border-none bg-transparent ml-1; ui-icon { @apply text-ucla-blue; diff --git a/apps/page/checkout/src/lib/checkout-summary/checkout-summary.component.scss b/apps/page/checkout/src/lib/checkout-summary/checkout-summary.component.scss index 65669ddd5..8f8d86da2 100644 --- a/apps/page/checkout/src/lib/checkout-summary/checkout-summary.component.scss +++ b/apps/page/checkout/src/lib/checkout-summary/checkout-summary.component.scss @@ -8,7 +8,7 @@ } .card { - @apply bg-white rounded-card shadow-card overflow-scroll; + @apply bg-white rounded shadow-card overflow-scroll; height: calc(100vh - 410px); } @@ -61,7 +61,7 @@ } .order-customer { - @apply font-bold text-2xl; + @apply font-bold text-h3; } .grow { @@ -178,15 +178,15 @@ } .promotion-points { - @apply text-ucla-blue text-regular font-bold flex-grow; + @apply text-ucla-blue text-p2 font-bold flex-grow; } .total-price { - @apply font-bold text-cta-l; + @apply font-bold text-p1; } .price-info { - @apply text-right text-sm; + @apply text-right text-p3; } .actions { diff --git a/apps/page/customer-order/src/lib/customer-order-details/customer-order-details.component.ts b/apps/page/customer-order/src/lib/customer-order-details/customer-order-details.component.ts index f5a42032e..4965fc723 100644 --- a/apps/page/customer-order/src/lib/customer-order-details/customer-order-details.component.ts +++ b/apps/page/customer-order/src/lib/customer-order-details/customer-order-details.component.ts @@ -1,6 +1,7 @@ import { ChangeDetectionStrategy, Component, OnDestroy, OnInit } from '@angular/core'; import { ActivatedRoute, Router } from '@angular/router'; import { BreadcrumbService } from '@core/breadcrumb'; +import { EnvironmentService } from '@core/environment'; import { DomainCustomerOrderService, DomainGoodsService, DomainOmsService, OrderItemsContext } from '@domain/oms'; import { ComponentStore, tapResponse } from '@ngrx/component-store'; import { ListResponseArgsOfOrderItemListItemDTO, OrderItemListItemDTO, OrderItemProcessingStatusValue } from '@swagger/oms'; @@ -63,13 +64,18 @@ export class CustomerOrderDetailsComponent extends ComponentStore - + +
+ + + -
-

Filter

- - - +
+

Filter

+ + + +
-
-
- +
+ - -
+ +
+ diff --git a/apps/page/customer-order/src/lib/customer-order-search/customer-order-search-filter/customer-order-search-filter.component.scss b/apps/page/customer-order/src/lib/customer-order-search/customer-order-search-filter/customer-order-search-filter.component.scss index d8893d743..ab26dadaa 100644 --- a/apps/page/customer-order/src/lib/customer-order-search/customer-order-search-filter/customer-order-search-filter.component.scss +++ b/apps/page/customer-order/src/lib/customer-order-search/customer-order-search-filter/customer-order-search-filter.component.scss @@ -22,9 +22,7 @@ } .cta-wrapper { - @apply fixed bottom-8 whitespace-nowrap; - left: 50%; - transform: translateX(-50%); + @apply text-center whitespace-nowrap; } .cta-reset-filter, diff --git a/apps/page/customer-order/src/lib/customer-order-search/customer-order-search-filter/customer-order-search-filter.component.ts b/apps/page/customer-order/src/lib/customer-order-search/customer-order-search-filter/customer-order-search-filter.component.ts index 7720d3a37..64101ebb2 100644 --- a/apps/page/customer-order/src/lib/customer-order-search/customer-order-search-filter/customer-order-search-filter.component.ts +++ b/apps/page/customer-order/src/lib/customer-order-search/customer-order-search-filter/customer-order-search-filter.component.ts @@ -9,13 +9,15 @@ import { Input, ViewChild, } from '@angular/core'; -import { Router } from '@angular/router'; +import { ActivatedRoute, Params, Router } from '@angular/router'; import { BreadcrumbService } from '@core/breadcrumb'; import { OrderItemListItemDTO } from '@swagger/oms'; import { UiFilter, UiFilterComponent } from '@ui/filter'; import { Observable, Subject } from 'rxjs'; -import { take, takeUntil } from 'rxjs/operators'; +import { map, take, takeUntil } from 'rxjs/operators'; import { CustomerOrderSearchStore } from '../customer-order-search.store'; +import { EnvironmentService } from '@core/environment'; +import { ApplicationService } from '@core/application'; @Component({ selector: 'page-customer-order-search-filter', @@ -27,12 +29,14 @@ export class CustomerOrderSearchFilterComponent implements OnInit, OnDestroy { @Output() close = new EventEmitter(); - filter: UiFilter; - loading$: Observable; message: string; + get isTablet() { + return this._environment.matchTablet(); + } + @Input() processId: number; @@ -41,11 +45,57 @@ export class CustomerOrderSearchFilterComponent implements OnInit, OnDestroy { @ViewChild(UiFilterComponent, { static: false }) uiFilter: UiFilterComponent; + filter$: Observable; + + get leftOutletLocation(): string { + return this._activatedRoute?.parent?.children?.find((childRoute) => childRoute?.outlet === 'left')?.snapshot?.routeConfig?.path ?? ''; + } + + get rightOutletParams(): Params { + return this._activatedRoute?.parent?.children?.find((childRoute) => childRoute?.outlet === 'right')?.snapshot?.params; + } + + get closeFilterRouterPath() { + // if (!this.isTablet) { + // if (this.leftOutletLocation.includes('results')) { + // const params = this.rightOutletParams; + // const orderNumber = params?.orderNumber; + // const compartmentCode = params?.compartmentCode; + // const processingStatus = params?.processingStatus; + // return orderNumber + // ? [ + // '/kunde', + // this.application.activatedProcessId, + // 'order', + // { outlets: { main: null, left: 'results', right: ['details', 'order', orderNumber, processingStatus] } }, + // ] + // : [ + // '/kunde', + // this.application.activatedProcessId, + // 'order', + // { + // outlets: { + // main: null, + // left: 'results', + // right: ['details', 'compartment', compartmentCode, processingStatus], + // }, + // }, + // ]; + // } + // return ['/kunde', this.application.activatedProcessId, 'order', { outlets: { main: null, left: 'search', right: 'filter' } }]; + // } else { + return ['/kunde', this.application.activatedProcessId, 'order', 'results']; + // } + } + constructor( private _goodsOutSearchStore: CustomerOrderSearchStore, private _breadcrumb: BreadcrumbService, private _cdr: ChangeDetectorRef, - private _router: Router + private _router: Router, + private _environment: EnvironmentService, + private _activatedRoute: ActivatedRoute, + public application: ApplicationService ) {} ngOnInit() { @@ -59,23 +109,23 @@ export class CustomerOrderSearchFilterComponent implements OnInit, OnDestroy { } private _initSettings() { - this.filter = UiFilter.create(this._goodsOutSearchStore.filter); + this.filter$ = this._goodsOutSearchStore.filter$.pipe(map((filter) => UiFilter.create(filter))); } private _initLoading$() { this.loading$ = this._goodsOutSearchStore.fetching$; } - async resetFilter() { - const queryParams = { main_qs: this.filter?.getQueryParams()?.main_qs || '' }; + async resetFilter(filter: UiFilter) { + const queryParams = { main_qs: filter?.getQueryParams()?.main_qs || '' }; this._goodsOutSearchStore.resetFilter(queryParams); this._initSettings(); this._cdr.markForCheck(); } - async applyFilter() { + async applyFilter(filter: UiFilter) { this.uiFilter?.cancelAutocomplete(); - this._goodsOutSearchStore.setFilter(this.filter); + this._goodsOutSearchStore.setFilter(filter); this.message = undefined; await this.updateQueryParams(); @@ -84,6 +134,7 @@ export class CustomerOrderSearchFilterComponent implements OnInit, OnDestroy { if (result.results.error) { } else { if (result.results.hits > 0) { + // if (this.isTablet) { if (result.results.hits === 1) { const orderItem = result.results.result[0]; this._router.navigate([this.getDetailsPath(orderItem)]); @@ -92,6 +143,18 @@ export class CustomerOrderSearchFilterComponent implements OnInit, OnDestroy { queryParams: this._goodsOutSearchStore.filter.getQueryParams(), }); } + // } else { + // const orderItem = result.results.result[0]; + // if (result.results.hits === 1) { + // this._router.navigate(this.getDetailsPathDesktop(orderItem, this.processId), { + // queryParams: this._goodsOutSearchStore.filter.getQueryParams(), + // }); + // } else { + // this._router.navigate(this.getDetailsPathDesktop(orderItem, this.processId), { + // queryParams: this._goodsOutSearchStore.filter.getQueryParams(), + // }); + // } + // } this.close.emit(); } else { @@ -126,4 +189,32 @@ export class CustomerOrderSearchFilterComponent implements OnInit, OnDestroy { ? `/kunde/${this.processId}/order/details/compartment/${encodeURIComponent(item?.compartmentCode)}/${item?.processingStatus}` : `/kunde/${this.processId}/order/details/order/${encodeURIComponent(item?.orderNumber)}/${item?.processingStatus}`; } + + // getDetailsPathDesktop(item: OrderItemListItemDTO, processId: number) { + // return item?.compartmentCode + // ? [ + // '/kunde', + // processId, + // 'order', + // { + // outlets: { + // main: null, + // left: 'results', + // right: ['details', 'compartment', encodeURIComponent(item?.compartmentCode), item?.processingStatus], + // }, + // }, + // ] + // : [ + // '/kunde', + // processId, + // 'order', + // { + // outlets: { + // main: null, + // left: 'results', + // right: ['details', 'order', encodeURIComponent(item?.orderNumber), item?.processingStatus], + // }, + // }, + // ]; + // } } diff --git a/apps/page/customer-order/src/lib/customer-order-search/customer-order-search-filter/order-branch-id-input/order-branch-id-input.component.css b/apps/page/customer-order/src/lib/customer-order-search/customer-order-search-filter/order-branch-id-input/order-branch-id-input.component.css index cdacf84b9..375530a42 100644 --- a/apps/page/customer-order/src/lib/customer-order-search/customer-order-search-filter/order-branch-id-input/order-branch-id-input.component.css +++ b/apps/page/customer-order/src/lib/customer-order-search/customer-order-search-filter/order-branch-id-input/order-branch-id-input.component.css @@ -1,5 +1,5 @@ ::ng-deep page-order-branch-id-input shared-branch-selector .shared-branch-selector-input-container { - @apply border border-solid border-[#AEB7C1] rounded-card; + @apply border border-solid border-[#AEB7C1] rounded; } ::ng-deep page-order-branch-id-input shared-branch-selector.shared-branch-selector-opend .shared-branch-selector-input-container { diff --git a/apps/page/customer-order/src/lib/customer-order-search/customer-order-search-filter/order-branch-id-input/order-branch-id-input.component.ts b/apps/page/customer-order/src/lib/customer-order-search/customer-order-search-filter/order-branch-id-input/order-branch-id-input.component.ts index 1fc720896..409caf0a6 100644 --- a/apps/page/customer-order/src/lib/customer-order-search/customer-order-search-filter/order-branch-id-input/order-branch-id-input.component.ts +++ b/apps/page/customer-order/src/lib/customer-order-search/customer-order-search-filter/order-branch-id-input/order-branch-id-input.component.ts @@ -25,18 +25,31 @@ export class OrderBranchIdInputComponent extends AbstractUiFilterInputDirective ngOnInit() { this.control.setValue({ id: Number(this.value) }); + const uiInputChangesSub = this.uiInput?.changes?.subscribe((changes) => { + const controlValue = this.control?.value?.id; + const changesValue = Number(changes?.target?.value); + if (controlValue !== changesValue) { + this.control.setValue(changesValue && !isNaN(changesValue) ? { id: changesValue } : undefined); + } + }); + const onInputChangeSub = this.onUiInputChange$.subscribe((input) => { - if (this.control.value !== input.value) { - this.control.setValue(input.value ? { id: Number(input.value) } : undefined); + const controlValue = this.control?.value?.id; + const inputValue = Number(input?.value); + if (controlValue !== inputValue) { + this.control.setValue(inputValue && !isNaN(inputValue) ? { id: inputValue } : undefined); } }); const onControlValueChangeSub = this.control.valueChanges.subscribe((value) => { - if (this.value !== value) { - this.setValue(value ? String(value?.id) : undefined); + if (!value) { + this.setValue(undefined); + } else if (this.value !== String(value?.id)) { + this.setValue(String(value?.id)); } }); + this._subscriptions.add(uiInputChangesSub); this._subscriptions.add(onInputChangeSub); this._subscriptions.add(onControlValueChangeSub); } diff --git a/apps/page/customer-order/src/lib/customer-order-search/customer-order-search.component.html b/apps/page/customer-order/src/lib/customer-order-search/customer-order-search.component.html index 729c7220a..c47a3f8fe 100644 --- a/apps/page/customer-order/src/lib/customer-order-search/customer-order-search.component.html +++ b/apps/page/customer-order/src/lib/customer-order-search/customer-order-search.component.html @@ -1,8 +1,13 @@ -
- +
+ + + Filter +
diff --git a/apps/page/customer-order/src/lib/customer-order-search/customer-order-search.component.scss b/apps/page/customer-order/src/lib/customer-order-search/customer-order-search.component.scss index 8b6cf1f0f..47cede783 100644 --- a/apps/page/customer-order/src/lib/customer-order-search/customer-order-search.component.scss +++ b/apps/page/customer-order/src/lib/customer-order-search/customer-order-search.component.scss @@ -3,7 +3,7 @@ } .filter { - @apply font-sans flex items-center font-bold bg-wild-blue-yonder border-0 text-regular py-px-8 px-px-15 rounded-filter justify-center; + @apply font-sans flex items-center font-bold bg-wild-blue-yonder border-0 text-p2 py-px-8 px-px-15 rounded-filter justify-center; min-width: 106px; .label { diff --git a/apps/page/customer-order/src/lib/customer-order-search/customer-order-search.component.ts b/apps/page/customer-order/src/lib/customer-order-search/customer-order-search.component.ts index 10316e422..50f0b8d3a 100644 --- a/apps/page/customer-order/src/lib/customer-order-search/customer-order-search.component.ts +++ b/apps/page/customer-order/src/lib/customer-order-search/customer-order-search.component.ts @@ -8,6 +8,7 @@ import { combineLatest, Subject } from 'rxjs'; import { map, takeUntil, withLatestFrom } from 'rxjs/operators'; import { CustomerOrderSearchStore } from './customer-order-search.store'; import { CustomerOrderSearchMainAutocompleteProvider } from './providers/customer-order-search-main-autocomplete.provider'; +import { EnvironmentService } from '@core/environment'; @Component({ selector: 'page-customer-order-search', @@ -15,7 +16,6 @@ import { CustomerOrderSearchMainAutocompleteProvider } from './providers/custome styleUrls: ['customer-order-search.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, providers: [ - CustomerOrderSearchStore, { provide: UiFilterAutocompleteProvider, useClass: CustomerOrderSearchMainAutocompleteProvider, @@ -32,28 +32,30 @@ import { CustomerOrderSearchMainAutocompleteProvider } from './providers/custome export class CustomerOrderSearchComponent implements OnInit, OnDestroy { private _onDestroy$ = new Subject(); + get isTablet() { + return this._environment.matchTablet(); + } + hasFilter$ = combineLatest([this._goodsOutSearchStore.filter$, this._goodsOutSearchStore.defaultSettings$]).pipe( map(([filter, defaultFilter]) => !isEqual(filter?.getQueryParams(), UiFilter.create(defaultFilter).getQueryParams())) ); - processId$ = this._activatedRoute.data.pipe(map((data) => +data.processId)); + processId$ = this._activatedRoute.parent.data.pipe(map((data) => +data.processId)); + + get filterRoute() { + const processId = this._activatedRoute?.parent?.snapshot?.data?.processId; + return ['/kunde', processId, 'order', 'filter']; + } constructor( private _goodsOutSearchStore: CustomerOrderSearchStore, private _breadcrumb: BreadcrumbService, - private _activatedRoute: ActivatedRoute + private _activatedRoute: ActivatedRoute, + private _environment: EnvironmentService ) {} ngOnInit() { this.processId$.pipe(takeUntil(this._onDestroy$), withLatestFrom(this._activatedRoute.queryParams)).subscribe(([processId]) => { - // if (params && Object.keys(params).length === 0) { - // console.log('params is empty'); - // this._goodsOutSearchStore.setQueryParams(params); - // this._goodsOutSearchStore.loadSettings(); - // } else { - // // this._goodsOutSearchStore.resetFilter(params); - // } - this._breadcrumb.addOrUpdateBreadcrumbIfNotExists({ key: processId, name: 'Kundenbestellung', diff --git a/apps/page/customer-order/src/lib/customer-order-search/customer-order-search.module.ts b/apps/page/customer-order/src/lib/customer-order-search/customer-order-search.module.ts index 442dcf00a..0d7a67751 100644 --- a/apps/page/customer-order/src/lib/customer-order-search/customer-order-search.module.ts +++ b/apps/page/customer-order/src/lib/customer-order-search/customer-order-search.module.ts @@ -8,6 +8,7 @@ import { RouterModule } from '@angular/router'; import { UiFilterNextModule } from '@ui/filter'; import { SharedFilterOverlayModule } from '@shared/components/filter-overlay'; import { UiSpinnerModule } from '@ui/spinner'; +import { CustomerOrderSearchStore } from './customer-order-search.store'; @NgModule({ imports: [ @@ -20,6 +21,7 @@ import { UiSpinnerModule } from '@ui/spinner'; OrderBranchIdInputComponent, ], exports: [CustomerOrderSearchComponent], + providers: [CustomerOrderSearchStore], declarations: [CustomerOrderSearchComponent, CustomerOrderSearchFilterComponent], }) export class CustomerOrderSearchModule {} diff --git a/apps/page/customer-order/src/lib/customer-order-search/search-main/customer-order-search-main.component.scss b/apps/page/customer-order/src/lib/customer-order-search/search-main/customer-order-search-main.component.scss index df66b06ab..ca173a1bb 100644 --- a/apps/page/customer-order/src/lib/customer-order-search/search-main/customer-order-search-main.component.scss +++ b/apps/page/customer-order/src/lib/customer-order-search/search-main/customer-order-search-main.component.scss @@ -3,19 +3,19 @@ } .goods-out-list-navigation { - @apply text-center text-2xl text-active-branch block bg-white rounded-t-card font-bold no-underline py-5; + @apply text-center text-h3 text-active-branch block bg-white rounded-t font-bold no-underline py-5; } .search-main { - @apply bg-white text-center rounded-t-card py-5 shadow-card; + @apply bg-white text-center rounded-t p-5 shadow-card; height: calc(100vh - 380px); .search-main-title { - @apply text-2xl font-bold; + @apply text-h3 font-bold; } .search-main-paragraph { - @apply text-2xl mb-12 mt-6; + @apply text-h3 mb-12 mt-6; } ui-filter-input-group-main { diff --git a/apps/page/customer-order/src/lib/customer-order-search/search-main/customer-order-search-main.component.ts b/apps/page/customer-order/src/lib/customer-order-search/search-main/customer-order-search-main.component.ts index 2dbdbced9..77d616dc8 100644 --- a/apps/page/customer-order/src/lib/customer-order-search/search-main/customer-order-search-main.component.ts +++ b/apps/page/customer-order/src/lib/customer-order-search/search-main/customer-order-search-main.component.ts @@ -7,6 +7,7 @@ import { debounce, isEqual } from 'lodash'; import { BehaviorSubject, combineLatest, Subscription } from 'rxjs'; import { debounceTime, first, map, withLatestFrom } from 'rxjs/operators'; import { CustomerOrderSearchStore } from '../customer-order-search.store'; +import { EnvironmentService } from '@core/environment'; @Component({ selector: 'page-customer-order-search-main', @@ -28,10 +29,14 @@ export class CustomerOrderSearchMainComponent implements OnInit, OnDestroy { private _subscriptions = new Subscription(); get processId() { - return +this._activatedRoute.snapshot.data.processId; + return +this._activatedRoute.parent.parent.snapshot.data.processId; } - processId$ = this._activatedRoute.data.pipe(map((data) => +data.processId)); + processId$ = this._activatedRoute.parent.parent.data.pipe(map((data) => +data.processId)); + + get isTablet() { + return this._environment.matchTablet(); + } @ViewChild(UiFilterInputGroupMainComponent, { static: false }) filterInputGroup: UiFilterInputGroupMainComponent; @@ -41,7 +46,8 @@ export class CustomerOrderSearchMainComponent implements OnInit, OnDestroy { private _cdr: ChangeDetectorRef, private _router: Router, private _activatedRoute: ActivatedRoute, - private _breadcrumb: BreadcrumbService + private _breadcrumb: BreadcrumbService, + private _environment: EnvironmentService ) {} ngOnInit() { @@ -106,14 +112,29 @@ export class CustomerOrderSearchMainComponent implements OnInit, OnDestroy { if (result.results.error) { } else { if (result.results.hits > 0) { + // if (this.isTablet) { if (result.results.hits === 1) { const orderItem = result.results.result[0]; - this._router.navigate([this.getDetailsPath(orderItem, this.processId)]); + this._router.navigate([this.getDetailsPath(orderItem, this.processId)], { + queryParams: this._goodsOutSearchStore.filter.getQueryParams(), + }); } else { this._router.navigate(['/kunde', this.processId, 'order', 'results'], { queryParams: this._goodsOutSearchStore.filter.getQueryParams(), }); } + // } else { + // const orderItem = result.results.result[0]; + // if (result.results.hits === 1) { + // this._router.navigate(this.getDetailsPathDesktop(orderItem, this.processId), { + // queryParams: this._goodsOutSearchStore.filter.getQueryParams(), + // }); + // } else { + // this._router.navigate(this.getDetailsPathDesktop(orderItem, this.processId), { + // queryParams: this._goodsOutSearchStore.filter.getQueryParams(), + // }); + // } + // } } else { this.message = 'keine Suchergebnisse'; } @@ -149,6 +170,34 @@ export class CustomerOrderSearchMainComponent implements OnInit, OnDestroy { : `/kunde/${processId}/order/details/order/${encodeURIComponent(item?.orderNumber)}/${item?.processingStatus}`; } + // getDetailsPathDesktop(item: OrderItemListItemDTO, processId: number) { + // return item?.compartmentCode + // ? [ + // '/kunde', + // processId, + // 'order', + // { + // outlets: { + // main: null, + // left: 'results', + // right: ['details', 'compartment', encodeURIComponent(item?.compartmentCode), item?.processingStatus], + // }, + // }, + // ] + // : [ + // '/kunde', + // processId, + // 'order', + // { + // outlets: { + // main: null, + // left: 'results', + // right: ['details', 'order', encodeURIComponent(item?.orderNumber), item?.processingStatus], + // }, + // }, + // ]; + // } + queryChangeDebounce = debounce(async () => { this.queryChanged$.next(true); await this.updateQueryParams(this.processId); diff --git a/apps/page/customer-order/src/lib/customer-order-search/search-results/customer-order-item.component.html b/apps/page/customer-order/src/lib/customer-order-search/search-results/customer-order-item.component.html new file mode 100644 index 000000000..5cdf4f843 --- /dev/null +++ b/apps/page/customer-order/src/lib/customer-order-search/search-results/customer-order-item.component.html @@ -0,0 +1,45 @@ + + {{ item?.product?.name }} + + diff --git a/apps/page/customer-order/src/lib/customer-order-search/search-results/customer-order-item.component.scss b/apps/page/customer-order/src/lib/customer-order-search/search-results/customer-order-item.component.scss new file mode 100644 index 000000000..85bd97b1a --- /dev/null +++ b/apps/page/customer-order/src/lib/customer-order-search/search-results/customer-order-item.component.scss @@ -0,0 +1,3 @@ +:host { + @apply flex flex-col w-full h-[212px] desktop:h-[181px] bg-white; +} diff --git a/apps/page/customer-order/src/lib/customer-order-search/search-results/customer-order-item.component.ts b/apps/page/customer-order/src/lib/customer-order-search/search-results/customer-order-item.component.ts new file mode 100644 index 000000000..f7829baae --- /dev/null +++ b/apps/page/customer-order/src/lib/customer-order-search/search-results/customer-order-item.component.ts @@ -0,0 +1,124 @@ +import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; +import { Router } from '@angular/router'; +import { ApplicationService } from '@core/application'; +import { EnvironmentService } from '@core/environment'; +import { ComponentStore } from '@ngrx/component-store'; +import { OrderItemListItemDTO } from '@swagger/oms'; +import { isEqual } from 'lodash'; +import { map } from 'rxjs/operators'; +import { CustomerOrderSearchStore } from '../customer-order-search.store'; + +export interface CustomerOrderItemComponentState { + item?: OrderItemListItemDTO; + selected: boolean; + selectable: boolean; +} + +@Component({ + selector: 'page-customer-order-item', + templateUrl: 'customer-order-item.component.html', + styleUrls: ['customer-order-item.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class CustomerOrderItemComponent extends ComponentStore implements OnInit { + @Input() + get item() { + return this.get((s) => s.item); + } + set item(item: OrderItemListItemDTO) { + if (!isEqual(this.item, item)) { + this.patchState({ item }); + } + } + + readonly item$ = this.select((s) => s.item); + + // selected$ = this._articleSearchService.selectedItemIds$.pipe(map((selectedItemIds) => selectedItemIds.includes(this.item?.id))); + + @Input() + selected: boolean; + + @Input() + get selectable() { + return this.get((s) => s.selectable); + } + set selectable(selectable: boolean) { + if (this.selectable !== selectable) { + this.patchState({ selectable }); + } + } + + @Output() + selectedChange = new EventEmitter(); + + get isTablet() { + return this._environment.matchTablet(); + } + + get queryParams() { + const compartmentCode = this.item?.compartmentCode; + const archive = !!this._customerOrderStore.filter?.getQueryParams()?.main_archive || false; + + if (compartmentCode) { + return { + buyerNumber: this.item?.buyerNumber, + archive, + }; + } else { + return { + archive, + }; + } + } + + get detailsLink() { + const orderNumber = this.item?.orderNumber; + const processingStatus = this.item?.processingStatus; + const compartmentCode = this.item?.compartmentCode; + // if (this.isTablet) { + if (compartmentCode) { + return [ + `/kunde/${this._applicationService.activatedProcessId}/order/details/compartment/${encodeURIComponent( + compartmentCode + )}/${processingStatus}`, + ]; + } else { + return [ + `/kunde/${this._applicationService.activatedProcessId}/order/details/order/${encodeURIComponent(orderNumber)}/${processingStatus}`, + ]; + } + // } else { + // if (compartmentCode) { + // return [ + // '/kunde', + // this._applicationService.activatedProcessId, + // 'order', + // { + // outlets: { + // main: null, + // left: 'results', + // right: ['details', 'compartment', encodeURIComponent(compartmentCode), processingStatus], + // }, + // }, + // ]; + // } else { + // return [ + // '/kunde', + // this._applicationService.activatedProcessId, + // 'order', + // { outlets: { main: null, left: 'results', right: ['details', 'order', encodeURIComponent(orderNumber), processingStatus] } }, + // ]; + // } + // } + } + + constructor( + private _environment: EnvironmentService, + private _customerOrderStore: CustomerOrderSearchStore, + private _applicationService: ApplicationService + ) { + super({ selected: false, selectable: false }); + } + + ngOnInit() {} +} diff --git a/apps/page/customer-order/src/lib/customer-order-search/search-results/customer-order-search-results.component.html b/apps/page/customer-order/src/lib/customer-order-search/search-results/customer-order-search-results.component.html index ce9d5863d..6d0edf16a 100644 --- a/apps/page/customer-order/src/lib/customer-order-search/search-results/customer-order-search-results.component.html +++ b/apps/page/customer-order/src/lib/customer-order-search/search-results/customer-order-search-results.component.html @@ -1,7 +1,28 @@ -
{{ hits$ | async }} Titel
+
+ + +
+ {{ hits ?? + 0 }} + Titel +
+
+ + + + + +
diff --git a/apps/page/customer-order/src/lib/customer-order-search/search-results/customer-order-search-results.component.scss b/apps/page/customer-order/src/lib/customer-order-search/search-results/customer-order-search-results.component.scss index 1e45ce1f5..d851c4141 100644 --- a/apps/page/customer-order/src/lib/customer-order-search/search-results/customer-order-search-results.component.scss +++ b/apps/page/customer-order/src/lib/customer-order-search/search-results/customer-order-search-results.component.scss @@ -1,13 +1,13 @@ +// :host { +// @apply box-border block h-[100vh] max-h-[calc(100vh-364px)] desktop:max-h-[calc(100vh-300px)]; +// } + :host { @apply block relative; } -.hits { - @apply text-active-customer text-right mb-3 font-semibold text-base; -} - .empty-message { - @apply bg-white text-center font-semibold text-inactive-customer py-10 rounded-card; + @apply bg-white text-center font-semibold text-inactive-customer py-10 rounded; } .divider { @@ -18,6 +18,10 @@ shared-goods-in-out-order-group-item { @apply cursor-pointer; } +// page-customer-order-item { +// @apply cursor-pointer; +// } + .actions { @apply fixed bottom-28 inline-grid grid-flow-col gap-7; left: 50%; @@ -40,6 +44,10 @@ shared-goods-in-out-order-group-item { } } +// ::ng-deep page-customer-order-search-results ui-scroll-container .scroll-container { +// max-height: calc(100vh - 25.5rem) !important; +// } + ::ng-deep .desktop page-goods-out-search-results ui-scroll-container { .scrollbar-gap::-webkit-scrollbar-track { margin-bottom: 7.25rem; diff --git a/apps/page/customer-order/src/lib/customer-order-search/search-results/customer-order-search-results.component.ts b/apps/page/customer-order/src/lib/customer-order-search/search-results/customer-order-search-results.component.ts index 843ffb545..dd429edae 100644 --- a/apps/page/customer-order/src/lib/customer-order-search/search-results/customer-order-search-results.component.ts +++ b/apps/page/customer-order/src/lib/customer-order-search/search-results/customer-order-search-results.component.ts @@ -1,7 +1,7 @@ import { Component, ChangeDetectionStrategy, OnInit, OnDestroy, ViewChild, TrackByFunction } from '@angular/core'; -import { debounceTime, first, map, shareReplay, takeUntil, withLatestFrom } from 'rxjs/operators'; +import { debounceTime, filter, first, map, shareReplay, takeUntil, withLatestFrom } from 'rxjs/operators'; import { KeyValueDTOOfStringAndString, OrderItemListItemDTO } from '@swagger/oms'; -import { ActivatedRoute, Router } from '@angular/router'; +import { ActivatedRoute, ChildrenOutletContexts, Params, Router } from '@angular/router'; import { CustomerOrderSearchStore } from '../customer-order-search.store'; import { BehaviorSubject, combineLatest, Observable, Subject, Subscription } from 'rxjs'; import { BreadcrumbService } from '@core/breadcrumb'; @@ -11,6 +11,8 @@ import { OrderItemsContext } from '@domain/oms'; import { UiErrorModalComponent, UiModalService } from '@ui/modal'; import { UiScrollContainerComponent } from '@ui/scroll-container'; import { UiFilter } from '@ui/filter'; +import { EnvironmentService } from '@core/environment'; +import { isEqual } from 'lodash'; export interface CustomerOrderSearchResultsState { selectedOrderItemSubsetIds: number[]; @@ -80,13 +82,51 @@ export class CustomerOrderSearchResultsComponent extends ComponentStore !!filter), + first() + ); + + hasFilter$ = this.filter$.pipe( + withLatestFrom(this.initialFilter$), + map(([filter, initialFilter]) => !isEqual(filter?.getQueryParams(), initialFilter?.getQueryParams())) + ); + + get isTablet() { + return this._environment.matchTablet(); + } + + get rightOutletParams(): Params { + return this._activatedRoute?.parent?.children?.find((childRoute) => childRoute?.outlet === 'right')?.snapshot?.params; + } + + get filterRoute() { + const processId = this._activatedRoute?.parent?.snapshot?.data?.processId; + // if (!this.isTablet) { + // const orderNumber = this.rightOutletParams?.orderNumber; + // const compartmentCode = this.rightOutletParams?.compartmentCode; + // const processingStatus = this.rightOutletParams?.processingStatus; + // return [ + // '/kunde', + // processId, + // 'order', + // { outlets: { main: null, left: 'results', right: ['filter', orderNumber ?? compartmentCode, processingStatus] } }, + // ]; + // } else { + return ['/kunde', processId, 'order', 'filter']; + // } + } + constructor( private _goodsOutSearchStore: CustomerOrderSearchStore, private _router: Router, private _activatedRoute: ActivatedRoute, private _breadcrumb: BreadcrumbService, private _commandService: CommandService, - private _modal: UiModalService + private _modal: UiModalService, + private _environment: EnvironmentService ) { super({ selectedOrderItemSubsetIds: [], @@ -263,6 +303,7 @@ export class CustomerOrderSearchResultsComponent extends ComponentStore + + diff --git a/apps/page/customer-order/src/lib/customer-order.component.ts b/apps/page/customer-order/src/lib/customer-order.component.ts index 87c419725..025136783 100644 --- a/apps/page/customer-order/src/lib/customer-order.component.ts +++ b/apps/page/customer-order/src/lib/customer-order.component.ts @@ -3,6 +3,7 @@ import { ActivatedRoute } from '@angular/router'; import { ApplicationService } from '@core/application'; import { AuthService } from '@core/auth'; import { BreadcrumbService } from '@core/breadcrumb'; +import { EnvironmentService } from '@core/environment'; import { BranchDTO } from '@swagger/checkout'; import { UiErrorModalComponent, UiModalService } from '@ui/modal'; import { Observable } from 'rxjs'; @@ -19,6 +20,10 @@ export class CustomerOrderComponent implements OnInit { selectedBranch$: Observable; + get isTablet() { + return this._environmentService.matchTablet(); + } + onCustomerOrderDetailsPage$: Observable; constructor( @@ -26,6 +31,7 @@ export class CustomerOrderComponent implements OnInit { private _activatedRoute: ActivatedRoute, private _uiModal: UiModalService, private _breadcrumb: BreadcrumbService, + private _environmentService: EnvironmentService, public auth: AuthService ) {} diff --git a/apps/page/customer/src/lib/create-customer/create-customer.scss b/apps/page/customer/src/lib/create-customer/create-customer.scss index c5cf5ecea..50bd2a042 100644 --- a/apps/page/customer/src/lib/create-customer/create-customer.scss +++ b/apps/page/customer/src/lib/create-customer/create-customer.scss @@ -1,9 +1,9 @@ :host { - @apply block bg-white rounded-card px-20 py-10; + @apply block bg-white rounded px-20 py-10; } h1.title { - @apply text-2xl font-bold text-center mb-6; + @apply text-h3 font-bold text-center mb-6; } p.description { @@ -19,7 +19,7 @@ form { } button.cta-submit { - @apply fixed left-1/2 bottom-28 text-center bg-brand text-cta-l text-white font-bold px-7 py-3 rounded-full transform -translate-x-1/2 transition-all duration-200 ease-in-out; + @apply fixed left-1/2 bottom-28 text-center bg-brand text-p1 text-white font-bold px-7 py-3 rounded-full transform -translate-x-1/2 transition-all duration-200 ease-in-out; &:disabled { @apply bg-active-branch cursor-not-allowed; diff --git a/apps/page/customer/src/lib/customer-details/address/address.component.scss b/apps/page/customer/src/lib/customer-details/address/address.component.scss index 7a181f318..3077971e0 100644 --- a/apps/page/customer/src/lib/customer-details/address/address.component.scss +++ b/apps/page/customer/src/lib/customer-details/address/address.component.scss @@ -3,7 +3,7 @@ } .card { - @apply bg-white rounded-card p-card; + @apply bg-white rounded p-card; } form { @@ -32,15 +32,15 @@ h1 { } .default-address { - @apply flex-col justify-around text-cta-l mt-8; + @apply flex-col justify-around text-p1 mt-8; input { - @apply text-cta-l; + @apply text-p1; } } .create-customer-submit { - @apply border-none outline-none bg-brand text-white font-bold text-cta-l px-px-25 py-px-15 rounded-full mt-8 my-4; + @apply border-none outline-none bg-brand text-white font-bold text-p1 px-px-25 py-px-15 rounded-full mt-8 my-4; &:disabled { @apply bg-inactive-branch; diff --git a/apps/page/customer/src/lib/customer-details/customer-card/customer-card.component.scss b/apps/page/customer/src/lib/customer-details/customer-card/customer-card.component.scss index d723a4717..31832f078 100644 --- a/apps/page/customer/src/lib/customer-details/customer-card/customer-card.component.scss +++ b/apps/page/customer/src/lib/customer-details/customer-card/customer-card.component.scss @@ -4,7 +4,7 @@ } .title { - @apply text-page-heading font-bold; + @apply text-h2 font-bold; } .card-customer-orders, @@ -35,7 +35,7 @@ a { } .info { - @apply text-2xl mb-px-35; + @apply text-h3 mb-px-35; padding-top: 70px; } @@ -53,7 +53,7 @@ a { } .cancel-message { - @apply text-card-sub bg-transparent text-brand border-none font-bold pr-0 no-underline; + @apply text-xl bg-transparent text-brand border-none font-bold pr-0 no-underline; } .customer-card, diff --git a/apps/page/customer/src/lib/customer-details/customer-data-edit/customer-data-edit.component.scss b/apps/page/customer/src/lib/customer-details/customer-data-edit/customer-data-edit.component.scss index b948301fd..efbb2c4d9 100644 --- a/apps/page/customer/src/lib/customer-details/customer-data-edit/customer-data-edit.component.scss +++ b/apps/page/customer/src/lib/customer-details/customer-data-edit/customer-data-edit.component.scss @@ -1,12 +1,12 @@ :host { - @apply flex flex-col box-border shadow-card rounded-card; + @apply flex flex-col box-border shadow-card rounded; } .header { @apply bg-white; h1 { - @apply text-center text-card-heading my-16 font-bold; + @apply text-center text-h3 my-16 font-bold; } } @@ -29,7 +29,7 @@ form { @apply text-center my-8; button { - @apply rounded-full outline-none p-4 text-cta-l border-brand border-solid border-2 px-px-25 py-px-15 mx-4 font-bold; + @apply rounded-full outline-none p-4 text-p1 border-brand border-solid border-2 px-px-25 py-px-15 mx-4 font-bold; &.btn-cancel { @apply text-brand bg-white; diff --git a/apps/page/customer/src/lib/customer-details/customer-data/customer-data.component.scss b/apps/page/customer/src/lib/customer-details/customer-data/customer-data.component.scss index 3c96ca818..ba1b9d6b0 100644 --- a/apps/page/customer/src/lib/customer-details/customer-data/customer-data.component.scss +++ b/apps/page/customer/src/lib/customer-details/customer-data/customer-data.component.scss @@ -3,7 +3,7 @@ } .field { - @apply grid justify-items-start grid-flow-col flex-row gap-8 text-regular p-4 bg-white; + @apply grid justify-items-start grid-flow-col flex-row gap-8 text-p2 p-4 bg-white; grid-template-columns: max-content; .name { } diff --git a/apps/page/customer/src/lib/customer-details/customer-details.component.scss b/apps/page/customer/src/lib/customer-details/customer-details.component.scss index c35be1b80..2ddcbb9b1 100644 --- a/apps/page/customer/src/lib/customer-details/customer-details.component.scss +++ b/apps/page/customer/src/lib/customer-details/customer-details.component.scss @@ -4,17 +4,17 @@ } .title { - @apply text-page-heading font-bold; + @apply text-h2 font-bold; } .info { - @apply text-2xl mt-1 mb-px-40; + @apply text-h3 mt-1 mb-px-40; } .card-customer-orders, .card-customer-card, .card-customer-details { - @apply bg-white rounded-t-card p-4 text-center; + @apply bg-white rounded-t p-4 text-center; box-shadow: 0 -2px 24px 0 #dce2e9; } @@ -45,7 +45,7 @@ ui-radio-button { } .tags { - @apply grid grid-flow-col flex-row gap-4 justify-center items-center text-ucla-blue font-bold text-regular mb-px-40; + @apply grid grid-flow-col flex-row gap-4 justify-center items-center text-ucla-blue font-bold text-p2 mb-px-40; } .tag { @@ -53,7 +53,7 @@ ui-radio-button { } .details { - @apply grid flex-col text-regular gap-4; + @apply grid flex-col text-p2 gap-4; .detail { @apply grid grid-flow-col justify-items-start flex-row gap-8; @@ -71,7 +71,7 @@ ui-radio-button { } .edit-details { - @apply justify-self-end text-card-sub bg-transparent text-brand border-none font-bold rounded-full pr-0 no-underline; + @apply justify-self-end text-xl bg-transparent text-brand border-none font-bold rounded-full pr-0 no-underline; } } } @@ -84,20 +84,20 @@ ui-inline-input { @apply bg-white flex flex-row justify-between p-4 items-center pt-px-40 pb-px-20; h3 { - @apply m-0 text-card-sub font-bold; + @apply m-0 text-xl font-bold; } } .button-add-address, .button-edit-address { - @apply p-0 text-card-sub bg-transparent text-brand border-none font-bold no-underline; + @apply p-0 text-xl bg-transparent text-brand border-none font-bold no-underline; } .card-customer-footer { - @apply p-4 py-px-25 sticky bottom-0 text-center rounded-b-card mt-px-2; + @apply p-4 py-px-25 sticky bottom-0 text-center rounded-b mt-px-2; button.cta-to-cart { - @apply px-px-20 py-px-15 text-card-sub bg-brand text-white border-none font-bold rounded-full; + @apply px-px-20 py-px-15 text-xl bg-brand text-white border-none font-bold rounded-full; &:disabled { @apply bg-inactive-branch; @@ -110,9 +110,9 @@ ui-inline-input { } .button-customer-history { - @apply text-card-sub bg-transparent text-brand border-none font-bold rounded-full absolute right-0 top-0 py-px-5; + @apply text-xl bg-transparent text-brand border-none font-bold rounded-full absolute right-0 top-0 py-px-5; } input[type='radio'] { - @apply text-cta-l; + @apply text-p1; } diff --git a/apps/page/customer/src/lib/customer-details/customer-order-details/customer-order-details.component.scss b/apps/page/customer/src/lib/customer-details/customer-order-details/customer-order-details.component.scss index dc434f017..7e4a066f6 100644 --- a/apps/page/customer/src/lib/customer-details/customer-order-details/customer-order-details.component.scss +++ b/apps/page/customer/src/lib/customer-details/customer-order-details/customer-order-details.component.scss @@ -43,7 +43,7 @@ } .title { - @apply text-page-heading font-bold justify-between mb-2; + @apply text-h2 font-bold justify-between mb-2; } .label { @@ -62,7 +62,7 @@ @apply mx-10; h2 { - @apply text-card-sub; + @apply text-xl; } } diff --git a/apps/page/customer/src/lib/customer-details/customer-order-details/order-item-card/customer-order-item-card.component.scss b/apps/page/customer/src/lib/customer-details/customer-order-details/order-item-card/customer-order-item-card.component.scss index 707cf9d66..5fdd45a48 100644 --- a/apps/page/customer/src/lib/customer-details/customer-order-details/order-item-card/customer-order-item-card.component.scss +++ b/apps/page/customer/src/lib/customer-details/customer-order-details/order-item-card/customer-order-item-card.component.scss @@ -42,7 +42,7 @@ } .arrow-button { - @apply border-none bg-transparent outline-none text-regular text-ucla-blue font-bold; + @apply border-none bg-transparent outline-none text-p2 text-ucla-blue font-bold; ui-icon { @apply inline mx-1 align-middle; @@ -65,7 +65,7 @@ } .cta-history { - @apply text-base font-bold text-brand outline-none border-none bg-transparent mr-1; + @apply text-p2 font-bold text-brand outline-none border-none bg-transparent mr-1; } .item-format { diff --git a/apps/page/customer/src/lib/customer-details/customer-orders/customer-orders.component.scss b/apps/page/customer/src/lib/customer-details/customer-orders/customer-orders.component.scss index 81ed524a7..742e13c20 100644 --- a/apps/page/customer/src/lib/customer-details/customer-orders/customer-orders.component.scss +++ b/apps/page/customer/src/lib/customer-details/customer-orders/customer-orders.component.scss @@ -3,7 +3,7 @@ } .title { - @apply text-page-heading font-bold; + @apply text-h2 font-bold; } .card-customer-card, @@ -22,7 +22,7 @@ } .header { - @apply bg-white rounded-card p-card; + @apply bg-white rounded p-card; box-shadow: 0px 19px 25px -10px white; height: 180px; } @@ -32,15 +32,15 @@ a { } h1 { - @apply text-center text-page-heading; + @apply text-center text-h2; } .desc { - @apply text-center text-card-heading; + @apply text-center text-h3; } .desc-empty { - @apply text-center text-regular; + @apply text-center text-p2; } .orders { @@ -77,7 +77,7 @@ h1 { } .details { - @apply text-brand text-cta-l font-bold no-underline; + @apply text-brand text-p1 font-bold no-underline; width: 8%; text-align: end; } @@ -103,7 +103,7 @@ h1 { } .spin-text { - @apply fixed text-regular; + @apply fixed text-p2; top: 66%; left: 42%; } diff --git a/apps/page/customer/src/lib/customer-details/shared/card-template/card-template.component.scss b/apps/page/customer/src/lib/customer-details/shared/card-template/card-template.component.scss index 452c5c863..e69a14428 100644 --- a/apps/page/customer/src/lib/customer-details/shared/card-template/card-template.component.scss +++ b/apps/page/customer/src/lib/customer-details/shared/card-template/card-template.component.scss @@ -18,7 +18,7 @@ ui-icon { } .headline { - @apply text-wild-blue-yonder mt-px-15 text-sm font-bold; + @apply text-wild-blue-yonder mt-px-15 text-p3 font-bold; } .card-number, @@ -32,7 +32,7 @@ ui-icon { } .button { - @apply border-none outline-none bg-brand text-white font-bold text-cta-l px-px-25 py-px-15 rounded-full mt-px-15; + @apply border-none outline-none bg-brand text-white font-bold text-p1 px-px-25 py-px-15 rounded-full mt-px-15; } .barcode-field { diff --git a/apps/page/customer/src/lib/customer-search/customer-search.component.scss b/apps/page/customer/src/lib/customer-search/customer-search.component.scss index fea19223d..e1442d2d5 100644 --- a/apps/page/customer/src/lib/customer-search/customer-search.component.scss +++ b/apps/page/customer/src/lib/customer-search/customer-search.component.scss @@ -3,7 +3,7 @@ } .filter { - @apply absolute font-sans flex items-center font-bold bg-wild-blue-yonder border-0 text-regular -top-12 right-0 py-px-8 px-px-15 rounded-filter justify-center z-sticky; + @apply absolute font-sans flex items-center font-bold bg-wild-blue-yonder border-0 text-p2 -top-12 right-0 py-px-8 px-px-15 rounded-filter justify-center z-sticky; min-width: 106px; diff --git a/apps/page/customer/src/lib/customer-search/search-filter/search-filter.component.scss b/apps/page/customer/src/lib/customer-search/search-filter/search-filter.component.scss index a80fa5c90..691541eb3 100644 --- a/apps/page/customer/src/lib/customer-search/search-filter/search-filter.component.scss +++ b/apps/page/customer/src/lib/customer-search/search-filter/search-filter.component.scss @@ -17,7 +17,7 @@ button.apply-filter, .cta-reset-filter { - @apply border-none bg-brand text-white rounded-full py-4 px-cta-x-l text-cta-l font-bold; + @apply border-none bg-brand text-white rounded-full py-4 px-cta-x-l text-p1 font-bold; min-width: 201px; } diff --git a/apps/page/customer/src/lib/customer-search/search-main/search-main.component.scss b/apps/page/customer/src/lib/customer-search/search-main/search-main.component.scss index fd7365ffb..b22452a4b 100644 --- a/apps/page/customer/src/lib/customer-search/search-main/search-main.component.scss +++ b/apps/page/customer/src/lib/customer-search/search-main/search-main.component.scss @@ -3,11 +3,11 @@ } .title { - @apply text-page-heading font-bold; + @apply text-h2 font-bold; } .info { - @apply text-2xl mt-5 mb-px-50; + @apply text-h3 mt-5 mb-px-50; } .card-create-customer, diff --git a/apps/page/customer/src/lib/customer-search/search-results/customer-result-card/customer-result-card.component.scss b/apps/page/customer/src/lib/customer-search/search-results/customer-result-card/customer-result-card.component.scss index 4e03a4f57..4926638a4 100644 --- a/apps/page/customer/src/lib/customer-search/search-results/customer-result-card/customer-result-card.component.scss +++ b/apps/page/customer/src/lib/customer-search/search-results/customer-result-card/customer-result-card.component.scss @@ -1,12 +1,12 @@ :host { - @apply box-border flex flex-col p-card bg-white text-black rounded-card shadow-card text-regular; + @apply box-border flex flex-col p-card bg-white text-black rounded shadow-card text-p2; } .header { @apply flex justify-between items-center; .heading { - @apply text-card-heading font-bold p-0 m-0; + @apply text-h3 font-bold p-0 m-0; } .date { diff --git a/apps/page/customer/src/lib/customer-search/search-results/search-results.component.scss b/apps/page/customer/src/lib/customer-search/search-results/search-results.component.scss index a64abd761..3cb6d4e66 100644 --- a/apps/page/customer/src/lib/customer-search/search-results/search-results.component.scss +++ b/apps/page/customer/src/lib/customer-search/search-results/search-results.component.scss @@ -3,7 +3,7 @@ } .hits { - @apply text-right bg-transparent text-regular font-semibold text-inactive-customer my-3; + @apply text-right bg-transparent text-p2 font-semibold text-inactive-customer my-3; } a { @@ -11,7 +11,7 @@ a { } .scroll-container-footer { - @apply text-sm mx-auto mt-8 w-1/3 text-center text-ucla-blue font-semibold; + @apply text-p3 mx-auto mt-8 w-1/3 text-center text-ucla-blue font-semibold; min-height: 200px; a { diff --git a/apps/page/customer/src/lib/modals/address-selection-modal/address-selection-modal.component.scss b/apps/page/customer/src/lib/modals/address-selection-modal/address-selection-modal.component.scss index 5014f971b..0083d836a 100644 --- a/apps/page/customer/src/lib/modals/address-selection-modal/address-selection-modal.component.scss +++ b/apps/page/customer/src/lib/modals/address-selection-modal/address-selection-modal.component.scss @@ -4,15 +4,15 @@ h2, p { - @apply text-center text-regular; + @apply text-center text-p2; } h2 { - @apply font-bold text-card-sub; + @apply font-bold text-xl; } ul { - @apply list-none text-regular -mx-4 p-0 mt-px-35; + @apply list-none text-p2 -mx-4 p-0 mt-px-35; li { @apply flex flex-row items-center justify-between border-glitter border-t-4 border-b-0 border-solid border-r-0 border-l-0 py-px-15 px-px-25; @@ -22,7 +22,7 @@ ul { } button { - @apply border-none outline-none bg-transparent text-brand text-cta-l text-right font-bold; + @apply border-none outline-none bg-transparent text-brand text-p1 text-right font-bold; } } } @@ -32,5 +32,5 @@ ul { } .select-btn { - @apply border-none outline-none bg-brand text-white font-bold text-cta-l px-px-25 py-px-15 rounded-full my-8; + @apply border-none outline-none bg-brand text-white font-bold text-p1 px-px-25 py-px-15 rounded-full my-8; } diff --git a/apps/page/customer/src/lib/modals/cant-add-customer-to-cart-modal/cant-add-customer-to-cart.component.scss b/apps/page/customer/src/lib/modals/cant-add-customer-to-cart-modal/cant-add-customer-to-cart.component.scss index ff804ea31..51f49abb7 100644 --- a/apps/page/customer/src/lib/modals/cant-add-customer-to-cart-modal/cant-add-customer-to-cart.component.scss +++ b/apps/page/customer/src/lib/modals/cant-add-customer-to-cart-modal/cant-add-customer-to-cart.component.scss @@ -8,11 +8,11 @@ h2 { h2, p { - @apply text-center text-card-sub font-bold; + @apply text-center text-xl font-bold; } h2 { - @apply font-bold text-card-sub; + @apply font-bold text-xl; } p { @@ -24,9 +24,9 @@ p { } .search-btn { - @apply border-4 border-solid border-brand outline-none bg-white text-brand font-bold text-cta-l px-px-25 py-px-15 rounded-full no-underline; + @apply border-4 border-solid border-brand outline-none bg-white text-brand font-bold text-p1 px-px-25 py-px-15 rounded-full no-underline; } .create-btn { - @apply border-none outline-none bg-brand text-white font-bold text-cta-l px-px-25 py-px-15 rounded-full no-underline; + @apply border-none outline-none bg-brand text-white font-bold text-p1 px-px-25 py-px-15 rounded-full no-underline; } diff --git a/apps/page/customer/src/lib/modals/cant-select-guest/cant-select-guest-modal.component.scss b/apps/page/customer/src/lib/modals/cant-select-guest/cant-select-guest-modal.component.scss index a0c53a4c3..a83542c7e 100644 --- a/apps/page/customer/src/lib/modals/cant-select-guest/cant-select-guest-modal.component.scss +++ b/apps/page/customer/src/lib/modals/cant-select-guest/cant-select-guest-modal.component.scss @@ -16,11 +16,11 @@ h2 { h2, p { - @apply text-center text-card-sub font-bold; + @apply text-center text-xl font-bold; } h2 { - @apply font-bold text-card-sub; + @apply font-bold text-xl; } p { @@ -32,9 +32,9 @@ p { } .search-btn { - @apply border-4 border-solid border-brand outline-none bg-white text-brand font-bold text-cta-l px-px-25 py-px-15 rounded-full no-underline; + @apply border-4 border-solid border-brand outline-none bg-white text-brand font-bold text-p1 px-px-25 py-px-15 rounded-full no-underline; } .create-btn { - @apply border-none outline-none bg-brand text-white font-bold text-cta-l px-px-25 py-px-15 rounded-full no-underline; + @apply border-none outline-none bg-brand text-white font-bold text-p1 px-px-25 py-px-15 rounded-full no-underline; } diff --git a/apps/page/customer/src/lib/modals/webshop-customer-already-exists/webshop-customer-already-exists-modal.component.html b/apps/page/customer/src/lib/modals/webshop-customer-already-exists/webshop-customer-already-exists-modal.component.html index b98ec463f..580163b10 100644 --- a/apps/page/customer/src/lib/modals/webshop-customer-already-exists/webshop-customer-already-exists-modal.component.html +++ b/apps/page/customer/src/lib/modals/webshop-customer-already-exists/webshop-customer-already-exists-modal.component.html @@ -1,7 +1,7 @@
{{ customer?.communicationDetails?.email }}
-
+
{{ customer?.organisation?.name }} {{ customer?.lastName }} {{ customer?.firstName }} diff --git a/apps/page/customer/src/lib/shared/customer-type-selector/customer-type-selector.component.scss b/apps/page/customer/src/lib/shared/customer-type-selector/customer-type-selector.component.scss index 7d9b1ba8c..782cc7918 100644 --- a/apps/page/customer/src/lib/shared/customer-type-selector/customer-type-selector.component.scss +++ b/apps/page/customer/src/lib/shared/customer-type-selector/customer-type-selector.component.scss @@ -1,5 +1,5 @@ :host { - @apply flex flex-row flex-wrap text-card-sub justify-center; + @apply flex flex-row flex-wrap text-xl justify-center; } ui-checkbox { diff --git a/apps/page/dashboard/src/lib/info-card/info-card.component.html b/apps/page/dashboard/src/lib/info-card/info-card.component.html index c5c364fc6..b015c4a21 100644 --- a/apps/page/dashboard/src/lib/info-card/info-card.component.html +++ b/apps/page/dashboard/src/lib/info-card/info-card.component.html @@ -1,11 +1,11 @@
{{ feed?.label }}
-
{{ feed?.headline }}
+
{{ feed?.headline }}
-
{{ item?.heading }}
+
{{ item?.heading }}
diff --git a/apps/page/dashboard/src/lib/kpi-card/kpi-card.component.scss b/apps/page/dashboard/src/lib/kpi-card/kpi-card.component.scss index 056171df2..bd8a56622 100644 --- a/apps/page/dashboard/src/lib/kpi-card/kpi-card.component.scss +++ b/apps/page/dashboard/src/lib/kpi-card/kpi-card.component.scss @@ -20,7 +20,7 @@ } .target-numbers { - @apply text-sm; + @apply text-p3; color: var(--page-dashboard-card-title-color); } diff --git a/apps/page/dashboard/src/lib/products-card/product-card.component.html b/apps/page/dashboard/src/lib/products-card/product-card.component.html index 8a8637fd2..d216582e5 100644 --- a/apps/page/dashboard/src/lib/products-card/product-card.component.html +++ b/apps/page/dashboard/src/lib/products-card/product-card.component.html @@ -1,6 +1,6 @@
{{ feed?.label }}
-
{{ feed?.headline }}
+
{{ feed?.headline }}
diff --git a/apps/page/goods-in/src/lib/goods-in-cleanup-list/goods-in-cleanup-list.component.scss b/apps/page/goods-in/src/lib/goods-in-cleanup-list/goods-in-cleanup-list.component.scss index 9386bf45e..0985781c9 100644 --- a/apps/page/goods-in/src/lib/goods-in-cleanup-list/goods-in-cleanup-list.component.scss +++ b/apps/page/goods-in/src/lib/goods-in-cleanup-list/goods-in-cleanup-list.component.scss @@ -10,21 +10,21 @@ margin-bottom: -16px; .cleanup-title { - @apply text-2xl font-bold m-0; + @apply text-h3 font-bold m-0; } .cleanup-paragraph { - @apply text-2xl m-0 mt-1; + @apply text-h3 m-0 mt-1; } } .hits { - @apply text-active-branch mb-3 font-semibold text-base; + @apply text-active-branch mb-3 font-semibold text-p2; } } .empty-message { - @apply bg-white text-center font-semibold text-inactive-branch py-10 rounded-card; + @apply bg-white text-center font-semibold text-inactive-branch py-10 rounded; } .divider { diff --git a/apps/page/goods-in/src/lib/goods-in-list/goods-in-list-item/goods-in-list-item.component.scss b/apps/page/goods-in/src/lib/goods-in-list/goods-in-list-item/goods-in-list-item.component.scss index 62635acb7..e417943fb 100644 --- a/apps/page/goods-in/src/lib/goods-in-list/goods-in-list-item/goods-in-list-item.component.scss +++ b/apps/page/goods-in/src/lib/goods-in-list/goods-in-list-item/goods-in-list-item.component.scss @@ -7,7 +7,7 @@ min-height: 60px; .instruction { - @apply text-base text-warning text-right; + @apply text-p2 text-warning text-right; } .info { @@ -22,7 +22,7 @@ } .buyer-number { - @apply text-base; + @apply text-p2; } } @@ -157,11 +157,11 @@ @apply absolute flex flex-col w-28 right-5; label { - @apply font-semibold text-small mb-1; + @apply font-semibold text-p3 mb-1; } .ssc-input { - @apply border-r-0 border-l-0 border-t-0 border-disabled-branch outline-none font-semibold text-cta-l; + @apply border-r-0 border-l-0 border-t-0 border-disabled-branch outline-none font-semibold text-p1; border-bottom-width: 2px; } diff --git a/apps/page/goods-in/src/lib/goods-in-list/goods-in-list.component.scss b/apps/page/goods-in/src/lib/goods-in-list/goods-in-list.component.scss index 059846f5a..376bc9ee9 100644 --- a/apps/page/goods-in/src/lib/goods-in-list/goods-in-list.component.scss +++ b/apps/page/goods-in/src/lib/goods-in-list/goods-in-list.component.scss @@ -7,11 +7,11 @@ margin-bottom: -16px; .goods-in-list-title { - @apply text-2xl font-bold m-0; + @apply text-h3 font-bold m-0; } .goods-in-list-paragraph { - @apply text-2xl m-0 mb-6 mt-1; + @apply text-h3 m-0 mb-6 mt-1; } } @@ -46,7 +46,7 @@ ui-order-by-filter { } .empty-message { - @apply bg-white text-center font-semibold text-inactive-branch py-10 rounded-card; + @apply bg-white text-center font-semibold text-inactive-branch py-10 rounded; } hr { diff --git a/apps/page/goods-in/src/lib/goods-in-remission-preview/goods-in-remission-preview.component.scss b/apps/page/goods-in/src/lib/goods-in-remission-preview/goods-in-remission-preview.component.scss index b96f1f335..fb4988725 100644 --- a/apps/page/goods-in/src/lib/goods-in-remission-preview/goods-in-remission-preview.component.scss +++ b/apps/page/goods-in/src/lib/goods-in-remission-preview/goods-in-remission-preview.component.scss @@ -10,21 +10,21 @@ margin-bottom: -16px; .preview-title { - @apply text-2xl font-bold m-0; + @apply text-h3 font-bold m-0; } .preview-paragraph { - @apply text-2xl m-0 mt-1; + @apply text-h3 m-0 mt-1; } } .hits { - @apply text-active-branch mb-3 font-semibold text-base; + @apply text-active-branch mb-3 font-semibold text-p2; } } .empty-message { - @apply bg-white text-center font-semibold text-inactive-branch py-10 rounded-card; + @apply bg-white text-center font-semibold text-inactive-branch py-10 rounded; } .divider { diff --git a/apps/page/goods-in/src/lib/goods-in-reservation/goods-in-reservation.component.scss b/apps/page/goods-in/src/lib/goods-in-reservation/goods-in-reservation.component.scss index 88b8e82e3..3774343db 100644 --- a/apps/page/goods-in/src/lib/goods-in-reservation/goods-in-reservation.component.scss +++ b/apps/page/goods-in/src/lib/goods-in-reservation/goods-in-reservation.component.scss @@ -10,21 +10,21 @@ margin-bottom: -16px; .reservations-title { - @apply text-2xl font-bold m-0; + @apply text-h3 font-bold m-0; } .reservations-paragraph { - @apply text-2xl m-0 mt-1; + @apply text-h3 m-0 mt-1; } } .hits { - @apply text-active-branch mb-3 font-semibold text-base; + @apply text-active-branch mb-3 font-semibold text-p2; } } .empty-message { - @apply bg-white text-center font-semibold text-inactive-branch py-10 rounded-card; + @apply bg-white text-center font-semibold text-inactive-branch py-10 rounded; } .divider { diff --git a/apps/page/goods-in/src/lib/goods-in-search/goods-in-search.component.scss b/apps/page/goods-in/src/lib/goods-in-search/goods-in-search.component.scss index cb8c3496e..7e4e651ca 100644 --- a/apps/page/goods-in/src/lib/goods-in-search/goods-in-search.component.scss +++ b/apps/page/goods-in/src/lib/goods-in-search/goods-in-search.component.scss @@ -3,7 +3,7 @@ } .filter { - @apply absolute font-sans flex items-center font-bold bg-gray-400 border-0 text-regular -top-12 right-0 py-px-8 px-px-15 rounded-filter justify-center z-sticky; + @apply absolute font-sans flex items-center font-bold bg-gray-400 border-0 text-p2 -top-12 right-0 py-px-8 px-px-15 rounded-filter justify-center z-sticky; min-width: 106px; .label { diff --git a/apps/page/goods-in/src/lib/goods-in-search/search-main/goods-in-search-main.component.scss b/apps/page/goods-in/src/lib/goods-in-search/search-main/goods-in-search-main.component.scss index a1b92a410..f13533670 100644 --- a/apps/page/goods-in/src/lib/goods-in-search/search-main/goods-in-search-main.component.scss +++ b/apps/page/goods-in/src/lib/goods-in-search/search-main/goods-in-search-main.component.scss @@ -6,7 +6,7 @@ .goods-in-list-reservation, .goods-in-list-cleanup, .goods-in-list-remission-preview { - @apply text-center text-xl text-inactive-branch block bg-white rounded-t-card font-bold no-underline py-4; + @apply text-center text-xl text-inactive-branch block bg-white rounded-t font-bold no-underline py-4; } .goods-in-list-reservation, @@ -16,15 +16,15 @@ } .search-main { - @apply bg-white text-center rounded-t-card py-5 shadow-card; + @apply bg-white text-center rounded-t py-5 shadow-card; height: calc(100vh - 510px); .search-main-title { - @apply text-2xl font-bold; + @apply text-h3 font-bold; } .search-main-paragraph { - @apply text-2xl mb-12 mt-6; + @apply text-h3 mb-12 mt-6; } ui-filter-input-group-main { diff --git a/apps/page/goods-in/src/lib/goods-in-search/search-results/goods-in-search-results.component.scss b/apps/page/goods-in/src/lib/goods-in-search/search-results/goods-in-search-results.component.scss index a3f04ae20..15f2d25a2 100644 --- a/apps/page/goods-in/src/lib/goods-in-search/search-results/goods-in-search-results.component.scss +++ b/apps/page/goods-in/src/lib/goods-in-search/search-results/goods-in-search-results.component.scss @@ -7,20 +7,20 @@ margin-bottom: -16px; .goods-in-search-results-title { - @apply text-2xl font-bold m-0; + @apply text-h3 font-bold m-0; } .goods-in-search-results-paragraph { - @apply text-2xl m-0 mt-1; + @apply text-h3 m-0 mt-1; } } .hits { - @apply text-active-branch text-right mb-3 font-semibold text-base; + @apply text-active-branch text-right mb-3 font-semibold text-p2; } .empty-message { - @apply bg-white text-center font-semibold text-inactive-branch py-10 rounded-card; + @apply bg-white text-center font-semibold text-inactive-branch py-10 rounded; } .divider { diff --git a/apps/page/goods-out/src/lib/goods-out-search/goods-out-search.component.scss b/apps/page/goods-out/src/lib/goods-out-search/goods-out-search.component.scss index 6a1428634..6bf059121 100644 --- a/apps/page/goods-out/src/lib/goods-out-search/goods-out-search.component.scss +++ b/apps/page/goods-out/src/lib/goods-out-search/goods-out-search.component.scss @@ -3,7 +3,7 @@ } .filter { - @apply absolute font-sans flex items-center font-bold bg-wild-blue-yonder border-0 text-regular -top-12 right-0 py-px-8 px-px-15 rounded-filter justify-center z-sticky; + @apply absolute font-sans flex items-center font-bold bg-wild-blue-yonder border-0 text-p2 -top-12 right-0 py-px-8 px-px-15 rounded-filter justify-center z-sticky; min-width: 106px; .label { diff --git a/apps/page/goods-out/src/lib/goods-out-search/search-main/goods-out-search-main.component.scss b/apps/page/goods-out/src/lib/goods-out-search/search-main/goods-out-search-main.component.scss index df66b06ab..35ad3c406 100644 --- a/apps/page/goods-out/src/lib/goods-out-search/search-main/goods-out-search-main.component.scss +++ b/apps/page/goods-out/src/lib/goods-out-search/search-main/goods-out-search-main.component.scss @@ -3,19 +3,19 @@ } .goods-out-list-navigation { - @apply text-center text-2xl text-active-branch block bg-white rounded-t-card font-bold no-underline py-5; + @apply text-center text-h3 text-active-branch block bg-white rounded-t font-bold no-underline py-5; } .search-main { - @apply bg-white text-center rounded-t-card py-5 shadow-card; + @apply bg-white text-center rounded-t py-5 shadow-card; height: calc(100vh - 380px); .search-main-title { - @apply text-2xl font-bold; + @apply text-h3 font-bold; } .search-main-paragraph { - @apply text-2xl mb-12 mt-6; + @apply text-h3 mb-12 mt-6; } ui-filter-input-group-main { diff --git a/apps/page/goods-out/src/lib/goods-out-search/search-results/goods-out-search-results.component.scss b/apps/page/goods-out/src/lib/goods-out-search/search-results/goods-out-search-results.component.scss index 1e45ce1f5..7cfd2c29e 100644 --- a/apps/page/goods-out/src/lib/goods-out-search/search-results/goods-out-search-results.component.scss +++ b/apps/page/goods-out/src/lib/goods-out-search/search-results/goods-out-search-results.component.scss @@ -3,11 +3,11 @@ } .hits { - @apply text-active-customer text-right mb-3 font-semibold text-base; + @apply text-active-customer text-right mb-3 font-semibold text-p2; } .empty-message { - @apply bg-white text-center font-semibold text-inactive-customer py-10 rounded-card; + @apply bg-white text-center font-semibold text-inactive-customer py-10 rounded; } .divider { diff --git a/apps/page/package-inspection/src/lib/components/package-details-list/package-details-list-item.component.scss b/apps/page/package-inspection/src/lib/components/package-details-list/package-details-list-item.component.scss index 196c3496f..ad5cf29c0 100644 --- a/apps/page/package-inspection/src/lib/components/package-details-list/package-details-list-item.component.scss +++ b/apps/page/package-inspection/src/lib/components/package-details-list/package-details-list-item.component.scss @@ -65,7 +65,7 @@ } .package-details-list-item__shelf-info { - @apply text-sm leading-7 text-ucla-blue; + @apply text-p3 leading-7 text-ucla-blue; } .package-details-list-item__inventory-quantity { diff --git a/apps/page/package-inspection/src/lib/package-details/package-details.component.html b/apps/page/package-inspection/src/lib/package-details/package-details.component.html index b25eacf4e..c16d10c94 100644 --- a/apps/page/package-inspection/src/lib/package-details/package-details.component.html +++ b/apps/page/package-inspection/src/lib/package-details/package-details.component.html @@ -1,5 +1,5 @@
-

Packstück-Prüfung

+

Packstück-Prüfung

diff --git a/apps/page/package-inspection/src/lib/package-result/package-result.component.html b/apps/page/package-inspection/src/lib/package-result/package-result.component.html index 8fcc1edc8..6feef5999 100644 --- a/apps/page/package-inspection/src/lib/package-result/package-result.component.html +++ b/apps/page/package-inspection/src/lib/package-result/package-result.component.html @@ -1,5 +1,5 @@
-

Packstück-Prüfung

+

Packstück-Prüfung

diff --git a/apps/page/remission/src/lib/remission-list/remission-list-item/remission-list-item.component.scss b/apps/page/remission/src/lib/remission-list/remission-list-item/remission-list-item.component.scss index 43b43fac1..9c3208bcb 100644 --- a/apps/page/remission/src/lib/remission-list/remission-list-item/remission-list-item.component.scss +++ b/apps/page/remission/src/lib/remission-list/remission-list-item/remission-list-item.component.scss @@ -1,5 +1,5 @@ :host { - @apply grid grid-flow-row gap-2 p-4 bg-white rounded-card w-full; + @apply grid grid-flow-row gap-2 p-4 bg-white rounded w-full; height: 368px; max-height: 368px; } @@ -31,11 +31,11 @@ } .title.md { - @apply font-bold text-base; + @apply font-bold text-p2; } .title.sm { - @apply font-bold text-sm; + @apply font-bold text-p3; } .title.xs { diff --git a/apps/page/remission/src/lib/remission-list/remission-list.component.html b/apps/page/remission/src/lib/remission-list/remission-list.component.html index 566299dbd..15b41a6a2 100644 --- a/apps/page/remission/src/lib/remission-list/remission-list.component.html +++ b/apps/page/remission/src/lib/remission-list/remission-list.component.html @@ -16,7 +16,7 @@ (scrolledIndexChange)="scrolledIndexChange($event)" >
-

Remission

+

Remission

Wählen Sie den Bereich aus dem
@@ -64,7 +64,7 @@

-

Wanne befüllen

+

Wanne befüllen

@@ -78,7 +78,7 @@
diff --git a/apps/page/remission/src/lib/remission-list/remission-list.component.scss b/apps/page/remission/src/lib/remission-list/remission-list.component.scss index 33b669306..0009900b1 100644 --- a/apps/page/remission/src/lib/remission-list/remission-list.component.scss +++ b/apps/page/remission/src/lib/remission-list/remission-list.component.scss @@ -9,13 +9,13 @@ } .remission-list-result { - @apply list-none bg-white rounded-card mb-2; + @apply list-none bg-white rounded mb-2; height: 368px; max-height: 368px; } .filter { - @apply absolute font-sans flex items-center font-bold bg-inactive-branch border-0 text-regular -top-12 right-0 py-px-8 px-px-15 rounded-filter justify-center z-sticky; + @apply absolute font-sans flex items-center font-bold bg-inactive-branch border-0 text-p2 -top-12 right-0 py-px-8 px-px-15 rounded-filter justify-center z-sticky; min-width: 106px; diff --git a/apps/page/remission/src/lib/shared/shipping-document-details/shipping-document-details-item/shipping-document-details-item.component.html b/apps/page/remission/src/lib/shared/shipping-document-details/shipping-document-details-item/shipping-document-details-item.component.html index d5112b3bb..312e8ccc9 100644 --- a/apps/page/remission/src/lib/shared/shipping-document-details/shipping-document-details-item/shipping-document-details-item.component.html +++ b/apps/page/remission/src/lib/shared/shipping-document-details/shipping-document-details-item/shipping-document-details-item.component.html @@ -1,7 +1,7 @@
{{ item.quantity }}x
- -

+

Warenbegleitschein #{{ firstReceipt.receiptNumber | shortReceiptNumber }}

diff --git a/apps/page/remission/src/lib/shipping-document-list/shipping-document-list-item/shipping-document-list-item.component.html b/apps/page/remission/src/lib/shipping-document-list/shipping-document-list-item/shipping-document-list-item.component.html index 48f3dac30..d303b3f40 100644 --- a/apps/page/remission/src/lib/shipping-document-list/shipping-document-list-item/shipping-document-list-item.component.html +++ b/apps/page/remission/src/lib/shipping-document-list/shipping-document-list-item/shipping-document-list-item.component.html @@ -1,5 +1,5 @@
-

+

#{{ firstReceipt.receiptNumber | shortReceiptNumber }}

diff --git a/apps/page/remission/src/lib/shipping-document-list/shipping-document-list-item/shipping-document-list-item.component.scss b/apps/page/remission/src/lib/shipping-document-list/shipping-document-list-item/shipping-document-list-item.component.scss index f4402e8e3..92d7a5ea7 100644 --- a/apps/page/remission/src/lib/shipping-document-list/shipping-document-list-item/shipping-document-list-item.component.scss +++ b/apps/page/remission/src/lib/shipping-document-list/shipping-document-list-item/shipping-document-list-item.component.scss @@ -1,3 +1,3 @@ :host { - @apply block bg-white rounded-card p-4; + @apply block bg-white rounded p-4; } diff --git a/apps/page/remission/src/lib/shipping-document-list/shipping-document-list.component.html b/apps/page/remission/src/lib/shipping-document-list/shipping-document-list.component.html index 492345d12..6bedca10f 100644 --- a/apps/page/remission/src/lib/shipping-document-list/shipping-document-list.component.html +++ b/apps/page/remission/src/lib/shipping-document-list/shipping-document-list.component.html @@ -1,4 +1,4 @@ -

Warenbegleitscheine

+

Warenbegleitscheine

diff --git a/apps/page/task-calendar/src/lib/components/task-info/task-info.component.scss b/apps/page/task-calendar/src/lib/components/task-info/task-info.component.scss index 78e5acec4..de47721b8 100644 --- a/apps/page/task-calendar/src/lib/components/task-info/task-info.component.scss +++ b/apps/page/task-calendar/src/lib/components/task-info/task-info.component.scss @@ -17,7 +17,7 @@ @apply ml-4; .muted { - @apply text-cool-grey text-base font-semibold; + @apply text-cool-grey text-p2 font-semibold; } } } @@ -95,7 +95,7 @@ hr { .copy-article-cta, .open-article-cta, .link-cta { - @apply bg-transparent justify-self-end border-none outline-none text-brand text-cta-l font-bold p-0; + @apply bg-transparent justify-self-end border-none outline-none text-brand text-p1 font-bold p-0; } .copy-article-cta { diff --git a/apps/page/task-calendar/src/lib/components/task-list/task-list-group.component.scss b/apps/page/task-calendar/src/lib/components/task-list/task-list-group.component.scss index 31f9055ff..887effdb7 100644 --- a/apps/page/task-calendar/src/lib/components/task-list/task-list-group.component.scss +++ b/apps/page/task-calendar/src/lib/components/task-list/task-list-group.component.scss @@ -17,7 +17,7 @@ @apply flex flex-col text-right justify-center items-end; .cta-print { - @apply border-none outline-none bg-transparent text-brand text-cta-l font-bold pr-0; + @apply border-none outline-none bg-transparent text-brand text-p1 font-bold pr-0; } } @@ -26,6 +26,6 @@ } .muted { - @apply text-active-branch font-semibold text-sm; + @apply text-active-branch font-semibold text-p3; } } diff --git a/apps/page/task-calendar/src/lib/components/task-searchbar/task-searchbar.component.html b/apps/page/task-calendar/src/lib/components/task-searchbar/task-searchbar.component.html index edacf39c3..d74550d49 100644 --- a/apps/page/task-calendar/src/lib/components/task-searchbar/task-searchbar.component.html +++ b/apps/page/task-calendar/src/lib/components/task-searchbar/task-searchbar.component.html @@ -10,7 +10,15 @@
--> - +
-

+

Filialvorschläge

- + +
diff --git a/apps/shared/components/filter/src/lib/filter-group/filter-filter-group-filter/filter-filter-group-filter.component.scss b/apps/shared/components/filter/src/lib/filter-group/filter-filter-group-filter/filter-filter-group-filter.component.scss index f8a78eba7..96b97fbe9 100644 --- a/apps/shared/components/filter/src/lib/filter-group/filter-filter-group-filter/filter-filter-group-filter.component.scss +++ b/apps/shared/components/filter/src/lib/filter-group/filter-filter-group-filter/filter-filter-group-filter.component.scss @@ -1,34 +1,19 @@ :host { - @apply grid grid-flow-col gap-2; + @apply grid grid-flow-col; grid-template-columns: 240px 1fr; } -ui-icon { - @apply transition transform text-cool-grey; -} - .inputs { @apply grid grid-flow-row gap-2; - max-height: calc(100vh - 377px); .ui-input { - @apply flex flex-row items-center border-none outline-none p-4 font-bold text-base bg-white text-black text-left rounded-card transition transform; - } - - .has-options { - @apply text-white bg-active-customer; - - ui-icon { - @apply text-white; - } + @apply flex flex-row items-center outline-none p-4 text-lg bg-white text-black text-left rounded transition transform mr-2; + box-shadow: 0px 0px 10px rgba(220, 226, 233, 0.5); } .ui-input.active { - @apply text-black bg-white pr-6 -mr-2 rounded-r-none; - - ui-icon { - @apply rotate-180 text-cool-grey; - } + @apply text-black bg-white font-bold pr-6 mr-0 rounded-r-none border-none; + box-shadow: 0px 6px 24px rgba(206, 212, 219, 0.8); } .space-right { @@ -40,6 +25,13 @@ ui-icon { } } +.has-options { + @apply text-black bg-white font-bold; + span { + @apply text-black; + } +} + ::ng-deep ui-filter-filter-group-filter .input-options-wrapper { min-height: 150px; } diff --git a/apps/shared/components/filter/src/lib/filter-group/filter-input-group-main/filter-input-group-main.component.html b/apps/shared/components/filter/src/lib/filter-group/filter-input-group-main/filter-input-group-main.component.html index 4b76be97b..b97033389 100644 --- a/apps/shared/components/filter/src/lib/filter-group/filter-input-group-main/filter-input-group-main.component.html +++ b/apps/shared/components/filter/src/lib/filter-group/filter-input-group-main/filter-input-group-main.component.html @@ -1,4 +1,5 @@ - - + -
+ +
+ +
+ diff --git a/apps/shared/components/filter/src/lib/order-by-filter/order-by-filter.component.scss b/apps/shared/components/filter/src/lib/order-by-filter/order-by-filter.component.scss index 7edc535a1..4510c3d2c 100644 --- a/apps/shared/components/filter/src/lib/order-by-filter/order-by-filter.component.scss +++ b/apps/shared/components/filter/src/lib/order-by-filter/order-by-filter.component.scss @@ -1,28 +1,23 @@ :host { - @apply box-border flex justify-center items-center; - min-height: 30px; -} - -.order-by-filter-button-wrapper { - @apply flex flex-row items-center justify-center; + @apply box-border flex flex-row items-center justify-center h-[3.3125rem] w-full; } .order-by-filter-button { - @apply bg-transparent outline-none border-none text-regular font-bold flex flex-row justify-center items-center m-0 py-2 px-2; + @apply bg-transparent outline-none border-none text-p2 font-bold flex flex-row justify-center items-center; } -::ng-deep .tablet ui-order-by-filter .order-by-filter-button { +::ng-deep .tablet shared-order-by-filter .order-by-filter-button { @apply mx-0; } ui-icon { - @apply hidden transform ml-2 rounded-full p-1; + @apply hidden transform ml-1 rounded-full p-1 bg-[#AEB7C1] h-[20px] w-[20px] items-center justify-center; transition: 250ms all ease-in-out; } ui-icon.asc, ui-icon.desc { - @apply flex rounded-full visible text-white; + @apply flex rounded-full visible text-black; } ui-icon.asc { @@ -32,23 +27,3 @@ ui-icon.asc { ui-icon.desc { @apply rotate-90; } - -::ng-deep .customer ui-order-by-filter { - ui-icon { - @apply bg-active-customer; - } - - .order-by-filter-button { - @apply text-active-customer; - } -} - -::ng-deep .branch ui-order-by-filter { - ui-icon { - @apply bg-active-branch; - } - - .order-by-filter-button { - @apply text-active-branch; - } -} diff --git a/apps/shared/components/filter/src/lib/order-by-filter/order-by-filter.component.ts b/apps/shared/components/filter/src/lib/order-by-filter/order-by-filter.component.ts index f17b8497b..ccdd5687a 100644 --- a/apps/shared/components/filter/src/lib/order-by-filter/order-by-filter.component.ts +++ b/apps/shared/components/filter/src/lib/order-by-filter/order-by-filter.component.ts @@ -1,5 +1,5 @@ import { Component, ChangeDetectionStrategy, Input, ChangeDetectorRef, Output, EventEmitter, OnInit } from '@angular/core'; -import { UiOrderBy } from '@ui/filter'; +import { OrderBy } from '../tree'; @Component({ selector: 'shared-order-by-filter', @@ -9,15 +9,48 @@ import { UiOrderBy } from '@ui/filter'; }) export class OrderByFilterComponent implements OnInit { @Input() - orderBy: UiOrderBy[]; + orderBy: OrderBy[]; + + @Input() + groupBy?: number[] = []; // example input: [2, 1, 2] should result in: [[item, item], [item], [item, item]] @Output() - selectedOrderByChange = new EventEmitter(); + selectedOrderByChange = new EventEmitter(); get orderByKeys() { return this.orderBy?.map((ob) => ob.label).filter((key, idx, self) => self.indexOf(key) === idx); } + get groupedOrderByKeys(): Array<{ group: number; keys: string[] }> { + let orderByKeys = this.orderByKeys; // copy + const grouped: Array<{ group: number; keys: string[] }> = []; + + if (this.groupBy?.length > 1) { + // group keys based on given input groupBy array structure + for (let [outerIndex, group] of this.groupBy?.entries()) { + let item = { + group: outerIndex, + keys: [], + }; + + for (let [innerIndex, key] of orderByKeys.entries()) { + if (innerIndex < group) { + item.keys.push(key); + } else { + break; + } + } + + // Filter already grouped keys from initial array + orderByKeys = orderByKeys.filter((key) => !item.keys.find((itemKey) => itemKey === key)); + grouped.push(item); + } + } else { + grouped.push({ group: 1, keys: this.orderByKeys }); + } + return grouped; + } + get activeOrderBy() { return this.orderBy?.find((f) => f.selected); } @@ -31,7 +64,7 @@ export class OrderByFilterComponent implements OnInit { setActive(orderBy: string) { const active = this.activeOrderBy; const orderBys = this.orderBy?.filter((f) => f.label === orderBy); - let next: UiOrderBy; + let next: OrderBy; if (orderBys?.length) { if (active?.label !== orderBy) { diff --git a/apps/shared/components/filter/src/lib/shared/filter-input-chip/filter-input-chip.component.scss b/apps/shared/components/filter/src/lib/shared/filter-input-chip/filter-input-chip.component.scss index 701a0689b..79cc360ca 100644 --- a/apps/shared/components/filter/src/lib/shared/filter-input-chip/filter-input-chip.component.scss +++ b/apps/shared/components/filter/src/lib/shared/filter-input-chip/filter-input-chip.component.scss @@ -3,19 +3,9 @@ } button.ui-filter-chip { - @apply grid grid-flow-col gap-2 items-center rounded-full text-base px-4 py-3 bg-white text-inactive-customer border-none font-bold; -} - -/** styling branch bereich **/ -::ng-deep .branch ui-filter-input-chip button.ui-filter-chip { - @apply text-inactive-branch; + @apply grid grid-flow-col gap-2 items-center rounded-full text-p2 px-4 py-3 bg-[#EDEFF0] border-none font-semibold; } button.ui-filter-chip.selected { - @apply bg-active-customer text-white; -} - -/** styling branch bereich **/ -::ng-deep .branch ui-filter-input-chip button.ui-filter-chip.selected { - @apply bg-active-branch; + @apply bg-[#596470] text-white; } diff --git a/apps/shared/components/filter/src/lib/shared/filter-input-options/filter-input-option-bool/filter-input-option-bool.component.html b/apps/shared/components/filter/src/lib/shared/filter-input-options/filter-input-option-bool/filter-input-option-bool.component.html index 4331a84c5..351ae16b8 100644 --- a/apps/shared/components/filter/src/lib/shared/filter-input-options/filter-input-option-bool/filter-input-option-bool.component.html +++ b/apps/shared/components/filter/src/lib/shared/filter-input-options/filter-input-option-bool/filter-input-option-bool.component.html @@ -20,5 +20,5 @@
- + diff --git a/apps/shared/components/filter/src/lib/shared/filter-input-options/filter-input-option-bool/filter-input-option-bool.component.scss b/apps/shared/components/filter/src/lib/shared/filter-input-options/filter-input-option-bool/filter-input-option-bool.component.scss index 7ec047c57..45f13ec4a 100644 --- a/apps/shared/components/filter/src/lib/shared/filter-input-options/filter-input-option-bool/filter-input-option-bool.component.scss +++ b/apps/shared/components/filter/src/lib/shared/filter-input-options/filter-input-option-bool/filter-input-option-bool.component.scss @@ -18,6 +18,6 @@ } } -::ng-deep ui-input-option-bool ui-checkbox ui-icon { +::ng-deep shared-input-option-bool ui-checkbox ui-icon { @apply text-cool-grey; } diff --git a/apps/shared/components/filter/src/lib/shared/filter-input-options/filter-input-option-date-range/filter-input-option-date-range.component.scss b/apps/shared/components/filter/src/lib/shared/filter-input-options/filter-input-option-date-range/filter-input-option-date-range.component.scss index 323bc9003..28dadb1ab 100644 --- a/apps/shared/components/filter/src/lib/shared/filter-input-options/filter-input-option-date-range/filter-input-option-date-range.component.scss +++ b/apps/shared/components/filter/src/lib/shared/filter-input-options/filter-input-option-date-range/filter-input-option-date-range.component.scss @@ -10,7 +10,7 @@ @apply font-bold; button.cta-picker { - @apply bg-transparent text-base outline-none border-none font-bold inline-flex flex-row items-center justify-between; + @apply bg-transparent text-p2 outline-none border-none font-bold inline-flex flex-row items-center justify-between; width: 100px; } @@ -28,13 +28,13 @@ min-height: 24px; } -::ng-deep ui-input-option-date-range ui-datepicker.dp-left { +::ng-deep shared-input-option-date-range ui-datepicker.dp-left { .dp { left: 102px; } } -::ng-deep ui-input-option-date-range ui-datepicker.dp-right { +::ng-deep shared-input-option-date-range ui-datepicker.dp-right { .dp { right: -6px; } diff --git a/apps/shared/components/filter/src/lib/shared/filter-input-options/filter-input-option-number-range/filter-input-option-number-range.component.scss b/apps/shared/components/filter/src/lib/shared/filter-input-options/filter-input-option-number-range/filter-input-option-number-range.component.scss index 22f58c615..53bb6660d 100644 --- a/apps/shared/components/filter/src/lib/shared/filter-input-options/filter-input-option-number-range/filter-input-option-number-range.component.scss +++ b/apps/shared/components/filter/src/lib/shared/filter-input-options/filter-input-option-number-range/filter-input-option-number-range.component.scss @@ -12,10 +12,9 @@ } .ui-filter-date-range-validation { - @apply text-brand text-base font-bold; + @apply text-brand text-p2 font-bold; } ui-form-control input { - max-width: 200px; - @apply px-0 rounded-none; + @apply px-0 rounded-none max-w-[12rem]; } diff --git a/apps/shared/components/filter/src/lib/shared/filter-input-options/filter-input-option-tri-state/filter-input-option-tri-state.component.html b/apps/shared/components/filter/src/lib/shared/filter-input-options/filter-input-option-tri-state/filter-input-option-tri-state.component.html index e9255cd38..d7e40f099 100644 --- a/apps/shared/components/filter/src/lib/shared/filter-input-options/filter-input-option-tri-state/filter-input-option-tri-state.component.html +++ b/apps/shared/components/filter/src/lib/shared/filter-input-options/filter-input-option-tri-state/filter-input-option-tri-state.component.html @@ -20,5 +20,5 @@
- + diff --git a/apps/shared/components/filter/src/lib/shared/filter-input-options/filter-input-option-tri-state/filter-input-option-tri-state.component.scss b/apps/shared/components/filter/src/lib/shared/filter-input-options/filter-input-option-tri-state/filter-input-option-tri-state.component.scss index 36d2a6cb6..711d04eee 100644 --- a/apps/shared/components/filter/src/lib/shared/filter-input-options/filter-input-option-tri-state/filter-input-option-tri-state.component.scss +++ b/apps/shared/components/filter/src/lib/shared/filter-input-options/filter-input-option-tri-state/filter-input-option-tri-state.component.scss @@ -10,7 +10,7 @@ ui-switch { @apply px-4 py-2 flex flex-row justify-between items-center; .btn-expand { - @apply border-none outline-none bg-transparent text-cool-grey; + @apply border-none outline-none bg-transparent text-[#0556B4]; ui-icon { @apply transition-all transform rotate-90; @@ -22,6 +22,6 @@ ui-switch { } } -::ng-deep ui-input-option-bool ui-checkbox ui-icon { - @apply text-cool-grey; +::ng-deep shared-input-option-bool ui-checkbox ui-icon { + @apply text-[#0556B4]; } diff --git a/apps/shared/components/filter/src/lib/shared/filter-input-options/filter-input-options.component.html b/apps/shared/components/filter/src/lib/shared/filter-input-options/filter-input-options.component.html index 626625b35..437a83c43 100644 --- a/apps/shared/components/filter/src/lib/shared/filter-input-options/filter-input-options.component.html +++ b/apps/shared/components/filter/src/lib/shared/filter-input-options/filter-input-options.component.html @@ -1,4 +1,4 @@ -
+
-
+

{{ uiInputOptions?.parent?.description }}

- + > - +
+
- - - - + + + +
diff --git a/apps/shared/components/filter/src/lib/shared/filter-input-options/filter-input-options.component.scss b/apps/shared/components/filter/src/lib/shared/filter-input-options/filter-input-options.component.scss index 7cb01dedb..57ea18b22 100644 --- a/apps/shared/components/filter/src/lib/shared/filter-input-options/filter-input-options.component.scss +++ b/apps/shared/components/filter/src/lib/shared/filter-input-options/filter-input-options.component.scss @@ -1,14 +1,15 @@ :host { @apply block; + box-shadow: 0px 6px 24px rgba(206, 212, 219, 0.8); } .input-desription { - @apply my-0 px-4 font-bold text-base; + @apply my-0 px-4 font-bold text-p2; } .input-options-wrapper { grid-template-rows: auto 1fr; - @apply grid bg-white rounded-card; + @apply grid bg-white rounded; } .hidden-overflow { @@ -19,7 +20,7 @@ @apply grid grid-flow-col justify-end items-center mb-2; button { - @apply bg-transparent p-4 text-base outline-none border-none font-semibold text-inactive-customer; + @apply bg-transparent p-4 text-p2 outline-none border-none text-[#0556B4]; } &.header-shadow { @@ -36,7 +37,8 @@ } .cta-scroll { - @apply absolute bottom-4 right-4 shadow-cta border-none outline-none bg-white w-10 h-10 rounded-full flex flex-row flex-nowrap items-center justify-center text-active-customer; + @apply absolute bottom-4 right-4 border-none outline-none bg-white w-[3.625rem] h-[3.625rem] rounded-full flex flex-row flex-nowrap items-center justify-center text-[#596470]; + box-shadow: 0px 0px 20px rgba(89, 100, 112, 0.5); ui-icon { @apply transition-transform transform rotate-90; @@ -46,15 +48,3 @@ @apply -rotate-90; } } - -::ng-deep .branch ui-filter-input-options { - .cta-scroll { - @apply text-cool-grey; - } - - .input-options-header { - button { - @apply text-cool-grey; - } - } -} diff --git a/apps/shared/components/filter/src/lib/shared/filter-input/input-text/input-text.component.html b/apps/shared/components/filter/src/lib/shared/filter-input/input-text/input-text.component.html index c2666a50c..b8ffa374b 100644 --- a/apps/shared/components/filter/src/lib/shared/filter-input/input-text/input-text.component.html +++ b/apps/shared/components/filter/src/lib/shared/filter-input/input-text/input-text.component.html @@ -1,4 +1,4 @@ -

Ungültige {{ input?.label }}

+

Ungültige {{ input?.label }}

diff --git a/apps/shared/components/filter/src/lib/shared/filter-input/input-text/input-text.component.ts b/apps/shared/components/filter/src/lib/shared/filter-input/input-text/input-text.component.ts index 5c853b903..dc2a1efde 100644 --- a/apps/shared/components/filter/src/lib/shared/filter-input/input-text/input-text.component.ts +++ b/apps/shared/components/filter/src/lib/shared/filter-input/input-text/input-text.component.ts @@ -22,6 +22,12 @@ export class FilterInputTextComponent extends AbstractUiFilterInputDirective imp this.control.setValue(this.value); this.updateValidator(); + const uiInputChangesSub = this.uiInput?.changes?.subscribe((changes) => { + if (this.control.value !== changes?.target?.value) this.control.setValue(changes?.target?.value); + + this.updateValidator(); + }); + const onInputChangeSub = this.onUiInputChange$.subscribe((input) => { if (this.control.value !== input.value) this.control.setValue(input.value); @@ -32,6 +38,7 @@ export class FilterInputTextComponent extends AbstractUiFilterInputDirective imp if (this.value !== value) this.setValue(value); }); + this._subscriptions.add(uiInputChangesSub); this._subscriptions.add(onInputChangeSub); this._subscriptions.add(onControlValueChangeSub); } diff --git a/apps/shared/components/filter/src/lib/tree/filter.ts b/apps/shared/components/filter/src/lib/tree/filter.ts index 44364e433..b44891315 100644 --- a/apps/shared/components/filter/src/lib/tree/filter.ts +++ b/apps/shared/components/filter/src/lib/tree/filter.ts @@ -201,6 +201,21 @@ export class Filter implements IFilter { return target; } + unselectAll() { + this.filter?.forEach((uiInputGroup) => + uiInputGroup?.input?.forEach((uiInput) => { + uiInput?.setSelected(undefined); + uiInput?.setValue(undefined); + }) + ); + this.input?.forEach((uiInputGroup) => + uiInputGroup?.input?.forEach((uiInput) => { + uiInput?.setSelected(undefined); + uiInput?.setValue(undefined); + }) + ); + } + static getQueryParamsFromQueryTokenDTO(queryToken: QueryTokenDTO): Record { const queryParams: Record = {}; diff --git a/apps/shared/components/goods-in-out/src/lib/goods-in-out-order-details/goods-in-out-order-details-covers/goods-in-out-order-details-covers.component.scss b/apps/shared/components/goods-in-out/src/lib/goods-in-out-order-details/goods-in-out-order-details-covers/goods-in-out-order-details-covers.component.scss index 70f6fda3d..fd5400eeb 100644 --- a/apps/shared/components/goods-in-out/src/lib/goods-in-out-order-details/goods-in-out-order-details-covers/goods-in-out-order-details-covers.component.scss +++ b/apps/shared/components/goods-in-out/src/lib/goods-in-out-order-details/goods-in-out-order-details-covers/goods-in-out-order-details-covers.component.scss @@ -17,11 +17,11 @@ ui-slider { } .quantity { - @apply flex justify-center text-small font-bold; + @apply flex justify-center text-p3 font-bold; } .compartment-code { - @apply absolute bottom-0 left-0 inline-block bg-black text-white opacity-80 rounded-md break-all text-center text-x-small; + @apply absolute bottom-0 left-0 inline-block bg-black text-white opacity-80 rounded-md break-all text-center text-p4; width: 53px; } diff --git a/apps/shared/components/goods-in-out/src/lib/goods-in-out-order-details/goods-in-out-order-details-header/goods-in-out-order-details-header.component.scss b/apps/shared/components/goods-in-out/src/lib/goods-in-out-order-details/goods-in-out-order-details-header/goods-in-out-order-details-header.component.scss index 9deaa5127..a4e351b85 100644 --- a/apps/shared/components/goods-in-out/src/lib/goods-in-out-order-details/goods-in-out-order-details-header/goods-in-out-order-details-header.component.scss +++ b/apps/shared/components/goods-in-out/src/lib/goods-in-out-order-details/goods-in-out-order-details-header/goods-in-out-order-details-header.component.scss @@ -1,5 +1,5 @@ :host { - @apply block bg-white rounded-t-card p-4; + @apply block bg-white rounded-t p-4; } .goods-in-out-header-wrapper { @@ -19,7 +19,7 @@ } .goods-in-out-header-edit-cta { - @apply bg-transparent text-brand text-base font-bold border-none px-1 -mr-1; + @apply bg-transparent text-brand text-p2 font-bold border-none px-1 -mr-1; &:disabled { @apply text-inactive-customer; @@ -78,7 +78,7 @@ .cta-datepicker, .cta-pickup-deadline, .cta-pickup-preferred { - @apply flex flex-row border-none outline-none text-base font-bold bg-transparent items-center px-0 mx-0; + @apply flex flex-row border-none outline-none text-p2 font-bold bg-transparent items-center px-0 mx-0; ui-icon { @apply text-inactive-customer ml-2; @@ -155,7 +155,7 @@ } .cta-select-all { - @apply text-brand bg-transparent text-base font-bold outline-none border-none px-4 py-4 -mr-4; + @apply text-brand bg-transparent text-p2 font-bold outline-none border-none px-4 py-4 -mr-4; } .fetch-wrapper { diff --git a/apps/shared/components/goods-in-out/src/lib/goods-in-out-order-details/goods-in-out-order-details-item/goods-in-out-order-details-item.component.html b/apps/shared/components/goods-in-out/src/lib/goods-in-out-order-details/goods-in-out-order-details-item/goods-in-out-order-details-item.component.html index 692ca4f51..91edac314 100644 --- a/apps/shared/components/goods-in-out/src/lib/goods-in-out-order-details/goods-in-out-order-details-item/goods-in-out-order-details-item.component.html +++ b/apps/shared/components/goods-in-out/src/lib/goods-in-out-order-details/goods-in-out-order-details-item/goods-in-out-order-details-item.component.html @@ -107,7 +107,7 @@ -
+
{{ orderItem?.estimatedDelivery?.start | date: 'dd.MM.yy' }} und {{ orderItem?.estimatedDelivery?.stop | date: 'dd.MM.yy' }} diff --git a/apps/shared/components/goods-in-out/src/lib/goods-in-out-order-details/goods-in-out-order-details-item/goods-in-out-order-details-item.component.scss b/apps/shared/components/goods-in-out/src/lib/goods-in-out-order-details/goods-in-out-order-details-item/goods-in-out-order-details-item.component.scss index 8c70d7768..eb3f6566a 100644 --- a/apps/shared/components/goods-in-out/src/lib/goods-in-out-order-details/goods-in-out-order-details-item/goods-in-out-order-details-item.component.scss +++ b/apps/shared/components/goods-in-out/src/lib/goods-in-out-order-details/goods-in-out-order-details-item/goods-in-out-order-details-item.component.scss @@ -23,7 +23,7 @@ button { .goods-in-out-order-details-item-thumbnail { img { - @apply rounded-card shadow-cta; + @apply rounded shadow-cta; width: 53px; height: 85px; } @@ -59,35 +59,35 @@ button { } .goods-in-out-order-details-item-comment { - @apply flex flex-row items-start p-4 bg-white text-base font-bold; + @apply flex flex-row items-start p-4 bg-white text-p2 font-bold; textarea { - @apply flex-grow bg-transparent border-none outline-none text-base mx-4; + @apply flex-grow bg-transparent border-none outline-none text-p2 mx-4; resize: none; } textarea.inactive { @apply text-warning font-bold; - @apply flex-grow bg-transparent border-none outline-none text-base mx-4 text-warning font-bold; + @apply flex-grow bg-transparent border-none outline-none text-p2 mx-4 text-warning font-bold; // ipad color fix -webkit-text-fill-color: rgb(190, 129, 0); opacity: 1; } input { - @apply flex-grow bg-transparent border-none outline-none text-base mx-4; + @apply flex-grow bg-transparent border-none outline-none text-p2 mx-4; } input.inactive { @apply text-warning font-bold; - @apply flex-grow bg-transparent border-none outline-none text-base mx-4 text-warning font-bold; + @apply flex-grow bg-transparent border-none outline-none text-p2 mx-4 text-warning font-bold; // ipad color fix -webkit-text-fill-color: rgb(190, 129, 0); opacity: 1; } button { - @apply bg-transparent text-brand font-bold text-base outline-none border-none; + @apply bg-transparent text-brand font-bold text-p2 outline-none border-none; } button.clear { @@ -100,7 +100,7 @@ button { } .cta-more { - @apply flex flex-row items-center font-bold text-base bg-transparent outline-none border-none text-inactive-customer; + @apply flex flex-row items-center font-bold text-p2 bg-transparent outline-none border-none text-inactive-customer; ui-icon { @apply ml-2; @@ -116,7 +116,7 @@ button { } .cta-history { - @apply text-base font-bold text-brand outline-none border-none bg-transparent -mr-1; + @apply text-p2 font-bold text-brand outline-none border-none bg-transparent -mr-1; } .cta-edit, diff --git a/apps/shared/components/goods-in-out/src/lib/goods-in-out-order-details/goods-in-out-order-details-tags/goods-in-out-order-details-tags.component.scss b/apps/shared/components/goods-in-out/src/lib/goods-in-out-order-details/goods-in-out-order-details-tags/goods-in-out-order-details-tags.component.scss index 0e248786a..c4482b361 100644 --- a/apps/shared/components/goods-in-out/src/lib/goods-in-out-order-details/goods-in-out-order-details-tags/goods-in-out-order-details-tags.component.scss +++ b/apps/shared/components/goods-in-out/src/lib/goods-in-out-order-details/goods-in-out-order-details-tags/goods-in-out-order-details-tags.component.scss @@ -7,7 +7,7 @@ } .goods-in-out-order-details-tag { - @apply w-auto text-base border border-solid bg-white border-inactive-customer py-px-10 px-5 font-bold text-inactive-customer rounded-full; + @apply w-auto text-p2 border border-solid bg-white border-inactive-customer py-px-10 px-5 font-bold text-inactive-customer rounded-full; &:focus:not(.selected) { @apply bg-white border-inactive-customer text-inactive-customer; @@ -19,7 +19,7 @@ } input { - @apply border-none outline-none text-base font-bold w-auto text-center text-inactive-customer bg-transparent p-0 m-0; + @apply border-none outline-none text-p2 font-bold w-auto text-center text-inactive-customer bg-transparent p-0 m-0; } input::placeholder { diff --git a/apps/shared/components/goods-in-out/src/lib/goods-in-out-order-details/goods-in-out-order-details.component.scss b/apps/shared/components/goods-in-out/src/lib/goods-in-out-order-details/goods-in-out-order-details.component.scss index 0ad57db2b..7187c538c 100644 --- a/apps/shared/components/goods-in-out/src/lib/goods-in-out-order-details/goods-in-out-order-details.component.scss +++ b/apps/shared/components/goods-in-out/src/lib/goods-in-out-order-details/goods-in-out-order-details.component.scss @@ -11,10 +11,7 @@ } .goods-in-out-order-details-action-wrapper { - @apply fixed bottom-28 inline-flex flex-row-reverse flex-wrap justify-center items-center; - width: 80%; - left: 50%; - transform: translateX(-50%); + @apply fixed bottom-28 left-[50%] inline-flex desktop:flex translate-x-[-50%] desktop:translate-x-[15%] w-[80%] desktop:w-fit flex-row-reverse flex-wrap justify-center items-center; .cta-action { @apply border-2 border-solid border-brand rounded-full py-3 px-6 font-bold text-lg outline-none self-end whitespace-nowrap m-2; diff --git a/apps/shared/components/goods-in-out/src/lib/goods-in-out-order-edit/goods-in-out-order-edit.component.scss b/apps/shared/components/goods-in-out/src/lib/goods-in-out-order-edit/goods-in-out-order-edit.component.scss index 552c01db7..e4655d011 100644 --- a/apps/shared/components/goods-in-out/src/lib/goods-in-out-order-edit/goods-in-out-order-edit.component.scss +++ b/apps/shared/components/goods-in-out/src/lib/goods-in-out-order-edit/goods-in-out-order-edit.component.scss @@ -1,5 +1,5 @@ :host { - @apply rounded-t-card p-4 h-full; + @apply rounded-t p-4 h-full; } form { @@ -7,7 +7,7 @@ form { } .header { - @apply py-6 px-5 my-1 bg-white text-card-heading font-bold; + @apply py-6 px-5 my-1 bg-white text-h3 font-bold; } ui-form-control { @@ -64,15 +64,15 @@ input { } .actions { - @apply flex justify-center items-center fixed left-0 right-0; + @apply flex justify-center items-center desktop:translate-x-[60%] desktop:w-fit fixed left-0 right-0 desktop:left-[unset] desktop:right-[unset]; bottom: 110px; .cta-close { - @apply border-2 border-solid border-brand bg-white text-brand font-bold text-cta-l py-3 px-6 rounded-full mr-8; + @apply border-2 border-solid border-brand bg-white text-brand font-bold text-p1 py-3 px-6 rounded-full mr-8; } .cta-save { - @apply border-2 border-solid border-brand bg-brand text-white font-bold text-cta-l py-3 px-6 rounded-full; + @apply border-2 border-solid border-brand bg-brand text-white font-bold text-p1 py-3 px-6 rounded-full; &:disabled { @apply bg-inactive-branch border-inactive-branch; diff --git a/apps/shared/components/goods-in-out/src/lib/goods-in-out-order-group/goods-in-out-order-group-item.component.scss b/apps/shared/components/goods-in-out/src/lib/goods-in-out-order-group/goods-in-out-order-group-item.component.scss index cce81eae1..12bfe9920 100644 --- a/apps/shared/components/goods-in-out/src/lib/goods-in-out-order-group/goods-in-out-order-group-item.component.scss +++ b/apps/shared/components/goods-in-out/src/lib/goods-in-out-order-group/goods-in-out-order-group-item.component.scss @@ -22,7 +22,7 @@ @apply text-center mr-6; width: 78px; img { - @apply rounded-card w-auto h-auto; + @apply rounded w-auto h-auto; width: 60px; box-shadow: 0 0 18px 0 #b8b3b7; } diff --git a/apps/shared/components/goods-in-out/src/lib/goods-in-out-order-group/goods-in-out-order-group.component.scss b/apps/shared/components/goods-in-out/src/lib/goods-in-out-order-group/goods-in-out-order-group.component.scss index 3a6fb1a04..62ad02007 100644 --- a/apps/shared/components/goods-in-out/src/lib/goods-in-out-order-group/goods-in-out-order-group.component.scss +++ b/apps/shared/components/goods-in-out/src/lib/goods-in-out-order-group/goods-in-out-order-group.component.scss @@ -1,9 +1,9 @@ :host { - @apply grid grid-flow-row rounded-card; + @apply grid grid-flow-row rounded; } .goods-in-out-order-group-header { - @apply bg-white rounded-t-card p-4 pb-0 font-bold; + @apply bg-white rounded-t p-4 pb-0 font-bold; h3 { @apply mt-0 mb-4; @@ -14,5 +14,5 @@ } ::ng-deep shared-goods-in-out-order-group shared-goods-in-out-order-group-item:last-child { - @apply rounded-b-card; + @apply rounded-b; } diff --git a/apps/shared/components/history/src/lib/history-log-entry/history-log-entry.component.scss b/apps/shared/components/history/src/lib/history-log-entry/history-log-entry.component.scss index 3e7e242a1..85e4273cb 100644 --- a/apps/shared/components/history/src/lib/history-log-entry/history-log-entry.component.scss +++ b/apps/shared/components/history/src/lib/history-log-entry/history-log-entry.component.scss @@ -13,12 +13,12 @@ grid-template-columns: 1fr 1fr 1fr; .old-value { - @apply rounded-card text-white py-1 px-4; + @apply rounded text-white py-1 px-4; background-color: #89949e; } .new-value { - @apply rounded-card text-white py-1 px-4; + @apply rounded text-white py-1 px-4; background-color: #134563; } } diff --git a/apps/shared/components/input-control/src/lib/input-control.component.css b/apps/shared/components/input-control/src/lib/input-control.component.css index 6be554cd5..a5921bb09 100644 --- a/apps/shared/components/input-control/src/lib/input-control.component.css +++ b/apps/shared/components/input-control/src/lib/input-control.component.css @@ -1,5 +1,5 @@ .shared-input-control { - @apply relative leading-[21px] text-base font-bold; + @apply relative leading-[21px] text-p2 font-bold; } .shared-input-control:has(input.ng-invalid.ng-dirty) { diff --git a/apps/shared/components/notification-channel-control/src/lib/notification-channel-control.component.scss b/apps/shared/components/notification-channel-control/src/lib/notification-channel-control.component.scss index a7a2efdff..1e23ece8c 100644 --- a/apps/shared/components/notification-channel-control/src/lib/notification-channel-control.component.scss +++ b/apps/shared/components/notification-channel-control/src/lib/notification-channel-control.component.scss @@ -50,7 +50,7 @@ @apply flex flex-col flex-grow pb-1; input { - @apply flex-grow outline-none text-base font-bold border-0 border-b-2 border-solid pb-px-2; + @apply flex-grow outline-none text-p2 font-bold border-0 border-b-2 border-solid pb-px-2; } input:disabled { @@ -62,14 +62,14 @@ } .error { - @apply text-right text-sm font-bold text-brand; + @apply text-right text-p3 font-bold text-brand; } } } .nc-generate { button { - @apply text-base font-bold text-brand outline-none border-none bg-transparent mr-4 absolute right-0; + @apply text-p2 font-bold text-brand outline-none border-none bg-transparent mr-4 absolute right-0; } } diff --git a/apps/shared/components/searchbox/src/lib/searchbox.component.html b/apps/shared/components/searchbox/src/lib/searchbox.component.html index ab268fdd6..e81c206e6 100644 --- a/apps/shared/components/searchbox/src/lib/searchbox.component.html +++ b/apps/shared/components/searchbox/src/lib/searchbox.component.html @@ -1,5 +1,6 @@
Lieferung auswählen +

Lieferung auswählen

Wie möchten Sie die Artikel erhalten?

diff --git a/apps/shared/modals/purchase-options-modal/src/lib/purchase-options-tile/purchase-options-tile.component.css b/apps/shared/modals/purchase-options-modal/src/lib/purchase-options-tile/purchase-options-tile.component.css index add64ae27..58b12b925 100644 --- a/apps/shared/modals/purchase-options-modal/src/lib/purchase-options-tile/purchase-options-tile.component.css +++ b/apps/shared/modals/purchase-options-modal/src/lib/purchase-options-tile/purchase-options-tile.component.css @@ -23,7 +23,7 @@ } .purchase-options-tile__body { - @apply text-center text-sm; + @apply text-center text-p3; } .purchase-options-tile__actions { @@ -37,7 +37,7 @@ ::ng-deep app-pickup-purchase-options-tile shared-branch-selector .shared-branch-selector-input-container, ::ng-deep app-in-store-purchase-options-tile shared-branch-selector .shared-branch-selector-input-container { - @apply rounded-card; + @apply rounded; } ::ng-deep app-pickup-purchase-options-tile shared-branch-selector.shared-branch-selector-opend .shared-branch-selector-input-container, diff --git a/apps/shared/services/ng-package.json b/apps/shared/services/ng-package.json new file mode 100644 index 000000000..1a499e922 --- /dev/null +++ b/apps/shared/services/ng-package.json @@ -0,0 +1,6 @@ +{ + "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json", + "lib": { + "entryFile": "src/public-api.ts" + } + } \ No newline at end of file diff --git a/apps/shared/services/src/lib/base-navigation.service.ts b/apps/shared/services/src/lib/base-navigation.service.ts new file mode 100644 index 000000000..01d2679ec --- /dev/null +++ b/apps/shared/services/src/lib/base-navigation.service.ts @@ -0,0 +1,15 @@ +import { Injectable } from '@angular/core'; +import { NavigationDetails, OutletLocations, OutletParams } from './defs'; +import { ActivatedRoute } from '@angular/router'; +import { Observable } from 'rxjs'; + +@Injectable({ providedIn: 'root' }) +export abstract class BaseNavigationService { + constructor() {} + + abstract getOutletLocations(activatedRoute: ActivatedRoute): OutletLocations; + abstract getOutletParams(activatedRoute: ActivatedRoute): OutletParams; + abstract mainOutletActive$(activatedRoute: ActivatedRoute): Observable; + abstract mainOutletActive(activatedRoute: ActivatedRoute): boolean; + protected abstract _navigateTo(navigation: NavigationDetails): Promise; +} diff --git a/apps/shared/services/src/lib/defs/index.ts b/apps/shared/services/src/lib/defs/index.ts new file mode 100644 index 000000000..d36674c82 --- /dev/null +++ b/apps/shared/services/src/lib/defs/index.ts @@ -0,0 +1,5 @@ +// start:ng42.barrel +export * from './navigation-details.model'; +export * from './outlet-locations.model'; +export * from './outlet-params.model'; +// end:ng42.barrel diff --git a/apps/shared/services/src/lib/defs/navigation-details.model.ts b/apps/shared/services/src/lib/defs/navigation-details.model.ts new file mode 100644 index 000000000..b93905e34 --- /dev/null +++ b/apps/shared/services/src/lib/defs/navigation-details.model.ts @@ -0,0 +1,5 @@ +export interface NavigationDetails { + routerLink: any[]; + queryParams?: Record; + queryParamsHandling?: 'merge' | 'preserve' | ''; +} diff --git a/apps/shared/services/src/lib/defs/outlet-locations.model.ts b/apps/shared/services/src/lib/defs/outlet-locations.model.ts new file mode 100644 index 000000000..6cc38c1b6 --- /dev/null +++ b/apps/shared/services/src/lib/defs/outlet-locations.model.ts @@ -0,0 +1,5 @@ +export interface OutletLocations { + main: string; + left: string; + right: string; +} diff --git a/apps/shared/services/src/lib/defs/outlet-params.model.ts b/apps/shared/services/src/lib/defs/outlet-params.model.ts new file mode 100644 index 000000000..34d6891f0 --- /dev/null +++ b/apps/shared/services/src/lib/defs/outlet-params.model.ts @@ -0,0 +1,7 @@ +import { Params } from '@angular/router'; + +export interface OutletParams { + main: Params; + left: Params; + right: Params; +} diff --git a/apps/shared/services/src/lib/navigation.service.spec.ts b/apps/shared/services/src/lib/navigation.service.spec.ts new file mode 100644 index 000000000..3faeea3de --- /dev/null +++ b/apps/shared/services/src/lib/navigation.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { NavigationService } from './navigation.service'; + +describe('NavigationService', () => { + let service: NavigationService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(NavigationService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/apps/shared/services/src/lib/navigation.service.ts b/apps/shared/services/src/lib/navigation.service.ts new file mode 100644 index 000000000..634db9580 --- /dev/null +++ b/apps/shared/services/src/lib/navigation.service.ts @@ -0,0 +1,50 @@ +import { Injectable } from '@angular/core'; +import { ActivatedRoute, Router } from '@angular/router'; +import { EnvironmentService } from '@core/environment'; +import { NavigationDetails, OutletLocations, OutletParams } from './defs'; +import { BaseNavigationService } from './base-navigation.service'; +import { Observable, combineLatest } from 'rxjs'; +import { map } from 'rxjs/operators'; + +@Injectable({ providedIn: 'root' }) +export class NavigationService extends BaseNavigationService { + constructor(private _router: Router, private _environment: EnvironmentService) { + super(); + } + + getOutletLocations(activatedRoute: ActivatedRoute): OutletLocations { + return { + main: activatedRoute?.parent?.children?.find((childRoute) => childRoute?.outlet === 'main')?.snapshot?.routeConfig?.path, + left: activatedRoute?.parent?.children?.find((childRoute) => childRoute?.outlet === 'left')?.snapshot?.routeConfig?.path, + right: activatedRoute?.parent?.children?.find((childRoute) => childRoute?.outlet === 'right')?.snapshot?.routeConfig?.path, + }; + } + + getOutletParams(activatedRoute: ActivatedRoute): OutletParams { + return { + main: activatedRoute?.parent?.children?.find((childRoute) => childRoute?.outlet === 'main')?.snapshot?.params, + left: activatedRoute?.parent?.children?.find((childRoute) => childRoute?.outlet === 'left')?.snapshot?.params, + right: activatedRoute?.parent?.children?.find((childRoute) => childRoute?.outlet === 'right')?.snapshot?.params, + }; + } + + mainOutletActive$(activatedRoute: ActivatedRoute): Observable { + return combineLatest([this._environment.matchDesktopSmall$, this._environment.matchDesktop$]).pipe( + map( + ([desktopSmallState, desktopState]) => + !!this.getOutletLocations(activatedRoute)?.main && (desktopSmallState.matches || desktopState.matches) + ) + ); + } + + mainOutletActive(activatedRoute: ActivatedRoute): boolean { + return !!this.getOutletLocations(activatedRoute)?.main && (this._environment.matchDesktopSmall() || this._environment.matchDesktop()); + } + + protected async _navigateTo(navigation: NavigationDetails): Promise { + return await this._router.navigate(navigation.routerLink, { + queryParams: navigation?.queryParams ?? {}, + queryParamsHandling: navigation?.queryParamsHandling ?? '', + }); + } +} diff --git a/apps/shared/services/src/lib/product-catalog-navigation.service.spec.ts b/apps/shared/services/src/lib/product-catalog-navigation.service.spec.ts new file mode 100644 index 000000000..c466ff1b7 --- /dev/null +++ b/apps/shared/services/src/lib/product-catalog-navigation.service.spec.ts @@ -0,0 +1,15 @@ +import { TestBed } from '@angular/core/testing'; +import { ProductCatalogNavigationService } from './product-catalog-navigation.service'; + +describe('ProductCatalogNavigationService', () => { + let service: ProductCatalogNavigationService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(ProductCatalogNavigationService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/apps/shared/services/src/lib/product-catalog-navigation.service.ts b/apps/shared/services/src/lib/product-catalog-navigation.service.ts new file mode 100644 index 000000000..e0f210df4 --- /dev/null +++ b/apps/shared/services/src/lib/product-catalog-navigation.service.ts @@ -0,0 +1,102 @@ +import { Injectable } from '@angular/core'; +import { Router } from '@angular/router'; +import { EnvironmentService } from '@core/environment'; +import { NavigationService } from './navigation.service'; + +@Injectable({ providedIn: 'root' }) +export class ProductCatalogNavigationService extends NavigationService { + constructor(_router: Router, _environment: EnvironmentService) { + super(_router, _environment); + } + + getArticleSearchBasePath(processId?: number): any[] { + if (!!processId) { + return ['/kunde', processId, 'product', { outlets: { primary: 'search', main: null, left: 'search', right: 'filter' } }]; + } else { + return ['/kunde', 'product', { outlets: { primary: 'search', main: null, left: 'search', right: 'filter' } }]; + } + } + + getArticleSearchResultsPath(processId: number): any[] { + return ['/kunde', processId, 'product', { outlets: { primary: 'results', main: 'results', left: null, right: null } }]; + } + + getArticleSearchResultsAndFilterPath({ processId, itemId }: { processId: number; itemId?: number }): any[] { + return [ + '/kunde', + processId, + 'product', + { outlets: { primary: 'filter', main: null, left: 'results', right: itemId ? ['filter', itemId] : 'filter' } }, + ]; + } + + getArticleDetailsPath({ processId, itemId, ean }: { processId: number; itemId?: number; ean?: string }): any[] { + if (!!ean) { + return [ + '/kunde', + processId, + 'product', + { outlets: { primary: ['details', 'ean', ean], main: null, left: ['results', 'ean', ean], right: ['details', 'ean', ean] } }, + ]; + } else { + return [ + '/kunde', + processId, + 'product', + { outlets: { primary: ['details', itemId], main: null, left: ['results', itemId], right: ['details', itemId] } }, + ]; + } + } + + async navigateToProductSearch({ + processId, + queryParams, + queryParamsHandling, + }: { + processId: number; + queryParams?: Record; + queryParamsHandling?: 'merge' | 'preserve' | ''; + }) { + await this._navigateTo({ + routerLink: this.getArticleSearchBasePath(processId), + queryParams, + queryParamsHandling, + }); + } + + async navigateToResults({ + processId, + queryParams, + queryParamsHandling, + }: { + processId: number; + queryParams?: Record; + queryParamsHandling?: 'merge' | 'preserve' | ''; + }) { + await this._navigateTo({ + routerLink: this.getArticleSearchResultsPath(processId), + queryParams, + queryParamsHandling, + }); + } + + async navigateToDetails({ + processId, + itemId, + ean, + queryParams, + queryParamsHandling, + }: { + processId: number; + itemId?: number; + ean?: string; + queryParams?: Record; + queryParamsHandling?: 'merge' | 'preserve' | ''; + }) { + await this._navigateTo({ + routerLink: this.getArticleDetailsPath({ processId, itemId, ean }), + queryParams, + queryParamsHandling, + }); + } +} diff --git a/apps/shared/services/src/public-api.ts b/apps/shared/services/src/public-api.ts new file mode 100644 index 000000000..208b7dad2 --- /dev/null +++ b/apps/shared/services/src/public-api.ts @@ -0,0 +1,8 @@ +/* + * Public API Surface of services + */ + +export * from './lib/base-navigation.service'; +export * from './lib/product-catalog-navigation.service'; +export * from './lib/navigation.service'; +export * from './lib/defs'; diff --git a/apps/shared/shell/src/lib/process-bar/process-bar-item/process-bar-item.component.ts b/apps/shared/shell/src/lib/process-bar/process-bar-item/process-bar-item.component.ts index db34950e3..c61ec9028 100644 --- a/apps/shared/shell/src/lib/process-bar/process-bar-item/process-bar-item.component.ts +++ b/apps/shared/shell/src/lib/process-bar/process-bar-item/process-bar-item.component.ts @@ -23,7 +23,7 @@ export class ShellProcessBarItemComponent implements OnInit, OnDestroy, OnChange latestBreadcrumb$: Observable = NEVER; - routerLink$: Observable = NEVER; + routerLink$: Observable = NEVER; queryParams$: Observable = NEVER; @@ -52,7 +52,9 @@ export class ShellProcessBarItemComponent implements OnInit, OnDestroy, OnChange } initRouterLink$() { - this.routerLink$ = this.latestBreadcrumb$.pipe(map((breadcrumb) => [breadcrumb?.path])); + this.routerLink$ = this.latestBreadcrumb$.pipe( + map((breadcrumb) => (breadcrumb?.path instanceof Array ? breadcrumb.path : [breadcrumb?.path])) + ); } initQueryParams$() { @@ -94,7 +96,11 @@ export class ShellProcessBarItemComponent implements OnInit, OnDestroy, OnChange async navigate(breadcrumb?: Breadcrumb) { if (breadcrumb) { - await this._router.navigate([breadcrumb.path], { queryParams: breadcrumb.params }); + if (breadcrumb.path instanceof Array) { + await this._router.navigate(breadcrumb.path, { queryParams: breadcrumb.params }); + } else { + await this._router.navigate([breadcrumb.path], { queryParams: breadcrumb.params }); + } } else { await this._router.navigate(['/kunde/dashboard']); } diff --git a/apps/shared/shell/src/lib/process-bar/process-bar.component.html b/apps/shared/shell/src/lib/process-bar/process-bar.component.html index 7fbc58aa2..7c6e7a9ba 100644 --- a/apps/shared/shell/src/lib/process-bar/process-bar.component.html +++ b/apps/shared/shell/src/lib/process-bar/process-bar.component.html @@ -1,7 +1,7 @@
diff --git a/apps/ui/autocomplete/src/lib/autocomplete.scss b/apps/ui/autocomplete/src/lib/autocomplete.scss index 8430ca94b..295a70a45 100644 --- a/apps/ui/autocomplete/src/lib/autocomplete.scss +++ b/apps/ui/autocomplete/src/lib/autocomplete.scss @@ -15,7 +15,7 @@ ui-searchbox ui-autocomplete { } .ui-autocomplete-item { - @apply border-none outline-none text-base font-sans px-4 py-5 text-left bg-white; + @apply border-none outline-none text-p2 font-sans px-4 py-5 text-left bg-white; &.active, &:hover { diff --git a/apps/ui/branch-dropdown/src/lib/branch-dropdown.component.scss b/apps/ui/branch-dropdown/src/lib/branch-dropdown.component.scss index 21d6ae977..124f55427 100644 --- a/apps/ui/branch-dropdown/src/lib/branch-dropdown.component.scss +++ b/apps/ui/branch-dropdown/src/lib/branch-dropdown.component.scss @@ -42,7 +42,7 @@ } .searchbox { - @apply outline-none border-none w-full text-base; + @apply outline-none border-none w-full text-p2; } .searchbox::placeholder { diff --git a/apps/ui/calendar/src/lib/calendar-header/calendar-header.component.scss b/apps/ui/calendar/src/lib/calendar-header/calendar-header.component.scss index fe0f55b35..4de14c736 100644 --- a/apps/ui/calendar/src/lib/calendar-header/calendar-header.component.scss +++ b/apps/ui/calendar/src/lib/calendar-header/calendar-header.component.scss @@ -35,7 +35,7 @@ button { } .display-year-month { - @apply flex flex-row items-center justify-center text-center font-bold whitespace-nowrap text-2xl; + @apply flex flex-row items-center justify-center text-center font-bold whitespace-nowrap text-h3; width: 200px; } diff --git a/apps/ui/datepicker/src/lib/datepicker.component.html b/apps/ui/datepicker/src/lib/datepicker.component.html index aecbfb128..7848eede2 100644 --- a/apps/ui/datepicker/src/lib/datepicker.component.html +++ b/apps/ui/datepicker/src/lib/datepicker.component.html @@ -3,7 +3,7 @@ -
+
diff --git a/apps/ui/dropdown/src/lib/dropdown.scss b/apps/ui/dropdown/src/lib/dropdown.scss index 95a0c3e2d..6fb56b2c7 100644 --- a/apps/ui/dropdown/src/lib/dropdown.scss +++ b/apps/ui/dropdown/src/lib/dropdown.scss @@ -4,19 +4,19 @@ @apply relative; .ui-dropdown-wrapper { - @apply flex flex-col bg-white rounded-card; + @apply flex flex-col bg-white rounded; } [uiDropdownItem] { - @apply bg-white text-base outline-none border-none px-4 py-3 text-left; + @apply bg-white text-p2 outline-none border-none px-4 py-3 text-left; } [uiDropdownItem]:first-child { - @apply rounded-t-card; + @apply rounded-t; } [uiDropdownItem]:last-child { - @apply rounded-b-card; + @apply rounded-b; } [uiDropdownItem]:hover, diff --git a/apps/ui/filter/src/lib/filter-group/components/range-filter/range-filter.component.scss b/apps/ui/filter/src/lib/filter-group/components/range-filter/range-filter.component.scss index cda67ef26..14164ddf6 100644 --- a/apps/ui/filter/src/lib/filter-group/components/range-filter/range-filter.component.scss +++ b/apps/ui/filter/src/lib/filter-group/components/range-filter/range-filter.component.scss @@ -1,5 +1,5 @@ .range-filter-headline { - @apply font-semibold text-base; + @apply font-semibold text-p2; } .range-input-wrapper { @@ -18,6 +18,6 @@ } .range-filter-error { - @apply font-semibold text-base; + @apply font-semibold text-p2; color: #f70400; } diff --git a/apps/ui/filter/src/lib/next/filter-group/filter-filter-group-filter/filter-filter-group-filter.component.scss b/apps/ui/filter/src/lib/next/filter-group/filter-filter-group-filter/filter-filter-group-filter.component.scss index f8a78eba7..5250c8f5f 100644 --- a/apps/ui/filter/src/lib/next/filter-group/filter-filter-group-filter/filter-filter-group-filter.component.scss +++ b/apps/ui/filter/src/lib/next/filter-group/filter-filter-group-filter/filter-filter-group-filter.component.scss @@ -12,7 +12,7 @@ ui-icon { max-height: calc(100vh - 377px); .ui-input { - @apply flex flex-row items-center border-none outline-none p-4 font-bold text-base bg-white text-black text-left rounded-card transition transform; + @apply flex flex-row items-center border-none outline-none p-4 font-bold text-p2 bg-white text-black text-left rounded transition transform; } .has-options { diff --git a/apps/ui/filter/src/lib/next/filter-group/filter-input-group-main/filter-input-group-main.component.scss b/apps/ui/filter/src/lib/next/filter-group/filter-input-group-main/filter-input-group-main.component.scss index 2241b39f6..8de057de2 100644 --- a/apps/ui/filter/src/lib/next/filter-group/filter-input-group-main/filter-input-group-main.component.scss +++ b/apps/ui/filter/src/lib/next/filter-group/filter-input-group-main/filter-input-group-main.component.scss @@ -3,7 +3,7 @@ } .info-tooltip-button { - @apply border-font-customer border-2 border-solid bg-white rounded-md text-base font-bold absolute; + @apply border-font-customer border-2 border-solid bg-white rounded-md text-p2 font-bold absolute; border-style: outset; width: 31px; height: 31px; diff --git a/apps/ui/filter/src/lib/next/order-by-filter/order-by-filter.component.scss b/apps/ui/filter/src/lib/next/order-by-filter/order-by-filter.component.scss index 7edc535a1..882815eca 100644 --- a/apps/ui/filter/src/lib/next/order-by-filter/order-by-filter.component.scss +++ b/apps/ui/filter/src/lib/next/order-by-filter/order-by-filter.component.scss @@ -8,7 +8,7 @@ } .order-by-filter-button { - @apply bg-transparent outline-none border-none text-regular font-bold flex flex-row justify-center items-center m-0 py-2 px-2; + @apply bg-transparent outline-none border-none text-p2 font-bold flex flex-row justify-center items-center m-0 py-2 px-2; } ::ng-deep .tablet ui-order-by-filter .order-by-filter-button { diff --git a/apps/ui/filter/src/lib/next/shared/filter-input-chip/filter-input-chip.component.scss b/apps/ui/filter/src/lib/next/shared/filter-input-chip/filter-input-chip.component.scss index 701a0689b..346df6c15 100644 --- a/apps/ui/filter/src/lib/next/shared/filter-input-chip/filter-input-chip.component.scss +++ b/apps/ui/filter/src/lib/next/shared/filter-input-chip/filter-input-chip.component.scss @@ -3,7 +3,7 @@ } button.ui-filter-chip { - @apply grid grid-flow-col gap-2 items-center rounded-full text-base px-4 py-3 bg-white text-inactive-customer border-none font-bold; + @apply grid grid-flow-col gap-2 items-center rounded-full text-p2 px-4 py-3 bg-white text-inactive-customer border-none font-bold; } /** styling branch bereich **/ diff --git a/apps/ui/filter/src/lib/next/shared/filter-input-options/filter-input-option-date-range/filter-input-option-date-range.component.scss b/apps/ui/filter/src/lib/next/shared/filter-input-options/filter-input-option-date-range/filter-input-option-date-range.component.scss index 323bc9003..40e06514d 100644 --- a/apps/ui/filter/src/lib/next/shared/filter-input-options/filter-input-option-date-range/filter-input-option-date-range.component.scss +++ b/apps/ui/filter/src/lib/next/shared/filter-input-options/filter-input-option-date-range/filter-input-option-date-range.component.scss @@ -10,7 +10,7 @@ @apply font-bold; button.cta-picker { - @apply bg-transparent text-base outline-none border-none font-bold inline-flex flex-row items-center justify-between; + @apply bg-transparent text-p2 outline-none border-none font-bold inline-flex flex-row items-center justify-between; width: 100px; } diff --git a/apps/ui/filter/src/lib/next/shared/filter-input-options/filter-input-option-number-range/filter-input-option-number-range.component.scss b/apps/ui/filter/src/lib/next/shared/filter-input-options/filter-input-option-number-range/filter-input-option-number-range.component.scss index 22f58c615..270d48d63 100644 --- a/apps/ui/filter/src/lib/next/shared/filter-input-options/filter-input-option-number-range/filter-input-option-number-range.component.scss +++ b/apps/ui/filter/src/lib/next/shared/filter-input-options/filter-input-option-number-range/filter-input-option-number-range.component.scss @@ -12,7 +12,7 @@ } .ui-filter-date-range-validation { - @apply text-brand text-base font-bold; + @apply text-brand text-p2 font-bold; } ui-form-control input { diff --git a/apps/ui/filter/src/lib/next/shared/filter-input-options/filter-input-options.component.scss b/apps/ui/filter/src/lib/next/shared/filter-input-options/filter-input-options.component.scss index 7cb01dedb..afc96c4f0 100644 --- a/apps/ui/filter/src/lib/next/shared/filter-input-options/filter-input-options.component.scss +++ b/apps/ui/filter/src/lib/next/shared/filter-input-options/filter-input-options.component.scss @@ -3,12 +3,12 @@ } .input-desription { - @apply my-0 px-4 font-bold text-base; + @apply my-0 px-4 font-bold text-p2; } .input-options-wrapper { grid-template-rows: auto 1fr; - @apply grid bg-white rounded-card; + @apply grid bg-white rounded; } .hidden-overflow { @@ -19,7 +19,7 @@ @apply grid grid-flow-col justify-end items-center mb-2; button { - @apply bg-transparent p-4 text-base outline-none border-none font-semibold text-inactive-customer; + @apply bg-transparent p-4 text-p2 outline-none border-none font-semibold text-inactive-customer; } &.header-shadow { diff --git a/apps/ui/filter/src/lib/next/shared/filter-input/input-text/input-text.component.html b/apps/ui/filter/src/lib/next/shared/filter-input/input-text/input-text.component.html index c2666a50c..b8ffa374b 100644 --- a/apps/ui/filter/src/lib/next/shared/filter-input/input-text/input-text.component.html +++ b/apps/ui/filter/src/lib/next/shared/filter-input/input-text/input-text.component.html @@ -1,4 +1,4 @@ -

Ungültige {{ input?.label }}

+

Ungültige {{ input?.label }}

diff --git a/apps/ui/filter/src/lib/next/shared/filter-input/input-text/input-text.component.ts b/apps/ui/filter/src/lib/next/shared/filter-input/input-text/input-text.component.ts index fd494f52b..a7c92ff13 100644 --- a/apps/ui/filter/src/lib/next/shared/filter-input/input-text/input-text.component.ts +++ b/apps/ui/filter/src/lib/next/shared/filter-input/input-text/input-text.component.ts @@ -22,6 +22,12 @@ export class UiFilterInputTextComponent extends AbstractUiFilterInputDirective i this.control.setValue(this.value); this.updateValidator(); + const uiInputChangesSub = this.uiInput?.changes?.subscribe((changes) => { + if (this.control.value !== changes?.target?.value) this.control.setValue(changes?.target?.value); + + this.updateValidator(); + }); + const onInputChangeSub = this.onUiInputChange$.subscribe((input) => { if (this.control.value !== input.value) this.control.setValue(input.value); @@ -32,6 +38,7 @@ export class UiFilterInputTextComponent extends AbstractUiFilterInputDirective i if (this.value !== value) this.setValue(value); }); + this._subscriptions.add(uiInputChangesSub); this._subscriptions.add(onInputChangeSub); this._subscriptions.add(onControlValueChangeSub); } diff --git a/apps/ui/filter/src/lib/selected-filter-options/components/selected-filter-options.component.scss b/apps/ui/filter/src/lib/selected-filter-options/components/selected-filter-options.component.scss index 3585a7f26..df9a9ed35 100644 --- a/apps/ui/filter/src/lib/selected-filter-options/components/selected-filter-options.component.scss +++ b/apps/ui/filter/src/lib/selected-filter-options/components/selected-filter-options.component.scss @@ -6,11 +6,11 @@ } .filters-clear { - @apply bg-transparent text-brand border-none outline-none text-cta-l font-bold; + @apply bg-transparent text-brand border-none outline-none text-p1 font-bold; } .filter-option { - @apply flex flex-row items-baseline text-cta-l font-bold gap-2; + @apply flex flex-row items-baseline text-p1 font-bold gap-2; } .filter-option.collapsed { @@ -27,5 +27,5 @@ .display-more, .display-less { - @apply flex items-baseline gap-2 bg-transparent text-ucla-blue border-none outline-none text-cta-l font-bold; + @apply flex items-baseline gap-2 bg-transparent text-ucla-blue border-none outline-none text-p1 font-bold; } diff --git a/apps/ui/form-control/src/lib/ui-form-control.component.scss b/apps/ui/form-control/src/lib/ui-form-control.component.scss index 24890b5df..889c40002 100644 --- a/apps/ui/form-control/src/lib/ui-form-control.component.scss +++ b/apps/ui/form-control/src/lib/ui-form-control.component.scss @@ -3,11 +3,11 @@ } button.clear { - @apply bg-transparent text-ucla-blue border-none outline-none font-bold text-regular; + @apply bg-transparent text-ucla-blue border-none outline-none font-bold text-p2; } .hint { - @apply text-brand text-x-small font-bold; + @apply text-brand text-p4 font-bold; &.readonly-hint { @apply text-inactive-branch font-normal; @@ -26,7 +26,7 @@ button.clear { } input:not([type='radio']):not([type='checkbox']) { - @apply outline-none border-none font-bold text-cta-l; + @apply outline-none border-none font-bold text-p1; &:disabled, &:read-only { @@ -115,7 +115,7 @@ button.clear { @apply relative mt-px-20; label { - @apply absolute left-0 font-bold text-cta-l pointer-events-none text-ucla-blue; + @apply absolute left-0 font-bold text-p1 pointer-events-none text-ucla-blue; top: 20px; transition: 250ms all ease-in-out; } @@ -125,18 +125,10 @@ button.clear { bottom: -21px; } - // ::ng-deep input:focus ~ label, - // ::ng-deep input:not(.empty) ~ label, - // ::ng-deep ui-select.toggled ~ label, - // ::ng-deep ui-select:not(.empty) ~ label { - // @apply top-0 text-small font-semibold; - // // font-size: 10px; - // } - .input-wrapper.focused, .input-wrapper:not(.empty) { label { - @apply top-0 text-small font-semibold; + @apply top-0 text-p3 font-semibold; } } } diff --git a/apps/ui/form-field/src/lib/form-field.component.scss b/apps/ui/form-field/src/lib/form-field.component.scss index 8a9ad84e3..d253a1b34 100644 --- a/apps/ui/form-field/src/lib/form-field.component.scss +++ b/apps/ui/form-field/src/lib/form-field.component.scss @@ -17,7 +17,7 @@ .ui-input:focus + ui-label, .ui-input:not(:placeholder-shown) + ui-label { - @apply top-0 left-0 text-sm; + @apply top-0 left-0 text-p3; } .ui-input::placeholder { diff --git a/apps/ui/modal/src/lib/error-modal/error-modal.component.scss b/apps/ui/modal/src/lib/error-modal/error-modal.component.scss index 589f23992..25db73b51 100644 --- a/apps/ui/modal/src/lib/error-modal/error-modal.component.scss +++ b/apps/ui/modal/src/lib/error-modal/error-modal.component.scss @@ -7,12 +7,12 @@ } .message { - @apply text-base text-center whitespace-pre-line break-words; + @apply text-p2 text-center whitespace-pre-line break-words; } .actions { @apply text-center; button { - @apply px-5 py-3 mt-4 bg-brand text-white text-cta-l rounded-full border-none outline-none; + @apply px-5 py-3 mt-4 bg-brand text-white text-p1 rounded-full border-none outline-none; } } diff --git a/apps/ui/modal/src/lib/message-modal.component.scss b/apps/ui/modal/src/lib/message-modal.component.scss index 1af1d0c32..9734ac72b 100644 --- a/apps/ui/modal/src/lib/message-modal.component.scss +++ b/apps/ui/modal/src/lib/message-modal.component.scss @@ -3,12 +3,12 @@ } .message { - @apply text-base text-center whitespace-pre my-8; + @apply text-p2 text-center whitespace-pre my-8; } .actions { @apply text-center; button { - @apply px-5 py-3 bg-brand text-white text-cta-l rounded-full border-none outline-none; + @apply px-5 py-3 bg-brand text-white text-p1 rounded-full border-none outline-none; } } diff --git a/apps/ui/modal/src/lib/modal.component.scss b/apps/ui/modal/src/lib/modal.component.scss index 0e2d0303a..637e00f3d 100644 --- a/apps/ui/modal/src/lib/modal.component.scss +++ b/apps/ui/modal/src/lib/modal.component.scss @@ -1,5 +1,5 @@ :host { - @apply block relative mx-auto box-border w-full bg-white py-4 rounded-card; + @apply block relative mx-auto box-border w-full bg-white py-4 rounded; max-width: calc(100vw - 2rem); } @@ -26,7 +26,7 @@ } .modal-title { - @apply text-card-sub font-bold text-center py-5 whitespace-pre-wrap; + @apply text-xl font-bold text-center py-5 whitespace-pre-wrap; } ::ng-deep .branch ui-modal .modal-close-btn { diff --git a/apps/ui/modal/src/lib/prompt-modal/prompt-modal.component.scss b/apps/ui/modal/src/lib/prompt-modal/prompt-modal.component.scss index 4a8cc584d..590910f56 100644 --- a/apps/ui/modal/src/lib/prompt-modal/prompt-modal.component.scss +++ b/apps/ui/modal/src/lib/prompt-modal/prompt-modal.component.scss @@ -3,7 +3,7 @@ } .message { - @apply text-base text-center whitespace-pre-line break-words my-4; + @apply text-p2 text-center whitespace-pre-line break-words my-4; } input { @@ -18,10 +18,10 @@ input { } button.cancel { - @apply px-5 py-3 bg-white text-brand text-cta-l rounded-full border-none outline-none; + @apply px-5 py-3 bg-white text-brand text-p1 rounded-full border-none outline-none; } button.confirm { - @apply px-5 py-3 bg-brand text-white text-cta-l rounded-full border-none outline-none; + @apply px-5 py-3 bg-brand text-white text-p1 rounded-full border-none outline-none; } } diff --git a/apps/ui/notes/src/lib/ui-notes.component.scss b/apps/ui/notes/src/lib/ui-notes.component.scss index 76ba70f60..ebe3bd42b 100644 --- a/apps/ui/notes/src/lib/ui-notes.component.scss +++ b/apps/ui/notes/src/lib/ui-notes.component.scss @@ -6,15 +6,15 @@ @apply flex flex-row items-center; textarea { - @apply flex-grow text-regular h-12 outline-none w-full px-3 border-disabled-branch border-solid border-2 rounded-card pt-3; + @apply flex-grow text-p2 h-12 outline-none w-full px-3 border-disabled-branch border-solid border-2 rounded pt-3; } textarea::placeholder { - @apply font-bold text-regular text-inactive-branch mt-2; + @apply font-bold text-p2 text-inactive-branch mt-2; } .cta-save { - @apply text-cta-l border-none outline-none font-bold text-brand bg-transparent ml-4; + @apply text-p1 border-none outline-none font-bold text-brand bg-transparent ml-4; } } @@ -30,7 +30,7 @@ } .note-date { - @apply text-sm font-semibold text-inactive-branch mt-1; + @apply text-p3 font-semibold text-inactive-branch mt-1; } } } diff --git a/apps/ui/quantity-dropdown/src/lib/quantity-dropdown-content/quantity-dropdown-content.component.scss b/apps/ui/quantity-dropdown/src/lib/quantity-dropdown-content/quantity-dropdown-content.component.scss index 20b3e23fe..764971617 100644 --- a/apps/ui/quantity-dropdown/src/lib/quantity-dropdown-content/quantity-dropdown-content.component.scss +++ b/apps/ui/quantity-dropdown/src/lib/quantity-dropdown-content/quantity-dropdown-content.component.scss @@ -1,15 +1,15 @@ .quantity-list { - @apply flex flex-col bg-white rounded-card shadow-card z-dropdown; + @apply flex flex-col bg-white rounded shadow-card z-dropdown; button.quantity-list-item { - @apply flex flex-row justify-between items-center outline-none border-none bg-white px-4 py-2 text-base text-left; + @apply flex flex-row justify-between items-center outline-none border-none bg-white px-4 py-2 text-p2 text-left; &:first-child { - @apply rounded-t-card; + @apply rounded-t; } &:last-child { - @apply rounded-b-card; + @apply rounded-b; } &.selected { diff --git a/apps/ui/quantity-dropdown/src/lib/quantity-dropdown.component.scss b/apps/ui/quantity-dropdown/src/lib/quantity-dropdown.component.scss index f4c4d234c..ed16a0329 100644 --- a/apps/ui/quantity-dropdown/src/lib/quantity-dropdown.component.scss +++ b/apps/ui/quantity-dropdown/src/lib/quantity-dropdown.component.scss @@ -1,5 +1,5 @@ :host { - @apply inline-flex flex-row box-border items-center text-base; + @apply inline-flex flex-row box-border items-center text-p2; } .backdrop { @@ -11,7 +11,7 @@ } button.action { - @apply bg-white text-brand font-bold text-base outline-none border-none pr-0; + @apply bg-white text-brand font-bold text-p2 outline-none border-none pr-0; &:disabled { @apply text-inactive-customer; @@ -19,7 +19,7 @@ button.action { } button.current-quantity { - @apply flex flex-row justify-between items-center bg-white text-base outline-none border-none text-left font-bold w-full px-0 mx-0; + @apply flex flex-row justify-between items-center bg-white text-p2 outline-none border-none text-left font-bold w-full px-0 mx-0; ui-icon { @apply ml-2; @@ -27,21 +27,21 @@ button.current-quantity { } input.current-quantity { - @apply bg-white text-base outline-none border-none text-left font-bold w-full; + @apply bg-white text-p2 outline-none border-none text-left font-bold w-full; } .quantity-list { - @apply flex flex-col bg-white rounded-card absolute -top-12 left-0 right-0 shadow-card z-dropdown; + @apply flex flex-col bg-white rounded absolute -top-12 left-0 right-0 shadow-card z-dropdown; button.quantity-list-item { - @apply flex flex-row justify-between items-center outline-none border-none bg-white px-4 py-2 text-base text-left; + @apply flex flex-row justify-between items-center outline-none border-none bg-white px-4 py-2 text-p2 text-left; &:first-child { - @apply rounded-t-card; + @apply rounded-t; } &:last-child { - @apply rounded-b-card; + @apply rounded-b; } &.selected { diff --git a/apps/ui/scroll-container/src/lib/content-loader/content-loader.component.scss b/apps/ui/scroll-container/src/lib/content-loader/content-loader.component.scss index 1bd09eec7..4ebb74e1d 100644 --- a/apps/ui/scroll-container/src/lib/content-loader/content-loader.component.scss +++ b/apps/ui/scroll-container/src/lib/content-loader/content-loader.component.scss @@ -1,5 +1,5 @@ .loading-text { - @apply mt-2 text-center font-semibold text-base text-inactive-branch; + @apply mt-2 text-center font-semibold text-p2 text-inactive-branch; } ::ng-deep .customer ui-content-loader .loading-text { diff --git a/apps/ui/scroll-container/src/lib/skeleton-loader/skeleton-loader.component.scss b/apps/ui/scroll-container/src/lib/skeleton-loader/skeleton-loader.component.scss index 733adf344..eb6c038cd 100644 --- a/apps/ui/scroll-container/src/lib/skeleton-loader/skeleton-loader.component.scss +++ b/apps/ui/scroll-container/src/lib/skeleton-loader/skeleton-loader.component.scss @@ -62,7 +62,7 @@ } .thumbnail { - @apply bg-ucla-blue rounded-card mr-3; + @apply bg-ucla-blue rounded mr-3; width: 63px; height: 90px; } diff --git a/apps/ui/searchbox/src/lib/next/searchbox.component.html b/apps/ui/searchbox/src/lib/next/searchbox.component.html index 550c5373a..52b20d875 100644 --- a/apps/ui/searchbox/src/lib/next/searchbox.component.html +++ b/apps/ui/searchbox/src/lib/next/searchbox.component.html @@ -1,6 +1,7 @@