Add context menu to groups

changelog/unreleased/enhancement-add-context-menu-to-groups

@@ -0,0 +1,6 @@
+Enhancement: Add context menu to groups
+
+A context menu has been added to the groups management page in the admin settings. It can be toggled via right-click and quick-action.
+
+https://github.com/owncloud/web/pull/8317
+https://github.com/owncloud/web/issues/8316

packages/web-app-admin-settings/src/components/BatchActions.vue

@@ -0,0 +1,63 @@
+<template>
+  <div>
+    <oc-list
+      id="oc-appbar-batch-actions"
+      :class="{ 'oc-appbar-batch-actions-squashed': limitedScreenSpace }"
+    >
+      <action-menu-item
+        v-for="(action, index) in actions"
+        :key="`action-${index}`"
+        :action="action"
+        :items="selectedItems"
+        appearance="outline"
+        class="batch-actions oc-mr-s"
+        :show-tooltip="limitedScreenSpace"
+      />
+    </oc-list>
+  </div>
+</template>
+
+<script lang="ts">
+import ActionMenuItem from 'web-pkg/src/components/ContextActions/ActionMenuItem.vue'
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'BatchActions',
+  components: { ActionMenuItem },
+  props: {
+    selectedItems: {
+      type: Array,
+      required: true
+    },
+    actions: {
+      type: Array,
+      required: true
+    },
+    limitedScreenSpace: {
+      type: Boolean,
+      default: false,
+      required: false
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+#oc-appbar-batch-actions {
+  display: block;
+  li {
+    float: left !important;
+  }
+  @media only screen and (min-width: 1200px) {
+    li {
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+    align-items: center;
+    display: flex;
+  }
+}
+.oc-appbar-batch-actions-squashed .oc-files-context-action-label {
+  display: none;
+}
+</style>

packages/web-app-admin-settings/src/components/Groups/ContextActions.vue

@@ -0,0 +1,59 @@
+<template>
+  <div>
+    <context-action-menu :menu-sections="menuSections" :items="items" />
+  </div>
+</template>
+
+<script lang="ts">
+import ShowDetails from '../../mixins/showDetails'
+import Delete from '../../mixins/groups/delete'
+import { computed, defineComponent, getCurrentInstance, PropType, unref } from 'vue'
+import ContextActionMenu from 'web-pkg/src/components/ContextActions/ContextActionMenu.vue'
+import { Group } from 'web-client/src/generated'
+
+export default defineComponent({
+  name: 'ContextActions',
+  components: { ContextActionMenu },
+  mixins: [Delete, ShowDetails],
+  props: {
+    items: {
+      type: Array as PropType<Group[]>,
+      required: true
+    }
+  },
+  setup(props) {
+    const instance = getCurrentInstance().proxy
+
+    const filterParams = computed(() => ({ resources: props.items }))
+    const menuItemsPrimaryActions = computed(() =>
+      [...instance.$_delete_items].filter((item) => item.isEnabled(unref(filterParams)))
+    )
+
+    const menuItemsSidebar = computed(() =>
+      [...instance.$_showDetails_items].filter((item) => item.isEnabled(unref(filterParams)))
+    )
+
+    const menuSections = computed(() => {
+      const sections = []
+
+      if (unref(menuItemsPrimaryActions).length) {
+        sections.push({
+          name: 'primaryActions',
+          items: unref(menuItemsPrimaryActions)
+        })
+      }
+      if (unref(menuItemsSidebar).length) {
+        sections.push({
+          name: 'sidebar',
+          items: unref(menuItemsSidebar)
+        })
+      }
+      return sections
+    })
+
+    return {
+      menuSections
+    }
+  }
+})
+</script>

packages/web-app-admin-settings/src/components/Groups/GroupsList.vue

@@ -8,15 +8,18 @@
       autocomplete="off"
     />
     <oc-table
-      ref="table"
+      ref="tableRef"
       :sort-by="sortBy"
       :sort-dir="sortDir"
       :fields="fields"
       :data="data"
       :highlighted="highlighted"
       :sticky="true"
       :header-position="headerPosition"
+      :hover="true"
       @sort="handleSort"
+      @contextmenuClicked="showContextMenuOnRightClick"
+      @highlight="rowClicked"
     >
       <template #selectHeader>
         <oc-checkbox
@@ -32,11 +35,12 @@
         <oc-checkbox
           class="oc-ml-s"
           size="large"
-          :model-value="selectedGroups"
+          :model-value="isGroupSelected(rowData.item)"
           :option="rowData.item"
           :label="getSelectGroupLabel(rowData.item)"
           hide-label
           @update:modelValue="$emit('toggleSelectGroup', rowData.item)"
+          @click.stop
         />
       </template>
       <template #avatar="rowData">
@@ -47,13 +51,44 @@
       </template>
       <template #actions="{ item }">
         <oc-button
+          :id="`group-details-trigger-${resourceDomSelector(item)}`"
           v-oc-tooltip="$gettext('Details')"
           appearance="raw"
           class="oc-mr-xs quick-action-button oc-p-xs"
           @click="showDetails(item)"
         >
           <oc-icon name="information" fill-type="line" />
         </oc-button>
+        <oc-button
+          :id="`context-menu-trigger-${resourceDomSelector(item)}`"
+          ref="contextMenuButtonRef"
+          v-oc-tooltip="contextMenuLabel"
+          :aria-label="contextMenuLabel"
+          class="groups-table-btn-action-dropdown"
+          appearance="raw"
+          @click.stop.prevent="
+            showContextMenuOnBtnClick(
+              `context-menu-drop-ref-${resourceDomSelector(item)}`,
+              $event,
+              item
+            )
+          "
+        >
+          <oc-icon name="more-2" />
+        </oc-button>
+        <oc-drop
+          :ref="`context-menu-drop-ref-${resourceDomSelector(item)}`"
+          :drop-id="`context-menu-drop-${resourceDomSelector(item)}`"
+          :toggle="`#context-menu-trigger-${resourceDomSelector(item)}`"
+          :popper-options="popperOptions"
+          mode="click"
+          close-on-click
+          padding-size="small"
+          @click.stop.prevent
+        >
+          <!-- @slot Add context actions that open in a dropdown when clicking on the "three dots" button -->
+          <slot name="contextMenu" :group="item" />
+        </oc-drop>
         <!-- Editing groups is currently not supported by backend
       <oc-button v-oc-tooltip="$gettext('Edit')" class="oc-ml-s" @click="$emit('clickEdit', item)">
         <oc-icon size="small" name="pencil" />
@@ -71,21 +106,24 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { computed, defineComponent, PropType, ref, unref } from 'vue'
 import Fuse from 'fuse.js'
 import Mark from 'mark.js'
-import { eventBus } from 'web-pkg'
+import { displayPositionedDropdown, eventBus, popperOptions as defaultPopperOptions } from 'web-pkg'
 import { SideBarEventTopics } from 'web-pkg/src/composables/sideBar'
+import { extractDomSelector } from 'web-client/src/helpers'
+import { Group } from 'web-client/src/generated'
+import { useGettext } from 'vue3-gettext'
 
 export default defineComponent({
   name: 'GroupsList',
   props: {
     groups: {
-      type: Array,
+      type: Array as PropType<Group[]>,
       required: true
     },
     selectedGroups: {
-      type: Array,
+      type: Array as PropType<Group[]>,
       required: true
     },
     headerPosition: {
@@ -95,13 +133,66 @@ export default defineComponent({
   },
   emits: ['toggleSelectAllGroups', 'unSelectAllGroups', 'toggleSelectGroup'],
   setup(props, { emit }) {
-    const showDetails = (group) => {
+    const { $gettext } = useGettext()
+    const resourceDomSelector = (group) => extractDomSelector(group.id)
+    const groupRefs = {}
+    for (const group of props.groups) {
+      groupRefs[`context-menu-drop-ref-${resourceDomSelector(group)}`] = ref(undefined)
+    }
+
+    const contextMenuButtonRef = ref(undefined)
+    const contextMenuLabel = computed(() => $gettext('Show context menu'))
+
+    const isGroupSelected = (group) => {
+      return props.selectedGroups.some((s) => s.id === group.id)
+    }
+    const selectGroup = (group) => {
       emit('unSelectAllGroups')
       emit('toggleSelectGroup', group)
+    }
+    const showDetails = (group) => {
+      selectGroup(group)
       eventBus.publish(SideBarEventTopics.open)
     }
+    const rowClicked = (data) => {
+      const group = data[0]
+      selectGroup(group)
+    }
+    const popperOptions = computed(() => defaultPopperOptions)
+    const showContextMenuOnBtnClick = (id, event, group) => {
+      const dropdown = unref(unref(groupRefs)[id]).tippy
+      if (dropdown === undefined) {
+        return
+      }
+      if (!isGroupSelected(group)) {
+        selectGroup(group)
+      }
+      displayPositionedDropdown(dropdown, event, unref(contextMenuButtonRef))
+    }
+    const showContextMenuOnRightClick = (row, event, group) => {
+      event.preventDefault()
+      const dropdown = row.$el.getElementsByClassName('groups-table-btn-action-dropdown')[0]
+      if (dropdown === undefined) {
+        return
+      }
+      if (!isGroupSelected(group)) {
+        selectGroup(group)
+      }
+      displayPositionedDropdown(dropdown._tippy, event, unref(contextMenuButtonRef))
+    }
 
-    return { showDetails }
+    return {
+      ...groupRefs,
+      resourceDomSelector,
+      showDetails,
+      rowClicked,
+      isGroupSelected,
+      popperOptions,
+      showContextMenuOnBtnClick,
+      showContextMenuOnRightClick,
+      contextMenuButtonRef,
+      contextMenuLabel
+    }
   },
   data() {
     return {
@@ -181,7 +272,7 @@ export default defineComponent({
   },
   mounted() {
     this.$nextTick(() => {
-      this.markInstance = new Mark(this.$refs.table.$el)
+      this.markInstance = new Mark(this.$refs.tableRef.$el)
     })
   },
   methods: {