Draft price list in rent

kaniak274 · Dec 5, 2019 · a6ac88c · a6ac88c
1 parent 7c2da33
commit a6ac88c
Show file tree

Hide file tree

Showing 4 changed files with 129 additions and 1 deletion.
diff --git a/ebiznes/assets/components/Rent.vue b/ebiznes/assets/components/Rent.vue
@@ -2,11 +2,85 @@
     <div class="rent-container">
         <b-button
             v-if="authorizationGranted"
-            @click="showModal = true"
+            @click="showPriceList = true"
             type="is-primary is-medium">
             {{ $t('service.rentBtn') }}
         </b-button>
 
+        <b-modal
+            :active.sync="showPriceList"
+            has-modal-card
+            trap-focus
+            aria-role="dialog"
+            aria-modal
+            custom-class="price-list-modal">
+            <form method="POST" onSubmit="return false">
+                <div class="modal-card" style="width: auto">
+                    <header class="modal-card-head">
+                        <p
+                            class="modal-card-title">
+                            Czego potrzebujesz?
+                        </p>
+                    </header>
+                    <section class="modal-card-body">
+                        <div
+                            v-for="price in service.price_list"
+                            :key="price.pk"
+                            class="mt-2">
+                            <div class="row mb-3">
+                                <div class="col-4 text-center">
+                                    {{ price.name }}
+                                </div>
+                                <div class="col-4 text-center">
+                                    {{ price.price }}
+                                </div>
+                                <div class="col-4 text-center">
+                                    <b-button
+                                        v-if="!isUsed(price.pk)"
+                                        type="is-primary"
+                                        @click="addPrice(price)"
+                                        expanded
+                                    >+</b-button>
+
+                                    <b-button
+                                        v-else
+                                        type="is-primary"
+                                        @click="minusPrice(price)"
+                                        expanded
+                                    >-</b-button>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="row">
+                            <div class="col-12 text-center">
+                                Do zaplaty: {{ total_price.toFixed(2) }} zl
+                            </div>
+                        </div>
+                    </section>
+                    <footer class="modal-card-foot">
+                        <div class="row" style="width: 100%;">
+                            <div class="col-6">
+                                <button
+                                    class="button"
+                                    type="button"
+                                    @click="closePriceList"
+                                >Zamknij</button>
+                            </div>
+
+                            <div class="col-6 text-right">
+                                <b-button
+                                    type="is-primary"
+                                    tag="input"
+                                    @click="nextStep"
+                                    value="Przejdz dalej"/>
+                            </div>
+                        </div>
+                    </footer>
+                </div>
+            </form>
+        </b-modal>
+
         <b-modal
             :active.sync="showModal"
             has-modal-card
@@ -50,6 +124,7 @@
 <script>
 import axios from 'axios';
 import { mapGetters, mapState } from 'vuex';
+import { $ as money, add, minus } from 'moneysafe';
 
 export default {
     name: 'Rent',
@@ -59,6 +134,9 @@ export default {
             phone_number: '',
             showModal: false,
             address: '',
+            showPriceList: false,
+            total_price: 0,
+            prices_used: [],
         }
     },
     
@@ -67,6 +145,7 @@ export default {
 
         ...mapState({
             user: state => state.user,
+            service: state => state.service,
         }),
     }, 
 
@@ -75,6 +154,35 @@ export default {
             this.showModal = false;
         },
 
+        closePriceList: function() {
+            this.showPriceList = false;
+        },
+
+        nextStep: function() {
+            this.showPriceList = false;
+            this.showModal = true;
+        },
+
+        addPrice: function({ pk, price }) {
+            this.total_price = add(
+                money(this.total_price),
+                money(parseFloat(price))
+            );
+            this.prices_used.push(pk);
+        },
+
+        isUsed: function(pk) {
+            return this.prices_used.includes(pk);
+        },
+
+        minusPrice: function({ pk, price }) {
+            this.total_price = add(
+                money(this.total_price),
+                money(parseFloat(price) * -1)
+            );
+            this.prices_used = this.prices_used.filter(item => item !== pk);   
+        },
+
         send: function() {
             const { $route: { params: { id }}, phone_number, address } = this;
 

diff --git a/ebiznes/assets/styles/service-details.scss b/ebiznes/assets/styles/service-details.scss
@@ -69,4 +69,10 @@
             }
         }
     }
+
+    .price-list-modal {
+        .animation-content {
+            width: 1200px;
+        }
+    }
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -40,6 +40,7 @@
     "buefy": "^0.8.6",
     "jquery": "^3.4.1",
     "moment": "^2.24.0",
+    "moneysafe": "^2.2.0",
     "popper.js": "^1.15.0",
     "toastr": "^2.1.4",
     "vue": "^2.6.10",