Refine functionality, second step

webapp/components/Group/GroupForm.vue

@@ -14,7 +14,6 @@
         v-model="formData.name"
         :placeholder="`${$t('group.name')} …`"
       ></ds-input>
-      <!-- Wolle: Why update here? -->
       <ds-input
         v-if="update"
         :label="$t('group.labelSlug')"
@@ -22,14 +21,34 @@
         icon="at"
         :placeholder="`${$t('group.labelSlug')} …`"
       ></ds-input>
-      <!-- Wolle: translate options -->
-      <ds-select
+      <!-- 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"
-        :options="['public', 'closed', 'hidden']"
+        :v-model="formData.groupType"
+        :label-prop="'label'"
+        :options="groupTypeOptions"
         icon="user"
         :placeholder="$t('group.type') + ' …'"
-      ></ds-select>
+      ></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>
+      <!-- description -->
       <ds-input v-model="formData.about" :label="$t('group.goal')" rows="3"></ds-input>
       <ds-input
         :label="$t('group.description')"
@@ -38,14 +57,36 @@
         rows="3"
       ></ds-input>
       <ds-space margin-top="large">
-        <!-- Wolle: translate options -->
-        <ds-select
+        <!-- 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.actionRadius"
+          v-model="formData"
+          model="actionRadius"
           :options="['regional', 'national', 'continental', 'global']"
           icon="globe"
           :placeholder="`${$t('group.actionRadius')} …`"
-        ></ds-select>
+        ></ds-select> -->
+        <ds-text class="select-label">
+          {{ $t('group.actionRadius') }}
+        </ds-text>
+        <ds-icon class="select-icon" name="globe" />
+        <select
+          class="select"
+          :options="actionRadiusOptions"
+          :value="formData.actionRadius"
+          @change="changeActionRadius($event)"
+        >
+          <option
+            v-for="actionRadius in actionRadiusOptions"
+            :key="actionRadius"
+            :value="actionRadius"
+          >
+            {{ $t(`group.actionRadii.${actionRadius}`) }}
+          </option>
+        </select>
+        <!-- location -->
         <ds-select
           id="city"
           :label="$t('settings.data.labelCity')"
@@ -117,6 +158,8 @@ export default {
     return {
       categoriesActive: this.$env.CATEGORIES_ACTIVE,
       disabled: false,
+      groupTypeOptions: ['public', 'closed', 'hidden'],
+      actionRadiusOptions: ['regional', 'national', 'continental', 'global'],
       loadingGeo: false,
       cities: [],
       formData: {
@@ -153,64 +196,6 @@ export default {
       },
     }
   },
-  methods: {
-    submit() {
-      const { name, about, description, groupType, actionRadius, locationName, categoryIds } =
-        this.formData
-      const variables = {
-        name,
-        about,
-        description,
-        groupType,
-        actionRadius,
-        locationName: locationName.label,
-        categoryIds,
-      }
-      this.update
-        ? this.$emit('updateGroup', {
-            ...variables,
-            id: this.group.id,
-          })
-        : this.$emit('createGroup', variables)
-    },
-    handleCityInput(value) {
-      clearTimeout(timeout)
-      timeout = setTimeout(() => this.requestGeoData(value), 500)
-    },
-    processLocationsResult(places) {
-      if (!places.length) {
-        return []
-      }
-      const result = []
-      places.forEach((place) => {
-        result.push({
-          label: place.place_name,
-          value: place.place_name,
-          id: place.id,
-        })
-      })
-
-      return result
-    },
-    async requestGeoData(e) {
-      const value = e.target ? e.target.value.trim() : ''
-      if (value === '') {
-        this.cities = []
-        return
-      }
-      this.loadingGeo = true
-
-      const place = encodeURIComponent(value)
-      const lang = this.$i18n.locale()
-
-      const {
-        data: { queryLocations: res },
-      } = await this.$apollo.query({ query: queryLocations(), variables: { place, lang } })
-
-      this.cities = this.processLocationsResult(res)
-      this.loadingGeo = false
-    },
-  },
   computed: {
     submitDisable() {
       if (
@@ -259,5 +244,84 @@ export default {
       return true
     },
   },
+  methods: {
+    submit() {
+      const { name, about, description, groupType, actionRadius, locationName, categoryIds } =
+        this.formData
+      const variables = {
+        name,
+        about,
+        description,
+        groupType,
+        actionRadius,
+        locationName: locationName.label,
+        categoryIds,
+      }
+      this.update
+        ? this.$emit('updateGroup', {
+            ...variables,
+            id: this.group.id,
+          })
+        : 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)
+    },
+    processLocationsResult(places) {
+      if (!places.length) {
+        return []
+      }
+      const result = []
+      places.forEach((place) => {
+        result.push({
+          label: place.place_name,
+          value: place.place_name,
+          id: place.id,
+        })
+      })
+
+      return result
+    },
+    async requestGeoData(e) {
+      const value = e.target ? e.target.value.trim() : ''
+      if (value === '') {
+        this.cities = []
+        return
+      }
+      this.loadingGeo = true
+
+      const place = encodeURIComponent(value)
+      const lang = this.$i18n.locale()
+
+      const {
+        data: { queryLocations: res },
+      } = await this.$apollo.query({ query: queryLocations(), variables: { place, lang } })
+
+      this.cities = this.processLocationsResult(res)
+      this.loadingGeo = false
+    },
+  },
 }
 </script>
+
+<style lang="scss">
+.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;
+}
+</style>

webapp/pages/group/create.vue

@@ -54,6 +54,7 @@ export default {
         this.$toast.success(this.$t('group.groupCreated'))
         this.$router.history.push('/my-groups')
         // Wolle: refetch groups on '/my-groups'
+        // seems to work of its own now, because of implementation of vue apollo queries in '/my-groups'
       } catch (error) {
         this.$toast.error(error.message)
       }