add fuel subtype to fillup

ui/src/main.js

@@ -21,6 +21,7 @@ import {
   faTrash,
   faShare,
   faUserFriends,
+  faTimesCircle,
 } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 
@@ -51,6 +52,7 @@ library.add(
   faTrash,
   faShare,
   faUserFriends,
+  faTimesCircle
 )
 Vue.use(Buefy, {
   defaultIconComponent: 'vue-fontawesome',

ui/src/router/views/createFillup.vue

@@ -34,6 +34,7 @@ export default {
       quickEntry: null,
       myVehicles: [],
       users: [],
+      fuelSubTypes: [],
       selectedVehicle: this.vehicle,
       fillupModel: this.fillup,
       processQuickEntry: false,
@@ -46,6 +47,14 @@ export default {
     },
     ...mapState('users', ['me']),
     ...mapState('vehicles', ['fuelUnitMasters', 'fuelTypeMasters', 'vehicles']),
+    filteredFuelSubtypes() {
+      if (!this.fillupModel.fuelSubType) {
+        return this.fuelSubTypes
+      }
+      return this.fuelSubTypes.filter((option) => {
+        return option.toLowerCase().indexOf(this.fillupModel.fuelSubType.toLowerCase()) >= 0
+      })
+    },
   },
   watch: {
     'fillupModel.fuelQuantity': function(old, newOne) {
@@ -64,6 +73,7 @@ export default {
     this.myVehicles = this.vehicles
     this.selectedVehicle = this.vehicle
     this.fetchVehicleUsers()
+    this.fetchVehicleFuelSubTypes()
     if (!this.fillup.id) {
       this.fillupModel = this.getEmptyFillup()
       this.fillupModel.userId = this.me.id
@@ -82,6 +92,14 @@ export default {
         })
         .catch((err) => console.log(err))
     },
+    fetchVehicleFuelSubTypes() {
+      store
+        .dispatch('vehicles/fetchFuelSubtypesByVehicleId', { vehicleId: this.selectedVehicle.id })
+        .then((data) => {
+          this.fuelSubTypes = data
+        })
+        .catch((err) => console.log(err))
+    },
     getEmptyFillup() {
       return {
         vehicleId: this.selectedVehicle.id,
@@ -96,6 +114,7 @@ export default {
         fillingStation: '',
         comments: '',
         userId: '',
+        fuelSubType: '',
       }
     },
     async createFillup() {
@@ -201,6 +220,17 @@ export default {
         >
         </b-datepicker>
       </b-field>
+      <b-field label="Fuel Subtype">
+        <b-autocomplete
+          v-model="fillupModel.fuelSubType"
+          :data="filteredFuelSubtypes"
+          placeholder="Octane etc."
+          clearable
+          autofocus
+          @select="(option) => (fillupModel.fuelSubType = option)"
+        >
+        </b-autocomplete>
+      </b-field>
       <b-field label="Quantity*" addons>
         <b-input v-model.number="fillupModel.fuelQuantity" type="number" step=".001" min="0" expanded required></b-input>
         <b-select v-model="fillupModel.fuelUnit" placeholder="Fuel Unit" required>

ui/src/router/views/settings.vue

@@ -181,7 +181,7 @@ export default {
         <table class="table is-hoverable">
           <tr>
             <td>Current Version</td>
-            <td>2021.07.14</td>
+            <td>2021.07.23</td>
           </tr>
           <tr>
             <td>Website</td>

ui/src/router/views/vehicle.vue

@@ -311,6 +311,9 @@ export default {
         <b-table-column v-slot="props" field="date" label="Date" :td-attrs="columnTdAttrs" sortable date>
           {{ formatDate(props.row.date) }}
         </b-table-column>
+        <b-table-column v-slot="props" field="fuelSubType" label="Fuel Sub Type" :td-attrs="columnTdAttrs">
+          {{ props.row.fuelSubType }}
+        </b-table-column>
         <b-table-column v-slot="props" field="fuelQuantity" label="Qty." :td-attrs="hiddenMobile" numeric>
           {{ `${props.row.fuelQuantity} ${props.row.fuelUnitDetail.short}` }}
         </b-table-column>

ui/src/state/modules/vehicles.js

@@ -140,6 +140,12 @@ export const actions = {
       return data
     })
   },
+  fetchFuelSubtypesByVehicleId({ commit, state, rootState }, { vehicleId, force }) {
+    return axios.get(`/api/vehicles/${vehicleId}/fuelSubTypes`).then((response) => {
+      const data = response.data
+      return data
+    })
+  },
   fetchStatsByVehicleId({ commit, state, rootState }, { vehicleId, force }) {
     if (state.vehicleStats.has(vehicleId) && !force) {
       return Promise.resolve(state.vehicleStats.get(vehicleId))