Improve UI/UX for Modal view

templaza · May 22, 2024 · ea4cf1f · ea4cf1f
1 parent d69c205
commit ea4cf1f
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 36 deletions.
diff --git a/assets/vendor/manager/dist/index.html b/assets/vendor/manager/dist/index.html
diff --git a/assets/vendor/manager/dist/index.js b/assets/vendor/manager/dist/index.js
diff --git a/assets/vendor/manager/index.html b/assets/vendor/manager/index.html
diff --git a/assets/vendor/manager/src/components/helpers/Modal.vue b/assets/vendor/manager/src/components/helpers/Modal.vue
@@ -27,6 +27,18 @@ function checkShow(field) {
     }
     return true;
 }
+function checkShowGroup(fields) {
+    let hasField = false;
+    if (fields.length) {
+        fields.forEach(field => {
+        if (typeof field.ngShow === 'string' && checkShow(field)) {
+            hasField = true;
+            return hasField;
+        }
+        });
+    }
+    return hasField;
+}
 function saveModal(){
     let allowSave = true;
     if (subFormOpen.value.value) {
@@ -75,9 +87,9 @@ function sidebarClick(id) {
                 <div class="tab-content modal-body" :id="`modal-tab-content-`+props.element.id">
                     <div v-for="(fieldset, idx) in form.content" :key="fieldset.name" class="tab-pane fade" :class="{'show active' : idx === 0}" :id="fieldset.name+`-tab-pane-`+props.element.id" role="tabpanel" :aria-labelledby="fieldset.name+`-tab`" tabindex="0">
                         <nav v-if="Object.keys(fieldset.childs).length > 3" class="nav nav-pills d-none d-xl-block flex-column position-fixed overflow-hidden top-50 start-0 translate-middle-y rounded-end-4">
-                            <a v-for="(group, gid) in fieldset.childs" :key="gid" class="nav-link bg-body-tertiary rounded-0" @click.prevent="sidebarClick(`group-`+gid+`-`+props.element.id)" href="#" :class="{'d-none' : gid === 'none' || group.title === ''}">{{ group.title }}</a>
+                            <a v-for="(group, gid) in fieldset.childs" :key="gid" class="nav-link bg-body-tertiary rounded-0" v-show="checkShowGroup(group.fields)" @click.prevent="sidebarClick(`group-`+gid+`-`+props.element.id)" href="#" :class="{'d-none' : gid === 'none' || group.title === ''}">{{ group.title }}</a>
                         </nav>
-                        <div v-for="(group, gid) in fieldset.childs" :key="gid" :class="`group-`+gid" :id="`group-`+gid+`-`+props.element.id">
+                        <div v-for="(group, gid) in fieldset.childs" :key="gid" :class="`group-`+gid" :id="`group-`+gid+`-`+props.element.id" v-show="checkShowGroup(group.fields)">
                             <div v-if="group.title || group.description" class="heading-group mb-4">
                                 <h5 v-if="group.title" class="astroid-heading-line"><span>{{ group.title }}</span></h5>
                                 <p v-if="group.description" class="form-text">{{ group.description }}</p>