npm - @nyaruka/temba-components - Versions diffs - 0.48.2 → 0.48.4 - Mend

@nyaruka/temba-components 0.48.2 → 0.48.4

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.

Files changed (25) hide show

package/CHANGELOG.md +15 -0
package/dist/{98c8996c.js → 170efbb2.js} +118 -128
package/dist/index.js +118 -128
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/TembaMenu.js +9 -2
package/out-tsc/src/list/TembaMenu.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 +2 -1
package/screenshots/truth/contacts/tickets-assignment.png +0 -0
package/screenshots/truth/contacts/tickets.png +0 -0
package/screenshots/truth/menu/menu-focused-with items.png +0 -0
package/screenshots/truth/menu/menu-refresh-1.png +0 -0
package/screenshots/truth/menu/menu-refresh-2.png +0 -0
package/screenshots/truth/menu/menu-submenu.png +0 -0
package/screenshots/truth/menu/menu-tasks-nextup.png +0 -0
package/screenshots/truth/menu/menu-tasks.png +0 -0
package/src/contacts/ContactTickets.ts +160 -176
package/src/list/TembaMenu.ts +9 -3
package/src/list/TicketList.ts +1 -1

package/out-tsc/src/contacts/ContactTickets.js CHANGED Viewed

@@ -27,8 +27,15 @@ export class ContactTickets extends StoreElement {
           0 0 0px 2px var(--color-link-primary);
       }
+      .header {
+        display: flex;
+        flex-direction: row;
+        flex-grow: 1;
+      }
       .tickets {
         display: flex;
+        flex-direction: column;
         padding: 0.3em 0.8em;
       }
@@ -39,65 +46,42 @@ export class ContactTickets extends StoreElement {
       .ticket {
         background: #fff;
         display: flex;
+        flex-direction: column;
         margin-bottom: 0.5em;
         border-radius: var(--curvature);
         display: flex;
-        flex-direction: row;
-        align-items: center;
+        flex-direction: column;
+        align-items: stretch;
         box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.055),
           0 0 0px 1px rgba(0, 0, 0, 0.02);
         transition: all 200ms ease-in-out;
       }
-      .ticket .body {
-        flex-grow: 5;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        width: 200px;
-      }
       .ticket .topic {
-        flex-grow: 1;
-        white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
-        margin: 0 0.75em;
-        width: 60px;
-      }
-      .ticket.expanded .topic {
-        display: none;
-      }
-      .ticket.expanded .topic-expanded {
+        margin: 0.5em 0.75em 0.5em 0.75em;
         display: -webkit-box;
-      }
-      .topic-expanded {
-        flex-grow: 1;
-        display: none;
-        -webkit-line-clamp: 1;
         -webkit-box-orient: vertical;
-        overflow: hidden;
-      }
-      .ticket.expanded {
-        flex-direction: column-reverse;
-        align-items: stretch;
+        -webkit-line-clamp: 1;
+        flex-grow: 2;
       }
-      .ticket.expanded .body {
-        display: block;
-        max-height: 40vh;
+      .ticket .body {
+        max-height: 0px;
         overflow-y: auto;
         -webkit-line-clamp: none;
-        border-top: 1px solid #e6e6e6;
-        // 6px solid #f9f9f9;
-        margin-bottom: 0.5em;
-        padding: 0.5em 1em 0em 1em;
         white-space: normal;
         width: initial;
+        padding: 0.5em 0.75em 0em 0.75em;
+        max-height: 40vh;
+        display: none;
+        margin-bottom: 0.5em;
+        border-top: 1px solid #e6e6e6;
+      }
+      .ticket.expanded .body {
+        display: block;
       }
       .status {
@@ -184,16 +168,16 @@ export class ContactTickets extends StoreElement {
       .details {
         display: flex;
         align-items: center;
-        padding: 0.5em 1em;
         flex-shrink: 1;
+        margin-right: 0.5em;
       }
       .details .date {
-        padding: 0em 0.75em;
+        padding: 0em 0.5em;
       }
       .details .toggle {
-        padding-right: 0.75em;
+        padding-right: 0.5em;
       }
     `;
     }
@@ -298,103 +282,101 @@ export class ContactTickets extends StoreElement {
             expanded: this.expanded,
         })}"
       >
-        <div class="topic">${ticket.topic.name}</div>
-        <div class="body">${ticket.body}</div>
+        <div class="header">
+          <div class="topic">${ticket.topic.name}</div>
-        <div class="details">
-          <div class="topic-expanded">${ticket.topic.name}</div>
-          <div class="date">
-            <temba-date value="${date}" display="duration"></temba-date>
-          </div>
+          <div class="details">
+            <div class="date">
+              <temba-date value="${date}" display="duration"></temba-date>
+            </div>
-          ${ticket.status === TicketStatus.Closed
+            ${ticket.status === TicketStatus.Closed
             ? html `<div class="reopen">
-                <temba-button
-                  primary
-                  small
-                  name="Reopen"
-                  @click=${(event) => {
+                  <temba-button
+                    primary
+                    small
+                    name="Reopen"
+                    @click=${(event) => {
                 event.preventDefault();
                 event.stopPropagation();
                 this.handleReopen(ticket.uuid);
             }}
-                ></temba-button>
-              </div>`
+                  ></temba-button>
+                </div>`
             : html `
-                <div>
-                  <temba-dropdown
-                    drop_align="right"
-                    arrowsize="8"
-                    arrowoffset="-44"
-                    offsety="8"
-                    offsetx=${ticket.assignee ? -42 : -28}
-                  >
-                    <div slot="toggle" class="toggle">
-                      ${ticket.assignee
+                  <div>
+                    <temba-dropdown
+                      drop_align="right"
+                      arrowsize="8"
+                      arrowoffset="-44"
+                      offsety="8"
+                      offsetx=${ticket.assignee ? -42 : -28}
+                    >
+                      <div slot="toggle" class="toggle">
+                        ${ticket.assignee
                 ? html `
-                            <div style="font-size:0.5em">
-                              ${renderAvatar({
+                              <div style="font-size:0.5em">
+                                ${renderAvatar({
                     name: ticket.assignee.name,
                     position: 'left',
                 })}
-                            </div>
-                          `
+                              </div>
+                            `
                 : html `
-                            <temba-button
-                              name="Assign"
-                              primary
-                              small
-                            ></temba-button>
-                          `}
-                    </div>
-                    <div
-                      slot="dropdown"
-                      class="dropdown"
-                      @click=${(event) => {
+                              <temba-button
+                                name="Assign"
+                                primary
+                                small
+                              ></temba-button>
+                            `}
+                      </div>
+                      <div
+                        slot="dropdown"
+                        class="dropdown"
+                        @click=${(event) => {
                 stopEvent(event);
             }}
-                    >
-                      ${ticket.assignee
+                      >
+                        ${ticket.assignee
                 ? html `
-                            <div
-                              class="assigned option-group ${agent &&
+                              <div
+                                class="assigned option-group ${agent &&
                     ticket.assignee.email == agent.email
                     ? 'current-user'
                     : ''}"
-                            >
-                              ${this.renderUser(users.find(user => user.email === ticket.assignee.email))}
-                              <temba-button
-                                name="Unassign"
-                                primary
-                                small
-                                @click=${(event) => {
+                              >
+                                ${this.renderUser(users.find(user => user.email === ticket.assignee.email))}
+                                <temba-button
+                                  name="Unassign"
+                                  primary
+                                  small
+                                  @click=${(event) => {
                     stopEvent(event);
                     this.handleTicketAssignment(ticket.uuid, null);
                 }}
-                              ></temba-button>
-                            </div>
-                          `
+                                ></temba-button>
+                              </div>
+                            `
                 : null}
-                      ${agent &&
+                        ${agent &&
                 (!ticket.assignee ||
                     agent.email !== ticket.assignee.email)
                 ? html `
-                            <div
-                              class="current-user option-group"
-                              @click=${(event) => {
+                              <div
+                                class="current-user option-group"
+                                @click=${(event) => {
                     stopEvent(event);
                     this.handleTicketAssignment(ticket.uuid, agent.email);
                 }}
-                            >
-                              ${this.renderUser(agent)}
-                            </div>
-                          `
+                              >
+                                ${this.renderUser(agent)}
+                              </div>
+                            `
                 : null}
-                      <div class="options option-group">
-                        ${this.store.getAssignableUsers().map(user => {
+                        <div class="options option-group">
+                          ${this.store.getAssignableUsers().map(user => {
                 if (ticket.assignee &&
                     user.email === ticket.assignee.email) {
                     return null;
@@ -403,37 +385,39 @@ export class ContactTickets extends StoreElement {
                     return null;
                 }
                 return html `<div
-                            @click=${(event) => {
+                              @click=${(event) => {
                     stopEvent(event);
                     this.handleTicketAssignment(ticket.uuid, user.email);
                 }}
-                          >
-                            ${this.renderUser(user)}
-                          </div>`;
+                            >
+                              ${this.renderUser(user)}
+                            </div>`;
             })}
+                        </div>
                       </div>
-                    </div>
-                  </temba-dropdown>
-                </div>
-                <temba-tip
-                  text="Resolve"
-                  position="left"
-                  style="width:1.5em"
-                  class="resolve"
-                >
-                  <temba-icon
-                    size="1.25"
-                    name="${Icon.check}"
-                    @click=${(event) => {
+                    </temba-dropdown>
+                  </div>
+                  <temba-tip
+                    text="Resolve"
+                    position="left"
+                    style="width:1.5em"
+                    class="resolve"
+                  >
+                    <temba-icon
+                      size="1.25"
+                      name="${Icon.check}"
+                      @click=${(event) => {
                 event.preventDefault();
                 event.stopPropagation();
                 this.handleClose(ticket.uuid);
             }}
-                    ?clickable=${open}
-                  />
-                </temba-tip>
-              `}
+                      ?clickable=${open}
+                    />
+                  </temba-tip>
+                `}
+          </div>
         </div>
+        <div class="body">${ticket.body}</div>
       </div>
     `;
     }

package/out-tsc/src/contacts/ContactTickets.js.map CHANGED Viewed

	@@ -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 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"]}
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 .header {\n display: flex;\n flex-direction: row;\n flex-grow: 1;\n }\n\n .tickets {\n display: flex;\n flex-direction: column;\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 flex-direction: column;\n margin-bottom: 0.5em;\n border-radius: var(--curvature);\n display: flex;\n flex-direction: column;\n align-items: stretch;\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 .topic {\n overflow: hidden;\n text-overflow: ellipsis;\n margin: 0.5em 0.75em 0.5em 0.75em;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 1;\n flex-grow: 2;\n }\n\n .ticket .body {\n max-height: 0px;\n overflow-y: auto;\n -webkit-line-clamp: none;\n white-space: normal;\n width: initial;\n padding: 0.5em 0.75em 0em 0.75em;\n max-height: 40vh;\n display: none;\n margin-bottom: 0.5em;\n border-top: 1px solid #e6e6e6;\n }\n\n .ticket.expanded .body {\n display: block;\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 flex-shrink: 1;\n margin-right: 0.5em;\n }\n\n .details .date {\n padding: 0em 0.5em;\n }\n\n .details .toggle {\n padding-right: 0.5em;\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=\"header\">\n <div class=\"topic\">${ticket.topic.name}</div>\n\n <div class=\"details\">\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 <div class=\"body\">${ticket.body}</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"]}

package/out-tsc/src/list/TembaMenu.js CHANGED Viewed

@@ -1,5 +1,6 @@
 import { __decorate } from "tslib";
 import { css, html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { property } from 'lit/decorators.js';
 import { CustomEventType } from '../interfaces';
 import { RapidElement } from '../RapidElement';
@@ -456,6 +457,11 @@ export class TembaMenu extends RapidElement {
         --icon-color: var(--color-link-primary);
       }
+      a {
+        text-decoration: none;
+        color: var(--color-text-dark);
+      }
       slot[name='header'] {
         display: none;
       }
@@ -526,7 +532,8 @@ export class TembaMenu extends RapidElement {
                 icon = renderAvatar({ name: menuItem.avatar });
             }
             const item = html `
-      <div
+      <a
+        href=${ifDefined(menuItem.href ? menuItem.href : undefined)}
         id="menu-${menuItem.id}"
         class="${itemClasses}"
         @click=${event => {
@@ -579,7 +586,7 @@ export class TembaMenu extends RapidElement {
                 : null}
         </div>
         <div class="right"></div>
-      </div>
+      </a>
     `;
             if (menuItem.popup) {
                 return html `