Skip to content

Commit 0d6a204

Browse files
belsmanbelsman
committed
feat(fulfilment): fix fulfilment label
1 parent f04cdb1 commit 0d6a204

6 files changed

+153
-139
lines changed

‎packages/core/state/src/lib/+state/fulfillment/fulfillment.effects.ts

+1-7
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,6 @@ import {
2121
withLatestOrganizationData,
2222
} from '@console-core/state';
2323
import { IoRestorecommerceResourcebaseFilterOperation } from '@console-core/graphql';
24-
import { concatLatestFrom } from '@ngrx/operators';
2524

2625
@Injectable()
2726
export class FulfillmentEffects {
@@ -230,15 +229,10 @@ export class FulfillmentEffects {
230229
fulfillmentSubmitRequest$ = createEffect(() => {
231230
return this.actions$.pipe(
232231
ofType(fulfillmentActions.fulfillmentSubmitRequest),
233-
concatLatestFrom(() => [
234-
this.organizationFacade.globalOrganizationLeafId$,
235-
this.organizationFacade.globalOrganizationId$,
236-
]),
237-
switchMap(([{ payload }, leafOrg, organization]) =>
232+
switchMap(({ payload }) =>
238233
this.fulfillmentService
239234
.submit({
240235
items: [payload],
241-
scope: leafOrg || organization,
242236
})
243237
.pipe(
244238
tap((result) => {

‎packages/modules/fulfillment/src/lib/components/fulfillment-view-details.component.html

+7-68
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@
7474
mode="none"
7575
[noBorder]="true"
7676
>
77-
<vcl-data-list-header (click)="onClickLabel()">
77+
<vcl-data-list-header>
7878
<span class="my-2 rc-lv-l-heading">Labels</span>
7979
</vcl-data-list-header>
8080

@@ -86,10 +86,13 @@
8686
*ngIf="fulfillment.fulfillmentState !== 'PENDING'; else noLabel"
8787
></ng-container>
8888
<vcl-data-list-item *ngFor="let label of fulfillment.labels">
89-
<!-- TODO Click on the parcel ID and you shall see more info about the parcel... -->
9089
<div class="row justify-content-between align-items-center">
9190
<span>Parcel Id</span>
92-
<span>{{ label.parcelId }}</span>
91+
<span
92+
class="clickable-label"
93+
(click)="onClickLabel(label.parcelId)"
94+
>{{ label.parcelId }}</span
95+
>
9396
</div>
9497

9598
<div class="row justify-content-between align-items-center">
@@ -103,7 +106,7 @@
103106
[href]="label.url"
104107
target="_blank"
105108
rel="noopener noreferrer"
106-
>URL</a
109+
>Download</a
107110
>
108111
</span>
109112
</div>
@@ -117,70 +120,6 @@
117120
>
118121
</vcl-data-list>
119122

120-
<vcl-data-list
121-
mode="none"
122-
[noBorder]="true"
123-
>
124-
<vcl-data-list-header>
125-
<span class="my-2 rc-lv-l-heading">Parcel items</span>
126-
</vcl-data-list-header>
127-
128-
<ng-container
129-
*ngFor="let parcelItem of fulfillment.packaging?.parcels?.[0]?.items"
130-
>
131-
<vcl-data-list-item class="mb-2">
132-
<div>
133-
<!-- Wrapped in a div so as to allow for more props when
134-
we expand upon the item. -->
135-
<div class="row justify-content-between align-items-center">
136-
<span>Product id</span>
137-
<a
138-
[routerLink]="
139-
productRouter.view.getLink({ id: parcelItem.productId || '' })
140-
"
141-
>{{ parcelItem.productId }}</a
142-
>
143-
</div>
144-
145-
<div class="row justify-content-between align-items-center">
146-
<span>Product variant id</span>
147-
<span>{{ parcelItem.variantId }}</span>
148-
</div>
149-
150-
<div class="row justify-content-between align-items-center">
151-
<span>Quantity</span>
152-
<span>{{ parcelItem.quantity }}</span>
153-
</div>
154-
155-
<div class="row justify-content-between align-items-center">
156-
<span>Weight</span>
157-
<span>{{ parcelItem.package?.weightInKg }} Kg</span>
158-
</div>
159-
160-
<div class="row justify-content-between align-items-center">
161-
<span>Length</span>
162-
<span>{{ parcelItem.package?.sizeInCm?.length }} Cm</span>
163-
</div>
164-
165-
<div class="row justify-content-between align-items-center">
166-
<span>Width</span>
167-
<span>{{ parcelItem.package?.sizeInCm?.width }} Cm</span>
168-
</div>
169-
170-
<div class="row justify-content-between align-items-center">
171-
<span>Height</span>
172-
<span>{{ parcelItem.package?.sizeInCm?.height }} Cm</span>
173-
</div>
174-
175-
<div class="row justify-content-between align-items-center">
176-
<span>Rotatable</span>
177-
<span>{{ parcelItem.package?.rotatable }}</span>
178-
</div>
179-
</div>
180-
</vcl-data-list-item>
181-
</ng-container>
182-
</vcl-data-list>
183-
184123
<vcl-data-list
185124
mode="none"
186125
[noBorder]="true"

‎packages/modules/fulfillment/src/lib/components/fulfillment-view-details.component.ts

+29-59
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,29 @@ import {
55
OnInit,
66
} from '@angular/core';
77

8-
import { ComponentLayerRef, LayerRef, LayerService } from '@vcl/ng-vcl';
8+
import { LayerRef, LayerService } from '@vcl/ng-vcl';
99

1010
import { ROUTER } from '@console-core/config';
11+
import {
12+
IoRestorecommerceFulfillmentParcel,
13+
Maybe,
14+
} from '@console-core/graphql';
1115
import { IFulfillment } from '@console-core/types';
1216

17+
import { FulfilmentLabelModalComponent } from './view/fulfillment-label-modal.component';
18+
1319
@Component({
1420
selector: 'app-module-fulfillment-view-details',
1521
templateUrl: './fulfillment-view-details.component.html',
1622
changeDetection: ChangeDetectionStrategy.OnPush,
23+
styles: [
24+
`
25+
.clickable-label {
26+
color: #ffae44;
27+
cursor: pointer;
28+
}
29+
`,
30+
],
1731
standalone: false,
1832
})
1933
export class FulfillmentViewDetailsComponent implements OnInit {
@@ -27,74 +41,30 @@ export class FulfillmentViewDetailsComponent implements OnInit {
2741
constructor(private layerService: LayerService) {}
2842

2943
ngOnInit(): void {
30-
this.labelModalLayer = this.layerService.create(LabelModalComponent, {
31-
closeOnBackdropClick: false,
32-
closeOnEscape: false,
33-
});
44+
this.labelModalLayer = this.layerService.create(
45+
FulfilmentLabelModalComponent,
46+
{
47+
closeOnBackdropClick: false,
48+
closeOnEscape: false,
49+
}
50+
);
3451
}
3552

36-
onClickLabel() {
53+
onClickLabel(parcelId: Maybe<string> | undefined) {
54+
const parcels = (this.fulfillment.packaging?.parcels ||
55+
[]) as IoRestorecommerceFulfillmentParcel[];
56+
57+
const parcel = parcels.find((parcel) => parcel.id === parcelId);
58+
3759
this.labelModalLayer
3860
.open({
3961
data: {
4062
title: '',
63+
parcel,
4164
},
4265
})
4366
.subscribe((result) => {
4467
console.log(result?.value);
4568
});
4669
}
4770
}
48-
49-
@Component({
50-
selector: 'app-module-fulfillment-label-modal',
51-
template: `
52-
<vcl-panel-dialog
53-
[showCloseButton]="true"
54-
(close)="close()"
55-
>
56-
<vcl-panel-title>Label</vcl-panel-title>
57-
<vcl-data-list
58-
mode="none"
59-
[noBorder]="true"
60-
>
61-
<!-- <vcl-data-list-header>
62-
<h2>Kittens</h2>
63-
</vcl-data-list-header> -->
64-
<vcl-data-list-item>
65-
<ng-container *ngTemplateOutlet="labelPropTemplate"></ng-container>
66-
</vcl-data-list-item>
67-
</vcl-data-list>
68-
</vcl-panel-dialog>
69-
70-
<ng-template #labelPropTemplate>
71-
<div class="flex row justify-content-between align-items-center">
72-
<span>Quantity</span>
73-
<span>4</span>
74-
</div>
75-
</ng-template>
76-
`,
77-
styles: [
78-
`
79-
vcl-data-list-item {
80-
display: flex;
81-
flex-direction: column;
82-
}
83-
`,
84-
],
85-
changeDetection: ChangeDetectionStrategy.OnPush,
86-
standalone: false,
87-
})
88-
export class LabelModalComponent {
89-
constructor(private layer: ComponentLayerRef) {}
90-
91-
get title() {
92-
return this.layer.data.title;
93-
}
94-
95-
close(value?: string) {
96-
this.layer.close({
97-
value,
98-
});
99-
}
100-
}

‎packages/modules/fulfillment/src/lib/components/view/fulfillment-label-modal.component.html

+78
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
<vcl-panel-dialog
2+
[showCloseButton]="true"
3+
(close)="close()"
4+
>
5+
<vcl-panel-title
6+
>Parcel items ({{ this.layer.data.parcel.items.length }})</vcl-panel-title
7+
>
8+
9+
<vcl-data-list
10+
mode="none"
11+
[noBorder]="true"
12+
>
13+
@for (item of this.layer.data.parcel.items; track item.parcelId) {
14+
<vcl-data-list mode="none">
15+
<vcl-data-list-item>
16+
<div class="flex row justify-content-between align-items-center">
17+
<span>Product id</span>
18+
<a
19+
[routerLink]="
20+
productRouter.view.getLink({ id: item.productId || '' })
21+
"
22+
>{{ item.productId }}</a
23+
>
24+
</div>
25+
</vcl-data-list-item>
26+
27+
<vcl-data-list-item>
28+
<div class="flex row justify-content-between align-items-center">
29+
<span>Product variant id</span>
30+
<span>{{ item.variantId }}</span>
31+
</div>
32+
</vcl-data-list-item>
33+
34+
<vcl-data-list-item>
35+
<div class="flex row justify-content-between align-items-center">
36+
<span>Quantity</span>
37+
<span>{{ item.quantity }}</span>
38+
</div>
39+
</vcl-data-list-item>
40+
41+
<vcl-data-list-item>
42+
<div class="flex row justify-content-between align-items-center">
43+
<span>Weight</span>
44+
<span>{{ item.package?.weightInKg }} Kg</span>
45+
</div>
46+
</vcl-data-list-item>
47+
48+
<vcl-data-list-item>
49+
<div class="flex row justify-content-between align-items-center">
50+
<span>Length</span>
51+
<span>{{ item.package?.sizeInCm?.length }} Cm</span>
52+
</div></vcl-data-list-item
53+
>
54+
55+
<vcl-data-list-item>
56+
<div class="flex row justify-content-between align-items-center">
57+
<span>Width</span>
58+
<span>{{ item.package?.sizeInCm?.width }} Cm</span>
59+
</div></vcl-data-list-item
60+
>
61+
62+
<vcl-data-list-item>
63+
<div class="flex row justify-content-between align-items-center">
64+
<span>Height</span>
65+
<span>{{ item.package?.sizeInCm?.height }} Cm</span>
66+
</div></vcl-data-list-item
67+
>
68+
69+
<vcl-data-list-item>
70+
<div class="flex row justify-content-between align-items-center">
71+
<span>Rotatable</span>
72+
<span>{{ item.package?.rotatable }}</span>
73+
</div></vcl-data-list-item
74+
>
75+
</vcl-data-list>
76+
}
77+
</vcl-data-list>
78+
</vcl-panel-dialog>

‎packages/modules/fulfillment/src/lib/components/view/fulfillment-label-modal.component.ts

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import { ChangeDetectionStrategy, Component } from '@angular/core';
2+
3+
import { ComponentLayerRef } from '@vcl/ng-vcl';
4+
5+
import { ROUTER } from '@console-core/config';
6+
7+
@Component({
8+
selector: 'app-module-fulfillment-label-modal',
9+
templateUrl: './fulfillment-label-modal.component.html',
10+
styles: [
11+
`
12+
vcl-data-list-item {
13+
display: flex;
14+
flex-direction: column;
15+
}
16+
`,
17+
],
18+
changeDetection: ChangeDetectionStrategy.OnPush,
19+
standalone: false,
20+
})
21+
export class FulfilmentLabelModalComponent {
22+
productRouter = ROUTER.pages.main.children.products.children;
23+
24+
constructor(public layer: ComponentLayerRef) {}
25+
26+
get title() {
27+
return this.layer.data.title;
28+
}
29+
30+
close(value?: string) {
31+
this.layer.close({
32+
value,
33+
});
34+
}
35+
}

‎packages/modules/fulfillment/src/lib/modules-fulfillment.module.ts

+3-5
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,10 @@ import { ModulesUiModule } from '@console-modules/ui';
66
import { FulfillmentCreateComponent } from './components/fulfillment-create.component';
77
import { FulfillmentEditComponent } from './components/fulfillment-edit.component';
88
import { FulfillmentIndexComponent } from './components/fulfillment-index.component';
9-
import {
10-
FulfillmentViewDetailsComponent,
11-
LabelModalComponent,
12-
} from './components/fulfillment-view-details.component';
9+
import { FulfillmentViewDetailsComponent } from './components/fulfillment-view-details.component';
1310
import { FulfillmentViewComponent } from './components/fulfillment-view.component';
1411
import { FulfillmentTemplateComponent } from './components/template/fulfillment-template.component';
12+
import { FulfilmentLabelModalComponent } from './components/view/fulfillment-label-modal.component';
1513
import { modulesFulfillmentRoutes } from './lib.routes';
1614
import { ParcelsTotalSizePipe } from './pipes/parcels-total-size.pipe';
1715
import { ParcelsTotalWeightPipe } from './pipes/parcels-total-weight.pipe';
@@ -26,7 +24,7 @@ import { ParcelsTotalWeightPipe } from './pipes/parcels-total-weight.pipe';
2624
FulfillmentTemplateComponent,
2725
ParcelsTotalSizePipe,
2826
ParcelsTotalWeightPipe,
29-
LabelModalComponent,
27+
FulfilmentLabelModalComponent,
3028
],
3129
imports: [
3230
ModulesUiModule.forChild(),

0 commit comments

Comments
 (0)