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 01/22] 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 02/22] 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 b965bab56ba32163734ecb7440b3ddc7a9ed3df6 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Wed, 28 Sep 2022 14:36:35 +0200
Subject: [PATCH 03/22] 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 04/22] 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 05/22] 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 992dd991c9f63e4e8ac742376a34fe4d114c29c2 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Thu, 29 Sep 2022 11:09:50 +0200
Subject: [PATCH 06/22] 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 07/22] 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 08/22] 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 09/22] 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 10/22] 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 11/22] 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 12/22] 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 13/22] 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 14/22] 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 15/22] 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 16/22] 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 17/22] 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 18/22] 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 19/22] 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 20/22] 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 21/22] 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 22/22] 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') }}