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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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