change page structure for groupe settings

webapp/components/Group/GroupForm.vue

@@ -35,13 +35,12 @@
           icon="card"
           v-model="formData.actionRadius"
           label="Radius"
-          :options="['local', 'regional', 'global']"
+          :options="['regional', 'national', 'continental', 'global']"
           placeholder="Radius ..."
         ></ds-select>
-
         <categories-select
           v-if="categoriesActive"
-          model="formData.categoryIds"
+          model="categoryIds"
           :existingCategoryIds="formData.categoryIds"
         />
 
@@ -60,7 +59,7 @@
           </ds-button>
         </ds-space>
       </ds-form>
-      <ds-space centered>
+      <ds-space centered v-show="!update">
         <nuxt-link to="/group/my-groups">zurück</nuxt-link>
       </ds-space>
     </ds-container>

webapp/pages/group/create.vue

@@ -29,21 +29,15 @@ export default {
   },
   methods: {
     async createGroup(value) {
+      const { name, about, description, groupType, actionRadius, categoryIds } = value
+      const variables = { name, about, description, groupType, actionRadius, categoryIds }
       try {
         await this.$apollo.mutate({
           mutation: createGroupMutation,
-          variables: value,
+          variables,
-          update: (_, { data: { createGroupData } }) => {
-            // const { sendNotificationEmails } = createGroup
-            // this.setCreateGroup({
-            //   ...this.createGroup,
-            //   sendNotificationEmails,
-            // })
-            this.$toast.success(this.$t('group.group-created'))
-          },
         })
+        this.$toast.success(this.$t('group.group-created'))
       } catch (error) {
-        // this.notifyByEmail = !this.notifyByEmail
         this.$toast.error(error.message)
       }
     },

webapp/pages/group/edit/_id.vue

@@ -7,15 +7,18 @@
       </ds-flex-item>
       <ds-flex-item :width="{ base: '100%', md: 1 }">
         <transition name="slide-up" appear>
-          <nuxt-child :group="group" :update="true" @updateGroup="updateGroup" />
+          <nuxt-child :group="group" />
         </transition>
       </ds-flex-item>
     </ds-flex>
+    <ds-space centered>
+        <nuxt-link to="/group/my-groups">zurück</nuxt-link>
+      </ds-space>
   </div>
 </template>
 
 <script>
-import { groupQuery, updateGroupMutation } from '~/graphql/groups.js'
+import { groupQuery } from '~/graphql/groups.js'
 import { mapGetters } from 'vuex'
 
 export default {
@@ -56,26 +59,5 @@ export default {
     }
     return { group }
   },
-  methods: {
-    async updateGroup(value) {
-      try {
-        await this.$apollo.mutate({
-          mutation: updateGroupMutation,
-          variables: value,
-          update: (_, { data: { updateGroupData } }) => {
-            // const { sendNotificationEmails } = createGroup
-            // this.setCreateGroup({
-            //   ...this.createGroup,
-            //   sendNotificationEmails,
-            // })
-            this.$toast.success(this.$t('group.group-updated'))
-          },
-        })
-      } catch (error) {
-        // this.notifyByEmail = !this.notifyByEmail
-        this.$toast.error(error.message)
-      }
-    },
-  },
 }
 </script>

webapp/pages/group/edit/_id/index.vue

@@ -1,148 +1,39 @@
 <template>
   <div>
     <ds-container>
-      <ds-form
+      <group-form :group="group" :update="true" @updateGroup="updateGroup" />
-        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'
+import GroupForm from '~/components/Group/GroupForm'
+import { updateGroupMutation } from '~/graphql/groups.js'
 
 export default {
-  name: 'GroupForm',
   components: {
-    CategoriesSelect,
+    GroupForm,
   },
   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() {
+    async updateGroup(value) {
-      const { name, about, description, groupType, actionRadius, categoryIds } = this.formData
+      const { id, name, about, description, groupType, actionRadius, categoryIds } = value
-      this.update
+      const variables = { id, name, about, description, groupType, actionRadius, categoryIds }
-        ? this.$emit('updateGroup', {
+      try {
-            name,
+        await this.$apollo.mutate({
-            about,
+          mutation: updateGroupMutation,
-            description,
+          variables,
-            actionRadius,
-            categoryIds,
-            id: this.group.id,
         })
-        : this.$emit('createGroup', {
+        this.$toast.success(this.$t('group.group-updated'))
-            name,
+      } catch (error) {
-            about,
+        this.$toast.error(error.message)
-            description,
+      }
-            groupType,
-            actionRadius,
-            categoryIds,
-          })
-    },
-    reset() {
-      alert('reset')
     },
   },
 }