@nyaruka/temba-components 0.26.11 → 0.27.0

package/src/store/Store.ts

@@ -7,9 +7,15 @@ import {
   CompletionSchema,
   KeyedAssets,
   CustomEventType,
+  Workspace,
 } from '../interfaces';
 import { RapidElement } from '../RapidElement';
 import Lru from 'tiny-lru';
+import {
+  HumanizeDurationLanguage,
+  HumanizeDuration,
+} from 'humanize-duration-ts';
+import { DateTime } from 'luxon';
 
 export class Store extends RapidElement {
   @property({ type: Number })
@@ -33,6 +39,9 @@ export class Store extends RapidElement {
   @property({ type: String, attribute: 'languages' })
   languagesEndpoint: string;
 
+  @property({ type: String, attribute: 'workspace' })
+  workspaceEndpoint: string;
+
   @property({ type: Object, attribute: false })
   private schema: CompletionSchema;
 
@@ -42,11 +51,17 @@ export class Store extends RapidElement {
   @property({ type: Object, attribute: false })
   private keyedAssets: KeyedAssets = {};
 
+  private locale = [...navigator.languages];
+
   private fields: { [key: string]: ContactField } = {};
   private groups: { [uuid: string]: ContactGroup } = {};
   private languages: any = {};
+  private workspace: Workspace;
   private pinnedFields: ContactField[] = [];
 
+  private langService = new HumanizeDurationLanguage();
+  private humanizer = new HumanizeDuration(this.langService);
+
   // http promise to monitor for completeness
   public httpComplete: Promise<void | WebResponse[]>;
 
@@ -55,6 +70,21 @@ export class Store extends RapidElement {
   public firstUpdated() {
     this.cache = Lru(this.max, this.ttl);
 
+    /* 
+    // This will create a shorthand unit
+    this.humanizer.addLanguage("en", {
+      y: () => "y",
+      mo: () => "mo",
+      w: () => "w",
+      d: () => "d",
+      h: () => "h",
+      m: () => "m",
+      s: () => "s",
+      ms: () => "ms",
+      decimal: ".",
+    });
+    */
+
     const fetches = [];
     if (this.completionEndpoint) {
       fetches.push(
@@ -120,9 +150,40 @@ export class Store extends RapidElement {
       );
     }
 
+    if (this.workspaceEndpoint) {
+      fetches.push(
+        getUrl(this.workspaceEndpoint).then((response: WebResponse) => {
+          this.workspace = response.json;
+          const lang = response.headers.get('content-language');
+          if (lang) {
+            this.locale = [lang, ...this.locale];
+          }
+        })
+      );
+    }
+
     this.httpComplete = Promise.all(fetches);
   }
 
+  public getLanguageCode() {
+    if (this.locale.length > 0) {
+      return this.locale[0].split('-')[0];
+    }
+    return 'en';
+  }
+
+  public getShortDuration(isoDate: string) {
+    const scheduled = DateTime.fromISO(isoDate);
+    const now = DateTime.now();
+
+    const duration = scheduled.diff(now).valueOf();
+    return this.humanizer.humanize(duration, {
+      language: this.getLanguageCode(),
+      largest: 1,
+      round: false,
+    });
+  }
+
   public setKeyedAssets(name: string, values: string[]): void {
     this.keyedAssets[name] = values;
   }
@@ -163,6 +224,20 @@ export class Store extends RapidElement {
     return false;
   }
 
+  public getWorkspace(): Workspace {
+    return this.workspace;
+  }
+
+  public formatDate(dateString: string) {
+    return new Date(dateString).toLocaleString(this.locale, {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+      hour: 'numeric',
+      minute: 'numeric',
+    });
+  }
+
   public getUrl(
     url: string,
     options?: {
@@ -231,6 +306,11 @@ export class Store extends RapidElement {
 
   public fetching: { [url: string]: number } = {};
 
+  public updateCache(url: string, data: any) {
+    this.cache.set(url, data);
+    this.fireCustomEvent(CustomEventType.StoreUpdated, { url, data });
+  }
+
   public makeRequest(
     url: string,
     options?: { force?: boolean; prepareData?: (data: any) => any }

package/src/utils/index.ts

@@ -6,7 +6,8 @@ import { ContactField, Ticket } from '../interfaces';
 
 export type Asset = KeyedAsset & Ticket & ContactField;
 
-export const DATE_FORMAT = /(\d{4}-[01]\d-[0-3]\dT[0-2]\d:[0-5]\d:[0-5]\d\.\d+([+-][0-2]\d:[0-5]\d|Z))|(\d{4}-[01]\d-[0-3]\dT[0-2]\d:[0-5]\d:[0-5]\d([+-][0-2]\d:[0-5]\d|Z))|(\d{4}-[01]\d-[0-3]\dT[0-2]\d:[0-5]\d([+-][0-2]\d:[0-5]\d|Z))/;
+export const DATE_FORMAT =
+  /(\d{4}-[01]\d-[0-3]\dT[0-2]\d:[0-5]\d:[0-5]\d\.\d+([+-][0-2]\d:[0-5]\d|Z))|(\d{4}-[01]\d-[0-3]\dT[0-2]\d:[0-5]\d:[0-5]\d([+-][0-2]\d:[0-5]\d|Z))|(\d{4}-[01]\d-[0-3]\dT[0-2]\d:[0-5]\d([+-][0-2]\d:[0-5]\d|Z))/;
 
 interface KeyedAsset {
   key?: string;
@@ -77,11 +78,11 @@ export const getUrl = (
             // eslint-disable-next-line no-empty
           } catch (err) {}
           resolve({
+            controller,
             body,
             json,
-            status: response.status,
             headers: response.headers,
-            controller,
+            status: response.status,
           });
         });
       })
@@ -210,8 +211,8 @@ export const postUrl = (
           resolve({
             body,
             json,
-            status: response.status,
             headers: response.headers,
+            status: response.status,
           });
         });
       })
@@ -260,12 +261,11 @@ export const postForm = (
 
 /**
  */
-export const renderIf = (predicate: boolean | any) => (
-  then: () => TemplateResult,
-  otherwise?: () => TemplateResult
-) => {
-  return predicate ? then() : otherwise ? otherwise() : html``;
-};
+export const renderIf =
+  (predicate: boolean | any) =>
+  (then: () => TemplateResult, otherwise?: () => TemplateResult) => {
+    return predicate ? then() : otherwise ? otherwise() : html``;
+  };
 
 export const hexToRgb = (hex: string): { r: number; g: number; b: number } => {
   const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);

package/temba-modules.ts

@@ -32,6 +32,7 @@ import { ContactFields } from './src/contacts/ContactFields';
 import { ContactFieldEditor } from './src/contacts/ContactFieldEditor';
 
 import { ContactBadges } from './src/contacts/ContactBadges';
+import { ContactPending } from './src/contacts/ContactPending';
 
 export function addCustomElement(name: string, comp: any) {
   if (!window.customElements.get(name)) {
@@ -73,3 +74,4 @@ addCustomElement('temba-dropdown', Dropdown);
 addCustomElement('temba-tabs', TabPane);
 addCustomElement('temba-tab', Tab);
 addCustomElement('temba-contact-groups', ContactBadges);
+addCustomElement('temba-contact-pending', ContactPending);