Improve Subform UX

templaza · Dec 9, 2024 · 186a5d1 · 186a5d1
1 parent 8aea58c
commit 186a5d1
Show file tree

Hide file tree

Showing 10 changed files with 111 additions and 84 deletions.
diff --git a/assets/vendor/manager/dist/index.js b/assets/vendor/manager/dist/index.js
diff --git a/assets/vendor/manager/index_.html → assets/vendor/manager/index.article.html b/assets/vendor/manager/index_.html → assets/vendor/manager/index.article.html
diff --git a/assets/vendor/manager/index.html b/assets/vendor/manager/index.html
diff --git a/assets/vendor/manager/index.manage.html b/assets/vendor/manager/index.manage.html
diff --git a/assets/vendor/manager/src/App.vue b/assets/vendor/manager/src/App.vue
@@ -19,7 +19,7 @@ onBeforeMount(()=>{
   if (colorMode) {
     theme.value = colorMode;
   } else if (getCookie('osColorScheme')) {
-    theme.value = getCookie('osColorScheme');
+      theme.value = getCookie('osColorScheme');
   }
 })
 

diff --git a/assets/vendor/manager/src/components/helpers/Fields.vue b/assets/vendor/manager/src/components/helpers/Fields.vue
@@ -25,7 +25,8 @@ import SubLayouts from './SubLayouts.vue';
 const emit = defineEmits(['update:contentlayout', 'update:loadPreset', 'update:getPreset', 'update:subFormState']);
 const props = defineProps({
   field: { type: Object, default: null },
-  scope: { type: Object, default: null }
+  scope: { type: Object, default: null },
+    actSave: {type: Boolean, default: false}
 });
 const constant = inject('constant', {});
 
@@ -170,7 +171,7 @@ function updateSubLayouts() {
         <Presets :field="props.field" @update:loadPreset="(value) => {emit('update:loadPreset', value)}" @update:getPreset="(value) => {emit('update:getPreset', value)}" />
     </div>
     <div v-else-if="props.field.input.type === `astroidsubform`" class="astroid-subform">
-        <SubForm v-model="props.scope[props.field.name]" :field="props.field" @update:subFormState="(value) => {emit('update:subFormState', value)}" />
+        <SubForm v-model="props.scope[props.field.name]" :field="props.field" :actSave="props.actSave" @update:subFormState="(value) => {emit('update:subFormState', value)}" />
     </div>
     <div v-else-if="props.field.input.type === `astroidicons`" class="astroid-icons">
         <Icons v-model="props.scope[props.field.name]" :field="props.field" />

diff --git a/assets/vendor/manager/src/components/helpers/Modal.vue b/assets/vendor/manager/src/components/helpers/Modal.vue
@@ -39,30 +39,31 @@ function checkShowGroup(fields) {
     }
     return hasField;
 }
-function saveModal(){
-    let allowSave = true;
+const actSave = ref(false);
+function storeParams() {
+    const tmp = Object.keys(params.value).map(key => ({
+        name: key,
+        value: typeof params.value[key] === 'object' && !Array.isArray(params.value[key]) && params.value[key] !== null
+            ? JSON.parse(JSON.stringify(params.value[key]))
+            : params.value[key]
+    }));
+    emit('update:saveElement', tmp);
+    emit('update:closeElement');
+}
+function saveModal() {
     if (subFormOpen.value.value) {
-        if (!confirm(subFormOpen.value.name + ' has not been saved. Are you sure to skip the subform?')) {
-            allowSave = false;
+        const message = `${subFormOpen.value.name} has not been saved. Are you sure to save the subform?`;
+        if (confirm(message)) {
+            actSave.value = true;
+            setTimeout(() => {
+                storeParams();
+                actSave.value = false;
+            }, 1000);
+        } else {
+            storeParams();
         }
-    }
-    if (allowSave) {
-        let tmp = [];
-        Object.keys(params.value).forEach(key => {
-            if (typeof params.value[key] === 'object' && !Array.isArray(params.value[key]) && params.value[key] !== null) {
-                tmp.push({
-                    'name': key,
-                    'value': JSON.parse(JSON.stringify(params.value[key]))
-                });
-            } else {
-                tmp.push({
-                    'name': key,
-                    'value': params.value[key]
-                });
-            }
-        });
-        emit('update:saveElement', tmp);
-        emit('update:closeElement')
+    } else {
+        storeParams();
     }
 }
 function updateSubForm(value) {
@@ -102,6 +103,7 @@ const pro_badge = '<span class="badge text-bg-danger ms-2">PRO</span>';
                                     <Fields 
                                         :field="field" 
                                         :scope="params"
+                                        :actSave="actSave"
                                         @update:subFormState="updateSubForm"
                                         />
                                 </div>

diff --git a/assets/vendor/manager/src/components/helpers/SelectElement.vue b/assets/vendor/manager/src/components/helpers/SelectElement.vue
@@ -52,7 +52,9 @@ onMounted(()=> {
     } else {
         title.value = 'Select a sub-layout';
     }
-    getSublayouts();
+    if (props.source === 'root') {
+        getSublayouts();
+    }
 })
 
 function getSublayouts() {

diff --git a/assets/vendor/manager/src/components/helpers/SubForm.vue b/assets/vendor/manager/src/components/helpers/SubForm.vue
@@ -1,10 +1,10 @@
 <script setup>
-import { onBeforeMount, ref } from "vue";
+import { onBeforeMount, ref, onUpdated } from "vue";
 import draggable from "vuedraggable";
 import Fields from './Fields.vue';
 
 const emit = defineEmits(['update:modelValue', 'update:subFormState']);
-const props = defineProps(['modelValue', 'field']);
+const props = defineProps(['modelValue', 'field', 'actSave']);
 const items = ref([]);
 const edit  = ref(false);
 const params = ref(new Object());
@@ -17,6 +17,12 @@ onBeforeMount(()=>{
     itemLabel.value = props.field.input.form.index !== '' ? props.field.input.form.index : 'title';
 })
 
+onUpdated(() => {
+    if (props.actSave && edit.value) {
+        saveItem();
+    }
+})
+
 function listUpdated() {
     emit('update:subFormState', {name: props.field.label, value: false});
     emit('update:modelValue', JSON.stringify(items.value));
@@ -132,7 +138,7 @@ function deleteItem(index) {
         <div v-for="(fieldset, idx) in props.field.input.form.content" :key="fieldset.name" class="card">
             <div class="card-header d-flex justify-content-between align-items-center">
                 <div>Add Item</div>
-                <button class="btn btn-sm btn-primary btn-as-primary" @click.prevent="saveItem">Apply</button>
+                <button class="as-subform-apply btn btn-sm btn-primary btn-as-primary" @click.prevent="saveItem">Apply</button>
             </div>
             <div v-for="(group, gid) in fieldset.childs" :key="gid" :class="`group-`+gid" class="card-body">
                 <div v-if="group.title || group.description" class="heading-group mb-4">

diff --git a/framework/fields/astroidlayoutmodule.php b/framework/fields/astroidlayoutmodule.php
@@ -36,7 +36,7 @@ protected function getInput() {
             && $app->input->get('layout', '') == 'edit') {
             $id     =   $app->input->get('id');
             $layout =   Layout::loadModuleLayout($id);
-            $constant   =   Helper\Constants::manager_configs('article_data');
+            $constant   =   Helper\Constants::manager_configs('joomla_module');
             $json = [
                 'id'      =>  $this->id,
                 'name' => $this->name,