Validation and bug fixes

Author: Reece Browne

src/main/resources/static/js/draggable-utils-form.js

@@ -180,7 +180,8 @@ const DraggableUtils = {
         window.latestId = input.getAttribute('id');
         window.populateEditForm(input.getAttribute('type'), {
           'id': input.getAttribute('id'), 'height': input.style.height, 'width': input.style.width,
-          'backgroundPalette': input.style.backgroundColor, 'textPalette': input.style.color, fontSize: parseInt(input.style.fontSize)
+          'backgroundPalette': input.getAttribute('backgroundColor'), 'textPalette': input.getAttribute('textColor'), fontSize: parseInt(input.style.fontSize),
+          'font': input.style.fontFamily, 'dropdownValues': input.getAttribute("data-value"), 'value': input.value, 'optionListValues': input.getAttribute("data-value")
         });
       });
       canvasContainer.appendChild(createdCanvas);
@@ -217,6 +218,12 @@ const DraggableUtils = {
       // rotationInput.addEventListener('input', this.handleRotationInputChange);
       //this.showRotationControls(canvasContainer);
       this.lastInteracted = canvasContainer;
+      window.latestId = element.getAttribute('id');
+      window.populateEditForm(element.getAttribute('type'), {
+        'id': element.getAttribute('id'), 'height': element.style.height, 'width': element.style.width,
+        'backgroundPalette': element.getAttribute('backgroundColor'), 'textPalette': element.getAttribute('textColor'), fontSize: parseInt(element.style.fontSize),
+        'font': element.style.fontFamily, 'dropdownValues': element.getAttribute("data-value"), 'value': element.value, 'optionListValues': element.getAttribute("data-value")
+      });
       resolve(canvasContainer);
     });
   },
@@ -682,18 +689,20 @@ const DraggableUtils = {
         const elementType = input.getAttribute('type');
         const fieldKey = input.getAttribute('name');
         const fieldStyle = input.getAttribute('style');
-        const fontMatch = fieldStyle.match(/font-size:\s*([\w-]+)/);
-        const fontSize = parseInt(fontMatch ? fontMatch[1] : '12px');
+        const fontSizeMatch = fieldStyle.match(/font-size:\s*([\w-]+)/);
+        const fontSize = parseInt(fontSizeMatch ? fontSizeMatch[1] : '12');
+        const fontFamilyMatch = fieldStyle.match(/font-family:\s*([^;]+)/);
+        const fontFamily = fontFamilyMatch ? fontFamilyMatch[1].trim().replace(/['"]/g, '') : 'Helvetica';
 
-        const font = await pdfDocModified.embedFont(PDFLib.StandardFonts.Helvetica);
+        const embeddedFont = await pdfDocModified.embedFont(PDFLib.StandardFonts[fontFamily]);
         const backgroundColor = rgbStringToPdfLib(input.style.backgroundColor) || PDFLib.rgb(1, 1, 1);
         const textColor = rgbStringToPdfLib(input.style.color) || PDFLib.rgb(0, 0, 0);
         const translatedPositions = this.rescaleForPage(
           page,
           draggableData,
           offsetWidth,
           offsetHeight,
-          font,
+          embeddedFont,
           fontSize,
           backgroundColor,
           textColor
@@ -706,41 +715,46 @@ const DraggableUtils = {
           const [r, g, b] = match.map((num) => parseInt(num) / 255);
           return PDFLib.rgb(r, g, b);
         }
-
-        if (elementType === 'checkbox') {
-          // Handle Checkboxes
-          const field = form.createCheckBox(fieldKey);
-
-          field.addToPage(page, translatedPositions);
-        } else if (elementType === 'radio') {
-          // Handle Radio Buttons
-          const buttonValue = input.getAttribute('buttonValue');
-          var radioGroup = radioGroups.get(fieldKey);
-          if (!radioGroup) {
-            radioGroup = form.createRadioGroup(fieldKey);
-            radioGroups.set(fieldKey, radioGroup);
+        try {
+          if (elementType === 'checkbox') {
+            // Handle Checkboxes
+            const field = form.createCheckBox(fieldKey);
+
+            field.addToPage(page, translatedPositions);
+          } else if (elementType === 'radio') {
+            // Handle Radio Buttons
+            const buttonValue = input.getAttribute('buttonValue');
+            var radioGroup = radioGroups.get(fieldKey);
+            if (!radioGroup) {
+              radioGroup = form.createRadioGroup(fieldKey);
+              radioGroups.set(fieldKey, radioGroup);
+            }
+            radioGroup.addOptionToPage(buttonValue, page, translatedPositions);
+          } else if (elementType === 'dropdown') {
+            // Handle Dropdowns
+            const fieldValues = input.getAttribute('data-value')?.split(',').map(v => v.trim());
+            const field = form.createDropdown(fieldKey);
+            field.addOptions(fieldValues);
+            field.addToPage(page, translatedPositions);
+            field.setFontSize(fontSize);
+            field.updateAppearances(embeddedFont);
+          } else if (elementType === 'optionList') {
+            // Handle Multi-Select Option List
+            const fieldValues = JSON.parse(input.getAttribute('values'));
+            const field = form.createOptionList(fieldKey);
+            field.addOptions(fieldValues);
+            field.addToPage(page, translatedPositions);
+            field.updateAppearances(embeddedFont);
+            field.setFontSize(fontSize);
+          } else if (elementType === 'textarea' || elementType === 'text') {
+            // Handle Text Fields (Single-line or Multi-line)
+            const field = form.createTextField(fieldKey);
+            field.addToPage(page, translatedPositions);
           }
-          radioGroup.addOptionToPage(buttonValue, page, translatedPositions);
-        } else if (elementType === 'dropdown') {
-          // Handle Dropdowns
-          const fieldValues = JSON.parse(input.getAttribute('values') || '[]');
-          const field = form.createDropdown(fieldKey);
-          field.addOptions(fieldValues);
-          field.addToPage(page, translatedPositions);
-          field.updateAppearances(font);
-          field.setFontSize(fontSize);
-        } else if (elementType === 'optionList') {
-          // Handle Multi-Select Option List
-          const fieldValues = JSON.parse(input.getAttribute('values'));
-          const field = form.createOptionList(fieldKey);
-          field.addOptions(fieldValues);
-          field.addToPage(page, translatedPositions);
-          field.updateAppearances(font);
-          field.setFontSize(fontSize);
-        } else if (elementType === 'textarea' || elementType === 'text') {
-          // Handle Text Fields (Single-line or Multi-line)
-          const field = form.createTextField(fieldKey);
-          field.addToPage(page, translatedPositions);
+        } catch (err) {
+          alert(err);
+          this.loadPageContents();
+          return;
         }
       }
     }

src/main/resources/static/js/pages/forms.js

@@ -26,7 +26,7 @@ const dropdownConfig = {
   fields: [
     { id: 'id', label: 'Dropdown ID', type: 'text', placeholder: 'Enter ID' },
     { id: 'dropdownValues', label: 'Dropdown Options', type: 'text', placeholder: 'Comma-separated values' },
-    { id: 'font', label: 'Font', type: 'select', options: ['Arial', 'Verdana', 'Times New Roman'] },
+    { id: 'font', label: 'Font', type: 'select', options: ['Courier', 'Helvetica', 'TimesRoman'] },
     { id: 'fontSize', label: 'Font Size', type: 'number', value: '12' },
     { id: 'backgroundPalette', label: 'Background Color', type: 'color', value: '#ffffff' },
     { id: 'textPalette', label: 'Text Color', type: 'color', value: '#000000' }
@@ -119,7 +119,7 @@ document.querySelector('input[name=pdf-upload]').addEventListener('change', asyn
 
 document.addEventListener('DOMContentLoaded', () => {
   document.querySelectorAll('.show-on-file-selected').forEach((el) => {
-    //el.style.cssText = 'display:none !important';
+    el.style.cssText = 'display:none !important';
   });
   document.addEventListener('keydown', (e) => {
     if (e.key === 'Delete') {
@@ -160,31 +160,54 @@ window.createForm = (configString) => {
         input.appendChild(option);
       });
     } else if (field.type === 'color') {
-      input = document.createElement('input');
+      // Create label
+      const label = document.createElement('label');
+      label.classList.add('form-check-label');
+      label.setAttribute('for', field.id);
+      label.textContent = field.label;
+
+      // Create color input
+      const input = document.createElement('input');
       input.classList.add('palette');
       input.setAttribute('type', 'color');
       input.setAttribute('id', field.id);
       input.setAttribute('name', field.id);
       input.setAttribute('value', field.value || '#000000');
 
+      // Create color picker button
       const paletteContainer = document.createElement('button');
       paletteContainer.classList.add('colour-picker', 'btn-primary');
       paletteContainer.setAttribute('id', `${field.id}Container`);
       paletteContainer.setAttribute('th:title', '#{redact.colourPicker}');
 
+      // Create label for color picker
       const paletteLabel = document.createElement('label');
       paletteLabel.setAttribute('id', `${field.id}Label`);
       paletteLabel.setAttribute('for', field.id);
       paletteLabel.classList.add('material-symbols-rounded', 'palette-color', 'text-center');
       paletteLabel.style.setProperty('--palette-color', field.value || '#000000');
       paletteLabel.textContent = 'palette';
 
+      // Append input to label
       paletteLabel.appendChild(input);
       paletteContainer.appendChild(paletteLabel);
-      formContainer.appendChild(label);
-      formContainer.appendChild(paletteContainer);
+
+      // Find or create the color group flex container
+      let colorGroup = formContainer.querySelector('.color-group');
+      if (!colorGroup) {
+        colorGroup = document.createElement('div');
+        colorGroup.classList.add('color-group');
+        colorGroup.style.display = 'flex';
+        colorGroup.style.gap = '10px'; // Space between color inputs
+        colorGroup.style.marginTop = '10px'; // Space above first color input
+        formContainer.appendChild(colorGroup);
+      }
+      colorGroup.appendChild(label);
+      colorGroup.appendChild(paletteContainer);
+
       return;
-    } else {
+    }
+    else {
       input = document.createElement('input');
       input.classList.add('form-control');
       input.setAttribute('type', field.type);
@@ -225,7 +248,6 @@ function validateUniqueId(id) {
 function attachDynamicListeners(fields) {
   fields.forEach(field => {
     document.addEventListener("change", function (event) {
-      console.log("hit");
       if (event.target && event.target.id === field.id) {
         if (field.type === 'color') {
           document.getElementById(`${field.id}Label`).style.setProperty('--palette-color', event.target.value);
@@ -235,27 +257,32 @@ function attachDynamicListeners(fields) {
           if (field.type === 'color') {
             if (field.id.toLowerCase().includes('background')) {
               targetElement.style.background = event.target.value;
+              targetElement.setAttribute('backgroundColor', event.target.value)
             } else {
               targetElement.style.color = event.target.value;
+              targetElement.setAttribute('textColor', event.target.value)
             }
           } else if (field.id === 'fontSize') {
             targetElement.style.fontSize = event.target.value + "px";
+          } else if (field.id === 'font') {
+            targetElement.style.fontFamily = event.target.value;
           } else if (field.id === 'value') {
             targetElement.value = event.target.value;
           } else if (field.id === 'id') {
             targetElement.id = event.target.value;
+            targetElement.name = event.target.value;
           } else if (field.id === 'dropdownValues') {
-            while (targetElement.firstChild) {
+            while (targetElement?.firstChild) {
               targetElement.removeChild(targetElement.firstChild);
             }
-
             const values = event.target.value.split(',').map(v => v.trim());
             values.forEach(value => {
               const option = document.createElement("option");
               option.value = value;
               option.textContent = value;
               targetElement.appendChild(option);
             });
+            targetElement.setAttribute("data-value", values)
           }
         }
       }
@@ -279,6 +306,8 @@ function addDraggableFromForm(config) {
   element.setAttribute('id', id);
   element.setAttribute('name', id);
   element.setAttribute('type', config.type);
+  element.style.fontFamily = 'Helvetica'
+  element.style.fontSize = '12';
   element.classList.add('form-input')
 
   if (config.styles) {
@@ -288,7 +317,6 @@ function addDraggableFromForm(config) {
   }
 
   DraggableUtils.addDraggableElement(element, true);
-  showTab(0);
 }
 
 document.getElementById('save').addEventListener('click', function () {
@@ -332,21 +360,14 @@ document.getElementById('save').addEventListener('click', function () {
   });
 });
 
-const showTab = (index) => {
-  const tabs = document.querySelectorAll(".tab-container");
-  tabs.forEach((tab, i) => {
-    // tab.style.display = i === index ? "block" : "none";
-  });
-}
+
 document.addEventListener("DOMContentLoaded", function () {
-  const tabs = document.querySelectorAll(".tab-container");
   const addNewFormContainer = document.getElementById("addNewForm");
   const formOptionsContainer = document.getElementById("formOptions");
   function createDropdown() {
     const dropdown = document.createElement("select");
     dropdown.classList.add("form-control");
     dropdown.id = "formTypeSelector";
-
     const defaultOption = document.createElement("option");
     defaultOption.textContent = "Select Form Type";
     defaultOption.value = "";
@@ -360,6 +381,9 @@ document.addEventListener("DOMContentLoaded", function () {
     });
 
     addNewFormContainer.prepend(dropdown);
+    dropdown.addEventListener('change', async (event) => {
+      // populateEditForm(event.target.value, { id: generateUniqueId(event.target.value) });
+    })
   }
 
   window.populateEditForm = (type, existingValues) => {
@@ -370,16 +394,14 @@ document.addEventListener("DOMContentLoaded", function () {
       const input = document.getElementById(key);
       if (input) {
         input.value = existingValues[key];
+        if (input.type === "color") {
+          document.getElementById(`${input.id}Label`).style.setProperty('--palette-color', existingValues[key]);
+        }
       }
+
     });
 
-    showTab(0);
   }
 
-  document.getElementById("save").addEventListener("click", function () {
-    showTab(0);
-  });
-
   createDropdown();
-  showTab(1);
 });

src/main/resources/templates/forms.html

@@ -41,17 +41,14 @@
               th:replace="~{fragments/common :: fileSelector(name='pdf-upload', multipleInputsForSingleRequest=false, disableMultipleFiles=true, accept='application/pdf')}">
             </div>
             <script type="module" th:src="@{'/pdfjs-legacy/pdf.mjs'}"></script>
-            <div class="tab-group show-on-file-selected">
-              <div class="tab-container" th:data-title="#{add-elements.editForm}">
-                <div id="editForm"></div>
-                <div id="formOptions"></div>
-              </div>
-              <div class="tab-container" th:data-title="#{add-elements.addNew}">
-                <div id="addNewForm"></div>
-                <div class="margin-auto-parent">
-                  <button id="save" class="btn btn-outline-success mt-2 margin-center" th:text="#{sign.add}"></button>
+            <div class="show-on-file-selected">
+              <div style="display: flex;">
+                <div class="margin-auto-parent" style="margin-bottom: 1rem;margin-top: 0.5rem;">
+                  <div style="margin-right: 2rem; width:100%" id="addNewForm"></div>
+                  <button id="save" class="btn btn-outline-success" th:text="#{sign.add}"></button>
                 </div>
               </div>
+              <div id="formOptions"></div>
             </div>
             <!-- draggables box -->
             <div class="draggable-buttons-box ignore-rtl">