@gov-cy/govcy-express-services 1.0.0-alpha.6 → 1.0.0-alpha.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gov-cy/govcy-express-services",
-  "version": "1.0.0-alpha.6",
+  "version": "1.0.0-alpha.7",
   "description": "An Express-based system that dynamically renders services using @gov-cy/govcy-frontend-renderer and posts data to a submission API.",
   "author": "DMRID - DSF Team",
   "license": "MIT",

package/src/index.mjs

@@ -129,6 +129,14 @@ export default function initializeGovCyExpressService(){
 
   // 📝 -- ROUTE: Serve manifest.json dynamically for each site
   app.get('/:siteId/manifest.json', serviceConfigDataMiddleware, govcyManifestHandler());
+
+  // 🗃️ -- ROUTE: Handle POST requests for file uploads for a page. 
+  app.post('/apis/:siteId/:pageUrl/upload', 
+    serviceConfigDataMiddleware, 
+    requireAuth, // UNCOMMENT 
+    naturalPersonPolicy, // UNCOMMENT 
+    govcyServiceEligibilityHandler(true), // UNCOMMENT 
+    govcyUploadMiddleware);
   
   // 🏠 -- ROUTE: Handle route with only siteId (/:siteId or /:siteId/)
   app.get('/:siteId', serviceConfigDataMiddleware, requireAuth, naturalPersonPolicy, govcyServiceEligibilityHandler(true),govcyLoadSubmissionData(),govcyPageHandler(), renderGovcyPage());
@@ -148,14 +156,6 @@ export default function initializeGovCyExpressService(){
   // 📥 -- ROUTE: Handle POST requests for review page. The `submit` action
   app.post('/:siteId/review', serviceConfigDataMiddleware, requireAuth, naturalPersonPolicy, govcyServiceEligibilityHandler(), govcyReviewPostHandler());
   
-  // 🗃️ -- ROUTE: Handle POST requests for file uploads for a page. 
-  app.post('/:siteId/:pageUrl/upload', 
-    serviceConfigDataMiddleware, 
-    requireAuth, // UNCOMMENT 
-    naturalPersonPolicy, // UNCOMMENT 
-    govcyServiceEligibilityHandler(true), // UNCOMMENT 
-    govcyUploadMiddleware);
-  
   // 👀📥 -- ROUTE: Handle POST requests (Form Submissions) based on siteId and pageUrl, using govcyFormsPostHandler middleware
   app.post('/:siteId/:pageUrl', serviceConfigDataMiddleware, requireAuth, naturalPersonPolicy, govcyServiceEligibilityHandler(true), govcyFormsPostHandler());
   

package/src/middleware/govcyFormsPostHandler.mjs

@@ -43,7 +43,7 @@ export function govcyFormsPostHandler() {
             }
     
             // const formData = req.body; // Submitted data
-            const formData = getFormData(formElement.params.elements, req.body); // Submitted data
+            const formData = getFormData(formElement.params.elements, req.body, req.session, siteId, pageUrl); // Submitted data
 
             // ☑️ Start validation from top-level form elements
             const validationErrors = validateFormElements(formElement.params.elements, formData);

package/src/middleware/govcyPageHandler.mjs

@@ -53,6 +53,9 @@ export function govcyPageHandler() {
             element.params.method = "POST";
             // ➕ Add CSRF token
             element.params.elements.push(govcyResources.csrfTokenInput(req.csrfToken()));
+            // // ➕ Add siteId and pageUrl to form data
+            // element.params.elements.push(govcyResources.siteAndPageInput(siteId, pageUrl, req.globalLang));
+            // ➕ Add govcyFormsJs script to the form
             element.params.elements.push(govcyResources.staticResources.elements["govcyFormsJs"]);
 
             // 🔍 Find the first button with `prototypeNavigate`
@@ -88,7 +91,7 @@ export function govcyPageHandler() {
             }
             //--------- End of Handle Validation Errors ---------
             
-            populateFormData(element.params.elements, theData,validationErrors);
+            populateFormData(element.params.elements, theData,validationErrors, req.session, siteId, pageUrl, req.globalLang);
             // if there are validation errors, add an error summary
             if (validationErrors?.errorSummary?.length > 0) {
               element.params.elements.unshift(govcyResources.errorSummary(validationErrors.errorSummary));

package/src/public/js/govcyFiles.js

@@ -1,16 +1,27 @@
 // 🔍 Select all file inputs that have the .govcy-file-upload class
 const fileInputs = document.querySelectorAll('input[type="file"].govcy-file-upload');
 
-// 🔐 Get the CSRF token from a hidden input field (generated by your backend)
-const csrfToken = document.querySelector('input[type="hidden"][name="_csrf"]')?.value;
-
-// 🔧 Define siteId and pageUrl (you can dynamically extract these later)
-const siteId = 'test';
-const pageUrl = 'data-entry-all';
-
 // 🔁 Loop over each file input and attach a change event listener
 fileInputs.forEach(input => {
   input.addEventListener('change', async (event) => {
+    const messages = {
+      "uploadSuccesful": {
+        "el": "Το αρχείο ανεβαστηκε",
+        "en": "File uploaded successfully",
+        "tr": "File uploaded successfully"
+      },
+      "uploadFailed": {
+        "el": "Αποτυχια ανεβασης",
+        "en": "File upload failed",
+        "tr": "File upload failed"
+      }
+    };
+    // 🔐 Get the CSRF token from a hidden input field (generated by your backend)
+    const csrfToken = document.querySelector('input[type="hidden"][name="_csrf"]')?.value;
+    // 🔧 Define siteId and pageUrl (you can dynamically extract these later)
+    const siteId = window._govcySiteId || "";
+    const pageUrl = window._govcyPageUrl || "";
+    const lang = window._govcyLang || "el";
     // 📦 Grab the selected file
     const file = event.target.files[0];
     const elementName = input.name; // Form field's `name` attribute
@@ -24,7 +35,7 @@ fileInputs.forEach(input => {
 
     try {
       // 🚀 Send file to the backend upload API
-      const response = await axios.post(`/${siteId}/${pageUrl}/upload`, formData, {
+      const response = await axios.post(`/apis/${siteId}/${pageUrl}/upload`, formData, {
         headers: {
           'X-CSRF-Token': csrfToken // 🔐 Pass CSRF token in custom header
         }
@@ -36,11 +47,106 @@ fileInputs.forEach(input => {
       document.querySelector(`[name="${elementName}Attachment[fileId]"`).value = fileId;
       document.querySelector(`[name="${elementName}Attachment[sha256]"`).value = sha256;
 
-      alert('✅ File uploaded successfully');
+      // ✅ Success
+      // Create an instance of GovcyFrontendRendererBrowser
+      const renderer = new GovcyFrontendRendererBrowser();
+      // Define the input data
+        const inputData =
+        {
+          "site": {
+            "lang": lang
+          }
+        };
+
+        const fileInputMap = window._govcyFileInputs || {};
+        let fileElement = fileInputMap[elementName];
+        fileElement.element = "fileView";
+        fileElement.params.fileId = fileId;
+        fileElement.params.sha256 = sha256;
+        fileElement.params.visuallyHiddenText = fileElement.params.label;
+        fileElement.params.error = null;
+        // TODO: Also need to set the `view` and `download` URLs 
+        fileElement.params.viewHref = "#viewHref";
+        fileElement.params.deleteHref  = "#deleteHref";
+        // Construct the JSONTemplate
+        const JSONTemplate = {
+          "elements": [fileElement]
+        };
+        
+        //render HTML into string
+        let renderedHtml = renderer.renderFromJSON(JSONTemplate,inputData);
+        // look for element with id `${elementName}-outer-control`
+        // if not found look for element with id `${elementName}-input-control`
+        // if not found look for element with id `${elementName}-view-control`
+        var outerElement = document.getElementById(`${elementName}-outer-control`) 
+        || document.getElementById(`${elementName}-input-control`) 
+        || document.getElementById(`${elementName}-view-control`);
+
+        if (outerElement) {
+          //remove all classes from outerElement
+          outerElement.className = "";
+          //set the id of the outerElement to `${elementName}-outer-control`
+          outerElement.id = `${elementName}-outer-control`;
+          //update DOM and initialize the JS components
+          renderer.updateDOMAndInitialize(`${elementName}-outer-control`, renderedHtml);
+        }
+        // ✅ Update ARIA live region with success message
+        const statusRegion = document.getElementById('_govcy-upload-status');
+        if (statusRegion) {
+          statusRegion.textContent = messages.uploadSuccesful[lang];
+          setTimeout(() => {
+            statusRegion.textContent = '';
+          }, 10000);
+        }
+      // alert('✅ File uploaded successfully');
 
     } catch (err) {
-      // ⚠️ Show an error message if upload fails
-      alert('❌ Upload failed: ' + (err.response?.data?.error || err.message));
+      // Create an instance of GovcyFrontendRendererBrowser
+      const renderer = new GovcyFrontendRendererBrowser();
+      const lang = window._govcyLang || "el";
+      // Define the input data
+      const inputData =
+      {
+        "site": {
+          "lang": lang
+        }
+      };
+      const fileInputMap = window._govcyFileInputs || {};
+      let fileElement = fileInputMap[elementName];
+      fileElement.element = "fileInput";
+      fileElement.params.fileId = "";
+      fileElement.params.sha256 = ""
+      fileElement.params.error = messages.uploadFailed;
+
+      // Construct the JSONTemplate
+      const JSONTemplate = {
+        "elements": [fileElement]
+      };
+      //render HTML into string
+      let renderedHtml = renderer.renderFromJSON(JSONTemplate,inputData);
+      var outerElement = document.getElementById(`${elementName}-outer-control`) 
+        || document.getElementById(`${elementName}-input-control`) 
+        || document.getElementById(`${elementName}-view-control`);
+
+      if (outerElement) {
+        //remove all classes from outerElement
+        outerElement.className = "";
+        //set the id of the outerElement to `${elementName}-outer-control`
+        outerElement.id = `${elementName}-outer-control`;
+        //update DOM and initialize the JS components
+        renderer.updateDOMAndInitialize(`${elementName}-outer-control`, renderedHtml);
+        //TODO: Kamran need to figure a way to re register the DOM event on change
+      }
+      // ✅ Update ARIA live region with success message
+      const statusRegion = document.getElementById('_govcy-upload-error');
+      if (statusRegion) {
+        statusRegion.textContent = messages.uploadFailed[lang];
+        setTimeout(() => {
+          statusRegion.textContent = '';
+        }, 10000);
+      }
+      // // ⚠️ Show an error message if upload fails
+      // alert('❌ Upload failed: ' + (err.response?.data?.error || err.message));
     }
   });
 });

package/src/resources/govcyResources.mjs

@@ -113,9 +113,9 @@ export const staticResources = {
             element: "htmlElement",
             params: {
                 text: {
-                    en: `<script src="https://cdn.jsdelivr.net/npm/axios@1.6.2/dist/axios.min.js"></script><script src="/js/govcyForms.js"></script><script src="/js/govcyFiles.js"></script>`,
-                    el: `<script src="https://cdn.jsdelivr.net/npm/axios@1.6.2/dist/axios.min.js"></script><script src="/js/govcyForms.js"></script><script src="/js/govcyFiles.js"></script>`,
-                    tr: `<script src="https://cdn.jsdelivr.net/npm/axios@1.6.2/dist/axios.min.js"></script><script src="/js/govcyForms.js"></script><script src="/js/govcyFiles.js"></script>`
+                    en: `<script src="https://cdn.jsdelivr.net/npm/axios@1.6.2/dist/axios.min.js"></script><script src="https://cdn.jsdelivr.net/gh/gov-cy/govcy-frontend-renderer@v1/dist/govcyCompiledTemplates.browser.js"></script><script src="https://cdn.jsdelivr.net/gh/gov-cy/govcy-frontend-renderer@v1/dist/govcyFrontendRenderer.browser.js"></script><script src="/js/govcyForms.js"></script><script src="/js/govcyFiles.js"></script>`,
+                    el: `<script src="https://cdn.jsdelivr.net/npm/axios@1.6.2/dist/axios.min.js"></script><script src="https://cdn.jsdelivr.net/gh/gov-cy/govcy-frontend-renderer@v1/dist/govcyCompiledTemplates.browser.js"></script><script src="https://cdn.jsdelivr.net/gh/gov-cy/govcy-frontend-renderer@v1/dist/govcyFrontendRenderer.browser.js"></script><script src="/js/govcyForms.js"></script><script src="/js/govcyFiles.js"></script>`,
+                    tr: `<script src="https://cdn.jsdelivr.net/npm/axios@1.6.2/dist/axios.min.js"></script><script src="https://cdn.jsdelivr.net/gh/gov-cy/govcy-frontend-renderer@v1/dist/govcyCompiledTemplates.browser.js"></script><script src="https://cdn.jsdelivr.net/gh/gov-cy/govcy-frontend-renderer@v1/dist/govcyFrontendRenderer.browser.js"></script><script src="/js/govcyForms.js"></script><script src="/js/govcyFiles.js"></script>`
                 }
             }
         },
@@ -192,6 +192,27 @@ export function csrfTokenInput(csrfToken) {
     };
 }
 
+/**
+ * Get the site and page input elements 
+ * @param {string} siteId The site id
+ * @param {string} pageUrl The page url
+ * @param {string} lang The page language
+ * @returns {object} htmlElement with the site and page inputs
+ */
+export function siteAndPageInput(siteId, pageUrl, lang = "el") {
+    const siteAndPageInputs = `<input type="hidden" name="_siteId" value="${siteId}"><input type="hidden" name="_pageUrl" value="${pageUrl}"><input type="hidden" name="_lang" value="${lang}">`;
+    return {
+        element: "htmlElement",
+        params: {
+            text: {
+                en: siteAndPageInputs,
+                el: siteAndPageInputs,
+                tr: siteAndPageInputs
+            }
+        }
+    };
+}
+
 /**
  * Error page template
  * @param {object} title the title text element 

package/src/utils/govcyApiDetection.mjs

@@ -10,7 +10,7 @@
 export function isApiRequest(req) {
   const acceptJson = (req.headers?.accept || "").toLowerCase().includes("application/json");
 
-  const apiUrlPattern = /^\/[^/]+\/[^/]+\/(upload|download)$/;
+  const apiUrlPattern =  /^\/apis\/[^/]+\/[^/]+\/(upload|download)$/;
   const isStructuredApiUrl = apiUrlPattern.test(req.originalUrl || req.url);
 
   return acceptJson || isStructuredApiUrl;

package/src/utils/govcyConstants.mjs

@@ -1,7 +1,7 @@
 /**
  * Shared constants for allowed form elements.
  */
-export const ALLOWED_FORM_ELEMENTS = ["textInput", "textArea", "select", "radios", "checkboxes", "datePicker", "dateInput"];
+export const ALLOWED_FORM_ELEMENTS = ["textInput", "textArea", "select", "radios", "checkboxes", "datePicker", "dateInput","fileInput","fileView"];
 export const ALLOWED_FILE_MIME_TYPES = ['application/pdf', 'image/jpeg', 'image/png'];
 export const ALLOWED_FILE_EXTENSIONS = ['pdf', 'jpg', 'jpeg', 'png'];
 export const ALLOWED_FILE_SIZE_MB = 5; // Maximum file size in MB

package/src/utils/govcyDataLayer.mjs

@@ -98,6 +98,14 @@ export function storePageData(store, siteId, pageUrl, formData) {
 
     store.siteData[siteId].inputData[pageUrl]["formData"] = formData;
 }
+
+export function storePageDataElement(store, siteId, pageUrl, elementName, value) {
+    // Ensure session structure is initialized
+    initializeSiteData(store, siteId, pageUrl);
+    
+    // Store the element value
+    store.siteData[siteId].inputData[pageUrl].formData[elementName] = value;
+}
 /**
  * Stores the page's input data in the data layer
  *  * 

package/src/utils/govcyFormHandling.mjs

@@ -5,16 +5,22 @@
  * and show error summary when there are validation errors.
  */
 import { ALLOWED_FORM_ELEMENTS } from "./govcyConstants.mjs";
+import * as dataLayer from "./govcyDataLayer.mjs";
 
 
 /**
  * Helper function to populate form data with session data
  * @param {Array} formElements The form elements  
  * @param {*} theData The data either from session or request
+ * @param {Object} validationErrors The validation errors
+ * @param {Object} store The session store
+ * @param {string} siteId The site ID
+ * @param {string} pageUrl The page URL
+ * @param {string} lang The language
  */
-export function populateFormData(formElements, theData, validationErrors) {
+export function populateFormData(formElements, theData, validationErrors, store = {}, siteId = "", pageUrl = "", lang = "el") {
     const inputElements = ALLOWED_FORM_ELEMENTS;
-
+    let fileInputElements = {};
     // Recursively populate form data with session data
     formElements.forEach(element => {
         if (inputElements.includes(element.element)) {
@@ -53,6 +59,24 @@ export function populateFormData(formElements, theData, validationErrors) {
                     // Invalid format (not matching D/M/YYYY or DD/MM/YYYY)
                     element.params.value = "";
                 }
+            } else if (element.element === "fileInput") {
+                // For fileInput, we change the element.element to "fileView" and set the 
+                // fileId and sha256 from the session store
+                const fileData = dataLayer.getFormDataValue(store, siteId, pageUrl, fieldName + "Attachment");
+                // TODO: Ask Andreas how to handle empty file inputs
+                if (fileData) {
+                    element.element = "fileView";
+                    element.params.fileId = fileData.fileId;
+                    element.params.sha256 = fileData.sha256;
+                    element.params.visuallyHiddenText = element.params.label;
+                    // TODO: Also need to set the `view` and `download` URLs 
+                    element.params.viewHref = "#viewHref";
+                    element.params.deleteHref  = "#deleteHref";
+                } else {
+                    // TODO: Ask Andreas how to handle empty file inputs
+                    element.params.value = "";
+                }       
+                fileInputElements[fieldName] = element;
             // Handle all other input elements (textInput, checkboxes, radios, etc.)
             } else {
                 element.params.value = theData[fieldName] || "";
@@ -88,6 +112,29 @@ export function populateFormData(formElements, theData, validationErrors) {
             });
         }
     });
+    // add file input elements's definition in js object
+    if (fileInputElements != {}) {
+        const scriptTag = `
+        <script type="text/javascript">
+            window._govcyFileInputs = ${JSON.stringify(fileInputElements)};
+            window._govcySiteId = "${siteId}";
+            window._govcyPageUrl = "${pageUrl}";
+            window._govcyLang = "${lang}";
+        </script>
+        <div id="_govcy-upload-status" class="govcy-visually-hidden" role="status" aria-live="polite"></div>
+        <div id="_govcy-upload-error" class="govcy-visually-hidden" role="alert" aria-live="assertive"></div>
+        `.trim();
+        formElements.push({
+            element: 'htmlElement',
+            params: {
+                text: {
+                    en: scriptTag,
+                    el: scriptTag,
+                    tr: scriptTag
+                }
+            }
+        });
+    }
 }
 
 
@@ -96,9 +143,12 @@ export function populateFormData(formElements, theData, validationErrors) {
  * 
  * @param {Array} elements - The form elements (including conditional ones).
  * @param {Object} formData - The submitted form data.
+ * @param {Object} store - The session store .
+ * @param {string} siteId - The site ID .
+ * @param {string} pageUrl - The page URL .
  * @returns {Object} filteredData - The filtered form data.
  */
-export function getFormData(elements, formData) {
+export function getFormData(elements, formData, store = {}, siteId = "", pageUrl = "") {
     const filteredData = {};
     elements.forEach(element => {
         const { name } = element.params || {};
@@ -130,6 +180,17 @@ export function getFormData(elements, formData) {
                 filteredData[`${name}_day`] = day !== undefined && day !== null ? day : "";
                 filteredData[`${name}_month`] = month !== undefined && month !== null ? month : "";
                 filteredData[`${name}_year`] = year !== undefined && year !== null ? year : "";
+            // handle fileInput
+            } else if (element.element === "fileInput") {
+                // fileInput elements are already stored in the store when it was uploaded
+                // so we just need to check if the file exists in the dataLayer in the store and add it the filteredData
+                const fileData = dataLayer.getFormDataValue(store, siteId, pageUrl, name + "Attachment");
+                if (fileData) {
+                    filteredData[name + "Attachment"] = fileData;
+                } else {
+                    //TODO: Ask Andreas how to handle empty file inputs
+                    filteredData[name + "Attachment"] = ""; // or handle as needed
+                }
             // Handle other elements (e.g., textInput, textArea, datePicker)
             } else {
                 filteredData[name] = formData[name] !== undefined && formData[name] !== null ? formData[name] : "";

package/src/utils/govcyHandleFiles.mjs

@@ -174,6 +174,11 @@ export async function handleFileUpload({ service, store, siteId, pageUrl, elemen
     }
 
     // ✅ Success
+    // Store the file metadata in the session store
+    dataLayer.storePageDataElement(store, siteId, pageUrl, elementName+"Attachment", {
+      sha256: response.Data.sha256,
+      fileId: response.Data.fileId,
+    });
     logger.debug("File upload successful", response.Data);
     logger.info(`File uploaded successfully for element ${elementName} on page ${pageUrl} for site ${siteId}`);
     return {

package/src/utils/govcyValidator.mjs

@@ -263,6 +263,8 @@ export function validateFormElements(elements, formData, pageUrl) {
         formData[`${field.params.name}_day`]]
           .filter(Boolean) // Remove empty values
           .join("-") // Join remaining parts
+        : (field.element === "fileInput") // Handle fileInput
+          ? formData[`${field.params.name}Attachment`] || ""
         : formData[field.params.name] || ""; // Get submitted value
 
       //Autocheck: check for "checkboxes", "radios", "select" if `fieldValue` is one of the `field.params.items
@@ -310,6 +312,8 @@ export function validateFormElements(elements, formData, pageUrl) {
                   formData[`${conditionalElement.params.name}_day`]]
                     .filter(Boolean) // Remove empty values
                     .join("-") // Join remaining parts
+                  : (conditionalElement.element === "fileInput") // Handle fileInput
+                      ? formData[`${conditionalElement.params.name}Attachment`] || ""
                   : formData[conditionalElement.params.name] || ""; // Get submitted value
 
                 //Autocheck: check for "checkboxes", "radios", "select" if `fieldValue` is one of the `field.params.items`