Add address selector

CHANGELOG.md

@@ -1,6 +1,12 @@
 # Changelog
 
-## [1.4.1] 2020-04-04
+## [1.5.0] 2020-04-05
+
+### Added
+
+- Add address selector
+
+## [1.4.1] 2020-04-05
 
 Changes by @pksec
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "covid-self-report",
-  "version": "1.4.1",
+  "version": "1.5.0",
   "author": {
     "name": "Christian Müller",
     "email": "[email protected]"

src/assets/translations/en.json

@@ -68,6 +68,10 @@
         "sentMistakeClickHere": "click here",
         "wantToSeePublicData": "Your contribution helps to build a public dataset. If you want to see the current data, click:"
     },
+    "locationAddress": {
+        "yourPostalCode": "Your postal code is {ignore_postalcode}",
+        "xMore": "+{ignore_count} more"
+    },
     "visualize": {
         "title": "Visualize",
         "dataWarning": "The following data is community collected and not verified.",

src/components/BaseSelect.vue

@@ -0,0 +1,157 @@
+<template>
+  <div class="form-group"
+       :class="[
+            {'input-group': hasIcon},
+            {'has-danger': error},
+            {'focused': focused},
+            {'input-group-alternative': alternative},
+            {'has-label': label || $slots.label},
+            {'has-success': valid === true},
+            {'has-danger': valid === false}
+       ]">
+    <slot name="label">
+      <label v-if="label" :class="labelClasses">
+        {{label}}
+        <span v-if="required">*</span>
+      </label>
+    </slot>
+
+
+    <div v-if="addonLeftIcon || $slots.addonLeft" class="input-group-prepend">
+        <span class="input-group-text">
+          <slot name="addonLeft">
+            <i :class="addonLeftIcon"></i>
+          </slot>
+        </span>
+    </div>
+    <slot v-bind="slotData">
+      <select
+              :disabled="disabled"
+              :value="value"
+              @input="$emit('input', $event.target.value)"
+              v-on="listeners"
+              v-bind="$attrs"
+              class="form-control"
+              :class="[{'is-valid': valid === true}, {'is-invalid': valid === false}, inputClasses]"
+              aria-describedby="addon-right addon-left">
+        <option v-for="option of options" :key="option.id" :value="option.id">{{ option.label }}</option>
+      </select>
+    </slot>
+    <div v-if="addonRightIcon || $slots.addonRight" class="input-group-append">
+          <span class="input-group-text">
+              <slot name="addonRight">
+                  <i :class="addonRightIcon"></i>
+              </slot>
+          </span>
+    </div>
+    <slot name="infoBlock"></slot>
+    <slot name="helpBlock">
+      <div class="text-danger invalid-feedback" style="display: block;" :class="{'mt-2': hasIcon}" v-if="error">
+        {{ error }}
+      </div>
+    </slot>
+  </div>
+</template>
+<script>
+  export default {
+    inheritAttrs: false,
+    name: "base-select",
+    props: {
+      required: {
+        type: Boolean,
+        description: "Whether input is required (adds an asterix *)"
+      },
+      disabled: {
+        type: Boolean,
+        description: "Whether input is disabled"
+      },
+      valid: {
+        type: Boolean,
+        description: "Whether is valid",
+        default: undefined
+      },
+      alternative: {
+        type: Boolean,
+        description: "Whether input is of alternative layout"
+      },
+      label: {
+        type: String,
+        description: "Input label (text before input)"
+      },
+      error: {
+        type: String,
+        description: "Input error (below input)"
+      },
+      labelClasses: {
+        type: String,
+        description: "Input label css classes"
+      },
+      inputClasses: {
+        type: String,
+        description: "Input css classes"
+      },
+      value: {
+        type: String,
+        description: "Input value"
+      },
+      options: {
+        type: Array,
+        description: "Possible values"
+      },
+      addonRightIcon: {
+        type: String,
+        description: "Addon right icon"
+      },
+      addonLeftIcon: {
+        type: String,
+        description: "Addont left icon"
+      }
+    },
+    data() {
+      return {
+        focused: false
+      };
+    },
+    computed: {
+      listeners() {
+        return {
+          ...this.$listeners,
+          input: this.updateValue,
+          focus: this.onFocus,
+          blur: this.onBlur
+        };
+      },
+      slotData() {
+        return {
+          focused: this.focused,
+          ...this.listeners
+        };
+      },
+      hasIcon() {
+        const {addonRight, addonLeft} = this.$slots;
+        return (
+          addonRight !== undefined ||
+          addonLeft !== undefined ||
+          this.addonRightIcon !== undefined ||
+          this.addonLeftIcon !== undefined
+        );
+      }
+    },
+    methods: {
+      updateValue(evt) {
+        let value = evt.target.value;
+        this.$emit("select", value);
+      },
+      onFocus(value) {
+        this.focused = true;
+        this.$emit("focus", value);
+      },
+      onBlur(value) {
+        this.focused = false;
+        this.$emit("blur", value);
+      }
+    }
+  };
+</script>
+<style>
+</style>

src/pages/Home.vue

@@ -9,7 +9,7 @@
         </div>
         <div class="container shape-container d-flex">
           <div class="row mt-3">
-            <div class="col-md-6">
+            <div class="col-12">
 
               <h3 class="text-white">{{ $t('home.introTitle') }}</h3>
 

src/plugins/globalComponents.js

@@ -8,6 +8,7 @@ import BaseProgress from "../components/BaseProgress";
 import BaseRadio from "../components/BaseRadio";
 import BaseSlider from "../components/BaseSlider";
 import BaseSwitch from "../components/BaseSwitch";
+import BaseSelect from "../components/BaseSelect";
 import Card from "../components/Card";
 import Icon from "../components/Icon";
 
@@ -23,6 +24,7 @@ export default {
         Vue.component(BaseRadio.name, BaseRadio);
         Vue.component(BaseSlider.name, BaseSlider);
         Vue.component(BaseSwitch.name, BaseSwitch);
+        Vue.component(BaseSelect.name, BaseSelect);
         Vue.component(Card.name, Card);
         Vue.component(Icon.name, Icon);
     }

src/store/store.js

@@ -48,7 +48,7 @@ export const store = new Vuex.Store({
                 for (const [i, region] of regions.entries()) {
 
                   if (i === regions.length - 1) {
-                    location.places = region.split('||');
+                    location.places = region.split('||').sort((a, b) => a.localeCompare(b));
                   } else {
                     location.regions.push(region);
                   }

src/views/LocationEditors/LocationFromAddress.vue

@@ -1,5 +1,27 @@
 <template>
-  <div>Location from address (TBD)</div>
+  <div>
+
+    <div v-if="geocoding">
+
+      <base-select v-model="regionLevelFirst"
+                   :options="regionLevelOptionsFirst"></base-select>
+
+      <base-select v-model="regionLevelSecond"
+                   :options="regionLevelFirst ? regionLevelOptionsSecond[regionLevelFirst] : null"
+                   :disabled="regionLevelFirst === null"></base-select>
+
+      <base-select v-model="regionLevelThird"
+                   :options="regionLevelFirst && regionLevelSecond ? regionLevelOptionsThird[regionLevelFirst][regionLevelSecond] : null"
+                   :disabled="regionLevelSecond === null"></base-select>
+
+      <p v-if="location" class="text-white">{{ $t('locationAddress.yourPostalCode', {ignore_postalcode: location})
+        }}</p>
+    </div>
+
+    <div v-else>
+      <p class="text-white">Loading...</p>
+    </div>
+  </div>
 </template>
 
 <script>