Create a Shipping view
component.js
1
import Component from '@glimmer/component';
2
import { action, computed } from '@ember/object';
3
import { tracked } from '@glimmer/tracking';
4
import { guidFor } from '@ember/object/internals';
5
import { triggerSmartAction, deleteRecords, getCollectionId, loadExternalStyle, loadExternalJavascript } from 'client/utils/smart-view-utils';
6
7
export default class extends Component {
8
@tracked currentRecord = null;
9
10
get status() {
11
switch(this.currentRecord?.get('forest-shipping_status')) {
12
case 'Being processed':
13
return 'one';
14
case 'Ready for shipping':
15
return 'two';
16
case 'In transit':
17
return 'three';
18
case 'Shipped':
19
return 'four';
20
default:
21
return null;
22
}
23
}
24
25
@action
26
setDefaultCurrentRecord() {
27
if (!this.currentRecord) {
28
this.currentRecord = this.args.records.firstObject;
29
}
30
}
31
32
@action
33
selectRecord(record) {
34
this.currentRecord = record;
35
}
36
37
@action
38
triggerSmartAction(...args) {
39
return triggerSmartAction(this, ...args);
40
}
41
42
@action
43
deleteRecords(...args) {
44
return deleteRecords(this, ...args);
45
}
46
}
Copied!
template.hbs
1
<style>
2
/* Wrapper styles */
3
.wrapper-view {
4
background: #F2F6FA;
5
width: 100%;
6
display: flex;
7
border: 1px solid #F2F6FA;
8
border-radius: 5px
9
}
10
.wrapper-list {
11
min-width: 330px;
12
height: 100vh;
13
background:#F2F6FA;
14
border-right: 1px solid #D9DDE1;
15
overflow: scroll
16
}
17
.wrapper-card {
18
width: 100%;
19
margin: 30px;
20
background: #FFF;
21
padding: 20px;
22
display: flex;
23
flex-direction: column;
24
border-radius: 4px;
25
-moz-border-radius: 4px;
26
-webkit-border-radius: 4px;
27
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.15);
28
-moz-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.15);
29
-webkit-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.15);
30
}
31
/* List styles */
32
.list--header {
33
background: #FFF;
34
padding: 14px 30px;
35
height: 66px;
36
display: flex;
37
align-items: center;
38
border-bottom: 1px solid #D9DDE1;
39
}
40
form {
41
}
42
form.list-options {
43
align-self: center;
44
}
45
form.list-options select {
46
background: #F2F6FA;
47
border: 1px solid #ADB8C6;
48
width: 167px;
49
height: 38px;
50
font-size: 14px;
51
padding: 14px;
52
}
53
a {
54
text-decoration: none;
55
}
56
.list--item {
57
background: #FFF;
58
border-bottom: 1px solid #D9DDE1;
59
display: flex;
60
flex-flow: row wrap;
61
justify-content: space-between;
62
background: #FFF;
63
padding: 14px 30px;
64
position: relative;
65
}
66
/* use this 'selected' to show selected color */
67
.list--item.selected::before {
68
content: '';
69
width: 4px;
70
height: 100%;
71
margin: 0;
72
padding: 0;
73
background: #7A6ADC;
74
position: absolute;
75
top: 0;
76
left: 0;
77
}
78
.list--item__values-left {
79
color: #647A93;
80
}
81
.list--item__values-left h3 {
82
font-size: 14px;
83
font-weight: bold;
84
padding: 2px 0;
85
}
86
.list--item__values-left h3 span {
87
font-size: 10px;
88
text-transform: uppercase;
89
}
90
.list--item__values-left p {
91
font-size: 10px;
92
padding: 2px 0;
93
}
94
.list--item__values-left p span {
95
text-transform: uppercase;
96
}
97
.list--item__values-right {
98
display: flex;
99
align-items: center;
100
justify-content: center;
101
}
102
.list--item__values-right p {
103
color: #647A93;
104
font-size: 10px;
105
align-self: flex-start;
106
padding: 2px 0;
107
margin: 0;
108
}
109
/* Card styles */
110
.card--title {
111
padding: 0;
112
margin-bottom: 40px;
113
}
114
.card--title h2 {
115
margin: 0;
116
padding: 0;
117
color: #303B47;
118
}
119
.card--title small {
120
margin: 0;
121
padding: 0;
122
}
123
.card--gaugebar {
124
display: flex;
125
flex-flow: row wrap;
126
width: 100%;
127
}
128
.gaugebar {
129
width: 100%;
130
display: flex;
131
align-items: center;
132
justify-content: space-between;
133
margin-bottom: 40px;
134
}
135
.gaugebar--points {
136
display: flex;
137
align-items: flex-start;
138
justify-content: space-between;
139
height: 50px;
140
}
141
.gaugebar--points img {
142
width: 42px;
143
margin: 0 10px;
144
}
145
.gaugebar--points__information {
146
font-size: 12px;
147
margin: 0;
148
height: 50px;
149
}
150
.gaugebar--points__informations p {
151
max-width: 370px;
152
white-space: nowrap;
153
overflow: hidden;
154
text-overflow: ellipsis;
155
}
156
.gaugebar--bar {
157
background: #f2f6fa;
158
height: 30px;
159
width: 100%;
160
margin: 0;
161
padding: 0;
162
position: relative;
163
border-radius: 100px;
164
-moz-border-radius: 100px;
165
-webkit-border-radius: 100px;
166
}
167
.gaugebar--bar__active {
168
background: #54bd7e;
169
position: absolute;
170
top: 0;
171
left: 0;
172
width: 50%;
173
height: 30px;
174
transition: all 900ms ease;
175
border-radius: 100px;
176
-moz-border-radius: 100px;
177
-webkit-border-radius: 100px;
178
}
179
.gaugebar--bar__active.one {
180
width: 5%;
181
transition: all 900ms ease;
182
}
183
.gaugebar--bar__active.two {
184
width: 45%;
185
transition: all 900ms ease;
186
}
187
.gaugebar--bar__active.three {
188
width: 80%;
189
transition: all 900ms ease;
190
}
191
.gaugebar--bar__active.four {
192
width: 100%;
193
transition: all 900ms ease;
194
}
195
.gaugebar--bar__active.four::after {
196
content: 'DELIVERED';
197
position: absolute;
198
top: -50%;
199
right: 0;
200
font-size: 12px;
201
transition: all 900ms ease;
202
}
203
.gaugebar--bar__active::before{
204
content: '';
205
background: #459565;
206
width: 30px;
207
height: 30px;
208
position: absolute;
209
right: 0;
210
border-radius: 50%;
211
-moz-border-radius: 50%;
212
-webkit-border-radius: 50%;
213
}
214
.gaugebar--informations {
215
width: 100%;
216
display: flex;
217
flex-flow: row wrap;
218
flex-direction: row;
219
align-items: center;
220
justify-content: space-between;
221
margin-top: 10px;
222
}
223
.gaugebar--informations__start p, .gaugebar--informations__middle p, .gaugebar--informations__end p {
224
text-transform: uppercase;
225
font-size: 10px;
226
}
227
.gaugebar--informations__end p {
228
text-align: right;
229
}
230
.green {
231
color: #54BD7E;
232
}
233
.gaugebar--error {
234
background: #FFF;
235
border-radius: 4px;
236
padding: 20px;
237
display: flex;
238
flex-direction: column;
239
margin-top: 30px;
240
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.15);
241
-moz-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.15);
242
-webkit-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.15);
243
}
244
.gaugebar--error p {
245
font-size: 14px;
246
color: #899AAD;
247
margin-bottom: 10px;
248
}
249
.gaugebar--error p.error {
250
color: #FF9A76;
251
text-transform: uppercase;
252
}
253
.gaugebar--error a.btn {
254
color: #FFF;
255
padding: 8px 24px;
256
border-radius: 2px;
257
}
258
.gaugebar--error a.btn-info {
259
background: #3789E4;
260
}
261
.gaugebar--error a.btn-info:hover {
262
background: #287BD8;
263
transition: all 900ms ease;
264
}
265
</style>
266
267
<div class="wrapper-view" {{did-insert this.setDefaultCurrentRecord}}>
268
<div class="wrapper-list">
269
{{#each @records as |record|}}
270
<a href="#" {{on 'click' (fn this.selectRecord record)}}>
271
<div class="list--item {{if (eq this.currentRecord record) 'selected'}}">
272
<div class="list--item__values-left">
273
<h3><span>to :</span> {{record.forest-customer.forest-firstname}} {{record.forest-customer.forest-lastname}}</h3>
274
<p><span>order ID</span> : {{record.id}}</p>
275
<p><span>status</span> : {{record.forest-shipping_status}}</p>
276
</div>
277
<div class="list--item__values-right">
278
<p>{{moment-format record.forest-created_at 'LLL'}}</p>
279
</div>
280
</div>
281
</a>
282
{{/each}}
283
</div>
284
<div class="wrapper-card">
285
<div class="card--title">
286
<h2>Order to {{this.currentRecord.forest-customer.forest-firstname}} {{this.currentRecord.forest-customer.forest-lastname}}</h2>
287
<small>ID: {{this.currentRecord.id}}</small>
288
</div>
289
<div class="card--gaugebar">
290
<div class="gaugebar">
291
<div class="gaugebar--points">
292
<img src={{this.currentRecord.forest-product.forest-picture}} alt="">
293
<div class="gaugebar--points__informations">
294
<p>Product: {{this.currentRecord.forest-product.forest-label}}</p>
295
<p>Customer: {{this.currentRecord.forest-customer.forest-firstname}} {{this.currentRecord.forest-customer.forest-lastname}}</p>
296
</div>
297
</div>
298
</div>
299
<div class="gaugebar--bar">
300
<!-- use class 'full' to show full bar with order delivered -->
301
<div class="gaugebar--bar__active {{this.status}}"></div>
302
</div>
303
<div class="gaugebar--informations">
304
<div class="gaugebar--informations__one green">
305
<p>Being processed</p>
306
<p>{{moment-format this.currentRecord.forest-being_processed_at 'LLL'}}</p>
307
</div>
308
<div class="gaugebar--informations__two {{if this.currentRecord.forest-ready_for_shipping_at 'green'}}">
309
<p>Ready for shipping</p>
310
{{#if this.currentRecord.forest-ready_for_shipping_at}}
311
<p>{{moment-format this.currentRecord.forest-ready_for_shipping_at 'LLL'}}</p>
312
{{/if}}
313
</div>
314
<div class="gaugebar--informations__three {{if this.currentRecord.forest-in_transit_at 'green'}}">
315
<p>In transit</p>
316
{{#if this.currentRecord.forest-in_transit_at}}
317
<p>{{moment-format this.currentRecord.forest-in_transit_at 'LLL'}}</p>
318
{{/if}}
319
</div>
320
<div class="gaugebar--informations__four {{if this.currentRecord.forest-shipped_at 'green'}}">
321
<p>Shipped</p>
322
{{#if this.currentRecord.forest-shipped_at}}
323
<p>{{moment-format this.currentRecord.forest-shipped_at 'LLL'}}</p>
324
{{/if}}
325
</div>
326
</div>
327
</div>
328
</div>
329
</div>
Copied!
Copy link