Add page layout permissions modals

client/web/compose/src/components/Admin/Module/FieldRowEdit.vue

@@ -96,20 +96,19 @@
       class="text-right align-middle pr-2"
       style="min-width: 100px;"
     >
-      <c-input-confirm
-        :no-prompt="!value.name"
-        class="mr-2"
-        @confirmed="$emit('delete')"
-      />
       <c-permissions-button
         v-if="canGrant && exists"
-        class="text-dark px-0"
+        class="text-dark px-0 mr-2"
         button-variant="link"
         :title="value.label || value.name || value.fieldID"
         :target="value.label || value.name || value.fieldID"
         :tooltip="$t('permissions:resources.compose.module-field.tooltip')"
         :resource="`corteza::compose:module-field/${module.namespaceID}/${module.moduleID}/${value.fieldID}`"
       />
+
+      <c-input-confirm
+        @confirmed="$emit('delete')"
+      />
     </td>
   </tr>
 </template>

client/web/compose/src/views/Admin/Pages/Builder.vue

@@ -872,7 +872,7 @@ export default {
 
       this.layout = this.layout || this.layouts[0]
       if (!this.layout) {
-        this.toastWarning('notification:page.page-layout.notFound.edit')
+        this.toastWarning(this.$t('notification:page.page-layout.notFound.edit'))
         return this.$router.push(this.pageEditor)
       }
 

client/web/compose/src/views/Admin/Pages/Edit.vue

@@ -47,6 +47,48 @@
     </portal>
 
     <b-container fluid="xl">
+      <div
+        class="d-flex align-items-center mt-1 mb-2"
+      >
+        <b-dropdown
+          v-if="page.canGrant || namespace.canGrant"
+          data-test-id="dropdown-permissions"
+          size="lg"
+          variant="light"
+          class="permissions-dropdown mr-1"
+        >
+          <template #button-content>
+            <font-awesome-icon :icon="['fas', 'lock']" />
+            <span>
+              {{ $t('general:label.permissions') }}
+            </span>
+          </template>
+
+          <b-dropdown-item>
+            <c-permissions-button
+              v-if="namespace.canGrant"
+              :title="page.title || page.handle || page.pageID"
+              :target="page.title || page.handle || page.pageID"
+              :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
+              :title="page.title || page.handle || page.pageID"
+              :target="page.title || page.handle || page.pageID"
+              :resource="`corteza::compose:page-layout/${namespace.namespaceID}/${page.pageID}/*`"
+              :button-label="$t('general:label.pageLayout')"
+              :show-button-icon="false"
+              button-variant="white text-left w-100"
+            />
+          </b-dropdown-item>
+        </b-dropdown>
+      </div>
+
       <b-card
         no-body
         class="shadow-sm"
@@ -193,19 +235,19 @@
 
                     <th
                       class="text-primary"
-                      style="width: 45%; min-width: 200px;"
+                      style="min-width: 300px;"
                     >
                       {{ $t('page-layout.title') }}
                     </th>
 
                     <th
                       class="text-primary"
-                      style="width: 45%; min-width: 200px;"
+                      style="min-width: 300px;"
                     >
                       {{ $t('page-layout.handle') }}
                     </th>
 
-                    <th style="width: 80px;" />
+                    <th style="min-width: 100px;" />
                   </tr>
                 </b-thead>
 
@@ -259,6 +301,7 @@
                           <b-button
                             variant="light"
                             class="d-flex align-items-center px-3"
+                            :title="$t('page-layout.tooltip.configure')"
                             style="margin-left:2px;"
                             @click="configureLayout(index)"
                           >
@@ -270,6 +313,7 @@
                           <b-button
                             variant="primary"
                             :disabled="layout.pageLayoutID === '0'"
+                            :title="$t('page-layout.tooltip.builder')"
                             class="d-flex align-items-center"
                             :to="{ name: 'admin.pages.builder', query: { layoutID: layout.pageLayoutID} }"
                           >
@@ -284,20 +328,35 @@
                     <td
                       class="text-center align-middle"
                     >
+                      <c-permissions-button
+                        v-if="page.canGrant && layout.pageLayoutID !== '0'"
+                        button-variant="link"
+                        :title="layout.meta.title || layout.handle || layout.pageLayoutID"
+                        :target="layout.meta.title || layout.handle || layout.pageLayoutID"
+                        :tooltip="$t('permissions:resources.compose.page-layout.tooltip')"
+                        :resource="`corteza::compose:page-layout/${layout.namespaceID}/${layout.pageID}/${layout.pageLayoutID}`"
+                        class="text-dark px-0 mr-3"
+                      />
+
                       <c-input-confirm
-                        class="ml-2"
                         @confirmed="removeLayout(index)"
                       />
                     </td>
                   </tr>
                 </draggable>
+
+                <tr>
+                  <td />
+                  <td>
+                    <b-button
+                      variant="primary"
+                      @click="addLayout"
+                    >
+                      {{ $t('page-layout.add') }}
+                    </b-button>
+                  </td>
+                </tr>
               </b-table-simple>
-              <b-button
-                variant="primary"
-                @click="addLayout"
-              >
-                {{ $t('page-layout.add') }}
-              </b-button>
             </b-form-group>
           </b-col>
         </b-form-row>
@@ -359,7 +418,7 @@
         <hr>
 
         <h5 class="mb-3">
-          {{ $t('page-layout.recordToolbar') }}
+          {{ $t('page-layout.recordToolbar.label') }}
         </h5>
 
         <b-form-group
@@ -399,7 +458,7 @@
           <b-form-checkbox
             v-model="layoutEditor.layout.config.buttons.submit.enabled"
           >
-            {{ $t('page-layout.recordToolbar.buttons.showEdit') }}
+            {{ $t('page-layout.recordToolbar.buttons.showSave') }}
           </b-form-checkbox>
         </b-form-group>
 
@@ -418,20 +477,20 @@
 
                 <th
                   class="text-primary"
-                  style="width: 25%; min-width: 190px;"
+                  style="min-width: 250px;"
                 >
                   {{ $t('page-layout.recordToolbar.actions.buttonLabel') }}
                 </th>
 
                 <th
                   class="text-primary"
-                  style="width: 25%; min-width: 240px;"
+                  style="min-width: 250px;"
                 >
                   {{ $t('page-layout.recordToolbar.actions.layout.label') }}
                 </th>
 
                 <th
-                  style="min-width: 100px;"
+                  style="min-width: 150px;"
                   class="text-primary"
                 >
                   {{ $t('page-layout.recordToolbar.actions.variant') }}
@@ -528,13 +587,19 @@
                 </b-td>
               </tr>
             </draggable>
+
+            <tr>
+              <td />
+              <td>
+                <b-button
+                  variant="primary"
+                  @click="addLayoutAction"
+                >
+                  {{ $t('page-layout.recordToolbar.actions.add') }}
+                </b-button>
+              </td>
+            </tr>
           </b-table-simple>
-          <b-button
-            variant="primary"
-            @click="addLayoutAction"
-          >
-            Add action
-          </b-button>
         </b-form-group>
       </template>
     </b-modal>
@@ -899,7 +964,7 @@ export default {
 
     async fetchLayouts () {
       const { namespaceID } = this.namespace
-      return this.findLayoutsByPageID({ namespaceID, pageID: this.pageID }).then(layouts => {
+      return this.findLayoutsByPageID({ namespaceID, pageID: this.pageID, force: true }).then(layouts => {
         this.layouts = layouts
       })
     },
@@ -1080,3 +1145,11 @@ export default {
   outline: 2px solid $success;
 }
 </style>
+
+<style lang="scss">
+.permissions-dropdown {
+  .dropdown-item {
+    padding: 0;
+  }
+}
+</style>

client/web/compose/src/views/Public/Pages/Records/View.vue

@@ -393,7 +393,7 @@ export default {
       })
 
       if (!this.layout) {
-        this.toastWarning('notification:page.page-layout.notFound.view')
+        this.toastWarning(this.$t('notification:page.page-layout.notFound.view'))
         return this.$router.go(-1)
       }
 

client/web/compose/src/views/Public/Pages/View.vue

@@ -48,7 +48,6 @@
     </portal>
 
     <div
-      v-if="blocks"
       class="flex-grow-1 overflow-auto d-flex px-2 w-100"
     >
       <router-view
@@ -60,7 +59,7 @@
       />
 
       <grid
-        v-else
+        v-else-if="blocks"
         :namespace="namespace"
         :module="module"
         :page="page"
@@ -256,7 +255,7 @@ export default {
       })
 
       if (!this.layout) {
-        this.toastWarning('notification:page.page-layout.notFound.view')
+        this.toastWarning(this.$t('notification:page.page-layout.notFound.view'))
         return this.$router.go(-1)
       }
 

locale/en/corteza-webapp-compose/general.yaml

@@ -48,6 +48,8 @@ label:
   none: None
   now: Now
   ok: Ok
+  page: Page
+  pageLayout: Page layout
   pageBuilder: Page builder
   permissions: Permissions
   private: Private

locale/en/corteza-webapp-compose/page.yaml

@@ -4,6 +4,9 @@ page-layout:
   add: Add layout
   configure: 'Configure layout - "{{title}}"'
   visibility: Visibility
+  tooltip:
+    configure: Configure layout
+    builder: Open layout in builder
   condition:
     label: Condition
     placeholder: When will the layout be shown
@@ -11,6 +14,7 @@ page-layout:
     label: Roles
     placeholder: Pick roles that the layout will be shown to
   recordToolbar:
+    label: Record toolbar
     buttons:
       label: Buttons
       showBack: Show "Back" button
@@ -21,6 +25,7 @@ page-layout:
       showSave: Show "Save" button
     actions:
       label: Actions
+      add: Add action
       buttonLabel: Label
       variant: Variant
       visible: Visible

locale/en/corteza-webapp-compose/permissions.yaml

@@ -165,6 +165,24 @@ resources:
           specific: Update page "{{target}}"
           title: Update any page
 
+    page-layout:
+      all: all page layouts
+      specific: page layout "{{target}}"
+      tooltip: Page layout permissions
+      operations:
+        delete:
+          description: 'Default: deny'
+          specific: Delete page layout "{{target}}"
+          title: Delete any page layout
+        read:
+          description: 'Default: deny'
+          specific: Read page layout "{{target}}"
+          title: Read any page layout
+        update:
+          description: 'Default: deny'
+          specific: Update page layout "{{target}}"
+          title: Update any page layout
+
     record:
       all: all records
       specific: record "{{target}}"