pgo-ui 1.1.21 → 1.1.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pgo-ui",
-  "version": "1.1.21",
+  "version": "1.1.22",
   "description": "A Vue 3 component library with PGO design system",
   "private": false,
   "type": "module",

package/src/components/pgo/forms/DynamicForm.vue

@@ -94,29 +94,28 @@
         </Form>
         <template #footer>
             <div class="flex justify-end gap-2 ">
-                <Button v-if="mode == 'edit'"
-                    label="buttons.update" 
+                <Button  
+                    v-if="formMode === 'create'"
+                    label="buttons.draft" 
                     color="primary" 
-                    :loading="isSubmitting"
-                    @click="handleSubmit('update')"
+                    :loading="isSubmitting && clickedButton === 'draft'"
+                    :disabled="isSubmitting || !valid"
+                    @click="handleSubmit('draft')"
                 />
                 <template v-else>
-                    <Button 
-                        v-if="items || draftSubmitted"
-                        label="buttons.submit" 
-                        color="primary" 
-                        :loading="isSubmitting"
-                        :disabled="!valid || isSubmitting"
-                        
-                        @click="handleSubmit('submitted')"
+                    <Button
+                        label="buttons.update"
+                        color="warning"
+                        :loading="isSubmitting && clickedButton === 'update'"
+                        :disabled="isSubmitting || !isFormDirty || !valid"
+                        @click="handleSubmit('update')"
                     />
-                    <Button  
-                        label="buttons.draft" 
-                        color="primary" 
-                        :loading="isSubmitting"
-                        :disabled="!valid || isSubmitting || draftSubmitted"
-                        
-                        @click="handleSubmit('draft')"
+                    <Button 
+                        label="buttons.submit"
+                        color="primary"
+                        :loading="isSubmitting && clickedButton === 'submit'"
+                        :disabled="isSubmitting || !valid"
+                        @click="handleSubmit('submit')"
                     />
                     <!-- <Button v-if="items" label="buttons.submit" color="primary" @click="handleSubmit('submit')"/> -->
 
@@ -149,7 +148,11 @@
     const formRef = ref(null);
     const isSubmitting = ref(false);
     const draftSubmitted = ref(false);
+    const relationId = ref(null);
     const clickedButton = ref('');
+    const isPreFilled = ref(false)
+    const originalFormData = ref({})
+
     const emit = defineEmits([
         'update:modelValue', 
         'submit:success', 
@@ -185,16 +188,21 @@
     const compiledFunctions = ref({});
     // const showUploads = ref(false)
 
+    const formMode = ref(props.mode)
+
     // Enhanced evaluation context that includes props and mode
     const createEvaluationContext = () => {
         return {
+            formData,
+            formVariables,
+            variables: formVariables,
             ...formData,
             ...formVariables,
-            mode: props.mode,
+            mode: formMode.value,
             formType: formType.value,
             props: props,
-            isEdit: props.mode === 'edit',
-            isCreate: props.mode === 'create'
+            isEdit: formMode.value === 'edit',
+            isCreate: formMode.value === 'create',
         };
     };
 
@@ -242,6 +250,23 @@
         }
     };
 
+    const isFormDirty = computed(() => {
+        if (!isPreFilled.value) return false
+        return Object.keys(originalFormData.value).some(key => {
+            const original = originalFormData.value[key]
+            const current = formData[key]
+            // Handle null/undefined equality
+            if (original === null || original === undefined) {
+                return current !== null && current !== undefined && current !== ''
+            }
+            // Handle objects/arrays
+            if (typeof original === 'object') {
+                return JSON.stringify(original) !== JSON.stringify(current)
+            }
+            return original !== current
+        })
+    })
+
     // Initialize form data with default values or items data
     const initializeFormData = () => {
         // Add safety check for form.fields
@@ -252,8 +277,18 @@
         props.form.fields.forEach(field => {
             if (!field || !field.key) return;
 
-            if (props.items && props.items[field.key] !== undefined) {
-                formData[field.key] = props.items[field.key];
+            const fieldKey = field.dataKey ?? field.key
+
+            // 1. Try to get value from props.items (supports dot notation)
+            if (props.items) {
+                const val = fieldKey.includes('.')
+                    ? getNestedValue(props.items, fieldKey)
+                    : props.items[fieldKey]
+
+                if (val !== undefined) {
+                    formData[field.key] = val
+                    return
+                }
             } else if (field.default !== undefined) {
                 formData[field.key] = field.default;
             } else if (field.value !== undefined) {
@@ -423,6 +458,14 @@
             return true; // Show group by default if evaluation fails
         }
     };
+    // Helper to get nested value by dot notation key e.g. "submissionDetails.form_ref_number"
+    const getNestedValue = (obj, path) => {
+        if (!path || !obj) return undefined
+        return path.split('.').reduce((acc, key) => {
+            if (acc === null || acc === undefined) return undefined
+            return acc[key]
+        }, obj)
+    }
 
     // Function to get ungrouped fields
     const getUngroupedFields = () => {
@@ -633,7 +676,7 @@
         
         // Add relationId for file upload components
         if (field.inputType === 'file' || field.inputType === 'filefield') {
-            cleanProps.relationId = formId.value || props.editItemId;
+            cleanProps.relationId = relationId.value;
             // cleanProps.onuploadSuccess = fetchData();
             // cleanProps.onviewPdf = emit('view-pdf');
             // cleanProps.fileList = FormDataList.value?.[ field.dataKey ?? field.key ];
@@ -802,55 +845,55 @@
         try {
             // Filter out non-database fields before submission
             const submitData = getDbFieldsOnly(formData);
-            if (clickedButton.value === 'draft') {
+            const currentId = formId.value || props.editItemId
+            if (clickedButton.value === 'draft' || clickedButton.value === 'update') {
                 submitData.status = 'draft';
             }else {
                 submitData.status = 'submitted';
             }
             if (formId.value) {
-                submitData.id = formId.value; // Ensure ID is included for updates
+                // submitData.id = formId.value; // Ensure ID is included for updates
             }
             // const isFullUrl = /^https?:\/\//i.test(props.form?.crudLink)
             // let url = isFullUrl ? props.form?.crudLink : baseUrl + '/' + props.form?.crudLink
             let completeUrl =  ''
-            
-            if ((props.mode === 'edit' && props.editItemId) || clickedButton.value === 'submitted') {
-                const editLink = props.form?.updateLink || props.form?.crudLink;
-                // const isFullUrl = /^https?:\/\//i.test(editLink)
-                // let url = isFullUrl ? editLink : baseUrl + '/' + editLink
-                let url = editLink
-                url += `/${submitData.id}`;
-                completeUrl = api.put(url, submitData); // Use filtered data
-            } else {
-
-                const createLink = props.form?.createLink || props.form?.crudLink;
-                // const isFullUrl = /^https?:\/\//i.test(createLink)
-                // let url = isFullUrl ? createLink : baseUrl + '/' + createLink
-                let url = createLink
-                completeUrl = api.post(url, submitData); // Use filtered data
-            }
-            const response = await completeUrl;
+            let response = null;
+
+            if (clickedButton.value=== 'draft' && currentId) {
+                 const createLink = props.form?.createLink || props.form?.crudLink
+                response = await api.post(createLink, submitData)
+
+                // Transition to edit mode
+                formId.value = (response?.data?.uuid || response?.uuid) ?? (response?.data?.id || response?.id)
+                formData.id = response?.data?.id || response?.id
+                relationId.value = response?.data?.id || response?.id
+                formMode.value = 'edit'       // ← trigger button swap
+
+                await fetchData()             // load saved data back
+
+                // snackbar?.show({ message: response?.data?.message || 'Draft saved', variant: 'success' })
+                // Do NOT close form
+                emit('submit:success', response?.message)
+            } else{
+                submitData.status = 'draft'
+                //submitData.id = currentId
+                const updateLink = props.form?.updateLink || props.form?.crudLink
+                response = await api.put(`${updateLink}/${currentId}`, submitData)
+
+                emit('submit:success', response?.message)
+                if (buttonType === 'submit') {
+                    handleClose()
+                    formRef.value?.reset()
+                }else {
+                    await fetchData()
+                }
 
-            const successMessage = response.data?.message || response.message || 'Created successfully';
-            snackbar?.show({ message: successMessage, variant: 'success' });
-            
-            formId.value = response?.data?.id || formData.id || props.editItemId || null; // Update formId with response ID if available
-            // submitData.id = formId.value; // Ensure submitData has the correct ID for any subsequent operations
-            console.log('Form submission response:', response);
-            
-            if (clickedButton.value === 'draft') {
-                draftSubmitted.value = true;
-            }
-            if (clickedButton.value !== 'draft') {
-                emit('submit:success', response.message);
-                handleClose();
-                formRef.value?.reset();
             }
             
         } catch (error) {
             console.error('Form submission error:', error);
             const errorMessage = error.response?.data?.message || 'Form submission failed';
-            snackbar?.show({ message: errorMessage, variant: 'error' });
+            // snackbar?.show({ message: errorMessage, variant: 'error' });
             if (error.response?.status === 422 || error.response?.data?.errors) {
                 const backendErrors = error.response.data.errors;
                 snackbar?.show({ message: backendErrors, variant: 'error' });
@@ -921,14 +964,34 @@
             
             if (response) {
                 const fetchedData = response
-                FormDataList.value = response || response.data || {};
-                formData.id = props.editItemId
+                FormDataList.value = response || response.data || {}
+                formData.id = response?.data?.id || response?.id
+                relationId.value = response?.data?.id || response?.id
                 
                 props.form.fields.forEach(field => {
-                    if (fetchedData[field.key] !== undefined) {
-                        formData[field.key] = fetchedData[field.key]
+                    if (!field || !field.key) return
+
+                    const fieldKey = field.key
+
+                    if (fieldKey.includes('.')) {
+                        const nestedVal = getNestedValue(fetchedData, fieldKey)
+                        if (nestedVal !== undefined) {
+                            formData[field.key] = nestedVal
+                            return
+                        }
+                    }
+
+                    if (fetchedData[fieldKey] !== undefined) {
+                        formData[field.key] = fetchedData[fieldKey]
                     }
                 })
+                await nextTick()
+                if (formRef.value?.validate) {
+                    const result = await formRef.value.validate()
+                    valid.value = result?.valid ?? false
+                }
+                originalFormData.value = JSON.parse(JSON.stringify({ ...formData }))
+                isPreFilled.value = true
             }
         } catch (error) {
             snackbar?.show({ message: 'Error fetching data', variant: 'error' })
@@ -940,7 +1003,11 @@
         open.value = false;
         isSubmitting.value = false;
         formRef.value?.reset();
+        isPreFilled.value = false
+        originalFormData.value = {}
         valid.value = false;
+        formMode.value = props.mode 
+        formId.value = null
         emit('close', false);
     };
 
@@ -990,6 +1057,7 @@
 
     // Also watch for mode changes
     watch(() => props.mode, (newMode) => {
+        formMode.value = newMode
         if (newMode === 'edit' && props.editItemId) {
             fetchData()
         } else if (newMode === 'create') {

package/dist/Radio-C-hzP6L2.js

@@ -1,4 +0,0 @@
-import { _ as f } from "./index-BYtCMgbN.js";
-export {
-  f as default
-};