@verdocs/web-sdk 2.3.12 → 2.3.13

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

@@ -5,7 +5,7 @@ import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
 import { u as updateField, c as createField } from './Fields.js';
 import { i as integerSequence } from './Primitives.js';
 import { b as getRoleIndex, r as renderDocumentField, f as updateCssTransform, h as defaultWidth, i as defaultHeight } from './utils.js';
-import { g as getTemplateStore, a as getRoleNames } from './TemplateStore.js';
+import { g as getTemplateStore, c as createTemplateFieldStore, b as getRoleNames } from './TemplateStore.js';
 import { S as SDKError } from './errors.js';
 import { d as defineCustomElement$7 } from './verdocs-button2.js';
 import { d as defineCustomElement$6 } from './verdocs-component-error2.js';
@@ -50,7 +50,8 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTM
     this.sdkError = createEvent(this, "sdkError", 7);
     this.templateUpdated = createEvent(this, "templateUpdated", 7);
     this.pageHeights = {};
-    this.store = null;
+    this.templateStore = null;
+    this.fieldStore = null;
     this.cachedPageInfo = {};
     this.endpoint = VerdocsEndpoint.getDefault();
     this.templateId = null;
@@ -72,9 +73,10 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTM
         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) || '';
+      this.templateStore = await getTemplateStore(this.endpoint, this.templateId, true);
+      this.fieldStore = createTemplateFieldStore(this.templateStore.state);
+      console.log(`[FIELDS] Loaded template ${this.templateId}`, this.templateStore.state, this.fieldStore);
+      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) || '';
       console.log('[FIELDS] Starting with role', this.selectedRoleName);
     }
     catch (e) {
@@ -95,8 +97,8 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTM
   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);
     }
   }
@@ -110,35 +112,39 @@ 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;
+  handleFieldSettingsChange(pageInfo, field, el, newFieldData) {
+    var _a, _b;
+    // handleFieldSettingsChange(pageInfo: any, field: any, roleIndex: number, el: any, newFieldData: any) {
     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);
+    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' });
+    (_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' });
     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;
-    }
+    this.fieldStore.set(field.name, field);
+    // 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 => this.handleFieldSettingsChange(pageInfo, field, roleIndex, el, e.detail.field));
+    el.addEventListener('settingsChanged', e => this.handleFieldSettingsChange(pageInfo, field, el, e.detail.field));
+    // 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);
@@ -146,17 +152,16 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTM
     el.setAttribute('name', field.name);
   }
   handlePageRendered(e) {
-    var _a;
     const pageInfo = e.detail;
     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;
@@ -192,10 +197,9 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTM
     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);
+    const field = this.fieldStore.get(name);
     console.log('Dropped field', name, field);
     if (!field) {
       console.log('[FIELDS] Unable to find field', name);
@@ -242,19 +246,19 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTM
     console.log('[FIELDS] Will update', name, 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);
+    // const roleIndex = getRoleIndex(getRoleNames(this.templateStore), field.role_name);
+    this.handleFieldSettingsChange(pageInfo, field, event.target, newFieldData);
+    // this.handleFieldSettingsChange(pageInfo, field, roleIndex, event.target, newFieldData);
     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.
@@ -266,7 +270,7 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTM
     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;
@@ -293,6 +297,7 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTM
         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.
@@ -359,11 +364,9 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTM
       }
       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];
-      }
+      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] });
     }
   }
@@ -374,10 +377,10 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTM
       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');
       } }, 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: () => {
@@ -391,13 +394,13 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTM
             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 style() { return verdocsTemplateFieldsCss; }
 }, [0, "verdocs-template-fields", {