Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 | 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x | import { html, TemplateResult } from 'lit';
import { property } from 'lit/decorators.js';
import { TembaList } from './TembaList';
import { Contact } from '../interfaces';
import { Icon } from '../Icons';
export class TicketList extends TembaList {
@property({ type: String })
agent = '';
public getRefreshEndpoint() {
if (this.items.length > 0) {
const lastActivity = this.items[0].ticket.last_activity_on;
const separator = this.endpoint.includes('?') ? '&' : '?';
return (
this.endpoint +
separator +
'after=' +
new Date(lastActivity).getTime() * 1000
);
}
return this.endpoint;
}
protected sanitizeResults(results: any[]): Promise<any[]> {
return new Promise<any[]>((resolve) => {
const contacts: Contact[] = results as Contact[];
this.store.resolveUsers(contacts, ['ticket.assignee']).then(() => {
resolve(contacts);
});
});
}
constructor() {
super();
this.valueKey = 'ticket.uuid';
this.renderOption = (contact: Contact): TemplateResult => {
return html`
<div
style="align-items:center; margin-top: 0.1em; margin-bottom: 0.1em"
>
<div
style="display:flex; align-items: flex-start;border:0px solid red;"
>
<div style="flex: 1; color:#333;">
<div
style="font-weight:400;line-height:1.6;padding-right:0.5em;display:-webkit-box;-webkit-box-orient: vertical; -webkit-line-clamp: 1;overflow: hidden;"
>
${contact.name}
</div>
${contact.ticket.closed_on
? null
: contact.last_msg
? html`
<div
style="font-size: 0.9em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;"
>
${
contact.last_msg.direction === 'I'
? html`<div
style="border-radius:9999px; background:var(--color-primary-dark);width:6px;height:6px;display:inline-block;margin:0px 2px;margin-bottom:1px;"
></div>`
: null
}
${
contact.last_msg.text
? contact.last_msg.text
: contact.last_msg.attachments
? html`<div style="display:inline-block">
<div style="display:flex; margin-left:0.2em">
<temba-icon
name="${Icon.attachment}"
></temba-icon>
<div style="flex-grow:1;margin-left:0.2em">
Attachment
</div>
</div>
</div>`
: 'Unsupported Message'
}
</div></div>
`
: null}
</div>
<div
style="margin-right: -5px; margin-top: 0px;display:flex;flex-direction:column;align-items:flex-end;max-width:60px;min-width:30px;border:0px solid green;text-align:right"
>
<div>
${!contact.ticket.closed_on && contact.ticket.assignee
? html`<temba-user
name=${contact.ticket.assignee.name}
email=${contact.ticket.assignee.email}
avatar=${contact.ticket.assignee.avatar}
scale="0.8"
></temba-user>`
: null}
</div>
</div>
</div>
<div style="font-size:0.8em;text-align:right;border:0px solid red;">
<temba-date
value=${contact.ticket.closed_on ||
contact.ticket.last_activity_on}
display="duration"
></temba-date>
</div>
</div>
`;
};
}
}
|