@verdocs/web-sdk 2.0.1 → 2.0.2

package/dist/collection/components/templates/verdocs-template-fields/verdocs-template-fields.js

@@ -99,26 +99,27 @@ export class VerdocsTemplateFields {
     console.log('[FIELDS] handleFieldChange', field, e, optionId);
     this.rerender++;
   }
+  handleFieldSettingsChange(pageInfo, field, roleIndex, el, newFieldData) {
+    var _a, _b, _c, _d;
+    console.log('[FIELDS] Field settings changed', field.name, newFieldData);
+    Object.assign(field, newFieldData);
+    el.field = newFieldData;
+    this.selectedRoleName = field.role_name;
+    el.setAttribute('roleindex', getRoleIndex(getRoleNames(this.store), field.role_name));
+    el.field = (_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.fields.find(f => f.name === field.name);
+    this.rerender++;
+    el.setAttribute('rerender', this.rerender);
+    (_c = this.templateUpdated) === null || _c === void 0 ? void 0 : _c.emit({ endpoint: this.endpoint, template: (_d = this.store) === null || _d === void 0 ? void 0 : _d.state, event: 'updated-field' });
+    console.log('[FIELDS] Re-rendering field', field.name, pageInfo.pageNumber);
+    this.reRenderField(field, pageInfo.pageNumber);
+    const newEl = renderDocumentField(field, pageInfo, roleIndex, { disabled: true, editable: true, draggable: true });
+    if (!newEl) {
+      return;
+    }
+  }
   attachFieldAttributes(pageInfo, field, roleIndex, el) {
     el.addEventListener('input', e => this.handleFieldChange(field, e));
-    el.addEventListener('settingsChanged', e => {
-      var _a, _b, _c, _d;
-      console.log('[FIELDS] settingsChanged', e.detail);
-      Object.assign(field, e.detail.field);
-      this.selectedRoleName = field.role_name;
-      el.field = e.detail.field;
-      el.setAttribute('roleindex', getRoleIndex(getRoleNames(this.store), field.role_name));
-      el.field = (_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.fields.find(f => f.name === field.name);
-      this.rerender++;
-      el.setAttribute('rerender', this.rerender);
-      (_c = this.templateUpdated) === null || _c === void 0 ? void 0 : _c.emit({ endpoint: this.endpoint, template: (_d = this.store) === null || _d === void 0 ? void 0 : _d.state, event: 'updated-field' });
-      console.log('[FIELDS] Re-rendering field', field.name, pageInfo.pageNumber);
-      this.reRenderField(field, pageInfo.pageNumber);
-      const newEl = renderDocumentField(field, pageInfo, roleIndex, { disabled: true, editable: true, draggable: true });
-      if (!newEl) {
-        return;
-      }
-    });
+    el.addEventListener('settingsChanged', e => this.handleFieldSettingsChange(pageInfo, field, roleIndex, el, e.detail.field));
     el.addEventListener('deleted', () => {
       var _a, _b;
       console.log('[FIELDS] Deleted', this, field);
@@ -150,69 +151,52 @@ export class VerdocsTemplateFields {
       return;
     }
     if (Array.isArray(el)) {
-      el.forEach(e => {
-        this.attachFieldAttributes(pageInfo, field, roleIndex, e);
-        interact(e).draggable({
-          listeners: {
-            start(event) {
-              console.log('[FIELDS] Drag started', event.type, event.target);
-            },
-            move(event) {
-              const oldX = +(event.target.getAttribute('posX') || 0);
-              const oldY = +(event.target.getAttribute('posY') || 0);
-              const xScale = +(event.target.getAttribute('xScale') || 1);
-              const yScale = +(event.target.getAttribute('yScale') || 1);
-              const newX = event.dx / xScale + oldX;
-              const newY = event.dy / yScale + oldY;
-              event.target.setAttribute('posX', newX);
-              event.target.setAttribute('posy', newY);
-              updateCssTransform(event.target, 'translate', `${newX}px, ${newY}px`);
-            },
-            end: this.handleMoveField.bind(this),
-          },
-        });
+      el.forEach(childEl => {
+        this.attachFieldAttributes(pageInfo, field, roleIndex, childEl);
+        this.makeDraggable(childEl);
       });
     }
     else {
       this.attachFieldAttributes(pageInfo, field, roleIndex, el);
-      interact(el).draggable({
-        listeners: {
-          start(event) {
-            console.log('[FIELDS] Drag started', event.type, event.target);
-          },
-          move(event) {
-            const oldX = +(event.target.getAttribute('posX') || 0);
-            const oldY = +(event.target.getAttribute('posY') || 0);
-            const xScale = +(event.target.getAttribute('xScale') || 1);
-            const yScale = +(event.target.getAttribute('yScale') || 1);
-            const newX = event.dx / xScale + oldX;
-            const newY = event.dy / yScale + oldY;
-            event.target.setAttribute('posX', newX);
-            event.target.setAttribute('posy', newY);
-            updateCssTransform(event.target, 'translate', `${newX}px, ${newY}px`);
-          },
-          end: this.handleMoveField.bind(this),
-        },
-      });
+      this.makeDraggable(el);
     }
   }
-  async handleMoveField(e) {
+  makeDraggable(el) {
+    interact(el).draggable({
+      listeners: {
+        move: this.handleMoveField.bind(this),
+        end: this.handleMoveEnd.bind(this),
+      },
+    });
+  }
+  async handleMoveField(event) {
+    const oldX = +(event.target.getAttribute('posX') || 0);
+    const oldY = +(event.target.getAttribute('posY') || 0);
+    const xScale = +(event.target.getAttribute('xScale') || 1);
+    const yScale = +(event.target.getAttribute('yScale') || 1);
+    const newX = event.dx / xScale + oldX;
+    const newY = event.dy / yScale + oldY;
+    event.target.setAttribute('posX', newX);
+    event.target.setAttribute('posy', newY);
+    updateCssTransform(event.target, 'translate', `${newX}px, ${newY}px`);
+  }
+  async handleMoveEnd(event) {
     var _a;
-    const pageNumber = e.target.getAttribute('pageNumber');
+    const pageNumber = event.target.getAttribute('pageNumber');
     const { naturalWidth = 612, naturalHeight = 792, renderedHeight = 792 } = this.cachedPageInfo[pageNumber];
-    console.log('[FIELDS] Drag ended', pageNumber, e.target);
-    const clientRect = e.target.getBoundingClientRect();
-    const parent = e.target.parentElement;
+    console.log('[FIELDS] Drag ended', pageNumber, event.target);
+    const clientRect = event.target.getBoundingClientRect();
+    const parent = event.target.parentElement;
     const parentRect = parent.getBoundingClientRect();
     // These two being backwards is not a mistake. Left measures "over" from the left (positive displacement) while bottom measures
     // "up" from the bottom (negative displacement).
     const newX = Math.max(clientRect.left - parentRect.left, 0);
     const newY = Math.max(renderedHeight - (parentRect.bottom - clientRect.bottom), 0);
-    const { x, y } = this.viewCoordinatesToPageCoordinates(newX, newY, pageNumber, naturalWidth - e.rect.width, naturalHeight - e.rect.height);
-    const name = e.target.getAttribute('name');
-    const option = +(e.target.getAttribute('option') || '0');
+    const { x, y } = this.viewCoordinatesToPageCoordinates(newX, newY, pageNumber, naturalWidth - event.rect.width, naturalHeight - event.rect.height);
+    const name = event.target.getAttribute('name');
+    const option = +(event.target.getAttribute('option') || '0');
     const field = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state.fields.find(field => field.name === name);
-    console.log('Will update', name, option, field);
+    console.log('[FIELDS] Will update', name, option, field);
     if (field) {
       switch (field.type) {
         case 'attachment':
@@ -238,20 +222,20 @@ export class VerdocsTemplateFields {
           }
           break;
       }
-      await updateField(this.endpoint, this.templateId, name, field);
-      this.handlePageRendered({ detail: this.cachedPageInfo[pageNumber] });
+      const newFieldData = await updateField(this.endpoint, this.templateId, name, field);
+      const pageInfo = this.cachedPageInfo[pageNumber];
+      const roleIndex = getRoleIndex(getRoleNames(this.store), field.role_name);
+      this.handleFieldSettingsChange(pageInfo, field, roleIndex, event.target, newFieldData);
     }
   }
   generateFieldName(type, pageNumber) {
-    var _a, _b;
+    var _a;
     let i = 1;
     let fieldName;
     do {
       fieldName = `${type}P${pageNumber}-${i}`;
-      console.log('testing field', fieldName);
       i++;
     } while ((_a = this.store) === null || _a === void 0 ? void 0 : _a.state.fields.some(field => field.name === fieldName));
-    console.log('Will use field name', this, fieldName, (_b = this.store) === null || _b === void 0 ? void 0 : _b.state.fields);
     return fieldName;
   }
   // Scale the X,Y clicks to the virtual page dimensions. Also ensure the field doesn't go off the page.
@@ -264,15 +248,11 @@ export class VerdocsTemplateFields {
   async handleClickPage(e, pageNumber) {
     var _a, _b, _c;
     if (this.placing) {
-      console.log('Placing field', this, this.selectedRoleName, this.placing, pageNumber, e.offsetX, e.offsetY);
-      // console.log('Placing field', this.placing, page.sequence, e.offsetX, e.offsetY);
-      // const pageNumber = page.sequence;
       const clickedX = e.offsetX;
       const clickedY = e.offsetY;
       const width = defaultWidth(this.placing);
       const height = defaultHeight(this.placing);
       const cachedPage = this.cachedPageInfo[pageNumber];
-      // console.log('Cached page', cachedPage);
       const { naturalWidth = 612, naturalHeight = 792 } = cachedPage;
       const coords = this.viewCoordinatesToPageCoordinates(clickedX, clickedY, pageNumber, naturalWidth - width, naturalHeight - height);
       const x = Math.floor(coords.x);

package/dist/collection/components/templates/verdocs-template-fields/verdocs-template-fields.stories.js

@@ -3,7 +3,7 @@ export default {
   title: 'Templates/Fields',
   component: 'verdocs-template-fields',
   args: {
-    templateId: '',
+    templateId: 'd2338742-f3a1-465b-8592-806587413cc1',
   },
   argTypes: {},
   parameters: {

package/dist/collection/components/templates/verdocs-templates-list/verdocs-templates-list.stories.js

@@ -10,9 +10,13 @@ export default {
   },
   argTypes: {
     onClose: { action: 'close' },
+    onEditTemplate: { action: 'editTemplate' },
+    onViewTemplate: { action: 'viewTemplate' },
   },
   parameters: {
     layout: 'fullscreen',
   },
 };
-export const TemplatesList = ({ onClose, templateId }) => html ` <verdocs-templates-list .templateId=${templateId} @close=${onClose} /> `;
+export const TemplatesList = ({ onClose, onEditTemplate, onViewTemplate, templateId }) => html `
+  <verdocs-templates-list .templateId=${templateId} @close=${onClose} @viewTemplate=${onViewTemplate} @editTemplate=${onEditTemplate} />
+`;

package/dist/components/verdocs-field-textarea.js

@@ -89,9 +89,9 @@ const VerdocsFieldTextarea$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
     newSettings.x = Math.round(newSettings.x + translateX / this.xscale);
     newSettings.y = Math.round(newSettings.y - translateY / this.yscale);
     updateField(this.endpoint, this.templateid, this.field.name, { setting: newSettings })
-      .then(() => {
+      .then(field => {
       var _a;
-      (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name, settings: newSettings });
+      (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name, settings: newSettings, field });
       Object.assign(e.target.dataset, { x: 0, y: 0, h: 0 });
     })
       .catch(e => console.log('Field update failed', e));

package/dist/components/verdocs-field-textbox.js

@@ -89,9 +89,10 @@ const VerdocsFieldTextbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
     newSettings.x = Math.round(newSettings.x + translateX / this.xscale);
     newSettings.y = Math.round(newSettings.y - translateY / this.yscale);
     updateField(this.endpoint, this.templateid, this.field.name, { setting: newSettings })
-      .then(() => {
+      .then(field => {
       var _a;
-      (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name, settings: newSettings });
+      console.log('update result', field);
+      (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name, settings: newSettings, field });
       Object.assign(e.target.dataset, { x: 0, y: 0, h: 0 });
     })
       .catch(e => console.log('Field update failed', e));
@@ -114,6 +115,7 @@ const VerdocsFieldTextbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
         return this.hideSettingsPanel();
       }, onSettingsChanged: e => {
         var _a;
+        console.log('here');
         (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit(e.detail);
         return this.hideSettingsPanel();
       }, helpText: 'Text boxes may be used to capture simple text input. Participant-entered values will be stored for later retrieval via the "name" field.<br /><br />If marked required, the participant must complete the field before proceeding.' })))));

package/dist/components/verdocs-template-fields2.js

@@ -110,26 +110,27 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTM
     console.log('[FIELDS] handleFieldChange', field, e, optionId);
     this.rerender++;
   }
+  handleFieldSettingsChange(pageInfo, field, roleIndex, el, newFieldData) {
+    var _a, _b, _c, _d;
+    console.log('[FIELDS] Field settings changed', field.name, newFieldData);
+    Object.assign(field, newFieldData);
+    el.field = newFieldData;
+    this.selectedRoleName = field.role_name;
+    el.setAttribute('roleindex', getRoleIndex(getRoleNames(this.store), field.role_name));
+    el.field = (_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.fields.find(f => f.name === field.name);
+    this.rerender++;
+    el.setAttribute('rerender', this.rerender);
+    (_c = this.templateUpdated) === null || _c === void 0 ? void 0 : _c.emit({ endpoint: this.endpoint, template: (_d = this.store) === null || _d === void 0 ? void 0 : _d.state, event: 'updated-field' });
+    console.log('[FIELDS] Re-rendering field', field.name, pageInfo.pageNumber);
+    this.reRenderField(field, pageInfo.pageNumber);
+    const newEl = renderDocumentField(field, pageInfo, roleIndex, { disabled: true, editable: true, draggable: true });
+    if (!newEl) {
+      return;
+    }
+  }
   attachFieldAttributes(pageInfo, field, roleIndex, el) {
     el.addEventListener('input', e => this.handleFieldChange(field, e));
-    el.addEventListener('settingsChanged', e => {
-      var _a, _b, _c, _d;
-      console.log('[FIELDS] settingsChanged', e.detail);
-      Object.assign(field, e.detail.field);
-      this.selectedRoleName = field.role_name;
-      el.field = e.detail.field;
-      el.setAttribute('roleindex', getRoleIndex(getRoleNames(this.store), field.role_name));
-      el.field = (_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.fields.find(f => f.name === field.name);
-      this.rerender++;
-      el.setAttribute('rerender', this.rerender);
-      (_c = this.templateUpdated) === null || _c === void 0 ? void 0 : _c.emit({ endpoint: this.endpoint, template: (_d = this.store) === null || _d === void 0 ? void 0 : _d.state, event: 'updated-field' });
-      console.log('[FIELDS] Re-rendering field', field.name, pageInfo.pageNumber);
-      this.reRenderField(field, pageInfo.pageNumber);
-      const newEl = renderDocumentField(field, pageInfo, roleIndex, { disabled: true, editable: true, draggable: true });
-      if (!newEl) {
-        return;
-      }
-    });
+    el.addEventListener('settingsChanged', e => this.handleFieldSettingsChange(pageInfo, field, roleIndex, el, e.detail.field));
     el.addEventListener('deleted', () => {
       var _a, _b;
       console.log('[FIELDS] Deleted', this, field);
@@ -161,69 +162,52 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTM
       return;
     }
     if (Array.isArray(el)) {
-      el.forEach(e => {
-        this.attachFieldAttributes(pageInfo, field, roleIndex, e);
-        interact(e).draggable({
-          listeners: {
-            start(event) {
-              console.log('[FIELDS] Drag started', event.type, event.target);
-            },
-            move(event) {
-              const oldX = +(event.target.getAttribute('posX') || 0);
-              const oldY = +(event.target.getAttribute('posY') || 0);
-              const xScale = +(event.target.getAttribute('xScale') || 1);
-              const yScale = +(event.target.getAttribute('yScale') || 1);
-              const newX = event.dx / xScale + oldX;
-              const newY = event.dy / yScale + oldY;
-              event.target.setAttribute('posX', newX);
-              event.target.setAttribute('posy', newY);
-              updateCssTransform(event.target, 'translate', `${newX}px, ${newY}px`);
-            },
-            end: this.handleMoveField.bind(this),
-          },
-        });
+      el.forEach(childEl => {
+        this.attachFieldAttributes(pageInfo, field, roleIndex, childEl);
+        this.makeDraggable(childEl);
       });
     }
     else {
       this.attachFieldAttributes(pageInfo, field, roleIndex, el);
-      interact(el).draggable({
-        listeners: {
-          start(event) {
-            console.log('[FIELDS] Drag started', event.type, event.target);
-          },
-          move(event) {
-            const oldX = +(event.target.getAttribute('posX') || 0);
-            const oldY = +(event.target.getAttribute('posY') || 0);
-            const xScale = +(event.target.getAttribute('xScale') || 1);
-            const yScale = +(event.target.getAttribute('yScale') || 1);
-            const newX = event.dx / xScale + oldX;
-            const newY = event.dy / yScale + oldY;
-            event.target.setAttribute('posX', newX);
-            event.target.setAttribute('posy', newY);
-            updateCssTransform(event.target, 'translate', `${newX}px, ${newY}px`);
-          },
-          end: this.handleMoveField.bind(this),
-        },
-      });
+      this.makeDraggable(el);
     }
   }
-  async handleMoveField(e) {
+  makeDraggable(el) {
+    interact(el).draggable({
+      listeners: {
+        move: this.handleMoveField.bind(this),
+        end: this.handleMoveEnd.bind(this),
+      },
+    });
+  }
+  async handleMoveField(event) {
+    const oldX = +(event.target.getAttribute('posX') || 0);
+    const oldY = +(event.target.getAttribute('posY') || 0);
+    const xScale = +(event.target.getAttribute('xScale') || 1);
+    const yScale = +(event.target.getAttribute('yScale') || 1);
+    const newX = event.dx / xScale + oldX;
+    const newY = event.dy / yScale + oldY;
+    event.target.setAttribute('posX', newX);
+    event.target.setAttribute('posy', newY);
+    updateCssTransform(event.target, 'translate', `${newX}px, ${newY}px`);
+  }
+  async handleMoveEnd(event) {
     var _a;
-    const pageNumber = e.target.getAttribute('pageNumber');
+    const pageNumber = event.target.getAttribute('pageNumber');
     const { naturalWidth = 612, naturalHeight = 792, renderedHeight = 792 } = this.cachedPageInfo[pageNumber];
-    console.log('[FIELDS] Drag ended', pageNumber, e.target);
-    const clientRect = e.target.getBoundingClientRect();
-    const parent = e.target.parentElement;
+    console.log('[FIELDS] Drag ended', pageNumber, event.target);
+    const clientRect = event.target.getBoundingClientRect();
+    const parent = event.target.parentElement;
     const parentRect = parent.getBoundingClientRect();
     // These two being backwards is not a mistake. Left measures "over" from the left (positive displacement) while bottom measures
     // "up" from the bottom (negative displacement).
     const newX = Math.max(clientRect.left - parentRect.left, 0);
     const newY = Math.max(renderedHeight - (parentRect.bottom - clientRect.bottom), 0);
-    const { x, y } = this.viewCoordinatesToPageCoordinates(newX, newY, pageNumber, naturalWidth - e.rect.width, naturalHeight - e.rect.height);
-    const name = e.target.getAttribute('name');
-    const option = +(e.target.getAttribute('option') || '0');
+    const { x, y } = this.viewCoordinatesToPageCoordinates(newX, newY, pageNumber, naturalWidth - event.rect.width, naturalHeight - event.rect.height);
+    const name = event.target.getAttribute('name');
+    const option = +(event.target.getAttribute('option') || '0');
     const field = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state.fields.find(field => field.name === name);
-    console.log('Will update', name, option, field);
+    console.log('[FIELDS] Will update', name, option, field);
     if (field) {
       switch (field.type) {
         case 'attachment':
@@ -249,20 +233,20 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTM
           }
           break;
       }
-      await updateField(this.endpoint, this.templateId, name, field);
-      this.handlePageRendered({ detail: this.cachedPageInfo[pageNumber] });
+      const newFieldData = await updateField(this.endpoint, this.templateId, name, field);
+      const pageInfo = this.cachedPageInfo[pageNumber];
+      const roleIndex = getRoleIndex(getRoleNames(this.store), field.role_name);
+      this.handleFieldSettingsChange(pageInfo, field, roleIndex, event.target, newFieldData);
     }
   }
   generateFieldName(type, pageNumber) {
-    var _a, _b;
+    var _a;
     let i = 1;
     let fieldName;
     do {
       fieldName = `${type}P${pageNumber}-${i}`;
-      console.log('testing field', fieldName);
       i++;
     } while ((_a = this.store) === null || _a === void 0 ? void 0 : _a.state.fields.some(field => field.name === fieldName));
-    console.log('Will use field name', this, fieldName, (_b = this.store) === null || _b === void 0 ? void 0 : _b.state.fields);
     return fieldName;
   }
   // Scale the X,Y clicks to the virtual page dimensions. Also ensure the field doesn't go off the page.
@@ -275,15 +259,11 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTM
   async handleClickPage(e, pageNumber) {
     var _a, _b, _c;
     if (this.placing) {
-      console.log('Placing field', this, this.selectedRoleName, this.placing, pageNumber, e.offsetX, e.offsetY);
-      // console.log('Placing field', this.placing, page.sequence, e.offsetX, e.offsetY);
-      // const pageNumber = page.sequence;
       const clickedX = e.offsetX;
       const clickedY = e.offsetY;
       const width = defaultWidth(this.placing);
       const height = defaultHeight(this.placing);
       const cachedPage = this.cachedPageInfo[pageNumber];
-      // console.log('Cached page', cachedPage);
       const { naturalWidth = 612, naturalHeight = 792 } = cachedPage;
       const coords = this.viewCoordinatesToPageCoordinates(clickedX, clickedY, pageNumber, naturalWidth - width, naturalHeight - height);
       const x = Math.floor(coords.x);