wip

Author: kelanik8

client/web/compose/src/components/Admin/Page/Builder/Selector.vue

@@ -33,31 +33,32 @@
       </b-col>
 
       <hr
-        v-if="existingLayoutBlocks.length || selectableNamespaceGlobalBlocks"
+        v-if="existingLayoutBlocks.length || selectableGlobalBlocks.length"
         class="w-100"
       >
 
       <b-col
-        v-if="selectableNamespaceGlobalBlocks.length"
+        v-if="existingLayoutBlocks.length"
         cols="12"
+        class="mt-3"
       >
         <b-input-group class="d-flex w-100">
           <c-input-select
-            v-model="selectedGlobalBlock"
+            v-model="selectedLayoutBlock"
             :get-option-label="getBlockLabel"
-            :get-option-key="getOptionKey"
-            :options="selectableNamespaceGlobalBlocks"
+            :get-option-key="b => b.blockID"
+            :options="existingLayoutBlocks"
             :reduce="b => b.blockID"
-            placeholder="Select global block from other pages"
+            :placeholder="$t('selector.selectableBlocks.placeholder')"
           />
 
           <b-input-group-append>
             <b-button
               v-b-tooltip.noninteractive.hover="{ title: $t('selector.tooltip.clone.noRef'), container: '#body' }"
               variant="extra-light"
-              :disabled="!selectedGlobalBlock"
+              :disabled="!selectedLayoutBlock"
               class="d-flex align-items-center"
-              @click="$emit('select', fetchBlockData(selectedGlobalBlock).clone())"
+              @click="selectBlock(selectedLayoutBlock, true)"
             >
               <font-awesome-icon
                 :icon="['far', 'clone']"
@@ -67,9 +68,9 @@
             <b-button
               v-b-tooltip.noninteractive.hover="{ title: $t('selector.tooltip.clone.ref'), container: '#body' }"
               variant="extra-light"
-              :disabled="!selectedGlobalBlock"
+              :disabled="!selectedLayoutBlock"
               class="d-flex align-items-center"
-              @click="$emit('select', fetchBlockData(selectedGlobalBlock))"
+              @click="selectBlock(selectedLayoutBlock)"
             >
               <font-awesome-icon
                 :icon="['far', 'copy']"
@@ -80,27 +81,26 @@
       </b-col>
 
       <b-col
-        v-if="existingLayoutBlocks.length"
+        v-if="selectableGlobalBlocks.length"
         cols="12"
-        class="mt-3"
       >
         <b-input-group class="d-flex w-100">
           <c-input-select
-            v-model="selectedLayoutExistingBlock"
+            v-model="selectedGlobalBlock"
             :get-option-label="getBlockLabel"
             :get-option-key="b => b.blockID"
-            :options="existingLayoutBlocks"
+            :options="selectableGlobalBlocks"
             :reduce="b => b.blockID"
-            :placeholder="$t('selector.selectableBlocks.placeholder')"
+            :placeholder="$t('selector.selectableGlobalBlocks.placeholder')"
           />
 
           <b-input-group-append>
             <b-button
               v-b-tooltip.noninteractive.hover="{ title: $t('selector.tooltip.clone.noRef'), container: '#body' }"
               variant="extra-light"
-              :disabled="!selectedLayoutExistingBlock"
+              :disabled="!selectedGlobalBlock"
               class="d-flex align-items-center"
-              @click="$emit('select', fetchBlockData(selectedLayoutExistingBlock).clone())"
+              @click="selectBlock(selectedGlobalBlock, true)"
             >
               <font-awesome-icon
                 :icon="['far', 'clone']"
@@ -110,9 +110,9 @@
             <b-button
               v-b-tooltip.noninteractive.hover="{ title: $t('selector.tooltip.clone.ref'), container: '#body' }"
               variant="extra-light"
-              :disabled="!selectedLayoutExistingBlock"
+              :disabled="!selectedGlobalBlock"
               class="d-flex align-items-center"
-              @click="$emit('select', fetchBlockData(selectedLayoutExistingBlock))"
+              @click="selectBlock(selectedGlobalBlock)"
             >
               <font-awesome-icon
                 :icon="['far', 'copy']"
@@ -150,7 +150,7 @@ export default {
       default: () => [],
     },
 
-    selectableNamespaceGlobalBlocks: {
+    selectableGlobalBlocks: {
       type: Array,
       default: () => [],
     },
@@ -160,7 +160,7 @@ export default {
     return {
       current: undefined,
 
-      selectedLayoutExistingBlock: undefined,
+      selectedLayoutBlock: undefined,
       selectedGlobalBlock: undefined,
 
       types: [
@@ -275,22 +275,26 @@ export default {
 
     setDefaultValues () {
       this.current = undefined
-      this.selectedLayoutExistingBlock = undefined
+      this.selectedLayoutBlock = undefined
       this.selectedGlobalBlock = undefined
       this.types = []
     },
 
-    getOptionKey ({ blockID }) {
-      return blockID
-    },
-
     fetchBlockData (blockID) {
       if (blockID.includes('-')) {
-        return this.selectableNamespaceGlobalBlocks.find((b) => b.blockID === blockID)
+        return this.selectableGlobalBlocks.find((b) => b.blockID === blockID)
       }
 
       return this.existingLayoutBlocks.find((b) => b.blockID === blockID)
     },
+
+    selectBlock (block, clone = false) {
+      if (clone) {
+        this.$emit('select', this.fetchBlockData(block).clone())
+      } else {
+        this.$emit('select', this.fetchBlockData(block))
+      }
+    },
   },
 }
 </script>

client/web/compose/src/components/PageBlocks/Configurator.vue

@@ -130,11 +130,11 @@
           </b-form-checkbox>
           <b-form-checkbox
             v-if="block.kind !== 'Tabs'"
-            v-model="block.meta.namespaceID"
             :value="namespace.namespaceID"
-            :disabled="alreadyGlobalBlock"
+            :disabled="!!block.meta.namespaceID"
             switch
             class="mb-2"
+            @change="updateGlobalState"
           >
             {{ $t('general.globalBlock.label') }}
           </b-form-checkbox>
@@ -238,12 +238,6 @@ export default {
     },
   },
 
-  data () {
-    return {
-      alreadyGlobalBlock: false,
-    }
-  },
-
   computed: {
     textVariants () {
       return [
@@ -275,27 +269,21 @@ export default {
     },
   },
 
-  watch: {
-    block: {
-      immediate: true,
-      handler (block) {
-        if (block.meta.namespaceID && !this.alreadyGlobalBlock) {
-          this.alreadyGlobalBlock = !!block.meta.namespaceID
-        }
-      },
-    },
-  },
-
   methods: {
     updateRefresh (e) {
       // If value is less than 5 but greater than 0 make it 5. Otherwise value stays the same.
       this.block.options.refreshRate = e.target.value < 5 && e.target.value > 0 ? 5 : e.target.value
     },
+    updateGlobalState (value) {
+      if (value) {
+        this.block.meta.namespaceID = value
+      }
+    },
   },
 }
 </script>
 <style scoped>
 .mh-tab {
   max-height: calc(100vh - 16rem);
 }
-</style>import { watch } from 'fs'
+</style>

client/web/compose/src/store/namespace.js

@@ -37,6 +37,16 @@ export default function (ComposeAPI) {
       set (state) {
         return state.set
       },
+
+      getNamespaceBlocksByID (state, { getByID }) {
+        return (ID) => ((getByID(ID) || {}).blocks || []).map((b) => {
+          const ns = getByID(ID)
+          const block = compose.PageBlockMaker(b)
+          block.blockID = `${ns.namespaceID}-${b.blockID}`
+
+          return block
+        })
+      },
     },
 
     actions: {

client/web/compose/src/views/Admin/Pages/Builder.vue

@@ -174,7 +174,7 @@
       <new-block-selector
         :record-page="!!module"
         :existing-layout-blocks="selectableExistingLayoutBlocks"
-        :selectable-namespace-global-blocks="selectableNamespaceGlobalBlocks"
+        :selectable-global-blocks="selectableNamespaceGlobalBlocks"
         style="max-height: 75vh;"
         @select="addBlock"
       />
@@ -443,6 +443,7 @@ export default {
       getModuleByID: 'module/getByID',
       previousPage: 'ui/previousPage',
       namespaces: 'namespace/set',
+      getNamespaceBlocks: 'namespace/getNamespaceBlocksByID',
     }),
 
     trPage: {
@@ -508,19 +509,9 @@ export default {
 
     selectableNamespaceGlobalBlocks () {
       const { namespaceID } = this.namespace
-      const namespace = this.namespaces.find((n) => n.namespaceID === namespaceID)
 
-      if (!namespace) {
-        return []
-      }
-
-      return cloneDeep(namespace.blocks).map((b, i) => {
-        const block = compose.PageBlockMaker(b)
-        block.blockID = `${namespaceID}-${b.blockID}`
-
-        return block
-      }).filter(b => {
-        return !this.blocks.find(({ blockID }) => blockID === b.blockID)
+      return this.getNamespaceBlocks(namespaceID).filter(({ blockID }) => {
+        return !this.usedBlocks.some(b => b.blockID === blockID)
       })
     },
 
@@ -906,7 +897,7 @@ export default {
         this.findPageByID({ ...this.page, force: true }),
         this.findLayoutByID({ ...this.layout }),
       ]).then(async ([page, layout]) => {
-        let blocks = [
+        const blocks = [
           ...page.blocks.filter(({ blockID }) => {
             // Check if block exists in any other layout, if not delete it permanently
             return !this.blocks.some(b => b.blockID === blockID) && this.layouts.some(({ pageLayoutID, blocks }) => pageLayoutID !== layout.pageLayoutID && blocks.some(b => b.blockID === blockID))
@@ -921,14 +912,16 @@ export default {
           b.meta.namespaceID ? namespaceBlocks.push(b) : pageBlocks.push(b)
         })
 
+        console.log('namespaceBlocks', namespaceBlocks)
+
         const updatedGlobalBlocks = await this.processGlobalBlocks(namespaceBlocks)
 
         return this.updatePage({ namespaceID, ...page, blocks: pageBlocks })
           .then(this.updateTabbedBlockIDs)
           .then(async page => {
             const blocks = this.blocks.map(({ blockID, meta, xywh }) => {
               // If the global blocks is a newly created global block
-              if (meta.namespaceID && !blockID.includes('-')) {
+              if (meta.namespaceID) {
                 blockID = (updatedGlobalBlocks.find(block => block.meta.tempID === meta.tempID) || {}).blockID
               } else if (blockID === NoID) {
                 blockID = (page.blocks.find(block => block.meta.tempID === meta.tempID) || {}).blockID
@@ -970,24 +963,21 @@ export default {
 
       let { namespaceID, name, slug, enabled, meta } = this.namespace
 
-      // If new blocks are added to global blocks update the ID's
+      // Block ID is already reset
       const newGlobalBlocks = globalBlocks
-        // We can't detect new global block through NOID because there can be an existing local block that
-        // was now made global previously and make a global block which means it does have the NoID added to it
-        .filter(({ blockID }) => !blockID.includes('-'))
+        .filter(({ blockID }) => !blockID.includes(namespaceID))
         .map((block) => {
           block.meta.namespaceID = namespaceID
 
           return block
         })
 
-      // Update existing global blocks
-      const existingGlobalBlocks = this.namespace.blocks
+      const namespace = this.namespaces.find((n) => n.namespaceID === this.namespace.namespaceID)
+
+      const existingGlobalBlocks = namespace.blocks
 
-      // Update the state of the existing global blocks so the include the updated state changes
       globalBlocks.forEach((block) => {
-        block.blockID = String(block.blockID).replace(`${namespaceID}-`, '')
-        const matchingBlockIndex = existingGlobalBlocks.findIndex(({ blockID }) => blockID === block.blockID)
+        const matchingBlockIndex = existingGlobalBlocks.findIndex(({ meta }) => meta.tempID === block.meta.tempID)
 
         if (matchingBlockIndex > -1) {
           const normalBlockID = existingGlobalBlocks[matchingBlockIndex].blockID
@@ -1187,9 +1177,9 @@ export default {
             meta,
           }))
 
-          block.blockID = meta.namespaceID ? `${namespaceID}-${block.blockID}` : block.blockID
-
           if (block) {
+            block.blockID = meta.namespaceID ? `${namespaceID}-${block.blockID}` : block.blockID
+
             block.xywh = xywh
             block.meta.hidden = !!meta.hidden
             tempBlocks.push(block)
@@ -1255,11 +1245,9 @@ export default {
       blockID = fetchID({ blockID, meta })
 
       if (meta.namespaceID) {
-        const namespace = this.namespaces.find((n) => n.namespaceID === this.namespace.namespaceID)
+        const { blocks = [] } = this.namespaces.find((n) => n.namespaceID === this.namespace.namespaceID) || {}
 
-        if (namespace) {
-          return namespace.blocks.find((b) => fetchID(b) === blockID)
-        }
+        return blocks.find((b) => fetchID(b) === blockID)
       }
 
       return this.page.blocks.find((b) => fetchID(b) === blockID)
@@ -1293,4 +1281,4 @@ div.toolbox {
     right: auto;
   }
 }
-</style>
+</style>, includes

client/web/compose/src/views/Public/Pages/View.vue

@@ -156,6 +156,7 @@ export default {
     ...mapGetters({
       recordPaginationUsable: 'ui/recordPaginationUsable',
       getPageLayouts: 'pageLayout/getByPageID',
+      namespaces: 'namespace/set',
     }),
 
     isRecordPage () {
@@ -299,14 +300,17 @@ export default {
       document.title = [title, this.namespace.name, this.$t('general:label.app-name.public')].filter(v => v).join(' | ')
 
       this.blocks = (this.layout || {}).blocks.map(({ blockID, meta, xywh }) => {
+        console.log('{ blockID, meta, xywh }', { blockID, meta, xywh })
         const block = this.fetchBlockData({
           blockID,
           meta,
         })
 
-        block.xywh = xywh
-        return block
-      })
+        if (block) {
+          block.xywh = xywh
+          return block
+        }
+      }).filter(b => b)
     },
 
     refetchRecords () {
@@ -318,7 +322,11 @@ export default {
       blockID = fetchID({ blockID, meta })
 
       if (meta.namespaceID) {
-        return this.namespace.blocks.find((b) => fetchID(b) === blockID)
+        const namespace = this.namespaces.find((n) => n.namespaceID === this.namespace.namespaceID)
+
+        if (namespace) {
+          return namespace.blocks.find((b) => fetchID(b) === blockID)
+        }
       }
 
       return this.page.blocks.find((b) => fetchID(b) === blockID)