@nyaruka/temba-components 0.48.2 → 0.48.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +8 -0
- package/dist/{98c8996c.js → 1bf3fa94.js} +110 -126
- package/dist/index.js +110 -126
- package/dist/sw.js +1 -1
- package/dist/sw.js.map +1 -1
- package/dist/templates/components-body.html +1 -1
- package/dist/templates/components-head.html +1 -1
- package/out-tsc/src/contacts/ContactTickets.js +114 -130
- package/out-tsc/src/contacts/ContactTickets.js.map +1 -1
- package/out-tsc/src/list/TicketList.js +1 -1
- package/out-tsc/src/list/TicketList.js.map +1 -1
- package/package.json +1 -1
- package/screenshots/truth/contacts/tickets-assignment.png +0 -0
- package/screenshots/truth/contacts/tickets.png +0 -0
- package/src/contacts/ContactTickets.ts +160 -176
- package/src/list/TicketList.ts +1 -1
|
@@ -48,8 +48,15 @@ export class ContactTickets extends StoreElement {
|
|
|
48
48
|
0 0 0px 2px var(--color-link-primary);
|
|
49
49
|
}
|
|
50
50
|
|
|
51
|
+
.header {
|
|
52
|
+
display: flex;
|
|
53
|
+
flex-direction: row;
|
|
54
|
+
flex-grow: 1;
|
|
55
|
+
}
|
|
56
|
+
|
|
51
57
|
.tickets {
|
|
52
58
|
display: flex;
|
|
59
|
+
flex-direction: column;
|
|
53
60
|
padding: 0.3em 0.8em;
|
|
54
61
|
}
|
|
55
62
|
|
|
@@ -60,65 +67,42 @@ export class ContactTickets extends StoreElement {
|
|
|
60
67
|
.ticket {
|
|
61
68
|
background: #fff;
|
|
62
69
|
display: flex;
|
|
70
|
+
flex-direction: column;
|
|
63
71
|
margin-bottom: 0.5em;
|
|
64
72
|
border-radius: var(--curvature);
|
|
65
73
|
display: flex;
|
|
66
|
-
flex-direction:
|
|
67
|
-
align-items:
|
|
74
|
+
flex-direction: column;
|
|
75
|
+
align-items: stretch;
|
|
68
76
|
box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.055),
|
|
69
77
|
0 0 0px 1px rgba(0, 0, 0, 0.02);
|
|
70
78
|
transition: all 200ms ease-in-out;
|
|
71
79
|
}
|
|
72
80
|
|
|
73
|
-
.ticket .body {
|
|
74
|
-
flex-grow: 5;
|
|
75
|
-
white-space: nowrap;
|
|
76
|
-
overflow: hidden;
|
|
77
|
-
text-overflow: ellipsis;
|
|
78
|
-
width: 200px;
|
|
79
|
-
}
|
|
80
|
-
|
|
81
81
|
.ticket .topic {
|
|
82
|
-
flex-grow: 1;
|
|
83
|
-
white-space: nowrap;
|
|
84
82
|
overflow: hidden;
|
|
85
83
|
text-overflow: ellipsis;
|
|
86
|
-
margin: 0 0.75em;
|
|
87
|
-
width: 60px;
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
.ticket.expanded .topic {
|
|
91
|
-
display: none;
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
.ticket.expanded .topic-expanded {
|
|
84
|
+
margin: 0.5em 0.75em 0.5em 0.75em;
|
|
95
85
|
display: -webkit-box;
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
.topic-expanded {
|
|
99
|
-
flex-grow: 1;
|
|
100
|
-
display: none;
|
|
101
|
-
-webkit-line-clamp: 1;
|
|
102
86
|
-webkit-box-orient: vertical;
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
.ticket.expanded {
|
|
107
|
-
flex-direction: column-reverse;
|
|
108
|
-
align-items: stretch;
|
|
87
|
+
-webkit-line-clamp: 1;
|
|
88
|
+
flex-grow: 2;
|
|
109
89
|
}
|
|
110
90
|
|
|
111
|
-
.ticket
|
|
112
|
-
|
|
113
|
-
max-height: 40vh;
|
|
91
|
+
.ticket .body {
|
|
92
|
+
max-height: 0px;
|
|
114
93
|
overflow-y: auto;
|
|
115
94
|
-webkit-line-clamp: none;
|
|
116
|
-
border-top: 1px solid #e6e6e6;
|
|
117
|
-
// 6px solid #f9f9f9;
|
|
118
|
-
margin-bottom: 0.5em;
|
|
119
|
-
padding: 0.5em 1em 0em 1em;
|
|
120
95
|
white-space: normal;
|
|
121
96
|
width: initial;
|
|
97
|
+
padding: 0.5em 0.75em 0em 0.75em;
|
|
98
|
+
max-height: 40vh;
|
|
99
|
+
display: none;
|
|
100
|
+
margin-bottom: 0.5em;
|
|
101
|
+
border-top: 1px solid #e6e6e6;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.ticket.expanded .body {
|
|
105
|
+
display: block;
|
|
122
106
|
}
|
|
123
107
|
|
|
124
108
|
.status {
|
|
@@ -205,16 +189,16 @@ export class ContactTickets extends StoreElement {
|
|
|
205
189
|
.details {
|
|
206
190
|
display: flex;
|
|
207
191
|
align-items: center;
|
|
208
|
-
padding: 0.5em 1em;
|
|
209
192
|
flex-shrink: 1;
|
|
193
|
+
margin-right: 0.5em;
|
|
210
194
|
}
|
|
211
195
|
|
|
212
196
|
.details .date {
|
|
213
|
-
padding: 0em 0.
|
|
197
|
+
padding: 0em 0.5em;
|
|
214
198
|
}
|
|
215
199
|
|
|
216
200
|
.details .toggle {
|
|
217
|
-
padding-right: 0.
|
|
201
|
+
padding-right: 0.5em;
|
|
218
202
|
}
|
|
219
203
|
`;
|
|
220
204
|
}
|
|
@@ -338,158 +322,158 @@ export class ContactTickets extends StoreElement {
|
|
|
338
322
|
expanded: this.expanded,
|
|
339
323
|
})}"
|
|
340
324
|
>
|
|
341
|
-
<div class="
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
offsety="8"
|
|
371
|
-
offsetx=${ticket.assignee ? -42 : -28}
|
|
372
|
-
>
|
|
373
|
-
<div slot="toggle" class="toggle">
|
|
374
|
-
${ticket.assignee
|
|
375
|
-
? html`
|
|
376
|
-
<div style="font-size:0.5em">
|
|
377
|
-
${renderAvatar({
|
|
378
|
-
name: ticket.assignee.name,
|
|
379
|
-
position: 'left',
|
|
380
|
-
})}
|
|
381
|
-
</div>
|
|
382
|
-
`
|
|
383
|
-
: html`
|
|
384
|
-
<temba-button
|
|
385
|
-
name="Assign"
|
|
386
|
-
primary
|
|
387
|
-
small
|
|
388
|
-
></temba-button>
|
|
389
|
-
`}
|
|
390
|
-
</div>
|
|
391
|
-
|
|
392
|
-
<div
|
|
393
|
-
slot="dropdown"
|
|
394
|
-
class="dropdown"
|
|
395
|
-
@click=${(event: MouseEvent) => {
|
|
396
|
-
stopEvent(event);
|
|
397
|
-
}}
|
|
325
|
+
<div class="header">
|
|
326
|
+
<div class="topic">${ticket.topic.name}</div>
|
|
327
|
+
|
|
328
|
+
<div class="details">
|
|
329
|
+
<div class="date">
|
|
330
|
+
<temba-date value="${date}" display="duration"></temba-date>
|
|
331
|
+
</div>
|
|
332
|
+
|
|
333
|
+
${ticket.status === TicketStatus.Closed
|
|
334
|
+
? html`<div class="reopen">
|
|
335
|
+
<temba-button
|
|
336
|
+
primary
|
|
337
|
+
small
|
|
338
|
+
name="Reopen"
|
|
339
|
+
@click=${(event: MouseEvent) => {
|
|
340
|
+
event.preventDefault();
|
|
341
|
+
event.stopPropagation();
|
|
342
|
+
this.handleReopen(ticket.uuid);
|
|
343
|
+
}}
|
|
344
|
+
></temba-button>
|
|
345
|
+
</div>`
|
|
346
|
+
: html`
|
|
347
|
+
<div>
|
|
348
|
+
<temba-dropdown
|
|
349
|
+
drop_align="right"
|
|
350
|
+
arrowsize="8"
|
|
351
|
+
arrowoffset="-44"
|
|
352
|
+
offsety="8"
|
|
353
|
+
offsetx=${ticket.assignee ? -42 : -28}
|
|
398
354
|
>
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
)
|
|
411
|
-
)}
|
|
355
|
+
<div slot="toggle" class="toggle">
|
|
356
|
+
${ticket.assignee
|
|
357
|
+
? html`
|
|
358
|
+
<div style="font-size:0.5em">
|
|
359
|
+
${renderAvatar({
|
|
360
|
+
name: ticket.assignee.name,
|
|
361
|
+
position: 'left',
|
|
362
|
+
})}
|
|
363
|
+
</div>
|
|
364
|
+
`
|
|
365
|
+
: html`
|
|
412
366
|
<temba-button
|
|
413
|
-
name="
|
|
367
|
+
name="Assign"
|
|
414
368
|
primary
|
|
415
369
|
small
|
|
370
|
+
></temba-button>
|
|
371
|
+
`}
|
|
372
|
+
</div>
|
|
373
|
+
|
|
374
|
+
<div
|
|
375
|
+
slot="dropdown"
|
|
376
|
+
class="dropdown"
|
|
377
|
+
@click=${(event: MouseEvent) => {
|
|
378
|
+
stopEvent(event);
|
|
379
|
+
}}
|
|
380
|
+
>
|
|
381
|
+
${ticket.assignee
|
|
382
|
+
? html`
|
|
383
|
+
<div
|
|
384
|
+
class="assigned option-group ${agent &&
|
|
385
|
+
ticket.assignee.email == agent.email
|
|
386
|
+
? 'current-user'
|
|
387
|
+
: ''}"
|
|
388
|
+
>
|
|
389
|
+
${this.renderUser(
|
|
390
|
+
users.find(
|
|
391
|
+
user => user.email === ticket.assignee.email
|
|
392
|
+
)
|
|
393
|
+
)}
|
|
394
|
+
<temba-button
|
|
395
|
+
name="Unassign"
|
|
396
|
+
primary
|
|
397
|
+
small
|
|
398
|
+
@click=${(event: MouseEvent) => {
|
|
399
|
+
stopEvent(event);
|
|
400
|
+
this.handleTicketAssignment(
|
|
401
|
+
ticket.uuid,
|
|
402
|
+
null
|
|
403
|
+
);
|
|
404
|
+
}}
|
|
405
|
+
></temba-button>
|
|
406
|
+
</div>
|
|
407
|
+
`
|
|
408
|
+
: null}
|
|
409
|
+
${agent &&
|
|
410
|
+
(!ticket.assignee ||
|
|
411
|
+
agent.email !== ticket.assignee.email)
|
|
412
|
+
? html`
|
|
413
|
+
<div
|
|
414
|
+
class="current-user option-group"
|
|
416
415
|
@click=${(event: MouseEvent) => {
|
|
417
416
|
stopEvent(event);
|
|
418
417
|
this.handleTicketAssignment(
|
|
419
418
|
ticket.uuid,
|
|
420
|
-
|
|
419
|
+
agent.email
|
|
421
420
|
);
|
|
422
421
|
}}
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
422
|
+
>
|
|
423
|
+
${this.renderUser(agent)}
|
|
424
|
+
</div>
|
|
425
|
+
`
|
|
426
|
+
: null}
|
|
427
|
+
|
|
428
|
+
<div class="options option-group">
|
|
429
|
+
${this.store.getAssignableUsers().map(user => {
|
|
430
|
+
if (
|
|
431
|
+
ticket.assignee &&
|
|
432
|
+
user.email === ticket.assignee.email
|
|
433
|
+
) {
|
|
434
|
+
return null;
|
|
435
|
+
}
|
|
436
|
+
|
|
437
|
+
if (user.email === this.agent) {
|
|
438
|
+
return null;
|
|
439
|
+
}
|
|
440
|
+
return html`<div
|
|
433
441
|
@click=${(event: MouseEvent) => {
|
|
434
442
|
stopEvent(event);
|
|
435
443
|
this.handleTicketAssignment(
|
|
436
444
|
ticket.uuid,
|
|
437
|
-
|
|
445
|
+
user.email
|
|
438
446
|
);
|
|
439
447
|
}}
|
|
440
448
|
>
|
|
441
|
-
${this.renderUser(
|
|
442
|
-
</div
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
<div class="options option-group">
|
|
447
|
-
${this.store.getAssignableUsers().map(user => {
|
|
448
|
-
if (
|
|
449
|
-
ticket.assignee &&
|
|
450
|
-
user.email === ticket.assignee.email
|
|
451
|
-
) {
|
|
452
|
-
return null;
|
|
453
|
-
}
|
|
454
|
-
|
|
455
|
-
if (user.email === this.agent) {
|
|
456
|
-
return null;
|
|
457
|
-
}
|
|
458
|
-
return html`<div
|
|
459
|
-
@click=${(event: MouseEvent) => {
|
|
460
|
-
stopEvent(event);
|
|
461
|
-
this.handleTicketAssignment(
|
|
462
|
-
ticket.uuid,
|
|
463
|
-
user.email
|
|
464
|
-
);
|
|
465
|
-
}}
|
|
466
|
-
>
|
|
467
|
-
${this.renderUser(user)}
|
|
468
|
-
</div>`;
|
|
469
|
-
})}
|
|
449
|
+
${this.renderUser(user)}
|
|
450
|
+
</div>`;
|
|
451
|
+
})}
|
|
452
|
+
</div>
|
|
470
453
|
</div>
|
|
471
|
-
</
|
|
472
|
-
</
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
454
|
+
</temba-dropdown>
|
|
455
|
+
</div>
|
|
456
|
+
<temba-tip
|
|
457
|
+
text="Resolve"
|
|
458
|
+
position="left"
|
|
459
|
+
style="width:1.5em"
|
|
460
|
+
class="resolve"
|
|
461
|
+
>
|
|
462
|
+
<temba-icon
|
|
463
|
+
size="1.25"
|
|
464
|
+
name="${Icon.check}"
|
|
465
|
+
@click=${(event: MouseEvent) => {
|
|
466
|
+
event.preventDefault();
|
|
467
|
+
event.stopPropagation();
|
|
468
|
+
this.handleClose(ticket.uuid);
|
|
469
|
+
}}
|
|
470
|
+
?clickable=${open}
|
|
471
|
+
/>
|
|
472
|
+
</temba-tip>
|
|
473
|
+
`}
|
|
474
|
+
</div>
|
|
492
475
|
</div>
|
|
476
|
+
<div class="body">${ticket.body}</div>
|
|
493
477
|
</div>
|
|
494
478
|
`;
|
|
495
479
|
}
|
package/src/list/TicketList.ts
CHANGED
|
@@ -34,7 +34,7 @@ export class TicketList extends TembaList {
|
|
|
34
34
|
>
|
|
35
35
|
<div style="flex: 1; color:#333;">
|
|
36
36
|
<div
|
|
37
|
-
style="font-weight:400;line-height:1.6;
|
|
37
|
+
style="font-weight:400;line-height:1.6;display:-webkit-box;-webkit-box-orient: vertical; -webkit-line-clamp: 1;overflow: hidden;"
|
|
38
38
|
>
|
|
39
39
|
${contact.name}
|
|
40
40
|
</div>
|