Browse Source

Use fee-dialog component in Estimates view

master
Immanuel Onyeka 2 years ago
parent
commit
8cac2eaef8
2 changed files with 19 additions and 12 deletions
  1. +16
    -9
      components/estimates.vue
  2. +3
    -3
      components/fee-dialog.vue

+ 16
- 9
components/estimates.vue View File

@@ -4,8 +4,9 @@


<section class="form inputs"> <section class="form inputs">
<h3>Default Fees</h3> <h3>Default Fees</h3>
<div v-for="(fee, indx) in fees"
:key="fee.name + indx" class="fee"
<div
v-for="(fee, indx) in fees"
:key="fee.name + indx" class="fee"
> >
<label @click="() => edit = fee"> <label @click="() => edit = fee">
${{fee.amount}}{{fee.perc && ` (${fee.perc}%)`}} - {{fee.name}}<br> ${{fee.amount}}{{fee.perc && ` (${fee.perc}%)`}} - {{fee.name}}<br>
@@ -17,9 +18,15 @@
<button @click="() => edit = {}">New Fee</button> <button @click="() => edit = {}">New Fee</button>
</section> </section>


<Dialog v-if="edit" @close="() => edit = null">
<h3>hi</h3>
</Dialog>
<fee-dialog v-if="edit"
:heading="'Fee'"
:initial="edit"
:price="0"
@close="() => edit = null"
@save="newFee"
/>




<section class="inputs"> <section class="inputs">
<h3>Saved Estimates</h3> <h3>Saved Estimates</h3>
@@ -30,10 +37,10 @@
</template> </template>


<script> <script>
import Dialog from "./dialog.vue"

function newFee() {
import FeeDialog from "./fee-dialog.vue"


function newFee(fee, isDebit) {
this.edit = null
} }


function newType() { function newType() {
@@ -47,7 +54,7 @@ function remove() {
export default { export default {
props: [ 'user', 'fees' ], props: [ 'user', 'fees' ],
emits: [ 'deleteFee', 'update' ], emits: [ 'deleteFee', 'update' ],
components: { Dialog },
components: { FeeDialog },
methods: { newFee, newType, remove }, methods: { newFee, newType, remove },
data() { data() {
return { return {


+ 3
- 3
components/fee-dialog.vue View File

@@ -46,9 +46,9 @@ import { stripLetters, strip, stripInt, stripPerc } from "../helpers.js"


function validFee() { function validFee() {
const fee = this.fee const fee = this.fee
if (!fee.name || !fee.type || !fee.amount) {
return false
}
if (!fee.name || !fee.type) return false
if (!fee.amount && !fee.perc) return false
return true return true
} }


Loading…
Cancel
Save