From 09ed669ada790aa5cdcc8b06a8fd2569138a796c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C5=BEe=20Fortun?= <joze.fortun@gmail.com>
Date: Mon, 3 Apr 2023 19:02:10 +0200
Subject: [PATCH] Add action placement, variant and visible UI/UX

---
 .../src/components/Admin/Page/Tree.vue        | 22 +----
 .../src/components/Common/RecordToolbar.vue   |  8 +-
 .../compose/src/views/Admin/Pages/Builder.vue |  8 +-
 .../compose/src/views/Admin/Pages/Edit.vue    | 98 ++++++++++++++-----
 .../src/views/Public/Pages/Records/View.vue   | 35 ++++++-
 lib/js/src/compose/types/page-layout.ts       |  6 +-
 locale/en/corteza-webapp-compose/general.yaml |  9 ++
 7 files changed, 130 insertions(+), 56 deletions(-)

diff --git a/client/web/compose/src/components/Admin/Page/Tree.vue b/client/web/compose/src/components/Admin/Page/Tree.vue
index 369a28127..5a1f6ca68 100644
--- a/client/web/compose/src/components/Admin/Page/Tree.vue
+++ b/client/web/compose/src/components/Admin/Page/Tree.vue
@@ -57,7 +57,6 @@
             </router-link>
             <span class="view d-inline-block">
               <router-link
-                v-if="!hideViewPageButton(item)"
                 data-test-id="button-page-view"
                 :to="pageViewer(item)"
                 class="btn"
@@ -69,17 +68,7 @@
               class="d-none d-md-inline-block edit text-left"
             >
               <router-link
-                v-if="item.moduleID !== '0'"
-                v-b-tooltip.hover.top
-                data-test-id="button-module-edit"
-                :title="moduleName(item)"
-                class="btn text-primary"
-                :to="{ name: 'admin.modules.edit', params: { moduleID: item.moduleID }}"
-              >
-                {{ $t('moduleEdit') }}
-              </router-link>
-              <router-link
-                v-if="item.canUpdatePage && item.moduleID === '0'"
+                v-if="item.canUpdatePage"
                 :to="{name: 'admin.pages.edit', params: { pageID: item.pageID }}"
                 data-test-id="button-page-edit"
                 class="btn text-primary"
@@ -178,12 +167,9 @@ export default {
       return (this.getModuleByID(moduleID) || {}).name
     },
 
-    pageViewer ({ pageID = NoID }) {
-      return { name: 'page', params: { pageID } }
-    },
-
-    hideViewPageButton ({ blocks = {}, moduleID = NoID }) {
-      return blocks && blocks.length >= 1 && moduleID !== NoID
+    pageViewer ({ pageID = NoID, moduleID = NoID }) {
+      const name = moduleID !== NoID ? 'page.record.create' : 'page'
+      return { name, params: { pageID } }
     },
 
     handleChangePosition ({ beforeParent, data, afterParent }) {
diff --git a/client/web/compose/src/components/Common/RecordToolbar.vue b/client/web/compose/src/components/Common/RecordToolbar.vue
index 79a6d6d0d..e9fe70116 100644
--- a/client/web/compose/src/components/Common/RecordToolbar.vue
+++ b/client/web/compose/src/components/Common/RecordToolbar.vue
@@ -26,6 +26,8 @@
           />
           {{ showRecordModal ? $t('label.close') : labels.back || $t('label.back') }}
         </b-button>
+
+        <slot name="start-actions" />
       </b-col>
 
       <b-col
@@ -55,6 +57,8 @@
             <font-awesome-icon :icon="['fas', 'angle-right']" />
           </b-button>
         </b-button-group>
+
+        <slot name="center-actions" />
       </b-col>
 
       <b-col
@@ -116,6 +120,8 @@
             {{ labels.clone || $t('label.saveAsCopy') }}
           </b-button>
 
+          <slot name="end-actions" />
+
           <b-button
             v-if="!inEditing && isCreated && !(hideEdit || settings.hideEdit)"
             data-test-id="button-edit"
@@ -162,8 +168,6 @@
               {{ labels.submit || $t('label.save') }}
             </span>
           </b-button>
-
-          <slot name="actions" />
         </template>
       </b-col>
     </b-row>
diff --git a/client/web/compose/src/views/Admin/Pages/Builder.vue b/client/web/compose/src/views/Admin/Pages/Builder.vue
index 4f3fe038e..ce520ad25 100644
--- a/client/web/compose/src/views/Admin/Pages/Builder.vue
+++ b/client/web/compose/src/views/Admin/Pages/Builder.vue
@@ -31,7 +31,6 @@
         <b-button
           variant="primary"
           class="d-flex align-items-center"
-          :disabled="!pageViewer"
           :to="pageViewer"
         >
           {{ $t('navigation.viewPage') }}
@@ -385,11 +384,8 @@ export default {
     },
 
     pageViewer () {
-      if (this.module) {
-        return undefined
-      }
-
-      return { name: 'page', params: { pageID: this.pageID } }
+      const name = this.module ? 'page.record.create' : 'page'
+      return { name, params: { pageID: this.pageID } }
     },
 
     pageEditor () {
diff --git a/client/web/compose/src/views/Admin/Pages/Edit.vue b/client/web/compose/src/views/Admin/Pages/Edit.vue
index 5cb4beb81..8903a05c6 100644
--- a/client/web/compose/src/views/Admin/Pages/Edit.vue
+++ b/client/web/compose/src/views/Admin/Pages/Edit.vue
@@ -34,7 +34,6 @@
         <b-button
           variant="primary"
           :title="$t('tooltip.view')"
-          :disabled="!pageViewer"
           :to="pageViewer"
           class="d-flex align-items-center"
           style="margin-left:2px;"
@@ -299,7 +298,7 @@
       :ok-title="$t('general:label.saveAndClose')"
       ok-variant="primary"
       cancel-variant="link"
-      size="lg"
+      size="xl"
       @ok="updateLayout()"
       @cancel="layoutEditor.layout = undefined"
       @hide="layoutEditor.layout = undefined"
@@ -396,13 +395,13 @@
           label-class="text-primary"
         >
           <b-table-simple
-            responsive="lg"
+            responsive
             borderless
             small
           >
             <b-thead>
               <tr>
-                <th />
+                <th style="width: 1%;" />
 
                 <th
                   class="text-primary"
@@ -413,16 +412,30 @@
 
                 <th
                   class="text-primary"
-                  style="width: 33%; min-width: 240px;"
+                  style="width: 25%; min-width: 240px;"
                 >
-                  Type
+                  Redirect to layout
                 </th>
 
                 <th
+                  style="min-width: 100px;"
                   class="text-primary"
-                  style="width: 33%; min-width: 240px;"
                 >
-                  Options
+                  Variant
+                </th>
+
+                <th
+                  style="min-width: 100px;"
+                  class="text-primary"
+                >
+                  Placement
+                </th>
+
+                <th
+                  style="min-width: 80px;"
+                  class="text-primary text-center"
+                >
+                  Visible
                 </th>
 
                 <th style="min-width: 80px;" />
@@ -454,15 +467,6 @@
                   />
                 </b-td>
 
-                <b-td
-                  class="align-middle"
-                >
-                  <b-form-select
-                    v-model="action.kind"
-                    :options="actionKindOptions"
-                  />
-                </b-td>
-
                 <b-td
                   class="align-middle"
                 >
@@ -474,14 +478,41 @@
                   />
                 </b-td>
 
-                <td
-                  class="text-center align-middle"
+                <b-td
+                  class="align-middle"
+                >
+                  <b-form-select
+                    v-model="action.meta.style.variant"
+                    :options="actionVariantOptions"
+                  />
+                </b-td>
+
+                <b-td
+                  class="align-middle"
+                >
+                  <b-form-select
+                    v-model="action.placement"
+                    :options="actionPlacementOptions"
+                  />
+                </b-td>
+
+                <b-td
+                  class="align-middle text-center"
+                >
+                  <b-form-checkbox
+                    v-model="action.enabled"
+                    class="ml-2"
+                  />
+                </b-td>
+
+                <b-td
+                  class="align-middle text-center"
                 >
                   <c-input-confirm
                     class="ml-2"
                     @confirmed="removeLayoutAction(index)"
                   />
-                </td>
+                </b-td>
               </tr>
             </draggable>
           </b-table-simple>
@@ -712,11 +743,9 @@ export default {
     },
 
     pageViewer () {
-      if (this.isRecordPage) {
-        return undefined
-      }
       const { pageID } = this.page
-      return { name: 'page', params: { pageID } }
+      const name = this.isRecordPage ? 'page.record.create' : 'page'
+      return { name, params: { pageID } }
     },
 
     isRecordPage () {
@@ -794,6 +823,27 @@ export default {
           .map(({ pageLayoutID, handle, meta }) => ({ pageLayoutID, label: meta.title || handle || pageLayoutID })),
       ]
     },
+
+    actionPlacementOptions () {
+      return [
+        { value: 'start', text: 'Start' },
+        { value: 'center', text: 'Center' },
+        { value: 'end', text: 'End' },
+      ]
+    },
+
+    actionVariantOptions () {
+      return [
+        { text: this.$t('general:variants.primary'), value: 'primary' },
+        { text: this.$t('general:variants.secondary'), value: 'secondary' },
+        { text: this.$t('general:variants.success'), value: 'success' },
+        { text: this.$t('general:variants.warning'), value: 'warning' },
+        { text: this.$t('general:variants.danger'), value: 'danger' },
+        { text: this.$t('general:variants.info'), value: 'info' },
+        { text: this.$t('general:variants.light'), value: 'light' },
+        { text: this.$t('general:variants.dark'), value: 'dark' },
+      ]
+    },
   },
 
   watch: {
diff --git a/client/web/compose/src/views/Public/Pages/Records/View.vue b/client/web/compose/src/views/Public/Pages/Records/View.vue
index e5961dc7f..de2713d01 100644
--- a/client/web/compose/src/views/Public/Pages/Records/View.vue
+++ b/client/web/compose/src/views/Public/Pages/Records/View.vue
@@ -55,16 +55,41 @@
         @submit="handleFormSubmit('page.record')"
         @update-navigation="handleRedirectToPrevOrNext"
       >
-        <template #actions>
+        <template #start-actions>
           <b-button
-            v-for="(action, index) in layoutActions"
+            v-for="(action, index) in layoutActions.filter(a => a.placement === 'start')"
             :key="index"
-            variant="primary"
+            :variant="action.meta.style.variant"
             size="lg"
             class="ml-2"
             @click.prevent="determineLayout(action.params.pageLayoutID)"
           >
-            {{ action.Meta.label }}
+            {{ action.meta.label }}
+          </b-button>
+        </template>
+
+        <template #center-actions>
+          <b-button
+            v-for="(action, index) in layoutActions.filter(a => a.placement === 'center')"
+            :key="index"
+            :variant="action.meta.style.variant"
+            size="lg"
+            @click.prevent="determineLayout(action.params.pageLayoutID)"
+          >
+            {{ action.meta.label }}
+          </b-button>
+        </template>
+
+        <template #end-actions>
+          <b-button
+            v-for="(action, index) in layoutActions.filter(a => a.placement === 'end')"
+            :key="index"
+            :variant="action.meta.style.variant"
+            size="lg"
+            class="ml-2"
+            @click.prevent="determineLayout(action.params.pageLayoutID)"
+          >
+            {{ action.meta.label }}
           </b-button>
         </template>
       </record-toolbar>
@@ -178,7 +203,7 @@ export default {
       const { config = {} } = this.layout || {}
       const { actions = [] } = config
 
-      return actions
+      return actions.filter(({ enabled }) => enabled)
     },
 
     title () {
diff --git a/lib/js/src/compose/types/page-layout.ts b/lib/js/src/compose/types/page-layout.ts
index abf5f8bef..441d57a9d 100644
--- a/lib/js/src/compose/types/page-layout.ts
+++ b/lib/js/src/compose/types/page-layout.ts
@@ -110,12 +110,16 @@ export class PageLayout {
   addAction () {
     this.config.actions.push({
       kind: 'toLayout',
-      placement: '',
+      placement: 'end',
+      enabled: true,
       params: {
         pageLayoutID: '',
       },
       meta: {
         label: '',
+        style: {
+          variant: 'primary'
+        }
       },
     } as Action)
   }
diff --git a/locale/en/corteza-webapp-compose/general.yaml b/locale/en/corteza-webapp-compose/general.yaml
index 0aebdc375..811484792 100644
--- a/locale/en/corteza-webapp-compose/general.yaml
+++ b/locale/en/corteza-webapp-compose/general.yaml
@@ -151,3 +151,12 @@ resourceList:
 recordNavigation:
   next: Next record
   prev: Previous record
+variants:
+  primary: Primary
+  secondary: Secondary
+  light: Light
+  dark: Dark
+  info: Info
+  success: Success
+  danger: Danger
+  warning: Warning
\ No newline at end of file