ability to define user at create expense and fill

This commit is contained in:
Akhil Gupta
2021-06-07 17:03:17 +05:30
parent 8cea4579eb
commit 164b694bc6
2 changed files with 69 additions and 153 deletions

View File

@@ -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(
`/api/vehicles/${this.selectedVehicle.id}/expenses/${this.expense.id}`,
this.expenseModel
)
.put(`/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
.dispatch('vehicles/setQuickEntryAsProcessed', { id: this.quickEntry.id })
.then((data) => {})
store.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
.dispatch('vehicles/setQuickEntryAsProcessed', { id: this.quickEntry.id })
.then((data) => {
this.quickEntry = null
})
store.dispatch('vehicles/setQuickEntryAsProcessed', { id: this.quickEntry.id }).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
v-model="selectedVehicle"
placeholder="Vehicle"
required
expanded
:disabled="expense.id"
>
<b-select 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
v-model="expenseModel.date"
placeholder="Click to select..."
icon="calendar"
:max-date="new Date()"
>
</b-datepicker>
<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
v-model.number="expenseModel.amount"
type="number"
min="0"
expanded
step=".001"
required
></b-input>
<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
v-model.number="expenseModel.odoReading"
type="number"
min="0"
expanded
required
></b-input>
<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"
>Mark selected Quick Entry as processed</b-switch
>
<b-switch v-if="quickEntry" v-model="processQuickEntry">Mark selected Quick Entry as processed</b-switch>
</b-field>
<br />
<b-field>
<b-button
tag="input"
native-type="submit"
:disabled="tryingToCreate"
type="is-primary"
label="Create Expense"
expanded
>
</b-button>
<b-button tag="input" native-type="submit" :disabled="tryingToCreate" type="is-primary" label="Create Expense" expanded> </b-button>
</b-field>
</form>
</Layout>

View File

@@ -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.fuelQuantity * this.fillupModel.perUnitPrice,
2
)
this.fillupModel.totalAmount = round(this.fillupModel.fuelQuantity * this.fillupModel.perUnitPrice, 2)
},
'fillupModel.perUnitPrice': function(old, newOne) {
this.fillupModel.totalAmount = round(
this.fillupModel.fuelQuantity * this.fillupModel.perUnitPrice,
2
)
this.fillupModel.totalAmount = round(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(
`/api/vehicles/${this.selectedVehicle.id}/fillups/${this.fillup.id}`,
this.fillupModel
)
.put(`/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
.dispatch('vehicles/setQuickEntryAsProcessed', { id: this.quickEntry.id })
.then((data) => {
this.quickEntry = null
})
store.dispatch('vehicles/setQuickEntryAsProcessed', { id: this.quickEntry.id }).then((data) => {
this.quickEntry = null
})
}
})
.catch((ex) => {
@@ -134,9 +135,7 @@ export default {
})
this.fillupModel = this.getEmptyFillup()
if (this.processQuickEntry) {
store
.dispatch('vehicles/setQuickEntryAsProcessed', { id: this.quickEntry.id })
.then((data) => {})
store.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
v-model="selectedVehicle"
placeholder="Vehicle"
required
expanded
:disabled="fillup.id"
>
<b-select 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
v-model="fillupModel.date"
placeholder="Click to select..."
icon="calendar"
trap-focus
:max-date="new Date()"
>
</b-datepicker>
<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
v-model.number="fillupModel.fuelQuantity"
type="number"
step=".001"
min="0"
expanded
required
></b-input>
<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
v-model.number="fillupModel.perUnitPrice"
type="number"
min="0"
step=".001"
expanded
required
></b-input>
<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
v-model.number="fillupModel.totalAmount"
type="number"
min="0"
step=".001"
expanded
required
></b-input>
<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
v-model.number="fillupModel.odoReading"
type="number"
min="0"
expanded
required
></b-input>
<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"
>Did you miss the fillup entry before this one?</b-checkbox
>
<b-checkbox v-model="fillupModel.hasMissedFillup">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"
>Mark selected Quick Entry as processed</b-switch
>
<b-switch v-if="quickEntry" v-model="processQuickEntry">Mark selected Quick Entry as processed</b-switch>
</b-field>
<br />
<b-field>
<b-button
tag="input"
native-type="submit"
:disabled="tryingToCreate"
type="is-primary"
label="Create Fillup"
expanded
>
</b-button>
<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>