Add 3-dots menu to resource lists

client/web/admin/src/components/Apigw/CRouteList.vue

@@ -35,7 +35,9 @@
 
       }"
       class="h-100"
+      clickable
       @search="filterList"
+      @row-clicked="handleRowClicked"
     >
       <template #header>
         <b-button
@@ -61,25 +63,13 @@
           v-if="canGrant"
           data-test-id="button-permissions"
           resource="corteza::system:apigw-route/*"
-          button-variant="light"
-          class="ml-1"
+          button-variant="link text-decoration-none text-dark regular-font rounded-0"
+          class="text-dark d-print-none border-0"
         >
           <font-awesome-icon :icon="['fas', 'lock']" />
           {{ $t('permissions') }}
         </c-permissions-button>
 
-        <b-dropdown
-          v-if="false"
-          variant="link"
-          right
-          menu-class="shadow-sm"
-          :text="$t('export')"
-        >
-          <b-dropdown-item-button variant="link">
-            {{ $t('yaml') }}
-          </b-dropdown-item-button>
-        </b-dropdown>
-
         <c-resource-list-status-filter
           v-model="filter.deleted"
           data-test-id="filter-deleted-routes"
@@ -92,23 +82,72 @@
         />
       </template>
 
-      <template #actions="{ item }">
-        <b-button
-          size="sm"
-          variant="link"
-          :to="{ name: editRoute, params: { [primaryKey]: item[primaryKey] } }"
+      <template #actions="{ item: r }">
+        <b-dropdown
+          v-if="(areActionsVisible({ resource: r, conditions: ['canDeleteApigwRoute', 'canGrant'] }))"
+          boundary="viewport"
+          variant="outline-light"
+          toggle-class="d-flex align-items-center justify-content-center text-primary border-0 py-2"
+          no-caret
+          dropleft
+          lazy
+          menu-class="m-0"
         >
-          <font-awesome-icon
-            :icon="['fas', 'pen']"
-          />
-        </b-button>
+          <template #button-content>
+            <font-awesome-icon
+              :icon="['fas', 'ellipsis-v']"
+            />
+          </template>
+
+          <b-dropdown-item
+            v-if="r.routeID && canGrant"
+          >
+            <c-permissions-button
+              :title="r.endpoint || r.routeID"
+              :target="r.endpoint || r.routeID"
+              :resource="`corteza::system:apigw-route/${r.routeID}`"
+              button-variant="link"
+              class="d-print-none border-0 text-decoration-none text-dark regular-font rounded-0"
+            >
+              <font-awesome-icon :icon="['fas', 'lock']" />
+
+              {{ $t('permissions') }}
+            </c-permissions-button>
+          </b-dropdown-item>
+
+          <b-dropdown-item
+            v-if="r.canDeleteApigwRoute"
+          >
+            <c-input-confirm
+              borderless
+              variant="link"
+              size="md"
+              button-class="text-decoration-none text-dark regular-font rounded-0"
+              class="w-100"
+              @confirmed="handleDelete(r)"
+            >
+              <font-awesome-icon
+                :icon="['far', 'trash-alt']"
+                class="text-danger"
+              />
+              <span
+                v-if="!r.deletedAt"
+                class="p-1"
+              >{{ $t('delete') }}</span>
+              <span
+                v-else
+                class="p-1"
+              >{{ $t('undelete') }}</span>
+            </c-input-confirm>
+          </b-dropdown-item>
+        </b-dropdown>
       </template>
     </c-resource-list>
   </b-card>
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
+import { mapGetters, mapActions } from 'vuex'
 import listHelpers from 'corteza-webapp-admin/src/mixins/listHelpers'
 import moment from 'moment'
 import { components } from '@cortezaproject/corteza-vue'
@@ -163,8 +202,7 @@ export default {
         },
         {
           key: 'actions',
-          label: '',
-          tdClass: 'text-right',
+          class: 'actions',
         },
       ].map(c => ({
         ...c,
@@ -189,9 +227,22 @@ export default {
   },
 
   methods: {
+    ...mapActions({
+      incLoader: 'ui/incLoader',
+      decLoader: 'ui/decLoader',
+    }),
+
     items () {
       return this.procListResults(this.$SystemAPI.apigwRouteList(this.encodeListParams()))
     },
+
+    handleDelete (route) {
+      this.handleItemDelete({
+        resource: route,
+        resourceName: 'apigwRoute',
+        locale: 'gateway',
+      })
+    },
   },
 }
 </script>

client/web/admin/src/components/CTheMainNav.vue

@@ -22,6 +22,7 @@
     </b-list-group>
   </div>
 </template>
+
 <script>
 import { mapGetters } from 'vuex'
 import { components } from '@cortezaproject/corteza-vue'

client/web/admin/src/components/Connection/CExternalConnectionList.vue

@@ -32,8 +32,10 @@
         resourceSingle: $t('general:label.connection.single'),
         resourcePlural: $t('general:label.connection.plural')
       }"
+      clickable
       hide-search
       class="h-100"
+      @row-clicked="handleRowClicked"
     >
       <template #header>
         <b-button
@@ -55,16 +57,49 @@
         />
       </template>
 
-      <template #actions="{ item }">
-        <b-button
-          size="sm"
-          variant="link"
-          :to="{ name: editRoute, params: { [primaryKey]: item[primaryKey] } }"
+      <template #actions="{ item: c }">
+        <b-dropdown
+          v-if="c.canDeleteConnection"
+          variant="outline-light"
+          toggle-class="d-flex align-items-center justify-content-center text-primary border-0 py-2"
+          no-caret
+          dropleft
+          lazy
+          menu-class="m-0"
         >
-          <font-awesome-icon
-            :icon="['fas', 'pen']"
-          />
-        </b-button>
+          <template #button-content>
+            <font-awesome-icon
+              :icon="['fas', 'ellipsis-v']"
+            />
+          </template>
+
+          <b-dropdown-item>
+            <c-input-confirm
+              borderless
+              variant="link"
+              size="md"
+              button-class="dropdown-item text-decoration-none text-dark regular-font rounded-0"
+              class="w-100"
+              @confirmed="handleDelete(c)"
+            >
+              <font-awesome-icon
+                :icon="['far', 'trash-alt']"
+                class="text-danger"
+              />
+              <span
+                v-if="!c.deletedAt"
+                class="p-1"
+              >{{ $t('delete') }}
+              </span>
+
+              <span
+                v-else
+                class="p-1"
+              >{{ $t('undelete') }}
+              </span>
+            </c-input-confirm>
+          </b-dropdown-item>
+        </b-dropdown>
       </template>
     </c-resource-list>
   </b-card>
@@ -131,8 +166,7 @@ export default {
         },
         {
           key: 'actions',
-          label: '',
-          class: 'text-right',
+          class: 'actions',
         },
       ].map(c => ({
         // Generate column label translation key
@@ -143,9 +177,18 @@ export default {
   },
 
   methods: {
+
     items () {
       return this.procListResults(this.$SystemAPI.dalConnectionList(this.encodeListParams()))
     },
+
+    handleDelete (connection) {
+      this.handleItemDelete({
+        resource: connection,
+        resourceName: 'dalConnection',
+        locale: 'connection',
+      })
+    },
   },
 }
 </script>

client/web/admin/src/components/faIcons.js

@@ -47,6 +47,7 @@ import {
   faQuestion,
   faStamp,
   faInfoCircle,
+  faEllipsisV,
 } from '@fortawesome/free-solid-svg-icons'
 
 import {
@@ -111,4 +112,5 @@ library.add(
   faQuestion,
   faStamp,
   faInfoCircle,
+  faEllipsisV,
 )

client/web/admin/src/mixins/listHelpers.js

@@ -197,5 +197,39 @@ export default {
     genericRowClass (item) {
       return { 'text-secondary': item && !!item.deletedAt }
     },
+
+    handleRowClicked (item) {
+      this.$router.push({ name: this.editRoute, params: { [this.primaryKey]: item[this.primaryKey] } })
+    },
+
+    handleItemDelete ({ resource, resourceName, locale, api = 'system' }) {
+      this.incLoader()
+      const { deletedAt = '' } = resource
+      const method = deletedAt ? `${resourceName}Undelete` : `${resourceName}Delete`
+      const event = deletedAt ? 'undelete' : 'delete'
+      const toastLocale = locale || resourceName
+      const API = api === 'system' ? this.$SystemAPI : this.$AutomationAPI
+
+      API[method](resource)
+        .then(() => {
+          this.toastSuccess(this.$t(`notification:${toastLocale}.${event}.success`))
+          this.filterList()
+        })
+        .catch(this.toastErrorHandler(this.$t(`notification:${toastLocale}.${event}.error`)))
+        .finally(() => {
+          this.decLoader()
+        })
+    },
+
+    areActionsVisible ({ resource, conditions = [] }) {
+      const condition = conditions.some(c => {
+        if (!resource[c]) {
+          return false
+        }
+
+        return true
+      })
+      return condition
+    },
   },
 }

client/web/admin/src/views/Automation/Session/List.vue

@@ -26,10 +26,12 @@
         resourceSingle: $t('general:label.session.single'),
         resourcePlural: $t('general:label.session.plural')
       }"
+      clickable
       sticky-header
       hide-search
       hide-total
       class="custom-resource-list-height-no-buttons"
+      @row-clicked="handleRowClicked"
     >
       <template #header>
         <b-row>
@@ -172,10 +174,6 @@ export default {
           sortable: true,
           formatter: (v) => new Date(v).toLocaleString('en-EN'),
         },
-        {
-          key: 'actions',
-          tdClass: 'text-right',
-        },
       ].map(c => ({
         ...c,
         // Generate column label translation key