sxhundred/ISA-Frontend
1
0
Fork 0
mirror of https://dev.azure.com/hugendubel/ISA/_git/ISA-Frontend synced 2025-12-28 22:42:11 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'feature/responsive-customer-orders' into feature/responsive-customer-orders-breakpoints

Browse Source
This commit is contained in:
Lorenz Hilpert
2023-05-24 15:45:20 +02:00
parent 8c424bab43 c79a1cdad1
commit ddd1b81d0d
30 changed files with 558 additions and 480 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
angular.json
View File

@@ -1504,5 +1504,8 @@
}
}
}
},
"cli": {
"analytics": false
}
}

11
apps/page/catalog/src/lib/article-search/search-filter/search-filter.component.html
View File

@@ -1,10 +1,13 @@
<ng-container *ngIf="filter$ | async; let filter">
<div class="catalog-search-filter-content">
<button (click)="closeFilter()" class="btn-close" type="button">
<ui-icon icon="close" size="20px"></ui-icon>
</button>
<div class="w-full flex flex-row justify-end items-center">
<button (click)="clearFilter(filter)" class="text-[#0556B4] mr-[0.8125rem]">Alle Filter entfernen</button>
<button class="text-black p-4 outline-none border-none bg-transparent" type="button" (click)="closeFilter()">
<ui-icon icon="close" size="15px"></ui-icon>
</button>
</div>
<div class="catalog-search-filter-content-main">
<div class="catalog-search-filter-content-main -mt-12">
<h1 class="text-2xl text-[1.625rem] font-bold text-center pt-6 pb-10">Filter</h1>
<shared-filter
[filter]="filter"

4
apps/page/catalog/src/lib/article-search/search-filter/search-filter.component.scss
View File

@@ -6,10 +6,6 @@
@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;

4
apps/page/catalog/src/lib/article-search/search-filter/search-filter.component.ts
View File

@@ -108,6 +108,10 @@ export class ArticleSearchFilterComponent implements OnInit, OnDestroy {
});
}
clearFilter(value: Filter) {
value.unselectAll();
}
resetFilter(value: Filter) {
const queryParams = { main_qs: value?.getQueryParams()?.main_qs || '' };
this.articleSearch.setDefaultFilter(queryParams);

2
apps/page/catalog/src/lib/article-search/search-results/search-result-item.component.html
View File

@@ -1,5 +1,5 @@
<a
class="page-search-result-item__item-card p-5 desktop-small:px-4 desktop-small:py-[0.625rem] h-[13.25rem] desktop-small:h-[11.3125rem] bg-white border border-solid border-transparent rounded-card"
class="page-search-result-item__item-card hover p-5 desktop-small:px-4 desktop-small:py-[0.625rem] h-[13.25rem] desktop-small:h-[11.3125rem] bg-white border border-solid border-transparent rounded-card"
[class.page-search-result-item__item-card-main]="mainOutletActive$ | async"
[routerLink]="detailsPath"
[routerLinkActive]="!isTablet && !(mainOutletActive$ | async) ? 'active' : ''"

3
apps/page/catalog/src/lib/article-search/search-results/search-result-item.component.scss
View File

@@ -70,7 +70,8 @@
box-shadow: 0px 6px 18px rgba(0, 0, 0, 0.197935);
}
.active {
.active,
.hover:hover {
@apply bg-[#D8DFE5] border border-solid border-[#0556B4];
.page-search-result-item__item-select-bullet {

2
apps/page/catalog/src/lib/article-search/search-results/search-results.component.ts
View File

@@ -154,7 +154,7 @@ export class ArticleSearchResultsComponent implements OnInit, OnDestroy {
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._navigationService.mainOutletActive(this.route)) {
if ((state.hits === 1 && this.isTablet) || (!this.isTablet && !this._navigationService.mainOutletActive(this.route))) {
const item = state.items.find((f) => f);
this._navigationService.navigateToDetails({
processId,

158
apps/page/customer-order/src/lib/customer-order-details/customer-order-details.component.ts
View File

@@ -193,37 +193,37 @@ export class CustomerOrderDetailsComponent extends ComponentStore<CustomerOrderD
}
navigateToEditPage(orderItem: OrderItemListItemDTO) {
if (this.isTablet) {
this._router.navigate([this.getEditPath(orderItem)], {
queryParams: { buyerNumber: orderItem.buyerNumber, archive: this.archive },
});
} else {
this._router.navigate(this.getEditPathDesktop(orderItem), {
queryParamsHandling: 'preserve',
queryParams: { buyerNumber: orderItem.buyerNumber, archive: this.archive },
});
}
// if (this.isTablet) {
this._router.navigate([this.getEditPath(orderItem)], {
queryParams: { buyerNumber: orderItem.buyerNumber, archive: this.archive },
});
// } else {
// this._router.navigate(this.getEditPathDesktop(orderItem), {
// queryParamsHandling: 'preserve',
// queryParams: { buyerNumber: orderItem.buyerNumber, archive: this.archive },
// });
// }
}
navigateToDetailsPage(item: OrderItemListItemDTO) {
if (this.isTablet) {
this._router.navigate([this.getDetailsPath(item)], {
queryParams: { buyerNumber: item.buyerNumber, archive: this.archive },
});
} else {
this._router.navigate(this.getDetailsPathDesktop(item), {
queryParamsHandling: 'preserve',
queryParams: { buyerNumber: item.buyerNumber, archive: this.archive },
});
}
// if (this.isTablet) {
this._router.navigate([this.getDetailsPath(item)], {
queryParams: { buyerNumber: item.buyerNumber, archive: this.archive },
});
// } else {
// this._router.navigate(this.getDetailsPathDesktop(item), {
// queryParamsHandling: 'preserve',
// queryParams: { buyerNumber: item.buyerNumber, archive: this.archive },
// });
// }
}
navigateToLandingPage() {
if (this.isTablet) {
this._router.navigate([`/kunde/${this.processId}/order`]);
} else {
this._router.navigate(['/kunde', this.processId, 'order', { outlets: { main: null, left: 'search', right: 'filter' } }]);
}
// if (this.isTablet) {
this._router.navigate([`/kunde/${this.processId}/order`]);
// } else {
// this._router.navigate(['/kunde', this.processId, 'order', { outlets: { main: null, left: 'search', right: 'filter' } }]);
// }
}
async actionHandled(handler: { orderItemsContext: OrderItemsContext; command: string; navigation: 'details' | 'main' | 'reservation' }) {
@@ -242,33 +242,33 @@ export class CustomerOrderDetailsComponent extends ComponentStore<CustomerOrderD
: `/kunde/${this.processId}/order/details/order/${encodeURIComponent(item?.orderNumber)}/${item?.processingStatus}`;
}
getDetailsPathDesktop(item: OrderItemListItemDTO) {
return item?.compartmentCode
? [
'/kunde',
this.processId,
'order',
{
outlets: {
main: null,
left: 'results',
right: ['details', 'compartment', encodeURIComponent(item?.compartmentCode), item?.processingStatus],
},
},
]
: [
'/kunde',
this.processId,
'order',
{
outlets: {
main: null,
left: 'results',
right: ['details', 'order', encodeURIComponent(item?.orderNumber), item?.processingStatus],
},
},
];
}
// getDetailsPathDesktop(item: OrderItemListItemDTO) {
// return item?.compartmentCode
// ? [
// '/kunde',
// this.processId,
// 'order',
// {
// outlets: {
// main: null,
// left: 'results',
// right: ['details', 'compartment', encodeURIComponent(item?.compartmentCode), item?.processingStatus],
// },
// },
// ]
// : [
// '/kunde',
// this.processId,
// 'order',
// {
// outlets: {
// main: null,
// left: 'results',
// right: ['details', 'order', encodeURIComponent(item?.orderNumber), item?.processingStatus],
// },
// },
// ];
// }
getEditPath(item: OrderItemListItemDTO) {
return item?.compartmentCode
@@ -276,31 +276,31 @@ export class CustomerOrderDetailsComponent extends ComponentStore<CustomerOrderD
: `/kunde/${this.processId}/order/details/order/${encodeURIComponent(item?.orderNumber)}/${item?.processingStatus}/edit`;
}
getEditPathDesktop(item: OrderItemListItemDTO) {
return item?.compartmentCode
? [
'/kunde',
this.processId,
'order',
{
outlets: {
main: null,
left: 'results',
right: ['details', 'compartment', encodeURIComponent(item?.compartmentCode), item?.processingStatus, 'edit'],
},
},
]
: [
'/kunde',
this.processId,
'order',
{
outlets: {
main: null,
left: 'results',
right: ['details', 'order', encodeURIComponent(item?.orderNumber), item?.processingStatus, 'edit'],
},
},
];
}
// getEditPathDesktop(item: OrderItemListItemDTO) {
// return item?.compartmentCode
// ? [
// '/kunde',
// this.processId,
// 'order',
// {
// outlets: {
// main: null,
// left: 'results',
// right: ['details', 'compartment', encodeURIComponent(item?.compartmentCode), item?.processingStatus, 'edit'],
// },
// },
// ]
// : [
// '/kunde',
// this.processId,
// 'order',
// {
// outlets: {
// main: null,
// left: 'results',
// right: ['details', 'order', encodeURIComponent(item?.orderNumber), item?.processingStatus, 'edit'],
// },
// },
// ];
// }
}

90
apps/page/customer-order/src/lib/customer-order-edit/customer-order-edit.component.ts
View File

@@ -91,51 +91,51 @@ export class CustomerOrderEditComponent implements OnInit {
const buyerNumber = this._activatedRoute.snapshot.queryParams.buyerNumber;
const archive = this._activatedRoute.snapshot.queryParams.archive;
if (this.isTablet) {
compartmentCode
? this._router.navigate(
[`/kunde/${this.processId}/order/details/compartment/${encodeURIComponent(compartmentCode)}/${processingStatus}`],
{ queryParams: { buyerNumber, archive } }
)
: this._router.navigate([`/kunde/${this.processId}/order/details/order/${encodeURIComponent(orderNumber)}/${processingStatus}`], {
queryParams: { buyerNumber, archive },
});
} else {
compartmentCode
? this._router.navigate(
[
'/kunde',
this.processId,
'order',
{
outlets: {
main: null,
left: 'results',
right: ['details', 'compartment', encodeURIComponent(compartmentCode), processingStatus],
},
},
],
{ queryParamsHandling: 'preserve', queryParams: { buyerNumber, archive } }
)
: this._router.navigate(
[
'/kunde',
this.processId,
'order',
{
outlets: {
main: null,
left: 'results',
right: ['details', 'order', encodeURIComponent(orderNumber), processingStatus],
},
},
],
{
queryParamsHandling: 'preserve',
queryParams: { buyerNumber, archive },
}
);
}
// if (this.isTablet) {
compartmentCode
? this._router.navigate(
[`/kunde/${this.processId}/order/details/compartment/${encodeURIComponent(compartmentCode)}/${processingStatus}`],
{ queryParams: { buyerNumber, archive } }
)
: this._router.navigate([`/kunde/${this.processId}/order/details/order/${encodeURIComponent(orderNumber)}/${processingStatus}`], {
queryParams: { buyerNumber, archive },
});
// } else {
// compartmentCode
// ? this._router.navigate(
// [
// '/kunde',
// this.processId,
// 'order',
// {
// outlets: {
// main: null,
// left: 'results',
// right: ['details', 'compartment', encodeURIComponent(compartmentCode), processingStatus],
// },
// },
// ],
// { queryParamsHandling: 'preserve', queryParams: { buyerNumber, archive } }
// )
// : this._router.navigate(
// [
// '/kunde',
// this.processId,
// 'order',
// {
// outlets: {
// main: null,
// left: 'results',
// right: ['details', 'order', encodeURIComponent(orderNumber), processingStatus],
// },
// },
// ],
// {
// queryParamsHandling: 'preserve',
// queryParams: { buyerNumber, archive },
// }
// );
// }
}
openModalIfItemsHaveDifferentCustomers(items: OrderItemListItemDTO[]) {

118
apps/page/customer-order/src/lib/customer-order-routing.module.ts
View File

@@ -7,64 +7,64 @@ import { CustomerOrderSearchMainComponent, CustomerOrderSearchMainModule } from
import { CustomerOrderSearchResultsComponent, CustomerOrderSearchResultsModule } from './customer-order-search/search-results';
import { CustomerOrderComponent } from './customer-order.component';
const auxiliaryRoutes = [
{
path: 'search',
component: CustomerOrderSearchComponent,
outlet: 'left',
children: [
{
path: '',
component: CustomerOrderSearchMainComponent,
},
],
},
{
path: 'filter',
component: CustomerOrderSearchFilterComponent,
outlet: 'right',
},
{
path: 'filter/:compartmentCode/:processingStatus',
component: CustomerOrderSearchFilterComponent,
outlet: 'right',
},
{
path: 'filter/:orderNumber/:processingStatus',
component: CustomerOrderSearchFilterComponent,
outlet: 'right',
},
{
path: 'results',
component: CustomerOrderSearchResultsComponent,
outlet: 'left',
},
{
path: 'results',
component: CustomerOrderSearchResultsComponent,
outlet: 'main',
},
{
path: 'details/compartment/:compartmentCode/:processingStatus',
component: CustomerOrderDetailsComponent,
outlet: 'right',
},
{
path: 'details/order/:orderNumber/:processingStatus',
component: CustomerOrderDetailsComponent,
outlet: 'right',
},
{
path: 'details/compartment/:compartmentCode/:processingStatus/edit',
component: CustomerOrderEditComponent,
outlet: 'right',
},
{
path: 'details/order/:orderNumber/:processingStatus/edit',
component: CustomerOrderEditComponent,
outlet: 'right',
},
];
// const auxiliaryRoutes = [
// {
// path: 'search',
// component: CustomerOrderSearchComponent,
// outlet: 'left',
// children: [
// {
// path: '',
// component: CustomerOrderSearchMainComponent,
// },
// ],
// },
// {
// path: 'filter',
// component: CustomerOrderSearchFilterComponent,
// outlet: 'right',
// },
// {
// path: 'filter/:compartmentCode/:processingStatus',
// component: CustomerOrderSearchFilterComponent,
// outlet: 'right',
// },
// {
// path: 'filter/:orderNumber/:processingStatus',
// component: CustomerOrderSearchFilterComponent,
// outlet: 'right',
// },
// {
// path: 'results',
// component: CustomerOrderSearchResultsComponent,
// outlet: 'left',
// },
// {
// path: 'results',
// component: CustomerOrderSearchResultsComponent,
// outlet: 'main',
// },
// {
// path: 'details/compartment/:compartmentCode/:processingStatus',
// component: CustomerOrderDetailsComponent,
// outlet: 'right',
// },
// {
// path: 'details/order/:orderNumber/:processingStatus',
// component: CustomerOrderDetailsComponent,
// outlet: 'right',
// },
// {
// path: 'details/compartment/:compartmentCode/:processingStatus/edit',
// component: CustomerOrderEditComponent,
// outlet: 'right',
// },
// {
// path: 'details/order/:orderNumber/:processingStatus/edit',
// component: CustomerOrderEditComponent,
// outlet: 'right',
// },
// ];
const routes: Routes = [
{
@@ -99,7 +99,7 @@ const routes: Routes = [
path: 'details/order/:orderNumber/:processingStatus/edit',
component: CustomerOrderEditComponent,
},
...auxiliaryRoutes,
// ...auxiliaryRoutes,
],
},
];

6
apps/page/customer-order/src/lib/customer-order-search/customer-order-search-filter/customer-order-search-filter.component.html
View File

@@ -1,14 +1,8 @@
<ng-container *ngIf="filter$ | async; let filter">
<div class="goods-out-search-filter-content">
<!-- <button *ngIf="isTablet; else desktop" class="btn-close" type="button" (click)="close.emit()">
<ui-icon icon="close" size="20px"></ui-icon>
</button> -->
<!-- <ng-template #desktop> -->
<a class="btn-close" type="button" [routerLink]="closeFilterRouterPath" queryParamsHandling="preserve">
<ui-icon icon="close" size="20px"></ui-icon>
</a>
<!-- </ng-template> -->
<div class="goods-out-search-filter-content-main">
<h1 class="title">Filter</h1>

152
apps/page/customer-order/src/lib/customer-order-search/customer-order-search-filter/customer-order-search-filter.component.ts
View File

@@ -56,36 +56,36 @@ export class CustomerOrderSearchFilterComponent implements OnInit, OnDestroy {
}
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'];
}
// 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(
@@ -134,27 +134,27 @@ 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)]);
} else {
this._router.navigate(['/kunde', this.processId, 'order', 'results'], {
queryParams: this._goodsOutSearchStore.filter.getQueryParams(),
});
}
} else {
// if (this.isTablet) {
if (result.results.hits === 1) {
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._router.navigate([this.getDetailsPath(orderItem)]);
} 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(),
// });
// }
// }
this.close.emit();
} else {
@@ -190,31 +190,31 @@ export class CustomerOrderSearchFilterComponent implements OnInit, OnDestroy {
: `/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],
},
},
];
}
// 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],
// },
// },
// ];
// }
}

21
apps/page/customer-order/src/lib/customer-order-search/customer-order-search-filter/order-branch-id-input/order-branch-id-input.component.ts
View File

@@ -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);
}

4
apps/page/customer-order/src/lib/customer-order-search/customer-order-search.component.html
View File

@@ -1,9 +1,9 @@
<div *ngIf="isTablet" class="flex flex-row justify-end mb-4">
<!-- <div *ngIf="isTablet" class="flex flex-row justify-end mb-4">
<button class="filter" [class.active]="hasFilter$ | async" (click)="shellFilterOverlay.open()">
<ui-icon size="20px" icon="filter_alit"></ui-icon>
<span class="label">Filter</span>
</button>
</div>
</div> -->
<router-outlet></router-outlet>

96
apps/page/customer-order/src/lib/customer-order-search/search-main/customer-order-search-main.component.ts
View File

@@ -112,29 +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)], {
queryParams: this._goodsOutSearchStore.filter.getQueryParams(),
});
} else {
this._router.navigate(['/kunde', this.processId, 'order', 'results'], {
queryParams: this._goodsOutSearchStore.filter.getQueryParams(),
});
}
} else {
// if (this.isTablet) {
if (result.results.hits === 1) {
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._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';
}
@@ -170,33 +170,33 @@ 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],
},
},
];
}
// 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);

68
apps/page/customer-order/src/lib/customer-order-search/search-results/customer-order-item.component.ts
View File

@@ -75,43 +75,41 @@ export class CustomerOrderItemComponent extends ComponentStore<CustomerOrderItem
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}`,
];
}
// if (this.isTablet) {
if (compartmentCode) {
return [
`/kunde/${this._applicationService.activatedProcessId}/order/details/compartment/${encodeURIComponent(
compartmentCode
)}/${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] } },
];
}
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(

29
apps/page/customer-order/src/lib/customer-order-search/search-results/customer-order-search-results.component.html
View File

@@ -30,7 +30,8 @@
[containerHeight]="25"
>
<ng-container *ngIf="processId$ | async; let processId">
<div class="page-customer-order-search__items-list" *ngFor="let bueryNumberGroup of items$ | async | groupBy: byBuyerNumberFn">
<shared-goods-in-out-order-group *ngFor="let bueryNumberGroup of items$ | async | groupBy: byBuyerNumberFn">
<!-- <div class="page-customer-order-search__items-list" *ngFor="let bueryNumberGroup of items$ | async | groupBy: byBuyerNumberFn">
<ng-container *ngIf="bueryNumberGroup.items[0]; let firstItem">
<div class="page-customer-order-search__item-header-group bg-white text-xl rounded-t-card p-4 font-bold mb-px-2">
<h3 class="mt-0 mb-4">
@@ -44,7 +45,7 @@
ans lager (nicht abgeholt) bezahlt
</h4>
</div>
</ng-container>
</ng-container> -->
<ng-container *ngFor="let orderNumberGroup of bueryNumberGroup.items | groupBy: byOrderNumberFn; let lastOrderNumber = last">
<ng-container
@@ -53,17 +54,17 @@
<ng-container
*ngFor="let compartmentCodeGroup of processingStatusGroup.items | groupBy: byCompartmentCodeFn; let lastCompartmentCode = last"
>
<!-- <shared-goods-in-out-order-group-item
*ngFor="let item of compartmentCodeGroup.items; let firstItem = first; trackBy: trackByFn"
[item]="item"
[showCompartmentCode]="firstItem"
(click)="navigateToDetails(processId, item)"
[selectable]="item | goodsOutItemSelectable: selectionRules:selectedItems"
[selected]="item | goodsOutItemSelected: selectedOrderItemSubsetIds"
(selectedChange)="setSelectedItem(item, $event)"
></shared-goods-in-out-order-group-item> -->
<shared-goods-in-out-order-group-item
*ngFor="let item of compartmentCodeGroup.items; let firstItem = first; trackBy: trackByFn"
[item]="item"
[showCompartmentCode]="firstItem"
(click)="navigateToDetails(processId, item)"
[selectable]="item | goodsOutItemSelectable: selectionRules:selectedItems"
[selected]="item | goodsOutItemSelected: selectedOrderItemSubsetIds"
(selectedChange)="setSelectedItem(item, $event)"
></shared-goods-in-out-order-group-item>
<page-customer-order-item
<!-- <page-customer-order-item
*ngFor="let item of compartmentCodeGroup.items; let firstItem = first; trackBy: trackByFn"
class="mb-px-10"
[selectable]="item | goodsOutItemSelectable: selectionRules:selectedItems"
@@ -71,7 +72,7 @@
[item]="item"
(click)="navigateToDetails(processId, item)"
(selectedChange)="setSelectedItem(item, $event)"
></page-customer-order-item>
></page-customer-order-item> -->
<div class="divider" *ngIf="!lastCompartmentCode"></div>
</ng-container>
@@ -79,7 +80,7 @@
</ng-container>
<div class="divider" *ngIf="!lastOrderNumber"></div>
</ng-container>
</div>
</shared-goods-in-out-order-group>
</ng-container>
</ui-scroll-container>

22
apps/page/customer-order/src/lib/customer-order-search/search-results/customer-order-search-results.component.scss
View File

@@ -1,5 +1,9 @@
// :host {
// @apply box-border block h-[100vh] max-h-[calc(100vh-364px)] desktop:max-h-[calc(100vh-300px)];
// }
:host {
@apply box-border block h-[100vh] max-h-[calc(100vh-364px)] desktop:max-h-[calc(100vh-300px)];
@apply block relative;
}
.empty-message {
@@ -10,10 +14,14 @@
height: 2px;
}
page-customer-order-item {
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%;
@@ -36,6 +44,12 @@ page-customer-order-item {
}
}
::ng-deep page-customer-order-search-results ui-scroll-container .scroll-container {
max-height: calc(100vh - 25.5rem) !important;
// ::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;
}
}

135
apps/page/customer-order/src/lib/customer-order-search/search-results/customer-order-search-results.component.ts
View File

@@ -104,19 +104,19 @@ export class CustomerOrderSearchResultsComponent extends ComponentStore<Customer
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'];
}
// 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(
@@ -303,64 +303,61 @@ export class CustomerOrderSearchResultsComponent extends ComponentStore<Customer
const compartmentCode = orderItem.compartmentCode;
const archive = !!this._goodsOutSearchStore.filter?.getQueryParams()?.main_archive || false;
if (this.isTablet) {
if (compartmentCode) {
this._router.navigate(
[`/kunde/${processId}/order/details/compartment/${encodeURIComponent(compartmentCode)}/${processingStatus}`],
{
queryParams: {
buyerNumber: orderItem.buyerNumber,
archive,
},
}
);
} else {
this._router.navigate([`/kunde/${processId}/order/details/order/${encodeURIComponent(orderNumber)}/${processingStatus}`], {
queryParams: {
archive,
},
});
}
// if (this.isTablet) {
if (compartmentCode) {
this._router.navigate([`/kunde/${processId}/order/details/compartment/${encodeURIComponent(compartmentCode)}/${processingStatus}`], {
queryParams: {
buyerNumber: orderItem.buyerNumber,
archive,
},
});
} else {
if (compartmentCode) {
this._router.navigate(
[
'/kunde',
processId,
'order',
{
outlets: {
main: null,
left: 'results',
right: ['details', 'compartment', encodeURIComponent(compartmentCode), processingStatus],
},
},
],
{
queryParamsHandling: 'preserve',
queryParams: {
buyerNumber: orderItem.buyerNumber,
archive,
},
}
);
} else {
this._router.navigate(
[
'/kunde',
processId,
'order',
{ outlets: { main: null, left: 'results', right: ['details', 'order', encodeURIComponent(orderNumber), processingStatus] } },
],
{
queryParamsHandling: 'preserve',
queryParams: {
archive,
},
}
);
}
this._router.navigate([`/kunde/${processId}/order/details/order/${encodeURIComponent(orderNumber)}/${processingStatus}`], {
queryParams: {
archive,
},
});
}
// } else {
// if (compartmentCode) {
// this._router.navigate(
// [
// '/kunde',
// processId,
// 'order',
// {
// outlets: {
// main: null,
// left: 'results',
// right: ['details', 'compartment', encodeURIComponent(compartmentCode), processingStatus],
// },
// },
// ],
// {
// queryParamsHandling: 'preserve',
// queryParams: {
// buyerNumber: orderItem.buyerNumber,
// archive,
// },
// }
// );
// } else {
// this._router.navigate(
// [
// '/kunde',
// processId,
// 'order',
// { outlets: { main: null, left: 'results', right: ['details', 'order', encodeURIComponent(orderNumber), processingStatus] } },
// ],
// {
// queryParamsHandling: 'preserve',
// queryParams: {
// archive,
// },
// }
// );
// }
// }
}
setSelectedItem(item: OrderItemListItemDTO, selected: boolean) {

8
apps/page/customer-order/src/lib/customer-order.component.html
View File

@@ -8,9 +8,9 @@
</shared-branch-selector>
</shared-breadcrumb>
<ng-container *ngIf="isTablet; else desktop">
<router-outlet></router-outlet>
</ng-container>
<!-- <ng-container *ngIf="isTablet; else desktop"> -->
<router-outlet></router-outlet>
<!-- </ng-container>
<ng-template #desktop>
<router-outlet name="main"></router-outlet>
@@ -23,4 +23,4 @@
<router-outlet name="right"></router-outlet>
</div>
</div>
</ng-template>
</ng-template> -->

10
apps/page/task-calendar/src/lib/components/task-searchbar/task-searchbar.component.html
View File

@@ -10,7 +10,15 @@
</button>
</div> -->
<input #autofocus="uiAutofocus" autofocus type="text" [formControl]="control" (keydown.enter)="searchTasks()" placeholder="Suchen" />
<input
id="searchbox"
#autofocus="uiAutofocus"
autofocus
type="text"
[formControl]="control"
(keydown.enter)="searchTasks()"
placeholder="Suchen"
/>
<div class="actions">
<button class="clear" (click)="clearSearch(); autofocus.focus()" *ngIf="control.value.length">

12
apps/shared/components/branch-selector/src/lib/branch-selector.component.ts
View File

@@ -207,14 +207,18 @@ export class BranchSelectorComponent implements OnInit, OnDestroy, AfterViewInit
clear() {
this.setBranch();
this.emitValues();
this.complete.next('');
this.onChange(undefined);
this.onTouched();
this.valueChange.emit(undefined);
}
emitValues(branch?: BranchDTO) {
this.onChange(branch);
this.onTouched();
this.valueChange.emit(branch);
if (!!branch) {
this.onChange(branch);
this.onTouched();
this.valueChange.emit(branch);
}
}
closeAndClearAutocomplete() {

2
apps/shared/components/filter/src/lib/shared/filter-input-options/filter-input-options.component.scss
View File

@@ -20,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-[#0556B4];
@apply bg-transparent p-4 text-base outline-none border-none text-[#0556B4];
}
&.header-shadow {

7
apps/shared/components/filter/src/lib/shared/filter-input/input-text/input-text.component.ts
View File

@@ -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);
}

15
apps/shared/components/filter/src/lib/tree/filter.ts
View File

@@ -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<string, string> {
const queryParams: Record<string, string> = {};

1
apps/shared/components/searchbox/src/lib/searchbox.component.html
View File

@@ -1,5 +1,6 @@
<div class="searchbox-input-wrapper">
<input
id="searchbox"
class="searchbox-input"
#input
type="text"

19
apps/shared/shell/src/lib/side-menu/side-menu.component.html
View File

@@ -16,19 +16,24 @@
class="customer-section grid grid-flow-row gap-6 side-menu-nav desktop:mt-6 max-h-[calc(100vh-30.625rem)]"
*ngSwitchCase="'customer'"
>
<a class="side-menu-nav-item" (click)="closeSideMenu(); resetBranch()" [routerLink]="productRoutePath$ | async">
<a class="side-menu-nav-item" (click)="closeSideMenu(); resetBranch(); focusSearchBox()" [routerLink]="productRoutePath$ | async">
<div class="side-menu-nav-item-icon">
<ui-svg-icon icon="import-contacts"></ui-svg-icon>
</div>
<span class="side-menu-nav-item-name">Artikelsuche</span>
</a>
<a class="side-menu-nav-item" (click)="closeSideMenu()" [routerLink]="[customerBasePath$ | async, 'customer']">
<a class="side-menu-nav-item" (click)="closeSideMenu(); focusSearchBox()" [routerLink]="[customerBasePath$ | async, 'customer']">
<div class="side-menu-nav-item-icon">
<ui-svg-icon icon="person"></ui-svg-icon>
</div>
<span class="side-menu-nav-item-name">Kundensuche</span>
</a>
<a class="side-menu-nav-item" *ifRole="'Store'" (click)="closeSideMenu()" [routerLink]="[customerBasePath$ | async, 'goods', 'out']">
<a
class="side-menu-nav-item"
*ifRole="'Store'"
(click)="closeSideMenu(); focusSearchBox()"
[routerLink]="[customerBasePath$ | async, 'goods', 'out']"
>
<div class="side-menu-nav-item-icon">
<ui-svg-icon icon="unarchive"></ui-svg-icon>
</div>
@@ -37,8 +42,8 @@
<a
class="side-menu-nav-item"
*ifRole="'CallCenter'"
(click)="closeSideMenu(); resetBranch()"
[routerLink]="customerOrdersPath$ | async"
(click)="closeSideMenu(); resetBranch(); focusSearchBox()"
[routerLink]="[customerBasePath$ | async, 'order']"
>
<div class="side-menu-nav-item-icon">
<ui-svg-icon icon="deployed-code"></ui-svg-icon>
@@ -56,13 +61,13 @@
</div>
<span class="side-menu-nav-item-name">Sortiment</span>
</a>
<a class="side-menu-nav-item" (click)="closeSideMenu()" [routerLink]="['/filiale', 'task-calendar']">
<a class="side-menu-nav-item" (click)="closeSideMenu(); focusSearchBox()" [routerLink]="['/filiale', 'task-calendar']">
<div class="side-menu-nav-item-icon">
<ui-svg-icon icon="event-available"></ui-svg-icon>
</div>
<span class="side-menu-nav-item-name">Tätigkeitskalender</span>
</a>
<a class="side-menu-nav-item" (click)="closeSideMenu()" [routerLink]="['/filiale', 'goods', 'in']">
<a class="side-menu-nav-item" (click)="closeSideMenu(); focusSearchBox()" [routerLink]="['/filiale', 'goods', 'in']">
<div class="side-menu-nav-item-icon">
<ui-icon icon="box_return" size="24px"></ui-icon>
</div>

28
apps/shared/shell/src/lib/side-menu/side-menu.component.ts
View File

@@ -1,4 +1,4 @@
import { Component, ChangeDetectionStrategy } from '@angular/core';
import { Component, ChangeDetectionStrategy, Inject } from '@angular/core';
import { AuthService } from '@core/auth';
import { StockService } from '@swagger/wws';
import { first, map, retry, switchMap, take } from 'rxjs/operators';
@@ -8,6 +8,7 @@ import { Router } from '@angular/router';
import { WrongDestinationModalService } from '@shared/modals/wrong-destination-modal';
import { EnvironmentService } from '@core/environment';
import { ProductCatalogNavigationService } from '@shared/services';
import { DOCUMENT } from '@angular/common';
@Component({
selector: 'shell-side-menu',
@@ -57,15 +58,15 @@ export class ShellSideMenuComponent {
})
);
customerOrdersPath$ = this.customerBasePath$.pipe(
map((basePath) => {
if (this.isTablet) {
return [basePath, 'order'];
} else {
return [basePath, 'order', { outlets: { main: null, left: 'search', right: 'filter' } }];
}
})
);
// customerOrdersPath$ = this.customerBasePath$.pipe(
// map((basePath) => {
// if (this.isTablet) {
// return [basePath, 'order'];
// } else {
// return [basePath, 'order', { outlets: { main: null, left: 'search', right: 'filter' } }];
// }
// })
// );
constructor(
private _shellService: ShellService,
@@ -75,7 +76,8 @@ export class ShellSideMenuComponent {
private _router: Router,
private readonly _wrongDestinationModalService: WrongDestinationModalService,
private _environment: EnvironmentService,
private _catalogNavigationService: ProductCatalogNavigationService
private _catalogNavigationService: ProductCatalogNavigationService,
@Inject(DOCUMENT) private readonly _document: Document
) {}
closeSideMenu() {
@@ -93,6 +95,10 @@ export class ShellSideMenuComponent {
}
}
focusSearchBox() {
this._document.getElementById('searchbox')?.focus();
}
async createProcess() {
const process = await this.createCartProcess();
this.navigateToCatalog(process);

7
apps/ui/filter/src/lib/next/shared/filter-input/input-text/input-text.component.ts
View File

@@ -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);
}

1
apps/ui/searchbox/src/lib/next/searchbox.component.html
View File

@@ -1,6 +1,7 @@
<div class="ui-searchbox-input-wrapper">
<div class="hint-wrapper">
<input
id="searchbox"
class="ui-searchbox-input"
#input
type="text"