From cf31f3c1d6ed25cd516aaf8f810a7fb1350c324d Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Wed, 3 Aug 2022 10:26:08 +0200
Subject: [PATCH] preparation for creating a new group

---
 webapp/components/GroupForm/GroupForm.vue     | 272 ++++++++++++++++++
 webapp/components/GroupTeaser/GroupTeaser.vue |  24 ++
 webapp/locales/de.json                        |   3 +
 webapp/locales/en.json                        |   3 +
 webapp/pages/group/create.vue                 |  18 ++
 webapp/pages/my-groups.vue                    |  16 ++
 6 files changed, 336 insertions(+)
 create mode 100644 webapp/components/GroupForm/GroupForm.vue
 create mode 100644 webapp/components/GroupTeaser/GroupTeaser.vue
 create mode 100644 webapp/pages/group/create.vue
 create mode 100644 webapp/pages/my-groups.vue

diff --git a/webapp/components/GroupForm/GroupForm.vue b/webapp/components/GroupForm/GroupForm.vue
new file mode 100644
index 000000000..76d659b96
--- /dev/null
+++ b/webapp/components/GroupForm/GroupForm.vue
@@ -0,0 +1,272 @@
+<template>
+<div>
+    <ds-container>
+      <ds-form
+    v-model="formData"
+    @submit="handleSubmit"
+    @input="handleInput"
+    @input-valid="handleInputValid"
+    @reset="handleReset"
+    :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-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>
+    </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>
+  <!--<ds-form
+    class="contribution-form"
+    ref="contributionForm"
+    v-model="formData"
+    :schema="formSchema"
+    @submit="submit"
+  >
+    <template #default="{ errors }">
+      <base-card>
+        <template #heroImage>
+          <img
+            v-if="formData.image"
+            :src="formData.image | proxyApiUrl"
+            :class="['image', formData.imageBlurred && '--blur-image']"
+          />
+          <image-uploader
+            :hasImage="!!formData.image"
+            :class="[formData.imageBlurred && '--blur-image']"
+            @addHeroImage="addHeroImage"
+            @addImageAspectRatio="addImageAspectRatio"
+            @addImageType="addImageType"
+          />
+        </template>
+        <div v-if="formData.image" class="blur-toggle">
+          <label for="blur-img">{{ $t('contribution.inappropriatePicture') }}</label>
+          <input type="checkbox" id="blur-img" v-model="formData.imageBlurred" />
+          <page-params-link class="link" :pageParams="links.FAQ">
+            {{ $t('contribution.inappropriatePicture') }}
+            <base-icon name="question-circle" />
+          </page-params-link>
+        </div>
+        <ds-input
+          model="title"
+          :placeholder="$t('contribution.title')"
+          name="title"
+          autofocus
+          size="large"
+        />
+        <ds-chip size="base" :color="errors && errors.title && 'danger'">
+          {{ formData.title.length }}/{{ formSchema.title.max }}
+          <base-icon v-if="errors && errors.title" name="warning" />
+        </ds-chip>
+        <hc-editor
+          :users="users"
+          :value="formData.content"
+          :hashtags="hashtags"
+          @input="updateEditorContent"
+        />
+        <ds-chip size="base" :color="errors && errors.content && 'danger'">
+          {{ contentLength }}
+          <base-icon v-if="errors && errors.content" name="warning" />
+        </ds-chip>
+        <div class="buttons">
+          <base-button data-test="cancel-button" :disabled="loading" @click="$router.back()" danger>
+            {{ $t('actions.cancel') }}
+          </base-button>
+          <base-button type="submit" icon="check" :loading="loading" :disabled="errors" filled>
+            {{ $t('actions.save') }}
+          </base-button>
+        </div>
+      </base-card>
+    </template>
+  </ds-form>
+  -->
+</template>
+
+<script>
+// import gql from 'graphql-tag'
+// import { mapGetters } from 'vuex'
+// import HcEditor from '~/components/Editor/Editor'
+// import PostMutations from '~/graphql/PostMutations.js'
+// import ImageUploader from '~/components/ImageUploader/ImageUploader'
+// import links from '~/constants/links.js'
+// import PageParamsLink from '~/components/_new/features/PageParamsLink/PageParamsLink.vue'
+
+export default {
+  // components: {
+  //   HcEditor,
+  //   ImageUploader,
+  //   PageParamsLink,
+  // },
+  // props: {
+  //   contribution: {
+  //     type: Object,
+  //     default: () => ({}),
+  //   },
+  // },
+  // data() {
+  //   const { title, content, image } = this.contribution
+  //   const {
+  //     sensitive: imageBlurred = false,
+  //     aspectRatio: imageAspectRatio = null,
+  //     type: imageType = null,
+  //   } = image || {}
+// 
+//   //   return {
+//   //     links,
+//   //     formData: {
+//   //       title: title || '',
+//   //       content: content || '',
+//   //       image: image || null,
+//   //       imageAspectRatio,
+//   //       imageType,
+//   //       imageBlurred,
+//   //     },
+//   //     formSchema: {
+//   //       title: { required: true, min: 3, max: 100 },
+//   //       content: { required: true },
+//   //       imageBlurred: { required: false },
+//   //     },
+//   //     loading: false,
+//   //     users: [],
+//   //     hashtags: [],
+//   //     imageUpload: null,
+//   //   }
+//   // },
+//   // computed: {
+//   //   ...mapGetters({
+//   //     currentUser: 'auth/user',
+//   //   }),
+//   //   contentLength() {
+//   //     return this.$filters.removeHtml(this.formData.content).length
+//   //   },
+//   // },
+//   // methods: {
+//   //   submit() {
+//   //     let image = null
+//   //     const { title, content } = this.formData
+//   //     if (this.formData.image) {
+//   //       image = {
+//   //         sensitive: this.formData.imageBlurred,
+//   //       }
+//   //       if (this.imageUpload) {
+//   //         image.upload = this.imageUpload
+//   //         image.aspectRatio = this.formData.imageAspectRatio
+//   //         image.type = this.formData.imageType
+//   //       }
+//   //     }
+//   //     this.loading = true
+//   //     this.$apollo
+//   //       .mutate({
+//   //         mutation: this.contribution.id ? PostMutations().UpdatePost : PostMutations().CreatePost,
+//   //         variables: {
+//   //           title,
+//   //           content,
+//   //           id: this.contribution.id || null,
+//   //           image,
+//   //         },
+//   //       })
+//   //       .then(({ data }) => {
+//   //         this.loading = false
+//   //         this.$toast.success(this.$t('contribution.success'))
+//   //         const result = data[this.contribution.id ? 'UpdatePost' : 'CreatePost']
+// 
+//   //         this.$router.push({
+//   //           name: 'post-id-slug',
+//   //           params: { id: result.id, slug: result.slug },
+//   //         })
+//   //       })
+//   //       .catch((err) => {
+//   //         this.$toast.error(err.message)
+//   //         this.loading = false
+//   //       })
+//   //   },
+//   //   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
+  //     },
+  //   },
+  // },
+}
+</script>
+
+
diff --git a/webapp/components/GroupTeaser/GroupTeaser.vue b/webapp/components/GroupTeaser/GroupTeaser.vue
new file mode 100644
index 000000000..e9b3ba670
--- /dev/null
+++ b/webapp/components/GroupTeaser/GroupTeaser.vue
@@ -0,0 +1,24 @@
+<template>
+  <div class="group-teaser">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>
diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index 297daa511..162897883 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -366,6 +366,9 @@
     "follow": "Folgen",
     "following": "Folge Ich"
   },
+  "group": {
+    "newGroup":"Erstelle eine neue Gruppe"
+  },
   "hashtags-filter": {
     "clearSearch": "Suche löschen",
     "hashtag-search": "Suche nach #{hashtag}",
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index 8499b0290..4043eefd8 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -366,6 +366,9 @@
     "follow": "Follow",
     "following": "Following"
   },
+  "group": {
+    "newGroup":"Create a new Group"
+  },
   "hashtags-filter": {
     "clearSearch": "Clear search",
     "hashtag-search": "Searching for #{hashtag}",
diff --git a/webapp/pages/group/create.vue b/webapp/pages/group/create.vue
new file mode 100644
index 000000000..6b52167f2
--- /dev/null
+++ b/webapp/pages/group/create.vue
@@ -0,0 +1,18 @@
+<template>
+<div>
+ <h2>Neue Gruppe</h2>
+  
+  
+      <new-group-form style="padding-top: 30px"/>
+  </div>
+</template>
+
+<script>
+import NewGroupForm from '~/components/GroupForm/GroupForm'
+
+export default {
+  components: {
+    NewGroupForm,
+  },
+}
+</script>
diff --git a/webapp/pages/my-groups.vue b/webapp/pages/my-groups.vue
new file mode 100644
index 000000000..386bb1e51
--- /dev/null
+++ b/webapp/pages/my-groups.vue
@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <div>my groups</div>
+    <group-teaser />
+  </div>
+</template>
+<script>
+import GroupTeaser from '~/components/GroupTeaser/GroupTeaser.vue'
+
+export default {
+  name: 'MyGroups',
+  components: {
+    GroupTeaser,
+  },
+}
+</script>