@nyaruka/temba-components 0.89.0 → 0.91.1

package/src/mediapicker/MediaPicker.ts

@@ -0,0 +1,338 @@
+import { TemplateResult, css, html } from 'lit';
+import { RapidElement } from '../RapidElement';
+import { property } from 'lit/decorators.js';
+import { Attachment } from '../interfaces';
+import { Icon } from '../vectoricon';
+import {
+  DEFAULT_MEDIA_ENDPOINT,
+  WebResponse,
+  getClasses,
+  isImageAttachment,
+  postFormData
+} from '../utils';
+
+const verifyAccept = (type: string, accept: string): boolean => {
+  if (accept) {
+    const allowed = accept.split(',').map((x) => x.trim());
+    return (
+      allowed.includes(type) || allowed.includes(type.split('/')[0] + '/*')
+    );
+  }
+  return true;
+};
+
+export class MediaPicker extends RapidElement {
+  static get styles() {
+    return css`
+      .drop-mask {
+        border-radius: var(--curvature-widget);
+        transition: opacity ease-in-out var(--transition-speed);
+      }
+
+      .highlight .drop-mask {
+        background: rgba(210, 243, 184, 0.8);
+      }
+
+      .drop-mask > div {
+        margin: auto;
+        border-radius: var(--curvature-widget);
+        font-weight: 400;
+        color: rgba(0, 0, 0, 0.5);
+      }
+
+      .attachments {
+      }
+
+      .attachments-list {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        padding: 0.2em;
+      }
+
+      .attachment-item {
+        padding: 0.4em;
+        padding-top: 1em;
+      }
+
+      .attachment-item.error {
+        background: #fff;
+        color: rgba(250, 0, 0, 0.75);
+        padding: 0.2em;
+        margin: 0.3em 0.5em;
+        border-radius: var(--curvature);
+        display: block;
+      }
+
+      .remove-item {
+        --icon-color: #ccc;
+        background: #fff;
+        border-radius: 99%;
+        transition: transform 200ms linear;
+        transform: scale(0);
+        display: block;
+        margin-bottom: -24px;
+        margin-left: 10px;
+        width: 1em;
+        height: 1em;
+      }
+
+      .attachment-item:hover .remove-item {
+        transform: scale(1);
+      }
+
+      .remove-item:hover {
+        --icon-color: #333;
+        cursor: pointer;
+      }
+
+      .attachment-name {
+        align-self: center;
+        font-size: 12px;
+        padding: 2px 8px;
+      }
+
+      #upload-input {
+        display: none;
+      }
+
+      .upload-label {
+        display: flex;
+        align-items: center;
+      }
+
+      .upload-icon {
+        color: rgb(102, 102, 102);
+      }
+
+      .add-attachment {
+        padding: 1em;
+        background-color: rgba(0, 0, 0, 0.05);
+        border-radius: var(--curvature);
+        color: #aaa;
+        margin: 0.5em;
+      }
+
+      .add-attachment:hover {
+        background-color: rgba(0, 0, 0, 0.07);
+        cursor: pointer;
+      }
+    `;
+  }
+
+  @property({ type: String, attribute: false })
+  endpoint = DEFAULT_MEDIA_ENDPOINT;
+
+  @property({ type: Boolean })
+  pendingDrop: boolean;
+
+  @property({ type: String })
+  icon = Icon.add;
+
+  @property({ type: String })
+  accept = ''; //e.g. ".xls,.xlsx"
+
+  @property({ type: Number })
+  max = 3;
+
+  @property({ type: Array })
+  attachments: Attachment[] = [];
+
+  @property({ type: Boolean, attribute: false })
+  uploading: boolean;
+
+  public updated(changes: Map<string, any>): void {
+    super.updated(changes);
+    if (changes.has('attachments')) {
+      // wait one cycle to fire change for tests
+      setTimeout(() => {
+        this.dispatchEvent(new Event('change'));
+      }, 0);
+    }
+  }
+
+  private getAcceptableFiles(evt: DragEvent): File[] {
+    const dt = evt.dataTransfer;
+    if (dt) {
+      const files = [...dt.files];
+      return files.filter((file) => verifyAccept(file.type, this.accept));
+    }
+  }
+
+  private handleDragEnter(evt: DragEvent): void {
+    this.highlight(evt);
+  }
+
+  private handleDragOver(evt: DragEvent): void {
+    this.highlight(evt);
+  }
+
+  private handleDragLeave(evt: DragEvent): void {
+    this.unhighlight(evt);
+  }
+
+  private handleDrop(evt: DragEvent): void {
+    this.unhighlight(evt);
+    if (this.canAcceptAttachments()) {
+      this.uploadFiles(this.getAcceptableFiles(evt));
+    }
+  }
+
+  public canAcceptAttachments() {
+    return this.attachments.length < this.max;
+  }
+
+  private highlight(evt: DragEvent): void {
+    evt.preventDefault();
+    evt.stopPropagation();
+    if (this.canAcceptAttachments()) {
+      this.pendingDrop = true;
+    }
+  }
+
+  private unhighlight(evt: DragEvent): void {
+    evt.preventDefault();
+    evt.stopPropagation();
+    this.pendingDrop = false;
+  }
+
+  private addCurrentAttachment(attachmentToAdd: any) {
+    this.attachments.push(attachmentToAdd);
+    this.requestUpdate('attachments');
+  }
+
+  private removeCurrentAttachment(attachmentToRemove: any) {
+    this.attachments = this.attachments.filter(
+      (currentAttachment) => currentAttachment !== attachmentToRemove
+    );
+    this.requestUpdate('attachments');
+  }
+
+  private handleRemoveFileClicked(evt: Event): void {
+    const target = evt.target as HTMLDivElement;
+    const currentAttachmentToRemove = this.attachments.find(
+      ({ url }) => url === target.id
+    );
+    if (currentAttachmentToRemove) {
+      this.removeCurrentAttachment(currentAttachmentToRemove);
+    }
+  }
+
+  private handleUploadFileInputChanged(evt: Event): void {
+    const target = evt.target as HTMLInputElement;
+    const files = target.files;
+    this.uploadFiles([...files]);
+  }
+
+  public uploadFiles(files: File[]): void {
+    let filesToUpload = [];
+
+    //remove duplicate files that have already been uploaded
+    filesToUpload = files.filter((file) => {
+      // check our file type against accepts
+      if (this.accept) {
+        if (!verifyAccept(file.type, this.accept)) {
+          return false;
+        }
+      }
+
+      const index = this.attachments.findIndex(
+        (value) => value.filename === file.name && value.size === file.size
+      );
+      if (index === -1) {
+        return file;
+      }
+    });
+
+    filesToUpload.map((fileToUpload) => {
+      this.uploadFile(fileToUpload);
+    });
+  }
+
+  private uploadFile(file: File): void {
+    this.uploading = true;
+
+    const url = this.endpoint;
+    const payload = new FormData();
+    payload.append('file', file);
+    postFormData(url, payload)
+      .then((response: WebResponse) => {
+        if (this.attachments.length < this.max) {
+          const attachment = response.json as Attachment;
+          if (attachment) {
+            this.addCurrentAttachment(attachment);
+          }
+        }
+      })
+      .catch((error: WebResponse) => {
+        let uploadError = '';
+        if (error.status === 400) {
+          uploadError = error.json.file[0];
+        } else {
+          uploadError = 'Server failure';
+        }
+        console.error(uploadError);
+      })
+      .finally(() => {
+        this.uploading = false;
+      });
+  }
+
+  private renderUploader(): TemplateResult {
+    if (this.uploading) {
+      return html`<temba-loading units="3" size="12"></temba-loading>`;
+    } else {
+      return this.attachments.length < this.max
+        ? html`<input
+              type="file"
+              id="upload-input"
+              ?multiple=${this.max > 1}
+              accept="${this.accept}"
+              @change="${this.handleUploadFileInputChanged}"
+            />
+            <label
+              id="upload-label"
+              class="actions-left upload-label"
+              for="upload-input"
+            >
+              <div class="add-attachment">
+                <temba-icon name="${this.icon}" size="1.5"></temba-icon>
+              </div>
+            </label>`
+        : null;
+    }
+  }
+
+  public render(): TemplateResult {
+    return html` <div
+      class=${getClasses({ container: true, highlight: this.pendingDrop })}
+      @dragenter="${this.handleDragEnter}"
+      @dragover="${this.handleDragOver}"
+      @dragleave="${this.handleDragLeave}"
+      @drop="${this.handleDrop}"
+    >
+      <div class="drop-mask">
+        <div class="attachments-list">
+          ${this.attachments.map((validAttachment) => {
+            return html`<div class="attachment-item">
+              <temba-icon
+                class="remove-item"
+                @click="${this.handleRemoveFileClicked}"
+                id="${validAttachment.url}"
+                name="${Icon.delete_small}"
+              ></temba-icon>
+              ${isImageAttachment(validAttachment)
+                ? html`<temba-thumbnail
+                    url="${validAttachment.url}"
+                  ></temba-thumbnail>`
+                : html`<temba-thumbnail
+                    label="${validAttachment.content_type.split('/')[1]}"
+                  ></temba-thumbnail>`}
+            </div>`;
+          })}
+          ${this.renderUploader()}
+        </div>
+      </div>
+    </div>`;
+  }
+}

package/src/templates/TemplateEditor.ts

@@ -2,6 +2,7 @@ import { property } from 'lit/decorators.js';
 import { FormElement } from '../FormElement';
 import { TemplateResult, html, css, PropertyValueMap, LitElement } from 'lit';
 import { CustomEventType } from '../interfaces';
+import { MediaPicker } from '../mediapicker/MediaPicker';
 
 interface Component {
   name: string;
@@ -41,6 +42,11 @@ export class TemplateEditor extends FormElement {
         padding: 1em;
         margin-top: 1em;
       }
+
+      .content {
+        margin-bottom: 1em;
+      }
+
       .picker {
         margin-bottom: 0.5em;
         display: block;
@@ -69,7 +75,6 @@ export class TemplateEditor extends FormElement {
       }
 
       .button-wrapper {
-        margin-top: 1em;
         background: #f9f9f9;
         border-radius: var(--curvature);
         padding: 0.5em;
@@ -125,6 +130,9 @@ export class TemplateEditor extends FormElement {
         border: 1px solid var(--color-widget-border);
         padding: 1em;
         line-height: 2.2em;
+        max-height: 50vh;
+        overflow-y: auto;
+        overflow-x: hidden;
       }
     `;
   }
@@ -199,10 +207,31 @@ export class TemplateEditor extends FormElement {
     });
   }
 
+  private handleAttachmentsChanged(event: CustomEvent) {
+    const media = event.target as MediaPicker;
+    const index = parseInt(media.getAttribute('index'));
+
+    if (media.attachments.length === 0) {
+      this.variables[index] = '';
+    } else {
+      const attachment = media.attachments[0];
+      if (attachment.url && attachment.content_type) {
+        this.variables[index] = `${attachment.content_type}:${attachment.url}`;
+      } else {
+        this.variables[index] = ``;
+      }
+    }
+    this.fireContentChange();
+  }
+
   private handleVariableChanged(event: CustomEvent) {
     const target = event.target as HTMLInputElement;
     const variableIndex = parseInt(target.getAttribute('index'));
     this.variables[variableIndex] = target.value;
+    this.fireContentChange();
+  }
+
+  private fireContentChange() {
     this.fireCustomEvent(CustomEventType.ContentChanged, {
       template: this.selectedTemplate,
       translation: this.translation,
@@ -216,9 +245,11 @@ export class TemplateEditor extends FormElement {
       `{{(${Object.keys(component.variables || []).join('|')})}}`,
       'g'
     );
-    const parts = component.content.split(variableRegex);
+
+    let variables = null;
+    const parts = component.content?.split(variableRegex) || [];
     if (parts.length > 0) {
-      const variables = parts.map((part, index) => {
+      variables = parts.map((part, index) => {
         if (index % 2 === 0) {
           return html`<span class="text">${part}</span>`;
         }
@@ -235,8 +266,52 @@ export class TemplateEditor extends FormElement {
           placeholder="{{${part}}}"
         ></temba-completion>`;
       });
-      return html`<div class="content">${variables}</div>`;
+    } else {
+      variables = Object.values(component.variables).map((variableIndex) => {
+        const variableSpec = this.translation.variables[variableIndex];
+        if (
+          variableSpec.type === 'image' ||
+          variableSpec.type === 'document' ||
+          variableSpec.type === 'audio' ||
+          variableSpec.type === 'video'
+        ) {
+          let attachments = [];
+          if (this.variables[variableIndex]) {
+            const parts = this.variables[variableIndex].split(':');
+            attachments = [{ url: parts[1], content_type: parts[0] }];
+          }
+
+          return html`<div
+            style="
+              display: flex; 
+              align-items: center; 
+              border-radius: var(--curvature);
+              ${attachments.length === 0
+              ? `background-color:rgba(255,0,0,.07);`
+              : ``}
+            "
+          >
+            <temba-media-picker
+              accept="${variableSpec.type === 'document'
+                ? 'application/pdf'
+                : variableSpec.type + '/*'}"
+              max="1"
+              index=${variableIndex}
+              icon="attachment_${variableSpec.type}"
+              attachments=${JSON.stringify(attachments)}
+              @change=${this.handleAttachmentsChanged.bind(this)}
+            ></temba-media-picker>
+            <div>
+              ${attachments.length == 0
+                ? html`Attach ${variableSpec.type} to continue`
+                : ''}
+            </div>
+          </div>`;
+        }
+      });
     }
+
+    return html`<div class="content">${variables}</div> `;
   }
 
   public renderComponents(components: Component[]): TemplateResult {

package/src/thumbnail/Thumbnail.ts

@@ -9,7 +9,7 @@ export class Thumbnail extends RapidElement {
   static get styles() {
     return css`
       :host {
-        display: inline-block;
+        display: inline;
       }
 
       .zooming.wrapper {
@@ -54,6 +54,26 @@ export class Thumbnail extends RapidElement {
 
   public render() {
     if (this.zooming) {
+      const styles = {
+        backgroundColor: '#fafafa',
+        backgroundSize: 'contain',
+        backgroundPosition: 'center',
+        backgroundRepeat: 'no-repeat',
+        maxHeight: 'var(--thumb-size, 4em)',
+        height: 'var(--thumb-size, 4em)',
+        width: 'var(--thumb-size, 4em)',
+        borderRadius: '0',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        fontWeight: '400',
+        color: '#bbb'
+      };
+
+      if (this.url) {
+        styles['backgroundImage'] = `url(${this.url})`;
+      }
+
       return html`
         <div
           class="${getClasses({ wrapper: true })}"
@@ -63,30 +83,29 @@ export class Thumbnail extends RapidElement {
             boxShadow: 'var(--widget-box-shadow)'
           })}
         >
-          <div
-            class="thumb"
-            style=${styleMap({
-              backgroundImage: `url(${this.url})`,
-              backgroundSize: 'contain',
-              backgroundPosition: 'center',
-              backgroundRepeat: 'no-repeat',
-              maxHeight: 'var(--thumb-size, 4em)',
-              height: 'var(--thumb-size, 4em)',
-              width: 'var(--thumb-size, 4em)',
-              borderRadius: '0',
-
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              fontWeight: '400',
-              color: '#bbb'
-            })}
-          >
-            ${this.label}
-          </div>
+          <div class="thumb" style=${styleMap(styles)}>${this.label}</div>
         </div>
       `;
     } else {
+      const styles = {
+        backgroundColor: '#fafafa',
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+        maxHeight: 'var(--thumb-size, 4em)',
+        height: 'var(--thumb-size, 4em)',
+        width: 'var(--thumb-size, 4em)',
+        borderRadius: 'var(--curvature)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        fontWeight: '400',
+        color: '#bbb'
+      };
+
+      if (this.url) {
+        styles['backgroundImage'] = `url(${this.url})`;
+      }
+
       return html`
       <div class="${getClasses({ wrapper: true })}" style=${styleMap({
         padding: 'var(--thumb-padding, 0.4em)',
@@ -94,24 +113,9 @@ export class Thumbnail extends RapidElement {
         borderRadius: 'var(--curvature)',
         boxShadow: 'var(--widget-box-shadow)'
       })}">
-
-          <div class="thumb" style=${styleMap({
-            backgroundImage: `url(${this.url})`,
-            backgroundSize: 'cover',
-            backgroundPosition: 'center',
-            maxHeight: 'var(--thumb-size, 4em)',
-            height: 'var(--thumb-size, 4em)',
-            width: 'var(--thumb-size, 4em)',
-            borderRadius: 'var(--curvature)',
-
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            fontWeight: '400',
-            color: '#bbb'
-          })}>
+          <div class="thumb" style=${styleMap(styles)}>
             ${this.label}
-            </div>
+          </div>
       </div>
     `;
     }

package/src/vectoricon/VectorIcon.ts

@@ -50,7 +50,6 @@ export class VectorIcon extends LitElement {
   static get styles() {
     return css`
       :host {
-        display: flex-inline;
         align-items: center;
         align-self: center;
       }

package/src/vectoricon/index.ts

@@ -186,6 +186,7 @@ export enum Icon {
   user = 'users-01',
   users = 'users-01',
   user_beta = 'shield-zap',
+  video = 'video-recorder',
   webhook = 'link-external-01',
   wit = 'wit',
   workspace = 'folder',

package/temba-modules.ts

@@ -56,6 +56,7 @@ import { Mask } from './src/mask/Mask';
 import { TembaUser } from './src/user/TembaUser';
 import { TemplateEditor } from './src/templates/TemplateEditor';
 import { Toast } from './src/toast/Toast';
+import { MediaPicker } from './src/mediapicker/MediaPicker';
 
 export function addCustomElement(name: string, comp: any) {
   if (!window.customElements.get(name)) {
@@ -122,3 +123,4 @@ addCustomElement('temba-mask', Mask);
 addCustomElement('temba-user', TembaUser);
 addCustomElement('temba-template-editor', TemplateEditor);
 addCustomElement('temba-toast', Toast);
+addCustomElement('temba-media-picker', MediaPicker);