group settings add sidemenu

webapp/components/CategoriesSelect/CategoriesSelect.vue

@@ -46,7 +46,6 @@ export default {
   },
   methods: {
     toggleCategory(id) {
-      console.log('toggleCategory', id)
       this.selectedCategoryIds = xor(this.selectedCategoryIds, [id])
       if (this.$parentForm) {
         this.$parentForm.update(this.model, this.selectedCategoryIds)

webapp/components/CommentCard/CommentCard.story.js

@@ -18,7 +18,8 @@ const comment = {
   author: {
     id: '1',
     avatar: {
-      url: 'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/db/dbc9e03ebcc384b920c31542af2d27dd8eea9dc2_full.jpg',
+      url:
+        'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/db/dbc9e03ebcc384b920c31542af2d27dd8eea9dc2_full.jpg',
     },
     slug: 'jenny-rostock',
     name: 'Rainer Unsinn',

webapp/components/Editor/Editor.story.js

@@ -9,7 +9,8 @@ const embed = {
   title: 'Video Titel',
   // html: null,
   description: 'Video Description',
-  html: '<iframe width="auto" height="250" src="https://www.youtube.com/embed/qkdXAtO40Fo?feature=oembed" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>',
+  html:
+    '<iframe width="auto" height="250" src="https://www.youtube.com/embed/qkdXAtO40Fo?feature=oembed" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>',
 }
 
 const plugins = [

webapp/components/Editor/nodes/Embed.spec.js

@@ -33,7 +33,8 @@ describe('Embed.vue', () => {
             video: null,
             lang: 'de',
             sources: ['resource', 'oembed'],
-            html: '<iframe width="480" height="270" src="https://www.youtube.com/embed/qkdXAtO40Fo?feature=oembed" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>',
+            html:
+              '<iframe width="480" height="270" src="https://www.youtube.com/embed/qkdXAtO40Fo?feature=oembed" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>',
           }),
         }
       })

webapp/components/Embed/EmbedComponent.spec.js

@@ -114,7 +114,8 @@ describe('EmbedComponent.vue', () => {
             video: null,
             lang: 'de',
             sources: ['resource', 'oembed'],
-            html: '<iframe width="480" height="270" src="https://www.youtube.com/embed/qkdXAtO40Fo?feature=oembed" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>',
+            html:
+              '<iframe width="480" height="270" src="https://www.youtube.com/embed/qkdXAtO40Fo?feature=oembed" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>',
           }
           wrapper = Wrapper()
         })

webapp/components/Group/GroupCard.vue

@@ -1,24 +1,39 @@
 <template>
   <div>
     <ds-container class="group-card">
-      {{ responseGroupListQuery }}
-      <ds-space><h2>Group Card</h2></ds-space>
-      <ds-grid>
-        <ds-grid-item v-for="item in items" :key="item.id" :row-span="8">
-          <ds-placeholder>
-            <base-button v-if="item.owner" icon="trash" @click="deleteGroup(item)"></base-button>
+      <ds-page-title heading="Groups"></ds-page-title>
+      <ds-card v-for="item in items" :key="item.id" space="xx-small">
         <nuxt-link to="/group/g1/testgruppe">{{ item.name }}</nuxt-link>
+        {{ item.categories ? item.categories.map((category) => category.name) : [] }}
+        <div>{{ item }}</div>
+        <ds-space>
           <base-button
-              v-if="!item.owner"
-              icon="close"
-              @click="unfollowGroup(item.row)"
+            v-if="item.myRole === 'owner'"
+            icon="trash"
+            @click="deleteGroup(item)"
           ></base-button>
-            <nuxt-link :to="{ name: 'group-create' }">
-              <ds-icon v-show="item.owner" name="ellipsis-v"></ds-icon>
-            </nuxt-link>
-          </ds-placeholder>
-        </ds-grid-item>
-      </ds-grid>
+          <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-space>
+      </ds-card>
     </ds-container>
   </div>
 </template>
@@ -27,15 +42,23 @@ export default {
   name: 'GroupList',
   props: {
     items: { type: Array, default: () => [] },
-    responseGroupListQuery: { type: Array, default: () => [] },
   },
   methods: {
+    removePending() {
+      alert('removePending group')
+    },
+    editGroup(item) {
+      this.$router.push({ path: `/group/edit/${item.id}` })
+    },
     deleteGroup() {
       alert('delete group')
     },
     unfollowGroup() {
       alert('unfollow group')
     },
+    addMemeberToGroup() {
+      alert('addMemeberToGroup group')
+    },
   },
 }
 </script>

webapp/components/Group/GroupForm.vue

@@ -1,9 +1,6 @@
 <template>
   <div>
     <ds-container>
-      update: {{ update }}
-    <br />
-      this group: {{this.group}}
       <ds-form
         class="group-form"
         ref="groupForm"
@@ -91,7 +88,6 @@ export default {
     },
   },
   data() {
-    console.log('GroupForm group', this.group)
     const { name, groupType, about, description, actionRadius, categories } = this.group
     return {
       categoriesActive: this.$env.CATEGORIES_ACTIVE,
@@ -126,14 +122,27 @@ export default {
 
   methods: {
     submit() {
-      console.log('submit', this.formData) 
-      const { name, about, description, actionRadius, categoryIds } = this.formData
+      const { name, about, description, groupType, actionRadius, categoryIds } = this.formData
       this.update
-        ? this.$emit('updateGroup', { name, about, description, actionRadius, categoryIds, id: this.group.id })
-        : this.$emit('createGroup', this.formData)
+        ? this.$emit('updateGroup', {
+            name,
+            about,
+            description,
+            actionRadius,
+            categoryIds,
+            id: this.group.id,
+          })
+        : this.$emit('createGroup', {
+            name,
+            about,
+            description,
+            groupType,
+            actionRadius,
+            categoryIds,
+          })
     },
     reset() {
-      console.log('reset')
+      alert('reset')
     },
   },
 }

webapp/components/Group/GroupLink.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <div>
+      <ds-space><h3>Link zur Gruppe</h3></ds-space>
+      <ds-space>
+        <ds-copy-field>Copy Link for Invite Member please!</ds-copy-field>
+      </ds-space>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'GroupLink',
+}
+</script>

webapp/components/Group/GroupList.vue

@@ -1,72 +0,0 @@
-<template>
-  <div>
-    <ds-container class="group-list">
-      <ds-space><h2>Group List</h2></ds-space>
-      <ds-table :data="items" :fields="fields">
-        <template slot="delete" slot-scope="scope">
-          <base-button
-            v-if="scope.row.myRole === 'owner'"
-            icon="trash"
-            @click="deleteGroup(scope.row)"
-          ></base-button>
-        </template>
-        <template slot="name" slot-scope="scope">
-          <nuxt-link :to="`/group/g1/${scope.row.name}`">{{ scope.row.name }}</nuxt-link>
-          <small>{{ scope.row }}</small>
-        </template>
-        <template slot="categories" slot-scope="scope">
-          <ds-tag v-for="categorie in scope.row.categories" :key="categorie.id" color="primary">
-            {{ categorie.name }}
-          </ds-tag>
-        </template>
-        <template slot="edit" slot-scope="scope">
-          <base-button
-            v-if="scope.row.myRole === 'owner'"
-            icon="edit"
-            @click="editGroup(scope.row)"
-          ></base-button>
-
-          <nuxt-link :to="{ name: 'group-create' }">
-            <ds-icon v-show="scope.row.owner" name="ellipsis-v"></ds-icon>
-          </nuxt-link>
-        </template>
-        <template slot="unfollow" slot-scope="scope">
-          <base-button
-            v-if="scope.row.myRole === 'usual'"
-            icon="close"
-            @click="unfollowGroup(scope.row)"
-          ></base-button>
-          <base-button
-            v-if="scope.row.myRole === null"
-            icon="plus"
-            @click="addMemeberToGroup(scope.row)"
-          ></base-button>
-        </template>
-      </ds-table>
-    </ds-container>
-  </div>
-</template>
-<script lang="ts">
-export default {
-  name: 'GroupList',
-  props: {
-    items: { type: Array, default: () => [] },
-    fields: { type: Array, default: () => [] },
-  },
-  methods: {
-    editGroup(formData) {
-      this.$router.push({ path: `/group/edit/${formData.id}` })
-    },
-    deleteGroup() {
-      alert('delete group')
-    },
-    unfollowGroup() {
-      alert('unfollow group')
-    },
-    addMemeberToGroup() {
-      alert('addMemeberToGroup group')
-    },
-  },
-  computed: {},
-}
-</script>

webapp/components/Group/GroupMember.vue

@@ -1,14 +1,5 @@
 <template>
   <div>
-    <div>
-      <ds-space><h3>Link zur Gruppe</h3></ds-space>
-      <ds-space>
-        <ds-copy-field>Copy Link for Invite Member please!</ds-copy-field>
-      </ds-space>
-    </div>
-    <br />
-    <hr />
-    <br />
     <ds-space><h3>Members</h3></ds-space>
     <ds-table :data="tableData" :fields="tableFields">
       <template slot="avatar">

webapp/components/PostTeaser/PostTeaser.story.js

@@ -17,7 +17,8 @@ export const post = {
   author: {
     id: 'u3',
     avatar: {
-      url: 'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/db/dbc9e03ebcc384b920c31542af2d27dd8eea9dc2_full.jpg',
+      url:
+        'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/db/dbc9e03ebcc384b920c31542af2d27dd8eea9dc2_full.jpg',
     },
     slug: 'jenny-rostock',
     name: 'Rainer Unsinn',

webapp/components/Registration/RegistrationSlideEmail.vue

@@ -165,8 +165,9 @@ export default {
             })
             this.setButtonValues()
 
-            const { email: responseEmail } =
-              this.sliderData.sliders[this.sliderIndex].data.response.Signup
+            const { email: responseEmail } = this.sliderData.sliders[
+              this.sliderIndex
+            ].data.response.Signup
             this.$toast.success(
               this.$t('components.registration.email.form.success', { email: responseEmail }),
             )

webapp/components/generic/SearchableInput/SearchableInput.story.js

@@ -78,7 +78,8 @@ export const searchResults = [
     id: 'u1',
     __typename: 'User',
     avatar: {
-      url: 'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/db/dbc9e03ebcc384b920c31542af2d27dd8eea9dc2_full.jpg',
+      url:
+        'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/db/dbc9e03ebcc384b920c31542af2d27dd8eea9dc2_full.jpg',
     },
     name: 'Peter Lustig',
     slug: 'peter-lustig',
@@ -87,7 +88,8 @@ export const searchResults = [
     id: 'cdbca762-0632-4564-b646-415a0c42d8b8',
     __typename: 'User',
     avatar: {
-      url: 'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/db/dbc9e03ebcc384b920c31542af2d27dd8eea9dc2_full.jpg',
+      url:
+        'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/db/dbc9e03ebcc384b920c31542af2d27dd8eea9dc2_full.jpg',
     },
     name: 'Herbert Schultz',
     slug: 'herbert-schultz',
@@ -96,7 +98,8 @@ export const searchResults = [
     id: 'u2',
     __typename: 'User',
     avatar: {
-      url: 'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/db/dbc9e03ebcc384b920c31542af2d27dd8eea9dc2_full.jpg',
+      url:
+        'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/db/dbc9e03ebcc384b920c31542af2d27dd8eea9dc2_full.jpg',
     },
     name: 'Bob der Baumeister',
     slug: 'bob-der-baumeister',
@@ -105,7 +108,8 @@ export const searchResults = [
     id: '7b654f72-f4da-4315-8bed-39de0859754b',
     __typename: 'User',
     avatar: {
-      url: 'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/db/dbc9e03ebcc384b920c31542af2d27dd8eea9dc2_full.jpg',
+      url:
+        'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/db/dbc9e03ebcc384b920c31542af2d27dd8eea9dc2_full.jpg',
     },
     name: 'Tonya Mohr',
     slug: 'tonya-mohr',

webapp/pages/group/create.vue

@@ -28,18 +28,11 @@ export default {
     }
   },
   methods: {
-    async createGroup(form) {
+    async createGroup(value) {
       try {
         await this.$apollo.mutate({
           mutation: createGroupMutation,
-          variables: {
-            name: form.name,
-            about: form.about,
-            description: form.description,
-            groupType: form.groupType,
-            actionRadius: form.actionRadius,
-            categoryIds: form.formData.categoryIds,
-          },
+          variables: value,
           update: (_, { data: { createGroupData } }) => {
             // const { sendNotificationEmails } = createGroup
             // this.setCreateGroup({

webapp/pages/group/edit/_id.vue

@@ -1,52 +1,72 @@
 <template>
+  <div>
+    <ds-page-title heading="Group Setting"></ds-page-title>
     <ds-flex gutter="small">
       <ds-flex-item :width="{ base: '100%', md: '200px' }">
-      <ds-menu :routes="routes" :is-exact="() => true" />
+        <ds-list>
+          <ds-list-item>
+            <div @click="menu = 'default'">
+              <ds-text :color="menu === 'default' ? 'primary' : ''" Group data>Group Data</ds-text>
+            </div>
+          </ds-list-item>
+          <ds-list-item>
+            <div @click="menu = 'members'">
+              <ds-text :color="menu === 'members' ? 'primary' : ''" Group data>Members</ds-text>
+            </div>
+          </ds-list-item>
+          <ds-list-item>
+            <div @click="menu = 'socialMedia'">
+              <ds-text :color="menu === 'socialMedia' ? 'primary' : ''" Group data>
+                Social Media
+              </ds-text>
+            </div>
+          </ds-list-item>
+          <ds-list-item>
+            <div @click="menu = 'links'">
+              <ds-text :color="menu === 'links' ? 'primary' : ''" Group data>Links</ds-text>
+            </div>
+          </ds-list-item>
+        </ds-list>
       </ds-flex-item>
       <ds-flex-item :width="{ base: '100%', md: 1 }">
-      <transition name="slide-up" appear>
-        <group-form @updateGroup="updateGroup" :group="group" :update="true" />
-      </transition>
+        <group-form
+          v-show="menu === 'default'"
+          @updateGroup="updateGroup"
+          :group="group"
+          :update="true"
+        />
+        <group-member v-show="menu === 'members'" />
+        <div v-show="menu === 'socialMedia'">Social Media</div>
+        <group-link v-show="menu === 'links'" />
       </ds-flex-item>
     </ds-flex>
+  </div>
 </template>
 
 <script>
 import GroupForm from '~/components/Group/GroupForm'
+import GroupMember from '~/components/Group/GroupMember'
+import GroupLink from '~/components/Group/GroupLink'
 import { groupQuery, updateGroupMutation } from '~/graphql/groups.js'
 import { mapGetters } from 'vuex'
 
 export default {
   components: {
     GroupForm,
+    GroupMember,
+    GroupLink,
+  },
+  data() {
+    return {
+      menu: 'default',
+    }
   },
   computed: {
-    routes() {
-      return [
-        {
-          name: 'default',
-          path: ``,
-        },
-        {
-          name: 'members',
-          path: ``,
-        },
-        {
-          name: 'social media',
-          path: ``,
-        },
-        {
-          name: 'invite link',
-          path: ``,
-        },
-      ]
-    },
     ...mapGetters({
       user: 'auth/user',
     }),
   },
   async asyncData(context) {
-    console.log('asyncData start')
     const {
       app,
       error,
@@ -61,9 +81,6 @@ export default {
       query: groupQuery,
       variables: { id },
     })
-    console.log('asyncData group', group)
-    console.log('asyncData id', id)
-    console.log('asyncData group.myRole', group.myRole)
     if (group.myRole !== 'owner') {
       error({ statusCode: 403, message: 'NONONNNO' })
     }
@@ -71,7 +88,6 @@ export default {
   },
   methods: {
     async updateGroup(value) {
-        console.log('updateGroup form', value)
       try {
         await this.$apollo.mutate({
           mutation: updateGroupMutation,

webapp/pages/group/my-groups.vue

@@ -2,7 +2,6 @@
   <div>
     <div>my groups</div>
     <group-teaser />
-    <group-list :items="responseGroupListQuery" :fields="fields" />
     <br />
     <br />
     <group-card :items="responseGroupListQuery" />
@@ -10,28 +9,18 @@
 </template>
 <script>
 import GroupTeaser from '~/components/Group/GroupTeaser.vue'
-import GroupList from '~/components/Group/GroupList.vue'
 import GroupCard from '~/components/Group/GroupCard.vue'
 import { groupQuery } from '~/graphql/groups.js'
 
-/*
- *
- * groupType: { public, closed, hidden }
- * myRole: { pending,   usual,   admin,   owner }
- * actionRadius { regional, national, continental,  global,   interplanetary
- *
- */
 export default {
   name: 'MyGroups',
   components: {
     GroupTeaser,
-    GroupList,
     GroupCard,
   },
   data() {
     return {
       responseGroupListQuery: [],
-      fields: ['delete', 'name', 'about', 'categories', 'edit', 'unfollow'],
     }
   },
   methods: {