From f1831661e58c1547485b16d49036e8ef5a14ac9b Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Sun, 7 Aug 2022 14:12:17 +0200
Subject: [PATCH] add my-groups page and setting link

---
 webapp/components/GroupForm/GroupForm.vue     | 208 +++++-------------
 webapp/components/GroupTeaser/GroupTeaser.vue |  40 ++--
 webapp/locales/de.json                        |   3 +
 webapp/locales/en.json                        |   3 +
 webapp/pages/group/create.vue                 |   9 +-
 webapp/pages/settings.vue                     |   4 +
 6 files changed, 88 insertions(+), 179 deletions(-)

diff --git a/webapp/components/GroupForm/GroupForm.vue b/webapp/components/GroupForm/GroupForm.vue
index 76d659b96..e730a3c13 100644
--- a/webapp/components/GroupForm/GroupForm.vue
+++ b/webapp/components/GroupForm/GroupForm.vue
@@ -3,10 +3,7 @@
     <ds-container>
       <ds-form
     v-model="formData"
-    @submit="handleSubmit"
-    @input="handleInput"
-    @input-valid="handleInputValid"
-    @reset="handleReset"
+    @submit="submit"
     :schema="formSchema">
     <template slot-scope="{ errors, reset }">
       <ds-input
@@ -27,6 +24,20 @@
         label="Beschreibung"
         type="textarea"
         rows="3"></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
@@ -47,122 +58,47 @@
               </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'
+import CategoriesSelect from '~/components/CategoriesSelect/CategoriesSelect'
 
 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,
-//   //   }
-//   // },
+   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 []
+          },
+        },
+      },
+ 
+    }
+  },
 //   // computed: {
 //   //   ...mapGetters({
 //   //     currentUser: 'auth/user',
@@ -172,45 +108,9 @@ export default {
 //   //   },
 //   // },
 //   // 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
-//   //       })
-//   //   },
+         handleSubmit() {
+             console.log('handleSubmit')
+         },
 //   //   updateEditorContent(value) {
 //   //     this.$refs.contributionForm.update('content', value)
 //   //   },
diff --git a/webapp/components/GroupTeaser/GroupTeaser.vue b/webapp/components/GroupTeaser/GroupTeaser.vue
index e9b3ba670..a199106a5 100644
--- a/webapp/components/GroupTeaser/GroupTeaser.vue
+++ b/webapp/components/GroupTeaser/GroupTeaser.vue
@@ -1,24 +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 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 162897883..cdc5817bb 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -741,6 +741,9 @@
       "unmute": "Stummschaltung aufheben",
       "unmuted": "{name} ist nicht mehr stummgeschaltet"
     },
+    "groups": {
+      "name":"Meine Gruppen"
+    },
     "name": "Einstellungen",
     "notifications": {
       "name": "Benachrichtigungen",
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index 4043eefd8..658b84ffa 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -741,6 +741,9 @@
       "unmute": "Unmute user",
       "unmuted": "{name} is unmuted again"
     },
+    "groups": {
+      "name":"My Groups"
+    },
     "name": "Settings",
     "notifications": {
       "name": "Notifications",
diff --git a/webapp/pages/group/create.vue b/webapp/pages/group/create.vue
index 6b52167f2..b77096859 100644
--- a/webapp/pages/group/create.vue
+++ b/webapp/pages/group/create.vue
@@ -1,9 +1,8 @@
 <template>
-<div>
- <h2>Neue Gruppe</h2>
-  
-  
-      <new-group-form style="padding-top: 30px"/>
+  <div>
+    <h2>Neue Gruppe</h2>
+
+    <new-group-form style="padding-top: 30px" />
   </div>
 </template>
 
diff --git a/webapp/pages/settings.vue b/webapp/pages/settings.vue
index 360f1e969..c0a145306 100644
--- a/webapp/pages/settings.vue
+++ b/webapp/pages/settings.vue
@@ -39,6 +39,10 @@ export default {
           name: this.$t('settings.social-media.name'),
           path: `/settings/my-social-media`,
         },
+        {
+          name: this.$t('settings.groups.name'),
+          path: `/my-groups`,
+        },
         {
           name: this.$t('settings.muted-users.name'),
           path: `/settings/muted-users`,