From 362aae3c5b519d26c774ffede8274c75de490403 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Fri, 9 Sep 2022 11:10:11 +0200
Subject: [PATCH] add router in group settings

---
 webapp/pages/group/edit/_id.vue         |  63 +++-------
 webapp/pages/group/edit/_id/index.vue   | 150 ++++++++++++++++++++++++
 webapp/pages/group/edit/_id/members.vue |  57 +++++++++
 3 files changed, 224 insertions(+), 46 deletions(-)
 create mode 100644 webapp/pages/group/edit/_id/index.vue
 create mode 100644 webapp/pages/group/edit/_id/members.vue

diff --git a/webapp/pages/group/edit/_id.vue b/webapp/pages/group/edit/_id.vue
index e1a131c70..c4bba7396 100644
--- a/webapp/pages/group/edit/_id.vue
+++ b/webapp/pages/group/edit/_id.vue
@@ -3,68 +3,39 @@
     <ds-page-title heading="Group Setting"></ds-page-title>
     <ds-flex gutter="small">
       <ds-flex-item :width="{ base: '100%', md: '200px' }">
-        <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-menu :routes="routes" :is-exact="() => true" />
       </ds-flex-item>
       <ds-flex-item :width="{ base: '100%', md: 1 }">
-        <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'" />
+        <transition name="slide-up" appear>
+          <nuxt-child :group="group" :update="true" @updateGroup="updateGroup" />
+        </transition>
       </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: {
     ...mapGetters({
       user: 'auth/user',
     }),
+    routes() {
+      return [
+      {
+            name: 'formular',
+            path: `/group/edit/${this.group.id}`
+          },
+          {
+            name: 'members',
+            path: `/group/edit/${this.group.id}/members`
+          },
+    ]},
   },
   async asyncData(context) {
     const {
diff --git a/webapp/pages/group/edit/_id/index.vue b/webapp/pages/group/edit/_id/index.vue
new file mode 100644
index 000000000..b144278d4
--- /dev/null
+++ b/webapp/pages/group/edit/_id/index.vue
@@ -0,0 +1,150 @@
+<template>
+    <div>
+      <ds-container>
+        <ds-form
+          class="group-form"
+          ref="groupForm"
+          v-model="formData"
+          :schema="formSchema"
+          @submit="submit"
+        >
+          <ds-input
+            v-model="formData.name"
+            label="Gruppenname"
+            placeholder="Your name ..."
+          ></ds-input>
+  
+          <ds-select
+            icon="user"
+            v-model="formData.groupType"
+            label="Sichtbarkeit"
+            :options="['public', 'close', 'hidden']"
+            placeholder="Status ..."
+          ></ds-select>
+  
+          <ds-input v-model="formData.about" label="Kurzbeschreibung" rows="3"></ds-input>
+  
+          <ds-input
+            v-model="formData.description"
+            label="Beschreibung"
+            type="textarea"
+            rows="3"
+          ></ds-input>
+  
+          <ds-select
+            icon="card"
+            v-model="formData.actionRadius"
+            label="Radius"
+            :options="['local', 'regional', 'global']"
+            placeholder="Radius ..."
+          ></ds-select>
+  
+          <categories-select
+            v-if="categoriesActive"
+            model="formData.categoryIds"
+            :existingCategoryIds="formData.categoryIds"
+          />
+  
+          <div>{{ formData }}</div>
+  
+          <ds-space margin-top="large">
+            <ds-button @click.prevent="reset()">Reset form</ds-button>
+            <ds-button
+              type="submit"
+              @click.prevent="submit()"
+              icon="save"
+              :disabled="disabled"
+              primary
+            >
+              {{ update ? $t('group.update') : $t('group.save') }}
+            </ds-button>
+          </ds-space>
+        </ds-form>
+        <ds-space centered>
+          <nuxt-link to="/group/my-groups">zurück</nuxt-link>
+        </ds-space>
+      </ds-container>
+    </div>
+  </template>
+  
+  <script>
+  import CategoriesSelect from '~/components/CategoriesSelect/CategoriesSelect'
+  
+  export default {
+    name: 'GroupForm',
+    components: {
+      CategoriesSelect,
+    },
+    props: {
+      update: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
+      group: {
+        type: Object,
+        required: false,
+        default: () => ({}),
+      },
+    },
+    data() {
+      const { name, groupType, about, description, actionRadius, categories } = this.group
+      return {
+        categoriesActive: this.$env.CATEGORIES_ACTIVE,
+        disabled: false,
+        formData: {
+          name: name || '',
+          groupType: groupType || '',
+          about: about || '',
+          description: description || '',
+          actionRadius: actionRadius || '',
+          categoryIds: categories ? categories.map((category) => category.id) : [],
+        },
+        formSchema: {
+          name: { required: true, min: 3, max: 100 },
+          groupType: { required: true },
+          about: { required: true },
+          description: { required: true },
+          actionRadius: { required: true },
+          categoryIds: {
+            type: 'array',
+            required: this.categoriesActive,
+            validator: (_, value = []) => {
+              if (this.categoriesActive && (value.length === 0 || value.length > 3)) {
+                return [new Error(this.$t('common.validations.categories'))]
+              }
+              return []
+            },
+          },
+        },
+      }
+    },
+  
+    methods: {
+      submit() {
+        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', {
+              name,
+              about,
+              description,
+              groupType,
+              actionRadius,
+              categoryIds,
+            })
+      },
+      reset() {
+        alert('reset')
+      },
+    },
+  }
+  </script>
+  
\ No newline at end of file
diff --git a/webapp/pages/group/edit/_id/members.vue b/webapp/pages/group/edit/_id/members.vue
new file mode 100644
index 000000000..f6d2ca49d
--- /dev/null
+++ b/webapp/pages/group/edit/_id/members.vue
@@ -0,0 +1,57 @@
+<template>
+    <div>
+      <ds-space><h3>Members</h3></ds-space>
+      <ds-table :data="tableData" :fields="tableFields">
+        <template slot="avatar">
+          <ds-avatar online size="small" name="Hans Peter"></ds-avatar>
+        </template>
+        <template slot="loves" slot-scope="scope">
+          {{ scope.row.name }} loves {{ scope.row.loves }}
+        </template>
+        <template slot="edit" slot-scope="scope">
+          <ds-button size="small" @click="deleteRow(scope.row)">delete</ds-button>
+        </template>
+      </ds-table>
+    </div>
+  </template>
+  <script>
+  export default {
+    name: 'GroupMember',
+    data() {
+      return {
+        tableFields: ['avatar', 'name', 'type', 'loves', 'edit'],
+        tableData: [
+          {
+            name: 'Rengar',
+            type: 'Jungler',
+            loves: 'Hide and seek',
+          },
+          {
+            name: 'Renekton',
+            type: 'Toplaner',
+            loves: 'Slice and dice',
+          },
+          {
+            name: 'Twitch',
+            type: 'ADC',
+            loves: 'Spray and pray',
+          },
+          {
+            name: 'Blitz',
+            type: 'Support',
+            loves: 'Hook you up',
+          },
+        ],
+      }
+    },
+    methods: {
+      deleteRow(row) {
+        const index = this.tableData.indexOf(row)
+        if (index > -1) {
+          this.tableData.splice(index, 1)
+        }
+      },
+    },
+  }
+  </script>
+  
\ No newline at end of file