From 25a64a0c3c79dd156bb94abbed01e7557ecce8e2 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Sun, 7 Aug 2022 21:37:19 +0200
Subject: [PATCH] prework for group form

---
 webapp/components/GroupForm/GroupForm.vue | 203 +++++-----------------
 webapp/pages/group/create.vue             |  12 +-
 2 files changed, 53 insertions(+), 162 deletions(-)

diff --git a/webapp/components/GroupForm/GroupForm.vue b/webapp/components/GroupForm/GroupForm.vue
index e730a3c13..bff03ec8a 100644
--- a/webapp/components/GroupForm/GroupForm.vue
+++ b/webapp/components/GroupForm/GroupForm.vue
@@ -1,172 +1,61 @@
 <template>
-<div>
+  <div>
     <ds-container>
-      <ds-form
-    v-model="formData"
-    @submit="submit"
-    :schema="formSchema">
-    <template slot-scope="{ errors, reset }">
-      <ds-input
-        model="name"
-        label="Gruppenname"
-        placeholder="Your name ..."></ds-input>
-       
-       
-      <ds-select
-        icon="user"
-        model="status"
-        label="Status"
-        :options="['offen', 'geschlossen', 'geheim']"
-        placeholder="Status ..."></ds-select>
-   
-      <ds-input
-        model="description"
-        label="Beschreibung"
-        type="textarea"
-        rows="3"></ds-input>
+      <ds-form v-model="formData" @submit="submit" :schema="formSchema">
+          <ds-input v-model="name" label="Gruppenname" placeholder="Your name ..."></ds-input>
 
-      <categories-select
-          v-if="categoriesActive"
-          model="categoryIds"
-          :existingCategoryIds="formData.categoryIds"
-        />
-        <ds-chip
-          v-if="categoriesActive"
-          size="base"
-          :color="errors && errors.categoryIds && 'danger'"
-        >
-          {{ formData.categoryIds.length }} / 3
-          <base-icon v-if="errors && errors.categoryIds" name="warning" />
-        </ds-chip>
-      <ds-space margin-top="large">
-        <ds-button @click.prevent="reset()">
-          Reset form
-        </ds-button>
-        <ds-button
-          :disabled="disabled"
-          icon="save"
-          primary>
-          Save group
-        </ds-button>
+          <ds-select
+            icon="user"
+            v-model="status"
+            label="Status"
+            :options="['offen', 'geschlossen', 'geheim']"
+            placeholder="Status ..."
+          ></ds-select>
+
+          <ds-input v-model="description" label="Beschreibung" type="textarea" rows="3"></ds-input>
+
+           <div>{{name}}</div>
+      <div>{{status}}</div>
+      <div>{{description}}</div>
+
+          <ds-space margin-top="large">
+            <ds-button @click.prevent="reset()">Reset form</ds-button>
+            <ds-button :disabled="disabled" icon="save" primary>Save group</ds-button>
+          </ds-space>
+    
+      </ds-form>
+      <ds-space centered>
+        zurück
       </ds-space>
-    </template>
-  </ds-form>
     </ds-container>
-    <div  align="center" style="padding-top: 30px">
-    <nuxt-link :to="{ name: 'my-groups' }">
-                <base-button :path="{ name: 'my-groups' }">zurück</base-button> 
-              </nuxt-link></div>
-
-</div>
-  
+  </div>
 </template>
 
 <script>
 import CategoriesSelect from '~/components/CategoriesSelect/CategoriesSelect'
 
 export default {
-   components: {
-       CategoriesSelect,
-   },
-    data() {
-      // const { name, status, description, categories } = this.group
-      categories: [{id: 0, name: 'Bildung'},{id: 1, name: 'Politik'}]
- 
-       return {
-           categoriesActive: this.$env.CATEGORIES_ACTIVE,
- 
- formData: {
-     categoryIds: this.categories ? this.categories.map((category) => category.id) : [],
-       name: name || '',
-       status: status || '',
-       description: description || '',
-   },
-     formSchema: {
-        name: { required: true, min: 3, max: 100 },
-        description: { 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 []
-          },
-        },
-      },
- 
+  components: {
+    CategoriesSelect,
+  },
+  data() {
+    return {
+      name: '',
+      status: '',
+      description: '',
     }
   },
-//   // computed: {
-//   //   ...mapGetters({
-//   //     currentUser: 'auth/user',
-//   //   }),
-//   //   contentLength() {
-//   //     return this.$filters.removeHtml(this.formData.content).length
-//   //   },
-//   // },
-//   // methods: {
-         handleSubmit() {
-             console.log('handleSubmit')
-         },
-//   //   updateEditorContent(value) {
-//   //     this.$refs.contributionForm.update('content', value)
-//   //   },
-//   //   addHeroImage(file) {
-//   //     this.formData.image = null
-//   //     if (file) {
-//   //       const reader = new FileReader()
-//   //       reader.onload = ({ target }) => {
-//   //         this.formData.image = {
-//   //           ...this.formData.image,
-//   //           url: target.result,
-//   //         }
-//   //       }
-//   //       reader.readAsDataURL(file)
-//   //       this.imageUpload = file
-//   //     }
-//   //   },
-//   //   addImageAspectRatio(aspectRatio) {
-//   //     this.formData.imageAspectRatio = aspectRatio
-//   //   },
-//   //   addImageType(imageType) {
-//   //     this.formData.imageType = imageType
-//   //   },
-//   // },
-//   // apollo: {
-//   //   User: {
-//   //     query() {
-  //       return gql`
-  //         query {
-  //           User(orderBy: slug_asc) {
-  //             id
-  //             slug
-  //           }
-  //         }
-  //       `
-  //     },
-  //     result({ data: { User } }) {
-  //       this.users = User
-  //     },
-  //   },
-  //   Tag: {
-  //     query() {
-  //       return gql`
-  //         query {
-  //           Tag(orderBy: id_asc) {
-  //             id
-  //           }
-  //         }
-  //       `
-  //     },
-  //     result({ data: { Tag } }) {
-  //       this.hashtags = Tag
-  //     },
-  //   },
-  // },
+ 
+  methods: {
+  submit() {
+    console.log('handleSubmit')
+  },
+  handleSubmit() {
+    console.log('handleSubmit')
+  },
+  reset() {
+    console.log('handleSubmit')
+  },
+ },
 }
 </script>
-
-
diff --git a/webapp/pages/group/create.vue b/webapp/pages/group/create.vue
index b77096859..9463083f1 100644
--- a/webapp/pages/group/create.vue
+++ b/webapp/pages/group/create.vue
@@ -1,11 +1,13 @@
 <template>
-  <div>
-    <h2>Neue Gruppe</h2>
-
-    <new-group-form style="padding-top: 30px" />
-  </div>
+  <ds-flex :width="{ base: '100%' }" gutter="base">
+    <ds-flex-item :width="{ base: '100%', md: 5 }">
+      <new-group-form />
+    </ds-flex-item>
+    <ds-flex-item :width="{ base: '100%', md: 1 }">&nbsp;</ds-flex-item>
+  </ds-flex>
 </template>
 
+
 <script>
 import NewGroupForm from '~/components/GroupForm/GroupForm'