Add functionality to create and use global block

Author: kelanik8

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

@@ -33,30 +33,74 @@
       </b-col>
 
       <hr
-        v-if="existingBlocks.length"
+        v-if="existingLayoutBlocks.length || selectableNamespaceGlobalBlocks"
         class="w-100"
       >
 
       <b-col
-        v-if="existingBlocks.length"
+        v-if="selectableNamespaceGlobalBlocks.length"
         cols="12"
       >
         <b-input-group class="d-flex w-100">
           <c-input-select
-            v-model="selectedExistingBlock"
+            v-model="selectedGlobalBlock"
+            :get-option-label="getBlockLabel"
+            :get-option-key="getOptionKey"
+            :options="selectableNamespaceGlobalBlocks"
+            :reduce="b => b.blockID"
+            placeholder="Select global block from other pages"
+          />
+
+          <b-input-group-append>
+            <b-button
+              v-b-tooltip.noninteractive.hover="{ title: $t('selector.tooltip.clone.noRef'), container: '#body' }"
+              variant="extra-light"
+              :disabled="!selectedGlobalBlock"
+              class="d-flex align-items-center"
+              @click="$emit('select', fetchBlockData(selectedGlobalBlock).clone())"
+            >
+              <font-awesome-icon
+                :icon="['far', 'clone']"
+              />
+            </b-button>
+
+            <b-button
+              v-b-tooltip.noninteractive.hover="{ title: $t('selector.tooltip.clone.ref'), container: '#body' }"
+              variant="extra-light"
+              :disabled="!selectedGlobalBlock"
+              class="d-flex align-items-center"
+              @click="$emit('select', fetchBlockData(selectedGlobalBlock))"
+            >
+              <font-awesome-icon
+                :icon="['far', 'copy']"
+              />
+            </b-button>
+          </b-input-group-append>
+        </b-input-group>
+      </b-col>
+
+      <b-col
+        v-if="existingLayoutBlocks.length"
+        cols="12"
+        class="mt-3"
+      >
+        <b-input-group class="d-flex w-100">
+          <c-input-select
+            v-model="selectedLayoutExistingBlock"
             :get-option-label="getBlockLabel"
             :get-option-key="b => b.blockID"
-            :options="existingBlocks"
+            :options="existingLayoutBlocks"
+            :reduce="b => b.blockID"
             :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="!selectedExistingBlock"
+              :disabled="!selectedLayoutExistingBlock"
               class="d-flex align-items-center"
-              @click="$emit('select', selectedExistingBlock.clone())"
+              @click="$emit('select', fetchBlockData(selectedLayoutExistingBlock).clone())"
             >
               <font-awesome-icon
                 :icon="['far', 'clone']"
@@ -66,9 +110,9 @@
             <b-button
               v-b-tooltip.noninteractive.hover="{ title: $t('selector.tooltip.clone.ref'), container: '#body' }"
               variant="extra-light"
-              :disabled="!selectedExistingBlock"
+              :disabled="!selectedLayoutExistingBlock"
               class="d-flex align-items-center"
-              @click="$emit('select', selectedExistingBlock)"
+              @click="$emit('select', fetchBlockData(selectedLayoutExistingBlock))"
             >
               <font-awesome-icon
                 :icon="['far', 'copy']"
@@ -101,7 +145,12 @@ export default {
       default: () => [],
     },
 
-    existingBlocks: {
+    existingLayoutBlocks: {
+      type: Array,
+      default: () => [],
+    },
+
+    selectableNamespaceGlobalBlocks: {
       type: Array,
       default: () => [],
     },
@@ -111,7 +160,8 @@ export default {
     return {
       current: undefined,
 
-      selectedExistingBlock: undefined,
+      selectedLayoutExistingBlock: undefined,
+      selectedGlobalBlock: undefined,
 
       types: [
         {
@@ -225,9 +275,22 @@ export default {
 
     setDefaultValues () {
       this.current = undefined
-      this.selectedExistingBlock = undefined
+      this.selectedLayoutExistingBlock = 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.existingLayoutBlocks.find((b) => b.blockID === blockID)
+    },
   },
 }
 </script>

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

@@ -128,6 +128,16 @@
           >
             {{ $t('general.hidden.label') }}
           </b-form-checkbox>
+          <b-form-checkbox
+            v-if="block.kind !== 'Tabs'"
+            v-model="block.meta.namespaceID"
+            :value="namespace.namespaceID"
+            :disabled="alreadyGlobalBlock"
+            switch
+            class="mb-2"
+          >
+            {{ $t('general.globalBlock.label') }}
+          </b-form-checkbox>
         </b-col>
 
         <b-col
@@ -221,6 +231,17 @@ export default {
       type: compose.Page,
       required: true,
     },
+
+    namespace: {
+      type: compose.Namespace,
+      required: true,
+    },
+  },
+
+  data () {
+    return {
+      alreadyGlobalBlock: false,
+    }
   },
 
   computed: {
@@ -254,6 +275,17 @@ 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.
@@ -266,4 +298,4 @@ export default {
 .mh-tab {
   max-height: calc(100vh - 16rem);
 }
-</style>
+</style>import { watch } from 'fs'

client/web/compose/src/views/Admin/Modules/List.vue

@@ -1,4 +1,4 @@
-"<template>
+<template>
   <b-container
     fluid="xl"
     class="d-flex flex-column py-3"