Change currency field from select to autocomplete

ui/src/router/views/initialize.vue

@@ -21,13 +21,27 @@ export default {
         email: '',
         password: '',
         distanceUnit: 1,
-        currency: 'INR',
+        currency: '',
       },
     }
   },
   computed: {
     ...mapGetters('auth', ['isInitialized']),
     ...mapState('vehicles', ['currencyMasters', 'distanceUnitMasters']),
+    filteredCurrencyMasters() {
+      return this.currencyMasters.filter((option) => {
+        return (
+          option.namePlural
+            .toString()
+            .toLowerCase()
+            .indexOf(this.registerModel.currency.toLowerCase()) >= 0 ||
+          option.code
+            .toString()
+            .toLowerCase()
+            .indexOf(this.registerModel.currency.toLowerCase()) >= 0
+        )
+      })
+    },
   },
   mounted() {
     store.dispatch('vehicles/fetchMasters').then((data) => {})
@@ -139,6 +153,9 @@ export default {
         })
         .finally(() => (this.isWorking = false))
     },
+    formatCurrency(option) {
+      return `${option.namePlural} (${option.code})`
+    },
   },
 }
 </script>
@@ -148,15 +165,10 @@ export default {
     <div v-if="!migrationMode" class="box">
       <h1 class="title">Migrate from Clarkson</h1>
       <p>
-        If you have an existing Clarkson deployment and you want to migrate your data from that,
+        If you have an existing Clarkson deployment and you want to migrate your data from that, press the following button.
-        press the following button.
       </p>
       <br />
-      <b-field>
+      <b-field> <b-button type="is-primary" @click="migrationMode = 'clarkson'">Migrate from Clarkson</b-button></b-field>
-        <b-button type="is-primary" @click="migrationMode = 'clarkson'"
-          >Migrate from Clarkson</b-button
-        ></b-field
-      >
     </div>
     <div v-if="!migrationMode" class="box">
       <h1 class="title">Fresh Install</h1>
@@ -170,21 +182,12 @@ export default {
     </div>
     <div v-if="migrationMode === 'clarkson'" class="box content">
       <h1 class="title">Migrate from Clarkson</h1>
+      <p>You need to make sure that this deployment of Hammond can access the MySQL database used by Clarkson.</p>
+      <p>If that is not directly possible, you can make a copy of that database somewhere accessible from this instance.</p>
+      <p>Once that is done, enter the connection string to the MySQL instance in the following format.</p>
       <p
-        >You need to make sure that this deployment of Hammond can access the MySQL database used by
+        >All the users imported from Clarkson will have their username as their email in Clarkson database and pasword set to
-        Clarkson.</p
+        <span class="" style="font-weight:bold">hammond</span></p
-      >
-      <p
-        >If that is not directly possible, you can make a copy of that database somewhere accessible
-        from this instance.</p
-      >
-      <p
-        >Once that is done, enter the connection string to the MySQL instance in the following
-        format.</p
-      >
-      <p
-        >All the users imported from Clarkson will have their username as their email in Clarkson
-        database and pasword set to <span class="" style="font-weight:bold">hammond</span></p
       >
       <code>
         user:pass@tcp(127.0.0.1:3306)/dbname?charset=utf8mb4&parseTime=True&loc=Local
@@ -200,15 +203,8 @@ export default {
       </b-field>
 
       <div class="buttons">
-        <b-button
+        <b-button v-if="!testSuccess" type="is-primary" :disabled="isWorking" @click="testConnection">Test Connection</b-button
-          v-if="!testSuccess"
+        ><b-button v-if="testSuccess" type="is-success" :disabled="isWorking" @click="migrate">Migrate</b-button>
-          type="is-primary"
-          :disabled="isWorking"
-          @click="testConnection"
-          >Test Connection</b-button
-        ><b-button v-if="testSuccess" type="is-success" :disabled="isWorking" @click="migrate"
-          >Migrate</b-button
-        >
         <b-button type="is-danger is-light" @click="resetMigrationMode">Cancel</b-button>
       </div>
     </div>
@@ -222,28 +218,22 @@ export default {
           <b-input v-model="registerModel.email" type="email" required></b-input>
         </b-field>
         <b-field label="Your Password">
-          <b-input
+          <b-input v-model="registerModel.password" type="password" required minlength="8" password-reveal></b-input>
-            v-model="registerModel.password"
-            type="password"
-            required
-            minlength="8"
-            password-reveal
-          ></b-input>
         </b-field>
         <b-field label="Currency">
-          <b-select v-model="registerModel.currency" placeholder="Currency" required expanded>
+          <b-autocomplete
-            <option v-for="option in currencyMasters" :key="option.code" :value="option.code">
+            v-model="registerModel.currency"
-              {{ `${option.namePlural} (${option.code})` }}
+            :custom-formatter="formatCurrency"
-            </option>
+            placeholder="Currency"
-          </b-select>
+            :data="filteredCurrencyMasters"
+            :keep-first="true"
+            :open-on-focus="true"
+            required
+            @select="(option) => (selected = option)"
+          ></b-autocomplete>
         </b-field>
         <b-field label="Distance Unit">
-          <b-select
+          <b-select v-model.number="registerModel.distanceUnit" placeholder="Distance Unit" required expanded>
-            v-model.number="registerModel.distanceUnit"
-            placeholder="Distance Unit"
-            required
-            expanded
-          >
             <option v-for="(option, key) in distanceUnitMasters" :key="key" :value="key">
               {{ `${option.long} (${option.short})` }}
             </option>

ui/src/router/views/settings.vue

@@ -44,6 +44,20 @@ export default {
 
       return this.changePassModel.new === this.changePassModel.renew
     },
+    filteredCurrencyMasters() {
+      return this.currencyMasters.filter((option) => {
+        return (
+          option.namePlural
+            .toString()
+            .toLowerCase()
+            .indexOf(this.settingsModel.currency.toLowerCase()) >= 0 ||
+          option.code
+            .toString()
+            .toLowerCase()
+            .indexOf(this.settingsModel.currency.toLowerCase()) >= 0
+        )
+      })
+    },
   },
   methods: {
     changePassword() {
@@ -109,6 +123,9 @@ export default {
           this.tryingToSave = false
         })
     },
+    formatCurrency(option) {
+      return `${option.namePlural} (${option.code})`
+    },
   },
 }
 </script>
@@ -123,11 +140,16 @@ export default {
             These will be used as default values whenever you create a new fillup or expense.
           </h1>
           <b-field label="Currency">
-            <b-select v-model="settingsModel.currency" placeholder="Currency" required expanded>
+            <b-autocomplete
-              <option v-for="option in currencyMasters" :key="option.code" :value="option.code">
+              v-model="settingsModel.currency"
-                {{ `${option.namePlural} (${option.code})` }}
+              :custom-formatter="formatCurrency"
-              </option>
+              placeholder="Currency"
-            </b-select>
+              :data="filteredCurrencyMasters"
+              :keep-first="true"
+              :open-on-focus="true"
+              required
+              @select="(option) => (selected = option)"
+            ></b-autocomplete>
           </b-field>
           <b-field label="Distance Unit">
             <b-select v-model.number="settingsModel.distanceUnit" placeholder="Distance Unit" required expanded>