extract widgets

src/scripts/hd-widgets.js

@@ -0,0 +1,112 @@
+document.addEventListener('WebComponentsReady', function(event) {
+  class HDAppUserInfo extends SIBDisplayLookupList {
+    get parentElement() {
+      return 'div';
+    }
+    getTemplate(value, index) {
+      var firstname, lastname, email;
+
+      if (typeof value == 'object')
+        if (Object.keys(value).length > 1) {
+          firstname = value.first_name;
+          lastname = value.last_name;
+          email = value.email;
+        } else {
+          store.get(value).then(resource => {
+            this.value.push(resource);
+            this.render();
+          });
+          if (Array.isArray(this.value))
+            this.value.splice(this.value.indexOf(value), 1);
+          else this.value = [];
+          return '';
+        }
+      return `<div>${firstname} ${lastname}</div>`;
+      // + `<div id="${email}">${email}</div>`;
+    }
+  }
+  customElements.define('hdapp-userinfo', HDAppUserInfo);
+
+  class HDAppCell extends SIBDisplayLookupList {
+    get parentElement() {
+      return 'div';
+    }
+    getTemplate(value, index) {
+      var city, country;
+
+      if (typeof value == 'object')
+        if (Object.keys(value).length > 1) {
+          city = value.city;
+          country = value.country;
+        } else {
+          store.get(value).then(resource => {
+            this.value.push(resource);
+            this.render();
+          });
+          if (Array.isArray(this.value))
+            this.value.splice(this.value.indexOf(value), 1);
+          else this.value = [];
+          return '';
+        }
+      return `<span>${city} - ${country}</span>`;
+    }
+  }
+  customElements.define('hdapp-usercell', HDAppCell);
+
+  class HDAppClient extends SIBWidget {
+    get template() {
+      return `<img name="${this.name}" src="${this.value.logo}"/>`;
+    }
+
+    render() {
+      store.get(this.value).then(value => {
+        this._value = value;
+        this.innerHTML = this.template;
+      });
+    }
+  }
+  customElements.define('hdapp-client', HDAppClient);
+
+  class HDAppMember extends SIBWidget {
+    get template() {
+      return `
+        <div name="${this.name}">
+          <img src="${this.value.avatar}"/>
+        </div>
+      `;
+    }
+
+    render() {
+      store.get(this.value).then(value => {
+        this._value = value;
+        this.innerHTML = this.template;
+      });
+    }
+  }
+  customElements.define('hdapp-member', HDAppMember);
+
+  class HDAppAuthor extends SIBDisplayLookupList {
+    get parentElement() {
+      return 'div';
+    }
+    getTemplate(value, index) {
+      var firstname, lastname;
+      if (typeof value == 'object')
+        if (Object.keys(value).length > 1) {
+          firstname = value.user.first_name;
+          lastname = value.user.last_name;
+        } else {
+          store.get(value).then(resource => {
+            this.value.push(resource);
+            this.render();
+          });
+          if (Array.isArray(this.value))
+            this.value.splice(this.value.indexOf(value), 1);
+          else this.value = [];
+          return '';
+        }
+      return `${firstname} ${lastname}`;
+    }
+  }
+  customElements.define('hdapp-author', HDAppAuthor);
+});