Overtake 'GroupContentMenu' from branch '5344-add-group-members-management'

webapp/components/Group/GroupContentMenu.spec.js

@@ -0,0 +1,35 @@
+import { mount } from '@vue/test-utils'
+import GroupContentMenu from './GroupContentMenu.vue'
+
+const localVue = global.localVue
+
+const propsData = {
+  resource: {},
+  group: {},
+  resourceType: 'group',
+}
+
+describe('GroupContentMenu', () => {
+  let wrapper
+  let mocks
+
+  beforeEach(() => {
+    mocks = {
+      $t: jest.fn(),
+    }
+  })
+
+  describe('mount', () => {
+    const Wrapper = () => {
+      return mount(GroupContentMenu, { propsData, mocks, localVue })
+    }
+
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    it('renders', () => {
+      expect(wrapper.findAll('.group-menu')).toHaveLength(1)
+    })
+  })
+})

webapp/components/Group/GroupContentMenu.vue

@@ -0,0 +1,99 @@
+<template>
+  <dropdown class="group-menu" :placement="placement" offset="5">
+    <template #default="{ toggleMenu }">
+      <slot name="button" :toggleMenu="toggleMenu">
+        <base-button
+          icon="ellipsis-v"
+          size="small"
+          circle
+          @click.prevent="toggleMenu()"
+          data-test="group-menu-button"
+        />
+      </slot>
+    </template>
+    <template #popover="{ toggleMenu }">
+      <div class="group-menu-popover">
+        <ds-menu :routes="routes">
+          <template #menuitem="item">
+            {{ item.parents }}
+            <ds-menu-item
+              :route="item.route"
+              :parents="item.parents"
+              @click.stop.prevent="openItem(item.route, toggleMenu)"
+            >
+              <base-icon :name="item.route.icon" />
+              {{ item.route.label }}
+            </ds-menu-item>
+          </template>
+        </ds-menu>
+      </div>
+    </template>
+  </dropdown>
+</template>
+
+<script>
+import Dropdown from '~/components/Dropdown'
+
+export default {
+  name: 'GroupContentMenu',
+  components: {
+    Dropdown,
+  },
+  props: {
+    placement: { type: String, default: 'bottom-end' },
+    resource: { type: Object, required: true },
+    group: { type: Object, required: true },
+    resourceType: {
+      type: String,
+      required: true,
+      validator: (value) => {
+        return value.match(/(group)/)
+      },
+    },
+  },
+  computed: {
+    routes() {
+      const routes = []
+
+      if (this.resourceType === 'group') {
+        routes.push({
+          label: this.$t('group.contentMenu.visitGroupPage'),
+          icon: 'home',
+          name: 'group-id-slug',
+          params: { id: this.group.id, slug: this.group.slug },
+        })
+        if (this.group.myRole === 'owner') {
+          routes.push({
+            label: this.$t('admin.settings.name'),
+            path: `/group/edit/${this.resource.id}`,
+            icon: 'edit',
+          })
+        }
+      }
+
+      return routes
+    },
+  },
+  methods: {
+    openItem(route, toggleMenu) {
+      if (route.callback) {
+        route.callback()
+      } else {
+        this.$router.push(route)
+      }
+      toggleMenu()
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+.group-menu-popover {
+  nav {
+    margin-top: -$space-xx-small;
+    margin-bottom: -$space-xx-small;
+    margin-left: -$space-x-small;
+    margin-right: -$space-x-small;
+  }
+}
+</style>