From bf60c418054a695c322b4737352c424539503caf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Wed, 28 Sep 2022 07:22:56 +0200
Subject: [PATCH 01/40] Overtake 'GroupContentMenu' from branch
 '5344-add-group-members-management'

---
 .../components/Group/GroupContentMenu.spec.js | 35 +++++++
 webapp/components/Group/GroupContentMenu.vue  | 99 +++++++++++++++++++
 2 files changed, 134 insertions(+)
 create mode 100644 webapp/components/Group/GroupContentMenu.spec.js
 create mode 100644 webapp/components/Group/GroupContentMenu.vue

diff --git a/webapp/components/Group/GroupContentMenu.spec.js b/webapp/components/Group/GroupContentMenu.spec.js
new file mode 100644
index 000000000..69c13e6f0
--- /dev/null
+++ b/webapp/components/Group/GroupContentMenu.spec.js
@@ -0,0 +1,35 @@
+import { mount } from '@vue/test-utils'
+import GroupContentMenu from './GroupContentMenu.vue'
+
+const localVue = global.localVue
+
+const propsData = {
+  resource: {},
+  group: {},
+  resourceType: 'group',
+}
+
+describe('GroupContentMenu', () => {
+  let wrapper
+  let mocks
+
+  beforeEach(() => {
+    mocks = {
+      $t: jest.fn(),
+    }
+  })
+
+  describe('mount', () => {
+    const Wrapper = () => {
+      return mount(GroupContentMenu, { propsData, mocks, localVue })
+    }
+
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    it('renders', () => {
+      expect(wrapper.findAll('.group-menu')).toHaveLength(1)
+    })
+  })
+})
diff --git a/webapp/components/Group/GroupContentMenu.vue b/webapp/components/Group/GroupContentMenu.vue
new file mode 100644
index 000000000..cfebe65a4
--- /dev/null
+++ b/webapp/components/Group/GroupContentMenu.vue
@@ -0,0 +1,99 @@
+<template>
+  <dropdown class="group-menu" :placement="placement" offset="5">
+    <template #default="{ toggleMenu }">
+      <slot name="button" :toggleMenu="toggleMenu">
+        <base-button
+          icon="ellipsis-v"
+          size="small"
+          circle
+          @click.prevent="toggleMenu()"
+          data-test="group-menu-button"
+        />
+      </slot>
+    </template>
+    <template #popover="{ toggleMenu }">
+      <div class="group-menu-popover">
+        <ds-menu :routes="routes">
+          <template #menuitem="item">
+            {{ item.parents }}
+            <ds-menu-item
+              :route="item.route"
+              :parents="item.parents"
+              @click.stop.prevent="openItem(item.route, toggleMenu)"
+            >
+              <base-icon :name="item.route.icon" />
+              {{ item.route.label }}
+            </ds-menu-item>
+          </template>
+        </ds-menu>
+      </div>
+    </template>
+  </dropdown>
+</template>
+
+<script>
+import Dropdown from '~/components/Dropdown'
+
+export default {
+  name: 'GroupContentMenu',
+  components: {
+    Dropdown,
+  },
+  props: {
+    placement: { type: String, default: 'bottom-end' },
+    resource: { type: Object, required: true },
+    group: { type: Object, required: true },
+    resourceType: {
+      type: String,
+      required: true,
+      validator: (value) => {
+        return value.match(/(group)/)
+      },
+    },
+  },
+  computed: {
+    routes() {
+      const routes = []
+
+      if (this.resourceType === 'group') {
+        routes.push({
+          label: this.$t('group.contentMenu.visitGroupPage'),
+          icon: 'home',
+          name: 'group-id-slug',
+          params: { id: this.group.id, slug: this.group.slug },
+        })
+        if (this.group.myRole === 'owner') {
+          routes.push({
+            label: this.$t('admin.settings.name'),
+            path: `/group/edit/${this.resource.id}`,
+            icon: 'edit',
+          })
+        }
+      }
+
+      return routes
+    },
+  },
+  methods: {
+    openItem(route, toggleMenu) {
+      if (route.callback) {
+        route.callback()
+      } else {
+        this.$router.push(route)
+      }
+      toggleMenu()
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+.group-menu-popover {
+  nav {
+    margin-top: -$space-xx-small;
+    margin-bottom: -$space-xx-small;
+    margin-left: -$space-x-small;
+    margin-right: -$space-x-small;
+  }
+}
+</style>

From 6364974b71ef407dc8ddeea5b726e02c796bfccb Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Wed, 28 Sep 2022 10:15:39 +0200
Subject: [PATCH 02/40] add editor component for GroupForm.vue

---
 webapp/components/Group/GroupForm.vue | 28 ++++++++++++++++++++-------
 1 file changed, 21 insertions(+), 7 deletions(-)

diff --git a/webapp/components/Group/GroupForm.vue b/webapp/components/Group/GroupForm.vue
index 8a9638b1a..0923d6fc2 100644
--- a/webapp/components/Group/GroupForm.vue
+++ b/webapp/components/Group/GroupForm.vue
@@ -24,12 +24,16 @@
 
         <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>
+        <hc-editor
+          :users="null"
+          :value="formData.description"
+          :hashtags="null"
+          @input="updateEditorDescription"
+        />
+        <ds-chip size="base" :color="errors && errors.content && 'danger'">
+          {{ `${contentLength} / ${descriptionMin}` }}
+          <base-icon v-if="errors && errors.content" name="warning" />
+        </ds-chip>
 
         <ds-select
           icon="card"
@@ -70,11 +74,13 @@
 import CategoriesSelect from '~/components/CategoriesSelect/CategoriesSelect'
 import { CATEGORIES_MIN, CATEGORIES_MAX } from '~/constants/categories.js'
 import { NAME_LENGTH_MIN, NAME_LENGTH_MAX } from '~/constants/groups.js'
+import HcEditor from '~/components/Editor/Editor'
 
 export default {
   name: 'GroupForm',
   components: {
     CategoriesSelect,
+    HcEditor,
   },
   props: {
     update: {
@@ -93,6 +99,7 @@ export default {
     return {
       categoriesActive: this.$env.CATEGORIES_ACTIVE,
       disabled: false,
+      descriptionMin: 50,
       formData: {
         name: name || '',
         groupType: groupType || '',
@@ -123,8 +130,15 @@ export default {
       },
     }
   },
-
+  computed: {
+    contentLength() {
+      return this.$filters.removeHtml(this.formData.description).length
+    },
+  },
   methods: {
+    updateEditorDescription(value) {
+      this.$refs.groupForm.update('description', value)
+    },
     submit() {
       const { name, about, description, groupType, actionRadius, categoryIds } = this.formData
       const variables = {

From 8ff171395c4e7dca2c4671e8476998df09fd7d0f Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Wed, 28 Sep 2022 10:17:29 +0200
Subject: [PATCH 03/40] delete unused code

---
 webapp/components/Group/GroupForm.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/webapp/components/Group/GroupForm.vue b/webapp/components/Group/GroupForm.vue
index 0923d6fc2..45fd428e1 100644
--- a/webapp/components/Group/GroupForm.vue
+++ b/webapp/components/Group/GroupForm.vue
@@ -48,8 +48,6 @@
           :existingCategoryIds="formData.categoryIds"
         />
 
-        <div>{{ formData }}</div>
-
         <ds-space margin-top="large">
           <ds-button @click.prevent="reset()">Reset form</ds-button>
           <ds-button

From a5021486ebe4867cb6783b2415c44a058ce0f2bd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Wed, 28 Sep 2022 12:01:27 +0200
Subject: [PATCH 04/40] Remove 'gost' property from 'ContentMenu' button

---
 webapp/components/ContentMenu/ContentMenu.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/webapp/components/ContentMenu/ContentMenu.vue b/webapp/components/ContentMenu/ContentMenu.vue
index 88d83d059..60bcccf43 100644
--- a/webapp/components/ContentMenu/ContentMenu.vue
+++ b/webapp/components/ContentMenu/ContentMenu.vue
@@ -7,7 +7,6 @@
           icon="ellipsis-v"
           size="small"
           circle
-          ghost
           @click.prevent="toggleMenu()"
         />
       </slot>

From 1e01ccfa7184a866fb21cd2f1f19242bfae130b6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Wed, 28 Sep 2022 12:02:41 +0200
Subject: [PATCH 05/40] Add 'GroupContentMenu' on group profile page

---
 webapp/components/Group/GroupContentMenu.vue |  9 ++++---
 webapp/pages/group/_id/_slug.vue             | 28 ++++++++++----------
 2 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/webapp/components/Group/GroupContentMenu.vue b/webapp/components/Group/GroupContentMenu.vue
index cfebe65a4..97a884698 100644
--- a/webapp/components/Group/GroupContentMenu.vue
+++ b/webapp/components/Group/GroupContentMenu.vue
@@ -1,5 +1,5 @@
 <template>
-  <dropdown class="group-menu" :placement="placement" offset="5">
+  <dropdown class="group-content-menu" :placement="placement" offset="5">
     <template #default="{ toggleMenu }">
       <slot name="button" :toggleMenu="toggleMenu">
         <base-button
@@ -42,7 +42,6 @@ export default {
   props: {
     placement: { type: String, default: 'bottom-end' },
     resource: { type: Object, required: true },
-    group: { type: Object, required: true },
     resourceType: {
       type: String,
       required: true,
@@ -54,15 +53,17 @@ export default {
   computed: {
     routes() {
       const routes = []
+      console.log('resource: ', this.resource)
 
       if (this.resourceType === 'group') {
+        console.log('this.resourceType: ', this.resourceType)
         routes.push({
           label: this.$t('group.contentMenu.visitGroupPage'),
           icon: 'home',
           name: 'group-id-slug',
-          params: { id: this.group.id, slug: this.group.slug },
+          params: { id: this.resource.id, slug: this.resource.slug },
         })
-        if (this.group.myRole === 'owner') {
+        if (this.resource.myRole === 'owner') {
           routes.push({
             label: this.$t('admin.settings.name'),
             path: `/group/edit/${this.resource.id}`,
diff --git a/webapp/pages/group/_id/_slug.vue b/webapp/pages/group/_id/_slug.vue
index 120c79cbd..470513266 100644
--- a/webapp/pages/group/_id/_slug.vue
+++ b/webapp/pages/group/_id/_slug.vue
@@ -16,20 +16,20 @@
           </avatar-uploader>
           <profile-avatar v-else :profile="group" class="profile-page-avatar" size="large" />
           <!-- Menu -->
-          <!-- <client-only>
-            <content-menu
+          <client-only>
+            <group-content-menu
               placement="bottom-end"
-              resource-type="user"
-              :resource="user"
-              :is-owner="isGroupOwner"
-              class="user-content-menu"
-              @mute="muteUser"
+              :resourceType="'group'"
+              :resource="group || {}"
+              class="group-content-menu"
+            />
+            <!-- TODO: implement later on -->
+              <!-- @mute="muteUser"
               @unmute="unmuteUser"
               @block="blockUser"
               @unblock="unblockUser"
-              @delete="deleteUser"
-            />
-          </client-only> -->
+              @delete="deleteUser" -->
+          </client-only>
           <ds-space margin="small">
             <!-- Group name -->
             <ds-heading tag="h3" align="center" no-margin>
@@ -314,12 +314,12 @@ import { updateGroupMutation, groupQuery, groupMembersQuery } from '~/graphql/gr
 import postListActions from '~/mixins/postListActions'
 import AvatarUploader from '~/components/Uploader/AvatarUploader'
 import Category from '~/components/Category'
-// import ContentMenu from '~/components/ContentMenu/ContentMenu'
 import ContentViewer from '~/components/Editor/ContentViewer'
 import CountTo from '~/components/CountTo.vue'
 import Empty from '~/components/Empty/Empty'
 // import FollowButton from '~/components/Button/FollowButton'
 // import FollowList from '~/components/features/ProfileList/FollowList'
+import GroupContentMenu from '~/components/Group/GroupContentMenu'
 import JoinLeaveButton from '~/components/Button/JoinLeaveButton'
 import MasonryGrid from '~/components/MasonryGrid/MasonryGrid.vue'
 import MasonryGridItem from '~/components/MasonryGrid/MasonryGridItem.vue'
@@ -341,12 +341,12 @@ export default {
   components: {
     AvatarUploader,
     Category,
-    // ContentMenu,
     ContentViewer,
     CountTo,
     Empty,
     // FollowButton,
     // FollowList,
+    GroupContentMenu,
     JoinLeaveButton,
     PostTeaser,
     ProfileAvatar,
@@ -636,8 +636,8 @@ export default {
   margin: auto;
   margin-top: -60px;
 }
-.page-name-profile-id-slug {
-  .ds-flex-item:first-child .content-menu {
+.page-name-group-id-slug {
+  .ds-flex-item:first-child .group-content-menu {
     position: absolute;
     top: $space-x-small;
     right: $space-x-small;

From 0d8ce0a17213d5c3d938fbb0dd46bb4c9d2337a2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Wed, 28 Sep 2022 12:04:26 +0200
Subject: [PATCH 06/40] Cleanup

---
 webapp/components/Group/GroupContentMenu.vue | 2 --
 webapp/pages/group/_id/_slug.vue             | 2 +-
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/webapp/components/Group/GroupContentMenu.vue b/webapp/components/Group/GroupContentMenu.vue
index 97a884698..a9a667c57 100644
--- a/webapp/components/Group/GroupContentMenu.vue
+++ b/webapp/components/Group/GroupContentMenu.vue
@@ -53,10 +53,8 @@ export default {
   computed: {
     routes() {
       const routes = []
-      console.log('resource: ', this.resource)
 
       if (this.resourceType === 'group') {
-        console.log('this.resourceType: ', this.resourceType)
         routes.push({
           label: this.$t('group.contentMenu.visitGroupPage'),
           icon: 'home',
diff --git a/webapp/pages/group/_id/_slug.vue b/webapp/pages/group/_id/_slug.vue
index 470513266..873094ba1 100644
--- a/webapp/pages/group/_id/_slug.vue
+++ b/webapp/pages/group/_id/_slug.vue
@@ -24,7 +24,7 @@
               class="group-content-menu"
             />
             <!-- TODO: implement later on -->
-              <!-- @mute="muteUser"
+            <!-- @mute="muteUser"
               @unmute="unmuteUser"
               @block="blockUser"
               @unblock="unblockUser"

From b965bab56ba32163734ecb7440b3ddc7a9ed3df6 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Wed, 28 Sep 2022 14:36:35 +0200
Subject: [PATCH 07/40] translation selects in GroupForm.vue, change css of
 selects

---
 webapp/components/Group/GroupForm.vue | 108 +++++++++++++++-----------
 1 file changed, 64 insertions(+), 44 deletions(-)

diff --git a/webapp/components/Group/GroupForm.vue b/webapp/components/Group/GroupForm.vue
index 380e1d4b2..516e0895f 100644
--- a/webapp/components/Group/GroupForm.vue
+++ b/webapp/components/Group/GroupForm.vue
@@ -7,18 +7,21 @@
       :schema="formSchema"
       @submit="submit"
     >
+    <template #default="{ errors }">
       <ds-input
         :label="$t('group.name')"
         v-model="formData.name"
         :placeholder="`${$t('group.name')} …`"
       ></ds-input>
-      <ds-input
-        v-if="update"
-        :label="$t('group.labelSlug')"
-        v-model="formData.slug"
-        icon="at"
-        :placeholder="`${$t('group.labelSlug')} …`"
-      ></ds-input>
+      <ds-space margin-top="large">
+        <ds-input
+          v-if="update"
+          :label="$t('group.labelSlug')"
+          v-model="formData.slug"
+          icon="at"
+          :placeholder="`${$t('group.labelSlug')} …`"
+        ></ds-input>
+      </ds-space>
       <!-- groupType -->
       <!-- TODO: change it has to be implemented later -->
       <!-- TODO: move 'ds-select' from styleguide to main code and implement missen translation etc. functionality -->
@@ -31,29 +34,37 @@
         icon="user"
         :placeholder="$t('group.type') + ' …'"
       ></ds-select> -->
-      <ds-text class="select-label">
-        {{ $t('group.type') }}
-      </ds-text>
-      <ds-icon class="select-icon" name="user" />
-      <select
-        class="select"
-        :options="groupTypeOptions"
-        :value="formData.groupType"
-        :disabled="update"
-        @change="changeGroupType($event)"
-      >
-        <option v-for="groupType in groupTypeOptions" :key="groupType" :value="groupType">
-          {{ $t(`group.types.${groupType}`) }}
-        </option>
-      </select>
+      <ds-space margin-top="large">
+        <ds-text class="select-label">
+          {{ $t('group.type') }}
+        </ds-text>
+        <!-- <ds-icon class="select-icon" name="user" /> -->
+        <select
+          class="select ds-input"
+          :options="groupTypeOptions"
+          :value="formData.groupType"
+          :disabled="update"
+          @change="changeGroupType($event)"
+        >
+          <option v-for="groupType in groupTypeOptions" :key="groupType" :value="groupType">
+            {{ $t(`group.types.${groupType}`) }}
+          </option>
+        </select>
+      </ds-space>
       <!-- goal -->
-      <ds-input
-        :label="$t('group.goal')"
-        v-model="formData.about"
-        :placeholder="$t('group.goal') + ' …'"
-        rows="3"
-      ></ds-input>
+      <ds-space margin-top="large"> 
+        <ds-input
+          :label="$t('group.goal')"
+          v-model="formData.about"
+          :placeholder="$t('group.goal') + ' …'"
+          rows="3"
+        ></ds-input>
+      </ds-space>
       <!-- description -->
+      <ds-space margin-top="large">
+      <ds-text class="select-label">
+        {{ $t('group.description') }}
+      </ds-text>
       <hc-editor
           :users="null"
           :value="formData.description"
@@ -64,6 +75,7 @@
           {{ `${contentLength} / ${descriptionMin}` }}
           <base-icon v-if="errors && errors.content" name="warning" />
         </ds-chip>
+        </ds-space>
       <ds-space margin-top="large">
         <!-- actionRadius -->
         <!-- TODO: move 'ds-select' from styleguide to main code and implement missen translation etc. functionality -->
@@ -79,9 +91,9 @@
         <ds-text class="select-label">
           {{ $t('group.actionRadius') }}
         </ds-text>
-        <ds-icon class="select-icon" name="globe" />
+        <!-- <ds-icon class="select-icon" name="globe" /> -->
         <select
-          class="select"
+          class="select ds-input"
           :options="actionRadiusOptions"
           :value="formData.actionRadius"
           @change="changeActionRadius($event)"
@@ -91,10 +103,12 @@
             :key="actionRadius"
             :value="actionRadius"
           >
-            {{ $t(`group.actionRadii.${actionRadius}`) }}
+            {{ $t(`group.actionRadii.${actionRadius}`)  }}
           </option>
         </select>
+      </ds-space>
         <!-- location -->
+        <ds-space margin-top="large">
         <ds-select
           id="city"
           :label="$t('settings.data.labelCity')"
@@ -129,6 +143,7 @@
           {{ update ? $t('group.update') : $t('group.save') }}
         </ds-button>
       </ds-space>
+    </template>
     </ds-form>
   </div>
 </template>
@@ -167,8 +182,17 @@ export default {
       categoriesActive: this.$env.CATEGORIES_ACTIVE,
       disabled: false,
       descriptionMin: 50,
-      groupTypeOptions: ['public', 'closed', 'hidden'],
-      actionRadiusOptions: ['regional', 'national', 'continental', 'global'],
+      groupTypeOptions: [
+        'public', 
+        'closed', 
+        'hidden'
+      ],
+      actionRadiusOptions: [ 
+        'regional',
+        'national',
+        'continental',
+        'global'
+      ],
       loadingGeo: false,
       cities: [],
       formData: {
@@ -317,16 +341,12 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.select-label {
-  margin-bottom: 3pt;
-  color: $text-color-soft;
-}
-.select-icon {
-  margin-right: 4pt;
-  color: $text-color-disabled;
-}
-.select {
-  margin-bottom: $space-small;
-  color: $text-color-base;
+
+
+.ds-input {
+    -webkit-appearance: auto;
+    -moz-appearance: auto;
+    appearance: auto;
 }
+
 </style>

From f21796b5e2f681f9e6e3f679205707f6274eef0f Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Wed, 28 Sep 2022 15:20:51 +0200
Subject: [PATCH 08/40] delete location entry per button

---
 webapp/components/Group/GroupForm.vue | 49 ++++++++++++---------------
 1 file changed, 21 insertions(+), 28 deletions(-)

diff --git a/webapp/components/Group/GroupForm.vue b/webapp/components/Group/GroupForm.vue
index 516e0895f..b82b3953c 100644
--- a/webapp/components/Group/GroupForm.vue
+++ b/webapp/components/Group/GroupForm.vue
@@ -8,11 +8,14 @@
       @submit="submit"
     >
     <template #default="{ errors }">
+      <!-- Group Name -->
       <ds-input
         :label="$t('group.name')"
         v-model="formData.name"
         :placeholder="`${$t('group.name')} …`"
       ></ds-input>
+
+      <!-- Group Slug -->
       <ds-space margin-top="large">
         <ds-input
           v-if="update"
@@ -22,25 +25,14 @@
           :placeholder="`${$t('group.labelSlug')} …`"
         ></ds-input>
       </ds-space>
+
       <!-- groupType -->
-      <!-- TODO: change it has to be implemented later -->
-      <!-- TODO: move 'ds-select' from styleguide to main code and implement missen translation etc. functionality -->
-      <!-- <ds-select
-        id="groupType"
-        :label="$t('group.type')"
-        :v-model="formData.groupType"
-        :label-prop="'label'"
-        :options="groupTypeOptions"
-        icon="user"
-        :placeholder="$t('group.type') + ' …'"
-      ></ds-select> -->
       <ds-space margin-top="large">
         <ds-text class="select-label">
           {{ $t('group.type') }}
         </ds-text>
-        <!-- <ds-icon class="select-icon" name="user" /> -->
         <select
-          class="select ds-input"
+          class="select ds-input appearance--auto"
           :options="groupTypeOptions"
           :value="formData.groupType"
           :disabled="update"
@@ -51,6 +43,7 @@
           </option>
         </select>
       </ds-space>
+
       <!-- goal -->
       <ds-space margin-top="large"> 
         <ds-input
@@ -60,6 +53,7 @@
           rows="3"
         ></ds-input>
       </ds-space>
+
       <!-- description -->
       <ds-space margin-top="large">
       <ds-text class="select-label">
@@ -77,23 +71,13 @@
         </ds-chip>
         </ds-space>
       <ds-space margin-top="large">
+
         <!-- actionRadius -->
-        <!-- TODO: move 'ds-select' from styleguide to main code and implement missen translation etc. functionality -->
-        <!-- <ds-select
-          id="actionRadius"
-          :label="$t('group.actionRadius')"
-          v-model="formData"
-          model="actionRadius"
-          :options="['regional', 'national', 'continental', 'global']"
-          icon="globe"
-          :placeholder="`${$t('group.actionRadius')} …`"
-        ></ds-select> -->
         <ds-text class="select-label">
           {{ $t('group.actionRadius') }}
         </ds-text>
-        <!-- <ds-icon class="select-icon" name="globe" /> -->
         <select
-          class="select ds-input"
+          class="select ds-input appearance--auto"
           :options="actionRadiusOptions"
           :value="formData.actionRadius"
           @change="changeActionRadius($event)"
@@ -107,6 +91,7 @@
           </option>
         </select>
       </ds-space>
+
         <!-- location -->
         <ds-space margin-top="large">
         <ds-select
@@ -115,12 +100,20 @@
           v-model="formData.locationName"
           :options="cities"
           icon="map-marker"
+          :icon-right="null"
           :placeholder="$t('settings.data.labelCity') + ' …'"
           :loading="loadingGeo"
           @input.native="handleCityInput"
+
         />
-        <!-- TODO: implement clear button -->
-        <!-- <base-button icon="close" circle ghost size="small" :disabled="formData.locationName.length === 0" @click="clear" /> -->
+        <base-button 
+          v-if="formData.locationName !== ''" 
+          icon="close"  
+          ghost 
+          size="small" 
+          @click="formData.locationName = ''"
+          style="position:relative; display: inline-block; right: -93%; top: -45px">
+        </base-button>
       </ds-space>
       <ds-space margin-top="large">
         <categories-select
@@ -343,7 +336,7 @@ export default {
 <style lang="scss" scoped>
 
 
-.ds-input {
+.appearance--auto {
     -webkit-appearance: auto;
     -moz-appearance: auto;
     appearance: auto;

From 1199c5d77a16d4f527aa524e16e37a078e87d858 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Wed, 28 Sep 2022 15:21:40 +0200
Subject: [PATCH 09/40] fix lint

---
 webapp/components/Group/GroupForm.vue | 263 ++++++++++++--------------
 1 file changed, 124 insertions(+), 139 deletions(-)

diff --git a/webapp/components/Group/GroupForm.vue b/webapp/components/Group/GroupForm.vue
index b82b3953c..6454d4493 100644
--- a/webapp/components/Group/GroupForm.vue
+++ b/webapp/components/Group/GroupForm.vue
@@ -7,136 +7,134 @@
       :schema="formSchema"
       @submit="submit"
     >
-    <template #default="{ errors }">
-      <!-- Group Name -->
-      <ds-input
-        :label="$t('group.name')"
-        v-model="formData.name"
-        :placeholder="`${$t('group.name')} …`"
-      ></ds-input>
-
-      <!-- Group Slug -->
-      <ds-space margin-top="large">
+      <template #default="{ errors }">
+        <!-- Group Name -->
         <ds-input
-          v-if="update"
-          :label="$t('group.labelSlug')"
-          v-model="formData.slug"
-          icon="at"
-          :placeholder="`${$t('group.labelSlug')} …`"
+          :label="$t('group.name')"
+          v-model="formData.name"
+          :placeholder="`${$t('group.name')} …`"
         ></ds-input>
-      </ds-space>
 
-      <!-- groupType -->
-      <ds-space margin-top="large">
-        <ds-text class="select-label">
-          {{ $t('group.type') }}
-        </ds-text>
-        <select
-          class="select ds-input appearance--auto"
-          :options="groupTypeOptions"
-          :value="formData.groupType"
-          :disabled="update"
-          @change="changeGroupType($event)"
-        >
-          <option v-for="groupType in groupTypeOptions" :key="groupType" :value="groupType">
-            {{ $t(`group.types.${groupType}`) }}
-          </option>
-        </select>
-      </ds-space>
-
-      <!-- goal -->
-      <ds-space margin-top="large"> 
-        <ds-input
-          :label="$t('group.goal')"
-          v-model="formData.about"
-          :placeholder="$t('group.goal') + ' …'"
-          rows="3"
-        ></ds-input>
-      </ds-space>
-
-      <!-- description -->
-      <ds-space margin-top="large">
-      <ds-text class="select-label">
-        {{ $t('group.description') }}
-      </ds-text>
-      <hc-editor
-          :users="null"
-          :value="formData.description"
-          :hashtags="null"
-          @input="updateEditorDescription"
-        />
-        <ds-chip size="base" :color="errors && errors.content && 'danger'">
-          {{ `${contentLength} / ${descriptionMin}` }}
-          <base-icon v-if="errors && errors.content" name="warning" />
-        </ds-chip>
+        <!-- Group Slug -->
+        <ds-space margin-top="large">
+          <ds-input
+            v-if="update"
+            :label="$t('group.labelSlug')"
+            v-model="formData.slug"
+            icon="at"
+            :placeholder="`${$t('group.labelSlug')} …`"
+          ></ds-input>
         </ds-space>
-      <ds-space margin-top="large">
 
-        <!-- actionRadius -->
-        <ds-text class="select-label">
-          {{ $t('group.actionRadius') }}
-        </ds-text>
-        <select
-          class="select ds-input appearance--auto"
-          :options="actionRadiusOptions"
-          :value="formData.actionRadius"
-          @change="changeActionRadius($event)"
-        >
-          <option
-            v-for="actionRadius in actionRadiusOptions"
-            :key="actionRadius"
-            :value="actionRadius"
+        <!-- groupType -->
+        <ds-space margin-top="large">
+          <ds-text class="select-label">
+            {{ $t('group.type') }}
+          </ds-text>
+          <select
+            class="select ds-input appearance--auto"
+            :options="groupTypeOptions"
+            :value="formData.groupType"
+            :disabled="update"
+            @change="changeGroupType($event)"
           >
-            {{ $t(`group.actionRadii.${actionRadius}`)  }}
-          </option>
-        </select>
-      </ds-space>
+            <option v-for="groupType in groupTypeOptions" :key="groupType" :value="groupType">
+              {{ $t(`group.types.${groupType}`) }}
+            </option>
+          </select>
+        </ds-space>
+
+        <!-- goal -->
+        <ds-space margin-top="large">
+          <ds-input
+            :label="$t('group.goal')"
+            v-model="formData.about"
+            :placeholder="$t('group.goal') + ' …'"
+            rows="3"
+          ></ds-input>
+        </ds-space>
+
+        <!-- description -->
+        <ds-space margin-top="large">
+          <ds-text class="select-label">
+            {{ $t('group.description') }}
+          </ds-text>
+          <hc-editor
+            :users="null"
+            :value="formData.description"
+            :hashtags="null"
+            @input="updateEditorDescription"
+          />
+          <ds-chip size="base" :color="errors && errors.content && 'danger'">
+            {{ `${contentLength} / ${descriptionMin}` }}
+            <base-icon v-if="errors && errors.content" name="warning" />
+          </ds-chip>
+        </ds-space>
+        <ds-space margin-top="large">
+          <!-- actionRadius -->
+          <ds-text class="select-label">
+            {{ $t('group.actionRadius') }}
+          </ds-text>
+          <select
+            class="select ds-input appearance--auto"
+            :options="actionRadiusOptions"
+            :value="formData.actionRadius"
+            @change="changeActionRadius($event)"
+          >
+            <option
+              v-for="actionRadius in actionRadiusOptions"
+              :key="actionRadius"
+              :value="actionRadius"
+            >
+              {{ $t(`group.actionRadii.${actionRadius}`) }}
+            </option>
+          </select>
+        </ds-space>
 
         <!-- location -->
         <ds-space margin-top="large">
-        <ds-select
-          id="city"
-          :label="$t('settings.data.labelCity')"
-          v-model="formData.locationName"
-          :options="cities"
-          icon="map-marker"
-          :icon-right="null"
-          :placeholder="$t('settings.data.labelCity') + ' …'"
-          :loading="loadingGeo"
-          @input.native="handleCityInput"
-
-        />
-        <base-button 
-          v-if="formData.locationName !== ''" 
-          icon="close"  
-          ghost 
-          size="small" 
-          @click="formData.locationName = ''"
-          style="position:relative; display: inline-block; right: -93%; top: -45px">
-        </base-button>
-      </ds-space>
-      <ds-space margin-top="large">
-        <categories-select
-          v-if="categoriesActive"
-          model="categoryIds"
-          :existingCategoryIds="formData.categoryIds"
-        />
-      </ds-space>
-      <ds-space margin-top="large">
-        <nuxt-link to="/my-groups">
-          <ds-button>{{ $t('actions.cancel') }}</ds-button>
-        </nuxt-link>
-        <ds-button
-          type="submit"
-          icon="save"
-          :disabled="update ? submitDisableEdit : submitDisable"
-          primary
-          @click.prevent="submit()"
-        >
-          {{ update ? $t('group.update') : $t('group.save') }}
-        </ds-button>
-      </ds-space>
-    </template>
+          <ds-select
+            id="city"
+            :label="$t('settings.data.labelCity')"
+            v-model="formData.locationName"
+            :options="cities"
+            icon="map-marker"
+            :icon-right="null"
+            :placeholder="$t('settings.data.labelCity') + ' …'"
+            :loading="loadingGeo"
+            @input.native="handleCityInput"
+          />
+          <base-button
+            v-if="formData.locationName !== ''"
+            icon="close"
+            ghost
+            size="small"
+            @click="formData.locationName = ''"
+            style="position: relative; display: inline-block; right: -93%; top: -45px"
+          ></base-button>
+        </ds-space>
+        <ds-space margin-top="large">
+          <categories-select
+            v-if="categoriesActive"
+            model="categoryIds"
+            :existingCategoryIds="formData.categoryIds"
+          />
+        </ds-space>
+        <ds-space margin-top="large">
+          <nuxt-link to="/my-groups">
+            <ds-button>{{ $t('actions.cancel') }}</ds-button>
+          </nuxt-link>
+          <ds-button
+            type="submit"
+            icon="save"
+            :disabled="update ? submitDisableEdit : submitDisable"
+            primary
+            @click.prevent="submit()"
+          >
+            {{ update ? $t('group.update') : $t('group.save') }}
+          </ds-button>
+        </ds-space>
+      </template>
     </ds-form>
   </div>
 </template>
@@ -175,17 +173,8 @@ export default {
       categoriesActive: this.$env.CATEGORIES_ACTIVE,
       disabled: false,
       descriptionMin: 50,
-      groupTypeOptions: [
-        'public', 
-        'closed', 
-        'hidden'
-      ],
-      actionRadiusOptions: [ 
-        'regional',
-        'national',
-        'continental',
-        'global'
-      ],
+      groupTypeOptions: ['public', 'closed', 'hidden'],
+      actionRadiusOptions: ['regional', 'national', 'continental', 'global'],
       loadingGeo: false,
       cities: [],
       formData: {
@@ -223,7 +212,6 @@ export default {
     }
   },
   computed: {
-
     contentLength() {
       return this.$filters.removeHtml(this.formData.description).length
     },
@@ -334,12 +322,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-
-
 .appearance--auto {
-    -webkit-appearance: auto;
-    -moz-appearance: auto;
-    appearance: auto;
+  -webkit-appearance: auto;
+  -moz-appearance: auto;
+  appearance: auto;
 }
-
 </style>

From 2eda102a71c2b2465effdea7ccf33c6789f5ac0c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Wed, 28 Sep 2022 16:37:46 +0200
Subject: [PATCH 10/40] Remove doubled 'GroupButton'

---
 webapp/layouts/default.vue | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/webapp/layouts/default.vue b/webapp/layouts/default.vue
index 9a1e87fe1..6fb3a2f54 100644
--- a/webapp/layouts/default.vue
+++ b/webapp/layouts/default.vue
@@ -91,9 +91,6 @@
                   <client-only v-if="SHOW_GROUP_BUTTON_IN_HEADER">
                     <group-button />
                   </client-only>
-                  <client-only>
-                    <group-button />
-                  </client-only>
                   <client-only>
                     <avatar-menu placement="top" />
                   </client-only>

From ac9be9e2a3fd74f5a02fa194273491f8b9ba67db Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Wed, 28 Sep 2022 16:38:56 +0200
Subject: [PATCH 11/40] Refactor 'GroupContentMenu' component

---
 webapp/components/Group/GroupContentMenu.vue | 27 ++++++++------------
 webapp/components/Group/GroupTeaser.vue      |  7 +----
 webapp/pages/group/_id/_slug.vue             |  4 +--
 3 files changed, 13 insertions(+), 25 deletions(-)

diff --git a/webapp/components/Group/GroupContentMenu.vue b/webapp/components/Group/GroupContentMenu.vue
index 929232bfe..7a7737320 100644
--- a/webapp/components/Group/GroupContentMenu.vue
+++ b/webapp/components/Group/GroupContentMenu.vue
@@ -47,34 +47,27 @@ export default {
         return value.match(/(groupTeaser|groupProfile)/)
       },
     },
-    resource: { type: Object, required: true },
-    resourceType: {
-      type: String,
-      required: true,
-      validator: (value) => {
-        return value.match(/(group)/)
-      },
-    },
+    group: { type: Object, required: true },
     placement: { type: String, default: 'bottom-end' },
   },
   computed: {
     routes() {
       const routes = []
 
-      if (this.resourceType === 'group') {
+      if (this.usage !== 'groupProfile') {
         routes.push({
           label: this.$t('group.contentMenu.visitGroupPage'),
           icon: 'home',
           name: 'group-id-slug',
-          params: { id: this.resource.id, slug: this.resource.slug },
+          params: { id: this.group.id, slug: this.group.slug },
+        })
+      }
+      if (this.group.myRole === 'owner') {
+        routes.push({
+          label: this.$t('admin.settings.name'),
+          path: `/group/edit/${this.group.id}`,
+          icon: 'edit',
         })
-        if (this.resource.myRole === 'owner') {
-          routes.push({
-            label: this.$t('admin.settings.name'),
-            path: `/group/edit/${this.resource.id}`,
-            icon: 'edit',
-          })
-        }
       }
 
       return routes
diff --git a/webapp/components/Group/GroupTeaser.vue b/webapp/components/Group/GroupTeaser.vue
index 1b9ede71e..4d50c1181 100644
--- a/webapp/components/Group/GroupTeaser.vue
+++ b/webapp/components/Group/GroupTeaser.vue
@@ -58,12 +58,7 @@
         <div v-else class="categories-placeholder"></div>
         <!-- group context menu -->
         <client-only>
-          <group-content-menu
-            :usage="'groupProfile'"
-            :resourceType="'group'"
-            :resource="group"
-            :group="group"
-          />
+          <group-content-menu :usage="'groupTeaser'" :group="group || {}" placement="bottom-end" />
         </client-only>
       </footer>
       <footer class="footer">
diff --git a/webapp/pages/group/_id/_slug.vue b/webapp/pages/group/_id/_slug.vue
index 6ec506e2e..22ecda4c9 100644
--- a/webapp/pages/group/_id/_slug.vue
+++ b/webapp/pages/group/_id/_slug.vue
@@ -18,10 +18,10 @@
           <!-- Menu -->
           <client-only>
             <group-content-menu
+              v-if="isGroupOwner"
               class="group-content-menu"
               :usage="'groupProfile'"
-              :resourceType="'group'"
-              :resource="group || {}"
+              :group="group || {}"
               placement="bottom-end"
             />
             <!-- TODO: implement later on -->

From f534d1cd40275dff3a96d14fd9a0a922a4352302 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Wed, 28 Sep 2022 16:42:22 +0200
Subject: [PATCH 12/40] Move component 'GroupContentMenu' to folder
 'ContentMenu'

---
 .../components/{Group => ContentMenu}/GroupContentMenu.spec.js  | 0
 webapp/components/{Group => ContentMenu}/GroupContentMenu.vue   | 0
 webapp/components/Group/GroupTeaser.vue                         | 2 +-
 webapp/pages/group/_id/_slug.vue                                | 2 +-
 4 files changed, 2 insertions(+), 2 deletions(-)
 rename webapp/components/{Group => ContentMenu}/GroupContentMenu.spec.js (100%)
 rename webapp/components/{Group => ContentMenu}/GroupContentMenu.vue (100%)

diff --git a/webapp/components/Group/GroupContentMenu.spec.js b/webapp/components/ContentMenu/GroupContentMenu.spec.js
similarity index 100%
rename from webapp/components/Group/GroupContentMenu.spec.js
rename to webapp/components/ContentMenu/GroupContentMenu.spec.js
diff --git a/webapp/components/Group/GroupContentMenu.vue b/webapp/components/ContentMenu/GroupContentMenu.vue
similarity index 100%
rename from webapp/components/Group/GroupContentMenu.vue
rename to webapp/components/ContentMenu/GroupContentMenu.vue
diff --git a/webapp/components/Group/GroupTeaser.vue b/webapp/components/Group/GroupTeaser.vue
index 4d50c1181..75a1150d6 100644
--- a/webapp/components/Group/GroupTeaser.vue
+++ b/webapp/components/Group/GroupTeaser.vue
@@ -78,7 +78,7 @@
 
 <script>
 import Category from '~/components/Category'
-import GroupContentMenu from '~/components/Group/GroupContentMenu'
+import GroupContentMenu from '~/components/ContentMenu/GroupContentMenu'
 
 export default {
   name: 'GroupTeaser',
diff --git a/webapp/pages/group/_id/_slug.vue b/webapp/pages/group/_id/_slug.vue
index 22ecda4c9..ab342480c 100644
--- a/webapp/pages/group/_id/_slug.vue
+++ b/webapp/pages/group/_id/_slug.vue
@@ -320,7 +320,7 @@ import CountTo from '~/components/CountTo.vue'
 import Empty from '~/components/Empty/Empty'
 // import FollowButton from '~/components/Button/FollowButton'
 // import FollowList from '~/components/features/ProfileList/FollowList'
-import GroupContentMenu from '~/components/Group/GroupContentMenu'
+import GroupContentMenu from '~/components/ContentMenu/GroupContentMenu'
 import JoinLeaveButton from '~/components/Button/JoinLeaveButton'
 import MasonryGrid from '~/components/MasonryGrid/MasonryGrid.vue'
 import MasonryGridItem from '~/components/MasonryGrid/MasonryGridItem.vue'

From 5a9d9f9da8c64e577eec41b8fe38cdf5a187fa00 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Wed, 28 Sep 2022 19:00:13 +0200
Subject: [PATCH 13/40] Fix tests in webapp

---
 .../ContentMenu/GroupContentMenu.spec.js      |  7 ++-
 webapp/pages/group/_id/_slug.spec.js          | 50 ++++++++++++++++++-
 2 files changed, 54 insertions(+), 3 deletions(-)

diff --git a/webapp/components/ContentMenu/GroupContentMenu.spec.js b/webapp/components/ContentMenu/GroupContentMenu.spec.js
index 69c13e6f0..8b17b24b1 100644
--- a/webapp/components/ContentMenu/GroupContentMenu.spec.js
+++ b/webapp/components/ContentMenu/GroupContentMenu.spec.js
@@ -1,9 +1,12 @@
-import { mount } from '@vue/test-utils'
+import { config, mount } from '@vue/test-utils'
 import GroupContentMenu from './GroupContentMenu.vue'
 
 const localVue = global.localVue
 
+config.stubs['router-link'] = '<span><slot /></span>'
+
 const propsData = {
+  usage: 'groupTeaser',
   resource: {},
   group: {},
   resourceType: 'group',
@@ -29,7 +32,7 @@ describe('GroupContentMenu', () => {
     })
 
     it('renders', () => {
-      expect(wrapper.findAll('.group-menu')).toHaveLength(1)
+      expect(wrapper.findAll('.group-content-menu')).toHaveLength(1)
     })
   })
 })
diff --git a/webapp/pages/group/_id/_slug.spec.js b/webapp/pages/group/_id/_slug.spec.js
index 1f92212ab..e70df568a 100644
--- a/webapp/pages/group/_id/_slug.spec.js
+++ b/webapp/pages/group/_id/_slug.spec.js
@@ -6,7 +6,7 @@ const localVue = global.localVue
 localVue.filter('date', (d) => d)
 
 config.stubs['client-only'] = '<span><slot /></span>'
-// config.stubs['v-popover'] = '<span><slot /></span>'
+config.stubs['v-popover'] = '<span><slot /></span>'
 config.stubs['nuxt-link'] = '<span><slot /></span>'
 // config.stubs['infinite-loading'] = '<span><slot /></span>'
 // config.stubs['follow-list'] = '<span><slot /></span>'
@@ -237,6 +237,10 @@ describe('GroupProfileSlug', () => {
             expect(wrapper.find('.profile-avatar').exists()).toBe(true)
           })
 
+          it('has GroupContentMenu', () => {
+            expect(wrapper.find('.group-content-menu').exists()).toBe(true)
+          })
+
           it('has group slug', () => {
             expect(wrapper.find('[data-test="at"]').exists()).toBe(true)
             expect(wrapper.text()).toContain('yoga-practice')
@@ -385,6 +389,10 @@ describe('GroupProfileSlug', () => {
             expect(wrapper.find('.profile-avatar').exists()).toBe(true)
           })
 
+          it('has not(!) GroupContentMenu', () => {
+            expect(wrapper.find('.group-content-menu').exists()).toBe(false)
+          })
+
           it('has group slug', () => {
             expect(wrapper.find('[data-test="at"]').exists()).toBe(true)
             expect(wrapper.text()).toContain('yoga-practice')
@@ -493,6 +501,10 @@ describe('GroupProfileSlug', () => {
             expect(wrapper.find('.profile-avatar').exists()).toBe(true)
           })
 
+          it('has not(!) GroupContentMenu', () => {
+            expect(wrapper.find('.group-content-menu').exists()).toBe(false)
+          })
+
           it('has group slug', () => {
             expect(wrapper.find('[data-test="at"]').exists()).toBe(true)
             expect(wrapper.text()).toContain('yoga-practice')
@@ -601,6 +613,10 @@ describe('GroupProfileSlug', () => {
             expect(wrapper.find('.profile-avatar').exists()).toBe(true)
           })
 
+          it('has not(!) GroupContentMenu', () => {
+            expect(wrapper.find('.group-content-menu').exists()).toBe(false)
+          })
+
           it('has group slug', () => {
             expect(wrapper.find('[data-test="at"]').exists()).toBe(true)
             expect(wrapper.text()).toContain('yoga-practice')
@@ -713,6 +729,10 @@ describe('GroupProfileSlug', () => {
             expect(wrapper.find('.profile-avatar').exists()).toBe(true)
           })
 
+          it('has GroupContentMenu', () => {
+            expect(wrapper.find('.group-content-menu').exists()).toBe(true)
+          })
+
           it('has group slug', () => {
             expect(wrapper.find('[data-test="at"]').exists()).toBe(true)
             expect(wrapper.text()).toContain('school-for-citizens')
@@ -825,6 +845,10 @@ describe('GroupProfileSlug', () => {
             expect(wrapper.find('.profile-avatar').exists()).toBe(true)
           })
 
+          it('has not(!) GroupContentMenu', () => {
+            expect(wrapper.find('.group-content-menu').exists()).toBe(false)
+          })
+
           it('has group slug', () => {
             expect(wrapper.find('[data-test="at"]').exists()).toBe(true)
             expect(wrapper.text()).toContain('school-for-citizens')
@@ -937,6 +961,10 @@ describe('GroupProfileSlug', () => {
             expect(wrapper.find('.profile-avatar').exists()).toBe(true)
           })
 
+          it('has not(!) GroupContentMenu', () => {
+            expect(wrapper.find('.group-content-menu').exists()).toBe(false)
+          })
+
           it('has group slug', () => {
             expect(wrapper.find('[data-test="at"]').exists()).toBe(true)
             expect(wrapper.text()).toContain('school-for-citizens')
@@ -1049,6 +1077,10 @@ describe('GroupProfileSlug', () => {
             expect(wrapper.find('.profile-avatar').exists()).toBe(true)
           })
 
+          it('has not(!) GroupContentMenu', () => {
+            expect(wrapper.find('.group-content-menu').exists()).toBe(false)
+          })
+
           it('has group slug', () => {
             expect(wrapper.find('[data-test="at"]').exists()).toBe(true)
             expect(wrapper.text()).toContain('school-for-citizens')
@@ -1165,6 +1197,10 @@ describe('GroupProfileSlug', () => {
             expect(wrapper.find('.profile-avatar').exists()).toBe(true)
           })
 
+          it('has GroupContentMenu', () => {
+            expect(wrapper.find('.group-content-menu').exists()).toBe(true)
+          })
+
           it('has group slug', () => {
             expect(wrapper.find('[data-test="at"]').exists()).toBe(true)
             expect(wrapper.text()).toContain('investigative-journalism')
@@ -1280,6 +1316,10 @@ describe('GroupProfileSlug', () => {
             expect(wrapper.find('.profile-avatar').exists()).toBe(true)
           })
 
+          it('has not(!) GroupContentMenu', () => {
+            expect(wrapper.find('.group-content-menu').exists()).toBe(false)
+          })
+
           it('has group slug', () => {
             expect(wrapper.find('[data-test="at"]').exists()).toBe(true)
             expect(wrapper.text()).toContain('investigative-journalism')
@@ -1395,6 +1435,10 @@ describe('GroupProfileSlug', () => {
             expect(wrapper.find('.profile-avatar').exists()).toBe(false)
           })
 
+          it('has not(!) GroupContentMenu', () => {
+            expect(wrapper.find('.group-content-menu').exists()).toBe(false)
+          })
+
           it('has no(!) group slug', () => {
             expect(wrapper.find('[data-test="at"]').exists()).toBe(false)
             expect(wrapper.text()).not.toContain('investigative-journalism')
@@ -1498,6 +1542,10 @@ describe('GroupProfileSlug', () => {
             expect(wrapper.find('.profile-avatar').exists()).toBe(false)
           })
 
+          it('has not(!) GroupContentMenu', () => {
+            expect(wrapper.find('.group-content-menu').exists()).toBe(false)
+          })
+
           it('has no(!) group slug', () => {
             expect(wrapper.find('[data-test="at"]').exists()).toBe(false)
             expect(wrapper.text()).not.toContain('investigative-journalism')

From 992dd991c9f63e4e8ac742376a34fe4d114c29c2 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Thu, 29 Sep 2022 11:09:50 +0200
Subject: [PATCH 14/40] form error alternativ

---
 webapp/components/Group/GroupForm.vue | 313 +++++++++++++++-----------
 1 file changed, 186 insertions(+), 127 deletions(-)

diff --git a/webapp/components/Group/GroupForm.vue b/webapp/components/Group/GroupForm.vue
index 6454d4493..4c29364ee 100644
--- a/webapp/components/Group/GroupForm.vue
+++ b/webapp/components/Group/GroupForm.vue
@@ -7,133 +7,183 @@
       :schema="formSchema"
       @submit="submit"
     >
-      <template #default="{ errors }">
-        <!-- Group Name -->
-        <ds-input
-          :label="$t('group.name')"
-          v-model="formData.name"
-          :placeholder="`${$t('group.name')} …`"
-        ></ds-input>
-
-        <!-- Group Slug -->
-        <ds-space margin-top="large">
+      <template #default>
+        <base-card>
+          <!-- Group Name -->
           <ds-input
-            v-if="update"
-            :label="$t('group.labelSlug')"
-            v-model="formData.slug"
-            icon="at"
-            :placeholder="`${$t('group.labelSlug')} …`"
-          ></ds-input>
-        </ds-space>
-
-        <!-- groupType -->
-        <ds-space margin-top="large">
-          <ds-text class="select-label">
-            {{ $t('group.type') }}
-          </ds-text>
-          <select
-            class="select ds-input appearance--auto"
-            :options="groupTypeOptions"
-            :value="formData.groupType"
-            :disabled="update"
-            @change="changeGroupType($event)"
-          >
-            <option v-for="groupType in groupTypeOptions" :key="groupType" :value="groupType">
-              {{ $t(`group.types.${groupType}`) }}
-            </option>
-          </select>
-        </ds-space>
-
-        <!-- goal -->
-        <ds-space margin-top="large">
-          <ds-input
-            :label="$t('group.goal')"
-            v-model="formData.about"
-            :placeholder="$t('group.goal') + ' …'"
-            rows="3"
-          ></ds-input>
-        </ds-space>
-
-        <!-- description -->
-        <ds-space margin-top="large">
-          <ds-text class="select-label">
-            {{ $t('group.description') }}
-          </ds-text>
-          <hc-editor
-            :users="null"
-            :value="formData.description"
-            :hashtags="null"
-            @input="updateEditorDescription"
+            :label="$t('group.name')"
+            v-model="formData.name"
+            :placeholder="`${$t('group.name')} …`"
           />
-          <ds-chip size="base" :color="errors && errors.content && 'danger'">
-            {{ `${contentLength} / ${descriptionMin}` }}
-            <base-icon v-if="errors && errors.content" name="warning" />
-          </ds-chip>
-        </ds-space>
-        <ds-space margin-top="large">
-          <!-- actionRadius -->
-          <ds-text class="select-label">
-            {{ $t('group.actionRadius') }}
-          </ds-text>
-          <select
-            class="select ds-input appearance--auto"
-            :options="actionRadiusOptions"
-            :value="formData.actionRadius"
-            @change="changeActionRadius($event)"
-          >
-            <option
-              v-for="actionRadius in actionRadiusOptions"
-              :key="actionRadius"
-              :value="actionRadius"
+          <ds-text align="right">
+          <ds-chip 
+            size="base" 
+            :color="formData.name.length < formSchema.name.min ? '' : 'success' && formData.name.length > formSchema.name.max ? 'danger' : 'success'">
+              {{ `${formData.name.length} / ${formSchema.name.max}` }}
+              <base-icon 
+              v-if="formData.name.length > formSchema.name.max" 
+              name="warning" />
+            </ds-chip>
+             </ds-text>
+ 
+          <!-- Group Slug -->
+          <ds-space margin-top="large">
+            <ds-input
+              v-if="update"
+              :label="$t('group.labelSlug')"
+              v-model="formData.slug"
+              icon="at"
+              :placeholder="`${$t('group.labelSlug')} …`"
+            ></ds-input>
+          </ds-space>
+
+          <!-- groupType -->
+          <ds-space margin-top="large">
+            <ds-text class="select-label">
+              {{ $t('group.type') }}
+            </ds-text>
+            <select
+              class="select ds-input appearance--auto"
+              :options="groupTypeOptions"
+              :value="formData.groupType"
+              :disabled="update"
+              @change="changeGroupType($event)"
             >
-              {{ $t(`group.actionRadii.${actionRadius}`) }}
-            </option>
-          </select>
-        </ds-space>
+              <option v-for="groupType in groupTypeOptions" :key="groupType" :value="groupType">
+                {{ $t(`group.types.${groupType}`) }}
+              </option>
+            </select>
+            <ds-text align="right"> 
+            <ds-chip 
+            size="base" 
+            :color="formData.groupType === '' ? '' : 'success'">
+              <base-icon 
+              :name="formData.groupType === '' ? 'warning' : 'check'" />
+            </ds-chip></ds-text>
+          </ds-space>
+         
+          <!-- goal -->
+          <ds-space margin-top="large">
+            <ds-input
+              :label="$t('group.goal')"
+              v-model="formData.about"
+              :placeholder="$t('group.goal') + ' …'"
+              rows="3"
+            />
+            <ds-text align="right">
+            <ds-chip 
+            size="base" 
+            :color="formData.about.length < formSchema.about.min ? '' : 'success' && formData.about.length > formSchema.about.max ? 'danger' : 'success' ">
+              {{ `${formData.about.length} / ${formSchema.about.max}` }}
+              <base-icon 
+              v-if="formData.about.length > formSchema.about.max" 
+              name="warning" />
+            </ds-chip></ds-text>
+          </ds-space>
 
-        <!-- location -->
-        <ds-space margin-top="large">
-          <ds-select
-            id="city"
-            :label="$t('settings.data.labelCity')"
-            v-model="formData.locationName"
-            :options="cities"
-            icon="map-marker"
-            :icon-right="null"
-            :placeholder="$t('settings.data.labelCity') + ' …'"
-            :loading="loadingGeo"
-            @input.native="handleCityInput"
-          />
-          <base-button
-            v-if="formData.locationName !== ''"
-            icon="close"
-            ghost
-            size="small"
-            @click="formData.locationName = ''"
-            style="position: relative; display: inline-block; right: -93%; top: -45px"
-          ></base-button>
-        </ds-space>
-        <ds-space margin-top="large">
-          <categories-select
-            v-if="categoriesActive"
-            model="categoryIds"
-            :existingCategoryIds="formData.categoryIds"
-          />
-        </ds-space>
-        <ds-space margin-top="large">
-          <nuxt-link to="/my-groups">
-            <ds-button>{{ $t('actions.cancel') }}</ds-button>
-          </nuxt-link>
-          <ds-button
-            type="submit"
-            icon="save"
-            :disabled="update ? submitDisableEdit : submitDisable"
-            primary
-            @click.prevent="submit()"
-          >
-            {{ update ? $t('group.update') : $t('group.save') }}
-          </ds-button>
-        </ds-space>
+          <!-- description -->
+          <ds-space margin-top="large">
+            <ds-text class="select-label">
+              {{ $t('group.description') }}
+            </ds-text>
+            <hc-editor
+              :users="null"
+              :value="formData.description"
+              :hashtags="null"
+              @input="updateEditorDescription"
+            />
+            <ds-text align="right">
+            <ds-chip 
+            size="base" 
+            :color="contentLength < formSchema.description.min ? '' : 'success' && contentLength > formSchema.description.max ? 'danger' : 'success'">
+              {{ `${contentLength} / ${formSchema.description.max}` }}
+              <base-icon 
+              v-if="contentLength > formSchema.description.max" 
+              name="warning" />
+            </ds-chip></ds-text>
+          </ds-space>
+
+          <!-- actionRadius -->
+          <ds-space margin-top="large">
+            <ds-text class="select-label">
+              {{ $t('group.actionRadius') }}
+            </ds-text>
+            <select
+              class="select ds-input appearance--auto"
+              :options="actionRadiusOptions"
+              :value="formData.actionRadius"
+              @change="changeActionRadius($event)"
+            >
+              <option
+                v-for="actionRadius in actionRadiusOptions"
+                :key="actionRadius"
+                :value="actionRadius"
+              >
+                {{ $t(`group.actionRadii.${actionRadius}`) }}
+              </option>
+            </select>
+            <ds-text align="right">
+            <ds-chip 
+            size="base" 
+            :color="formData.actionRadius === '' ? '' : 'success'">
+              <base-icon 
+              :name="formData.actionRadius === '' ? 'warning' : 'check'" />
+            </ds-chip></ds-text>
+          </ds-space>
+
+          <!-- location -->
+          <ds-space margin-top="large">
+            <ds-select
+              id="city"
+              :label="$t('settings.data.labelCity')"
+              v-model="formData.locationName"
+              :options="cities"
+              icon="map-marker"
+              :icon-right="null"
+              :placeholder="$t('settings.data.labelCity') + ' …'"
+              :loading="loadingGeo"
+              @input.native="handleCityInput"
+            />
+            <base-button
+              v-if="formData.locationName !== ''"
+              icon="close"
+              ghost
+              size="small"
+              @click="formData.locationName = ''"
+              style="position: relative; display: inline-block; right: -93%; top: -45px"
+            ></base-button>
+          </ds-space>
+          <ds-space margin-top="large">
+            <categories-select
+              v-if="categoriesActive"
+              model="categoryIds"
+              :existingCategoryIds="formData.categoryIds"
+            />
+            <ds-text align="right">
+            <ds-chip 
+            size="base" 
+            :color="formData.categoryIds.length < 1 ? '' : 'success'">
+            {{ formData.categoryIds.length }} / 3
+              <base-icon 
+              v-if="formData.categoryIds.length < 1" 
+              name="warning" />
+            </ds-chip></ds-text>
+          </ds-space>
+          <ds-space margin-top="large">
+            <nuxt-link to="/my-groups">
+              <ds-button>{{ $t('actions.cancel') }}</ds-button>
+            </nuxt-link>
+            <ds-button
+              type="submit"
+              icon="save"
+              :disabled="update ? submitDisableEdit : submitDisable"
+              primary
+              @click.prevent="submit()"
+            >
+              {{ update ? $t('group.update') : $t('group.save') }}
+            </ds-button>
+          </ds-space>
+        </base-card>
       </template>
     </ds-form>
   </div>
@@ -191,8 +241,8 @@ export default {
         name: { required: true, min: NAME_LENGTH_MIN, max: NAME_LENGTH_MAX },
         slug: { required: false },
         groupType: { required: true },
-        about: { required: true },
-        description: { required: true },
+        about: { required: true, min: NAME_LENGTH_MIN, max: 150 },
+        description: { required: true, min: NAME_LENGTH_MIN, max: 500 },
         actionRadius: { required: true },
         locationName: { required: false },
         categoryIds: {
@@ -238,6 +288,7 @@ export default {
         this.sameCategories
       )
     },
+    
     sameCategories() {
       const formDataCategories = this.formData.categoryIds.map((id) => id).sort()
       const groupDataCategories = this.group.categories.map((category) => category.id).sort()
@@ -321,10 +372,18 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .appearance--auto {
   -webkit-appearance: auto;
   -moz-appearance: auto;
   appearance: auto;
 }
-</style>
+
+
+  ds-chip {
+    position: absolute;
+    right: 0px;
+       
+    }
+  </style>
+  

From 0a511b4ea272734095ef7e578cd44abae2cbec39 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Thu, 29 Sep 2022 11:53:51 +0200
Subject: [PATCH 15/40] form submit dissable by update

---
 webapp/components/Group/GroupForm.vue | 149 ++++++++++++++------------
 1 file changed, 81 insertions(+), 68 deletions(-)

diff --git a/webapp/components/Group/GroupForm.vue b/webapp/components/Group/GroupForm.vue
index 4c29364ee..dbb8af505 100644
--- a/webapp/components/Group/GroupForm.vue
+++ b/webapp/components/Group/GroupForm.vue
@@ -16,16 +16,21 @@
             :placeholder="`${$t('group.name')} …`"
           />
           <ds-text align="right">
-          <ds-chip 
-            size="base" 
-            :color="formData.name.length < formSchema.name.min ? '' : 'success' && formData.name.length > formSchema.name.max ? 'danger' : 'success'">
+            <ds-chip
+              size="base"
+              :color="
+                formData.name.length < formSchema.name.min
+                  ? ''
+                  : 'success' && formData.name.length > formSchema.name.max
+                  ? 'danger'
+                  : 'success'
+              "
+            >
               {{ `${formData.name.length} / ${formSchema.name.max}` }}
-              <base-icon 
-              v-if="formData.name.length > formSchema.name.max" 
-              name="warning" />
+              <base-icon v-if="formData.name.length > formSchema.name.max" name="warning" />
             </ds-chip>
-             </ds-text>
- 
+          </ds-text>
+
           <!-- Group Slug -->
           <ds-space margin-top="large">
             <ds-input
@@ -53,32 +58,36 @@
                 {{ $t(`group.types.${groupType}`) }}
               </option>
             </select>
-            <ds-text align="right"> 
-            <ds-chip 
-            size="base" 
-            :color="formData.groupType === '' ? '' : 'success'">
-              <base-icon 
-              :name="formData.groupType === '' ? 'warning' : 'check'" />
-            </ds-chip></ds-text>
+            <ds-text align="right">
+              <ds-chip size="base" :color="formData.groupType === '' ? '' : 'success'">
+                <base-icon :name="formData.groupType === '' ? 'warning' : 'check'" />
+              </ds-chip>
+            </ds-text>
           </ds-space>
-         
+
           <!-- goal -->
           <ds-space margin-top="large">
             <ds-input
               :label="$t('group.goal')"
-              v-model="formData.about"
+              v-model="formData.goal"
               :placeholder="$t('group.goal') + ' …'"
               rows="3"
             />
             <ds-text align="right">
-            <ds-chip 
-            size="base" 
-            :color="formData.about.length < formSchema.about.min ? '' : 'success' && formData.about.length > formSchema.about.max ? 'danger' : 'success' ">
-              {{ `${formData.about.length} / ${formSchema.about.max}` }}
-              <base-icon 
-              v-if="formData.about.length > formSchema.about.max" 
-              name="warning" />
-            </ds-chip></ds-text>
+              <ds-chip
+                size="base"
+                :color="
+                  formData.goal.length < formSchema.goal.min
+                    ? ''
+                    : 'success' && formData.goal.length > formSchema.goal.max
+                    ? 'danger'
+                    : 'success'
+                "
+              >
+                {{ `${formData.goal.length} / ${formSchema.goal.max}` }}
+                <base-icon v-if="formData.goal.length > formSchema.goal.max" name="warning" />
+              </ds-chip>
+            </ds-text>
           </ds-space>
 
           <!-- description -->
@@ -93,14 +102,20 @@
               @input="updateEditorDescription"
             />
             <ds-text align="right">
-            <ds-chip 
-            size="base" 
-            :color="contentLength < formSchema.description.min ? '' : 'success' && contentLength > formSchema.description.max ? 'danger' : 'success'">
-              {{ `${contentLength} / ${formSchema.description.max}` }}
-              <base-icon 
-              v-if="contentLength > formSchema.description.max" 
-              name="warning" />
-            </ds-chip></ds-text>
+              <ds-chip
+                size="base"
+                :color="
+                  descriptionLength < formSchema.description.min
+                    ? ''
+                    : 'success' && descriptionLength > formSchema.description.max
+                    ? 'danger'
+                    : 'success'
+                "
+              >
+                {{ `${descriptionLength} / ${formSchema.description.max}` }}
+                <base-icon v-if="descriptionLength > formSchema.description.max" name="warning" />
+              </ds-chip>
+            </ds-text>
           </ds-space>
 
           <!-- actionRadius -->
@@ -123,12 +138,10 @@
               </option>
             </select>
             <ds-text align="right">
-            <ds-chip 
-            size="base" 
-            :color="formData.actionRadius === '' ? '' : 'success'">
-              <base-icon 
-              :name="formData.actionRadius === '' ? 'warning' : 'check'" />
-            </ds-chip></ds-text>
+              <ds-chip size="base" :color="formData.actionRadius === '' ? '' : 'success'">
+                <base-icon :name="formData.actionRadius === '' ? 'warning' : 'check'" />
+              </ds-chip>
+            </ds-text>
           </ds-space>
 
           <!-- location -->
@@ -160,15 +173,15 @@
               :existingCategoryIds="formData.categoryIds"
             />
             <ds-text align="right">
-            <ds-chip 
-            size="base" 
-            :color="formData.categoryIds.length < 1 ? '' : 'success'">
-            {{ formData.categoryIds.length }} / 3
-              <base-icon 
-              v-if="formData.categoryIds.length < 1" 
-              name="warning" />
-            </ds-chip></ds-text>
+              <ds-chip size="base" :color="formData.categoryIds.length < 1 ? '' : 'success'">
+                {{ formData.categoryIds.length }} / 3
+                <base-icon v-if="formData.categoryIds.length < 1" name="warning" />
+              </ds-chip>
+            </ds-text>
           </ds-space>
+          submitDisable: {{submitDisable}}
+          <br />
+          submitDisableEdit: {{submitDisableEdit}}
           <ds-space margin-top="large">
             <nuxt-link to="/my-groups">
               <ds-button>{{ $t('actions.cancel') }}</ds-button>
@@ -217,7 +230,7 @@ export default {
     },
   },
   data() {
-    const { name, slug, groupType, about, description, actionRadius, locationName, categories } =
+    const { name, slug, groupType, goal, description, actionRadius, locationName, categories } =
       this.group
     return {
       categoriesActive: this.$env.CATEGORIES_ACTIVE,
@@ -231,7 +244,7 @@ export default {
         name: name || '',
         slug: slug || '',
         groupType: groupType || '',
-        about: about || '',
+        goal: goal || '',
         description: description || '',
         locationName: locationName || '',
         actionRadius: actionRadius || '',
@@ -241,8 +254,8 @@ export default {
         name: { required: true, min: NAME_LENGTH_MIN, max: NAME_LENGTH_MAX },
         slug: { required: false },
         groupType: { required: true },
-        about: { required: true, min: NAME_LENGTH_MIN, max: 150 },
-        description: { required: true, min: NAME_LENGTH_MIN, max: 500 },
+        goal: { required: true, min: NAME_LENGTH_MIN, max: 150 },
+        description: { required: true, min: NAME_LENGTH_MIN, max: 2000 },
         actionRadius: { required: true },
         locationName: { required: false },
         categoryIds: {
@@ -262,33 +275,36 @@ export default {
     }
   },
   computed: {
-    contentLength() {
+    descriptionLength() {
       return this.$filters.removeHtml(this.formData.description).length
     },
     submitDisable() {
       return (
-        this.formData.name === '' ||
+        this.formData.name.length < this.formSchema.name.min ||
+        this.formData.name.length > this.formSchema.name.max ||
         this.formData.groupType === '' ||
-        // this.formData.about === '' || // not mandatory
-        this.formData.description === '' ||
+        this.formData.goal.length > this.formSchema.goal.max || // not mandatory
+        this.descriptionLength < this.formSchema.description.min ||
+        this.descriptionLength > this.formSchema.description.max ||
         this.formData.actionRadius === '' ||
         // this.formData.locationName === '' || // not mandatory
         this.formData.categoryIds.length === 0
       )
     },
     submitDisableEdit() {
+      if ( this.submitDisable ) return this.submitDisable
       return (
         this.formData.name === this.group.name &&
         this.formData.slug === this.group.slug &&
         // this.formData.groupType === this.group.groupType && // can not be changed for now
-        this.formData.about === this.group.about &&
+        this.formData.goal === this.group.goal &&
         this.formData.description === this.group.description &&
         this.formData.actionRadius === this.group.actionRadius &&
         this.formData.locationName === (this.group.locationName ? this.group.locationName : '') &&
-        this.sameCategories
+        this.sameCategories 
       )
     },
-    
+
     sameCategories() {
       const formDataCategories = this.formData.categoryIds.map((id) => id).sort()
       const groupDataCategories = this.group.categories.map((category) => category.id).sort()
@@ -307,11 +323,11 @@ export default {
       this.$refs.groupForm.update('description', value)
     },
     submit() {
-      const { name, about, description, groupType, actionRadius, locationName, categoryIds } =
+      const { name, goal, description, groupType, actionRadius, locationName, categoryIds } =
         this.formData
       const variables = {
         name,
-        about,
+        goal,
         description,
         groupType,
         actionRadius,
@@ -379,11 +395,8 @@ export default {
   appearance: auto;
 }
 
-
-  ds-chip {
-    position: absolute;
-    right: 0px;
-       
-    }
-  </style>
-  
+ds-chip {
+  position: absolute;
+  right: 0px;
+}
+</style>

From e09fb1768fffb6782c694556418cddfe2cfb5d7b Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Thu, 29 Sep 2022 11:54:24 +0200
Subject: [PATCH 16/40] fix lint

---
 webapp/components/Group/GroupForm.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/webapp/components/Group/GroupForm.vue b/webapp/components/Group/GroupForm.vue
index dbb8af505..c11277a53 100644
--- a/webapp/components/Group/GroupForm.vue
+++ b/webapp/components/Group/GroupForm.vue
@@ -179,9 +179,9 @@
               </ds-chip>
             </ds-text>
           </ds-space>
-          submitDisable: {{submitDisable}}
+          submitDisable: {{ submitDisable }}
           <br />
-          submitDisableEdit: {{submitDisableEdit}}
+          submitDisableEdit: {{ submitDisableEdit }}
           <ds-space margin-top="large">
             <nuxt-link to="/my-groups">
               <ds-button>{{ $t('actions.cancel') }}</ds-button>
@@ -292,7 +292,7 @@ export default {
       )
     },
     submitDisableEdit() {
-      if ( this.submitDisable ) return this.submitDisable
+      if (this.submitDisable) return this.submitDisable
       return (
         this.formData.name === this.group.name &&
         this.formData.slug === this.group.slug &&
@@ -301,7 +301,7 @@ export default {
         this.formData.description === this.group.description &&
         this.formData.actionRadius === this.group.actionRadius &&
         this.formData.locationName === (this.group.locationName ? this.group.locationName : '') &&
-        this.sameCategories 
+        this.sameCategories
       )
     },
 

From 584663686a242c1a1a8055731f40ee8b5a1249a4 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Thu, 29 Sep 2022 14:30:23 +0200
Subject: [PATCH 17/40] delete LocationName in form

---
 webapp/components/Group/GroupForm.vue | 41 +++++++++------------------
 1 file changed, 14 insertions(+), 27 deletions(-)

diff --git a/webapp/components/Group/GroupForm.vue b/webapp/components/Group/GroupForm.vue
index c11277a53..149ed2ec3 100644
--- a/webapp/components/Group/GroupForm.vue
+++ b/webapp/components/Group/GroupForm.vue
@@ -76,16 +76,10 @@
             <ds-text align="right">
               <ds-chip
                 size="base"
-                :color="
-                  formData.goal.length < formSchema.goal.min
-                    ? ''
-                    : 'success' && formData.goal.length > formSchema.goal.max
-                    ? 'danger'
-                    : 'success'
-                "
+                :color="formData.goal.length < formSchema.goal.min ? '' : 'success'"
               >
-                {{ `${formData.goal.length} / ${formSchema.goal.max}` }}
-                <base-icon v-if="formData.goal.length > formSchema.goal.max" name="warning" />
+                {{ `${formData.goal.length} / ${formSchema.goal.min}` }}
+                <base-icon v-if="formData.goal.length < formSchema.goal.min" name="warning" />
               </ds-chip>
             </ds-text>
           </ds-space>
@@ -104,16 +98,10 @@
             <ds-text align="right">
               <ds-chip
                 size="base"
-                :color="
-                  descriptionLength < formSchema.description.min
-                    ? ''
-                    : 'success' && descriptionLength > formSchema.description.max
-                    ? 'danger'
-                    : 'success'
-                "
+                :color="descriptionLength >= formSchema.description.min ? 'success' : ''"
               >
-                {{ `${descriptionLength} / ${formSchema.description.max}` }}
-                <base-icon v-if="descriptionLength > formSchema.description.max" name="warning" />
+                {{ `${descriptionLength} / ${formSchema.description.min}` }}
+                <base-icon v-if="descriptionLength < formSchema.description.min" name="warning" />
               </ds-chip>
             </ds-text>
           </ds-space>
@@ -179,9 +167,6 @@
               </ds-chip>
             </ds-text>
           </ds-space>
-          submitDisable: {{ submitDisable }}
-          <br />
-          submitDisableEdit: {{ submitDisableEdit }}
           <ds-space margin-top="large">
             <nuxt-link to="/my-groups">
               <ds-button>{{ $t('actions.cancel') }}</ds-button>
@@ -205,7 +190,11 @@
 <script>
 import CategoriesSelect from '~/components/CategoriesSelect/CategoriesSelect'
 import { CATEGORIES_MIN, CATEGORIES_MAX } from '~/constants/categories.js'
-import { NAME_LENGTH_MIN, NAME_LENGTH_MAX } from '~/constants/groups.js'
+import {
+  NAME_LENGTH_MIN,
+  NAME_LENGTH_MAX,
+  DESCRIPTION_WITHOUT_HTML_LENGTH_MIN,
+} from '~/constants/groups.js'
 import HcEditor from '~/components/Editor/Editor'
 import { queryLocations } from '~/graphql/location'
 
@@ -254,8 +243,8 @@ export default {
         name: { required: true, min: NAME_LENGTH_MIN, max: NAME_LENGTH_MAX },
         slug: { required: false },
         groupType: { required: true },
-        goal: { required: true, min: NAME_LENGTH_MIN, max: 150 },
-        description: { required: true, min: NAME_LENGTH_MIN, max: 2000 },
+        goal: { required: true, min: NAME_LENGTH_MIN },
+        description: { required: true, min: DESCRIPTION_WITHOUT_HTML_LENGTH_MIN },
         actionRadius: { required: true },
         locationName: { required: false },
         categoryIds: {
@@ -281,11 +270,9 @@ export default {
     submitDisable() {
       return (
         this.formData.name.length < this.formSchema.name.min ||
-        this.formData.name.length > this.formSchema.name.max ||
         this.formData.groupType === '' ||
         this.formData.goal.length > this.formSchema.goal.max || // not mandatory
         this.descriptionLength < this.formSchema.description.min ||
-        this.descriptionLength > this.formSchema.description.max ||
         this.formData.actionRadius === '' ||
         // this.formData.locationName === '' || // not mandatory
         this.formData.categoryIds.length === 0
@@ -331,7 +318,7 @@ export default {
         description,
         groupType,
         actionRadius,
-        locationName: locationName.label,
+        locationName: locationName.label ? locationName.label : '',
         categoryIds,
       }
       this.update

From 3ebfc7c145c1e029890f4de19a28dd375f8c03bc Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Thu, 29 Sep 2022 14:35:23 +0200
Subject: [PATCH 18/40] add constants GOAL_LENGTH_MIN

---
 webapp/components/Group/GroupForm.vue | 5 +++--
 webapp/constants/groups.js            | 1 +
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/webapp/components/Group/GroupForm.vue b/webapp/components/Group/GroupForm.vue
index 149ed2ec3..f28fede12 100644
--- a/webapp/components/Group/GroupForm.vue
+++ b/webapp/components/Group/GroupForm.vue
@@ -193,6 +193,7 @@ import { CATEGORIES_MIN, CATEGORIES_MAX } from '~/constants/categories.js'
 import {
   NAME_LENGTH_MIN,
   NAME_LENGTH_MAX,
+  GOAL_LENGTH_MIN,
   DESCRIPTION_WITHOUT_HTML_LENGTH_MIN,
 } from '~/constants/groups.js'
 import HcEditor from '~/components/Editor/Editor'
@@ -243,7 +244,7 @@ export default {
         name: { required: true, min: NAME_LENGTH_MIN, max: NAME_LENGTH_MAX },
         slug: { required: false },
         groupType: { required: true },
-        goal: { required: true, min: NAME_LENGTH_MIN },
+        goal: { required: true, min: GOAL_LENGTH_MIN },
         description: { required: true, min: DESCRIPTION_WITHOUT_HTML_LENGTH_MIN },
         actionRadius: { required: true },
         locationName: { required: false },
@@ -271,7 +272,7 @@ export default {
       return (
         this.formData.name.length < this.formSchema.name.min ||
         this.formData.groupType === '' ||
-        this.formData.goal.length > this.formSchema.goal.max || // not mandatory
+        this.formData.goal.length < this.formSchema.goal.min || // not mandatory
         this.descriptionLength < this.formSchema.description.min ||
         this.formData.actionRadius === '' ||
         // this.formData.locationName === '' || // not mandatory
diff --git a/webapp/constants/groups.js b/webapp/constants/groups.js
index 1c49d3ff3..cfc241ff5 100644
--- a/webapp/constants/groups.js
+++ b/webapp/constants/groups.js
@@ -1,5 +1,6 @@
 // this file is duplicated in `backend/src/constants/group.js` and `webapp/constants/group.js`
 export const NAME_LENGTH_MIN = 3
 export const NAME_LENGTH_MAX = 50
+export const GOAL_LENGTH_MIN = 3
 export const DESCRIPTION_WITHOUT_HTML_LENGTH_MIN = 100 // with removed HTML tags
 export const SHOW_GROUP_BUTTON_IN_HEADER = true

From cf7e61a2fc7a48c9df4e1a71bbb9f3a9ac7cfc3a Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Thu, 29 Sep 2022 15:49:23 +0200
Subject: [PATCH 19/40] add default color on ds-chip in GroupForm.vue

---
 webapp/components/Group/GroupForm.vue | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/webapp/components/Group/GroupForm.vue b/webapp/components/Group/GroupForm.vue
index f28fede12..e43a20aba 100644
--- a/webapp/components/Group/GroupForm.vue
+++ b/webapp/components/Group/GroupForm.vue
@@ -20,7 +20,7 @@
               size="base"
               :color="
                 formData.name.length < formSchema.name.min
-                  ? ''
+                  ? 'medium'
                   : 'success' && formData.name.length > formSchema.name.max
                   ? 'danger'
                   : 'success'
@@ -59,7 +59,7 @@
               </option>
             </select>
             <ds-text align="right">
-              <ds-chip size="base" :color="formData.groupType === '' ? '' : 'success'">
+              <ds-chip size="base" :color="formData.groupType === '' ? 'medium' : 'success'">
                 <base-icon :name="formData.groupType === '' ? 'warning' : 'check'" />
               </ds-chip>
             </ds-text>
@@ -76,7 +76,7 @@
             <ds-text align="right">
               <ds-chip
                 size="base"
-                :color="formData.goal.length < formSchema.goal.min ? '' : 'success'"
+                :color="formData.goal.length < formSchema.goal.min ? 'medium' : 'success'"
               >
                 {{ `${formData.goal.length} / ${formSchema.goal.min}` }}
                 <base-icon v-if="formData.goal.length < formSchema.goal.min" name="warning" />
@@ -98,7 +98,7 @@
             <ds-text align="right">
               <ds-chip
                 size="base"
-                :color="descriptionLength >= formSchema.description.min ? 'success' : ''"
+                :color="descriptionLength >= formSchema.description.min ? 'success' : 'medium'"
               >
                 {{ `${descriptionLength} / ${formSchema.description.min}` }}
                 <base-icon v-if="descriptionLength < formSchema.description.min" name="warning" />
@@ -126,7 +126,7 @@
               </option>
             </select>
             <ds-text align="right">
-              <ds-chip size="base" :color="formData.actionRadius === '' ? '' : 'success'">
+              <ds-chip size="base" :color="formData.actionRadius === '' ? 'medium' : 'success'">
                 <base-icon :name="formData.actionRadius === '' ? 'warning' : 'check'" />
               </ds-chip>
             </ds-text>
@@ -161,7 +161,7 @@
               :existingCategoryIds="formData.categoryIds"
             />
             <ds-text align="right">
-              <ds-chip size="base" :color="formData.categoryIds.length < 1 ? '' : 'success'">
+              <ds-chip size="base" :color="formData.categoryIds.length < 1 ? 'medium' : 'success'">
                 {{ formData.categoryIds.length }} / 3
                 <base-icon v-if="formData.categoryIds.length < 1" name="warning" />
               </ds-chip>

From 90b64dc0f3e438895c41ff3fd29bac165317df2e Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Fri, 30 Sep 2022 10:49:54 +0200
Subject: [PATCH 20/40] resolve review fix

---
 webapp/components/Group/GroupForm.vue   | 111 +++++++-----------------
 webapp/pages/group/edit/_id/members.vue |   5 --
 2 files changed, 29 insertions(+), 87 deletions(-)

diff --git a/webapp/components/Group/GroupForm.vue b/webapp/components/Group/GroupForm.vue
index e43a20aba..48663a32d 100644
--- a/webapp/components/Group/GroupForm.vue
+++ b/webapp/components/Group/GroupForm.vue
@@ -7,27 +7,20 @@
       :schema="formSchema"
       @submit="submit"
     >
-      <template #default>
+      <template #default="{ errors }">
         <base-card>
           <!-- Group Name -->
           <ds-input
             :label="$t('group.name')"
             v-model="formData.name"
+            name="name"
+            autofocus
             :placeholder="`${$t('group.name')} …`"
           />
           <ds-text align="right">
-            <ds-chip
-              size="base"
-              :color="
-                formData.name.length < formSchema.name.min
-                  ? 'medium'
-                  : 'success' && formData.name.length > formSchema.name.max
-                  ? 'danger'
-                  : 'success'
-              "
-            >
+            <ds-chip size="base" :color="errors && errors.name && 'danger'">
               {{ `${formData.name.length} / ${formSchema.name.max}` }}
-              <base-icon v-if="formData.name.length > formSchema.name.max" name="warning" />
+              <base-icon v-if="errors && errors.name" name="warning" />
             </ds-chip>
           </ds-text>
 
@@ -52,15 +45,15 @@
               :options="groupTypeOptions"
               :value="formData.groupType"
               :disabled="update"
-              @change="changeGroupType($event)"
+              name="groupType"
             >
               <option v-for="groupType in groupTypeOptions" :key="groupType" :value="groupType">
                 {{ $t(`group.types.${groupType}`) }}
               </option>
             </select>
             <ds-text align="right">
-              <ds-chip size="base" :color="formData.groupType === '' ? 'medium' : 'success'">
-                <base-icon :name="formData.groupType === '' ? 'warning' : 'check'" />
+              <ds-chip size="base" :color="errors && errors.groupType && 'danger'">
+                <base-icon v-if="errors && errors.groupType" name="warning" />
               </ds-chip>
             </ds-text>
           </ds-space>
@@ -71,15 +64,13 @@
               :label="$t('group.goal')"
               v-model="formData.goal"
               :placeholder="$t('group.goal') + ' …'"
+              name="goal"
               rows="3"
             />
             <ds-text align="right">
-              <ds-chip
-                size="base"
-                :color="formData.goal.length < formSchema.goal.min ? 'medium' : 'success'"
-              >
+              <ds-chip size="base" :color="errors && errors.goal && 'danger'">
                 {{ `${formData.goal.length} / ${formSchema.goal.min}` }}
-                <base-icon v-if="formData.goal.length < formSchema.goal.min" name="warning" />
+                <base-icon v-if="errors && errors.goal" name="warning" />
               </ds-chip>
             </ds-text>
           </ds-space>
@@ -93,15 +84,13 @@
               :users="null"
               :value="formData.description"
               :hashtags="null"
+              name="description"
               @input="updateEditorDescription"
             />
             <ds-text align="right">
-              <ds-chip
-                size="base"
-                :color="descriptionLength >= formSchema.description.min ? 'success' : 'medium'"
-              >
+              <ds-chip size="base" :color="errors && errors.description && 'danger'">
                 {{ `${descriptionLength} / ${formSchema.description.min}` }}
-                <base-icon v-if="descriptionLength < formSchema.description.min" name="warning" />
+                <base-icon v-if="errors && errors.description" name="warning" />
               </ds-chip>
             </ds-text>
           </ds-space>
@@ -115,19 +104,19 @@
               class="select ds-input appearance--auto"
               :options="actionRadiusOptions"
               :value="formData.actionRadius"
-              @change="changeActionRadius($event)"
             >
               <option
                 v-for="actionRadius in actionRadiusOptions"
                 :key="actionRadius"
                 :value="actionRadius"
+                name="actionRadius"
               >
                 {{ $t(`group.actionRadii.${actionRadius}`) }}
               </option>
             </select>
             <ds-text align="right">
-              <ds-chip size="base" :color="formData.actionRadius === '' ? 'medium' : 'success'">
-                <base-icon :name="formData.actionRadius === '' ? 'warning' : 'check'" />
+              <ds-chip size="base" :color="errors && errors.actionRadius && 'danger'">
+                <base-icon v-if="errors && errors.actionRadius" name="warning" />
               </ds-chip>
             </ds-text>
           </ds-space>
@@ -154,16 +143,23 @@
               style="position: relative; display: inline-block; right: -93%; top: -45px"
             ></base-button>
           </ds-space>
+
+          <!-- category -->
           <ds-space margin-top="large">
             <categories-select
               v-if="categoriesActive"
               model="categoryIds"
+              name="categoryIds"
               :existingCategoryIds="formData.categoryIds"
             />
             <ds-text align="right">
-              <ds-chip size="base" :color="formData.categoryIds.length < 1 ? 'medium' : 'success'">
+              <ds-chip
+                v-if="categoriesActive"
+                size="base"
+                :color="errors && errors.categoryIds && 'danger'"
+              >
                 {{ formData.categoryIds.length }} / 3
-                <base-icon v-if="formData.categoryIds.length < 1" name="warning" />
+                <base-icon v-if="errors && errors.categoryIds" name="warning" />
               </ds-chip>
             </ds-text>
           </ds-space>
@@ -171,13 +167,7 @@
             <nuxt-link to="/my-groups">
               <ds-button>{{ $t('actions.cancel') }}</ds-button>
             </nuxt-link>
-            <ds-button
-              type="submit"
-              icon="save"
-              :disabled="update ? submitDisableEdit : submitDisable"
-              primary
-              @click.prevent="submit()"
-            >
+            <ds-button type="submit" icon="save" primary :disabled="errors" fill>
               {{ update ? $t('group.update') : $t('group.save') }}
             </ds-button>
           </ds-space>
@@ -242,9 +232,9 @@ export default {
       },
       formSchema: {
         name: { required: true, min: NAME_LENGTH_MIN, max: NAME_LENGTH_MAX },
-        slug: { required: false },
+        slug: { required: false, min: NAME_LENGTH_MIN },
         groupType: { required: true },
-        goal: { required: true, min: GOAL_LENGTH_MIN },
+        goal: { required: false, min: GOAL_LENGTH_MIN },
         description: { required: true, min: DESCRIPTION_WITHOUT_HTML_LENGTH_MIN },
         actionRadius: { required: true },
         locationName: { required: false },
@@ -268,43 +258,6 @@ export default {
     descriptionLength() {
       return this.$filters.removeHtml(this.formData.description).length
     },
-    submitDisable() {
-      return (
-        this.formData.name.length < this.formSchema.name.min ||
-        this.formData.groupType === '' ||
-        this.formData.goal.length < this.formSchema.goal.min || // not mandatory
-        this.descriptionLength < this.formSchema.description.min ||
-        this.formData.actionRadius === '' ||
-        // this.formData.locationName === '' || // not mandatory
-        this.formData.categoryIds.length === 0
-      )
-    },
-    submitDisableEdit() {
-      if (this.submitDisable) return this.submitDisable
-      return (
-        this.formData.name === this.group.name &&
-        this.formData.slug === this.group.slug &&
-        // this.formData.groupType === this.group.groupType && // can not be changed for now
-        this.formData.goal === this.group.goal &&
-        this.formData.description === this.group.description &&
-        this.formData.actionRadius === this.group.actionRadius &&
-        this.formData.locationName === (this.group.locationName ? this.group.locationName : '') &&
-        this.sameCategories
-      )
-    },
-
-    sameCategories() {
-      const formDataCategories = this.formData.categoryIds.map((id) => id).sort()
-      const groupDataCategories = this.group.categories.map((category) => category.id).sort()
-      let equal = true
-
-      if (formDataCategories.length !== groupDataCategories.length) return false
-
-      formDataCategories.forEach((id, index) => {
-        equal = equal && id === groupDataCategories[index]
-      })
-      return equal
-    },
   },
   methods: {
     updateEditorDescription(value) {
@@ -329,12 +282,6 @@ export default {
           })
         : this.$emit('createGroup', variables)
     },
-    changeGroupType(event) {
-      this.formData.groupType = event.target.value
-    },
-    changeActionRadius(event) {
-      this.formData.actionRadius = event.target.value
-    },
     handleCityInput(value) {
       clearTimeout(timeout)
       timeout = setTimeout(() => this.requestGeoData(value), 500)
diff --git a/webapp/pages/group/edit/_id/members.vue b/webapp/pages/group/edit/_id/members.vue
index 94b489871..eeeee05d1 100644
--- a/webapp/pages/group/edit/_id/members.vue
+++ b/webapp/pages/group/edit/_id/members.vue
@@ -22,11 +22,6 @@ export default {
       required: true,
     },
   },
-  data() {
-    return {
-      GroupMembers: [],
-    }
-  },
   computed: {
     groupMembers() {
       return this.GroupMembers ? this.GroupMembers : []

From 8ecd6bb0e73d4a2a40a0a93cc2d95de709ba2aa7 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Fri, 30 Sep 2022 11:24:00 +0200
Subject: [PATCH 21/40] resolve review from wolle

---
 webapp/components/Group/GroupForm.vue | 15 ++++-----------
 1 file changed, 4 insertions(+), 11 deletions(-)

diff --git a/webapp/components/Group/GroupForm.vue b/webapp/components/Group/GroupForm.vue
index 48663a32d..2fc019dea 100644
--- a/webapp/components/Group/GroupForm.vue
+++ b/webapp/components/Group/GroupForm.vue
@@ -67,12 +67,6 @@
               name="goal"
               rows="3"
             />
-            <ds-text align="right">
-              <ds-chip size="base" :color="errors && errors.goal && 'danger'">
-                {{ `${formData.goal.length} / ${formSchema.goal.min}` }}
-                <base-icon v-if="errors && errors.goal" name="warning" />
-              </ds-chip>
-            </ds-text>
           </ds-space>
 
           <!-- description -->
@@ -80,7 +74,7 @@
             <ds-text class="select-label">
               {{ $t('group.description') }}
             </ds-text>
-            <hc-editor
+            <editor
               :users="null"
               :value="formData.description"
               :hashtags="null"
@@ -183,10 +177,9 @@ import { CATEGORIES_MIN, CATEGORIES_MAX } from '~/constants/categories.js'
 import {
   NAME_LENGTH_MIN,
   NAME_LENGTH_MAX,
-  GOAL_LENGTH_MIN,
   DESCRIPTION_WITHOUT_HTML_LENGTH_MIN,
 } from '~/constants/groups.js'
-import HcEditor from '~/components/Editor/Editor'
+import Editor from '~/components/Editor/Editor'
 import { queryLocations } from '~/graphql/location'
 
 let timeout
@@ -195,7 +188,7 @@ export default {
   name: 'GroupForm',
   components: {
     CategoriesSelect,
-    HcEditor,
+    Editor,
   },
   props: {
     update: {
@@ -234,7 +227,7 @@ export default {
         name: { required: true, min: NAME_LENGTH_MIN, max: NAME_LENGTH_MAX },
         slug: { required: false, min: NAME_LENGTH_MIN },
         groupType: { required: true },
-        goal: { required: false, min: GOAL_LENGTH_MIN },
+        goal: { required: false },
         description: { required: true, min: DESCRIPTION_WITHOUT_HTML_LENGTH_MIN },
         actionRadius: { required: true },
         locationName: { required: false },

From b1e0f9655ebd86ad1a4970fec320fab3825c694a Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Fri, 30 Sep 2022 11:24:18 +0200
Subject: [PATCH 22/40] resolve review from wolle

---
 webapp/constants/groups.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/webapp/constants/groups.js b/webapp/constants/groups.js
index cfc241ff5..1c49d3ff3 100644
--- a/webapp/constants/groups.js
+++ b/webapp/constants/groups.js
@@ -1,6 +1,5 @@
 // this file is duplicated in `backend/src/constants/group.js` and `webapp/constants/group.js`
 export const NAME_LENGTH_MIN = 3
 export const NAME_LENGTH_MAX = 50
-export const GOAL_LENGTH_MIN = 3
 export const DESCRIPTION_WITHOUT_HTML_LENGTH_MIN = 100 // with removed HTML tags
 export const SHOW_GROUP_BUTTON_IN_HEADER = true

From ff0396a650e64764970bd467735326d7cb33a758 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Sun, 2 Oct 2022 11:06:11 +0200
Subject: [PATCH 23/40] check valid group form selects

---
 webapp/components/Group/GroupForm.vue | 26 +++++++++++++++++++-------
 1 file changed, 19 insertions(+), 7 deletions(-)

diff --git a/webapp/components/Group/GroupForm.vue b/webapp/components/Group/GroupForm.vue
index 2fc019dea..88b7e78bd 100644
--- a/webapp/components/Group/GroupForm.vue
+++ b/webapp/components/Group/GroupForm.vue
@@ -12,7 +12,7 @@
           <!-- Group Name -->
           <ds-input
             :label="$t('group.name')"
-            v-model="formData.name"
+            model="name"
             name="name"
             autofocus
             :placeholder="`${$t('group.name')} …`"
@@ -29,7 +29,7 @@
             <ds-input
               v-if="update"
               :label="$t('group.labelSlug')"
-              v-model="formData.slug"
+              model="slug"
               icon="at"
               :placeholder="`${$t('group.labelSlug')} …`"
             ></ds-input>
@@ -40,20 +40,23 @@
             <ds-text class="select-label">
               {{ $t('group.type') }}
             </ds-text>
+            {{formData.groupType}}
             <select
               class="select ds-input appearance--auto"
-              :options="groupTypeOptions"
+               
               :value="formData.groupType"
               :disabled="update"
+              model="groupType"
               name="groupType"
+              @change="changeGroupType($event)"
             >
               <option v-for="groupType in groupTypeOptions" :key="groupType" :value="groupType">
                 {{ $t(`group.types.${groupType}`) }}
               </option>
             </select>
             <ds-text align="right">
-              <ds-chip size="base" :color="errors && errors.groupType && 'danger'">
-                <base-icon v-if="errors && errors.groupType" name="warning" />
+              <ds-chip size="base" :color="formData.groupType === '' ? 'danger' : 'medium'">
+                <base-icon v-if="formData.groupType === ''" name="warning" />
               </ds-chip>
             </ds-text>
           </ds-space>
@@ -78,6 +81,7 @@
               :users="null"
               :value="formData.description"
               :hashtags="null"
+              model="description"
               name="description"
               @input="updateEditorDescription"
             />
@@ -98,19 +102,21 @@
               class="select ds-input appearance--auto"
               :options="actionRadiusOptions"
               :value="formData.actionRadius"
+              @change="changeActionRadius($event)"
             >
               <option
                 v-for="actionRadius in actionRadiusOptions"
                 :key="actionRadius"
                 :value="actionRadius"
+                model="actionRadius"
                 name="actionRadius"
               >
                 {{ $t(`group.actionRadii.${actionRadius}`) }}
               </option>
             </select>
             <ds-text align="right">
-              <ds-chip size="base" :color="errors && errors.actionRadius && 'danger'">
-                <base-icon v-if="errors && errors.actionRadius" name="warning" />
+              <ds-chip size="base" :color="formData.actionRadius === '' ? 'danger' : 'medium'">
+                <base-icon v-if="formData.actionRadius === ''" name="warning" />
               </ds-chip>
             </ds-text>
           </ds-space>
@@ -253,6 +259,12 @@ export default {
     },
   },
   methods: {
+    changeGroupType(e) {
+       this.formData.groupType = e.target.value
+    },
+    changeActionRadius(e) {
+      this.formData.actionRadius = e.target.value
+    },
     updateEditorDescription(value) {
       this.$refs.groupForm.update('description', value)
     },

From 60303b172bf8d25987804a1843025db36f89e85e Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Sun, 2 Oct 2022 11:06:44 +0200
Subject: [PATCH 24/40] fix lint

---
 webapp/components/Group/GroupForm.vue | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/webapp/components/Group/GroupForm.vue b/webapp/components/Group/GroupForm.vue
index 88b7e78bd..c4b1195f7 100644
--- a/webapp/components/Group/GroupForm.vue
+++ b/webapp/components/Group/GroupForm.vue
@@ -40,10 +40,9 @@
             <ds-text class="select-label">
               {{ $t('group.type') }}
             </ds-text>
-            {{formData.groupType}}
+            {{ formData.groupType }}
             <select
               class="select ds-input appearance--auto"
-               
               :value="formData.groupType"
               :disabled="update"
               model="groupType"
@@ -260,7 +259,7 @@ export default {
   },
   methods: {
     changeGroupType(e) {
-       this.formData.groupType = e.target.value
+      this.formData.groupType = e.target.value
     },
     changeActionRadius(e) {
       this.formData.actionRadius = e.target.value

From f94fc5d211fa18847f1638123e7509642968564b Mon Sep 17 00:00:00 2001
From: Alexander Friedland <ogerly@users.noreply.github.com>
Date: Tue, 4 Oct 2022 08:35:09 +0200
Subject: [PATCH 25/40] Update webapp/components/Group/GroupForm.vue
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Wolfgang Huß <wolle.huss@pjannto.com>
---
 webapp/components/Group/GroupForm.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/webapp/components/Group/GroupForm.vue b/webapp/components/Group/GroupForm.vue
index c4b1195f7..2adffb39b 100644
--- a/webapp/components/Group/GroupForm.vue
+++ b/webapp/components/Group/GroupForm.vue
@@ -7,6 +7,7 @@
       :schema="formSchema"
       @submit="submit"
     >
+      <!-- "errors" is only working if you use a submit event on the form -->
       <template #default="{ errors }">
         <base-card>
           <!-- Group Name -->

From cbedf6f0469ae4bd36ac2cba4d510374fc268456 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Tue, 4 Oct 2022 10:09:56 +0200
Subject: [PATCH 26/40] change from review

---
 webapp/components/Group/GroupForm.vue | 113 +++++++++++++++-----------
 1 file changed, 66 insertions(+), 47 deletions(-)

diff --git a/webapp/components/Group/GroupForm.vue b/webapp/components/Group/GroupForm.vue
index c4b1195f7..defd4a72c 100644
--- a/webapp/components/Group/GroupForm.vue
+++ b/webapp/components/Group/GroupForm.vue
@@ -17,15 +17,12 @@
             autofocus
             :placeholder="`${$t('group.name')} …`"
           />
-          <ds-text align="right">
             <ds-chip size="base" :color="errors && errors.name && 'danger'">
-              {{ `${formData.name.length} / ${formSchema.name.max}` }}
+              {{ `${formData.name.length} / ${formSchema.name.min}–${formSchema.name.max}` }}
               <base-icon v-if="errors && errors.name" name="warning" />
             </ds-chip>
-          </ds-text>
-
+      
           <!-- Group Slug -->
-          <ds-space margin-top="large">
             <ds-input
               v-if="update"
               :label="$t('group.labelSlug')"
@@ -33,14 +30,13 @@
               icon="at"
               :placeholder="`${$t('group.labelSlug')} …`"
             ></ds-input>
-          </ds-space>
 
           <!-- groupType -->
-          <ds-space margin-top="large">
             <ds-text class="select-label">
               {{ $t('group.type') }}
             </ds-text>
-            {{ formData.groupType }}
+            <!-- TODO: change it has to be implemented later -->
+            <!-- TODO: move 'ds-select' from styleguide to main code and implement missen translation etc. functionality -->
             <select
               class="select ds-input appearance--auto"
               :value="formData.groupType"
@@ -53,26 +49,23 @@
                 {{ $t(`group.types.${groupType}`) }}
               </option>
             </select>
-            <ds-text align="right">
-              <ds-chip size="base" :color="formData.groupType === '' ? 'danger' : 'medium'">
-                <base-icon v-if="formData.groupType === ''" name="warning" />
-              </ds-chip>
-            </ds-text>
-          </ds-space>
+            <ds-chip v-if="formData.groupType === ''" size="base" :color="formData.groupType === '' ? 'danger' : 'medium'">
+              <base-icon v-if="formData.groupType === ''" name="warning" />
+            </ds-chip>
+      
 
           <!-- goal -->
-          <ds-space margin-top="large">
             <ds-input
               :label="$t('group.goal')"
-              v-model="formData.goal"
+              v-model="formData.about"
               :placeholder="$t('group.goal') + ' …'"
-              name="goal"
+              name="about"
               rows="3"
             />
-          </ds-space>
 
-          <!-- description -->
-          <ds-space margin-top="large">
+            <ds-space margin-top="small" />
+
+            <!-- description -->
             <ds-text class="select-label">
               {{ $t('group.description') }}
             </ds-text>
@@ -84,19 +77,17 @@
               name="description"
               @input="updateEditorDescription"
             />
-            <ds-text align="right">
-              <ds-chip size="base" :color="errors && errors.description && 'danger'">
-                {{ `${descriptionLength} / ${formSchema.description.min}` }}
-                <base-icon v-if="errors && errors.description" name="warning" />
-              </ds-chip>
-            </ds-text>
-          </ds-space>
+            <ds-chip size="base" :color="errors && errors.description && 'danger'">
+              {{ `${descriptionLength} / ${formSchema.description.min}` }}
+              <base-icon v-if="errors && errors.description" name="warning" />
+            </ds-chip>
 
           <!-- actionRadius -->
-          <ds-space margin-top="large">
             <ds-text class="select-label">
               {{ $t('group.actionRadius') }}
             </ds-text>
+            <!-- TODO: change it has to be implemented later -->
+            <!-- TODO: move 'ds-select' from styleguide to main code and implement missen translation etc. functionality -->
             <select
               class="select ds-input appearance--auto"
               :options="actionRadiusOptions"
@@ -113,15 +104,11 @@
                 {{ $t(`group.actionRadii.${actionRadius}`) }}
               </option>
             </select>
-            <ds-text align="right">
-              <ds-chip size="base" :color="formData.actionRadius === '' ? 'danger' : 'medium'">
-                <base-icon v-if="formData.actionRadius === ''" name="warning" />
-              </ds-chip>
-            </ds-text>
-          </ds-space>
+            <ds-chip v-if="formData.actionRadius === ''" size="base" :color="formData.actionRadius === '' ? 'danger' : 'medium'">
+              <base-icon v-if="formData.actionRadius === ''" name="warning" />
+            </ds-chip>
 
           <!-- location -->
-          <ds-space margin-top="large">
             <ds-select
               id="city"
               :label="$t('settings.data.labelCity')"
@@ -141,10 +128,11 @@
               @click="formData.locationName = ''"
               style="position: relative; display: inline-block; right: -93%; top: -45px"
             ></base-button>
-          </ds-space>
 
-          <!-- category -->
-          <ds-space margin-top="large">
+
+            <ds-space margin-top="small" />
+
+            <!-- category -->
             <categories-select
               v-if="categoriesActive"
               model="categoryIds"
@@ -161,7 +149,8 @@
                 <base-icon v-if="errors && errors.categoryIds" name="warning" />
               </ds-chip>
             </ds-text>
-          </ds-space>
+
+            <!-- Submit -->
           <ds-space margin-top="large">
             <nuxt-link to="/my-groups">
               <ds-button>{{ $t('actions.cancel') }}</ds-button>
@@ -208,7 +197,7 @@ export default {
     },
   },
   data() {
-    const { name, slug, groupType, goal, description, actionRadius, locationName, categories } =
+    const { name, slug, groupType, about, description, actionRadius, locationName, categories } =
       this.group
     return {
       categoriesActive: this.$env.CATEGORIES_ACTIVE,
@@ -222,7 +211,7 @@ export default {
         name: name || '',
         slug: slug || '',
         groupType: groupType || '',
-        goal: goal || '',
+        about: about || '',
         description: description || '',
         locationName: locationName || '',
         actionRadius: actionRadius || '',
@@ -232,7 +221,7 @@ export default {
         name: { required: true, min: NAME_LENGTH_MIN, max: NAME_LENGTH_MAX },
         slug: { required: false, min: NAME_LENGTH_MIN },
         groupType: { required: true },
-        goal: { required: false },
+        about: { required: false },
         description: { required: true, min: DESCRIPTION_WITHOUT_HTML_LENGTH_MIN },
         actionRadius: { required: true },
         locationName: { required: false },
@@ -268,11 +257,11 @@ export default {
       this.$refs.groupForm.update('description', value)
     },
     submit() {
-      const { name, goal, description, groupType, actionRadius, locationName, categoryIds } =
+      const { name, about, description, groupType, actionRadius, locationName, categoryIds } =
         this.formData
       const variables = {
         name,
-        goal,
+        about,
         description,
         groupType,
         actionRadius,
@@ -333,9 +322,39 @@ export default {
   -moz-appearance: auto;
   appearance: auto;
 }
+.select-label {
+  margin-bottom: 0;
+  padding-bottom: 4px;
+    color: #70677e;
+    font-size: 1rem;
+}
+
+.textarea-label {
+  padding-bottom: 14px;
+}
+
+.group-form > .base-card {
+  display: flex;
+  flex-direction: column;
+
+  > .ds-form-item {
+    margin: 0;
+  }
+
+  > .ds-chip {
+    align-self: flex-end;
+    margin: $space-xx-small 0 $space-base;
+    cursor: default;
+  }
+
+  > .select-field {
+    align-self: flex-end;
+  }
+
+  > .buttons {
+    align-self: flex-end;
+    margin-top: $space-base;
+  }
 
-ds-chip {
-  position: absolute;
-  right: 0px;
 }
 </style>

From d4b5823cf147d13b0a926f7c06d947081ea32769 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Tue, 4 Oct 2022 10:11:07 +0200
Subject: [PATCH 27/40] fix lint

---
 webapp/components/Group/GroupForm.vue | 247 +++++++++++++-------------
 1 file changed, 126 insertions(+), 121 deletions(-)

diff --git a/webapp/components/Group/GroupForm.vue b/webapp/components/Group/GroupForm.vue
index defd4a72c..130ec6e8a 100644
--- a/webapp/components/Group/GroupForm.vue
+++ b/webapp/components/Group/GroupForm.vue
@@ -17,140 +17,146 @@
             autofocus
             :placeholder="`${$t('group.name')} …`"
           />
-            <ds-chip size="base" :color="errors && errors.name && 'danger'">
-              {{ `${formData.name.length} / ${formSchema.name.min}–${formSchema.name.max}` }}
-              <base-icon v-if="errors && errors.name" name="warning" />
-            </ds-chip>
-      
+          <ds-chip size="base" :color="errors && errors.name && 'danger'">
+            {{ `${formData.name.length} / ${formSchema.name.min}–${formSchema.name.max}` }}
+            <base-icon v-if="errors && errors.name" name="warning" />
+          </ds-chip>
+
           <!-- Group Slug -->
-            <ds-input
-              v-if="update"
-              :label="$t('group.labelSlug')"
-              model="slug"
-              icon="at"
-              :placeholder="`${$t('group.labelSlug')} …`"
-            ></ds-input>
+          <ds-input
+            v-if="update"
+            :label="$t('group.labelSlug')"
+            model="slug"
+            icon="at"
+            :placeholder="`${$t('group.labelSlug')} …`"
+          ></ds-input>
 
           <!-- groupType -->
-            <ds-text class="select-label">
-              {{ $t('group.type') }}
-            </ds-text>
-            <!-- TODO: change it has to be implemented later -->
-            <!-- TODO: move 'ds-select' from styleguide to main code and implement missen translation etc. functionality -->
-            <select
-              class="select ds-input appearance--auto"
-              :value="formData.groupType"
-              :disabled="update"
-              model="groupType"
-              name="groupType"
-              @change="changeGroupType($event)"
-            >
-              <option v-for="groupType in groupTypeOptions" :key="groupType" :value="groupType">
-                {{ $t(`group.types.${groupType}`) }}
-              </option>
-            </select>
-            <ds-chip v-if="formData.groupType === ''" size="base" :color="formData.groupType === '' ? 'danger' : 'medium'">
-              <base-icon v-if="formData.groupType === ''" name="warning" />
-            </ds-chip>
-      
+          <ds-text class="select-label">
+            {{ $t('group.type') }}
+          </ds-text>
+          <!-- TODO: change it has to be implemented later -->
+          <!-- TODO: move 'ds-select' from styleguide to main code and implement missen translation etc. functionality -->
+          <select
+            class="select ds-input appearance--auto"
+            :value="formData.groupType"
+            :disabled="update"
+            model="groupType"
+            name="groupType"
+            @change="changeGroupType($event)"
+          >
+            <option v-for="groupType in groupTypeOptions" :key="groupType" :value="groupType">
+              {{ $t(`group.types.${groupType}`) }}
+            </option>
+          </select>
+          <ds-chip
+            v-if="formData.groupType === ''"
+            size="base"
+            :color="formData.groupType === '' ? 'danger' : 'medium'"
+          >
+            <base-icon v-if="formData.groupType === ''" name="warning" />
+          </ds-chip>
 
           <!-- goal -->
-            <ds-input
-              :label="$t('group.goal')"
-              v-model="formData.about"
-              :placeholder="$t('group.goal') + ' …'"
-              name="about"
-              rows="3"
-            />
+          <ds-input
+            :label="$t('group.goal')"
+            v-model="formData.about"
+            :placeholder="$t('group.goal') + ' …'"
+            name="about"
+            rows="3"
+          />
 
-            <ds-space margin-top="small" />
+          <ds-space margin-top="small" />
 
-            <!-- description -->
-            <ds-text class="select-label">
-              {{ $t('group.description') }}
-            </ds-text>
-            <editor
-              :users="null"
-              :value="formData.description"
-              :hashtags="null"
-              model="description"
-              name="description"
-              @input="updateEditorDescription"
-            />
-            <ds-chip size="base" :color="errors && errors.description && 'danger'">
-              {{ `${descriptionLength} / ${formSchema.description.min}` }}
-              <base-icon v-if="errors && errors.description" name="warning" />
-            </ds-chip>
+          <!-- description -->
+          <ds-text class="select-label">
+            {{ $t('group.description') }}
+          </ds-text>
+          <editor
+            :users="null"
+            :value="formData.description"
+            :hashtags="null"
+            model="description"
+            name="description"
+            @input="updateEditorDescription"
+          />
+          <ds-chip size="base" :color="errors && errors.description && 'danger'">
+            {{ `${descriptionLength} / ${formSchema.description.min}` }}
+            <base-icon v-if="errors && errors.description" name="warning" />
+          </ds-chip>
 
           <!-- actionRadius -->
-            <ds-text class="select-label">
-              {{ $t('group.actionRadius') }}
-            </ds-text>
-            <!-- TODO: change it has to be implemented later -->
-            <!-- TODO: move 'ds-select' from styleguide to main code and implement missen translation etc. functionality -->
-            <select
-              class="select ds-input appearance--auto"
-              :options="actionRadiusOptions"
-              :value="formData.actionRadius"
-              @change="changeActionRadius($event)"
+          <ds-text class="select-label">
+            {{ $t('group.actionRadius') }}
+          </ds-text>
+          <!-- TODO: change it has to be implemented later -->
+          <!-- TODO: move 'ds-select' from styleguide to main code and implement missen translation etc. functionality -->
+          <select
+            class="select ds-input appearance--auto"
+            :options="actionRadiusOptions"
+            :value="formData.actionRadius"
+            @change="changeActionRadius($event)"
+          >
+            <option
+              v-for="actionRadius in actionRadiusOptions"
+              :key="actionRadius"
+              :value="actionRadius"
+              model="actionRadius"
+              name="actionRadius"
             >
-              <option
-                v-for="actionRadius in actionRadiusOptions"
-                :key="actionRadius"
-                :value="actionRadius"
-                model="actionRadius"
-                name="actionRadius"
-              >
-                {{ $t(`group.actionRadii.${actionRadius}`) }}
-              </option>
-            </select>
-            <ds-chip v-if="formData.actionRadius === ''" size="base" :color="formData.actionRadius === '' ? 'danger' : 'medium'">
-              <base-icon v-if="formData.actionRadius === ''" name="warning" />
-            </ds-chip>
+              {{ $t(`group.actionRadii.${actionRadius}`) }}
+            </option>
+          </select>
+          <ds-chip
+            v-if="formData.actionRadius === ''"
+            size="base"
+            :color="formData.actionRadius === '' ? 'danger' : 'medium'"
+          >
+            <base-icon v-if="formData.actionRadius === ''" name="warning" />
+          </ds-chip>
 
           <!-- location -->
-            <ds-select
-              id="city"
-              :label="$t('settings.data.labelCity')"
-              v-model="formData.locationName"
-              :options="cities"
-              icon="map-marker"
-              :icon-right="null"
-              :placeholder="$t('settings.data.labelCity') + ' …'"
-              :loading="loadingGeo"
-              @input.native="handleCityInput"
-            />
-            <base-button
-              v-if="formData.locationName !== ''"
-              icon="close"
-              ghost
-              size="small"
-              @click="formData.locationName = ''"
-              style="position: relative; display: inline-block; right: -93%; top: -45px"
-            ></base-button>
+          <ds-select
+            id="city"
+            :label="$t('settings.data.labelCity')"
+            v-model="formData.locationName"
+            :options="cities"
+            icon="map-marker"
+            :icon-right="null"
+            :placeholder="$t('settings.data.labelCity') + ' …'"
+            :loading="loadingGeo"
+            @input.native="handleCityInput"
+          />
+          <base-button
+            v-if="formData.locationName !== ''"
+            icon="close"
+            ghost
+            size="small"
+            @click="formData.locationName = ''"
+            style="position: relative; display: inline-block; right: -93%; top: -45px"
+          ></base-button>
 
+          <ds-space margin-top="small" />
 
-            <ds-space margin-top="small" />
-
-            <!-- category -->
-            <categories-select
+          <!-- category -->
+          <categories-select
+            v-if="categoriesActive"
+            model="categoryIds"
+            name="categoryIds"
+            :existingCategoryIds="formData.categoryIds"
+          />
+          <ds-text align="right">
+            <ds-chip
               v-if="categoriesActive"
-              model="categoryIds"
-              name="categoryIds"
-              :existingCategoryIds="formData.categoryIds"
-            />
-            <ds-text align="right">
-              <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-text>
+              size="base"
+              :color="errors && errors.categoryIds && 'danger'"
+            >
+              {{ formData.categoryIds.length }} / 3
+              <base-icon v-if="errors && errors.categoryIds" name="warning" />
+            </ds-chip>
+          </ds-text>
 
-            <!-- Submit -->
+          <!-- Submit -->
           <ds-space margin-top="large">
             <nuxt-link to="/my-groups">
               <ds-button>{{ $t('actions.cancel') }}</ds-button>
@@ -325,8 +331,8 @@ export default {
 .select-label {
   margin-bottom: 0;
   padding-bottom: 4px;
-    color: #70677e;
-    font-size: 1rem;
+  color: #70677e;
+  font-size: 1rem;
 }
 
 .textarea-label {
@@ -355,6 +361,5 @@ export default {
     align-self: flex-end;
     margin-top: $space-base;
   }
-
 }
 </style>

From 350d59bf1208d6a0992436da5e83488f295ff989 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Wed, 5 Oct 2022 16:56:59 +0200
Subject: [PATCH 28/40] Refine create and edit group form

---
 webapp/components/Group/GroupForm.vue | 323 +++++++++++++-------------
 1 file changed, 166 insertions(+), 157 deletions(-)

diff --git a/webapp/components/Group/GroupForm.vue b/webapp/components/Group/GroupForm.vue
index c086053eb..2409c6370 100644
--- a/webapp/components/Group/GroupForm.vue
+++ b/webapp/components/Group/GroupForm.vue
@@ -9,164 +9,162 @@
     >
       <!-- "errors" is only working if you use a submit event on the form -->
       <template #default="{ errors }">
-        <base-card>
-          <!-- Group Name -->
-          <ds-input
-            :label="$t('group.name')"
-            model="name"
-            name="name"
-            autofocus
-            :placeholder="`${$t('group.name')} …`"
+        <!-- group Name -->
+        <ds-input
+          :label="$t('group.name')"
+          name="name"
+          model="name"
+          autofocus
+          :placeholder="`${$t('group.name')} …`"
+        />
+        <ds-chip size="base" :color="errors && errors.name && 'danger'">
+          {{ `${formData.name.length} / ${formSchema.name.min}–${formSchema.name.max}` }}
+          <base-icon v-if="errors && errors.name" name="warning" />
+        </ds-chip>
+
+        <!-- group Slug -->
+        <ds-input
+          v-if="update"
+          :label="$t('group.labelSlug')"
+          model="slug"
+          icon="at"
+          :placeholder="`${$t('group.labelSlug')} …`"
+        ></ds-input>
+
+        <!-- groupType -->
+        <ds-text class="select-label">
+          {{ $t('group.type') }}
+        </ds-text>
+        <!-- TODO: change it has to be implemented later -->
+        <!-- TODO: move 'ds-select' from style guide to main code and implement missing translation etc. functionality -->
+        <select
+          class="select ds-input appearance--auto"
+          name="groupType"
+          :value="formData.groupType"
+          :disabled="update"
+          @change="changeGroupType($event)"
+        >
+          <option v-for="groupType in groupTypeOptions" :key="groupType" :value="groupType">
+            {{ $t(`group.types.${groupType}`) }}
+          </option>
+        </select>
+        <ds-chip
+          size="base"
+          :color="errors && errors.groupType && formData.groupType === '' && 'danger'"
+        >
+          {{ `${formData.groupType === '' ? 0 : 1} / 1` }}
+          <base-icon
+            v-if="errors && errors.groupType && formData.groupType === ''"
+            name="warning"
           />
-          <ds-chip size="base" :color="errors && errors.name && 'danger'">
-            {{ `${formData.name.length} / ${formSchema.name.min}–${formSchema.name.max}` }}
-            <base-icon v-if="errors && errors.name" name="warning" />
-          </ds-chip>
+        </ds-chip>
 
-          <!-- Group Slug -->
-          <ds-input
-            v-if="update"
-            :label="$t('group.labelSlug')"
-            model="slug"
-            icon="at"
-            :placeholder="`${$t('group.labelSlug')} …`"
-          ></ds-input>
+        <!-- goal -->
+        <ds-input
+          name="about"
+          :label="$t('group.goal')"
+          v-model="formData.about"
+          :placeholder="$t('group.goal') + ' …'"
+          rows="3"
+        />
 
-          <!-- groupType -->
-          <ds-text class="select-label">
-            {{ $t('group.type') }}
-          </ds-text>
-          <!-- TODO: change it has to be implemented later -->
-          <!-- TODO: move 'ds-select' from styleguide to main code and implement missen translation etc. functionality -->
-          <select
-            class="select ds-input appearance--auto"
-            :value="formData.groupType"
-            :disabled="update"
-            model="groupType"
-            name="groupType"
-            @change="changeGroupType($event)"
+        <ds-space margin-top="small" />
+
+        <!-- description -->
+        <ds-text class="select-label">
+          {{ $t('group.description') }}
+        </ds-text>
+        <editor
+          :users="null"
+          :value="formData.description"
+          :hashtags="null"
+          model="description"
+          name="description"
+          @input="updateEditorDescription"
+        />
+        <ds-chip size="base" :color="errors && errors.description && 'danger'">
+          {{ `${descriptionLength} / ${formSchema.description.min}` }}
+          <base-icon v-if="errors && errors.description" name="warning" />
+        </ds-chip>
+
+        <!-- actionRadius -->
+        <ds-text class="select-label">
+          {{ $t('group.actionRadius') }}
+        </ds-text>
+        <!-- TODO: move 'ds-select' from styleguide to main code and implement missing translation etc. functionality -->
+        <select
+          class="select ds-input appearance--auto"
+          name="actionRadius"
+          :value="formData.actionRadius"
+          @change="changeActionRadius($event)"
+        >
+          <option
+            v-for="actionRadius in actionRadiusOptions"
+            :key="actionRadius"
+            :value="actionRadius"
           >
-            <option v-for="groupType in groupTypeOptions" :key="groupType" :value="groupType">
-              {{ $t(`group.types.${groupType}`) }}
-            </option>
-          </select>
-          <ds-chip
-            v-if="formData.groupType === ''"
-            size="base"
-            :color="formData.groupType === '' ? 'danger' : 'medium'"
-          >
-            <base-icon v-if="formData.groupType === ''" name="warning" />
-          </ds-chip>
-
-          <!-- goal -->
-          <ds-input
-            :label="$t('group.goal')"
-            v-model="formData.about"
-            :placeholder="$t('group.goal') + ' …'"
-            name="about"
-            rows="3"
+            {{ $t(`group.actionRadii.${actionRadius}`) }}
+          </option>
+        </select>
+        <ds-chip
+          size="base"
+          :color="errors && errors.actionRadius && formData.actionRadius === '' && 'danger'"
+        >
+          {{ `${formData.actionRadius === '' ? 0 : 1} / 1` }}
+          <base-icon
+            v-if="errors && errors.actionRadius && formData.actionRadius === ''"
+            name="warning"
           />
+        </ds-chip>
 
-          <ds-space margin-top="small" />
+        <!-- location -->
+        <ds-select
+          id="city"
+          :label="$t('settings.data.labelCity')"
+          v-model="formData.locationName"
+          :options="cities"
+          icon="map-marker"
+          :icon-right="null"
+          :placeholder="$t('settings.data.labelCity') + ' …'"
+          :loading="loadingGeo"
+          @input.native="handleCityInput"
+        />
+        <base-button
+          v-if="formData.locationName !== ''"
+          icon="close"
+          ghost
+          size="small"
+          style="position: relative; display: inline-block; right: -93%; top: -45px"
+          @click="formData.locationName = ''"
+        ></base-button>
 
-          <!-- description -->
-          <ds-text class="select-label">
-            {{ $t('group.description') }}
-          </ds-text>
-          <editor
-            :users="null"
-            :value="formData.description"
-            :hashtags="null"
-            model="description"
-            name="description"
-            @input="updateEditorDescription"
-          />
-          <ds-chip size="base" :color="errors && errors.description && 'danger'">
-            {{ `${descriptionLength} / ${formSchema.description.min}` }}
-            <base-icon v-if="errors && errors.description" name="warning" />
-          </ds-chip>
+        <ds-space margin-top="small" />
 
-          <!-- actionRadius -->
-          <ds-text class="select-label">
-            {{ $t('group.actionRadius') }}
-          </ds-text>
-          <!-- TODO: change it has to be implemented later -->
-          <!-- TODO: move 'ds-select' from styleguide to main code and implement missen translation etc. functionality -->
-          <select
-            class="select ds-input appearance--auto"
-            :options="actionRadiusOptions"
-            :value="formData.actionRadius"
-            @change="changeActionRadius($event)"
-          >
-            <option
-              v-for="actionRadius in actionRadiusOptions"
-              :key="actionRadius"
-              :value="actionRadius"
-              model="actionRadius"
-              name="actionRadius"
-            >
-              {{ $t(`group.actionRadii.${actionRadius}`) }}
-            </option>
-          </select>
-          <ds-chip
-            v-if="formData.actionRadius === ''"
-            size="base"
-            :color="formData.actionRadius === '' ? 'danger' : 'medium'"
-          >
-            <base-icon v-if="formData.actionRadius === ''" name="warning" />
-          </ds-chip>
+        <!-- category -->
+        <categories-select
+          v-if="categoriesActive"
+          model="categoryIds"
+          name="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>
 
-          <!-- location -->
-          <ds-select
-            id="city"
-            :label="$t('settings.data.labelCity')"
-            v-model="formData.locationName"
-            :options="cities"
-            icon="map-marker"
-            :icon-right="null"
-            :placeholder="$t('settings.data.labelCity') + ' …'"
-            :loading="loadingGeo"
-            @input.native="handleCityInput"
-          />
-          <base-button
-            v-if="formData.locationName !== ''"
-            icon="close"
-            ghost
-            size="small"
-            @click="formData.locationName = ''"
-            style="position: relative; display: inline-block; right: -93%; top: -45px"
-          ></base-button>
-
-          <ds-space margin-top="small" />
-
-          <!-- category -->
-          <categories-select
-            v-if="categoriesActive"
-            model="categoryIds"
-            name="categoryIds"
-            :existingCategoryIds="formData.categoryIds"
-          />
-          <ds-text align="right">
-            <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-text>
-
-          <!-- Submit -->
-          <ds-space margin-top="large">
-            <nuxt-link to="/my-groups">
-              <ds-button>{{ $t('actions.cancel') }}</ds-button>
-            </nuxt-link>
-            <ds-button type="submit" icon="save" primary :disabled="errors" fill>
-              {{ update ? $t('group.update') : $t('group.save') }}
-            </ds-button>
-          </ds-space>
-        </base-card>
+        <!-- submit -->
+        <ds-space margin-top="large">
+          <nuxt-link to="/my-groups">
+            <ds-button>{{ $t('actions.cancel') }}</ds-button>
+          </nuxt-link>
+          <ds-button type="submit" icon="save" primary :disabled="errors" fill>
+            {{ update ? $t('group.update') : $t('group.save') }}
+          </ds-button>
+        </ds-space>
       </template>
     </ds-form>
   </div>
@@ -227,10 +225,20 @@ export default {
       formSchema: {
         name: { required: true, min: NAME_LENGTH_MIN, max: NAME_LENGTH_MAX },
         slug: { required: false, min: NAME_LENGTH_MIN },
-        groupType: { required: true },
+        groupType: { required: true, min: 1 },
         about: { required: false },
-        description: { required: true, min: DESCRIPTION_WITHOUT_HTML_LENGTH_MIN },
-        actionRadius: { required: true },
+        description: {
+          type: 'string',
+          required: true,
+          min: DESCRIPTION_WITHOUT_HTML_LENGTH_MIN,
+          validator: (_, value = '') => {
+            if (this.$filters.removeHtml(value).length < this.formSchema.description.min) {
+              return [new Error()]
+            }
+            return []
+          },
+        },
+        actionRadius: { required: true, min: 1 },
         locationName: { required: false },
         categoryIds: {
           type: 'array',
@@ -254,11 +262,11 @@ export default {
     },
   },
   methods: {
-    changeGroupType(e) {
-      this.formData.groupType = e.target.value
+    changeGroupType(event) {
+      this.formData.groupType = event.target.value
     },
-    changeActionRadius(e) {
-      this.formData.actionRadius = e.target.value
+    changeActionRadius(event) {
+      this.formData.actionRadius = event.target.value
     },
     updateEditorDescription(value) {
       this.$refs.groupForm.update('description', value)
@@ -329,6 +337,7 @@ export default {
   -moz-appearance: auto;
   appearance: auto;
 }
+
 .select-label {
   margin-bottom: 0;
   padding-bottom: 4px;
@@ -340,7 +349,7 @@ export default {
   padding-bottom: 14px;
 }
 
-.group-form > .base-card {
+.group-form {
   display: flex;
   flex-direction: column;
 

From 009558f5fc98a58b8ceac05f6675c0ed2f19058d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Wed, 5 Oct 2022 16:59:46 +0200
Subject: [PATCH 29/40] Remove unused variable

---
 webapp/components/Group/GroupForm.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/webapp/components/Group/GroupForm.vue b/webapp/components/Group/GroupForm.vue
index 2409c6370..0f9c9254e 100644
--- a/webapp/components/Group/GroupForm.vue
+++ b/webapp/components/Group/GroupForm.vue
@@ -207,7 +207,6 @@ export default {
     return {
       categoriesActive: this.$env.CATEGORIES_ACTIVE,
       disabled: false,
-      descriptionMin: 50,
       groupTypeOptions: ['public', 'closed', 'hidden'],
       actionRadiusOptions: ['regional', 'national', 'continental', 'global'],
       loadingGeo: false,

From 9528365cd4d27014e0c5ec0f21affa9a58d79f96 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Fri, 7 Oct 2022 06:58:21 +0200
Subject: [PATCH 30/40] add ds-space if update GroupForm

---
 webapp/components/Group/GroupForm.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/webapp/components/Group/GroupForm.vue b/webapp/components/Group/GroupForm.vue
index 0f9c9254e..f3d67278b 100644
--- a/webapp/components/Group/GroupForm.vue
+++ b/webapp/components/Group/GroupForm.vue
@@ -31,6 +31,8 @@
           :placeholder="`${$t('group.labelSlug')} …`"
         ></ds-input>
 
+        <ds-space v-if="update" margin-top="small" />
+
         <!-- groupType -->
         <ds-text class="select-label">
           {{ $t('group.type') }}

From 018cfc68b1d34e50e8f6a511c5644bacad6a6b63 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Sun, 16 Oct 2022 12:58:00 +0200
Subject: [PATCH 31/40] check groupForm disableButton if creat and update

---
 webapp/components/Group/GroupForm.vue | 43 ++++++++++++++++++++++++---
 1 file changed, 39 insertions(+), 4 deletions(-)

diff --git a/webapp/components/Group/GroupForm.vue b/webapp/components/Group/GroupForm.vue
index f3d67278b..f8de2a438 100644
--- a/webapp/components/Group/GroupForm.vue
+++ b/webapp/components/Group/GroupForm.vue
@@ -11,8 +11,8 @@
       <template #default="{ errors }">
         <!-- group Name -->
         <ds-input
-          :label="$t('group.name')"
           name="name"
+          :label="$t('group.name')"
           model="name"
           autofocus
           :placeholder="`${$t('group.name')} …`"
@@ -77,11 +77,11 @@
           {{ $t('group.description') }}
         </ds-text>
         <editor
+          name="description"
+          model="description"
           :users="null"
           :value="formData.description"
           :hashtags="null"
-          model="description"
-          name="description"
           @input="updateEditorDescription"
         />
         <ds-chip size="base" :color="errors && errors.description && 'danger'">
@@ -163,7 +163,7 @@
           <nuxt-link to="/my-groups">
             <ds-button>{{ $t('actions.cancel') }}</ds-button>
           </nuxt-link>
-          <ds-button type="submit" icon="save" primary :disabled="errors" fill>
+          <ds-button type="submit" icon="save" primary :disabled="checkFormError(errors)" fill>
             {{ update ? $t('group.update') : $t('group.save') }}
           </ds-button>
         </ds-space>
@@ -261,8 +261,43 @@ export default {
     descriptionLength() {
       return this.$filters.removeHtml(this.formData.description).length
     },
+    sameLocation() {
+      if (this.group.locationName === null) return true
+      if (this.group.locationName !== this.formData.locationName) return false
+      return true
+    },
+    sameCategories() {
+      if (this.group.categories.length !== this.formData.categoryIds.length) return false
+      const groupCategories = []
+      this.group.categories.forEach((categories) => {
+        groupCategories.push(categories.id)
+        const some = this.formData.categoryIds.some((item) => item === categories.id)
+        if (!some) return false
+      })
+
+      return true
+    },
+    disableButtomByUpdate() {
+      if (!this.update) return true
+      if (
+        this.group.name === this.formData.name &&
+        this.group.slug === this.formData.slug &&
+        this.group.about === this.formData.about &&
+        this.group.description === this.formData.description &&
+        this.group.actionRadius === this.formData.actionRadius &&
+        this.sameLocation &&
+        this.sameCategories
+      )
+        return true
+      return false
+    },
   },
   methods: {
+    checkFormError(error) {
+      if (!this.update && error && !!error && this.disableButtomByUpdate) return true
+      if (this.update && !error && this.disableButtomByUpdate) return true
+      return false
+    },
     changeGroupType(event) {
       this.formData.groupType = event.target.value
     },

From fc75d4f370526221ce1b45613d4c8aed27d67c3f Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Sun, 16 Oct 2022 13:03:10 +0200
Subject: [PATCH 32/40] rename computed disableButtomByUpdate to
 disableButtonByUpdate

---
 webapp/components/Group/GroupForm.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/webapp/components/Group/GroupForm.vue b/webapp/components/Group/GroupForm.vue
index f8de2a438..26b4f5a19 100644
--- a/webapp/components/Group/GroupForm.vue
+++ b/webapp/components/Group/GroupForm.vue
@@ -277,7 +277,7 @@ export default {
 
       return true
     },
-    disableButtomByUpdate() {
+    disableButtonByUpdate() {
       if (!this.update) return true
       if (
         this.group.name === this.formData.name &&
@@ -294,8 +294,8 @@ export default {
   },
   methods: {
     checkFormError(error) {
-      if (!this.update && error && !!error && this.disableButtomByUpdate) return true
-      if (this.update && !error && this.disableButtomByUpdate) return true
+      if (!this.update && error && !!error && this.disableButtonByUpdate) return true
+      if (this.update && !error && this.disableButtonByUpdate) return true
       return false
     },
     changeGroupType(event) {

From 9baabd073717635b29ff8091e32ea97a1241a6e8 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Mon, 17 Oct 2022 12:05:35 +0200
Subject: [PATCH 33/40] change sameLocation and delete Location Button position

---
 webapp/components/Group/GroupForm.vue | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/webapp/components/Group/GroupForm.vue b/webapp/components/Group/GroupForm.vue
index 26b4f5a19..3aeca423c 100644
--- a/webapp/components/Group/GroupForm.vue
+++ b/webapp/components/Group/GroupForm.vue
@@ -136,7 +136,7 @@
           icon="close"
           ghost
           size="small"
-          style="position: relative; display: inline-block; right: -93%; top: -45px"
+          style="position: relative; display: inline-block; right: -96%; top: -33px;  width: 26px;"
           @click="formData.locationName = ''"
         ></base-button>
 
@@ -262,8 +262,11 @@ export default {
       return this.$filters.removeHtml(this.formData.description).length
     },
     sameLocation() {
-      if (this.group.locationName === null) return true
-      if (this.group.locationName !== this.formData.locationName) return false
+      console.log('this.group.locationName', this.group.locationName)
+      console.log('this.formData.locationName', this.formData.locationName)
+      console.log('this.group.locationName === null && this.formData.locationName === ', this.group.locationName === null && this.formData.locationName === '')
+      if (this.group.locationName === null || this.formData.locationName !== '') return true
+      if (this.group.locationName !== this.formData.locationName.value) return false
       return true
     },
     sameCategories() {

From 1a273918b56862349ad9a2429d292157aa1deb5c Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Mon, 17 Oct 2022 12:07:27 +0200
Subject: [PATCH 34/40] remove console statments, fix lint

---
 webapp/components/Group/GroupForm.vue | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/webapp/components/Group/GroupForm.vue b/webapp/components/Group/GroupForm.vue
index 3aeca423c..ea4d2dc85 100644
--- a/webapp/components/Group/GroupForm.vue
+++ b/webapp/components/Group/GroupForm.vue
@@ -136,7 +136,7 @@
           icon="close"
           ghost
           size="small"
-          style="position: relative; display: inline-block; right: -96%; top: -33px;  width: 26px;"
+          style="position: relative; display: inline-block; right: -96%; top: -33px; width: 26px"
           @click="formData.locationName = ''"
         ></base-button>
 
@@ -262,9 +262,6 @@ export default {
       return this.$filters.removeHtml(this.formData.description).length
     },
     sameLocation() {
-      console.log('this.group.locationName', this.group.locationName)
-      console.log('this.formData.locationName', this.formData.locationName)
-      console.log('this.group.locationName === null && this.formData.locationName === ', this.group.locationName === null && this.formData.locationName === '')
       if (this.group.locationName === null || this.formData.locationName !== '') return true
       if (this.group.locationName !== this.formData.locationName.value) return false
       return true

From 391c8d434bdfa3d9967373ce75968a852a4acfbf Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Mon, 17 Oct 2022 21:48:20 +0200
Subject: [PATCH 35/40] feat: Seed some simple posts into groups

---
 backend/src/db/seed.js | 67 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 67 insertions(+)

diff --git a/backend/src/db/seed.js b/backend/src/db/seed.js
index 242b3a856..87f1d7896 100644
--- a/backend/src/db/seed.js
+++ b/backend/src/db/seed.js
@@ -360,6 +360,33 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
       }),
     ])
 
+    // post into group
+    await Promise.all([
+      mutate({
+        mutation: createPostMutation(),
+        variables: {
+          id: 'p0-g0',
+          groupId: 'g0',
+          title: `What happend in Shanghai?`,
+          content: 'A sack of rise dropped in Shanghai. Should we further investigate?',
+          categoryIds: ['cat6'],
+        },
+      }),
+    ])
+    authenticatedUser = await bobDerBaumeister.toJson()
+    await Promise.all([
+      mutate({
+        mutation: createPostMutation(),
+        variables: {
+          id: 'p1-g0',
+          groupId: 'g0',
+          title: `The man on the moon`,
+          content: 'We have to further investigate about the stories of a man living on the moon.',
+          categoryIds: ['cat12', 'cat16'],
+        },
+      }),
+    ])
+
     authenticatedUser = await jennyRostock.toJson()
     await Promise.all([
       mutate({
@@ -439,6 +466,32 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
         },
       }),
     ])
+    // post into group
+    await Promise.all([
+      mutate({
+        mutation: createPostMutation(),
+        variables: {
+          id: 'p0-g1',
+          groupId: 'g1',
+          title: `Can we use ocelot for education?`,
+          content: 'I like the concept of this school. Can we use our software in this?',
+          categoryIds: ['cat8'],
+        },
+      }),
+    ])
+    authenticatedUser = await peterLustig.toJson()
+    await Promise.all([
+      mutate({
+        mutation: createPostMutation(),
+        variables: {
+          id: 'p1-g1',
+          groupId: 'g1',
+          title: `Can we push this idea out of France?`,
+          content: 'This idea is too inportant to have the scope only on France.',
+          categoryIds: ['cat14'],
+        },
+      }),
+    ])
 
     authenticatedUser = await bobDerBaumeister.toJson()
     await Promise.all([
@@ -527,6 +580,20 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
       }),
     ])
 
+    authenticatedUser = await peterLustig.toJson()
+    await Promise.all([
+      mutate({
+        mutation: createPostMutation(),
+        variables: {
+          id: 'p0-g2',
+          groupId: 'g2',
+          title: `I am a Noob`,
+          content: 'I am new to Yoga and did not join this group so far.',
+          categoryIds: ['cat4'],
+        },
+      }),
+    ])
+
     // Create Posts
 
     const [p0, p1, p3, p4, p5, p6, p9, p10, p11, p13, p14, p15] = await Promise.all([

From e5e6dbc4407748786b29275dcccb6df7e4a4779a Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Mon, 17 Oct 2022 21:55:45 +0200
Subject: [PATCH 36/40] change user to post in public group

---
 backend/src/db/seed.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/backend/src/db/seed.js b/backend/src/db/seed.js
index 87f1d7896..dd8bb59cb 100644
--- a/backend/src/db/seed.js
+++ b/backend/src/db/seed.js
@@ -580,7 +580,7 @@ const languages = ['de', 'en', 'es', 'fr', 'it', 'pt', 'pl']
       }),
     ])
 
-    authenticatedUser = await peterLustig.toJson()
+    authenticatedUser = await louie.toJson()
     await Promise.all([
       mutate({
         mutation: createPostMutation(),

From 2755ca6562a3345043797402d84187488084c6f2 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Tue, 18 Oct 2022 09:54:45 +0200
Subject: [PATCH 37/40] change location in group update

---
 webapp/components/Group/GroupForm.vue | 41 +++++++++++++++++++++++++--
 1 file changed, 39 insertions(+), 2 deletions(-)

diff --git a/webapp/components/Group/GroupForm.vue b/webapp/components/Group/GroupForm.vue
index ea4d2dc85..1f23cf30c 100644
--- a/webapp/components/Group/GroupForm.vue
+++ b/webapp/components/Group/GroupForm.vue
@@ -42,6 +42,7 @@
         <select
           class="select ds-input appearance--auto"
           name="groupType"
+          model="groupType"
           :value="formData.groupType"
           :disabled="update"
           @change="changeGroupType($event)"
@@ -262,8 +263,36 @@ export default {
       return this.$filters.removeHtml(this.formData.description).length
     },
     sameLocation() {
-      if (this.group.locationName === null || this.formData.locationName !== '') return true
-      if (this.group.locationName !== this.formData.locationName.value) return false
+      console.log('sameLocation this.group.locationName', this.group.locationName)
+      console.log('sameLocation this.formData.locationName', this.formData.locationName)
+      if ( this.group.locationName === null ) { this.group.locationName = '' }
+
+      if ( this.formData.locationName.value ){
+        console.log('if value form', this.formData.locationName.value )
+        console.log('if value group', this.group.locationName )
+        if (this.formData.locationName.value !== this.group.locationName) {
+          console.log('value != group location name')
+          return false
+        }
+        
+      } else  {
+        console.log('if not value ')
+        if (this.formData.locationName !== this.group.locationName) {
+          console.log('ungleich')
+          return false
+        }
+        
+      }
+
+      
+      // if ( this.group.locationName !== null ) {
+      //   if ( this.formData.locationName !== '' ) {
+      //     if ( this.group.locationName !== this.formData.locationName.value ) return false
+      //   } else {
+      //     return false
+      //   }
+      // }  
+
       return true
     },
     sameCategories() {
@@ -279,6 +308,13 @@ export default {
     },
     disableButtonByUpdate() {
       if (!this.update) return true
+      console.log('name', this.group.name === this.formData.name)
+      console.log('slug', this.group.slug === this.formData.slug)
+      console.log('about', this.group.about === this.formData.about)
+      console.log('description', this.group.description === this.formData.description)
+      console.log('actionRadius', this.group.actionRadius === this.formData.actionRadius)
+      console.log('sameLocation', this.sameLocation)
+      console.log('sameCategories', this.sameCategories)
       if (
         this.group.name === this.formData.name &&
         this.group.slug === this.formData.slug &&
@@ -310,6 +346,7 @@ export default {
     submit() {
       const { name, about, description, groupType, actionRadius, locationName, categoryIds } =
         this.formData
+        console.log(this.formData)
       const variables = {
         name,
         about,

From 4521c71718514dfc5d866d58f5dc6f10f6379009 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Tue, 18 Oct 2022 18:14:38 +0200
Subject: [PATCH 38/40] Fix location bugs

---
 webapp/components/Group/GroupForm.vue | 104 +++++++++++++-------------
 1 file changed, 54 insertions(+), 50 deletions(-)

diff --git a/webapp/components/Group/GroupForm.vue b/webapp/components/Group/GroupForm.vue
index 1f23cf30c..eb3d1174a 100644
--- a/webapp/components/Group/GroupForm.vue
+++ b/webapp/components/Group/GroupForm.vue
@@ -123,7 +123,7 @@
         <!-- location -->
         <ds-select
           id="city"
-          :label="$t('settings.data.labelCity')"
+          :label="$t('settings.data.labelCity') + locationNameLabelAddOnOldName"
           v-model="formData.locationName"
           :options="cities"
           icon="map-marker"
@@ -174,6 +174,7 @@
 </template>
 
 <script>
+import { isEmpty } from 'lodash'
 import CategoriesSelect from '~/components/CategoriesSelect/CategoriesSelect'
 import { CATEGORIES_MIN, CATEGORIES_MAX } from '~/constants/categories.js'
 import {
@@ -208,6 +209,7 @@ export default {
     const { name, slug, groupType, about, description, actionRadius, locationName, categories } =
       this.group
     return {
+      isEmpty,
       categoriesActive: this.$env.CATEGORIES_ACTIVE,
       disabled: false,
       groupTypeOptions: ['public', 'closed', 'hidden'],
@@ -220,6 +222,12 @@ export default {
         groupType: groupType || '',
         about: about || '',
         description: description || '',
+        // from database 'locationName' comes as "string | null"
+        // 'formData.locationName':
+        //   see 'created': tries to set it to a "requestGeoData" object and fills the menu if possible
+        //   if user selects one from menu we get a "requestGeoData" object here
+        //   "requestGeoData" object: "{ id: String, label: String, value: String }"
+        //   otherwise it's a string: empty or none empty
         locationName: locationName || '',
         actionRadius: actionRadius || '',
         categoryIds: categories ? categories.map((category) => category.id) : [],
@@ -258,42 +266,40 @@ export default {
       },
     }
   },
+  async created() {
+    if (typeof this.formData.locationName === 'string' && this.formData.locationName !== '') {
+      // set to "requestGeoData" object and fill select menu if possible
+      this.formData.locationName =
+        (await this.requestGeoData(this.formData.locationName)) || this.formData.locationName
+    }
+  },
   computed: {
+    locationNameLabelAddOnOldName() {
+      const isNestedValue = !isEmpty(this.formData.locationName.value)
+      const isNoneEmptyString =
+        typeof this.formData.locationName === 'string' && this.formData.locationName !== ''
+      return (
+        (isNestedValue || isNoneEmptyString ? ' — ' : '') +
+        (isNestedValue
+          ? this.formData.locationName.value
+          : isNoneEmptyString
+          ? this.formData.locationName
+          : '')
+      )
+    },
     descriptionLength() {
       return this.$filters.removeHtml(this.formData.description).length
     },
     sameLocation() {
-      console.log('sameLocation this.group.locationName', this.group.locationName)
-      console.log('sameLocation this.formData.locationName', this.formData.locationName)
-      if ( this.group.locationName === null ) { this.group.locationName = '' }
-
-      if ( this.formData.locationName.value ){
-        console.log('if value form', this.formData.locationName.value )
-        console.log('if value group', this.group.locationName )
-        if (this.formData.locationName.value !== this.group.locationName) {
-          console.log('value != group location name')
-          return false
-        }
-        
-      } else  {
-        console.log('if not value ')
-        if (this.formData.locationName !== this.group.locationName) {
-          console.log('ungleich')
-          return false
-        }
-        
-      }
-
-      
-      // if ( this.group.locationName !== null ) {
-      //   if ( this.formData.locationName !== '' ) {
-      //     if ( this.group.locationName !== this.formData.locationName.value ) return false
-      //   } else {
-      //     return false
-      //   }
-      // }  
-
-      return true
+      const isNestedValue = !isEmpty(this.formData.locationName.value)
+      const isNoneEmptyString =
+        typeof this.formData.locationName === 'string' && this.formData.locationName !== ''
+      const dbLocationName = this.group.locationName || ''
+      return isNestedValue
+        ? this.formData.locationName.value === dbLocationName
+        : isNoneEmptyString
+        ? this.formData.locationName === dbLocationName
+        : dbLocationName === ''
     },
     sameCategories() {
       if (this.group.categories.length !== this.formData.categoryIds.length) return false
@@ -308,14 +314,7 @@ export default {
     },
     disableButtonByUpdate() {
       if (!this.update) return true
-      console.log('name', this.group.name === this.formData.name)
-      console.log('slug', this.group.slug === this.formData.slug)
-      console.log('about', this.group.about === this.formData.about)
-      console.log('description', this.group.description === this.formData.description)
-      console.log('actionRadius', this.group.actionRadius === this.formData.actionRadius)
-      console.log('sameLocation', this.sameLocation)
-      console.log('sameCategories', this.sameCategories)
-      if (
+      return (
         this.group.name === this.formData.name &&
         this.group.slug === this.formData.slug &&
         this.group.about === this.formData.about &&
@@ -324,8 +323,6 @@ export default {
         this.sameLocation &&
         this.sameCategories
       )
-        return true
-      return false
     },
   },
   methods: {
@@ -346,14 +343,17 @@ export default {
     submit() {
       const { name, about, description, groupType, actionRadius, locationName, categoryIds } =
         this.formData
-        console.log(this.formData)
       const variables = {
         name,
         about,
         description,
         groupType,
         actionRadius,
-        locationName: locationName.label ? locationName.label : '',
+        locationName: !isEmpty(locationName.value)
+          ? locationName.value
+          : typeof locationName === 'string'
+          ? locationName
+          : '',
         categoryIds,
       }
       this.update
@@ -363,9 +363,12 @@ export default {
           })
         : this.$emit('createGroup', variables)
     },
-    handleCityInput(value) {
+    handleCityInput(event) {
       clearTimeout(timeout)
-      timeout = setTimeout(() => this.requestGeoData(value), 500)
+      timeout = setTimeout(
+        () => this.requestGeoData(event.target ? event.target.value.trim() : ''),
+        500,
+      )
     },
     processLocationsResult(places) {
       if (!places.length) {
@@ -382,8 +385,7 @@ export default {
 
       return result
     },
-    async requestGeoData(e) {
-      const value = e.target ? e.target.value.trim() : ''
+    async requestGeoData(value) {
       if (value === '') {
         this.cities = []
         return
@@ -394,11 +396,13 @@ export default {
       const lang = this.$i18n.locale()
 
       const {
-        data: { queryLocations: res },
+        data: { queryLocations: result },
       } = await this.$apollo.query({ query: queryLocations(), variables: { place, lang } })
 
-      this.cities = this.processLocationsResult(res)
+      this.cities = this.processLocationsResult(result)
       this.loadingGeo = false
+
+      return this.cities.find((city) => city.value === value)
     },
   },
 }

From ab6b5ad219cc35b9457998f0d643841356d2984f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Tue, 18 Oct 2022 18:28:52 +0200
Subject: [PATCH 39/40] Fix 'ds-chip' 'color' error

---
 webapp/components/Group/GroupForm.vue | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/webapp/components/Group/GroupForm.vue b/webapp/components/Group/GroupForm.vue
index eb3d1174a..e2bf50a3c 100644
--- a/webapp/components/Group/GroupForm.vue
+++ b/webapp/components/Group/GroupForm.vue
@@ -17,7 +17,7 @@
           autofocus
           :placeholder="`${$t('group.name')} …`"
         />
-        <ds-chip size="base" :color="errors && errors.name && 'danger'">
+        <ds-chip size="base" :color="errors && errors.name ? 'danger' : 'medium'">
           {{ `${formData.name.length} / ${formSchema.name.min}–${formSchema.name.max}` }}
           <base-icon v-if="errors && errors.name" name="warning" />
         </ds-chip>
@@ -53,7 +53,7 @@
         </select>
         <ds-chip
           size="base"
-          :color="errors && errors.groupType && formData.groupType === '' && 'danger'"
+          :color="errors && errors.groupType && formData.groupType === '' ? 'danger' : 'medium'"
         >
           {{ `${formData.groupType === '' ? 0 : 1} / 1` }}
           <base-icon
@@ -85,7 +85,7 @@
           :hashtags="null"
           @input="updateEditorDescription"
         />
-        <ds-chip size="base" :color="errors && errors.description && 'danger'">
+        <ds-chip size="base" :color="errors && errors.description ? 'danger' : 'medium'">
           {{ `${descriptionLength} / ${formSchema.description.min}` }}
           <base-icon v-if="errors && errors.description" name="warning" />
         </ds-chip>
@@ -111,7 +111,9 @@
         </select>
         <ds-chip
           size="base"
-          :color="errors && errors.actionRadius && formData.actionRadius === '' && 'danger'"
+          :color="
+            errors && errors.actionRadius && formData.actionRadius === '' ? 'danger' : 'medium'
+          "
         >
           {{ `${formData.actionRadius === '' ? 0 : 1} / 1` }}
           <base-icon
@@ -153,7 +155,7 @@
         <ds-chip
           v-if="categoriesActive"
           size="base"
-          :color="errors && errors.categoryIds && 'danger'"
+          :color="errors && errors.categoryIds ? 'danger' : 'medium'"
         >
           {{ formData.categoryIds.length }} / 3
           <base-icon v-if="errors && errors.categoryIds" name="warning" />

From 490c7bf2bf603a7332e9c2413b00f1448903f337 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Tue, 18 Oct 2022 19:12:01 +0200
Subject: [PATCH 40/40] Refine logic of location

---
 webapp/components/Group/GroupForm.vue | 52 ++++++++++-----------------
 1 file changed, 19 insertions(+), 33 deletions(-)

diff --git a/webapp/components/Group/GroupForm.vue b/webapp/components/Group/GroupForm.vue
index e2bf50a3c..e0166bb45 100644
--- a/webapp/components/Group/GroupForm.vue
+++ b/webapp/components/Group/GroupForm.vue
@@ -135,7 +135,7 @@
           @input.native="handleCityInput"
         />
         <base-button
-          v-if="formData.locationName !== ''"
+          v-if="formLocationName !== ''"
           icon="close"
           ghost
           size="small"
@@ -176,7 +176,6 @@
 </template>
 
 <script>
-import { isEmpty } from 'lodash'
 import CategoriesSelect from '~/components/CategoriesSelect/CategoriesSelect'
 import { CATEGORIES_MIN, CATEGORIES_MAX } from '~/constants/categories.js'
 import {
@@ -211,7 +210,6 @@ export default {
     const { name, slug, groupType, about, description, actionRadius, locationName, categories } =
       this.group
     return {
-      isEmpty,
       categoriesActive: this.$env.CATEGORIES_ACTIVE,
       disabled: false,
       groupTypeOptions: ['public', 'closed', 'hidden'],
@@ -269,39 +267,31 @@ export default {
     }
   },
   async created() {
-    if (typeof this.formData.locationName === 'string' && this.formData.locationName !== '') {
-      // set to "requestGeoData" object and fill select menu if possible
-      this.formData.locationName =
-        (await this.requestGeoData(this.formData.locationName)) || this.formData.locationName
-    }
+    // set to "requestGeoData" object and fill select menu if possible
+    this.formData.locationName =
+      (await this.requestGeoData(this.formLocationName)) || this.formLocationName
   },
   computed: {
+    formLocationName() {
+      const isNestedValue =
+        typeof this.formData.locationName === 'object' &&
+        typeof this.formData.locationName.value === 'string'
+      const isDirectString = typeof this.formData.locationName === 'string'
+      return isNestedValue
+        ? this.formData.locationName.value
+        : isDirectString
+        ? this.formData.locationName
+        : ''
+    },
     locationNameLabelAddOnOldName() {
-      const isNestedValue = !isEmpty(this.formData.locationName.value)
-      const isNoneEmptyString =
-        typeof this.formData.locationName === 'string' && this.formData.locationName !== ''
-      return (
-        (isNestedValue || isNoneEmptyString ? ' — ' : '') +
-        (isNestedValue
-          ? this.formData.locationName.value
-          : isNoneEmptyString
-          ? this.formData.locationName
-          : '')
-      )
+      return this.formLocationName !== '' ? ' — ' + this.formLocationName : ''
     },
     descriptionLength() {
       return this.$filters.removeHtml(this.formData.description).length
     },
     sameLocation() {
-      const isNestedValue = !isEmpty(this.formData.locationName.value)
-      const isNoneEmptyString =
-        typeof this.formData.locationName === 'string' && this.formData.locationName !== ''
       const dbLocationName = this.group.locationName || ''
-      return isNestedValue
-        ? this.formData.locationName.value === dbLocationName
-        : isNoneEmptyString
-        ? this.formData.locationName === dbLocationName
-        : dbLocationName === ''
+      return dbLocationName === this.formLocationName
     },
     sameCategories() {
       if (this.group.categories.length !== this.formData.categoryIds.length) return false
@@ -343,7 +333,7 @@ export default {
       this.$refs.groupForm.update('description', value)
     },
     submit() {
-      const { name, about, description, groupType, actionRadius, locationName, categoryIds } =
+      const { name, about, description, groupType, actionRadius, /* locationName, */ categoryIds } =
         this.formData
       const variables = {
         name,
@@ -351,11 +341,7 @@ export default {
         description,
         groupType,
         actionRadius,
-        locationName: !isEmpty(locationName.value)
-          ? locationName.value
-          : typeof locationName === 'string'
-          ? locationName
-          : '',
+        locationName: this.formLocationName,
         categoryIds,
       }
       this.update