Update commissions variable schema to allow any status string, commission sync handler usage

Author: faisalnjs

README.md

@@ -194,7 +194,7 @@ Session Example:
     amount: 1000, // Commission amount as a number, or null if not applicable. Defaults to null
     currency: 'USD', // Currency code for the commission amount as a string. Defaults to 'USD'
     date: '2023-10-01', // Date of the commission in any valid date/datetime format. Defaults to null
-    status: 'in-progress', // Status of the commission ('completed', 'in-progress', 'on-hold', 'cancelled')
+    status: 'On Hold', // Status of the commission as a string (e.g., 'Completed', 'In Progress', 'On Hold', 'Cancelled')
     fields: { // Custom fields associated with the commission
       'id': 'value' // Key-value pairs for custom fields
     },

frontend/pages/foot.ejs

@@ -2,6 +2,9 @@
         <p class="fixed">© <%= new Date().getFullYear() %> CommTrackr</p>
         <p class="fixed2">Changes saved</p>
     </main>
+    <script>
+        const appPath = '<%= tenant.domain %><%= tenant.path %>';
+    </script>
     <script src="<%= tenant.domain %><%= tenant.path %>/scripts.js" type="module"></script>
 </body>
 

frontend/pages/user.ejs

@@ -12,10 +12,13 @@
 	<a class="button" href="<%= tenant.domain %><%= tenant.path %>/create">New Commission</a>
 </div>
 <div class="commissions">
+	<div id="sync"><svg xmlns="http://www.w3.org/2000/svg" width="23" height="23" viewBox="0 0 23 23" fill="none">
+			<path d="M18.5949 5.16663C16.8618 3.32009 14.3989 2.16663 11.6666 2.16663C6.41992 2.16663 2.16663 6.41992 2.16663 11.6666C2.16663 16.9133 6.41992 21.1666 11.6666 21.1666C14.3989 21.1666 16.8618 20.0132 18.5949 18.1666M17.3236 7.98035L20.9804 7.98035L20.9804 4.3235" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
+		</svg> Sync</div>
 	<% session[vars.commissions].forEach(commission => { %>
 	<div class="commission">
 		<h2><%= commission.id %></h2>
-		<p><%= commission.status.replaceAll('-', ' ').replace(/\w\S*/g, function(txt) { return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase() }) %></p>
+		<p><%= commission.status %></p>
 		<a class="button" href="<%= tenant.domain %><%= tenant.path %>/<%= commission.id %>"><%= commission.locked ? 'View' : 'Edit' %></a>
 	</div>
 	<% }) %>

frontend/public/scripts.js

@@ -1,3 +1,5 @@
+if (!appPath) document.body.innerHTML = 'Error: appPath is not defined';
+
 document.querySelectorAll('.button[href]').forEach(button => button.addEventListener('click', function (event) {
     event.preventDefault();
     anim_out();
@@ -10,6 +12,7 @@ document.getElementById('back')?.addEventListener('click', back);
 document.getElementById('next')?.addEventListener('click', next);
 document.getElementById('start')?.addEventListener('click', start);
 document.getElementById('create')?.addEventListener('click', create);
+document.getElementById('sync')?.addEventListener('click', sync);
 
 function anim_in() {
     document.querySelector('main').classList.remove('out');
@@ -134,7 +137,6 @@ function next() {
     } else {
         document.getElementById('back')?.classList.remove('hidden');
     };
-    // focus first input of the new step
     const newField = document.querySelector(`.inputField[step="${step}"]`);
     if (newField) {
         const input = newField.querySelector('input, textarea, select');
@@ -159,7 +161,6 @@ function back() {
         document.getElementById('back')?.classList.remove('hidden');
     };
     document.getElementById('create')?.classList.add('hidden');
-    // focus first input of the new step
     const newField = document.querySelector(`.inputField[step="${step}"]`);
     if (newField) {
         const input = newField.querySelector('input, textarea, select');
@@ -242,7 +243,7 @@ async function create() {
             };
         };
     });
-    await fetch(window.location.href, {
+    await fetch(`${appPath}/create`, {
         method: 'POST',
         headers: {
             'Content-Type': 'application/json'
@@ -256,7 +257,7 @@ async function create() {
             if (result.status === 'success') {
                 document.querySelectorAll('.inputField').forEach(field => {
                     field.classList.remove('active');
-                });;
+                });
                 document.getElementById('success').classList.remove('hidden');
                 localStorage.clear();
                 backDisabled = true;
@@ -276,6 +277,32 @@ async function create() {
         });
 };
 
+async function sync() {
+    if (backDisabled) return;
+    document.getElementById('sync').classList.add('active');
+    anim_out();
+    await fetch(`${appPath}/sync`, {
+        method: 'PUT',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+    })
+        .then(response => response.json())
+        .then(result => {
+            backDisabled = true;
+            if (result.status === 'success') {
+                window.location.reload();
+            } else {
+                document.getElementById('error').classList.remove('hidden');
+                document.querySelector('.inner h1').innerText = 'Error';
+                document.querySelector('.inner p').innerText = result.message || 'An unknown error occurred. Please try again later.';
+            };
+            setTimeout(() => {
+                anim_in();
+            }, 750)
+        });
+};
+
 function progress(percent) {
     const progressBar = document.querySelector('.progress');
     progressBar.style.width = percent + '%';

frontend/public/styles.css

@@ -274,7 +274,35 @@ main {
 		gap: 5px;
 		width: -webkit-fill-available;
 		max-width: 500px;
-		margin-top: 10px;
+		margin-top: 5px;
+
+		#sync {
+			display: flex;
+			align-items: center;
+			justify-content: flex-start;
+			margin-bottom: 5px;
+			cursor: pointer;
+
+			svg {
+				height: 12.5px;
+				transition: rotate 0.5s linear;
+
+				path {
+					stroke: #ffffff;
+					stroke-width: 2px;
+				}
+			}
+		}
+
+		#sync.active {
+			user-select: none;
+			pointer-events: none;
+
+			svg {
+				rotate: 360deg;
+				transition: rotate 0.5s linear;
+			}
+		}
 
 		.commission {
 			display: flex;
@@ -287,8 +315,8 @@ main {
 
 			.button {
 				margin-left: auto;
-                width: fit-content;
-                min-width: 35px;
+				width: fit-content;
+				min-width: 35px;
 			}
 
 			p {

index.js

@@ -55,9 +55,9 @@ function init({
   },
   fields: newFields = [],
   handlers: {
-    newCreateHandler = null,
-    newUpdateHandler = null,
-    newSyncHandler = null
+    create: newCreateHandler = null,
+    update: newUpdateHandler = null,
+    sync: newSyncHandler = null
   }
 }) {
   tenant = {
@@ -122,7 +122,7 @@ app.get('/', async (req, res) => {
   if (!tenant.slug || !tenant.name || !tenant.domain) return res.render('tenant', { tenant, title: 'Configuration' });
   if (tenant.auth && tenant.auth.enabled && vars.userId && !req.session[vars.userId]) return res.render('auth', { tenant, title: 'Authenticate' });
   req.session[vars.commissions] = (req.session[vars.commissions] || []).map(commission => {
-    if (!commission.id || !commission.user || (commission.date ? isNaN(new Date(commission.date).getTime()) : false) || !['completed', 'in-progress', 'on-hold', 'cancelled'].some(status => commission.status.includes(status)) || (typeof commission.tasks !== 'object')) return null;
+    if (!commission.id || !commission.user || (commission.date ? isNaN(new Date(commission.date).getTime()) : false) || (typeof commission.status !== 'string') || (typeof commission.tasks !== 'object')) return null;
     return {
       id: commission.id,
       user: commission.user,
@@ -192,6 +192,22 @@ app.post('/create', async (req, res) => {
   res.status(200).json({ status: 'success', message: 'Your commission was created successfully.' });
 });
 
+app.put('/sync', async (req, res) => {
+  if (!on) return res.status(503).json({ status: 'error', message: 'Service is currently offline.' });
+  if (!req.session) return res.status(401).json({ status: 'error', message: 'No session found. Please enable cookies and try again.' });
+  if (tenant.auth && tenant.auth.enabled && vars.userId && !req.session[vars.userId]) return res.status(401).json({ status: 'error', message: 'User not authenticated. Please log in and try again.' });
+  if (!tenant.slug || !tenant.name || !tenant.domain) return res.status(500).json({ status: 'error', message: 'Service is not properly configured. Please contact the administrator.' });
+  if (syncHandler && typeof syncHandler === 'function') {
+    try {
+      await syncHandler(req);
+    } catch (error) {
+      console.error('Error in handler function:', error);
+      return res.status(500).json({ status: 'error', message: 'An error occurred while processing your request. Please try again later.' });
+    };
+  };
+  res.status(200).json({ status: 'success', message: 'Your commissions were synchronized successfully.' });
+});
+
 app.use((req, res) => {
   res.status(404).render('error', { tenant, title: 'Not Found', message: 'The requested resource was not found.' });
 });