ability to define user at create expense and fill

ui/src/router/views/createExpense.vue

@@ -29,6 +29,7 @@ export default {
       showMore: false,
       quickEntry: null,
       myVehicles: [],
+      users: [],
       selectedVehicle: this.vehicle,
       expenseModel: this.expense,
       processQuickEntry: false,
@@ -53,8 +54,10 @@ export default {
   mounted() {
     this.myVehicles = this.vehicles
     this.selectedVehicle = this.vehicle
+    this.fetchVehicleUsers()
     if (!this.expense.id) {
       this.expenseModel = this.getEmptyExpense()
+      this.expenseModel.userId = this.me.id
     }
   },
   methods: {
@@ -66,20 +69,25 @@ export default {
         odoReading: '',
         date: new Date(),
         comments: '',
+        userId: '',
       }
     },
-
+    fetchVehicleUsers() {
+      store
+        .dispatch('vehicles/fetchUsersByVehicleId', { vehicleId: this.selectedVehicle.id })
+        .then((data) => {
+          this.users = data
+        })
+        .catch((err) => console.log(err))
+    },
     createExpense() {
       this.tryingToCreate = true
       this.expenseModel.vehicleId = this.selectedVehicle.id
-      this.expenseModel.userId = this.me.id
+      //   this.expenseModel.userId = this.me.id
 
       if (this.expense.id) {
         axios
-          .put(
+          .put(`/api/vehicles/${this.selectedVehicle.id}/expenses/${this.expense.id}`, this.expenseModel)
-            `/api/vehicles/${this.selectedVehicle.id}/expenses/${this.expense.id}`,
-            this.expenseModel
-          )
           .then((data) => {
             this.$buefy.toast.open({
               message: 'Expense Updated Successfully',
@@ -88,9 +96,7 @@ export default {
             })
             this.expenseModel = this.getEmptyExpense()
             if (this.processQuickEntry) {
-              store
+              store.dispatch('vehicles/setQuickEntryAsProcessed', { id: this.quickEntry.id }).then((data) => {})
-                .dispatch('vehicles/setQuickEntryAsProcessed', { id: this.quickEntry.id })
-                .then((data) => {})
             }
           })
           .catch((ex) => {
@@ -115,11 +121,9 @@ export default {
             })
             this.expenseModel = this.getEmptyExpense()
             if (this.processQuickEntry) {
-              store
+              store.dispatch('vehicles/setQuickEntryAsProcessed', { id: this.quickEntry.id }).then((data) => {
-                .dispatch('vehicles/setQuickEntryAsProcessed', { id: this.quickEntry.id })
+                this.quickEntry = null
-                .then((data) => {
+              })
-                  this.quickEntry = null
-                })
             }
           })
           .catch((ex) => {
@@ -145,14 +149,7 @@ export default {
       <div class="column is-two-thirds">
         <h1 class="title">Create Expense</h1>
         <h1 class="subtitle">
-          {{
+          {{ [selectedVehicle.nickname, selectedVehicle.registration, selectedVehicle.make, selectedVehicle.model].join(' | ') }}
-            [
-              selectedVehicle.nickname,
-              selectedVehicle.registration,
-              selectedVehicle.make,
-              selectedVehicle.model,
-            ].join(' | ')
-          }}
         </h1>
       </div>
       <div class="column is-one-thirds">
@@ -161,26 +158,21 @@ export default {
     </div>
     <form @submit.prevent="createExpense">
       <b-field label="Select a vehicle">
-        <b-select
+        <b-select v-model="selectedVehicle" placeholder="Vehicle" required expanded :disabled="expense.id">
-          v-model="selectedVehicle"
-          placeholder="Vehicle"
-          required
-          expanded
-          :disabled="expense.id"
-        >
           <option v-for="option in myVehicles" :key="option.id" :value="option">
             {{ option.nickname }}
           </option>
         </b-select>
       </b-field>
+      <b-field label="Expense by">
+        <b-select v-model="expenseModel.userId" placeholder="User" required expanded :disabled="expense.id">
+          <option v-for="option in users" :key="option.userId" :value="option.userId">
+            {{ option.name }}
+          </option>
+        </b-select>
+      </b-field>
       <b-field label="Expense Date">
-        <b-datepicker
+        <b-datepicker v-model="expenseModel.date" placeholder="Click to select..." icon="calendar" :max-date="new Date()"> </b-datepicker>
-          v-model="expenseModel.date"
-          placeholder="Click to select..."
-          icon="calendar"
-          :max-date="new Date()"
-        >
-        </b-datepicker>
       </b-field>
       <b-field label="Expense Type*">
         <b-input v-model="expenseModel.expenseType" expanded required></b-input>
@@ -190,26 +182,13 @@ export default {
         <p class="control">
           <span class="button is-static">{{ me.currency }}</span>
         </p>
-        <b-input
+        <b-input v-model.number="expenseModel.amount" type="number" min="0" expanded step=".001" required></b-input>
-          v-model.number="expenseModel.amount"
-          type="number"
-          min="0"
-          expanded
-          step=".001"
-          required
-        ></b-input>
       </b-field>
       <b-field label="Odometer Reading">
         <p class="control">
           <span class="button is-static">{{ me.distanceUnitDetail.short }}</span>
         </p>
-        <b-input
+        <b-input v-model.number="expenseModel.odoReading" type="number" min="0" expanded required></b-input>
-          v-model.number="expenseModel.odoReading"
-          type="number"
-          min="0"
-          expanded
-          required
-        ></b-input>
       </b-field>
 
       <b-field>
@@ -221,21 +200,11 @@ export default {
         </b-field>
       </fieldset>
       <b-field>
-        <b-switch v-if="quickEntry" v-model="processQuickEntry"
+        <b-switch v-if="quickEntry" v-model="processQuickEntry">Mark selected Quick Entry as processed</b-switch>
-          >Mark selected Quick Entry as processed</b-switch
-        >
       </b-field>
       <br />
       <b-field>
-        <b-button
+        <b-button tag="input" native-type="submit" :disabled="tryingToCreate" type="is-primary" label="Create Expense" expanded> </b-button>
-          tag="input"
-          native-type="submit"
-          :disabled="tryingToCreate"
-          type="is-primary"
-          label="Create Expense"
-          expanded
-        >
-        </b-button>
       </b-field>
     </form>
   </Layout>

ui/src/router/views/createFillup.vue

@@ -32,6 +32,7 @@ export default {
       showMore: false,
       quickEntry: null,
       myVehicles: [],
+      users: [],
       selectedVehicle: this.vehicle,
       fillupModel: this.fillup,
       processQuickEntry: false,
@@ -47,16 +48,10 @@ export default {
   },
   watch: {
     'fillupModel.fuelQuantity': function(old, newOne) {
-      this.fillupModel.totalAmount = round(
+      this.fillupModel.totalAmount = round(this.fillupModel.fuelQuantity * this.fillupModel.perUnitPrice, 2)
-        this.fillupModel.fuelQuantity * this.fillupModel.perUnitPrice,
-        2
-      )
     },
     'fillupModel.perUnitPrice': function(old, newOne) {
-      this.fillupModel.totalAmount = round(
+      this.fillupModel.totalAmount = round(this.fillupModel.fuelQuantity * this.fillupModel.perUnitPrice, 2)
-        this.fillupModel.fuelQuantity * this.fillupModel.perUnitPrice,
-        2
-      )
     },
     quickEntry: function(newOne, old) {
       if (old == null && newOne !== null) {
@@ -67,11 +62,21 @@ export default {
   mounted() {
     this.myVehicles = this.vehicles
     this.selectedVehicle = this.vehicle
+    this.fetchVehicleUsers()
     if (!this.fillup.id) {
       this.fillupModel = this.getEmptyFillup()
+      this.fillupModel.userId = this.me.id
     }
   },
   methods: {
+    fetchVehicleUsers() {
+      store
+        .dispatch('vehicles/fetchUsersByVehicleId', { vehicleId: this.selectedVehicle.id })
+        .then((data) => {
+          this.users = data
+        })
+        .catch((err) => console.log(err))
+    },
     getEmptyFillup() {
       return {
         vehicleId: this.selectedVehicle.id,
@@ -85,18 +90,16 @@ export default {
         date: new Date(),
         fillingStation: '',
         comments: '',
+        userId: '',
       }
     },
     async createFillup() {
       this.tryingToCreate = true
       this.fillupModel.vehicleId = this.selectedVehicle.id
-      this.fillupModel.userId = this.me.id
+      //  this.fillupModel.userId = this.me.id
       if (this.fillup.id) {
         axios
-          .put(
+          .put(`/api/vehicles/${this.selectedVehicle.id}/fillups/${this.fillup.id}`, this.fillupModel)
-            `/api/vehicles/${this.selectedVehicle.id}/fillups/${this.fillup.id}`,
-            this.fillupModel
-          )
           .then((data) => {
             this.$buefy.toast.open({
               message: 'Fillup Updated Successfully',
@@ -105,11 +108,9 @@ export default {
             })
             this.fillupModel = this.getEmptyFillup()
             if (this.processQuickEntry) {
-              store
+              store.dispatch('vehicles/setQuickEntryAsProcessed', { id: this.quickEntry.id }).then((data) => {
-                .dispatch('vehicles/setQuickEntryAsProcessed', { id: this.quickEntry.id })
+                this.quickEntry = null
-                .then((data) => {
+              })
-                  this.quickEntry = null
-                })
             }
           })
           .catch((ex) => {
@@ -134,9 +135,7 @@ export default {
             })
             this.fillupModel = this.getEmptyFillup()
             if (this.processQuickEntry) {
-              store
+              store.dispatch('vehicles/setQuickEntryAsProcessed', { id: this.quickEntry.id }).then((data) => {})
-                .dispatch('vehicles/setQuickEntryAsProcessed', { id: this.quickEntry.id })
-                .then((data) => {})
             }
           })
           .catch((ex) => {
@@ -163,14 +162,7 @@ export default {
         <div class="column is-two-thirds">
           <h1 class="title">Create Fillup</h1>
           <h1 class="subtitle">
-            {{
+            {{ [selectedVehicle.nickname, selectedVehicle.registration, selectedVehicle.make, selectedVehicle.model].join(' | ') }}
-              [
-                selectedVehicle.nickname,
-                selectedVehicle.registration,
-                selectedVehicle.make,
-                selectedVehicle.model,
-              ].join(' | ')
-            }}
           </h1>
         </div>
         <div class="column is-one-thirds">
@@ -180,37 +172,24 @@ export default {
     </div>
     <form class="" @submit.prevent="createFillup">
       <b-field label="Select a vehicle">
-        <b-select
+        <b-select v-model="selectedVehicle" placeholder="Vehicle" required expanded :disabled="fillup.id">
-          v-model="selectedVehicle"
-          placeholder="Vehicle"
-          required
-          expanded
-          :disabled="fillup.id"
-        >
           <option v-for="option in myVehicles" :key="option.id" :value="option">
             {{ option.nickname }}
           </option>
         </b-select>
       </b-field>
+      <b-field label="Expense by">
+        <b-select v-model="fillupModel.userId" placeholder="User" required expanded :disabled="fillup.id">
+          <option v-for="option in users" :key="option.userId" :value="option.userId">
+            {{ option.name }}
+          </option>
+        </b-select>
+      </b-field>
       <b-field label="Fillup Date">
-        <b-datepicker
+        <b-datepicker v-model="fillupModel.date" placeholder="Click to select..." icon="calendar" trap-focus :max-date="new Date()"> </b-datepicker>
-          v-model="fillupModel.date"
-          placeholder="Click to select..."
-          icon="calendar"
-          trap-focus
-          :max-date="new Date()"
-        >
-        </b-datepicker>
       </b-field>
       <b-field label="Quantity*" addons>
-        <b-input
+        <b-input v-model.number="fillupModel.fuelQuantity" type="number" step=".001" min="0" expanded required></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>
           <option v-for="(option, key) in fuelUnitMasters" :key="key" :value="key">
             {{ option.long }}
@@ -221,47 +200,25 @@ export default {
         ><p class="control">
           <span class="button is-static">{{ me.currency }}</span>
         </p>
-        <b-input
+        <b-input v-model.number="fillupModel.perUnitPrice" type="number" min="0" step=".001" expanded required></b-input>
-          v-model.number="fillupModel.perUnitPrice"
-          type="number"
-          min="0"
-          step=".001"
-          expanded
-          required
-        ></b-input>
       </b-field>
       <b-field label="Total Amount Paid">
         <p class="control">
           <span class="button is-static">{{ me.currency }}</span>
         </p>
-        <b-input
+        <b-input v-model.number="fillupModel.totalAmount" type="number" min="0" step=".001" expanded required></b-input>
-          v-model.number="fillupModel.totalAmount"
-          type="number"
-          min="0"
-          step=".001"
-          expanded
-          required
-        ></b-input>
       </b-field>
       <b-field label="Odometer Reading">
         <p class="control">
           <span class="button is-static">{{ me.distanceUnitDetail.short }}</span>
         </p>
-        <b-input
+        <b-input v-model.number="fillupModel.odoReading" type="number" min="0" expanded required></b-input>
-          v-model.number="fillupModel.odoReading"
-          type="number"
-          min="0"
-          expanded
-          required
-        ></b-input>
       </b-field>
       <b-field>
         <b-checkbox v-model="fillupModel.isTankFull">Did you get a full tank?</b-checkbox>
       </b-field>
       <b-field>
-        <b-checkbox v-model="fillupModel.hasMissedFillup"
+        <b-checkbox v-model="fillupModel.hasMissedFillup">Did you miss the fillup entry before this one?</b-checkbox>
-          >Did you miss the fillup entry before this one?</b-checkbox
-        >
       </b-field>
       <b-field>
         <b-switch v-model="showMore">Fill more details</b-switch>
@@ -275,21 +232,11 @@ export default {
         </b-field>
       </fieldset>
       <b-field>
-        <b-switch v-if="quickEntry" v-model="processQuickEntry"
+        <b-switch v-if="quickEntry" v-model="processQuickEntry">Mark selected Quick Entry as processed</b-switch>
-          >Mark selected Quick Entry as processed</b-switch
-        >
       </b-field>
       <br />
       <b-field>
-        <b-button
+        <b-button tag="input" native-type="submit" :disabled="tryingToCreate" type="is-primary" label="Create Fillup" expanded> </b-button>
-          tag="input"
-          native-type="submit"
-          :disabled="tryingToCreate"
-          type="is-primary"
-          label="Create Fillup"
-          expanded
-        >
-        </b-button>
         <p v-if="authError">
           There was an error logging in to your account.
         </p>