From 7fdc854255dc1f44a2fd2e6f04ab2dd1000b58c3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C5=BEe=20Fortun?= <joze.fortun@gmail.com>
Date: Mon, 11 Sep 2023 13:47:09 +0200
Subject: [PATCH] Add permission dropdowns page list and page tree items

---
 .../src/components/Admin/Page/Tree.vue        | 191 +++++++++++++++---
 .../src/themes/corteza-base/custom.scss       |  10 +
 .../compose/src/views/Admin/Modules/Edit.vue  |   8 -
 .../compose/src/views/Admin/Modules/List.vue  |  71 ++++---
 .../compose/src/views/Admin/Pages/Edit.vue    |   8 -
 .../compose/src/views/Admin/Pages/List.vue    | 153 +++-----------
 6 files changed, 253 insertions(+), 188 deletions(-)

diff --git a/client/web/compose/src/components/Admin/Page/Tree.vue b/client/web/compose/src/components/Admin/Page/Tree.vue
index 50535f970..6e429ce72 100644
--- a/client/web/compose/src/components/Admin/Page/Tree.vue
+++ b/client/web/compose/src/components/Admin/Page/Tree.vue
@@ -12,17 +12,14 @@
       <template
         slot-scope="{item}"
       >
-        <b-row
+        <div
           v-if="item.pageID"
           no-gutters
-          class="wrap d-flex pr-2"
+          class="d-flex flex-wrap align-content-center justify-content-between pr-2"
         >
-          <b-col
-            cols="12"
-            xl="6"
-            lg="5"
-            class="flex-fill pl-2 overflow-hidden"
-            :class="{'grab': namespace.canCreatePage}"
+          <div
+            class="px-2 flex-fill overflow-hidden text-truncate"
+            :class="{'grab': namespace.canCreatePage }"
           >
             {{ item.title }}
             <span
@@ -40,17 +37,12 @@
             >
               {{ $t('invalid') }}
             </b-badge>
-          </b-col>
-          <b-col
-            cols="12"
-            xl="6"
-            lg="7"
-            class="text-right"
-          >
+          </div>
+
+          <div class="px-2">
             <b-button-group
               v-if="item.canUpdatePage"
               size="sm"
-              class="mr-1"
             >
               <b-button
                 data-test-id="button-page-builder"
@@ -92,17 +84,45 @@
               </b-button>
             </b-button-group>
 
-            <c-permissions-button
-              v-if="item.canGrant"
-              :title="item.title || item.handle || item.pageID"
-              :target="item.title || item.handle || item.pageID"
-              :resource="`corteza::compose:page/${namespace.namespaceID}/${item.pageID}`"
-              :tooltip="$t('permissions:resources.compose.page.tooltip')"
-              button-variant="outline-light"
-              class="text-dark d-print-none border-0"
-            />
-          </b-col>
-        </b-row>
+            <b-dropdown
+              v-if="item.canGrant || namespace.canGrant"
+              data-test-id="dropdown-permissions"
+              variant="light"
+              size="sm"
+              :title="$t('permissions:resources.compose.page.tooltip')"
+              class="permissions-dropdown ml-1"
+            >
+              <template #button-content>
+                <font-awesome-icon :icon="['fas', 'lock']" />
+              </template>
+
+              <b-dropdown-item>
+                <c-permissions-button
+                  v-if="namespace.canGrant"
+                  :title="item.title || item.handle || item.pageID"
+                  :target="item.title || item.handle || item.pageID"
+                  :resource="`corteza::compose:page/${namespace.namespaceID}/${item.pageID}`"
+                  :button-label="$t('general:label.page')"
+                  :show-button-icon="false"
+                  button-variant="white text-left w-100"
+                />
+              </b-dropdown-item>
+
+              <b-dropdown-item>
+                <c-permissions-button
+                  v-if="item.canGrant"
+                  :title="item.title || item.handle || item.pageID"
+                  :target="item.title || item.handle || item.pageID"
+                  :resource="`corteza::compose:page-layout/${namespace.namespaceID}/${item.pageID}/*`"
+                  :button-label="$t('general:label.pageLayout')"
+                  :show-button-icon="false"
+                  all-specific
+                  button-variant="white text-left w-100"
+                />
+              </b-dropdown-item>
+            </b-dropdown>
+          </div>
+        </div>
       </template>
     </sortable-tree>
 
@@ -235,9 +255,126 @@ export default {
   },
 }
 </script>
+
 <style lang="scss" scoped>
 .grab {
   cursor: grab;
   z-index: 1;
 }
 </style>
+
+<style lang="scss">
+//!important usage to over-ride library styling
+$input-height: 42px;
+$content-height: 48px;
+$blank-li-height: 10px;
+$left-padding: 5px;
+$border-color: $light;
+$hover-color: $gray-200;
+$dropping-color: $secondary;
+
+.page-name-input {
+  height: $input-height;
+}
+
+.list-group {
+  .content {
+    height: 0 !important;
+  }
+
+  ul {
+    .content {
+      height: 100% !important;
+      min-height: $content-height !important;
+      line-height: $content-height !important;
+
+      &:hover {
+        background: $hover-color;
+      }
+    }
+  }
+
+  li {
+    white-space: nowrap;
+    background: $white;
+
+    &.blank-li {
+      height: $blank-li-height !important;
+
+      .sortable-tree {
+        max-height: 100%;
+      }
+
+      &:nth-last-of-type(1)::before {
+        border-left-color: $white !important;
+        height: 0;
+      }
+    }
+
+    &::before {
+      top: $content-height / -2 !important;
+      border-left-color: $white !important;
+    }
+
+    &::after {
+      height: $content-height !important;
+      top: $content-height / 2 !important;
+      border-color: $white !important;
+    }
+
+    &.parent-li:nth-last-child(2)::before {
+      height: $content-height !important;
+      top: $content-height / -2 !important;
+    }
+  }
+
+  .parent-li {
+    border-top: 1px solid $border-color;
+
+    .exist-li, .blank-li {
+      border-top: none;
+
+      &::after {
+        border-top: 2px solid $border-color !important;
+        margin-left: 0;
+      }
+
+      &::before {
+        border-left: 2px solid $border-color !important;
+      }
+    }
+
+    &.blank-li {
+      &::before {
+        border-left: 2px solid $border-color !important;
+      }
+    }
+
+    &.exist-li {
+      &::before {
+        border-color: $white !important;
+      }
+
+      .parent-li {
+        &.exist-li {
+          &::before {
+            border-color: $border-color !important;
+          }
+        }
+      }
+    }
+  }
+}
+
+.droper {
+  background: $dropping-color !important;
+}
+
+.pages-list-header {
+  min-height: $content-height;
+  background-color: $gray-200;
+  margin-bottom: -1.8rem !important;
+  border-bottom: 2px solid $light;
+  z-index: 1;
+}
+</style>
diff --git a/client/web/compose/src/themes/corteza-base/custom.scss b/client/web/compose/src/themes/corteza-base/custom.scss
index 9dc879b3f..49a9d4325 100644
--- a/client/web/compose/src/themes/corteza-base/custom.scss
+++ b/client/web/compose/src/themes/corteza-base/custom.scss
@@ -348,6 +348,16 @@ input[type="search"]::-webkit-search-cancel-button {
   cursor: pointer;
 }
 
+.permissions-dropdown {
+  li {
+    line-height: initial;
+  }
+
+  .dropdown-item {
+    padding: 0;
+  }
+}
+
 // Supporting CSS to improve print-to-PDF option
 @media print {
   @page {
diff --git a/client/web/compose/src/views/Admin/Modules/Edit.vue b/client/web/compose/src/views/Admin/Modules/Edit.vue
index 55c5400bf..a16c17f7d 100644
--- a/client/web/compose/src/views/Admin/Modules/Edit.vue
+++ b/client/web/compose/src/views/Admin/Modules/Edit.vue
@@ -889,11 +889,3 @@ export default {
   },
 }
 </script>
-
-<style lang="scss">
-.permissions-dropdown {
-  .dropdown-item {
-    padding: 0;
-  }
-}
-</style>
diff --git a/client/web/compose/src/views/Admin/Modules/List.vue b/client/web/compose/src/views/Admin/Modules/List.vue
index 0eaa4c4be..c42a8d668 100644
--- a/client/web/compose/src/views/Admin/Modules/List.vue
+++ b/client/web/compose/src/views/Admin/Modules/List.vue
@@ -116,7 +116,54 @@
         />
 
         <b-dropdown
-          v-if="m.canGrant || m.canDeleteModule"
+          v-if="m.canGrant"
+          data-test-id="dropdown-permissions"
+          size="sm"
+          variant="light"
+          :title="$t('permissions:resources.compose.module.tooltip')"
+          class="permissions-dropdown ml-1"
+        >
+          <template #button-content>
+            <font-awesome-icon :icon="['fas', 'lock']" />
+          </template>
+
+          <b-dropdown-item>
+            <c-permissions-button
+              :title="m.name || m.handle || m.moduleID"
+              :target="m.name || m.handle || m.moduleID"
+              :resource="`corteza::compose:module/${namespace.namespaceID}/${m.moduleID}`"
+              :button-label="$t('general:label.module.single')"
+              :show-button-icon="false"
+              button-variant="white text-left w-100"
+            />
+          </b-dropdown-item>
+
+          <b-dropdown-item>
+            <c-permissions-button
+              :title="m.name || m.handle || m.moduleID"
+              :target="m.name || m.handle || m.moduleID"
+              :resource="`corteza::compose:module-field/${namespace.namespaceID}/${m.moduleID}/*`"
+              :button-label="$t('general:label.field')"
+              :show-button-icon="false"
+              all-specific
+              button-variant="white text-left w-100"
+            />
+          </b-dropdown-item>
+
+          <b-dropdown-item>
+            <c-permissions-button
+              :title="m.name || m.handle || m.moduleID"
+              :target="m.name || m.handle || m.moduleID"
+              :resource="`corteza::compose:record/${namespace.namespaceID}/${m.moduleID}/*`"
+              :button-label="$t('general:label.record')"
+              :show-button-icon="false"
+              all-specific
+              button-variant="white text-left w-100"
+            />
+          </b-dropdown-item>
+        </b-dropdown>
+
+        <b-dropdown
           variant="outline-light"
           toggle-class="d-flex align-items-center justify-content-center text-primary border-0 py-2 ml-1"
           no-caret
@@ -141,20 +188,6 @@
             {{ $t('allRecords.label') }}
           </b-dropdown-item>
 
-          <b-dropdown-item
-            v-if="m.canGrant"
-            link-class="p-0"
-          >
-            <c-permissions-button
-              :title="m.name || m.handle || m.moduleID"
-              :target="m.name || m.handle || m.moduleID"
-              :resource="`corteza::compose:module/${m.namespaceID}/${m.moduleID}`"
-              :tooltip="$t('permissions:resources.compose.module.tooltip')"
-              :button-label="$t('permissions:ui.label')"
-              button-variant="link dropdown-item text-decoration-none text-dark regular-font rounded-0"
-            />
-          </b-dropdown-item>
-
           <c-input-confirm
             v-if="m.canDeleteModule"
             borderless
@@ -343,11 +376,3 @@ export default {
   },
 }
 </script>
-
-<style lang="scss">
-.permissions-dropdown {
-  .dropdown-item {
-    padding: 0;
-  }
-}
-</style>
diff --git a/client/web/compose/src/views/Admin/Pages/Edit.vue b/client/web/compose/src/views/Admin/Pages/Edit.vue
index 605a00e0a..e203d7164 100644
--- a/client/web/compose/src/views/Admin/Pages/Edit.vue
+++ b/client/web/compose/src/views/Admin/Pages/Edit.vue
@@ -1305,11 +1305,3 @@ export default {
   outline: 2px solid $success;
 }
 </style>
-
-<style lang="scss">
-.permissions-dropdown {
-  .dropdown-item {
-    padding: 0;
-  }
-}
-</style>
diff --git a/client/web/compose/src/views/Admin/Pages/List.vue b/client/web/compose/src/views/Admin/Pages/List.vue
index 0e4a63e73..e228927e6 100644
--- a/client/web/compose/src/views/Admin/Pages/List.vue
+++ b/client/web/compose/src/views/Admin/Pages/List.vue
@@ -47,13 +47,38 @@
             </b-input-group>
           </div>
           <div class="d-flex justify-content-sm-end flex-grow-1">
-            <c-permissions-button
+            <b-dropdown
               v-if="namespace.canGrant"
-              :resource="`corteza::compose:page/${namespace.namespaceID}/*`"
-              class="btn-lg"
-              :button-label="$t('label.permissions')"
-              button-variant="light"
-            />
+              data-test-id="dropdown-permissions"
+              size="lg"
+              variant="light"
+              class="permissions-dropdown"
+            >
+              <template #button-content>
+                <font-awesome-icon :icon="['fas', 'lock']" />
+                <span>
+                  {{ $t('label.permissions') }}
+                </span>
+              </template>
+
+              <b-dropdown-item>
+                <c-permissions-button
+                  :resource="`corteza::compose:page/${namespace.namespaceID}/*`"
+                  :button-label="$t('general:label.page')"
+                  :show-button-icon="false"
+                  button-variant="white text-left w-100"
+                />
+              </b-dropdown-item>
+
+              <b-dropdown-item>
+                <c-permissions-button
+                  :resource="`corteza::compose:page-layout/${namespace.namespaceID}/*/*`"
+                  :button-label="$t('general:label.pageLayout')"
+                  :show-button-icon="false"
+                  button-variant="white text-left w-100"
+                />
+              </b-dropdown-item>
+            </b-dropdown>
           </div>
         </b-row>
         <b-row
@@ -197,119 +222,3 @@ export default {
   },
 }
 </script>
-<style lang="scss">
-//!important usage to over-ride library styling
-$input-height: 42px;
-$content-height: 48px;
-$blank-li-height: 10px;
-$left-padding: 5px;
-$border-color: $light;
-$hover-color: $gray-200;
-$dropping-color: $secondary;
-
-.page-name-input {
-  height: $input-height;
-}
-
-.sortable-tree {
-  .content {
-    height: 0 !important;
-  }
-
-  ul {
-    .content {
-      height: 100% !important;
-      min-height: $content-height !important;
-      line-height: $content-height !important;
-
-      &:hover {
-        background: $hover-color;
-      }
-    }
-  }
-
-  li {
-    white-space: nowrap;
-    background: $white;
-
-    &.blank-li {
-      height: $blank-li-height !important;
-
-      .sortable-tree {
-        max-height: 100%;
-      }
-
-      &:nth-last-of-type(1)::before {
-        border-left-color: $white !important;
-        height: 0;
-      }
-    }
-
-    &::before {
-      top: $content-height / -2 !important;
-      border-left-color: $white !important;
-    }
-
-    &::after {
-      height: $content-height !important;
-      top: $content-height / 2 !important;
-      border-color: $white !important;
-    }
-
-    &.parent-li:nth-last-child(2)::before {
-      height: $content-height !important;
-      top: $content-height / -2 !important;
-    }
-  }
-
-  .parent-li {
-    border-top: 1px solid $border-color;
-
-    .exist-li, .blank-li {
-      border-top: none;
-
-      &::after {
-        border-top: 2px solid $border-color !important;
-        margin-left: 0;
-      }
-
-      &::before {
-        border-left: 2px solid $border-color !important;
-      }
-    }
-
-    &.blank-li {
-      &::before {
-        border-left: 2px solid $border-color !important;
-      }
-    }
-
-    &.exist-li {
-      &::before {
-        border-color: $white !important;
-      }
-
-      .parent-li {
-        &.exist-li {
-          &::before {
-            border-color: $border-color !important;
-          }
-        }
-      }
-    }
-  }
-}
-
-.droper {
-  background: $dropping-color !important;
-}
-
-.pages-list-header {
-  min-height: $content-height;
-  background-color: $gray-200;
-  margin-bottom: -1.8rem !important;
-  border-bottom: 2px solid $light;
-  z-index: 1;
-}
-
-</style>