From 5cf4fd4831930d291400b44983988673c2adb493 Mon Sep 17 00:00:00 2001
From: Kelani Tolulope <kelanik8@gmail.com>
Date: Tue, 25 Jul 2023 15:33:08 +0100
Subject: [PATCH] Fix sub pages to be shown in navigation block configurator

---
 .../components/PageBlocks/Navigation/Base.vue |  5 +--
 .../PageBlocks/Navigation/Configurator.vue    | 11 +++---
 .../Navigation/NavTypes/ComposePage.vue       | 35 +++++++++++--------
 .../Navigation/NavTypes/Dropdown.vue          | 11 +++---
 .../types/page-block/navigation/index.ts      |  7 ++--
 .../src/components/input/CInputCheckbox.vue   |  1 -
 6 files changed, 37 insertions(+), 33 deletions(-)

diff --git a/client/web/compose/src/components/PageBlocks/Navigation/Base.vue b/client/web/compose/src/components/PageBlocks/Navigation/Base.vue
index b8d15a3da5..50f11624bc 100644
--- a/client/web/compose/src/components/PageBlocks/Navigation/Base.vue
+++ b/client/web/compose/src/components/PageBlocks/Navigation/Base.vue
@@ -90,6 +90,7 @@
                 </b-link>
 
                 <hr
+                  v-if="getSubPages(navItem.options.item.pageID).length > 0"
                   class="my-1"
                 >
 
@@ -140,8 +141,8 @@ export default {
       return (navItem.type === 'compose' && navItem.options.item.displaySubPages)
     },
 
-    getSubPages (selfID) {
-      return this.pages.filter(value => value.selfID === selfID && value.moduleID === NoID) || []
+    getSubPages (pageID) {
+      return this.pages.filter(value => value.selfID === pageID && value.moduleID === NoID) || []
     },
 
     selectTargetOption (target) {
diff --git a/client/web/compose/src/components/PageBlocks/Navigation/Configurator.vue b/client/web/compose/src/components/PageBlocks/Navigation/Configurator.vue
index 00d442cf94..f4a1248d06 100644
--- a/client/web/compose/src/components/PageBlocks/Navigation/Configurator.vue
+++ b/client/web/compose/src/components/PageBlocks/Navigation/Configurator.vue
@@ -73,7 +73,7 @@
 
       <div class="mb-3 mt-2">
         <div class="d-flex align-items-center mb-4">
-          <h5 class="text-primary mb-0">
+          <h5 class="mb-0">
             {{ $t("navigation.navigationItems") }}
           </h5>
         </div>
@@ -149,11 +149,11 @@
                         class="w-100"
                       />
                     </td>
-                    <td class="align-middle text-center">
-                      <b-form-checkbox
+                    <td class="d-flex align-items-center justify-content-center">
+                      <c-input-checkbox
                         v-model="item.options.enabled"
                         switch
-                        class="mb-0"
+                        :labels="{}"
                       />
                     </td>
                     <td class="align-middle">
@@ -277,8 +277,11 @@ export default {
           options: {
             backgroundColor: '#FFFFFF00',
             item: {
+              label: '',
+              url: '',
               align: 'bottom',
               target: 'sameTab',
+              displaySubPages: false,
               dropdown: {
                 label: '',
                 items: [],
diff --git a/client/web/compose/src/components/PageBlocks/Navigation/NavTypes/ComposePage.vue b/client/web/compose/src/components/PageBlocks/Navigation/NavTypes/ComposePage.vue
index 3e29ed458c..c9bf6ea148 100644
--- a/client/web/compose/src/components/PageBlocks/Navigation/NavTypes/ComposePage.vue
+++ b/client/web/compose/src/components/PageBlocks/Navigation/NavTypes/ComposePage.vue
@@ -15,7 +15,7 @@
           key="pageID"
           v-model="options.item.pageID"
           :placeholder="$t('navigation.none')"
-          :options="tree"
+          :options="pageList"
           append-to-body
           :get-option-key="getOptionKey"
           label="title"
@@ -37,19 +37,21 @@
       </b-form-group>
     </td>
     <td
-      v-if="selectedPageChildren(options.item.pageID)"
+      v-if="selectedPageChildren(options.item.pageID).length > 0"
       cols="12"
       sm="6"
       class="align-middle text-center"
     >
-      <b-form-group class="m-0">
-        <b-form-checkbox
+      <b-form-group
+        :label="$t('navigation.displaySubPages')"
+        label-class="text-nowrap"
+        class="d-flex align-items-center justify-content-center mb-0"
+      >
+        <c-input-checkbox
           v-model="options.item.displaySubPages"
           switch
           size="sm"
-        >
-          {{ $t('navigation.displaySubPages') }}
-        </b-form-checkbox>
+        />
       </b-form-group>
     </td>
     <td />
@@ -78,7 +80,11 @@ export default {
 
   data () {
     return {
-      tree: [],
+      pageList: [],
+      checkboxLabel: {
+        on: this.$t('general:label.yes'),
+        off: this.$t('general:label.no'),
+      },
       targetOptions: [
         { value: 'sameTab', text: this.$t('navigation.sameTab') },
         { value: 'newTab', text: this.$t('navigation.newTab') },
@@ -87,28 +93,27 @@ export default {
   },
 
   created () {
-    this.loadTree()
+    this.loadPages()
   },
 
   methods: {
     selectedPageChildren (pageID) {
-      const tree = this.tree ? this.tree.find(t => t.pageID === pageID) : {}
-      return tree && tree.children ? tree.children.length > 0 : false
+      return this.pageList.filter(value => value.selfID === pageID && value.moduleID === NoID) || []
     },
 
-    loadTree () {
+    loadPages () {
       const { namespaceID } = this.namespace
       this.$ComposeAPI
         .pageList({ namespaceID, sort: 'title' })
-        .then(({ set: tree }) => {
-          this.tree = tree.map(p => new compose.Page(p)).filter(p => p.moduleID === NoID)
+        .then(({ set: pages }) => {
+          this.pageList = pages.map(p => new compose.Page(p)).filter(p => p.moduleID === NoID)
         })
         .catch(this.toastErrorHandler(this.$t('notification:page.loadFailed')))
     },
 
     updateLabelValue (pageID) {
       if (!this.options.item.label) {
-        const composePage = this.tree.find(t => t.pageID === pageID)
+        const composePage = this.pageList.find(t => t.pageID === pageID)
         this.options.item.label = composePage ? composePage.title : ''
       }
     },
diff --git a/client/web/compose/src/components/PageBlocks/Navigation/NavTypes/Dropdown.vue b/client/web/compose/src/components/PageBlocks/Navigation/NavTypes/Dropdown.vue
index fd7b04b4cf..540f87ffaf 100644
--- a/client/web/compose/src/components/PageBlocks/Navigation/NavTypes/Dropdown.vue
+++ b/client/web/compose/src/components/PageBlocks/Navigation/NavTypes/Dropdown.vue
@@ -50,10 +50,7 @@
             <th style="min-width: 200px;">
               {{ $t("navigation.url") }}
             </th>
-            <th
-              class="text-center"
-              style="min-width: 200px;"
-            >
+            <th style="min-width: 200px;">
               {{ $t('navigation.openIn') }}
             </th>
             <th
@@ -96,8 +93,8 @@
             </td>
 
             <td class="align-middle text-center">
-              <b-form-group class="mb-0">
-                <b-form-checkbox
+              <b-form-group class="d-flex align-items-center justify-content-center mb-0">
+                <c-input-checkbox
                   v-model="item.delimiter"
                   switch
                   size="sm"
@@ -118,7 +115,7 @@
         <b-button
           variant="primary"
           class="text-decoration-none"
-          @click="options.item.dropdown.items.push({ text: '', url: '', target: 'sameTab' })"
+          @click="options.item.dropdown.items.push({ text: '', url: '', target: 'sameTab', delimiter: false })"
         >
           <font-awesome-icon
             :icon="['fas', 'plus']"
diff --git a/lib/js/src/compose/types/page-block/navigation/index.ts b/lib/js/src/compose/types/page-block/navigation/index.ts
index 13f9bc0144..4e8244f45a 100644
--- a/lib/js/src/compose/types/page-block/navigation/index.ts
+++ b/lib/js/src/compose/types/page-block/navigation/index.ts
@@ -39,13 +39,12 @@ export class PageBlockNavigation extends PageBlock {
   applyOptions (o?: Partial<Options>): void {
     if (!o) return
 
+    Apply(this.options, o, String, 'magnifyOption')
+
     this.options.navigationItems = (o.navigationItems || []).map(f => new NavigationItem(f))
 
-    if (o.display) {
-      this.options.display = o.display
-    }
+    this.options.display = { ...this.options.display, ...o.display }
 
-    Apply(this.options, o, String, 'magnifyOption')
   }
 
   static makeNavigationItem (item?: NavigationItemInput): NavigationItem {
diff --git a/lib/vue/src/components/input/CInputCheckbox.vue b/lib/vue/src/components/input/CInputCheckbox.vue
index 1a845b8cb0..af456c6d67 100644
--- a/lib/vue/src/components/input/CInputCheckbox.vue
+++ b/lib/vue/src/components/input/CInputCheckbox.vue
@@ -38,7 +38,6 @@ export default {
 
     labels: {
       type: Object,
-      required: true,
       default: () => ({}),
     },