From 41955c5f562293e316ae047e71081cc57e77b322 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Tue, 13 Sep 2022 20:40:40 +0200
Subject: [PATCH] add gruopMenu

---
 webapp/assets/_new/styles/tokens.scss         |   1 +
 webapp/components/Group/GroupList.vue         |  89 ++++++++-----
 webapp/components/Group/GroupMenu.vue         | 121 ++++++++++++++++++
 .../_new/generic/BaseButton/BaseButton.vue    |  12 +-
 4 files changed, 188 insertions(+), 35 deletions(-)
 create mode 100644 webapp/components/Group/GroupMenu.vue

diff --git a/webapp/assets/_new/styles/tokens.scss b/webapp/assets/_new/styles/tokens.scss
index 53abd01f8..d0cc49097 100644
--- a/webapp/assets/_new/styles/tokens.scss
+++ b/webapp/assets/_new/styles/tokens.scss
@@ -268,6 +268,7 @@ $size-avatar-large: 114px;
  * @presenter Spacing
  */
 
+ $size-button-large: 50px;
  $size-button-base: 36px;
  $size-button-small: 26px;
 
diff --git a/webapp/components/Group/GroupList.vue b/webapp/components/Group/GroupList.vue
index cb7f33901..8d0583e5a 100644
--- a/webapp/components/Group/GroupList.vue
+++ b/webapp/components/Group/GroupList.vue
@@ -1,21 +1,32 @@
 <template>
   <div>
+    
     <ds-container class="group-card">
-      <ds-flex v-for="item in items" :key="item.id" class="border-bottom">
-      <ds-flex-item width="80%" centered>
+      <ds-space>
+    <div @click="onlyOwnerGroups(true)" ref="myGruops" >show only my groups</div>
+    <div @click="onlyOwnerGroups(false)" ref="allGruops" hidden>show all groups</div>
+  </ds-space>
+      <ds-flex v-for="item in items" :key="item.id" class="border-bottom" 
+      :ref="item.myRole === null ? 'null' : item.myRole">
+      <ds-flex-item width="90%" centered>
+        {{item.myRole}}
         <ds-space margin="large">
           <nuxt-link :to="`/group/${item.id}`">
             <ds-text size="x-large">{{ item.name }}</ds-text>
           </nuxt-link>
+          
+          <ds-chip v-if="item.groupType === 'public'" color="primary">{{item.groupType}}</ds-chip>
+            <ds-chip v-if="item.groupType === 'hidden'" color="warning">{{item.groupType}}</ds-chip>
+            <ds-chip v-if="item.groupType === 'closed'" color="danger">{{item.groupType}}</ds-chip>
+            <ds-chip v-if="item.myRole === 'owner'" color="inverse">{{item.myRole}}</ds-chip>
+          <ds-chip v-if="item.myRole === 'usual' || item.myRole === 'pending'">{{item.myRole}}</ds-chip>
+             
           <div>
             <ds-space margin-top="small">
               {{ item.about }}
             </ds-space>
           </div>
           <ds-space margin-top="small">
-            <ds-chip v-if="item.groupType === 'public'" color="primary">{{item.groupType}}</ds-chip>
-            <ds-chip v-if="item.groupType === 'hidden'" color="warning">{{item.groupType}}</ds-chip>
-            <ds-chip v-if="item.groupType === 'closed'" color="danger">{{item.groupType}}</ds-chip>
             <ds-chip v-for="category in item.categories" :key="category.name">
               <ds-icon :name="category.icon"></ds-icon> 
               {{category.name}}
@@ -23,42 +34,25 @@
           </ds-space>
         </ds-space>
       </ds-flex-item>
-      <ds-flex-item width="20%" centered>
-        
-          <base-button
-            v-if="item.myRole === 'owner'"
-            icon="trash"
-            @click="deleteGroup(item)"
-          ></base-button>
-          <base-button
-            v-if="item.myRole === 'pending'"
-            icon="question-circle"
-            @click="removePending(item)"
-          ></base-button>
-          <base-button
-            v-if="item.myRole === 'owner'"
-            icon="edit"
-            @click="editGroup(item)"
-          ></base-button>
-          <base-button
-            v-if="item.myRole === 'usual'"
-            icon="close"
-            @click="unfollowGroup(item)"
-          ></base-button>
-          <base-button
-            v-if="item.myRole === null"
-            icon="plus"
-            @click="addMemeberToGroup(item)"
-          ></base-button>
-        
+      <ds-flex-item width="10%" centered>
+        <group-menu
+            resource-type="group"
+            :resource="item"
+            :isOwner="item.myRole"
+          />
       </ds-flex-item>
     </ds-flex>
     </ds-container>
   </div>
 </template>
-<script lang="ts">
+<script>
+import GroupMenu from '~/components/Group/GroupMenu'
+
 export default {
   name: 'GroupList',
+  components: {
+    GroupMenu,
+  },
   props: {
     items: { type: Array, default: () => [] },
   },
@@ -78,6 +72,33 @@ export default {
     addMemeberToGroup() {
       alert('addMemeberToGroup group')
     },
+    onlyOwnerGroups(bool){
+      console.log('bool', bool)
+      console.log('this.$refs.usual', this.$refs.usual)
+      console.log('this.$refs.pending', this.$refs.pending)
+      console.log('this.$refs.null', this.$refs.null)
+      
+        this.$refs.myGruops.hidden = bool
+        this.$refs.allGruops.hidden = !bool
+     
+
+      if (this.$refs.usual) {
+        this.$refs.usual.forEach(element => {
+         element.$el.hidden = bool})
+        }
+
+          
+         if (this.$refs.null) {
+          this.$refs.null.forEach(element => {
+          element.$el.hidden = bool})
+         }
+
+         if (this.$refs.pending) {
+          this.$refs.pending.forEach(element => {
+          element.$el.hidden = bool})
+         }
+      
+    }
   },
 }
 </script>
diff --git a/webapp/components/Group/GroupMenu.vue b/webapp/components/Group/GroupMenu.vue
new file mode 100644
index 000000000..427297485
--- /dev/null
+++ b/webapp/components/Group/GroupMenu.vue
@@ -0,0 +1,121 @@
+<template>
+  <dropdown class="group-menu" :placement="placement" offset="5">
+    <template #default="{ toggleMenu }">
+      <slot name="button" :toggleMenu="toggleMenu">
+        <base-button
+          data-test="group-menu-button"
+          icon="ellipsis-v"
+          size="large"
+          circle
+          ghost
+          @click.prevent="toggleMenu()"
+        />
+      </slot>
+    </template>
+    <template #popover="{ toggleMenu }">
+      <div class="group-menu-popover">
+        <ds-menu :routes="routes">
+          <template #menuitem="item">
+            <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: 'ContentMenu',
+  components: {
+    Dropdown,
+  },
+  props: {
+    placement: { type: String, default: 'top-end' },
+    resource: { type: Object, required: true },
+    isOwner: { type: String, default: false },
+    resourceType: {
+      type: String,
+      required: true,
+      validator: (value) => {
+        return value.match(/(group)/)
+      },
+    },
+  },
+  computed: {
+    routes() {
+      const routes = []
+ 
+ 
+      if (this.resourceType === 'group') {
+        if (this.isOwner === 'owner') {
+          routes.push({
+              label: 'Settings',
+              path: `/group/edit/${this.resource.id}`,
+              icon: 'edit',
+            })
+        }
+        if (this.isOwner === 'usual') {
+          routes.push({
+              label: 'Unfollowing',
+              callback: () => {
+              this.unfollowGroup(this.resource)
+            },
+              icon: 'minus',
+            })
+        }
+        if (this.isOwner === 'pending') {
+          routes.push({
+              label: 'Unfollowing',
+              callback: () => {
+              this.removePending(this.resource)
+            },
+              icon: 'minus',
+            })
+        }
+        if (this.isOwner === null) {
+          routes.push({
+              label: 'Following',
+              callback: () => {
+              this.addMemeberToGroup(this.resource)
+            },
+              icon: 'plus',
+            })
+        }
+      }
+
+      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>
diff --git a/webapp/components/_new/generic/BaseButton/BaseButton.vue b/webapp/components/_new/generic/BaseButton/BaseButton.vue
index d87598d76..e5c7fa047 100644
--- a/webapp/components/_new/generic/BaseButton/BaseButton.vue
+++ b/webapp/components/_new/generic/BaseButton/BaseButton.vue
@@ -46,7 +46,7 @@ export default {
       type: String,
       default: 'regular',
       validator(value) {
-        return value.match(/(small|regular)/)
+        return value.match(/(small|regular|large)/)
       },
     },
     type: {
@@ -66,6 +66,7 @@ export default {
       if (this.danger) buttonClass += ' --danger'
       if (this.loading) buttonClass += ' --loading'
       if (this.size === 'small') buttonClass += ' --small'
+      if (this.size === 'large') buttonClass += ' --large'
 
       if (this.filled) buttonClass += ' --filled'
       else if (this.ghost) buttonClass += ' --ghost'
@@ -123,6 +124,15 @@ export default {
     }
   }
 
+  &.--large {
+    height: $size-button-large;
+    font-size: $font-size-large;
+
+    &.--circle {
+      width: $size-button-large;
+    }
+  }
+
   &:not(.--icon-only) > .base-icon {
     margin-right: $space-xx-small;
   }