@nyaruka/temba-components 0.48.1 → 0.48.2
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 +10 -0
- package/dist/{efb2f6ae.js → 98c8996c.js} +154 -104
- package/dist/index.js +154 -104
- 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/ContactChat.js +12 -8
- package/out-tsc/src/contacts/ContactChat.js.map +1 -1
- package/out-tsc/src/contacts/ContactTickets.js +156 -92
- package/out-tsc/src/contacts/ContactTickets.js.map +1 -1
- package/out-tsc/test/temba-compose.test.js +49 -48
- package/out-tsc/test/temba-compose.test.js.map +1 -1
- package/out-tsc/test/temba-contact-chat.test.js +48 -23
- package/out-tsc/test/temba-contact-chat.test.js.map +1 -1
- package/package.json +1 -1
- package/screenshots/truth/contacts/compose-attachments-no-text-failure.png +0 -0
- package/screenshots/truth/contacts/compose-text-and-attachments-failure-attachments.png +0 -0
- package/screenshots/truth/contacts/compose-text-and-attachments-failure-text-and-attachments.png +0 -0
- package/screenshots/truth/contacts/compose-text-and-attachments-failure-text.png +0 -0
- package/screenshots/truth/contacts/compose-text-no-attachments-failure.png +0 -0
- package/screenshots/truth/contacts/tickets-assignment.png +0 -0
- package/screenshots/truth/contacts/tickets.png +0 -0
- package/src/contacts/ContactChat.ts +18 -8
- package/src/contacts/ContactTickets.ts +198 -135
- package/test/temba-compose.test.ts +80 -54
- package/test/temba-contact-chat.test.ts +60 -27
package/dist/sw.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
if(!self.define){let e,t={};const o=(o,n)=>(o=new URL(o+".js",n).href,t[o]||new Promise((t=>{if("document"in self){const e=document.createElement("script");e.src=o,e.onload=t,document.head.appendChild(e)}else e=o,importScripts(o),t()})).then((()=>{let e=t[o];if(!e)throw new Error(`Module ${o} didn’t register its module`);return e})));self.define=(n,s)=>{const i=e||("document"in self?document.currentScript.src:"")||location.href;if(t[i])return;let r={};const
|
|
1
|
+
if(!self.define){let e,t={};const o=(o,n)=>(o=new URL(o+".js",n).href,t[o]||new Promise((t=>{if("document"in self){const e=document.createElement("script");e.src=o,e.onload=t,document.head.appendChild(e)}else e=o,importScripts(o),t()})).then((()=>{let e=t[o];if(!e)throw new Error(`Module ${o} didn’t register its module`);return e})));self.define=(n,s)=>{const i=e||("document"in self?document.currentScript.src:"")||location.href;if(t[i])return;let r={};const c=e=>o(e,i),l={module:{uri:i},exports:r,require:c};t[i]=Promise.all(n.map((e=>l[e]||c(e)))).then((e=>(s(...e),r)))}}define(["./workbox-919adfb7"],(function(e){"use strict";self.skipWaiting(),e.clientsClaim(),e.precacheAndRoute([{url:"98c8996c.js",revision:"780de512b8bcf0039507acbe9bf68cf7"},{url:"templates/components-body.html",revision:"bf00671a29a6d826be7314f287fd4a65"},{url:"templates/components-head.html",revision:"583dca8df21efb6e3abe149c65a28dcb"}],{}),e.registerRoute(new e.NavigationRoute(e.createHandlerBoundToURL("/index.html"))),e.registerRoute("polyfills/*.js",new e.CacheFirst,"GET")}));
|
|
2
2
|
//# sourceMappingURL=sw.js.map
|
package/dist/sw.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sw.js","sources":["../../../../../tmp/
|
|
1
|
+
{"version":3,"file":"sw.js","sources":["../../../../../tmp/34bc395f05606f8cc4b6639aceeb6549/sw.js"],"sourcesContent":["import {registerRoute as workbox_routing_registerRoute} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-routing/registerRoute.mjs';\nimport {CacheFirst as workbox_strategies_CacheFirst} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-strategies/CacheFirst.mjs';\nimport {clientsClaim as workbox_core_clientsClaim} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-core/clientsClaim.mjs';\nimport {precacheAndRoute as workbox_precaching_precacheAndRoute} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-precaching/precacheAndRoute.mjs';\nimport {NavigationRoute as workbox_routing_NavigationRoute} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-routing/NavigationRoute.mjs';\nimport {createHandlerBoundToURL as workbox_precaching_createHandlerBoundToURL} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-precaching/createHandlerBoundToURL.mjs';/**\n * Welcome to your Workbox-powered service worker!\n *\n * You'll need to register this file in your web app.\n * See https://goo.gl/nhQhGp\n *\n * The rest of the code is auto-generated. Please don't update this file\n * directly; instead, make changes to your Workbox build configuration\n * and re-run your build process.\n * See https://goo.gl/2aRDsh\n */\n\n\n\n\n\n\n\n\nself.skipWaiting();\n\nworkbox_core_clientsClaim();\n\n\n/**\n * The precacheAndRoute() method efficiently caches and responds to\n * requests for URLs in the manifest.\n * See https://goo.gl/S9QRab\n */\nworkbox_precaching_precacheAndRoute([\n {\n \"url\": \"98c8996c.js\",\n \"revision\": \"780de512b8bcf0039507acbe9bf68cf7\"\n },\n {\n \"url\": \"templates/components-body.html\",\n \"revision\": \"bf00671a29a6d826be7314f287fd4a65\"\n },\n {\n \"url\": \"templates/components-head.html\",\n \"revision\": \"583dca8df21efb6e3abe149c65a28dcb\"\n }\n], {});\n\nworkbox_routing_registerRoute(new workbox_routing_NavigationRoute(workbox_precaching_createHandlerBoundToURL(\"/index.html\")));\n\n\nworkbox_routing_registerRoute(\"polyfills/*.js\", new workbox_strategies_CacheFirst(), 'GET');\n\n\n\n\n"],"names":["self","skipWaiting","workbox_core_clientsClaim","workbox_precaching_precacheAndRoute","url","revision","workbox","registerRoute","workbox_routing_NavigationRoute","workbox_precaching_createHandlerBoundToURL","workbox_strategies_CacheFirst"],"mappings":"0nBAwBAA,KAAKC,cAELC,EAAAA,eAQAC,EAAAA,iBAAoC,CAClC,CACEC,IAAO,cACPC,SAAY,oCAEd,CACED,IAAO,iCACPC,SAAY,oCAEd,CACED,IAAO,iCACPC,SAAY,qCAEb,CAAE,GAEwBC,EAAAC,cAAC,IAAIC,EAAAA,gBAAgCC,EAAAA,wBAA2C,iBAGhFH,EAAAC,cAAC,iBAAkB,IAAIG,aAAiC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
<script type="module" src="{{STATIC_URL}}@nyaruka/temba-components/dist/
|
|
1
|
+
<script type="module" src="{{STATIC_URL}}@nyaruka/temba-components/dist/98c8996c.js"></script><script>window.TEMBA_COMPONENTS_VERSION="0.48.2"</script>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
<link rel="modulepreload" href="{{STATIC_URL}}@nyaruka/temba-components/dist/
|
|
1
|
+
<link rel="modulepreload" href="{{STATIC_URL}}@nyaruka/temba-components/dist/98c8996c.js" crossorigin="anonymous">
|
|
@@ -168,16 +168,20 @@ export class ContactChat extends ContactStoreElement {
|
|
|
168
168
|
}
|
|
169
169
|
else if (response.status < 500) {
|
|
170
170
|
if (response.json.text &&
|
|
171
|
-
response.json.text.
|
|
172
|
-
response.json.text.
|
|
173
|
-
|
|
174
|
-
|
|
171
|
+
response.json.text.length > 0 &&
|
|
172
|
+
response.json.text[0].length > 0) {
|
|
173
|
+
let textError = response.json.text[0];
|
|
174
|
+
textError = textError.replace('Ensure this field has no more than', 'Maximum allowed text is');
|
|
175
|
+
compose.buttonError = textError;
|
|
175
176
|
}
|
|
176
177
|
else if (response.json.attachments &&
|
|
177
|
-
response.json.attachments.
|
|
178
|
-
response.json.attachments.
|
|
179
|
-
|
|
180
|
-
|
|
178
|
+
response.json.attachments.length > 0 &&
|
|
179
|
+
response.json.attachments[0].length > 0) {
|
|
180
|
+
let attachmentError = response.json.attachments[0];
|
|
181
|
+
attachmentError = attachmentError
|
|
182
|
+
.replace('Ensure this field has no more than', 'Maximum allowed attachments is')
|
|
183
|
+
.replace('elements', 'files');
|
|
184
|
+
compose.buttonError = attachmentError;
|
|
181
185
|
}
|
|
182
186
|
else {
|
|
183
187
|
compose.buttonError = genericError;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContactChat.js","sourceRoot":"","sources":["../../../src/contacts/ContactChat.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Contact, CustomEventType, Ticket } from '../interfaces';\nimport { COOKIE_KEYS, getCookieBoolean, postJSON } from '../utils';\nimport { ContactHistory } from './ContactHistory';\nimport { ContactStoreElement } from './ContactStoreElement';\nimport { Compose } from '../compose/Compose';\n\nconst DEFAULT_REFRESH = 10000;\n\nexport class ContactChat extends ContactStoreElement {\n public static get styles() {\n return css`\n .left-pane {\n box-shadow: -13px 10px 7px 14px rgba(0, 0, 0, 0);\n transition: box-shadow 600ms linear;\n }\n\n .left-pane.open {\n z-index: 1000;\n }\n\n :host {\n flex-grow: 1;\n display: flex;\n flex-direction: row;\n min-height: 0;\n border-radius: var(--curvature);\n }\n\n .chat-wrapper {\n display: flex;\n flex-grow: 1;\n flex-direction: column;\n overflow: hidden;\n min-height: 0;\n border-radius: var(--curvature);\n }\n\n temba-contact-history {\n border-bottom: 3px solid #e1e1e1;\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n min-height: 0;\n }\n\n .chatbox {\n background: rgb(242, 242, 242);\n padding: 1em;\n display: flex;\n flex-direction: column;\n z-index: 3;\n border-bottom-left-radius: var(--curvature);\n border-bottom-right-radius: var(--curvature);\n }\n\n .chatbox.full {\n border-bottom-right-radius: 0 !important;\n }\n\n .closed-footer {\n padding: 1em;\n background: #f2f2f2;\n border-top: 3px solid #e1e1e1;\n display: flex;\n flex-direction: column;\n align-items: center;\n }\n\n a {\n color: var(--color-link-primary);\n }\n\n a:hover {\n text-decoration: underline;\n color: var(--color-link-primary-hover);\n }\n\n temba-button#reopen-button {\n --button-y: 1px;\n --button-x: 12px;\n }\n\n temba-completion {\n --widget-box-shadow: none;\n --color-widget-border: transparent;\n --widget-box-shadow-focused: none;\n --color-focus: transparent;\n --color-widget-bg-focused: transparent;\n }\n `;\n }\n\n @property({ type: String, attribute: 'ticket' })\n ticketUUID: string;\n\n @property({ type: String })\n contactsEndpoint = '/api/v2/contacts.json';\n\n @property({ type: String })\n currentNote = '';\n\n @property({ type: Boolean })\n showDetails = true;\n\n @property({ type: Boolean })\n monitor = false;\n\n @property({ type: Object })\n currentTicket: Ticket = null;\n\n @property({ type: Object })\n currentContact: Contact = null;\n\n @property({ type: String })\n agent = '';\n\n // http promise to monitor for completeness\n public httpComplete: Promise<void>;\n\n constructor() {\n super();\n this.showDetails = getCookieBoolean(COOKIE_KEYS.TICKET_SHOW_DETAILS);\n }\n\n refreshInterval = null;\n\n public connectedCallback() {\n super.connectedCallback();\n if (this.monitor) {\n this.refreshInterval = setInterval(() => {\n if (this.currentTicket && this.currentTicket.closed_on) {\n return;\n }\n this.refresh();\n }, DEFAULT_REFRESH);\n }\n }\n\n public disconnectedCallback() {\n if (this.refreshInterval) {\n clearInterval(this.refreshInterval);\n }\n }\n\n public getContactHistory(): ContactHistory {\n return this.shadowRoot.querySelector(\n 'temba-contact-history'\n ) as ContactHistory;\n }\n\n public refresh(scrollToBottom = false): void {\n const contactHistory = this.getContactHistory();\n if (contactHistory) {\n if (scrollToBottom) {\n contactHistory.scrollToBottom();\n }\n contactHistory.refresh();\n // super.refresh();\n }\n }\n\n public updated(changedProperties: Map<string, any>) {\n super.updated(changedProperties);\n\n // if we don't have an endpoint infer one\n if (\n changedProperties.has('data') ||\n changedProperties.has('currentContact')\n ) {\n this.currentContact = this.data;\n }\n }\n\n private handleSend(evt: CustomEvent) {\n const buttonName = evt.detail.name;\n if (buttonName === 'Send') {\n const payload = {\n contact: this.currentContact.uuid,\n };\n const compose = evt.currentTarget as Compose;\n if (compose) {\n const text = compose.currentText;\n if (text && text.length > 0) {\n payload['text'] = text;\n }\n const attachments = compose.currentAttachments;\n if (attachments && attachments.length > 0) {\n const attachment_uuids = attachments.map(\n attachment => attachment.uuid\n );\n payload['attachments'] = attachment_uuids;\n }\n }\n if (this.currentTicket) {\n payload['ticket'] = this.currentTicket.uuid;\n }\n\n const genericError = buttonName + ' failed, please try again.';\n\n postJSON(`/api/v2/messages.json`, payload)\n .then(response => {\n if (response.status < 400) {\n compose.reset();\n this.refresh(true);\n this.fireCustomEvent(CustomEventType.MessageSent, { msg: payload });\n } else if (response.status < 500) {\n if (\n response.json.text &&\n response.json.text.eng &&\n response.json.text.eng.length > 0\n ) {\n compose.buttonError =\n 'Text must have no more than 640 characters.';\n } else if (\n response.json.attachments &&\n response.json.attachments.eng &&\n response.json.attachments.eng.length > 0\n ) {\n compose.buttonError =\n 'Attachments must have no more than 10 files.';\n } else {\n compose.buttonError = genericError;\n }\n } else {\n compose.buttonError = genericError;\n }\n })\n .catch(error => {\n console.error(error);\n compose.buttonError = genericError;\n });\n }\n }\n\n public render(): TemplateResult {\n const contactHistory = this.currentContact\n ? this.getTembaContactHistory()\n : null;\n const chatbox = this.currentContact ? this.getTembaChatbox() : null;\n\n const contactHistoryAndChatbox = html`<div\n style=\"flex-grow: 1; margin-right: 0em; display:flex; flex-direction:row; min-height: 0;\"\n class=\"left-pane ${this.showDetails ? 'open' : ''}\"\n >\n <div class=\"chat-wrapper\">${contactHistory} ${chatbox}</div>\n </div>`;\n return html`${contactHistoryAndChatbox}`;\n }\n\n private getTembaContactHistory(): TemplateResult {\n return html` <temba-contact-history\n .uuid=${this.currentContact.uuid}\n .contact=${this.currentContact}\n .ticket=${this.currentTicket ? this.currentTicket.uuid : null}\n .endDate=${this.currentTicket ? this.currentTicket.closed_on : null}\n .agent=${this.agent}\n >\n </temba-contact-history>`;\n }\n\n private getTembaChatbox(): TemplateResult {\n if (this.currentTicket) {\n if (this.currentContact && this.currentContact.status !== 'active') {\n //no chatbox for archived, blocked, or stopped contacts\n return null;\n } else {\n if (!this.currentTicket.closed_on) {\n //chatbox for active contacts with an open ticket\n return this.getChatbox();\n } else {\n return null;\n }\n }\n }\n\n if (this.currentContact && this.currentContact.status !== 'active') {\n //no chatbox for archived, blocked, or stopped contacts\n return null;\n } else {\n //chatbox for active contacts\n return this.getChatbox();\n }\n }\n\n private getChatbox(): TemplateResult {\n return html`<div class=\"chatbox\">\n <temba-compose\n chatbox\n attachments\n counter\n button\n @temba-button-clicked=${this.handleSend.bind(this)}\n >\n </temba-compose>\n </div>`;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"ContactChat.js","sourceRoot":"","sources":["../../../src/contacts/ContactChat.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAW,eAAe,EAAU,MAAM,eAAe,CAAC;AACjE,OAAO,EAAE,WAAW,EAAE,gBAAgB,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAEnE,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAG5D,MAAM,eAAe,GAAG,KAAK,CAAC;AAE9B,MAAM,OAAO,WAAY,SAAQ,mBAAmB;IAC3C,MAAM,KAAK,MAAM;QACtB,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+ET,CAAC;IACJ,CAAC;IA6BD;QACE,KAAK,EAAE,CAAC;QAxBV,qBAAgB,GAAG,uBAAuB,CAAC;QAG3C,gBAAW,GAAG,EAAE,CAAC;QAGjB,gBAAW,GAAG,IAAI,CAAC;QAGnB,YAAO,GAAG,KAAK,CAAC;QAGhB,kBAAa,GAAW,IAAI,CAAC;QAG7B,mBAAc,GAAY,IAAI,CAAC;QAG/B,UAAK,GAAG,EAAE,CAAC;QAUX,oBAAe,GAAG,IAAI,CAAC;QAHrB,IAAI,CAAC,WAAW,GAAG,gBAAgB,CAAC,WAAW,CAAC,mBAAmB,CAAC,CAAC;IACvE,CAAC;IAIM,iBAAiB;QACtB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,IAAI,CAAC,eAAe,GAAG,WAAW,CAAC,GAAG,EAAE;gBACtC,IAAI,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,aAAa,CAAC,SAAS,EAAE;oBACtD,OAAO;iBACR;gBACD,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,CAAC,EAAE,eAAe,CAAC,CAAC;SACrB;IACH,CAAC;IAEM,oBAAoB;QACzB,IAAI,IAAI,CAAC,eAAe,EAAE;YACxB,aAAa,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;SACrC;IACH,CAAC;IAEM,iBAAiB;QACtB,OAAO,IAAI,CAAC,UAAU,CAAC,aAAa,CAClC,uBAAuB,CACN,CAAC;IACtB,CAAC;IAEM,OAAO,CAAC,cAAc,GAAG,KAAK;QACnC,MAAM,cAAc,GAAG,IAAI,CAAC,iBAAiB,EAAE,CAAC;QAChD,IAAI,cAAc,EAAE;YAClB,IAAI,cAAc,EAAE;gBAClB,cAAc,CAAC,cAAc,EAAE,CAAC;aACjC;YACD,cAAc,CAAC,OAAO,EAAE,CAAC;YACzB,mBAAmB;SACpB;IACH,CAAC;IAEM,OAAO,CAAC,iBAAmC;QAChD,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QAEjC,yCAAyC;QACzC,IACE,iBAAiB,CAAC,GAAG,CAAC,MAAM,CAAC;YAC7B,iBAAiB,CAAC,GAAG,CAAC,gBAAgB,CAAC,EACvC;YACA,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,IAAI,CAAC;SACjC;IACH,CAAC;IAEO,UAAU,CAAC,GAAgB;QACjC,MAAM,UAAU,GAAG,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC;QACnC,IAAI,UAAU,KAAK,MAAM,EAAE;YACzB,MAAM,OAAO,GAAG;gBACd,OAAO,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI;aAClC,CAAC;YACF,MAAM,OAAO,GAAG,GAAG,CAAC,aAAwB,CAAC;YAC7C,IAAI,OAAO,EAAE;gBACX,MAAM,IAAI,GAAG,OAAO,CAAC,WAAW,CAAC;gBACjC,IAAI,IAAI,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE;oBAC3B,OAAO,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC;iBACxB;gBACD,MAAM,WAAW,GAAG,OAAO,CAAC,kBAAkB,CAAC;gBAC/C,IAAI,WAAW,IAAI,WAAW,CAAC,MAAM,GAAG,CAAC,EAAE;oBACzC,MAAM,gBAAgB,GAAG,WAAW,CAAC,GAAG,CACtC,UAAU,CAAC,EAAE,CAAC,UAAU,CAAC,IAAI,CAC9B,CAAC;oBACF,OAAO,CAAC,aAAa,CAAC,GAAG,gBAAgB,CAAC;iBAC3C;aACF;YACD,IAAI,IAAI,CAAC,aAAa,EAAE;gBACtB,OAAO,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC;aAC7C;YAED,MAAM,YAAY,GAAG,UAAU,GAAG,4BAA4B,CAAC;YAE/D,QAAQ,CAAC,uBAAuB,EAAE,OAAO,CAAC;iBACvC,IAAI,CAAC,QAAQ,CAAC,EAAE;gBACf,IAAI,QAAQ,CAAC,MAAM,GAAG,GAAG,EAAE;oBACzB,OAAO,CAAC,KAAK,EAAE,CAAC;oBAChB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;oBACnB,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,WAAW,EAAE,EAAE,GAAG,EAAE,OAAO,EAAE,CAAC,CAAC;iBACrE;qBAAM,IAAI,QAAQ,CAAC,MAAM,GAAG,GAAG,EAAE;oBAChC,IACE,QAAQ,CAAC,IAAI,CAAC,IAAI;wBAClB,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC;wBAC7B,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,GAAG,CAAC,EAChC;wBACA,IAAI,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;wBACtC,SAAS,GAAG,SAAS,CAAC,OAAO,CAC3B,oCAAoC,EACpC,yBAAyB,CAC1B,CAAC;wBACF,OAAO,CAAC,WAAW,GAAG,SAAS,CAAC;qBACjC;yBAAM,IACL,QAAQ,CAAC,IAAI,CAAC,WAAW;wBACzB,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC;wBACpC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,MAAM,GAAG,CAAC,EACvC;wBACA,IAAI,eAAe,GAAG,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;wBACnD,eAAe,GAAG,eAAe;6BAC9B,OAAO,CACN,oCAAoC,EACpC,gCAAgC,CACjC;6BACA,OAAO,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;wBAChC,OAAO,CAAC,WAAW,GAAG,eAAe,CAAC;qBACvC;yBAAM;wBACL,OAAO,CAAC,WAAW,GAAG,YAAY,CAAC;qBACpC;iBACF;qBAAM;oBACL,OAAO,CAAC,WAAW,GAAG,YAAY,CAAC;iBACpC;YACH,CAAC,CAAC;iBACD,KAAK,CAAC,KAAK,CAAC,EAAE;gBACb,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;gBACrB,OAAO,CAAC,WAAW,GAAG,YAAY,CAAC;YACrC,CAAC,CAAC,CAAC;SACN;IACH,CAAC;IAEM,MAAM;QACX,MAAM,cAAc,GAAG,IAAI,CAAC,cAAc;YACxC,CAAC,CAAC,IAAI,CAAC,sBAAsB,EAAE;YAC/B,CAAC,CAAC,IAAI,CAAC;QACT,MAAM,OAAO,GAAG,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,IAAI,CAAC,eAAe,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;QAEpE,MAAM,wBAAwB,GAAG,IAAI,CAAA;;0BAEf,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE;;kCAEtB,cAAc,IAAI,OAAO;WAChD,CAAC;QACR,OAAO,IAAI,CAAA,GAAG,wBAAwB,EAAE,CAAC;IAC3C,CAAC;IAEO,sBAAsB;QAC5B,OAAO,IAAI,CAAA;cACD,IAAI,CAAC,cAAc,CAAC,IAAI;iBACrB,IAAI,CAAC,cAAc;gBACpB,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI;iBAClD,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI;eAC1D,IAAI,CAAC,KAAK;;6BAEI,CAAC;IAC5B,CAAC;IAEO,eAAe;QACrB,IAAI,IAAI,CAAC,aAAa,EAAE;YACtB,IAAI,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,cAAc,CAAC,MAAM,KAAK,QAAQ,EAAE;gBAClE,uDAAuD;gBACvD,OAAO,IAAI,CAAC;aACb;iBAAM;gBACL,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,SAAS,EAAE;oBACjC,iDAAiD;oBACjD,OAAO,IAAI,CAAC,UAAU,EAAE,CAAC;iBAC1B;qBAAM;oBACL,OAAO,IAAI,CAAC;iBACb;aACF;SACF;QAED,IAAI,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,cAAc,CAAC,MAAM,KAAK,QAAQ,EAAE;YAClE,uDAAuD;YACvD,OAAO,IAAI,CAAC;SACb;aAAM;YACL,6BAA6B;YAC7B,OAAO,IAAI,CAAC,UAAU,EAAE,CAAC;SAC1B;IACH,CAAC;IAEO,UAAU;QAChB,OAAO,IAAI,CAAA;;;;;;gCAMiB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC;;;WAG/C,CAAC;IACV,CAAC;CACF;AArNC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,CAAC;+CAC7B;AAGnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qDACgB;AAG3C;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDACV;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;gDACT;AAGnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CACZ;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDACE;AAG7B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDACI;AAG/B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAChB","sourcesContent":["import { css, html, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Contact, CustomEventType, Ticket } from '../interfaces';\nimport { COOKIE_KEYS, getCookieBoolean, postJSON } from '../utils';\nimport { ContactHistory } from './ContactHistory';\nimport { ContactStoreElement } from './ContactStoreElement';\nimport { Compose } from '../compose/Compose';\n\nconst DEFAULT_REFRESH = 10000;\n\nexport class ContactChat extends ContactStoreElement {\n public static get styles() {\n return css`\n .left-pane {\n box-shadow: -13px 10px 7px 14px rgba(0, 0, 0, 0);\n transition: box-shadow 600ms linear;\n }\n\n .left-pane.open {\n z-index: 1000;\n }\n\n :host {\n flex-grow: 1;\n display: flex;\n flex-direction: row;\n min-height: 0;\n border-radius: var(--curvature);\n }\n\n .chat-wrapper {\n display: flex;\n flex-grow: 1;\n flex-direction: column;\n overflow: hidden;\n min-height: 0;\n border-radius: var(--curvature);\n }\n\n temba-contact-history {\n border-bottom: 3px solid #e1e1e1;\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n min-height: 0;\n }\n\n .chatbox {\n background: rgb(242, 242, 242);\n padding: 1em;\n display: flex;\n flex-direction: column;\n z-index: 3;\n border-bottom-left-radius: var(--curvature);\n border-bottom-right-radius: var(--curvature);\n }\n\n .chatbox.full {\n border-bottom-right-radius: 0 !important;\n }\n\n .closed-footer {\n padding: 1em;\n background: #f2f2f2;\n border-top: 3px solid #e1e1e1;\n display: flex;\n flex-direction: column;\n align-items: center;\n }\n\n a {\n color: var(--color-link-primary);\n }\n\n a:hover {\n text-decoration: underline;\n color: var(--color-link-primary-hover);\n }\n\n temba-button#reopen-button {\n --button-y: 1px;\n --button-x: 12px;\n }\n\n temba-completion {\n --widget-box-shadow: none;\n --color-widget-border: transparent;\n --widget-box-shadow-focused: none;\n --color-focus: transparent;\n --color-widget-bg-focused: transparent;\n }\n `;\n }\n\n @property({ type: String, attribute: 'ticket' })\n ticketUUID: string;\n\n @property({ type: String })\n contactsEndpoint = '/api/v2/contacts.json';\n\n @property({ type: String })\n currentNote = '';\n\n @property({ type: Boolean })\n showDetails = true;\n\n @property({ type: Boolean })\n monitor = false;\n\n @property({ type: Object })\n currentTicket: Ticket = null;\n\n @property({ type: Object })\n currentContact: Contact = null;\n\n @property({ type: String })\n agent = '';\n\n // http promise to monitor for completeness\n public httpComplete: Promise<void>;\n\n constructor() {\n super();\n this.showDetails = getCookieBoolean(COOKIE_KEYS.TICKET_SHOW_DETAILS);\n }\n\n refreshInterval = null;\n\n public connectedCallback() {\n super.connectedCallback();\n if (this.monitor) {\n this.refreshInterval = setInterval(() => {\n if (this.currentTicket && this.currentTicket.closed_on) {\n return;\n }\n this.refresh();\n }, DEFAULT_REFRESH);\n }\n }\n\n public disconnectedCallback() {\n if (this.refreshInterval) {\n clearInterval(this.refreshInterval);\n }\n }\n\n public getContactHistory(): ContactHistory {\n return this.shadowRoot.querySelector(\n 'temba-contact-history'\n ) as ContactHistory;\n }\n\n public refresh(scrollToBottom = false): void {\n const contactHistory = this.getContactHistory();\n if (contactHistory) {\n if (scrollToBottom) {\n contactHistory.scrollToBottom();\n }\n contactHistory.refresh();\n // super.refresh();\n }\n }\n\n public updated(changedProperties: Map<string, any>) {\n super.updated(changedProperties);\n\n // if we don't have an endpoint infer one\n if (\n changedProperties.has('data') ||\n changedProperties.has('currentContact')\n ) {\n this.currentContact = this.data;\n }\n }\n\n private handleSend(evt: CustomEvent) {\n const buttonName = evt.detail.name;\n if (buttonName === 'Send') {\n const payload = {\n contact: this.currentContact.uuid,\n };\n const compose = evt.currentTarget as Compose;\n if (compose) {\n const text = compose.currentText;\n if (text && text.length > 0) {\n payload['text'] = text;\n }\n const attachments = compose.currentAttachments;\n if (attachments && attachments.length > 0) {\n const attachment_uuids = attachments.map(\n attachment => attachment.uuid\n );\n payload['attachments'] = attachment_uuids;\n }\n }\n if (this.currentTicket) {\n payload['ticket'] = this.currentTicket.uuid;\n }\n\n const genericError = buttonName + ' failed, please try again.';\n\n postJSON(`/api/v2/messages.json`, payload)\n .then(response => {\n if (response.status < 400) {\n compose.reset();\n this.refresh(true);\n this.fireCustomEvent(CustomEventType.MessageSent, { msg: payload });\n } else if (response.status < 500) {\n if (\n response.json.text &&\n response.json.text.length > 0 &&\n response.json.text[0].length > 0\n ) {\n let textError = response.json.text[0];\n textError = textError.replace(\n 'Ensure this field has no more than',\n 'Maximum allowed text is'\n );\n compose.buttonError = textError;\n } else if (\n response.json.attachments &&\n response.json.attachments.length > 0 &&\n response.json.attachments[0].length > 0\n ) {\n let attachmentError = response.json.attachments[0];\n attachmentError = attachmentError\n .replace(\n 'Ensure this field has no more than',\n 'Maximum allowed attachments is'\n )\n .replace('elements', 'files');\n compose.buttonError = attachmentError;\n } else {\n compose.buttonError = genericError;\n }\n } else {\n compose.buttonError = genericError;\n }\n })\n .catch(error => {\n console.error(error);\n compose.buttonError = genericError;\n });\n }\n }\n\n public render(): TemplateResult {\n const contactHistory = this.currentContact\n ? this.getTembaContactHistory()\n : null;\n const chatbox = this.currentContact ? this.getTembaChatbox() : null;\n\n const contactHistoryAndChatbox = html`<div\n style=\"flex-grow: 1; margin-right: 0em; display:flex; flex-direction:row; min-height: 0;\"\n class=\"left-pane ${this.showDetails ? 'open' : ''}\"\n >\n <div class=\"chat-wrapper\">${contactHistory} ${chatbox}</div>\n </div>`;\n return html`${contactHistoryAndChatbox}`;\n }\n\n private getTembaContactHistory(): TemplateResult {\n return html` <temba-contact-history\n .uuid=${this.currentContact.uuid}\n .contact=${this.currentContact}\n .ticket=${this.currentTicket ? this.currentTicket.uuid : null}\n .endDate=${this.currentTicket ? this.currentTicket.closed_on : null}\n .agent=${this.agent}\n >\n </temba-contact-history>`;\n }\n\n private getTembaChatbox(): TemplateResult {\n if (this.currentTicket) {\n if (this.currentContact && this.currentContact.status !== 'active') {\n //no chatbox for archived, blocked, or stopped contacts\n return null;\n } else {\n if (!this.currentTicket.closed_on) {\n //chatbox for active contacts with an open ticket\n return this.getChatbox();\n } else {\n return null;\n }\n }\n }\n\n if (this.currentContact && this.currentContact.status !== 'active') {\n //no chatbox for archived, blocked, or stopped contacts\n return null;\n } else {\n //chatbox for active contacts\n return this.getChatbox();\n }\n }\n\n private getChatbox(): TemplateResult {\n return html`<div class=\"chatbox\">\n <temba-compose\n chatbox\n attachments\n counter\n button\n @temba-button-clicked=${this.handleSend.bind(this)}\n >\n </temba-compose>\n </div>`;\n }\n}\n"]}
|
|
@@ -9,6 +9,8 @@ export class ContactTickets extends StoreElement {
|
|
|
9
9
|
constructor() {
|
|
10
10
|
super(...arguments);
|
|
11
11
|
this.clickable = false;
|
|
12
|
+
this.expandable = false;
|
|
13
|
+
this.expanded = false;
|
|
12
14
|
}
|
|
13
15
|
static get styles() {
|
|
14
16
|
return css `
|
|
@@ -18,6 +20,7 @@ export class ContactTickets extends StoreElement {
|
|
|
18
20
|
:hover {
|
|
19
21
|
}
|
|
20
22
|
|
|
23
|
+
.ticket.expandable:hover,
|
|
21
24
|
.ticket.clickable:hover {
|
|
22
25
|
cursor: pointer;
|
|
23
26
|
box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.055),
|
|
@@ -43,27 +46,58 @@ export class ContactTickets extends StoreElement {
|
|
|
43
46
|
align-items: center;
|
|
44
47
|
box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.055),
|
|
45
48
|
0 0 0px 1px rgba(0, 0, 0, 0.02);
|
|
49
|
+
transition: all 200ms ease-in-out;
|
|
46
50
|
}
|
|
47
51
|
|
|
48
52
|
.ticket .body {
|
|
53
|
+
flex-grow: 5;
|
|
54
|
+
white-space: nowrap;
|
|
55
|
+
overflow: hidden;
|
|
56
|
+
text-overflow: ellipsis;
|
|
57
|
+
width: 200px;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.ticket .topic {
|
|
49
61
|
flex-grow: 1;
|
|
50
|
-
|
|
51
|
-
-webkit-line-clamp: 1;
|
|
52
|
-
-webkit-box-orient: vertical;
|
|
62
|
+
white-space: nowrap;
|
|
53
63
|
overflow: hidden;
|
|
54
|
-
|
|
64
|
+
text-overflow: ellipsis;
|
|
65
|
+
margin: 0 0.75em;
|
|
66
|
+
width: 60px;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.ticket.expanded .topic {
|
|
70
|
+
display: none;
|
|
55
71
|
}
|
|
56
72
|
|
|
57
|
-
.
|
|
73
|
+
.ticket.expanded .topic-expanded {
|
|
58
74
|
display: -webkit-box;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.topic-expanded {
|
|
78
|
+
flex-grow: 1;
|
|
79
|
+
display: none;
|
|
59
80
|
-webkit-line-clamp: 1;
|
|
60
81
|
-webkit-box-orient: vertical;
|
|
61
82
|
overflow: hidden;
|
|
62
|
-
padding: 0.1em;
|
|
63
83
|
}
|
|
64
84
|
|
|
65
|
-
.ticket
|
|
66
|
-
|
|
85
|
+
.ticket.expanded {
|
|
86
|
+
flex-direction: column-reverse;
|
|
87
|
+
align-items: stretch;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.ticket.expanded .body {
|
|
91
|
+
display: block;
|
|
92
|
+
max-height: 40vh;
|
|
93
|
+
overflow-y: auto;
|
|
94
|
+
-webkit-line-clamp: none;
|
|
95
|
+
border-top: 1px solid #e6e6e6;
|
|
96
|
+
// 6px solid #f9f9f9;
|
|
97
|
+
margin-bottom: 0.5em;
|
|
98
|
+
padding: 0.5em 1em 0em 1em;
|
|
99
|
+
white-space: normal;
|
|
100
|
+
width: initial;
|
|
67
101
|
}
|
|
68
102
|
|
|
69
103
|
.status {
|
|
@@ -76,7 +110,6 @@ export class ContactTickets extends StoreElement {
|
|
|
76
110
|
}
|
|
77
111
|
|
|
78
112
|
.resolve {
|
|
79
|
-
margin-right: 1em;
|
|
80
113
|
color: var(--color-primary-dark);
|
|
81
114
|
}
|
|
82
115
|
|
|
@@ -147,6 +180,21 @@ export class ContactTickets extends StoreElement {
|
|
|
147
180
|
.current-user {
|
|
148
181
|
font-weight: 400;
|
|
149
182
|
}
|
|
183
|
+
|
|
184
|
+
.details {
|
|
185
|
+
display: flex;
|
|
186
|
+
align-items: center;
|
|
187
|
+
padding: 0.5em 1em;
|
|
188
|
+
flex-shrink: 1;
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
.details .date {
|
|
192
|
+
padding: 0em 0.75em;
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
.details .toggle {
|
|
196
|
+
padding-right: 0.75em;
|
|
197
|
+
}
|
|
150
198
|
`;
|
|
151
199
|
}
|
|
152
200
|
prepareData(data) {
|
|
@@ -240,104 +288,113 @@ export class ContactTickets extends StoreElement {
|
|
|
240
288
|
if (this.clickable) {
|
|
241
289
|
this.fireCustomEvent(CustomEventType.ButtonClicked, { ticket });
|
|
242
290
|
}
|
|
291
|
+
else if (this.expandable) {
|
|
292
|
+
this.expanded = !this.expanded;
|
|
293
|
+
}
|
|
243
294
|
}}
|
|
244
295
|
class="ticket ${ticket.status} ${getClasses({
|
|
245
296
|
clickable: this.clickable,
|
|
297
|
+
expandable: this.expandable,
|
|
298
|
+
expanded: this.expanded,
|
|
246
299
|
})}"
|
|
247
300
|
>
|
|
248
301
|
<div class="topic">${ticket.topic.name}</div>
|
|
249
302
|
<div class="body">${ticket.body}</div>
|
|
250
303
|
|
|
251
|
-
<div class="
|
|
252
|
-
<
|
|
253
|
-
|
|
304
|
+
<div class="details">
|
|
305
|
+
<div class="topic-expanded">${ticket.topic.name}</div>
|
|
306
|
+
|
|
307
|
+
<div class="date">
|
|
308
|
+
<temba-date value="${date}" display="duration"></temba-date>
|
|
309
|
+
</div>
|
|
254
310
|
|
|
255
|
-
|
|
311
|
+
${ticket.status === TicketStatus.Closed
|
|
256
312
|
? html `<div class="reopen">
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
313
|
+
<temba-button
|
|
314
|
+
primary
|
|
315
|
+
small
|
|
316
|
+
name="Reopen"
|
|
317
|
+
@click=${(event) => {
|
|
262
318
|
event.preventDefault();
|
|
263
319
|
event.stopPropagation();
|
|
264
320
|
this.handleReopen(ticket.uuid);
|
|
265
321
|
}}
|
|
266
|
-
|
|
267
|
-
|
|
322
|
+
></temba-button>
|
|
323
|
+
</div>`
|
|
268
324
|
: html `
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
325
|
+
<div>
|
|
326
|
+
<temba-dropdown
|
|
327
|
+
drop_align="right"
|
|
328
|
+
arrowsize="8"
|
|
329
|
+
arrowoffset="-44"
|
|
330
|
+
offsety="8"
|
|
331
|
+
offsetx=${ticket.assignee ? -42 : -28}
|
|
332
|
+
>
|
|
333
|
+
<div slot="toggle" class="toggle">
|
|
334
|
+
${ticket.assignee
|
|
279
335
|
? html `
|
|
280
|
-
|
|
281
|
-
|
|
336
|
+
<div style="font-size:0.5em">
|
|
337
|
+
${renderAvatar({
|
|
282
338
|
name: ticket.assignee.name,
|
|
283
339
|
position: 'left',
|
|
284
340
|
})}
|
|
285
|
-
|
|
286
|
-
|
|
341
|
+
</div>
|
|
342
|
+
`
|
|
287
343
|
: html `
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
344
|
+
<temba-button
|
|
345
|
+
name="Assign"
|
|
346
|
+
primary
|
|
347
|
+
small
|
|
348
|
+
></temba-button>
|
|
349
|
+
`}
|
|
350
|
+
</div>
|
|
351
|
+
|
|
352
|
+
<div
|
|
353
|
+
slot="dropdown"
|
|
354
|
+
class="dropdown"
|
|
355
|
+
@click=${(event) => {
|
|
300
356
|
stopEvent(event);
|
|
301
357
|
}}
|
|
302
|
-
|
|
303
|
-
|
|
358
|
+
>
|
|
359
|
+
${ticket.assignee
|
|
304
360
|
? html `
|
|
305
|
-
|
|
306
|
-
|
|
361
|
+
<div
|
|
362
|
+
class="assigned option-group ${agent &&
|
|
307
363
|
ticket.assignee.email == agent.email
|
|
308
364
|
? 'current-user'
|
|
309
365
|
: ''}"
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
366
|
+
>
|
|
367
|
+
${this.renderUser(users.find(user => user.email === ticket.assignee.email))}
|
|
368
|
+
<temba-button
|
|
369
|
+
name="Unassign"
|
|
370
|
+
primary
|
|
371
|
+
small
|
|
372
|
+
@click=${(event) => {
|
|
317
373
|
stopEvent(event);
|
|
318
374
|
this.handleTicketAssignment(ticket.uuid, null);
|
|
319
375
|
}}
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
376
|
+
></temba-button>
|
|
377
|
+
</div>
|
|
378
|
+
`
|
|
323
379
|
: null}
|
|
324
|
-
|
|
325
|
-
(!ticket.assignee ||
|
|
380
|
+
${agent &&
|
|
381
|
+
(!ticket.assignee ||
|
|
382
|
+
agent.email !== ticket.assignee.email)
|
|
326
383
|
? html `
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
384
|
+
<div
|
|
385
|
+
class="current-user option-group"
|
|
386
|
+
@click=${(event) => {
|
|
330
387
|
stopEvent(event);
|
|
331
388
|
this.handleTicketAssignment(ticket.uuid, agent.email);
|
|
332
389
|
}}
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
390
|
+
>
|
|
391
|
+
${this.renderUser(agent)}
|
|
392
|
+
</div>
|
|
393
|
+
`
|
|
337
394
|
: null}
|
|
338
395
|
|
|
339
|
-
|
|
340
|
-
|
|
396
|
+
<div class="options option-group">
|
|
397
|
+
${this.store.getAssignableUsers().map(user => {
|
|
341
398
|
if (ticket.assignee &&
|
|
342
399
|
user.email === ticket.assignee.email) {
|
|
343
400
|
return null;
|
|
@@ -346,36 +403,37 @@ export class ContactTickets extends StoreElement {
|
|
|
346
403
|
return null;
|
|
347
404
|
}
|
|
348
405
|
return html `<div
|
|
349
|
-
|
|
406
|
+
@click=${(event) => {
|
|
350
407
|
stopEvent(event);
|
|
351
408
|
this.handleTicketAssignment(ticket.uuid, user.email);
|
|
352
409
|
}}
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
410
|
+
>
|
|
411
|
+
${this.renderUser(user)}
|
|
412
|
+
</div>`;
|
|
356
413
|
})}
|
|
414
|
+
</div>
|
|
357
415
|
</div>
|
|
358
|
-
</
|
|
359
|
-
</
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
@click=${(event) => {
|
|
416
|
+
</temba-dropdown>
|
|
417
|
+
</div>
|
|
418
|
+
<temba-tip
|
|
419
|
+
text="Resolve"
|
|
420
|
+
position="left"
|
|
421
|
+
style="width:1.5em"
|
|
422
|
+
class="resolve"
|
|
423
|
+
>
|
|
424
|
+
<temba-icon
|
|
425
|
+
size="1.25"
|
|
426
|
+
name="${Icon.check}"
|
|
427
|
+
@click=${(event) => {
|
|
371
428
|
event.preventDefault();
|
|
372
429
|
event.stopPropagation();
|
|
373
430
|
this.handleClose(ticket.uuid);
|
|
374
431
|
}}
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
432
|
+
?clickable=${open}
|
|
433
|
+
/>
|
|
434
|
+
</temba-tip>
|
|
435
|
+
`}
|
|
436
|
+
</div>
|
|
379
437
|
</div>
|
|
380
438
|
`;
|
|
381
439
|
}
|
|
@@ -401,6 +459,12 @@ __decorate([
|
|
|
401
459
|
__decorate([
|
|
402
460
|
property({ type: Boolean })
|
|
403
461
|
], ContactTickets.prototype, "clickable", void 0);
|
|
462
|
+
__decorate([
|
|
463
|
+
property({ type: Boolean })
|
|
464
|
+
], ContactTickets.prototype, "expandable", void 0);
|
|
465
|
+
__decorate([
|
|
466
|
+
property({ type: Boolean })
|
|
467
|
+
], ContactTickets.prototype, "expanded", void 0);
|
|
404
468
|
__decorate([
|
|
405
469
|
property({ type: Object, attribute: false })
|
|
406
470
|
], ContactTickets.prototype, "data", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContactTickets.js","sourceRoot":"","sources":["../../../src/contacts/ContactTickets.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, PropertyValueMap, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { CustomEventType, Ticket, TicketStatus, User } from '../interfaces';\nimport { StoreElement } from '../store/StoreElement';\nimport {\n getAssets,\n getClasses,\n getFullName,\n postJSON,\n renderAvatar,\n stopEvent,\n} from '../utils';\nimport { Icon } from '../vectoricon';\n\nexport class ContactTickets extends StoreElement {\n @property({ type: String })\n agent: string;\n\n @property({ type: String })\n contact: string;\n\n @property({ type: String })\n ticket: string;\n\n @property({ type: Boolean })\n clickable = false;\n\n @property({ type: Object, attribute: false })\n data: Ticket[];\n\n static get styles() {\n return css`\n :host {\n }\n\n :hover {\n }\n\n .ticket.clickable:hover {\n cursor: pointer;\n box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.055),\n 0 0 0px 2px var(--color-link-primary);\n }\n\n .tickets {\n display: flex;\n padding: 0.3em 0.8em;\n }\n\n .count {\n margin-left: 0.5em;\n }\n\n .ticket {\n background: #fff;\n display: flex;\n margin-bottom: 0.5em;\n border-radius: var(--curvature);\n display: flex;\n flex-direction: row;\n align-items: center;\n box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.055),\n 0 0 0px 1px rgba(0, 0, 0, 0.02);\n }\n\n .ticket .body {\n flex-grow: 1;\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n padding: 0.1em;\n }\n\n .date {\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n padding: 0.1em;\n }\n\n .ticket > div {\n padding: 0.5em 1em;\n }\n\n .status {\n --icon-color: #999;\n }\n\n .ticket.closed {\n background: #f9f9f9;\n color: #888;\n }\n\n .resolve {\n margin-right: 1em;\n color: var(--color-primary-dark);\n }\n\n .dropdown {\n color: rgb(45, 45, 45);\n z-index: 50;\n width: 18em;\n }\n\n .option-group {\n padding: 0.4em;\n border-bottom: 1px solid #f3f3f3;\n }\n\n .assigned .user {\n flex-grow: 1;\n }\n\n .assigned {\n display: flex;\n align-items: center;\n }\n\n .assigned temba-button {\n margin-right: 0.75em;\n }\n\n .assigned .user:hover {\n cursor: default;\n background: none;\n }\n\n .options {\n max-height: 40vh;\n overflow-y: auto;\n border-bottom: none;\n }\n\n .user {\n display: flex;\n padding: 0.4em 0.7em;\n align-items: center;\n border-radius: var(--curvature);\n cursor: pointer;\n }\n\n .user:hover {\n background: var(--color-selection);\n }\n\n .user .avatar {\n font-size: 0.5em;\n margin-right: 1em;\n }\n\n .user .name {\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n flex-grow: 1;\n }\n\n .user temba-button {\n margin-left: 0.5em;\n }\n\n .current-user {\n font-weight: 400;\n }\n `;\n }\n\n prepareData(data: any): any {\n if (data && data.length) {\n data.sort((a: Ticket, b: Ticket) => {\n if (a.status == TicketStatus.Open && b.status == TicketStatus.Closed) {\n return -1;\n }\n\n if (b.status == TicketStatus.Open && a.status == TicketStatus.Closed) {\n return 1;\n }\n\n if (\n a.status == TicketStatus.Closed &&\n b.status == TicketStatus.Closed\n ) {\n return (\n new Date(b.closed_on).getTime() - new Date(a.closed_on).getTime()\n );\n }\n\n return (\n new Date(b.opened_on).getTime() - new Date(a.opened_on).getTime()\n );\n });\n }\n return data;\n }\n\n protected updated(\n changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n ): void {\n super.updated(changes);\n if (changes.has('contact') || changes.has('ticket')) {\n if (this.contact) {\n this.url = `/api/v2/tickets.json?contact=${this.contact}${\n this.ticket ? '&ticket=' + this.ticket : ''\n }`;\n } else {\n this.url = null;\n }\n }\n }\n\n private renderUser(user: User) {\n if (!user) {\n return null;\n }\n return html`<div class=\"user\">\n <div class=\"avatar\">${renderAvatar({ user: user })}</div>\n <div class=\"name\">${getFullName(user)}</div>\n </div>`;\n }\n\n private handleClose(uuid: string) {\n postJSON(`/api/v2/ticket_actions.json`, {\n tickets: [uuid],\n action: 'close',\n })\n .then(() => {\n this.refresh();\n })\n .catch((response: any) => {\n console.error(response);\n });\n }\n\n private handleReopen(uuid: string) {\n postJSON(`/api/v2/ticket_actions.json`, {\n tickets: [uuid],\n action: 'reopen',\n })\n .then(() => {\n this.refresh();\n })\n .catch((response: any) => {\n console.error(response);\n });\n }\n\n public handleTicketAssignment(uuid: string, email: string) {\n // if its already assigned to use, it's a noop\n const ticket = this.data.find(ticket => ticket.uuid === uuid);\n if (ticket.assignee && ticket.assignee.email === email) {\n return;\n }\n\n postJSON(`/api/v2/ticket_actions.json`, {\n tickets: [uuid],\n action: 'assign',\n assignee: email,\n })\n .then(() => {\n this.refresh();\n })\n .catch((response: any) => {\n console.error(response);\n });\n return true;\n }\n\n public renderTicket(ticket: Ticket) {\n const date = ticket.opened_on;\n const users = this.store.getAssignableUsers();\n const agent = users.find(user => user.email === this.agent);\n return html`\n <div\n @click=${() => {\n if (this.clickable) {\n this.fireCustomEvent(CustomEventType.ButtonClicked, { ticket });\n }\n }}\n class=\"ticket ${ticket.status} ${getClasses({\n clickable: this.clickable,\n })}\"\n >\n <div class=\"topic\">${ticket.topic.name}</div>\n <div class=\"body\">${ticket.body}</div>\n\n <div class=\"date\">\n <temba-date value=\"${date}\" display=\"duration\"></temba-date>\n </div>\n\n ${ticket.status === TicketStatus.Closed\n ? html`<div class=\"reopen\">\n <temba-button\n primary\n small\n name=\"Reopen\"\n @click=${(event: MouseEvent) => {\n event.preventDefault();\n event.stopPropagation();\n this.handleReopen(ticket.uuid);\n }}\n ></temba-button>\n </div>`\n : html`\n <div>\n <temba-dropdown\n drop_align=\"right\"\n arrowsize=\"8\"\n arrowoffset=\"-44\"\n offsety=\"8\"\n offsetx=${ticket.assignee ? -42 : -28}\n >\n <div slot=\"toggle\" class=\"toggle\">\n ${ticket.assignee\n ? html`\n <div style=\"font-size:0.5em\">\n ${renderAvatar({\n name: ticket.assignee.name,\n position: 'left',\n })}\n </div>\n `\n : html`\n <temba-button\n name=\"Assign\"\n primary\n small\n ></temba-button>\n `}\n </div>\n\n <div\n slot=\"dropdown\"\n class=\"dropdown\"\n @click=${(event: MouseEvent) => {\n stopEvent(event);\n }}\n >\n ${ticket.assignee\n ? html`\n <div\n class=\"assigned option-group ${agent &&\n ticket.assignee.email == agent.email\n ? 'current-user'\n : ''}\"\n >\n ${this.renderUser(\n users.find(\n user => user.email === ticket.assignee.email\n )\n )}\n <temba-button\n name=\"Unassign\"\n primary\n small\n @click=${(event: MouseEvent) => {\n stopEvent(event);\n this.handleTicketAssignment(ticket.uuid, null);\n }}\n ></temba-button>\n </div>\n `\n : null}\n ${agent &&\n (!ticket.assignee || agent.email !== ticket.assignee.email)\n ? html`\n <div\n class=\"current-user option-group\"\n @click=${(event: MouseEvent) => {\n stopEvent(event);\n this.handleTicketAssignment(\n ticket.uuid,\n agent.email\n );\n }}\n >\n ${this.renderUser(agent)}\n </div>\n `\n : null}\n\n <div class=\"options option-group\">\n ${this.store.getAssignableUsers().map(user => {\n if (\n ticket.assignee &&\n user.email === ticket.assignee.email\n ) {\n return null;\n }\n\n if (user.email === this.agent) {\n return null;\n }\n return html`<div\n @click=${(event: MouseEvent) => {\n stopEvent(event);\n this.handleTicketAssignment(\n ticket.uuid,\n user.email\n );\n }}\n >\n ${this.renderUser(user)}\n </div>`;\n })}\n </div>\n </div>\n </temba-dropdown>\n </div>\n <temba-tip\n text=\"Resolve\"\n position=\"left\"\n style=\"width:1.5em\"\n class=\"resolve\"\n >\n <temba-icon\n size=\"1.25\"\n name=\"${Icon.check}\"\n @click=${(event: MouseEvent) => {\n event.preventDefault();\n event.stopPropagation();\n this.handleClose(ticket.uuid);\n }}\n ?clickable=${open}\n />\n </temba-tip>\n `}\n </div>\n `;\n }\n\n public render(): TemplateResult {\n if (this.data && this.data.length > 0) {\n const tickets = this.data.map(ticket => {\n return this.renderTicket(ticket);\n });\n return html`${tickets}`;\n }\n\n return html`<slot name=\"empty\"></slot>`;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"ContactTickets.js","sourceRoot":"","sources":["../../../src/contacts/ContactTickets.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, PropertyValueMap, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { CustomEventType, Ticket, TicketStatus, User } from '../interfaces';\nimport { StoreElement } from '../store/StoreElement';\nimport {\n getClasses,\n getFullName,\n postJSON,\n renderAvatar,\n stopEvent,\n} from '../utils';\nimport { Icon } from '../vectoricon';\n\nexport class ContactTickets extends StoreElement {\n @property({ type: String })\n agent: string;\n\n @property({ type: String })\n contact: string;\n\n @property({ type: String })\n ticket: string;\n\n @property({ type: Boolean })\n clickable = false;\n\n @property({ type: Boolean })\n expandable = false;\n\n @property({ type: Boolean })\n expanded = false;\n\n @property({ type: Object, attribute: false })\n data: Ticket[];\n\n static get styles() {\n return css`\n :host {\n }\n\n :hover {\n }\n\n .ticket.expandable:hover,\n .ticket.clickable:hover {\n cursor: pointer;\n box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.055),\n 0 0 0px 2px var(--color-link-primary);\n }\n\n .tickets {\n display: flex;\n padding: 0.3em 0.8em;\n }\n\n .count {\n margin-left: 0.5em;\n }\n\n .ticket {\n background: #fff;\n display: flex;\n margin-bottom: 0.5em;\n border-radius: var(--curvature);\n display: flex;\n flex-direction: row;\n align-items: center;\n box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.055),\n 0 0 0px 1px rgba(0, 0, 0, 0.02);\n transition: all 200ms ease-in-out;\n }\n\n .ticket .body {\n flex-grow: 5;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n width: 200px;\n }\n\n .ticket .topic {\n flex-grow: 1;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n margin: 0 0.75em;\n width: 60px;\n }\n\n .ticket.expanded .topic {\n display: none;\n }\n\n .ticket.expanded .topic-expanded {\n display: -webkit-box;\n }\n\n .topic-expanded {\n flex-grow: 1;\n display: none;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n }\n\n .ticket.expanded {\n flex-direction: column-reverse;\n align-items: stretch;\n }\n\n .ticket.expanded .body {\n display: block;\n max-height: 40vh;\n overflow-y: auto;\n -webkit-line-clamp: none;\n border-top: 1px solid #e6e6e6;\n // 6px solid #f9f9f9;\n margin-bottom: 0.5em;\n padding: 0.5em 1em 0em 1em;\n white-space: normal;\n width: initial;\n }\n\n .status {\n --icon-color: #999;\n }\n\n .ticket.closed {\n background: #f9f9f9;\n color: #888;\n }\n\n .resolve {\n color: var(--color-primary-dark);\n }\n\n .dropdown {\n color: rgb(45, 45, 45);\n z-index: 50;\n width: 18em;\n }\n\n .option-group {\n padding: 0.4em;\n border-bottom: 1px solid #f3f3f3;\n }\n\n .assigned .user {\n flex-grow: 1;\n }\n\n .assigned {\n display: flex;\n align-items: center;\n }\n\n .assigned temba-button {\n margin-right: 0.75em;\n }\n\n .assigned .user:hover {\n cursor: default;\n background: none;\n }\n\n .options {\n max-height: 40vh;\n overflow-y: auto;\n border-bottom: none;\n }\n\n .user {\n display: flex;\n padding: 0.4em 0.7em;\n align-items: center;\n border-radius: var(--curvature);\n cursor: pointer;\n }\n\n .user:hover {\n background: var(--color-selection);\n }\n\n .user .avatar {\n font-size: 0.5em;\n margin-right: 1em;\n }\n\n .user .name {\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n flex-grow: 1;\n }\n\n .user temba-button {\n margin-left: 0.5em;\n }\n\n .current-user {\n font-weight: 400;\n }\n\n .details {\n display: flex;\n align-items: center;\n padding: 0.5em 1em;\n flex-shrink: 1;\n }\n\n .details .date {\n padding: 0em 0.75em;\n }\n\n .details .toggle {\n padding-right: 0.75em;\n }\n `;\n }\n\n prepareData(data: any): any {\n if (data && data.length) {\n data.sort((a: Ticket, b: Ticket) => {\n if (a.status == TicketStatus.Open && b.status == TicketStatus.Closed) {\n return -1;\n }\n\n if (b.status == TicketStatus.Open && a.status == TicketStatus.Closed) {\n return 1;\n }\n\n if (\n a.status == TicketStatus.Closed &&\n b.status == TicketStatus.Closed\n ) {\n return (\n new Date(b.closed_on).getTime() - new Date(a.closed_on).getTime()\n );\n }\n\n return (\n new Date(b.opened_on).getTime() - new Date(a.opened_on).getTime()\n );\n });\n }\n return data;\n }\n\n protected updated(\n changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n ): void {\n super.updated(changes);\n if (changes.has('contact') || changes.has('ticket')) {\n if (this.contact) {\n this.url = `/api/v2/tickets.json?contact=${this.contact}${\n this.ticket ? '&ticket=' + this.ticket : ''\n }`;\n } else {\n this.url = null;\n }\n }\n }\n\n private renderUser(user: User) {\n if (!user) {\n return null;\n }\n return html`<div class=\"user\">\n <div class=\"avatar\">${renderAvatar({ user: user })}</div>\n <div class=\"name\">${getFullName(user)}</div>\n </div>`;\n }\n\n private handleClose(uuid: string) {\n postJSON(`/api/v2/ticket_actions.json`, {\n tickets: [uuid],\n action: 'close',\n })\n .then(() => {\n this.refresh();\n })\n .catch((response: any) => {\n console.error(response);\n });\n }\n\n private handleReopen(uuid: string) {\n postJSON(`/api/v2/ticket_actions.json`, {\n tickets: [uuid],\n action: 'reopen',\n })\n .then(() => {\n this.refresh();\n })\n .catch((response: any) => {\n console.error(response);\n });\n }\n\n public handleTicketAssignment(uuid: string, email: string) {\n // if its already assigned to use, it's a noop\n const ticket = this.data.find(ticket => ticket.uuid === uuid);\n if (ticket.assignee && ticket.assignee.email === email) {\n return;\n }\n\n postJSON(`/api/v2/ticket_actions.json`, {\n tickets: [uuid],\n action: 'assign',\n assignee: email,\n })\n .then(() => {\n this.refresh();\n })\n .catch((response: any) => {\n console.error(response);\n });\n return true;\n }\n\n public renderTicket(ticket: Ticket) {\n const date = ticket.opened_on;\n const users = this.store.getAssignableUsers();\n const agent = users.find(user => user.email === this.agent);\n return html`\n <div\n @click=${() => {\n if (this.clickable) {\n this.fireCustomEvent(CustomEventType.ButtonClicked, { ticket });\n } else if (this.expandable) {\n this.expanded = !this.expanded;\n }\n }}\n class=\"ticket ${ticket.status} ${getClasses({\n clickable: this.clickable,\n expandable: this.expandable,\n expanded: this.expanded,\n })}\"\n >\n <div class=\"topic\">${ticket.topic.name}</div>\n <div class=\"body\">${ticket.body}</div>\n\n <div class=\"details\">\n <div class=\"topic-expanded\">${ticket.topic.name}</div>\n\n <div class=\"date\">\n <temba-date value=\"${date}\" display=\"duration\"></temba-date>\n </div>\n\n ${ticket.status === TicketStatus.Closed\n ? html`<div class=\"reopen\">\n <temba-button\n primary\n small\n name=\"Reopen\"\n @click=${(event: MouseEvent) => {\n event.preventDefault();\n event.stopPropagation();\n this.handleReopen(ticket.uuid);\n }}\n ></temba-button>\n </div>`\n : html`\n <div>\n <temba-dropdown\n drop_align=\"right\"\n arrowsize=\"8\"\n arrowoffset=\"-44\"\n offsety=\"8\"\n offsetx=${ticket.assignee ? -42 : -28}\n >\n <div slot=\"toggle\" class=\"toggle\">\n ${ticket.assignee\n ? html`\n <div style=\"font-size:0.5em\">\n ${renderAvatar({\n name: ticket.assignee.name,\n position: 'left',\n })}\n </div>\n `\n : html`\n <temba-button\n name=\"Assign\"\n primary\n small\n ></temba-button>\n `}\n </div>\n\n <div\n slot=\"dropdown\"\n class=\"dropdown\"\n @click=${(event: MouseEvent) => {\n stopEvent(event);\n }}\n >\n ${ticket.assignee\n ? html`\n <div\n class=\"assigned option-group ${agent &&\n ticket.assignee.email == agent.email\n ? 'current-user'\n : ''}\"\n >\n ${this.renderUser(\n users.find(\n user => user.email === ticket.assignee.email\n )\n )}\n <temba-button\n name=\"Unassign\"\n primary\n small\n @click=${(event: MouseEvent) => {\n stopEvent(event);\n this.handleTicketAssignment(\n ticket.uuid,\n null\n );\n }}\n ></temba-button>\n </div>\n `\n : null}\n ${agent &&\n (!ticket.assignee ||\n agent.email !== ticket.assignee.email)\n ? html`\n <div\n class=\"current-user option-group\"\n @click=${(event: MouseEvent) => {\n stopEvent(event);\n this.handleTicketAssignment(\n ticket.uuid,\n agent.email\n );\n }}\n >\n ${this.renderUser(agent)}\n </div>\n `\n : null}\n\n <div class=\"options option-group\">\n ${this.store.getAssignableUsers().map(user => {\n if (\n ticket.assignee &&\n user.email === ticket.assignee.email\n ) {\n return null;\n }\n\n if (user.email === this.agent) {\n return null;\n }\n return html`<div\n @click=${(event: MouseEvent) => {\n stopEvent(event);\n this.handleTicketAssignment(\n ticket.uuid,\n user.email\n );\n }}\n >\n ${this.renderUser(user)}\n </div>`;\n })}\n </div>\n </div>\n </temba-dropdown>\n </div>\n <temba-tip\n text=\"Resolve\"\n position=\"left\"\n style=\"width:1.5em\"\n class=\"resolve\"\n >\n <temba-icon\n size=\"1.25\"\n name=\"${Icon.check}\"\n @click=${(event: MouseEvent) => {\n event.preventDefault();\n event.stopPropagation();\n this.handleClose(ticket.uuid);\n }}\n ?clickable=${open}\n />\n </temba-tip>\n `}\n </div>\n </div>\n `;\n }\n\n public render(): TemplateResult {\n if (this.data && this.data.length > 0) {\n const tickets = this.data.map(ticket => {\n return this.renderTicket(ticket);\n });\n return html`${tickets}`;\n }\n\n return html`<slot name=\"empty\"></slot>`;\n }\n}\n"]}
|