@verdocs/web-sdk 2.3.15 → 2.3.18

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

@@ -4,6 +4,7 @@ import { integerSequence } from '@verdocs/js-sdk/Utils/Primitives';
 import { createField, updateField } from '@verdocs/js-sdk/Templates/Fields';
 import { h, Host } from '@stencil/core';
 import { defaultHeight, defaultWidth, getRoleIndex, renderDocumentField, updateCssTransform } from '../../../utils/utils';
+import { createTemplateFieldStore } from '../../../utils/TemplateFieldStore';
 import { getRoleNames, getTemplateStore } from '../../../utils/TemplateStore';
 import { SDKError } from '../../../utils/errors';
 const iconTextbox = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path fill="#ffffff" d="M3.425 16.15V13h11.15v3.15Zm0-5.15V7.85h17.15V11Z"/></svg>';
@@ -39,7 +40,8 @@ const menuOptions = [
 export class VerdocsTemplateFields {
   constructor() {
     this.pageHeights = {};
-    this.store = null;
+    this.templateStore = null;
+    this.fieldStore = null;
     this.cachedPageInfo = {};
     this.endpoint = VerdocsEndpoint.getDefault();
     this.templateId = null;
@@ -61,10 +63,9 @@ export class VerdocsTemplateFields {
         console.log('[FIELDS] Unable to start builder session, must be authenticated');
         return;
       }
-      this.store = await getTemplateStore(this.endpoint, this.templateId, true);
-      console.log(`[FIELDS] Loaded template ${this.templateId}`, this.store.state);
-      this.selectedRoleName = ((_d = (_c = (_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.roles) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.name) || '';
-      console.log('[FIELDS] Starting with role', this.selectedRoleName);
+      this.templateStore = await getTemplateStore(this.endpoint, this.templateId, true);
+      this.fieldStore = createTemplateFieldStore(this.templateStore.state);
+      this.selectedRoleName = ((_d = (_c = (_b = (_a = this.templateStore) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.roles) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.name) || '';
     }
     catch (e) {
       console.log('[FIELDS] Error with preview session', e);
@@ -84,8 +85,8 @@ export class VerdocsTemplateFields {
   componentWillUpdate() {
     var _a, _b, _c, _d, _e, _f;
     // If a new role was added and there were none yet so far, or the "selected" role was deleted, reset our selection
-    if (!this.selectedRoleName || !(((_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.roles) || []).find(role => role.name === this.selectedRoleName)) {
-      this.selectedRoleName = ((_f = (_e = (_d = (_c = this.store) === null || _c === void 0 ? void 0 : _c.state) === null || _d === void 0 ? void 0 : _d.roles) === null || _e === void 0 ? void 0 : _e[0]) === null || _f === void 0 ? void 0 : _f.name) || '';
+    if (!this.selectedRoleName || !(((_b = (_a = this.templateStore) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.roles) || []).find(role => role.name === this.selectedRoleName)) {
+      this.selectedRoleName = ((_f = (_e = (_d = (_c = this.templateStore) === null || _c === void 0 ? void 0 : _c.state) === null || _d === void 0 ? void 0 : _d.roles) === null || _e === void 0 ? void 0 : _e[0]) === null || _f === void 0 ? void 0 : _f.name) || '';
       console.log('[FIELDS] Selected new role', this.selectedRoleName);
     }
   }
@@ -99,35 +100,52 @@ 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);
+  handleFieldSettingsChange(pageInfo, field, el, newFieldData, oldName) {
+    var _a, _b;
+    // handleFieldSettingsChange(pageInfo: any, field: any, roleIndex: number, el: any, newFieldData: any) {
+    console.log('[FIELDS] Field settings changed', oldName, 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);
+    el.setAttribute('roleindex', getRoleIndex(getRoleNames(this.templateStore), field.role_name));
+    el.field = this.fieldStore.get(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;
+    (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template: (_b = this.templateStore) === null || _b === void 0 ? void 0 : _b.state, event: 'updated-field' });
+    // We do this to avoid dupes if the field gets renamed.
+    if (field.name !== oldName) {
+      console.log('[FIELDS] Renaming field', oldName, field.name);
+      el.remove();
+      delete this.fieldStore.state[oldName];
     }
+    else {
+      console.log('[FIELDS] Updating existing field', field.name);
+    }
+    // REMINDER: Do not access el past this point! It may have been removed from the DOM.
+    console.log('[FIELDS] Re-rendering field', field.name, pageInfo.pageNumber, field);
+    this.fieldStore.set(field.name, field);
+    // const roleIndex = getRoleIndex(getRoleNames(this.templateStore), field.role_name);
+    // this.attachFieldAttributes(pageInfo, field, roleIndex, el);
+    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) {
+    // console.log('afa', field);
     el.addEventListener('input', e => this.handleFieldChange(field, e));
-    el.addEventListener('settingsChanged', e => this.handleFieldSettingsChange(pageInfo, field, roleIndex, el, e.detail.field));
+    el.addEventListener('settingsChanged', e => this.handleFieldSettingsChange(pageInfo, field, el, e.detail.field, e.detail.fieldName));
+    // 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);
       el.remove();
       this.rerender++;
-      (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template: (_b = this.store) === null || _b === void 0 ? void 0 : _b.state, event: 'updated-field' });
+      (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template: (_b = this.templateStore) === null || _b === void 0 ? void 0 : _b.state, event: 'updated-field' });
     });
     el.setAttribute('templateid', this.templateId);
+    el.setAttribute('fieldname', field.name);
     el.setAttribute('roleindex', roleIndex);
     el.setAttribute('pageNumber', pageInfo.pageNumber);
     el.setAttribute('xScale', pageInfo.xScale);
@@ -135,17 +153,16 @@ export class VerdocsTemplateFields {
     el.setAttribute('name', field.name);
   }
   handlePageRendered(e) {
-    var _a;
     const pageInfo = e.detail;
-    console.log('[FIELDS] Page rendered', pageInfo.pageNumber, pageInfo);
+    // console.log('[FIELDS] Page rendered', pageInfo.pageNumber, pageInfo);
     this.cachedPageInfo[pageInfo.pageNumber] = pageInfo;
     this.pageHeights[pageInfo.pageNumber] = pageInfo.naturalHeight;
-    const fields = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state.fields.filter(field => field.page_sequence === pageInfo.pageNumber);
+    const fields = Object.values(this.fieldStore.state).filter(field => field.page_sequence === pageInfo.pageNumber);
     fields.forEach(field => this.reRenderField(field, pageInfo.pageNumber));
   }
   reRenderField(field, pageNumber) {
     const pageInfo = this.cachedPageInfo[pageNumber];
-    const roleIndex = getRoleIndex(getRoleNames(this.store), field.role_name);
+    const roleIndex = getRoleIndex(getRoleNames(this.templateStore), field.role_name);
     const el = renderDocumentField(field, pageInfo, roleIndex, { disabled: true, editable: true, draggable: true });
     if (!el) {
       return;
@@ -181,11 +198,9 @@ export class VerdocsTemplateFields {
     updateCssTransform(event.target, 'translate', `${newX}px, ${newY}px`);
   }
   async handleMoveEnd(event) {
-    var _a;
     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('Dropped field', name, field);
+    const field = this.fieldStore.get(name);
     if (!field) {
       console.log('[FIELDS] Unable to find field', name);
       return;
@@ -201,9 +216,7 @@ export class VerdocsTemplateFields {
     // "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);
-    // console.log('Computing coordinates', {naturalWidth, width: event.rect.width, naturalHeight, height: event.rect.height, newX, newY});
     const { x, y } = this.viewCoordinatesToPageCoordinates(newX, newY, pageNumber, naturalWidth - width, naturalHeight - height);
-    // console.log('Drop End', {x, y, newX, newY});
     switch (field.type) {
       case 'attachment':
       case 'payment':
@@ -228,22 +241,20 @@ export class VerdocsTemplateFields {
         }
         break;
     }
-    console.log('[FIELDS] Will update', name, option, field);
+    console.log('[FIELDS] Will update', name, y, option, field);
     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);
+    this.handleFieldSettingsChange(pageInfo, field, event.target, newFieldData, name);
     event.target.removeAttribute('posX');
     event.target.removeAttribute('posY');
   }
   generateFieldName(type, pageNumber) {
-    var _a;
     let i = 1;
     let fieldName;
     do {
       fieldName = `${type}P${pageNumber}-${i}`;
       i++;
-    } while ((_a = this.store) === null || _a === void 0 ? void 0 : _a.state.fields.some(field => field.name === fieldName));
+    } while (Object.values(this.fieldStore.state).some(field => field.name === fieldName));
     return fieldName;
   }
   // Scale the X,Y clicks to the virtual page dimensions. Also ensure the field doesn't go off the page.
@@ -251,11 +262,10 @@ export class VerdocsTemplateFields {
     const { xScale = 1, yScale = 1, renderedHeight = 792 } = this.cachedPageInfo[pageNumber];
     const x = Math.floor(Math.min(viewX / xScale, xMax));
     const y = Math.floor(Math.min(Math.max(renderedHeight - viewY, 0) / yScale, yMax));
-    console.log('Computed coordinates', { x, y, viewX, viewY, xMax, yMax });
     return { x, y };
   }
   async handleClickPage(e, pageNumber) {
-    var _a, _b, _c;
+    var _a, _b;
     if (this.placing) {
       const clickedX = e.offsetX;
       const clickedY = e.offsetY;
@@ -282,6 +292,7 @@ export class VerdocsTemplateFields {
         width,
         height,
       };
+      console.log('[FIELDS] Will save new field', field);
       // TODO: Fix how the server validates all this. It uses a JSON schema and is very particular about shapes for each field type.
       //  That makes it harder for third party developers to create fields via API calls. It would be better to always set X/Y and
       //  let the server normalize the rest, discarding properties that are invalid and back-filling defaults as needed.
@@ -347,28 +358,25 @@ export class VerdocsTemplateFields {
         field.type = 'textbox';
       }
       const saved = await createField(this.endpoint, this.templateId, field);
-      console.log('Saved field', saved);
-      if (this.store.state) {
-        this.store.state.fields = [...(_a = this.store) === null || _a === void 0 ? void 0 : _a.state.fields, saved];
-      }
+      console.log('[FIELDS] Saved field', saved);
+      this.fieldStore.set(saved.name, saved);
       this.placing = null;
-      (_b = this.templateUpdated) === null || _b === void 0 ? void 0 : _b.emit({ endpoint: this.endpoint, template: (_c = this.store) === null || _c === void 0 ? void 0 : _c.state, event: 'added-field' });
+      (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template: (_b = this.templateStore) === null || _b === void 0 ? void 0 : _b.state, event: 'added-field' });
       this.handlePageRendered({ detail: this.cachedPageInfo[pageNumber] });
     }
   }
   render() {
     var _a, _b, _c, _d, _e, _f, _g, _h;
-    console.log('[FIELDS] Rendering', this.selectedRoleName);
     if (!this.endpoint.session) {
       return (h(Host, null, h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
     }
     // TODO: Render a better error
-    if (!((_a = this.store) === null || _a === void 0 ? void 0 : _a.state.isLoaded)) {
+    if (!((_a = this.templateStore) === null || _a === void 0 ? void 0 : _a.state.isLoaded)) {
       return (h(Host, null, h("verdocs-loader", null)));
     }
-    const selectableRoles = (_c = (_b = this.store) === null || _b === void 0 ? void 0 : _b.state) === null || _c === void 0 ? void 0 : _c.roles.map(role => ({ value: role.name, label: role.name }));
+    const selectableRoles = (_c = (_b = this.templateStore) === null || _b === void 0 ? void 0 : _b.state) === null || _c === void 0 ? void 0 : _c.roles.map(role => ({ value: role.name, label: role.name }));
     return (h(Host, { class: this.placing ? { [`placing-${this.placing}`]: true } : {}, "data-r": this.rerender, onSubmit: () => {
-        console.log('onSubmit');
+        // console.log('onSubmit');
       } }, h("div", { id: "verdocs-template-fields-toolbar" }, h("div", { class: "add-for" }, "Add field:"), h("verdocs-select-input", { value: this.selectedRoleName, options: selectableRoles, onInput: (e) => (this.selectedRoleName = e.target.value) }), menuOptions.map(option => (h("verdocs-toolbar-icon", { text: option.tooltip, icon: option.icon, onClick: () => {
         // We ignore empty-tooltip entries because they're separators
         if (option.tooltip) {
@@ -380,13 +388,13 @@ export class VerdocsTemplateFields {
             this.showMustSelectRole = true;
           }
         }
-      } })))), h("div", { class: "pages" }, (((_e = (_d = this.store) === null || _d === void 0 ? void 0 : _d.state) === null || _e === void 0 ? void 0 : _e.template_documents) || []).map(document => {
+      } })))), h("div", { class: "pages" }, (((_e = (_d = this.templateStore) === null || _d === void 0 ? void 0 : _d.state) === null || _e === void 0 ? void 0 : _e.template_documents) || []).map(document => {
       const pageNumbers = integerSequence(1, document.page_numbers);
       return pageNumbers.map(page => (h("verdocs-template-document-page", { templateId: this.templateId, documentId: document.id, pageNumber: page, virtualWidth: 612, virtualHeight: 792, onClick: (e) => this.handleClickPage(e, page), onPageRendered: e => this.handlePageRendered(e), layers: [
           { name: 'page', type: 'canvas' },
           { name: 'controls', type: 'div' },
         ] })));
-    })), this.showMustSelectRole && (h("verdocs-ok-dialog", { heading: "Unable to add field", message: ((_h = (_g = (_f = this.store) === null || _f === void 0 ? void 0 : _f.state) === null || _g === void 0 ? void 0 : _g.roles) === null || _h === void 0 ? void 0 : _h.length) > 0 ? 'Please select a role before adding fields.' : 'Please add at least one role before adding fields.', onNext: () => (this.showMustSelectRole = false) }))));
+    })), this.showMustSelectRole && (h("verdocs-ok-dialog", { heading: "Unable to add field", message: ((_h = (_g = (_f = this.templateStore) === null || _f === void 0 ? void 0 : _f.state) === null || _g === void 0 ? void 0 : _g.roles) === null || _h === void 0 ? void 0 : _h.length) > 0 ? 'Please select a role before adding fields.' : 'Please add at least one role before adding fields.', onNext: () => (this.showMustSelectRole = false) }))));
   }
   static get is() { return "verdocs-template-fields"; }
   static get originalStyleUrls() {

package/dist/collection/utils/TemplateFieldStore.js

@@ -0,0 +1,20 @@
+import { createStore } from '@stencil/store';
+const templateFieldStores = {};
+export const getTemplateFieldStore = (templateId) => templateFieldStores[templateId];
+export const createTemplateFieldStore = (template) => {
+  let store = getTemplateFieldStore(template.id);
+  if (!store) {
+    console.log('Creating template field store for template', template.id);
+    store = createStore({});
+    templateFieldStores[template.id] = store;
+  }
+  else {
+    console.log('Resetting template field store for template', template.id);
+    console.trace('Stack');
+    store.reset();
+  }
+  template.fields.forEach(field => {
+    store.set(field.name, field);
+  });
+  return store;
+};

package/dist/collection/utils/TemplateStore.js

@@ -1,6 +1,7 @@
 import { createStore } from '@stencil/store';
 import { getTemplate } from '@verdocs/js-sdk/Templates/Templates';
 import { TemplateSenderTypes } from '@verdocs/js-sdk/Templates/Types';
+import { createTemplateFieldStore, getTemplateFieldStore } from './TemplateFieldStore';
 const createTemplateStore = (templateId) => {
   const now = new Date().toISOString();
   return createStore({
@@ -68,6 +69,7 @@ export const getTemplateStore = async (endpoint, templateId, forceReload = false
       store.state.isLoaded = true;
       store.state.isError = false;
       store.state.error = undefined;
+      createTemplateFieldStore(template);
     }
     catch (e) {
       console.error('[TEMPLATES] Error loading template', e);
@@ -79,6 +81,10 @@ export const getTemplateStore = async (endpoint, templateId, forceReload = false
     store.state.isLoading = false;
     store.state.updateCount++;
   }
+  else {
+    // Just make sure it exists
+    getTemplateFieldStore(templateId);
+  }
   return store;
 };
 export const getRoleNames = (store) => { var _a; return (((_a = store === null || store === void 0 ? void 0 : store.state) === null || _a === void 0 ? void 0 : _a.roles) || []).map(role => role.name); };

package/dist/collection/utils/utils.js

@@ -63,6 +63,7 @@ export const setControlStyles = (el, field, xScale, yScale, option) => {
   var _a, _b, _c, _d;
   const settings = field.setting || field.settings;
   let { x = 0, y = 0, width = defaultWidth(field.type), height = defaultHeight(field.type) } = settings;
+  // console.log('scs', field, settings, x, y);
   const optionSettings = settings.options && option !== undefined && settings.options[option] ? settings.options[option] : null;
   if (optionSettings) {
     x = (_a = optionSettings.x) !== null && _a !== void 0 ? _a : x;
@@ -96,6 +97,7 @@ export const updateDocumentFieldValue = (field) => {
 };
 export const renderDocumentField = (field, docPage, roleIndex, fieldOptions) => {
   var _a, _b;
+  // console.log('rdf', field);
   const { disabled = false, editable = false, draggable = false, done = false } = fieldOptions;
   // console.log('[renderDocumentField]', field, docPage, roleIndex, fieldOptions);
   const controlsDiv = document.getElementById(docPage.containerId + '-controls');
@@ -283,13 +285,6 @@ export const saveAttachment = async (endpoint, envelope, documentId) => {
   const data = await Envelopes.getEnvelopeFile(endpoint, envelope.id, documentId);
   downloadBlob(data, fileName);
 };
-export const saveCertificate = async (endpoint, envelope, documentId) => {
-  // e.g "Colorado Motor Vehicle Bill of Sale_certificate.pdf"
-  const date = format(new Date(envelope.updated_at), FORMAT_DATE);
-  const fileName = `${envelope.name} - ${date}_certificate.pdf`;
-  const data = await Envelopes.getEnvelopeFile(endpoint, envelope.id, documentId);
-  downloadBlob(data, fileName);
-};
 export const saveEnvelopesAsZip = async (endpoint, envelopes) => {
   var _a;
   const zip = new jszip();

package/dist/components/TemplateFieldStore.js

@@ -0,0 +1,23 @@
+import { c as createStore } from './index4.js';
+
+const templateFieldStores = {};
+const getTemplateFieldStore = (templateId) => templateFieldStores[templateId];
+const createTemplateFieldStore = (template) => {
+  let store = getTemplateFieldStore(template.id);
+  if (!store) {
+    console.log('Creating template field store for template', template.id);
+    store = createStore({});
+    templateFieldStores[template.id] = store;
+  }
+  else {
+    console.log('Resetting template field store for template', template.id);
+    console.trace('Stack');
+    store.reset();
+  }
+  template.fields.forEach(field => {
+    store.set(field.name, field);
+  });
+  return store;
+};
+
+export { createTemplateFieldStore as c, getTemplateFieldStore as g };

package/dist/components/TemplateStore.js

@@ -1,5 +1,6 @@
 import { c as createStore } from './index4.js';
 import { g as getTemplate, b as TemplateSenderTypes } from './VerdocsEndpoint.js';
+import { c as createTemplateFieldStore } from './TemplateFieldStore.js';
 
 const createTemplateStore = (templateId) => {
   const now = new Date().toISOString();
@@ -68,6 +69,7 @@ const getTemplateStore = async (endpoint, templateId, forceReload = false) => {
       store.state.isLoaded = true;
       store.state.isError = false;
       store.state.error = undefined;
+      createTemplateFieldStore(template);
     }
     catch (e) {
       console.error('[TEMPLATES] Error loading template', e);