Add functionality to create and use global block

Author: kelanik8

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

@@ -33,30 +33,32 @@
       </b-col>
 
       <hr
-        v-if="existingBlocks.length"
+        v-if="existingLayoutBlocks.length || selectableGlobalBlocks.length"
         class="w-100"
       >
 
       <b-col
-        v-if="existingBlocks.length"
+        v-if="existingLayoutBlocks.length"
         cols="12"
+        class="mt-3"
       >
         <b-input-group class="d-flex w-100">
           <c-input-select
-            v-model="selectedExistingBlock"
+            v-model="selectedLayoutBlock"
             :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="!selectedLayoutBlock"
               class="d-flex align-items-center"
-              @click="$emit('select', selectedExistingBlock.clone())"
+              @click="selectBlock(selectedLayoutBlock, true)"
             >
               <font-awesome-icon
                 :icon="['far', 'clone']"
@@ -66,9 +68,51 @@
             <b-button
               v-b-tooltip.noninteractive.hover="{ title: $t('selector.tooltip.clone.ref'), container: '#body' }"
               variant="extra-light"
-              :disabled="!selectedExistingBlock"
+              :disabled="!selectedLayoutBlock"
               class="d-flex align-items-center"
-              @click="$emit('select', selectedExistingBlock)"
+              @click="selectBlock(selectedLayoutBlock)"
+            >
+              <font-awesome-icon
+                :icon="['far', 'copy']"
+              />
+            </b-button>
+          </b-input-group-append>
+        </b-input-group>
+      </b-col>
+
+      <b-col
+        v-if="selectableGlobalBlocks.length"
+        cols="12"
+      >
+        <b-input-group class="d-flex w-100">
+          <c-input-select
+            v-model="selectedGlobalBlock"
+            :get-option-label="getBlockLabel"
+            :get-option-key="b => b.blockID"
+            :options="selectableGlobalBlocks"
+            :reduce="b => b.blockID"
+            :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="!selectedGlobalBlock"
+              class="d-flex align-items-center"
+              @click="selectBlock(selectedGlobalBlock, true)"
+            >
+              <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="selectBlock(selectedGlobalBlock)"
             >
               <font-awesome-icon
                 :icon="['far', 'copy']"
@@ -101,7 +145,12 @@ export default {
       default: () => [],
     },
 
-    existingBlocks: {
+    existingLayoutBlocks: {
+      type: Array,
+      default: () => [],
+    },
+
+    selectableGlobalBlocks: {
       type: Array,
       default: () => [],
     },
@@ -111,7 +160,8 @@ export default {
     return {
       current: undefined,
 
-      selectedExistingBlock: undefined,
+      selectedLayoutBlock: undefined,
+      selectedGlobalBlock: undefined,
 
       types: [
         {
@@ -220,9 +270,26 @@ export default {
 
     setDefaultValues () {
       this.current = undefined
-      this.selectedExistingBlock = undefined
+      this.selectedLayoutBlock = undefined
+      this.selectedGlobalBlock = undefined
       this.types = []
     },
+
+    fetchBlockData (blockID) {
+      if (blockID.includes('-')) {
+        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

@@ -116,6 +116,17 @@
               {{ $t('general.border.show') }}
             </b-form-checkbox>
           </b-form-group>
+
+          <b-form-checkbox
+            v-if="block.kind !== 'Tabs'"
+            :checked="block.meta.namespaceID"
+            :value="namespace.namespaceID"
+            switch
+            class="mb-2"
+            @change="updateGlobalState"
+          >
+            {{ $t('general.globalBlock.label') }}
+          </b-form-checkbox>
         </b-col>
 
         <b-col
@@ -303,6 +314,11 @@ export default {
       type: compose.Page,
       required: true,
     },
+
+    namespace: {
+      type: compose.Namespace,
+      required: true,
+    },
   },
 
   data () {
@@ -312,6 +328,8 @@ export default {
         options: [],
       },
       abortableRequests: [],
+      initialBlockState: undefined,
+      initialBlockID: undefined,
     }
   },
 
@@ -371,6 +389,8 @@ export default {
   },
 
   created () {
+    this.initialBlockState = this.block.meta.namespaceID
+    this.initialBlockID = this.block.blockID
     this.fetchRoles()
   },
 
@@ -414,6 +434,16 @@ export default {
       }
       this.abortableRequests = []
     },
+
+    updateGlobalState (value) {
+      this.block.blockID = this.initialBlockState === value ? this.initialBlockID : NoID
+
+      if (value) {
+        this.block.meta.namespaceID = value
+      } else {
+        this.block.meta.namespaceID = undefined
+      }
+    },
   },
 }
 </script>

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/Modules/List.vue

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