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:
parent
f320ad759a
commit
af80d368b0
@ -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>
|
||||
|
@ -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>
|
||||
|
Loading…
x
Reference in New Issue
Block a user