add disable submit button on formData new and update

webapp/components/Group/GroupForm.vue

@@ -53,7 +53,7 @@
             type="submit"
             @click.prevent="submit()"
             icon="save"
-            :disabled="disabled"
+            :disabled="update ? submitDisableEdit : submitDisable"
             primary
           >
             {{ update ? $t('group.update') : $t('group.save') }}
@@ -61,7 +61,7 @@
         </ds-space>
       </ds-form>
       <ds-space centered v-show="!update">
-        <nuxt-link to="/group/my-groups">zurück</nuxt-link>
+        <nuxt-link to="/my-groups">zurück</nuxt-link>
       </ds-space>
     </ds-container>
   </div>
@@ -147,5 +147,52 @@ export default {
       alert('reset')
     },
   },
+  computed: {
+    submitDisable() {
+      if (
+        this.formData.name !== ''
+        && this.formData.groupType !== ''
+        && this.formData.about !== ''
+        && this.formData.description !== ''
+        && this.formData.actionRadius !== ''
+        && this.formData.categoryIds.length > 0
+        ) {
+        return false
+      }
+      return true
+    },
+    submitDisableEdit() {
+       
+      if (
+        this.formData.name !== this.group.name
+        || this.formData.groupType !== this.group.groupType
+        || this.formData.about !== this.group.about
+        || this.formData.description !== this.group.description
+        || this.formData.actionRadius !== this.group.actionRadius
+        || this.formData.categoryIds.length === 0
+        || !this.sameCategories
+        ) {
+        return false
+      }
+      return true
+    },
+    sameCategories(){
+      let formDataCategories = this.formData.categoryIds.map((categoryIds) => categoryIds)
+      let groupDataCategories = this.group.categories.map((category) => category.id)
+      let result
+      let each = true
+
+      if (formDataCategories.length !== groupDataCategories.length) return false
+
+      if (JSON.stringify(formDataCategories) !== JSON.stringify(groupDataCategories)) {
+        formDataCategories.forEach(element => {
+          result = groupDataCategories.filter(groupCategorieId => groupCategorieId === element)
+          if (result.length === 0) each = false
+        })
+        return each
+      }
+      return true
+    }
+  }
 }
 </script>

webapp/components/Group/GroupList.vue

@@ -13,8 +13,13 @@
             </ds-space>
           </div>
           <ds-space margin-top="small">
-            <ds-chip :color="item.groupType === 'public' ? 'primary' : 'warning'">{{item.groupType}}</ds-chip>
-            <ds-chip v-for="category in item.categories" :key="category.name"><ds-icon :name="category.icon"></ds-icon> {{category.name}}</ds-chip>
+            <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}}
+            </ds-chip>
           </ds-space>
         </ds-space>
       </ds-flex-item>

webapp/components/Group/GroupTeaser.vue

@@ -1,27 +0,0 @@
-<template>
-  <div class="group-teaser">
-    <ds-grid-item :row-span="2" column-span="fullWidth">
-      <ds-space centered>
-        <nuxt-link :to="{ name: 'group-create' }">
-          <base-button
-            v-tooltip="{
-              content: $t('group.newGroup'),
-              placement: 'left',
-              delay: { show: 500 },
-            }"
-            :path="{ name: 'group-create' }"
-            class="profile-post-add-button"
-            icon="plus"
-            circle
-            filled
-          />
-        </nuxt-link>
-      </ds-space>
-    </ds-grid-item>
-  </div>
-</template>
-<script>
-export default {
-  name: 'GroupTeaser',
-}
-</script>

webapp/pages/group/create.vue

@@ -1,26 +1,25 @@
 <template>
-  <div>
-    <h2>Create Groupe</h2>
+  <div><ds-section>
+    <h1 class="ds-heading ds-heading-h1">Create New Groupe</h1></ds-section>
+    <ds-space margin="large" >
     <ds-flex :width="{ base: '100%' }" gutter="base">
       <ds-flex-item :width="{ base: '100%', md: 5 }">
         <group-form @createGroup="createGroup" />
       </ds-flex-item>
       <ds-flex-item :width="{ base: '100%', md: 1 }">&nbsp;</ds-flex-item>
     </ds-flex>
-    <hr />
-    <group-member />
+  </ds-space>
+  
   </div>
 </template>
 
 <script>
 import GroupForm from '~/components/Group/GroupForm'
-import GroupMember from '~/components/Group/GroupMember'
 import { createGroupMutation } from '~/graphql/groups.js'
 
 export default {
   components: {
     GroupForm,
-    GroupMember,
   },
   data() {
     return {

webapp/pages/group/edit/_id.vue

@@ -1,9 +1,9 @@
 <template>
   <div>
-
+  <ds-section>
     <h1 class="ds-heading ds-heading-h1">{{group.name}}</h1>
-    <div class="">Group Setting</div>
-    
+    <div class="">Group Setting</div></ds-section>
+  <ds-space margin="large" >
     <ds-flex gutter="small">
       <ds-flex-item :width="{ base: '100%', md: '200px' }">
         <ds-menu :routes="routes" :is-exact="() => true" />
@@ -14,6 +14,7 @@
         </transition>
       </ds-flex-item>
     </ds-flex>
+  </ds-space>
     <ds-space centered>
       <nuxt-link to="/my-groups">zurück</nuxt-link>
     </ds-space>

webapp/pages/my-groups.vue

@@ -1,21 +1,32 @@
 <template>
-  <div>
+  <div><ds-section>
     <h1 class="ds-heading ds-heading-h1">My Groups</h1>
-    <group-teaser />
+    <nuxt-link :to="{ name: 'group-create' }">
+          <base-button
+            v-tooltip="{
+              content: $t('group.newGroup'),
+              placement: 'left',
+              delay: { show: 500 },
+            }"
+            :path="{ name: 'group-create' }"
+            class="profile-post-add-button"
+            icon="plus"
+            circle
+            filled
+          />
+        </nuxt-link></ds-section>
     <br />
     <br />
     <group-list :items="responseGroupListQuery" />
   </div>
 </template>
 <script>
-import GroupTeaser from '~/components/Group/GroupTeaser.vue'
 import GroupList from '~/components/Group/GroupList.vue'
 import { groupQuery } from '~/graphql/groups.js'
 
 export default {
   name: 'MyGroups',
   components: {
-    GroupTeaser,
     GroupList,
   },
   data() {