Skip to content

Commit 25c38e0

Browse files
belsmanbelsman
committed
feat(fulfilment): add tabs to the detail page
1 parent fe992cf commit 25c38e0

2 files changed

Lines changed: 101 additions & 92 deletions

File tree

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

Lines changed: 99 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -41,100 +41,107 @@ <h3 class="text-xl font-semibold">
4141
</div>
4242
</header>
4343

44-
<section class="row mt-4">
45-
<div class="flex-6-md pr-2">
46-
<rc-card title="Summary">
47-
<div>Parcels: {{ fulfillment.packaging.parcels.length }}</div>
48-
<div>Items: {{ 99 }}</div>
49-
<div>Total Weight: {{ 999.999 | number : '1.3-3' }} kg</div>
50-
<!-- <div *ngIf="maxDims">
51-
Max dims: {{ maxDims.width }}×{{ maxDims.length }}×{{ maxDims.height }}
52-
cm
53-
</div> -->
54-
</rc-card>
55-
</div>
56-
57-
<div class="flex-6-md pl-2">
58-
<rc-card title="Carrier Label">
59-
<div>State: {{ fulfillment.labels[0].state || '—' }}</div>
60-
<div>
61-
Status: {{ fulfillment.labels[0].status?.message?.trim() || '—' }}
62-
</div>
63-
<a
64-
*ngIf="fulfillment.labels[0]?.file?.url"
65-
[href]="fulfillment.labels[0].file.url"
66-
target="_blank"
67-
>Open label</a
68-
>
69-
<div
70-
class="mt-2 text-xs text-gray-500"
71-
*ngIf="!fulfillment.labels[0]?.file?.thumbnail"
72-
>
73-
No thumbnail
44+
<vcl-tab-nav>
45+
<vcl-tab>
46+
<vcl-label>Overview</vcl-label>
47+
<section class="row">
48+
<div class="flex-6-md pr-2">
49+
<rc-card title="Summary">
50+
<div>Parcels: {{ fulfillment.packaging.parcels.length }}</div>
51+
<div>Items: {{ 99 }}</div>
52+
<div>Total Weight: {{ 999.999 | number : '1.3-3' }} kg</div>
53+
<!-- <div *ngIf="maxDims">
54+
Max dims: {{ maxDims.width }}×{{ maxDims.length }}×{{ maxDims.height }}
55+
cm
56+
</div> -->
57+
</rc-card>
7458
</div>
75-
</rc-card>
76-
</div>
77-
</section>
7859

79-
<rc-card
80-
title="Tracking"
81-
class="mt-4"
82-
>
83-
<ng-container *ngIf="!fulfillment.trackings; else tracking">
84-
<div class="text-sm text-gray-500">No tracking events yet.</div>
85-
<!-- scale down button -->
86-
<button
87-
vcl-button
88-
class="mt-2"
89-
>
90-
Add tracking
91-
</button>
92-
</ng-container>
93-
<ng-template #tracking>
94-
<!-- render events when present -->
95-
</ng-template>
96-
</rc-card>
97-
98-
<section class="mt-6">
99-
<h4 class="text-lg font-semibold">
100-
Parcels ({{ fulfillment.packaging.parcels.length }})
101-
</h4>
60+
<div class="flex-6-md pl-2">
61+
<rc-card title="Carrier Label">
62+
<div>State: {{ fulfillment.labels[0].state || '—' }}</div>
63+
<div>
64+
Status: {{ fulfillment.labels[0].status?.message?.trim() || '—' }}
65+
</div>
66+
<a
67+
*ngIf="fulfillment.labels[0]?.file?.url"
68+
[href]="fulfillment.labels[0].file.url"
69+
target="_blank"
70+
>Open label</a
71+
>
72+
<div
73+
class="mt-2 text-xs text-gray-500"
74+
*ngIf="!fulfillment.labels[0]?.file?.thumbnail"
75+
>
76+
No thumbnail
77+
</div>
78+
</rc-card>
79+
</div>
80+
</section>
10281

103-
<rc-accordion>
104-
<rc-accordion-item
105-
*ngFor="let parcel of fulfillment.packaging.parcels"
106-
[title]="parcel.id"
82+
<rc-card
83+
title="Tracking"
84+
class="mt-4"
10785
>
108-
<div class="text-sm text-gray-600 my-2">
109-
Items: {{ parcel.items.length || 0 }} • Weight:
110-
{{ parcel.package.weightInKg | number : '1.3-3' }}
111-
kg
112-
</div>
86+
<ng-container *ngIf="!fulfillment.trackings; else tracking">
87+
<div class="text-sm text-gray-500">No tracking events yet.</div>
88+
<!-- scale down button -->
89+
<button
90+
vcl-button
91+
class="mt-2"
92+
>
93+
Add tracking
94+
</button>
95+
</ng-container>
96+
<ng-template #tracking>
97+
<!-- render events when present -->
98+
</ng-template>
99+
</rc-card>
100+
</vcl-tab>
101+
<vcl-tab>
102+
<vcl-label>Parcels ({{ fulfillment.packaging.parcels.length }})</vcl-label>
103+
<section>
104+
<rc-accordion>
105+
<rc-accordion-item
106+
*ngFor="let parcel of fulfillment.packaging.parcels"
107+
[title]="parcel.id"
108+
>
109+
<div class="text-sm text-gray-600 my-2">
110+
Items: {{ parcel.items.length || 0 }} • Weight:
111+
{{ parcel.package.weightInKg | number : '1.3-3' }}
112+
kg
113+
</div>
113114

114-
<rc-table>
115-
<table>
116-
<thead>
117-
<tr>
118-
<th>Name</th>
119-
<th>Qty</th>
120-
<th>HS/TARIC</th>
121-
<th>Origin</th>
122-
<th>Weight (kg)</th>
123-
</tr>
124-
</thead>
125-
<tbody>
126-
@for (it of parcel.items; track it.name) {
127-
<tr>
128-
<td>{{ it.name }}</td>
129-
<td>{{ it.quantity }}</td>
130-
<td>{{ it.hsCode || it.taricCode || '—' }}</td>
131-
<td>{{ it.originCountryId || '—' }}</td>
132-
<td>{{ it.package?.weightInKg || 0 | number : '1.3-3' }}</td>
133-
</tr>
134-
}
135-
</tbody>
136-
</table>
137-
</rc-table>
138-
</rc-accordion-item>
139-
</rc-accordion>
140-
</section>
115+
<rc-table>
116+
<table>
117+
<thead>
118+
<tr>
119+
<th>Name</th>
120+
<th>Qty</th>
121+
<th>HS/TARIC</th>
122+
<th>Origin</th>
123+
<th>Weight (kg)</th>
124+
</tr>
125+
</thead>
126+
<tbody>
127+
@for (it of parcel.items; track it.name) {
128+
<tr>
129+
<td>{{ it.name }}</td>
130+
<td>{{ it.quantity }}</td>
131+
<td>{{ it.hsCode || it.taricCode || '—' }}</td>
132+
<td>{{ it.originCountryId || '—' }}</td>
133+
<td>{{ it.package?.weightInKg || 0 | number : '1.3-3' }}</td>
134+
</tr>
135+
}
136+
</tbody>
137+
</table>
138+
</rc-table>
139+
</rc-accordion-item>
140+
</rc-accordion>
141+
</section>
142+
</vcl-tab>
143+
<!-- <vcl-tab [disabled]="true">
144+
<vcl-label>Tab3</vcl-label>
145+
Content3
146+
</vcl-tab> -->
147+
</vcl-tab-nav>

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ import {
3535
VCLGalleryModule,
3636
VCLFileInputModule,
3737
VCLRadioButtonModule,
38+
VCLTabNavModule,
3839
} from '@vcl/ng-vcl';
3940

4041
import { ModulesSharedModule } from '@console-modules/shared';
@@ -173,6 +174,7 @@ const modules = [
173174
ModulesSharedModule,
174175
OverlayModule,
175176
VCLRadioButtonModule,
177+
VCLTabNavModule,
176178
];
177179

178180
const atoms = [

0 commit comments

Comments
 (0)