@nyaruka/temba-components 0.98.0 → 0.100.0
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/.devcontainer/devcontainer.json +28 -30
- package/CHANGELOG.md +17 -0
- package/dist/temba-components.js +89 -56
- package/dist/temba-components.js.map +1 -1
- package/out-tsc/src/contactsearch/ContactSearch.js +0 -11
- package/out-tsc/src/contactsearch/ContactSearch.js.map +1 -1
- package/out-tsc/src/mediapicker/MediaPicker.js +4 -8
- package/out-tsc/src/mediapicker/MediaPicker.js.map +1 -1
- package/out-tsc/src/select/Select.js +1 -1
- package/out-tsc/src/select/Select.js.map +1 -1
- package/out-tsc/src/templates/TemplateEditor.js +102 -28
- package/out-tsc/src/templates/TemplateEditor.js.map +1 -1
- package/out-tsc/src/vectoricon/index.js +0 -1
- package/out-tsc/src/vectoricon/index.js.map +1 -1
- package/package.json +1 -1
- package/src/contactsearch/ContactSearch.ts +0 -15
- package/src/mediapicker/MediaPicker.ts +3 -8
- package/src/select/Select.ts +1 -1
- package/src/templates/TemplateEditor.ts +110 -31
- package/src/vectoricon/index.ts +0 -1
|
@@ -233,9 +233,6 @@ export class ContactSearch extends FormElement {
|
|
|
233
233
|
if (changedProperties.has('recipients')) {
|
|
234
234
|
this.handleRecipientsChanged();
|
|
235
235
|
}
|
|
236
|
-
if (changedProperties.has('advanced') && this.advanced) {
|
|
237
|
-
return;
|
|
238
|
-
}
|
|
239
236
|
// if we remove the in_a_flow option, make sure it's not part of our exclusions
|
|
240
237
|
if (changedProperties.has('in_a_flow') && !this.in_a_flow) {
|
|
241
238
|
delete this.exclusions['in_a_flow'];
|
|
@@ -266,14 +263,6 @@ export class ContactSearch extends FormElement {
|
|
|
266
263
|
const contact_uuids = this.recipients
|
|
267
264
|
.filter((value) => value.type === 'contact')
|
|
268
265
|
.map((value) => value.id);
|
|
269
|
-
if ((group_uuids.length === 0 && contact_uuids.length === 0) ||
|
|
270
|
-
(!this.query && this.advanced)) {
|
|
271
|
-
if (this.summary) {
|
|
272
|
-
this.summary.total = 0;
|
|
273
|
-
}
|
|
274
|
-
this.fetching = false;
|
|
275
|
-
return;
|
|
276
|
-
}
|
|
277
266
|
postJSON(this.endpoint, {
|
|
278
267
|
include: this.advanced
|
|
279
268
|
? { query: this.query }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContactSearch.js","sourceRoot":"","sources":["../../../src/contactsearch/ContactSearch.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, html, css } from 'lit';\nimport { unsafeHTML } from 'lit-html/directives/unsafe-html.js';\nimport { property } from 'lit/decorators.js';\nimport { getClasses, postJSON, stopEvent, WebResponse } from '../utils';\nimport { TextInput } from '../textinput/TextInput';\nimport '../alert/Alert';\nimport { Contact, CustomEventType } from '../interfaces';\nimport { FormElement } from '../FormElement';\nimport { Checkbox } from '../checkbox/Checkbox';\nimport { msg } from '@lit/localize';\nimport { OmniOption } from '../omnibox/Omnibox';\nimport { Select } from '../select/Select';\n\nconst QUEIT_MILLIS = 2000;\n\ninterface SummaryResponse {\n total: number;\n sample: Contact[];\n query: string;\n fields: { [uuid: string]: { label: string; type: string } };\n error?: string;\n warnings: string[];\n blockers: string[];\n}\n\nexport class ContactSearch extends FormElement {\n static get styles() {\n return css`\n :host {\n color: var(--color-text);\n }\n\n .urn {\n width: 120px;\n }\n\n .name {\n width: 160px;\n }\n\n .date {\n text-align: right;\n }\n\n .field-header {\n font-size: 80%;\n color: var(--color-text-dark);\n }\n\n .field-header.date {\n text-align: right;\n }\n\n .more {\n font-size: 90%;\n padding-top: 5px;\n padding-right: 3px;\n text-align: right;\n width: 100px;\n vertical-align: top;\n }\n\n table {\n width: 100%;\n }\n\n .contact td {\n border-bottom: 1px solid var(--color-borders);\n padding: 5px 3px;\n }\n\n .table-footer td {\n padding: 10px 3px;\n }\n\n .query-replaced,\n .count-replaced {\n display: inline-block;\n background: var(--color-primary-light);\n color: var(--color-text-dark);\n padding: 3px 6px;\n border-radius: var(--curvature);\n font-size: 85%;\n margin: 0px 3px;\n }\n\n temba-loading {\n transform: scale(0);\n max-width: 0;\n opacity: 0;\n transition: transform 200ms ease-in-out;\n }\n\n .fetching temba-loading {\n transform: scale(1);\n max-width: 500px;\n opacity: 1;\n display: block;\n }\n\n .error {\n margin-top: 10px;\n }\n\n .match-count {\n padding: 4px;\n margin-top: 6px;\n }\n\n .linked {\n color: var(--color-link-primary);\n text-decoration: none;\n cursor: pointer;\n }\n\n .header td {\n border-bottom: 0px solid var(--color-borders);\n padding: 5px 3px;\n }\n\n .expanded .header td {\n border-bottom: 2px solid var(--color-borders);\n }\n\n td.field-header,\n tr.table-footer,\n tr.contact {\n display: none;\n }\n\n .expanded td.field-header {\n display: table-cell;\n }\n\n .expanded tr.contact,\n .expanded tr.table-footer {\n display: table-row;\n }\n\n .query {\n display: var(--contact-search-query-display);\n margin-bottom: 10px;\n }\n\n .results {\n display: none;\n }\n\n .summary {\n min-height: 2.2em;\n display: flex;\n flex-grow: 1;\n align-items: center;\n }\n\n .summary .result-count {\n flex-grow: 1;\n }\n\n .results.empty {\n display: none !important;\n }\n\n .results.initialized {\n display: flex;\n align-items: center;\n margin-top: 0.5em;\n margin-left: 0.6em;\n }\n\n .advanced-icon {\n cursor: pointer;\n margin-right: 0.5em;\n }\n\n .query .advanced-icon {\n margin-top: 1em;\n margin-right: 1em;\n }\n\n .advanced-icon:hover {\n --icon-color: var(--color-link-primary-hover) !important;\n }\n\n .query {\n --textarea-height: 5em;\n }\n\n #recipients {\n margin-bottom: 1em;\n display: block;\n }\n\n temba-alert {\n margin: 1em 0;\n }\n\n temba-select[name='not_seen_since_days'] {\n margin-bottom: 1em;\n display: block;\n }\n\n .activity-select {\n display: flex;\n align-items: center;\n padding: var(--checkbox-padding, 10px);\n border-radius: var(--curvature);\n cursor: pointer;\n }\n\n .activity-select:hover {\n background: #f9f9f9;\n }\n\n .small-select {\n --temba-select-selected-padding: 0px 0.5em;\n --temba-select-selected-line-height: 1em;\n --temba-select-selected-font-size: 1em;\n --search-input-height: 0px !important;\n min-width: 100px;\n }\n\n .filters {\n padding: 1em;\n border: 1px solid var(--color-borders);\n border-radius: var(--curvature);\n }\n `;\n }\n\n @property({ type: Boolean })\n in_a_flow: boolean;\n\n @property({ type: Boolean })\n started_previously: boolean;\n\n @property({ type: Boolean })\n not_seen_since_days: boolean;\n\n @property({ type: Boolean })\n fetching: boolean;\n\n @property({ type: Boolean })\n expanded: boolean;\n\n @property({ type: String })\n endpoint: string;\n\n @property({ type: String })\n placeholder = '';\n\n @property({ type: String })\n name = '';\n\n @property({ type: String })\n query = '';\n\n @property({ type: Number })\n inactiveThreshold = 1000;\n\n @property({ type: Number })\n inactiveDays = 90;\n\n @property({ type: Object, attribute: false })\n summary: SummaryResponse;\n\n @property({ type: Object, attribute: false })\n flow: any;\n\n @property({ type: Array })\n recipients: OmniOption[] = [];\n\n @property({ type: Boolean })\n advanced = false;\n\n @property({ type: String })\n refreshKey = '0';\n\n public refresh(): void {\n this.refreshKey = 'requested_' + new Date().getTime();\n }\n\n @property({ type: Object })\n private exclusions = {};\n\n private lastQuery: number;\n private initialized = false;\n\n public updated(changedProperties: Map<string, any>) {\n super.updated(changedProperties);\n\n if (changedProperties.has('recipients')) {\n this.handleRecipientsChanged();\n }\n\n if (changedProperties.has('advanced') && this.advanced) {\n return;\n }\n\n // if we remove the in_a_flow option, make sure it's not part of our exclusions\n if (changedProperties.has('in_a_flow') && !this.in_a_flow) {\n delete this.exclusions['in_a_flow'];\n this.requestUpdate('exclusions');\n }\n\n if (\n (changedProperties.has('query') && this.advanced) ||\n (changedProperties.has('refreshKey') && this.refreshKey !== '0')\n ) {\n this.summary = null;\n // this.errors = [];\n this.fireCustomEvent(CustomEventType.ContentChanged, { reset: true });\n if (this.lastQuery) {\n window.clearTimeout(this.lastQuery);\n this.fetching = false;\n }\n\n if (this.query.trim().length > 0 || this.recipients.length > 0) {\n this.fetching = true;\n this.lastQuery = window.setTimeout(() => {\n this.fetchSummary();\n }, QUEIT_MILLIS);\n }\n }\n }\n\n public fetchSummary(): any {\n if (this.endpoint) {\n const group_uuids = this.recipients\n .filter((value: OmniOption) => value.type === 'group')\n .map((value: OmniOption) => value.id);\n\n const contact_uuids = this.recipients\n .filter((value: OmniOption) => value.type === 'contact')\n .map((value: OmniOption) => value.id);\n\n if (\n (group_uuids.length === 0 && contact_uuids.length === 0) ||\n (!this.query && this.advanced)\n ) {\n if (this.summary) {\n this.summary.total = 0;\n }\n this.fetching = false;\n return;\n }\n\n postJSON(this.endpoint, {\n include: this.advanced\n ? { query: this.query }\n : { contact_uuids, group_uuids },\n\n exclude: this.exclusions\n }).then((response: WebResponse) => {\n this.fetching = false;\n this.initialized = true;\n if (response.status === 200) {\n this.summary = response.json as SummaryResponse;\n if (!this.advanced) {\n this.query = this.summary.query;\n }\n this.setValue({\n advanced: this.advanced,\n query: this.query,\n exclusions: this.exclusions,\n recipients: this.recipients\n });\n\n if (this.summary.error) {\n this.errors = [this.summary.error];\n } else {\n this.errors = [];\n }\n this.requestUpdate('errors');\n this.fireCustomEvent(CustomEventType.ContentChanged, this.summary);\n } else {\n this.summary = response.json as SummaryResponse;\n if (this.summary.error) {\n this.errors = [this.summary.error];\n }\n this.requestUpdate('errors');\n this.fireCustomEvent(CustomEventType.ContentChanged, this.summary);\n }\n });\n }\n }\n\n private handleAdvancedToggle(evt: MouseEvent) {\n stopEvent(evt);\n this.recipients = [];\n this.exclusions = {};\n if (this.advanced) {\n this.query = '';\n this.value = null;\n }\n this.advanced = !this.advanced;\n\n this.setValue({\n advanced: this.advanced,\n query: this.query,\n exclusions: this.exclusions,\n recipients: this.recipients\n });\n }\n\n private handleQueryChange(evt: KeyboardEvent) {\n const input = evt.target as TextInput;\n this.query = input.inputElement.value;\n }\n\n private handleRecipientsChanged() {\n if (!this.endpoint) {\n return;\n }\n\n if (this.recipients && (this.refreshKey !== '0' || this.initialized)) {\n this.refresh();\n } else {\n this.initialized = true;\n }\n }\n\n private handleActivityLevelChanged(evt: any) {\n const select = evt.target as Select;\n const option = select.values[0];\n if (option) {\n if (this.exclusions['not_seen_since_days']) {\n this.exclusions['not_seen_since_days'] = parseInt(option.value);\n this.refresh();\n }\n }\n }\n\n private handleActivityLabelClicked(evt: any) {\n if (\n evt.target &&\n evt.target.tagName !== 'TEMBA-CHECKBOX' &&\n evt.target.tagName !== 'TEMBA-SELECT' &&\n !evt.target.disabled\n ) {\n const checkbox = evt.currentTarget.querySelector('temba-checkbox');\n checkbox.checked = !checkbox.checked;\n }\n }\n\n private handleExclusionChanged(evt: any) {\n if (evt.target.tagName === 'TEMBA-CHECKBOX') {\n const ex = JSON.stringify(this.exclusions);\n const checkbox = evt.target as Checkbox;\n let value = checkbox.checked as any;\n\n // if we check the activity box, look inside the select for the value\n if (checkbox.name === 'not_seen_since_days' && value) {\n const select = checkbox.parentElement.querySelector(\n 'temba-select'\n ) as Select;\n if (select.values[0]) {\n value = parseInt(select.values[0].value);\n } else {\n value = this.exclusions[checkbox.name];\n }\n }\n\n if (!value) {\n delete this.exclusions[checkbox.name];\n } else {\n this.exclusions[checkbox.name] = value;\n }\n\n if (ex !== JSON.stringify(this.exclusions)) {\n this.refresh();\n }\n }\n }\n\n public render(): TemplateResult {\n let summary: TemplateResult;\n if (this.summary) {\n if (!this.summary.error) {\n const count = this.summary.total || 0;\n\n summary = html`\n <div class=\"result-count\">\n Found\n <a\n class=\"linked\"\n target=\"_\"\n href=\"/contact/?search=${encodeURIComponent(this.summary.query)}\"\n >\n ${count.toLocaleString()}\n </a>\n contact${count !== 1 ? 's' : ''}\n </div>\n <temba-button\n class=\"edit\"\n name=\"edit\"\n secondary\n small\n @click=${this.handleAdvancedToggle}\n >\n <div slot=\"name\">\n <div style=\"display: flex; align-items: center;\">\n ${this.advanced\n ? html` <temba-icon\n name=\"reset\"\n style=\"margin-right:0.5em\"\n ></temba-icon>\n Start Over`\n : html` <temba-icon\n name=\"edit\"\n style=\"margin-right:0.5em\"\n ></temba-icon>\n Edit Query`}\n </div>\n </div>\n </temba-button>\n `;\n }\n }\n\n const notSeenSinceDays = this.exclusions['not_seen_since_days'];\n if (\n this.summary &&\n this.summary.blockers &&\n this.summary.blockers.length > 0\n ) {\n return html`${this.summary.blockers.map(\n (error) =>\n html`<temba-alert level=\"error\">${unsafeHTML(error)}</temba-alert>`\n )}`;\n }\n\n return html`\n ${\n this.advanced\n ? html`<div class=\"query\">\n <temba-textinput\n .label=${this.label}\n .helpText=${this.helpText}\n .widgetOnly=${this.widgetOnly}\n .errors=${this.errors}\n name=${this.name}\n .inputRoot=${this}\n @input=${this.handleQueryChange}\n placeholder=${this.placeholder}\n .value=${this.query}\n textarea\n autogrow\n >\n </temba-textinput>\n </div>`\n : html`<temba-omnibox\n placeholder=\"Search for contacts or groups\"\n widget_only=\"\"\n groups=\"\"\n contacts=\"\"\n label=\"Recipients\"\n help_text=\"The contacts to send the message to.\"\n .errors=${this.errors}\n id=\"recipients\"\n name=\"recipients\"\n .value=${this.recipients}\n endpoint=\"/contact/omnibox/?\"\n @change=${this.handleRecipientsChanged}\n >\n </temba-omnibox>\n\n ${this.not_seen_since_days ||\n this.in_a_flow ||\n this.started_previously\n ? html`\n <div class=\"filters\">\n <div\n style=\"display:flex;font-size:1em;margin-bottom:0.5em\"\n >\n <temba-icon size=\"1\" name=\"filter\"></temba-icon>\n <div style=\"margin-left:0.5em\">\n Only include contacts who...\n </div>\n </div>\n\n ${this.not_seen_since_days\n ? html`\n <div\n class=\"activity-select\"\n @click=${this.handleActivityLabelClicked}\n >\n <temba-checkbox\n style=\"display:inline;\"\n name=\"not_seen_since_days\"\n ?checked=${notSeenSinceDays}\n @change=${this.handleExclusionChanged}\n >\n </temba-checkbox>\n\n <div style=\"margin-left:0.5em\">\n ${msg('Have sent a message in the last')}\n </div>\n\n <temba-select\n style=\"margin-left:0.5em\"\n class=\"small-select\"\n @change=${this.handleActivityLevelChanged}\n ?disabled=${!notSeenSinceDays}\n >\n <temba-option\n name=\"90 days\"\n value=\"90\"\n ?selected=${notSeenSinceDays === 90}\n ></temba-option>\n <temba-option\n name=\"180 days\"\n value=\"180\"\n ?selected=${notSeenSinceDays === 180}\n ></temba-option>\n <temba-option\n name=\"Year\"\n value=\"365\"\n ?selected=${notSeenSinceDays === 365}\n ></temba-option>\n </temba-select>\n <div></div>\n </div>\n `\n : null}\n ${this.in_a_flow\n ? html`<temba-checkbox\n name=\"in_a_flow\"\n label=\"${msg('Are not currently in a flow')}\"\n ?checked=${this.exclusions['in_a_flow']}\n @change=${this.handleExclusionChanged}\n ></temba-checkbox>`\n : null}\n ${this.started_previously\n ? html`<temba-checkbox\n name=\"started_previously\"\n label=\"${msg(\n 'Have not started this flow in the last 90 days'\n )}\"\n ?checked=${this.exclusions['started_previously']}\n @change=${this.handleExclusionChanged}\n ></temba-checkbox>`\n : null}\n </div>\n `\n : null} `\n }\n </div>\n <div\n class=\"results ${getClasses({\n fetching: this.fetching,\n initialized: this.initialized || this.fetching,\n empty:\n ((this.summary && this.summary.error) || !this.summary) &&\n !this.fetching\n })}\"\n >\n <temba-loading units=\"6\" size=\"8\"></temba-loading>\n <div class=\"summary ${this.expanded ? 'expanded' : ''}\">${summary}</div>\n </div>\n ${\n this.summary && this.summary.warnings\n ? this.summary.warnings.map(\n (warning) =>\n html`<temba-alert level=\"warning\"\n >${unsafeHTML(warning)}</temba-alert\n >`\n )\n : ``\n }\n `;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"ContactSearch.js","sourceRoot":"","sources":["../../../src/contactsearch/ContactSearch.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, html, css } from 'lit';\nimport { unsafeHTML } from 'lit-html/directives/unsafe-html.js';\nimport { property } from 'lit/decorators.js';\nimport { getClasses, postJSON, stopEvent, WebResponse } from '../utils';\nimport { TextInput } from '../textinput/TextInput';\nimport '../alert/Alert';\nimport { Contact, CustomEventType } from '../interfaces';\nimport { FormElement } from '../FormElement';\nimport { Checkbox } from '../checkbox/Checkbox';\nimport { msg } from '@lit/localize';\nimport { OmniOption } from '../omnibox/Omnibox';\nimport { Select } from '../select/Select';\n\nconst QUEIT_MILLIS = 2000;\n\ninterface SummaryResponse {\n total: number;\n sample: Contact[];\n query: string;\n fields: { [uuid: string]: { label: string; type: string } };\n error?: string;\n warnings: string[];\n blockers: string[];\n}\n\nexport class ContactSearch extends FormElement {\n static get styles() {\n return css`\n :host {\n color: var(--color-text);\n }\n\n .urn {\n width: 120px;\n }\n\n .name {\n width: 160px;\n }\n\n .date {\n text-align: right;\n }\n\n .field-header {\n font-size: 80%;\n color: var(--color-text-dark);\n }\n\n .field-header.date {\n text-align: right;\n }\n\n .more {\n font-size: 90%;\n padding-top: 5px;\n padding-right: 3px;\n text-align: right;\n width: 100px;\n vertical-align: top;\n }\n\n table {\n width: 100%;\n }\n\n .contact td {\n border-bottom: 1px solid var(--color-borders);\n padding: 5px 3px;\n }\n\n .table-footer td {\n padding: 10px 3px;\n }\n\n .query-replaced,\n .count-replaced {\n display: inline-block;\n background: var(--color-primary-light);\n color: var(--color-text-dark);\n padding: 3px 6px;\n border-radius: var(--curvature);\n font-size: 85%;\n margin: 0px 3px;\n }\n\n temba-loading {\n transform: scale(0);\n max-width: 0;\n opacity: 0;\n transition: transform 200ms ease-in-out;\n }\n\n .fetching temba-loading {\n transform: scale(1);\n max-width: 500px;\n opacity: 1;\n display: block;\n }\n\n .error {\n margin-top: 10px;\n }\n\n .match-count {\n padding: 4px;\n margin-top: 6px;\n }\n\n .linked {\n color: var(--color-link-primary);\n text-decoration: none;\n cursor: pointer;\n }\n\n .header td {\n border-bottom: 0px solid var(--color-borders);\n padding: 5px 3px;\n }\n\n .expanded .header td {\n border-bottom: 2px solid var(--color-borders);\n }\n\n td.field-header,\n tr.table-footer,\n tr.contact {\n display: none;\n }\n\n .expanded td.field-header {\n display: table-cell;\n }\n\n .expanded tr.contact,\n .expanded tr.table-footer {\n display: table-row;\n }\n\n .query {\n display: var(--contact-search-query-display);\n margin-bottom: 10px;\n }\n\n .results {\n display: none;\n }\n\n .summary {\n min-height: 2.2em;\n display: flex;\n flex-grow: 1;\n align-items: center;\n }\n\n .summary .result-count {\n flex-grow: 1;\n }\n\n .results.empty {\n display: none !important;\n }\n\n .results.initialized {\n display: flex;\n align-items: center;\n margin-top: 0.5em;\n margin-left: 0.6em;\n }\n\n .advanced-icon {\n cursor: pointer;\n margin-right: 0.5em;\n }\n\n .query .advanced-icon {\n margin-top: 1em;\n margin-right: 1em;\n }\n\n .advanced-icon:hover {\n --icon-color: var(--color-link-primary-hover) !important;\n }\n\n .query {\n --textarea-height: 5em;\n }\n\n #recipients {\n margin-bottom: 1em;\n display: block;\n }\n\n temba-alert {\n margin: 1em 0;\n }\n\n temba-select[name='not_seen_since_days'] {\n margin-bottom: 1em;\n display: block;\n }\n\n .activity-select {\n display: flex;\n align-items: center;\n padding: var(--checkbox-padding, 10px);\n border-radius: var(--curvature);\n cursor: pointer;\n }\n\n .activity-select:hover {\n background: #f9f9f9;\n }\n\n .small-select {\n --temba-select-selected-padding: 0px 0.5em;\n --temba-select-selected-line-height: 1em;\n --temba-select-selected-font-size: 1em;\n --search-input-height: 0px !important;\n min-width: 100px;\n }\n\n .filters {\n padding: 1em;\n border: 1px solid var(--color-borders);\n border-radius: var(--curvature);\n }\n `;\n }\n\n @property({ type: Boolean })\n in_a_flow: boolean;\n\n @property({ type: Boolean })\n started_previously: boolean;\n\n @property({ type: Boolean })\n not_seen_since_days: boolean;\n\n @property({ type: Boolean })\n fetching: boolean;\n\n @property({ type: Boolean })\n expanded: boolean;\n\n @property({ type: String })\n endpoint: string;\n\n @property({ type: String })\n placeholder = '';\n\n @property({ type: String })\n name = '';\n\n @property({ type: String })\n query = '';\n\n @property({ type: Number })\n inactiveThreshold = 1000;\n\n @property({ type: Number })\n inactiveDays = 90;\n\n @property({ type: Object, attribute: false })\n summary: SummaryResponse;\n\n @property({ type: Object, attribute: false })\n flow: any;\n\n @property({ type: Array })\n recipients: OmniOption[] = [];\n\n @property({ type: Boolean })\n advanced = false;\n\n @property({ type: String })\n refreshKey = '0';\n\n public refresh(): void {\n this.refreshKey = 'requested_' + new Date().getTime();\n }\n\n @property({ type: Object })\n private exclusions = {};\n\n private lastQuery: number;\n private initialized = false;\n\n public updated(changedProperties: Map<string, any>) {\n super.updated(changedProperties);\n\n if (changedProperties.has('recipients')) {\n this.handleRecipientsChanged();\n }\n\n // if we remove the in_a_flow option, make sure it's not part of our exclusions\n if (changedProperties.has('in_a_flow') && !this.in_a_flow) {\n delete this.exclusions['in_a_flow'];\n this.requestUpdate('exclusions');\n }\n\n if (\n (changedProperties.has('query') && this.advanced) ||\n (changedProperties.has('refreshKey') && this.refreshKey !== '0')\n ) {\n this.summary = null;\n // this.errors = [];\n this.fireCustomEvent(CustomEventType.ContentChanged, { reset: true });\n if (this.lastQuery) {\n window.clearTimeout(this.lastQuery);\n this.fetching = false;\n }\n\n if (this.query.trim().length > 0 || this.recipients.length > 0) {\n this.fetching = true;\n this.lastQuery = window.setTimeout(() => {\n this.fetchSummary();\n }, QUEIT_MILLIS);\n }\n }\n }\n\n public fetchSummary(): any {\n if (this.endpoint) {\n const group_uuids = this.recipients\n .filter((value: OmniOption) => value.type === 'group')\n .map((value: OmniOption) => value.id);\n\n const contact_uuids = this.recipients\n .filter((value: OmniOption) => value.type === 'contact')\n .map((value: OmniOption) => value.id);\n\n postJSON(this.endpoint, {\n include: this.advanced\n ? { query: this.query }\n : { contact_uuids, group_uuids },\n\n exclude: this.exclusions\n }).then((response: WebResponse) => {\n this.fetching = false;\n this.initialized = true;\n if (response.status === 200) {\n this.summary = response.json as SummaryResponse;\n if (!this.advanced) {\n this.query = this.summary.query;\n }\n this.setValue({\n advanced: this.advanced,\n query: this.query,\n exclusions: this.exclusions,\n recipients: this.recipients\n });\n\n if (this.summary.error) {\n this.errors = [this.summary.error];\n } else {\n this.errors = [];\n }\n this.requestUpdate('errors');\n this.fireCustomEvent(CustomEventType.ContentChanged, this.summary);\n } else {\n this.summary = response.json as SummaryResponse;\n if (this.summary.error) {\n this.errors = [this.summary.error];\n }\n this.requestUpdate('errors');\n this.fireCustomEvent(CustomEventType.ContentChanged, this.summary);\n }\n });\n }\n }\n\n private handleAdvancedToggle(evt: MouseEvent) {\n stopEvent(evt);\n this.recipients = [];\n this.exclusions = {};\n if (this.advanced) {\n this.query = '';\n this.value = null;\n }\n this.advanced = !this.advanced;\n\n this.setValue({\n advanced: this.advanced,\n query: this.query,\n exclusions: this.exclusions,\n recipients: this.recipients\n });\n }\n\n private handleQueryChange(evt: KeyboardEvent) {\n const input = evt.target as TextInput;\n this.query = input.inputElement.value;\n }\n\n private handleRecipientsChanged() {\n if (!this.endpoint) {\n return;\n }\n\n if (this.recipients && (this.refreshKey !== '0' || this.initialized)) {\n this.refresh();\n } else {\n this.initialized = true;\n }\n }\n\n private handleActivityLevelChanged(evt: any) {\n const select = evt.target as Select;\n const option = select.values[0];\n if (option) {\n if (this.exclusions['not_seen_since_days']) {\n this.exclusions['not_seen_since_days'] = parseInt(option.value);\n this.refresh();\n }\n }\n }\n\n private handleActivityLabelClicked(evt: any) {\n if (\n evt.target &&\n evt.target.tagName !== 'TEMBA-CHECKBOX' &&\n evt.target.tagName !== 'TEMBA-SELECT' &&\n !evt.target.disabled\n ) {\n const checkbox = evt.currentTarget.querySelector('temba-checkbox');\n checkbox.checked = !checkbox.checked;\n }\n }\n\n private handleExclusionChanged(evt: any) {\n if (evt.target.tagName === 'TEMBA-CHECKBOX') {\n const ex = JSON.stringify(this.exclusions);\n const checkbox = evt.target as Checkbox;\n let value = checkbox.checked as any;\n\n // if we check the activity box, look inside the select for the value\n if (checkbox.name === 'not_seen_since_days' && value) {\n const select = checkbox.parentElement.querySelector(\n 'temba-select'\n ) as Select;\n if (select.values[0]) {\n value = parseInt(select.values[0].value);\n } else {\n value = this.exclusions[checkbox.name];\n }\n }\n\n if (!value) {\n delete this.exclusions[checkbox.name];\n } else {\n this.exclusions[checkbox.name] = value;\n }\n\n if (ex !== JSON.stringify(this.exclusions)) {\n this.refresh();\n }\n }\n }\n\n public render(): TemplateResult {\n let summary: TemplateResult;\n if (this.summary) {\n if (!this.summary.error) {\n const count = this.summary.total || 0;\n\n summary = html`\n <div class=\"result-count\">\n Found\n <a\n class=\"linked\"\n target=\"_\"\n href=\"/contact/?search=${encodeURIComponent(this.summary.query)}\"\n >\n ${count.toLocaleString()}\n </a>\n contact${count !== 1 ? 's' : ''}\n </div>\n <temba-button\n class=\"edit\"\n name=\"edit\"\n secondary\n small\n @click=${this.handleAdvancedToggle}\n >\n <div slot=\"name\">\n <div style=\"display: flex; align-items: center;\">\n ${this.advanced\n ? html` <temba-icon\n name=\"reset\"\n style=\"margin-right:0.5em\"\n ></temba-icon>\n Start Over`\n : html` <temba-icon\n name=\"edit\"\n style=\"margin-right:0.5em\"\n ></temba-icon>\n Edit Query`}\n </div>\n </div>\n </temba-button>\n `;\n }\n }\n\n const notSeenSinceDays = this.exclusions['not_seen_since_days'];\n if (\n this.summary &&\n this.summary.blockers &&\n this.summary.blockers.length > 0\n ) {\n return html`${this.summary.blockers.map(\n (error) =>\n html`<temba-alert level=\"error\">${unsafeHTML(error)}</temba-alert>`\n )}`;\n }\n\n return html`\n ${\n this.advanced\n ? html`<div class=\"query\">\n <temba-textinput\n .label=${this.label}\n .helpText=${this.helpText}\n .widgetOnly=${this.widgetOnly}\n .errors=${this.errors}\n name=${this.name}\n .inputRoot=${this}\n @input=${this.handleQueryChange}\n placeholder=${this.placeholder}\n .value=${this.query}\n textarea\n autogrow\n >\n </temba-textinput>\n </div>`\n : html`<temba-omnibox\n placeholder=\"Search for contacts or groups\"\n widget_only=\"\"\n groups=\"\"\n contacts=\"\"\n label=\"Recipients\"\n help_text=\"The contacts to send the message to.\"\n .errors=${this.errors}\n id=\"recipients\"\n name=\"recipients\"\n .value=${this.recipients}\n endpoint=\"/contact/omnibox/?\"\n @change=${this.handleRecipientsChanged}\n >\n </temba-omnibox>\n\n ${this.not_seen_since_days ||\n this.in_a_flow ||\n this.started_previously\n ? html`\n <div class=\"filters\">\n <div\n style=\"display:flex;font-size:1em;margin-bottom:0.5em\"\n >\n <temba-icon size=\"1\" name=\"filter\"></temba-icon>\n <div style=\"margin-left:0.5em\">\n Only include contacts who...\n </div>\n </div>\n\n ${this.not_seen_since_days\n ? html`\n <div\n class=\"activity-select\"\n @click=${this.handleActivityLabelClicked}\n >\n <temba-checkbox\n style=\"display:inline;\"\n name=\"not_seen_since_days\"\n ?checked=${notSeenSinceDays}\n @change=${this.handleExclusionChanged}\n >\n </temba-checkbox>\n\n <div style=\"margin-left:0.5em\">\n ${msg('Have sent a message in the last')}\n </div>\n\n <temba-select\n style=\"margin-left:0.5em\"\n class=\"small-select\"\n @change=${this.handleActivityLevelChanged}\n ?disabled=${!notSeenSinceDays}\n >\n <temba-option\n name=\"90 days\"\n value=\"90\"\n ?selected=${notSeenSinceDays === 90}\n ></temba-option>\n <temba-option\n name=\"180 days\"\n value=\"180\"\n ?selected=${notSeenSinceDays === 180}\n ></temba-option>\n <temba-option\n name=\"Year\"\n value=\"365\"\n ?selected=${notSeenSinceDays === 365}\n ></temba-option>\n </temba-select>\n <div></div>\n </div>\n `\n : null}\n ${this.in_a_flow\n ? html`<temba-checkbox\n name=\"in_a_flow\"\n label=\"${msg('Are not currently in a flow')}\"\n ?checked=${this.exclusions['in_a_flow']}\n @change=${this.handleExclusionChanged}\n ></temba-checkbox>`\n : null}\n ${this.started_previously\n ? html`<temba-checkbox\n name=\"started_previously\"\n label=\"${msg(\n 'Have not started this flow in the last 90 days'\n )}\"\n ?checked=${this.exclusions['started_previously']}\n @change=${this.handleExclusionChanged}\n ></temba-checkbox>`\n : null}\n </div>\n `\n : null} `\n }\n </div>\n <div\n class=\"results ${getClasses({\n fetching: this.fetching,\n initialized: this.initialized || this.fetching,\n empty:\n ((this.summary && this.summary.error) || !this.summary) &&\n !this.fetching\n })}\"\n >\n <temba-loading units=\"6\" size=\"8\"></temba-loading>\n <div class=\"summary ${this.expanded ? 'expanded' : ''}\">${summary}</div>\n </div>\n ${\n this.summary && this.summary.warnings\n ? this.summary.warnings.map(\n (warning) =>\n html`<temba-alert level=\"warning\"\n >${unsafeHTML(warning)}</temba-alert\n >`\n )\n : ``\n }\n `;\n }\n}\n"]}
|
|
@@ -4,7 +4,7 @@ import { RapidElement } from '../RapidElement';
|
|
|
4
4
|
import { property } from 'lit/decorators.js';
|
|
5
5
|
import { CustomEventType } from '../interfaces';
|
|
6
6
|
import { Icon } from '../vectoricon';
|
|
7
|
-
import { DEFAULT_MEDIA_ENDPOINT, getClasses,
|
|
7
|
+
import { DEFAULT_MEDIA_ENDPOINT, getClasses, postFormData } from '../utils';
|
|
8
8
|
const verifyAccept = (type, accept) => {
|
|
9
9
|
if (accept) {
|
|
10
10
|
const allowed = accept.split(',').map((x) => x.trim());
|
|
@@ -279,13 +279,9 @@ export class MediaPicker extends RapidElement {
|
|
|
279
279
|
id="${validAttachment.url}"
|
|
280
280
|
name="${Icon.delete_small}"
|
|
281
281
|
></temba-icon>
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
></temba-thumbnail>`
|
|
286
|
-
: html `<temba-thumbnail
|
|
287
|
-
label="${validAttachment.content_type.split('/')[1]}"
|
|
288
|
-
></temba-thumbnail>`}
|
|
282
|
+
<temba-thumbnail
|
|
283
|
+
attachment="${validAttachment.content_type}:${validAttachment.url}"
|
|
284
|
+
></temba-thumbnail>
|
|
289
285
|
</div>`;
|
|
290
286
|
})}
|
|
291
287
|
${this.renderUploader()}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MediaPicker.js","sourceRoot":"","sources":["../../../src/mediapicker/MediaPicker.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, css, html } from 'lit';\nimport { RapidElement } from '../RapidElement';\nimport { property } from 'lit/decorators.js';\nimport { Attachment, CustomEventType } from '../interfaces';\nimport { Icon } from '../vectoricon';\nimport {\n DEFAULT_MEDIA_ENDPOINT,\n WebResponse,\n getClasses,\n isImageAttachment,\n postFormData\n} from '../utils';\n\nconst verifyAccept = (type: string, accept: string): boolean => {\n if (accept) {\n const allowed = accept.split(',').map((x) => x.trim());\n return (\n allowed.includes(type) || allowed.includes(type.split('/')[0] + '/*')\n );\n }\n return true;\n};\n\nexport class MediaPicker extends RapidElement {\n static get styles() {\n return css`\n .drop-mask {\n border-radius: var(--curvature-widget);\n transition: opacity ease-in-out var(--transition-speed);\n }\n\n .highlight .drop-mask {\n background: rgba(210, 243, 184, 0.8);\n }\n\n .drop-mask > div {\n margin: auto;\n border-radius: var(--curvature-widget);\n font-weight: 400;\n color: rgba(0, 0, 0, 0.5);\n }\n\n .attachments {\n }\n\n .attachments-list {\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n padding: 0.2em;\n }\n\n .attachment-item {\n padding: 0.4em;\n padding-top: 1em;\n }\n\n .attachment-item.error {\n background: #fff;\n color: rgba(250, 0, 0, 0.75);\n padding: 0.2em;\n margin: 0.3em 0.5em;\n border-radius: var(--curvature);\n display: block;\n }\n\n .remove-item {\n --icon-color: #ccc;\n background: #fff;\n border-radius: 99%;\n transition: transform 200ms linear;\n transform: scale(0);\n display: block;\n margin-bottom: -24px;\n margin-left: 10px;\n width: 1em;\n height: 1em;\n }\n\n .attachment-item:hover .remove-item {\n transform: scale(1);\n }\n\n .remove-item:hover {\n --icon-color: #333;\n cursor: pointer;\n }\n\n .attachment-name {\n align-self: center;\n font-size: 12px;\n padding: 2px 8px;\n }\n\n #upload-input {\n display: none;\n }\n\n .upload-label {\n display: flex;\n align-items: center;\n }\n\n .upload-icon {\n color: rgb(102, 102, 102);\n }\n\n .add-attachment {\n padding: 1em;\n background-color: rgba(0, 0, 0, 0.05);\n border-radius: var(--curvature);\n color: #aaa;\n margin: 0.5em;\n }\n\n .add-attachment:hover {\n background-color: rgba(0, 0, 0, 0.07);\n cursor: pointer;\n }\n `;\n }\n\n @property({ type: String, attribute: false })\n endpoint = DEFAULT_MEDIA_ENDPOINT;\n\n @property({ type: Boolean })\n pendingDrop: boolean;\n\n @property({ type: String })\n icon = Icon.add;\n\n @property({ type: String })\n accept = ''; //e.g. \".xls,.xlsx\"\n\n @property({ type: Number })\n max = 3;\n\n @property({ type: Array })\n attachments: Attachment[] = [];\n\n @property({ type: Boolean, attribute: false })\n uploading: boolean;\n\n public updated(changes: Map<string, any>): void {\n super.updated(changes);\n if (changes.has('attachments')) {\n // wait one cycle to fire change for tests\n setTimeout(() => {\n this.dispatchEvent(new Event('change'));\n }, 0);\n }\n\n if (changes.has('uploading')) {\n this.dispatchEvent(\n new CustomEvent(CustomEventType.Loading, {\n detail: { loading: this.uploading }\n })\n );\n }\n }\n\n private getAcceptableFiles(evt: DragEvent): File[] {\n const dt = evt.dataTransfer;\n if (dt) {\n const files = [...dt.files];\n return files.filter((file) => verifyAccept(file.type, this.accept));\n }\n }\n\n private handleDragEnter(evt: DragEvent): void {\n this.highlight(evt);\n }\n\n private handleDragOver(evt: DragEvent): void {\n this.highlight(evt);\n }\n\n private handleDragLeave(evt: DragEvent): void {\n this.unhighlight(evt);\n }\n\n private handleDrop(evt: DragEvent): void {\n this.unhighlight(evt);\n if (this.canAcceptAttachments()) {\n this.uploadFiles(this.getAcceptableFiles(evt));\n }\n }\n\n public canAcceptAttachments() {\n return this.attachments.length < this.max;\n }\n\n private highlight(evt: DragEvent): void {\n evt.preventDefault();\n evt.stopPropagation();\n if (this.canAcceptAttachments()) {\n this.pendingDrop = true;\n }\n }\n\n private unhighlight(evt: DragEvent): void {\n evt.preventDefault();\n evt.stopPropagation();\n this.pendingDrop = false;\n }\n\n private addCurrentAttachment(attachmentToAdd: any) {\n this.attachments.push(attachmentToAdd);\n this.requestUpdate('attachments');\n }\n\n private removeCurrentAttachment(attachmentToRemove: any) {\n this.attachments = this.attachments.filter(\n (currentAttachment) => currentAttachment !== attachmentToRemove\n );\n this.requestUpdate('attachments');\n }\n\n private handleRemoveFileClicked(evt: Event): void {\n const target = evt.target as HTMLDivElement;\n const currentAttachmentToRemove = this.attachments.find(\n ({ url }) => url === target.id\n );\n if (currentAttachmentToRemove) {\n this.removeCurrentAttachment(currentAttachmentToRemove);\n }\n }\n\n private handleUploadFileInputChanged(evt: Event): void {\n const target = evt.target as HTMLInputElement;\n const files = target.files;\n this.uploadFiles([...files]);\n }\n\n public uploadFiles(files: File[]): void {\n let filesToUpload = [];\n\n //remove duplicate files that have already been uploaded\n filesToUpload = files.filter((file) => {\n // check our file type against accepts\n if (this.accept) {\n if (!verifyAccept(file.type, this.accept)) {\n return false;\n }\n }\n\n const index = this.attachments.findIndex(\n (value) => value.filename === file.name && value.size === file.size\n );\n if (index === -1) {\n return file;\n }\n });\n\n filesToUpload.map((fileToUpload) => {\n this.uploadFile(fileToUpload);\n });\n }\n\n private uploadFile(file: File): void {\n this.uploading = true;\n\n const url = this.endpoint;\n const payload = new FormData();\n payload.append('file', file);\n postFormData(url, payload)\n .then((response: WebResponse) => {\n if (this.attachments.length < this.max) {\n const attachment = response.json as Attachment;\n if (attachment) {\n this.addCurrentAttachment(attachment);\n }\n }\n })\n .catch((error: WebResponse) => {\n let uploadError = '';\n if (error.status === 400) {\n uploadError = error.json.file[0];\n } else {\n uploadError = 'Server failure';\n }\n console.error(uploadError);\n })\n .finally(() => {\n this.uploading = false;\n });\n }\n\n private renderUploader(): TemplateResult {\n if (this.uploading) {\n return html`<temba-loading units=\"3\" size=\"12\"></temba-loading>`;\n } else {\n return this.attachments.length < this.max\n ? html`<input\n type=\"file\"\n id=\"upload-input\"\n ?multiple=${this.max > 1}\n accept=\"${this.accept}\"\n @change=\"${this.handleUploadFileInputChanged}\"\n />\n <label\n id=\"upload-label\"\n class=\"actions-left upload-label\"\n for=\"upload-input\"\n >\n <div class=\"add-attachment\">\n <temba-icon name=\"${this.icon}\" size=\"1.5\"></temba-icon>\n </div>\n </label>`\n : null;\n }\n }\n\n public render(): TemplateResult {\n return html` <div\n class=${getClasses({ container: true, highlight: this.pendingDrop })}\n @dragenter=\"${this.handleDragEnter}\"\n @dragover=\"${this.handleDragOver}\"\n @dragleave=\"${this.handleDragLeave}\"\n @drop=\"${this.handleDrop}\"\n >\n <div class=\"drop-mask\">\n <div class=\"attachments-list\">\n ${this.attachments.map((validAttachment) => {\n return html`<div class=\"attachment-item\">\n <temba-icon\n class=\"remove-item\"\n @click=\"${this.handleRemoveFileClicked}\"\n id=\"${validAttachment.url}\"\n name=\"${Icon.delete_small}\"\n ></temba-icon>\n ${isImageAttachment(validAttachment)\n ? html`<temba-thumbnail\n url=\"${validAttachment.url}\"\n ></temba-thumbnail>`\n : html`<temba-thumbnail\n label=\"${validAttachment.content_type.split('/')[1]}\"\n ></temba-thumbnail>`}\n </div>`;\n })}\n ${this.renderUploader()}\n </div>\n </div>\n </div>`;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"MediaPicker.js","sourceRoot":"","sources":["../../../src/mediapicker/MediaPicker.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, css, html } from 'lit';\nimport { RapidElement } from '../RapidElement';\nimport { property } from 'lit/decorators.js';\nimport { Attachment, CustomEventType } from '../interfaces';\nimport { Icon } from '../vectoricon';\nimport {\n DEFAULT_MEDIA_ENDPOINT,\n WebResponse,\n getClasses,\n postFormData\n} from '../utils';\n\nconst verifyAccept = (type: string, accept: string): boolean => {\n if (accept) {\n const allowed = accept.split(',').map((x) => x.trim());\n return (\n allowed.includes(type) || allowed.includes(type.split('/')[0] + '/*')\n );\n }\n return true;\n};\n\nexport class MediaPicker extends RapidElement {\n static get styles() {\n return css`\n .drop-mask {\n border-radius: var(--curvature-widget);\n transition: opacity ease-in-out var(--transition-speed);\n }\n\n .highlight .drop-mask {\n background: rgba(210, 243, 184, 0.8);\n }\n\n .drop-mask > div {\n margin: auto;\n border-radius: var(--curvature-widget);\n font-weight: 400;\n color: rgba(0, 0, 0, 0.5);\n }\n\n .attachments {\n }\n\n .attachments-list {\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n padding: 0.2em;\n }\n\n .attachment-item {\n padding: 0.4em;\n padding-top: 1em;\n }\n\n .attachment-item.error {\n background: #fff;\n color: rgba(250, 0, 0, 0.75);\n padding: 0.2em;\n margin: 0.3em 0.5em;\n border-radius: var(--curvature);\n display: block;\n }\n\n .remove-item {\n --icon-color: #ccc;\n background: #fff;\n border-radius: 99%;\n transition: transform 200ms linear;\n transform: scale(0);\n display: block;\n margin-bottom: -24px;\n margin-left: 10px;\n width: 1em;\n height: 1em;\n }\n\n .attachment-item:hover .remove-item {\n transform: scale(1);\n }\n\n .remove-item:hover {\n --icon-color: #333;\n cursor: pointer;\n }\n\n .attachment-name {\n align-self: center;\n font-size: 12px;\n padding: 2px 8px;\n }\n\n #upload-input {\n display: none;\n }\n\n .upload-label {\n display: flex;\n align-items: center;\n }\n\n .upload-icon {\n color: rgb(102, 102, 102);\n }\n\n .add-attachment {\n padding: 1em;\n background-color: rgba(0, 0, 0, 0.05);\n border-radius: var(--curvature);\n color: #aaa;\n margin: 0.5em;\n }\n\n .add-attachment:hover {\n background-color: rgba(0, 0, 0, 0.07);\n cursor: pointer;\n }\n `;\n }\n\n @property({ type: String, attribute: false })\n endpoint = DEFAULT_MEDIA_ENDPOINT;\n\n @property({ type: Boolean })\n pendingDrop: boolean;\n\n @property({ type: String })\n icon = Icon.add;\n\n @property({ type: String })\n accept = ''; //e.g. \".xls,.xlsx\"\n\n @property({ type: Number })\n max = 3;\n\n @property({ type: Array })\n attachments: Attachment[] = [];\n\n @property({ type: Boolean, attribute: false })\n uploading: boolean;\n\n public updated(changes: Map<string, any>): void {\n super.updated(changes);\n if (changes.has('attachments')) {\n // wait one cycle to fire change for tests\n setTimeout(() => {\n this.dispatchEvent(new Event('change'));\n }, 0);\n }\n\n if (changes.has('uploading')) {\n this.dispatchEvent(\n new CustomEvent(CustomEventType.Loading, {\n detail: { loading: this.uploading }\n })\n );\n }\n }\n\n private getAcceptableFiles(evt: DragEvent): File[] {\n const dt = evt.dataTransfer;\n if (dt) {\n const files = [...dt.files];\n return files.filter((file) => verifyAccept(file.type, this.accept));\n }\n }\n\n private handleDragEnter(evt: DragEvent): void {\n this.highlight(evt);\n }\n\n private handleDragOver(evt: DragEvent): void {\n this.highlight(evt);\n }\n\n private handleDragLeave(evt: DragEvent): void {\n this.unhighlight(evt);\n }\n\n private handleDrop(evt: DragEvent): void {\n this.unhighlight(evt);\n if (this.canAcceptAttachments()) {\n this.uploadFiles(this.getAcceptableFiles(evt));\n }\n }\n\n public canAcceptAttachments() {\n return this.attachments.length < this.max;\n }\n\n private highlight(evt: DragEvent): void {\n evt.preventDefault();\n evt.stopPropagation();\n if (this.canAcceptAttachments()) {\n this.pendingDrop = true;\n }\n }\n\n private unhighlight(evt: DragEvent): void {\n evt.preventDefault();\n evt.stopPropagation();\n this.pendingDrop = false;\n }\n\n private addCurrentAttachment(attachmentToAdd: any) {\n this.attachments.push(attachmentToAdd);\n this.requestUpdate('attachments');\n }\n\n private removeCurrentAttachment(attachmentToRemove: any) {\n this.attachments = this.attachments.filter(\n (currentAttachment) => currentAttachment !== attachmentToRemove\n );\n this.requestUpdate('attachments');\n }\n\n private handleRemoveFileClicked(evt: Event): void {\n const target = evt.target as HTMLDivElement;\n const currentAttachmentToRemove = this.attachments.find(\n ({ url }) => url === target.id\n );\n if (currentAttachmentToRemove) {\n this.removeCurrentAttachment(currentAttachmentToRemove);\n }\n }\n\n private handleUploadFileInputChanged(evt: Event): void {\n const target = evt.target as HTMLInputElement;\n const files = target.files;\n this.uploadFiles([...files]);\n }\n\n public uploadFiles(files: File[]): void {\n let filesToUpload = [];\n\n //remove duplicate files that have already been uploaded\n filesToUpload = files.filter((file) => {\n // check our file type against accepts\n if (this.accept) {\n if (!verifyAccept(file.type, this.accept)) {\n return false;\n }\n }\n\n const index = this.attachments.findIndex(\n (value) => value.filename === file.name && value.size === file.size\n );\n if (index === -1) {\n return file;\n }\n });\n\n filesToUpload.map((fileToUpload) => {\n this.uploadFile(fileToUpload);\n });\n }\n\n private uploadFile(file: File): void {\n this.uploading = true;\n\n const url = this.endpoint;\n const payload = new FormData();\n payload.append('file', file);\n postFormData(url, payload)\n .then((response: WebResponse) => {\n if (this.attachments.length < this.max) {\n const attachment = response.json as Attachment;\n if (attachment) {\n this.addCurrentAttachment(attachment);\n }\n }\n })\n .catch((error: WebResponse) => {\n let uploadError = '';\n if (error.status === 400) {\n uploadError = error.json.file[0];\n } else {\n uploadError = 'Server failure';\n }\n console.error(uploadError);\n })\n .finally(() => {\n this.uploading = false;\n });\n }\n\n private renderUploader(): TemplateResult {\n if (this.uploading) {\n return html`<temba-loading units=\"3\" size=\"12\"></temba-loading>`;\n } else {\n return this.attachments.length < this.max\n ? html`<input\n type=\"file\"\n id=\"upload-input\"\n ?multiple=${this.max > 1}\n accept=\"${this.accept}\"\n @change=\"${this.handleUploadFileInputChanged}\"\n />\n <label\n id=\"upload-label\"\n class=\"actions-left upload-label\"\n for=\"upload-input\"\n >\n <div class=\"add-attachment\">\n <temba-icon name=\"${this.icon}\" size=\"1.5\"></temba-icon>\n </div>\n </label>`\n : null;\n }\n }\n\n public render(): TemplateResult {\n return html` <div\n class=${getClasses({ container: true, highlight: this.pendingDrop })}\n @dragenter=\"${this.handleDragEnter}\"\n @dragover=\"${this.handleDragOver}\"\n @dragleave=\"${this.handleDragLeave}\"\n @drop=\"${this.handleDrop}\"\n >\n <div class=\"drop-mask\">\n <div class=\"attachments-list\">\n ${this.attachments.map((validAttachment) => {\n return html`<div class=\"attachment-item\">\n <temba-icon\n class=\"remove-item\"\n @click=\"${this.handleRemoveFileClicked}\"\n id=\"${validAttachment.url}\"\n name=\"${Icon.delete_small}\"\n ></temba-icon>\n <temba-thumbnail\n attachment=\"${validAttachment.content_type}:${validAttachment.url}\"\n ></temba-thumbnail>\n </div>`;\n })}\n ${this.renderUploader()}\n </div>\n </div>\n </div>`;\n }\n}\n"]}
|