Add base multi page layout implementation

gzf201314 · Apr 7, 2023 · e2e284c · e2e284c
1 parent 4f77edc
commit e2e284c
Show file tree

Hide file tree

Showing 24 changed files with 1,175 additions and 363 deletions.
diff --git a/client/web/compose/src/components/Admin/Module/RelatedPages.vue b/client/web/compose/src/components/Admin/Module/RelatedPages.vue
@@ -112,6 +112,7 @@ export default {
     ...mapActions({
       createPage: 'page/create',
       updatePage: 'page/update',
+      createPageLayout: 'pageLayout/create',
     }),
 
     handleRecordPageCreation () {
@@ -121,19 +122,21 @@ export default {
       const { namespaceID } = this.namespace
 
       // A simple record block w/o preselected fields
-      const blocks = [new compose.PageBlockRecord({ xywh: [0, 0, 12, 16] })]
+      const blocks = [new compose.PageBlockRecord({ xywh: [0, 0, 48, 82] })]
       const selfID = (this.recordListPage || {}).pageID || NoID
 
-      const page = {
+      const page = new compose.Page({
         namespaceID,
         moduleID,
         selfID,
         title: `${this.$t('forModule.recordPage')} "${name || moduleID}"`,
         blocks,
-      }
+      })
 
-      this.createPage(page)
-        .catch(this.toastErrorHandler(this.$t('notification:module.recordPage.createFailed')))
+      this.createPage(page).then(({ pageID, blocks }) => {
+        const pageLayout = new compose.PageLayout({ namespaceID, pageID, blocks, meta: { title: 'Primary' } })
+        return this.createPageLayout(pageLayout)
+      }).catch(this.toastErrorHandler(this.$t('notification:module.recordPage.createFailed')))
         .finally(() => {
           this.processing = false
         })
@@ -146,7 +149,7 @@ export default {
       const { name, moduleID } = this.module
 
       const blocks = [new compose.PageBlockRecordList({
-        xywh: [0, 0, 12, 17],
+        xywh: [0, 0, 48, 82],
         options: {
           moduleID,
           fields: [],
@@ -156,15 +159,19 @@ export default {
         },
       })]
 
-      const page = {
+      const page = new compose.Page({
         title: `${this.$t('forModule.recordList')} "${name || moduleID}"`,
         namespaceID,
         blocks,
-      }
+      })
 
       this.createPage(page)
-        .then(({ pageID: selfID = NoID }) => {
-          return this.updatePage({ ...this.recordPage, selfID })
+        .then(({ pageID = NoID, blocks }) => {
+          const pageLayout = new compose.PageLayout({ namespaceID, pageID, blocks, meta: { title: 'Primary' } })
+          return Promise.all([
+            this.updatePage({ ...this.recordPage, selfID: pageID }),
+            this.createPageLayout(pageLayout),
+          ])
         })
         .catch(this.toastErrorHandler(this.$t('notification:module.recordPage.createFailed')))
         .finally(() => {

diff --git a/client/web/compose/src/components/Admin/Page/Builder/Selector.vue b/client/web/compose/src/components/Admin/Page/Builder/Selector.vue
@@ -2,55 +2,101 @@
   <b-container fluid>
     <b-row>
       <b-col
-        cols="4"
+        cols="12"
       >
-        <b-list-group>
-          <b-list-group-item
-            v-for="(type) in types"
-            :key="type.label"
-            :disabled="isOptionDisabled(type)"
-            button
-            @click="$emit('select', type.block)"
-            @mouseover="current = type.image"
-          >
-            {{ type.label }}
-          </b-list-group-item>
-        </b-list-group>
+        <b-button
+          v-for="(type) in types"
+          :key="type.label"
+          :disabled="isOptionDisabled(type)"
+          variant="outline-light"
+          class="mr-2 mb-2 text-dark"
+          @click="$emit('select', type.block)"
+          @mouseover="current = type.image"
+        >
+          {{ type.label }}
+        </b-button>
       </b-col>
       <b-col
-        cols="8"
-        class="my-auto"
+        cols="12"
       >
-        <b-img
-          v-if="current"
-          fluid
-          thumbnail
-          :src="current"
-        />
-      </b-col>
-    </b-row>
-    <b-row
-      class="border-top mt-2"
-    >
-      <b-col>
         <div
-          class="mt-2"
+          class="d-flex"
+          style="height: 300px"
         >
-          {{ $t('selectBlockFootnote') }}
+          <b-img
+            v-if="current"
+            :src="current"
+            center
+            fluid
+            class="mx-auto"
+          />
         </div>
       </b-col>
+
+      <hr
+        v-if="existingBlocks.length"
+        class="w-100"
+      >
+
+      <b-col
+        v-if="existingBlocks.length"
+        cols="12"
+      >
+        <b-input-group class="d-flex w-100">
+          <vue-select
+            v-model="selectedExistingBlock"
+            :get-option-label="getBlockLabel"
+            :options="existingBlocks"
+            :calculate-position="calculateDropdownPosition"
+            placeholder="Blocks from other layouts"
+            append-to-body
+            class="block-selector bg-white position-relative"
+          />
+
+          <b-input-group-append>
+            <b-button
+              title="Clone block without reference"
+              variant="light"
+              :disabled="!selectedExistingBlock"
+              class="d-flex align-items-center"
+              @click="$emit('select', selectedExistingBlock.clone())"
+            >
+              <font-awesome-icon
+                :icon="['far', 'clone']"
+              />
+            </b-button>
+            <b-button
+              title="Copy block with references"
+              variant="light"
+              :disabled="!selectedExistingBlock"
+              class="d-flex align-items-center"
+              @click="$emit('select', selectedExistingBlock)"
+            >
+              <font-awesome-icon
+                :icon="['far', 'copy']"
+              />
+            </b-button>
+          </b-input-group-append>
+        </b-input-group>
+      </b-col>
     </b-row>
   </b-container>
 </template>
+
 <script>
-import { compose } from '@cortezaproject/corteza-js'
 import * as images from '../../../../assets/PageBlocks'
+import { VueSelect } from 'vue-select'
+import { compose } from '@cortezaproject/corteza-js'
 
 export default {
   i18nOptions: {
     namespaces: 'block',
   },
 
+  components: {
+    VueSelect,
+  },
+
   props: {
     recordPage: {
       type: Boolean,
@@ -61,11 +107,19 @@ export default {
       type: Array,
       default: () => [],
     },
+
+    existingBlocks: {
+      type: Array,
+      default: () => [],
+    },
   },
 
   data () {
     return {
       current: undefined,
+
+      selectedExistingBlock: undefined,
+
       types: [
         {
           label: this.$t('automation.label'),
@@ -172,6 +226,50 @@ export default {
     isOptionDisabled (type) {
       return (!this.recordPage && type.recordPageOnly) || this.disabledKinds.includes(type.block.kind)
     },
+
+    getBlockLabel ({ title, kind }) {
+      return title || kind
+    },
   },
 }
 </script>
+
+<style lang="scss">
+.block-selector {
+  position: relative;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  width: 1%;
+  margin-bottom: 0;
+}
+
+.block-selector {
+  &:not(.vs--open) .vs__selected + .vs__search {
+    // force this to not use any space
+    // we still need it to be rendered for the focus
+    width: 0;
+    padding: 0;
+    margin: 0;
+    border: none;
+    height: 0;
+  }
+
+  .vs__selected-options {
+    // do not allow growing
+    width: 0;
+  }
+
+  .vs__selected {
+    display: block;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    max-width: 100%;
+    overflow: hidden;
+  }
+}
+
+.vs__dropdown-menu .vs__dropdown-option {
+  text-overflow: ellipsis;
+  overflow: hidden !important;
+}
+</style>