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.
This commit is contained in:
Md Afiq Iskandar 2025-05-16 08:34:06 +08:00
parent f320ad759a
commit af80d368b0
2 changed files with 192 additions and 144 deletions

View File

@ -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="() => {
resetForm();
showAddVariable = true;
}"
<RsButton
@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" />
<h4 class="text-sm font-medium text-gray-900 mb-1">No Variables Added</h4>
<p class="text-sm text-gray-500 mb-4">Add variables to store and manage data in your process</p>
<RsButton
@click="() => {
resetForm();
showAddVariable = true;
}"
variant="secondary"
size="sm"
>
<Icon name="material-symbols:add" class="mr-1" />
Add Your First Variable
</RsButton>
<Icon
name="material-symbols:data-object"
class="w-12 h-12 mx-auto mb-3 text-gray-400"
/>
<h4 class="text-sm font-medium text-gray-900 mb-1">
No Variables Added
</h4>
<p class="text-sm text-gray-500 mb-4">
Add variables to store and manage data in your process
</p>
</div>
<!-- Variable List -->
<div v-else class="space-y-2">
<div 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
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>
<RsBadge
:variant="variable.scope === 'global' ? 'primary' : 'secondary'"
<span class="font-medium text-gray-900">{{
variable.name
}}</span>
<RsBadge
:variant="
variable.scope === 'global' ? 'primary' : 'secondary'
"
size="sm"
>
{{ variable.scope }}
</RsBadge>
<RsBadge
variant="outline"
size="sm"
class="text-gray-500"
>
<RsBadge variant="outline" size="sm" class="text-gray-500">
{{ variable.type }}
</RsBadge>
</div>
@ -67,14 +73,14 @@
</p>
</div>
<div class="flex items-center gap-2 ml-4">
<button
<button
@click="editVariable(variable)"
class="p-1.5 text-gray-400 hover:text-blue-500 hover:bg-blue-50 rounded-md transition-colors"
title="Edit variable"
>
<Icon name="material-symbols:edit" class="w-4 h-4" />
</button>
<button
<button
@click="deleteVariable(variable)"
class="p-1.5 text-gray-400 hover:text-red-500 hover:bg-red-50 rounded-md transition-colors"
title="Delete variable"
@ -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',
length: 'Variable name must be between 3 and 50 characters'
alpha_numeric:
'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
type="button"
@click="closeModal"
variant="tertiary"
>
<RsButton type="button" @click="closeModal" variant="tertiary">
Cancel
</RsButton>
<FormKit
type="submit"
input-class="rs-button rs-button-primary"
>
{{ editingVariable ? 'Update' : 'Add' }}
<FormKit type="submit" 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 { useVariableStore } from '~/stores/variableStore';
import { ref, computed } from "vue";
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: '',
type: 'string',
scope: 'process',
description: '',
isRequired: false
name: "",
type: "string",
scope: "process",
description: "",
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: '',
type: 'string',
scope: 'process',
description: '',
isRequired: false
name: "",
type: "string",
scope: "process",
description: "",
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
}
};
@ -287,4 +287,4 @@ const saveVariable = async (formData) => {
.variable-item:hover {
@apply transform -translate-y-1;
}
</style>
</style>

View File

@ -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,39 +18,47 @@
/>
</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">
<input
type="text"
v-model="searchQuery"
placeholder="Search forms..."
class="w-full px-3 py-2 pl-9 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
<Icon
name="material-symbols:search"
class="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400"
/>
<div class="flex space-x-4 items-center">
<div class="relative w-64">
<input
type="text"
v-model="searchQuery"
placeholder="Search forms..."
class="w-full px-3 py-2 pl-9 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
<Icon
name="material-symbols:search"
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 }"
:optionsAdvanced="{ sortable: true, responsive: true }"
:options="{
variant: 'default',
}"
>
<template #cell-2="{ row, index }">
<div class="flex space-x-2 justify-end">
<RsButton
@click="editForm(row.id)"
size="sm"
variant="tertiary"
>
<template #prepend>
<Icon
name="material-symbols:edit-outline"
class="w-4 h-4"
/>
</template>
Edit
</RsButton>
<RsButton
@click="deleteForm(row.id)"
size="sm"
variant="tertiary"
class="text-red-500"
>
<template #prepend>
<Icon
name="material-symbols:delete-outline"
class="w-4 h-4"
/>
</template>
Delete
</RsButton>
<template v-slot:formName="data">
<div class="font-medium">{{ data.text }}</div>
</template>
<template v-slot:created="data">
<div>{{ data.text }}</div>
</template>
<template v-slot:action="data">
<div class="flex space-x-2">
<Icon
name="material-symbols:edit-outline-rounded"
class="text-primary hover:text-primary/90 cursor-pointer"
size="22"
@click="editForm(data.value.id)"
></Icon>
<Icon
name="material-symbols:delete-outline"
class="text-red-500 hover:text-red-400 cursor-pointer"
size="22"
@click="deleteForm(data.value.id)"
></Icon>
</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),
error: (msg) => console.error('Error:', msg),
info: (msg) => console.info('Info:', msg),
warning: (msg) => console.warn('Warning:', msg)
success: (msg) => console.log("Success:", msg),
error: (msg) => console.error("Error:", msg),
info: (msg) => console.info("Info:", 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", {
year: "numeric",
month: "short",
day: "numeric",
});
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) => ({
id: form.id,
"Form Name": form.name,
Created: formatDate(form.createdAt),
}));
.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,
formName: formName,
created: form.createdAt ? formatDate(form.createdAt) : "New Form",
action: { id: form.id }, // Pass the ID to the action slot
};
});
});
// Navigation and action handlers
@ -242,20 +277,33 @@ const editForm = async (formId) => {
}
};
const deleteForm = async (formId) => {
if (confirm("Are you sure you want to delete this form?")) {
try {
// Call the API to delete the form
await formStore.deleteForm(formId);
// Refresh the forms list
await formStore.loadSavedForms();
toast.success("Form deleted successfully");
} catch (error) {
console.error("Error deleting form:", error);
toast.error("Failed to delete form: " + (error.message || "Unknown error"));
}
const deleteForm = (formId) => {
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(formToDelete.value);
// Refresh the forms list
await formStore.loadSavedForms();
toast.success("Form deleted successfully");
} 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>