From 0434d4a120ae63b2323ab3b62787ead8dac98aca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Christian=20M=C3=BCller?= <christian.muller@wifx.net>
Date: Mon, 30 Mar 2020 13:46:46 +0200
Subject: [PATCH] Adding configurable location selector

---
 .env.example                                  |  3 ++
 CHANGELOG.md                                  |  6 +++
 README.md                                     |  1 +
 package.json                                  |  2 +-
 .../LocationEditors/LocationFromAddress.vue   | 25 +++++++++++
 .../LocationFromPostalCode.vue                | 45 +++++++++++++++++++
 src/views/Report.vue                          | 31 +++++++------
 7 files changed, 99 insertions(+), 14 deletions(-)
 create mode 100644 src/views/LocationEditors/LocationFromAddress.vue
 create mode 100644 src/views/LocationEditors/LocationFromPostalCode.vue

diff --git a/.env.example b/.env.example
index 3982167..be21ca1 100644
--- a/.env.example
+++ b/.env.example
@@ -1,5 +1,8 @@
 #### In .env ###
 
+
+VUE_APP_REPORT_LOCATION_SELECTOR=postal-code
+
 # Data sources
 VUE_APP_VISU_DATA_SOURCE_URL=<your data source CSV file: https://raw.githubusercontent.com/...>
 VUE_APP_VISU_GEOCODE_URL=<your geocoding info CSV file: https://raw.githubusercontent.com/...>
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 90cfd7d..4ff4d6a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Changelog
 
+## [1.1.0] 2020-03-30
+
+### Added
+
+- Location selector is now customizable with VUE_APP_REPORT_LOCATION_SELECTOR (only postal code available tough)
+
 ## [1.0.1] 2020-03-30
 
 ### Fixed
diff --git a/README.md b/README.md
index c3fb13d..8cd1bc9 100644
--- a/README.md
+++ b/README.md
@@ -66,6 +66,7 @@ Please be sure to use 'yarn' instead of 'npm' as package manager.
 
 #### Configuration
 
+1. Choose you location selector (default: postal-code) (only postal code available for now)
 1. Setup the data source and geocoding data URLs
 2. Set the map default position and zoom level
 3. Set the recaptcha key (not the secret) with the value from the reCAPTCHA console.
diff --git a/package.json b/package.json
index 33bab7c..25cbb9f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "covid-self-report",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "author": {
     "name": "Christian Müller",
     "email": "muller.ch@gmail.com"
diff --git a/src/views/LocationEditors/LocationFromAddress.vue b/src/views/LocationEditors/LocationFromAddress.vue
new file mode 100644
index 0000000..acc8312
--- /dev/null
+++ b/src/views/LocationEditors/LocationFromAddress.vue
@@ -0,0 +1,25 @@
+<template>
+  <div>Location from address (TBD)</div>
+</template>
+
+<script>
+
+  export default {
+    name: "location-from-address",
+    components: {},
+    props: {
+      location: null,
+      valid: Boolean,
+    },
+    methods: {
+      locationChanged(value) {
+        //this.$emit('update:valid', ...);
+        //this.$emit('update:location', value);
+      }
+    },
+  }
+</script>
+
+<style>
+
+</style>
diff --git a/src/views/LocationEditors/LocationFromPostalCode.vue b/src/views/LocationEditors/LocationFromPostalCode.vue
new file mode 100644
index 0000000..184e6eb
--- /dev/null
+++ b/src/views/LocationEditors/LocationFromPostalCode.vue
@@ -0,0 +1,45 @@
+<template>
+  <div>
+    <base-input :value="location"
+                @input="locationChanged"
+                type="number"
+                :placeholder="$t('report.locationPlaceholder')"
+                :error="enableCheck && !valid ? $t('report.locationValidError') : ''"
+                @focusout="enableCheck = true"
+                :valid="!enableCheck ? null : valid"></base-input>
+  </div>
+</template>
+
+<script>
+
+  export default {
+    name: "location-from-postal-code",
+    components: {},
+    props: {
+      location: null,
+      valid: Boolean,
+    },
+    data() {
+      return {
+        enableCheck: false,
+      }
+    },
+    methods: {
+      locationChanged(value) {
+        this.$emit('update:location', value);
+      },
+      isValid(value) {
+        return value.length === 4 && !isNaN(value);
+      },
+    },
+    watch: {
+      location: function (value) {
+        this.$emit('update:valid', this.isValid(value));
+      },
+    }
+  }
+</script>
+
+<style>
+
+</style>
diff --git a/src/views/Report.vue b/src/views/Report.vue
index cd6961c..eaeac46 100644
--- a/src/views/Report.vue
+++ b/src/views/Report.vue
@@ -164,19 +164,21 @@
             <div class="row mt-3" v-show="reportData.sick !== null">
               <div class="col-lg-6">
                 <h3 class="text-white">{{ $t('report.locationQuestion') }}</h3>
-                <base-input v-model="reportData.postalCode"
-                            type="number"
-                            :placeholder="$t('report.locationPlaceholder')"
-                            :error="postalCodeCheck && !validPostalCode ? $t('report.locationValidError') : ''"
-                            @focusout="postalCodeCheck = true"
-                            :valid="!postalCodeCheck ? null : validPostalCode"></base-input>
+
+                <location-from-address v-if="locationSelector === 'address'"
+                                       :location.sync="reportData.postalCode"
+                                       :valid.sync="validLocation"></location-from-address>
+
+                <location-from-postal-code v-else
+                                           :location.sync="reportData.postalCode"
+                                           :valid.sync="validLocation"></location-from-postal-code>
               </div>
             </div>
 
             <div class="row mt-3" v-show="reportData.sick !== null">
               <div class="col-lg-6">
                 <base-button @click="send"
-                             :disabled="!validPostalCode || reportData.diagnostic === null"
+                             :disabled="!validLocation || reportData.diagnostic === null"
                              class="mb-3 mb-sm-0"
                              type="white"
                              icon="fa fa-send">
@@ -244,10 +246,14 @@
 
   import Modal from '@/components/Modal.vue';
   import newGithubIssueUrl from 'new-github-issue-url';
+  import LocationFromPostalCode from "./LocationEditors/LocationFromPostalCode";
+  import LocationFromAddress from "./LocationEditors/LocationFromAddress";
 
   export default {
     name: "report",
     components: {
+      LocationFromAddress,
+      LocationFromPostalCode,
       Modal
     },
     async mounted() {
@@ -291,15 +297,17 @@
         healthyOfficialConfirmModal: false,
         sendErrorModal: false,
         sendError: '',
-        postalCodeCheck: false,
         forceReportAgain: false,
 
+        locationSelector: process.env.VUE_APP_REPORT_LOCATION_SELECTOR,
+        validLocation: false,
+
         reportData: {
           sessionId: null,
           sick: null,
           symptoms: [],
           diagnostic: null,
-          postalCode: '',
+          postalCode: null,
           lastReport: null,
         },
         sending: false,
@@ -315,9 +323,6 @@
       }
     },
     computed: {
-      validPostalCode: function () {
-        return (this.reportData.postalCode.length === 4 && !isNaN(this.reportData.postalCode));
-      },
       daysSinceLastReport: function () {
 
         if (this.reportData.lastReport === null) {
@@ -417,7 +422,7 @@
       githubIssue: async function () {
         const url = newGithubIssueUrl({
           user: process.env.VUE_APP_GITHUB_REPO_OWNER,
-          repo:  process.env.VUE_APP_GITHUB_REPO_NAME,
+          repo: process.env.VUE_APP_GITHUB_REPO_NAME,
           title: 'Error when sending from the front-end',
           body: `The error is:\n> ${this.sendError}\n\n---\nAuto-generated from the front-end`
         });