Refactor VariableManager and Manage Form Page for Improved UI and Functionality

- Enhanced the VariableManager component with improved formatting and structure for better readability.
- Updated the Manage Form page to include a delete confirmation modal for form deletion, enhancing user experience and preventing accidental deletions.
- Refined the layout and styling of the Manage Form page, including adjustments to the header and search functionality for better usability.
- Improved the handling of form actions and added visual feedback for editing and deleting forms.

components/process-flow/VariableManager.vue

@@ -5,13 +5,17 @@
       <div class="flex items-center justify-between">
         <div>
           <h3 class="text-lg font-medium text-gray-900">Process Variables</h3>
-          <p class="mt-1 text-sm text-gray-500">Manage variables for your process flow</p>
+          <p class="mt-1 text-sm text-gray-500">
+            Manage variables for your process flow
+          </p>
         </div>
         <RsButton
-          @click="() => {
+          @click="
+            () => {
               resetForm();
               showAddVariable = true;
-          }"
+            }
+          "
           variant="primary"
           size="sm"
         >
@@ -25,40 +29,42 @@
     <div class="p-4">
       <!-- Empty State -->
       <div v-if="!variables.length" class="text-center py-8">
-        <Icon name="material-symbols:data-object" class="w-12 h-12 mx-auto mb-3 text-gray-400" />
+        <Icon
-        <h4 class="text-sm font-medium text-gray-900 mb-1">No Variables Added</h4>
+          name="material-symbols:data-object"
-        <p class="text-sm text-gray-500 mb-4">Add variables to store and manage data in your process</p>
+          class="w-12 h-12 mx-auto mb-3 text-gray-400"
-        <RsButton 
+        />
-          @click="() => {
+        <h4 class="text-sm font-medium text-gray-900 mb-1">
-            resetForm();
+          No Variables Added
-            showAddVariable = true;
+        </h4>
-          }"
+        <p class="text-sm text-gray-500 mb-4">
-          variant="secondary"
+          Add variables to store and manage data in your process
-          size="sm"
+        </p>
-        >
-          <Icon name="material-symbols:add" class="mr-1" />
-          Add Your First Variable
-        </RsButton>
       </div>
 
       <!-- Variable List -->
       <div v-else class="space-y-2">
-        <div v-for="variable in variables" :key="variable.name" class="variable-item">
+        <div
-          <div class="flex items-center justify-between p-3 bg-white rounded-lg border border-gray-200 hover:border-blue-200 hover:shadow-sm transition-all duration-200">
+          v-for="variable in variables"
+          :key="variable.name"
+          class="variable-item"
+        >
+          <div
+            class="flex items-center justify-between p-3 bg-white rounded-lg border border-gray-200 hover:border-blue-200 hover:shadow-sm transition-all duration-200"
+          >
             <div class="flex-1">
               <div class="flex items-center gap-2">
-                <span class="font-medium text-gray-900">{{ variable.name }}</span>
+                <span class="font-medium text-gray-900">{{
+                  variable.name
+                }}</span>
                 <RsBadge
-                  :variant="variable.scope === 'global' ? 'primary' : 'secondary'"
+                  :variant="
+                    variable.scope === 'global' ? 'primary' : 'secondary'
+                  "
                   size="sm"
                 >
                   {{ variable.scope }}
                 </RsBadge>
-                <RsBadge 
+                <RsBadge variant="outline" size="sm" class="text-gray-500">
-                  variant="outline"
-                  size="sm"
-                  class="text-gray-500"
-                >
                   {{ variable.type }}
                 </RsBadge>
               </div>
@@ -110,8 +116,9 @@
           validation="required|alpha_numeric|length:3,50"
           :validation-messages="{
             required: 'Variable name is required',
-            alpha_numeric: 'Variable name can only contain letters, numbers, and underscores',
+            alpha_numeric:
-            length: 'Variable name must be between 3 and 50 characters'
+              'Variable name can only contain letters, numbers, and underscores',
+            length: 'Variable name must be between 3 and 50 characters',
           }"
         />
 
@@ -127,11 +134,11 @@
             { label: 'Object', value: 'object' },
             { label: 'Array', value: 'array' },
             { label: 'Date', value: 'date' },
-            { label: 'File', value: 'file' }
+            { label: 'File', value: 'file' },
           ]"
           validation="required"
           :validation-messages="{
-            required: 'Variable type is required'
+            required: 'Variable type is required',
           }"
         />
 
@@ -142,11 +149,11 @@
           label="Scope"
           :options="[
             { label: 'Process', value: 'process' },
-            { label: 'Global', value: 'global' }
+            { label: 'Global', value: 'global' },
           ]"
           validation="required"
           :validation-messages="{
-            required: 'Variable scope is required'
+            required: 'Variable scope is required',
           }"
         />
 
@@ -168,18 +175,11 @@
         />
 
         <div class="flex justify-end space-x-2 pt-4 border-t border-gray-200">
-          <RsButton
+          <RsButton type="button" @click="closeModal" variant="tertiary">
-            type="button"
-            @click="closeModal"
-            variant="tertiary"
-          >
             Cancel
           </RsButton>
-          <FormKit
+          <FormKit type="submit" input-class="rs-button rs-button-primary">
-            type="submit"
+            {{ editingVariable ? "Update" : "Add" }}
-            input-class="rs-button rs-button-primary"
-          >
-            {{ editingVariable ? 'Update' : 'Add' }}
           </FormKit>
         </div>
       </FormKit>
@@ -188,8 +188,8 @@
 </template>
 
 <script setup>
-import { ref, computed } from 'vue';
+import { ref, computed } from "vue";
-import { useVariableStore } from '~/stores/variableStore';
+import { useVariableStore } from "~/stores/variableStore";
 
 const variableStore = useVariableStore();
 
@@ -197,11 +197,11 @@ const variableStore = useVariableStore();
 const showAddVariable = ref(false);
 const editingVariable = ref(null);
 const variableForm = ref({
-  name: '',
+  name: "",
-  type: 'string',
+  type: "string",
-  scope: 'process',
+  scope: "process",
-  description: '',
+  description: "",
-  isRequired: false
+  isRequired: false,
 });
 
 // Computed
@@ -209,7 +209,7 @@ const variables = computed(() => {
   // This was only returning process variables, let's fix it to return both process and global variables
   const allVars = [
     ...variableStore.getAllVariables.process,
-    ...variableStore.getAllVariables.global
+    ...variableStore.getAllVariables.global,
   ];
   return allVars;
 });
@@ -229,11 +229,11 @@ const deleteVariable = (variable) => {
 
 const resetForm = () => {
   variableForm.value = {
-    name: '',
+    name: "",
-    type: 'string',
+    type: "string",
-    scope: 'process',
+    scope: "process",
-    description: '',
+    description: "",
-    isRequired: false
+    isRequired: false,
   };
   editingVariable.value = null;
 };
@@ -251,7 +251,7 @@ const saveVariable = async (formData) => {
       type: formData.type,
       scope: formData.scope,
       description: formData.description,
-      isRequired: formData.isRequired
+      isRequired: formData.isRequired,
     };
 
     if (editingVariable.value) {
@@ -269,7 +269,7 @@ const saveVariable = async (formData) => {
     // Close modal and reset form
     closeModal();
   } catch (error) {
-    console.error('Error saving variable:', error);
+    console.error("Error saving variable:", error);
     // You might want to show an error message to the user here
   }
 };

pages/form-builder/manage.vue

@@ -3,7 +3,7 @@
     <div class="flex flex-col h-screen bg-gray-50">
       <!-- Header -->
       <header
-        class="bg-gray-800 p-2 flex flex-wrap items-center justify-between text-white"
+        class="bg-gray-800 p-2 flex flex-wrap items-center justify-between text-white min-h-[70px]"
       >
         <div class="flex items-center mb-2 sm:mb-0 gap-4">
           <Icon
@@ -18,24 +18,22 @@
           />
         </div>
         <div class="flex flex-wrap items-center space-x-2">
-          <RsButton @click="navigateToBuilder" variant="primary" class="mr-2">
-            <Icon name="material-symbols:add" class="mr-2" />
-            Create New Form
-          </RsButton>
           <h1 class="text-lg font-semibold">Manage Forms</h1>
         </div>
       </header>
 
       <!-- Main content -->
+
       <div class="flex-1 overflow-auto p-6">
         <div class="container mx-auto">
-          <!-- Search bar -->
+          <!-- Header with title, search and create button -->
           <div class="bg-white p-4 rounded-lg shadow-sm mb-6">
             <div
               class="flex flex-col md:flex-row md:items-center md:justify-between gap-4"
             >
               <h2 class="text-xl font-medium">Saved Forms</h2>
-              <div class="relative w-full md:w-64">
+              <div class="flex space-x-4 items-center">
+                <div class="relative w-64">
                   <input
                     type="text"
                     v-model="searchQuery"
@@ -47,10 +45,20 @@
                     class="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400"
                   />
                 </div>
+                <RsButton
+                  @click="navigateToBuilder"
+                  variant="primary"
+                  class="flex items-center whitespace-nowrap"
+                >
+                  <Icon name="material-symbols:add" class="mr-2" />
+                  Create Form
+                </RsButton>
+              </div>
             </div>
           </div>
 
           <!-- Forms list -->
+
           <div class="bg-white rounded-lg shadow-sm">
             <div
               v-if="formStore.savedForms.length === 0"
@@ -62,47 +70,35 @@
               />
               <p class="text-lg font-medium">No forms found</p>
               <p class="text-sm mb-4">Start by creating a new form</p>
-              <RsButton @click="navigateToBuilder" variant="primary"
-                >Create Form</RsButton
-              >
             </div>
 
             <div v-else>
               <RsTable
-                :field="['Form Name', 'Created', 'Actions']"
                 :data="filteredForms"
-                :options="{ striped: true, hover: true }"
+                :options="{
-                :optionsAdvanced="{ sortable: true, responsive: true }"
+                  variant: 'default',
+                }"
               >
-                <template #cell-2="{ row, index }">
+                <template v-slot:formName="data">
-                  <div class="flex space-x-2 justify-end">
+                  <div class="font-medium">{{ data.text }}</div>
-                    <RsButton
-                      @click="editForm(row.id)"
-                      size="sm"
-                      variant="tertiary"
-                    >
-                      <template #prepend>
-                        <Icon
-                          name="material-symbols:edit-outline"
-                          class="w-4 h-4"
-                        />
                 </template>
-                      Edit
+                <template v-slot:created="data">
-                    </RsButton>
+                  <div>{{ data.text }}</div>
-                    <RsButton
+                </template>
-                      @click="deleteForm(row.id)"
+                <template v-slot:action="data">
-                      size="sm"
+                  <div class="flex space-x-2">
-                      variant="tertiary"
+                    <Icon
-                      class="text-red-500"
+                      name="material-symbols:edit-outline-rounded"
-                    >
+                      class="text-primary hover:text-primary/90 cursor-pointer"
-                      <template #prepend>
+                      size="22"
+                      @click="editForm(data.value.id)"
+                    ></Icon>
                     <Icon
                       name="material-symbols:delete-outline"
-                          class="w-4 h-4"
+                      class="text-red-500 hover:text-red-400 cursor-pointer"
-                        />
+                      size="22"
-                      </template>
+                      @click="deleteForm(data.value.id)"
-                      Delete
+                    ></Icon>
-                    </RsButton>
                   </div>
                 </template>
               </RsTable>
@@ -144,6 +140,33 @@
         </div>
       </template>
     </RsModal>
+
+    <!-- Delete Confirmation Modal -->
+    <RsModal v-model="showDeleteModal" title="Delete Form" size="md">
+      <div class="p-4">
+        <div class="flex items-center mb-4">
+          <Icon
+            name="material-symbols:delete-forever-outline"
+            class="text-red-500 w-8 h-8 mr-3"
+          />
+          <div>
+            <h3 class="font-medium text-lg">Delete Form</h3>
+            <p class="text-gray-600">
+              Are you sure you want to delete this form? This action cannot be
+              undone.
+            </p>
+          </div>
+        </div>
+      </div>
+      <template #footer>
+        <div class="flex justify-end gap-2">
+          <RsButton @click="cancelDelete" variant="tertiary"> Cancel </RsButton>
+          <RsButton @click="confirmDelete" variant="danger">
+            Delete Form
+          </RsButton>
+        </div>
+      </template>
+    </RsModal>
   </div>
 </template>
 
@@ -168,15 +191,17 @@ try {
 } catch (error) {
   // Create a simple toast object if composable is not available
   toast = {
-    success: (msg) => console.log('Success:', msg),
+    success: (msg) => console.log("Success:", msg),
-    error: (msg) => console.error('Error:', msg),
+    error: (msg) => console.error("Error:", msg),
-    info: (msg) => console.info('Info:', msg),
+    info: (msg) => console.info("Info:", msg),
-    warning: (msg) => console.warn('Warning:', msg)
+    warning: (msg) => console.warn("Warning:", msg),
   };
 }
 
 const searchQuery = ref("");
 const showUnsavedChangesModal = ref(false);
+const showDeleteModal = ref(false);
+const formToDelete = ref(null);
 
 // Initialize and load forms
 onMounted(async () => {
@@ -191,11 +216,13 @@ onMounted(async () => {
 // Format date for display
 const formatDate = (dateString) => {
   const date = new Date(dateString);
-  return date.toLocaleDateString("en-US", {
+  return date
+    .toLocaleDateString("en-US", {
       year: "numeric",
       month: "short",
       day: "numeric",
-  });
+    })
+    .replace(",", "");
 };
 
 // Filtered and formatted forms for table display
@@ -205,11 +232,19 @@ const filteredForms = computed(() => {
       if (!searchQuery.value) return true;
       return form.name.toLowerCase().includes(searchQuery.value.toLowerCase());
     })
-    .map((form) => ({
+    .map((form) => {
+      console.log(form);
+
+      // Get form name or fallback to the ID if name is not available
+      const formName = form.name ? form.name : form.id;
+
+      return {
         id: form.id,
-      "Form Name": form.name,
+        formName: formName,
-      Created: formatDate(form.createdAt),
+        created: form.createdAt ? formatDate(form.createdAt) : "New Form",
-    }));
+        action: { id: form.id }, // Pass the ID to the action slot
+      };
+    });
 });
 
 // Navigation and action handlers
@@ -242,11 +277,22 @@ const editForm = async (formId) => {
   }
 };
 
-const deleteForm = async (formId) => {
+const deleteForm = (formId) => {
-  if (confirm("Are you sure you want to delete this form?")) {
+  formToDelete.value = formId;
+  showDeleteModal.value = true;
+};
+
+const cancelDelete = () => {
+  showDeleteModal.value = false;
+  formToDelete.value = null;
+};
+
+const confirmDelete = async () => {
+  if (!formToDelete.value) return;
+
   try {
     // Call the API to delete the form
-      await formStore.deleteForm(formId);
+    await formStore.deleteForm(formToDelete.value);
 
     // Refresh the forms list
     await formStore.loadSavedForms();
@@ -255,7 +301,9 @@ const deleteForm = async (formId) => {
   } catch (error) {
     console.error("Error deleting form:", error);
     toast.error("Failed to delete form: " + (error.message || "Unknown error"));
-    }
+  } finally {
+    showDeleteModal.value = false;
+    formToDelete.value = null;
   }
 };
 </script>