-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* fix(package): lint vue files too * chore: fix lint errors * chore(ActivityOrderHistory): fix no-unused-var lint error * fix: ESLint problem matcher path * fix: no-mutating-prop lint * Fix flash notification * refactor: change component casing in templates * refactor: change component casing in templates * fix: event handling * fix v-slot usage and use short-hand * it is not appropriate to use v-slot in the root element of a component. you must fill a v-slot in a context where you know it can be filled. Co-authored-by: Wilco van Beijnum <[email protected]> Co-authored-by: Matteo Bronkhorst <[email protected]> Co-authored-by: matteo <[email protected]>
- Loading branch information
4 people
authored
Nov 28, 2022
1 parent
2365556
commit edad2dc
Showing
23 changed files
with
507 additions
and
503 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,119 @@ | ||
| <template lang="html"> | ||
| <div class="user-input position-relative"> | ||
| <input type="text" class="d-none" :name="name" :value="selectedSuggestion.id"> | ||
| <input type="text" class="form-control" v-model="query" placeholder="Begin met typen..." | ||
| @input="updateValue" | ||
| @keydown.enter="selectFirstSuggestion" | ||
| aria-haspopup="true" v-bind:aria-expanded="dropdownOpened" | ||
| required="true" autocomplete="off"> | ||
|
|
||
| <div class="row"> | ||
| <ul class="dropdown-menu" v-bind:class="{'show':dropdownOpened}"> | ||
| <li class="dropdown-item" v-for="(suggestion, index) in suggestions" :key="suggestion.id" | ||
| v-on:click.prevent="suggestionClicked(index)"> | ||
| <a href="#">{{ suggestion.name }}</a> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script> | ||
| export default { | ||
| props: { | ||
| name: { | ||
| type: String | ||
| }, | ||
| value: { | ||
| type: Object, | ||
| default: () => ({}) | ||
| }, | ||
| includePin: { | ||
| type: Boolean, | ||
| default: false | ||
| }, | ||
| includeCash: { | ||
| type: Boolean, | ||
| default: false | ||
| } | ||
| }, | ||
| data: function() { | ||
| return { | ||
| query: '', | ||
| selectedSuggestion: this.value, | ||
| open: true, | ||
| suggestions: [], | ||
| suggestionsUpdatedAt: null | ||
| }; | ||
| }, | ||
| computed: { | ||
| dropdownOpened() { | ||
| return this.query !== '' && | ||
| this.suggestions.length !== 0 && | ||
| this.open === true; | ||
| } | ||
| }, | ||
| methods: { | ||
| updateValue() { | ||
| if (this.query === '') { | ||
| // Clear user | ||
| this.selectedSuggestion = {}; | ||
| this.$emit('input', this.selectedSuggestion); | ||
| } | ||
| if ((new Date() - this.suggestionsUpdatedAt) > 150) { | ||
| this.updateSuggestions(); | ||
| } else if (this.open === false) { | ||
| this.open = true; | ||
| } | ||
| }, | ||
| // When one of the suggestion is clicked | ||
| suggestionClicked(index) { | ||
| this.selectedSuggestion = this.suggestions[index]; | ||
| this.query = this.selectedSuggestion.name; | ||
| this.open = false; | ||
| this.$emit('input', this.selectedSuggestion); | ||
| }, | ||
| updateSuggestions() { | ||
| this.suggestions = []; | ||
| if (this.query.length < 2) { | ||
| return; | ||
| } | ||
| this.$http.post('/users/search.json', { query: this.query }).then( (response) => { | ||
| response.data.forEach((a) => { | ||
| this.suggestions.push(a); | ||
| }); | ||
| if (this.includePin) { | ||
| if ('gepind'.indexOf(this.query.toLowerCase()) >= 0) { | ||
| this.suggestions.push({ | ||
| name: 'Gepind', | ||
| paid_with_pin: true | ||
| }); | ||
| } | ||
| } | ||
| if (this.includeCash) { | ||
| if ('contant betaald'.indexOf(this.query.toLowerCase()) >= 0) { | ||
| this.suggestions.push({ | ||
| name: 'Contant betaald', | ||
| paid_with_cash: true | ||
| }); | ||
| } | ||
| } | ||
| this.updateValue(); | ||
| }); | ||
| this.suggestionsUpdatedAt = new Date(); | ||
| }, | ||
| selectFirstSuggestion(e) { | ||
| if (this.open) { | ||
| e.preventDefault(); | ||
| } | ||
| if (this.suggestions.length > 0) { | ||
| this.suggestionClicked(0); | ||
| } | ||
| } | ||
| } | ||
| }; | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,79 @@ | ||
| <template lang="html"> | ||
| <div class="product-totals"> | ||
| <user-input class="mb-3" v-model="user" :include-pin="true" :include-cash="true"></user-input> | ||
|
|
||
| <spinner class="pb-3 m-auto" size="large" v-if="isLoading" /> | ||
| <div class="table-responsive" v-else> | ||
| <table class="table table-sm" v-if="orderTotals.length > 0"> | ||
| <thead> | ||
| <tr> | ||
| <th scope="col">Product</th> | ||
| <th scope="col">Aantal keer besteld</th> | ||
| <th class="text-right" scope="col">Totaalbedrag</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <tr v-for="orderTotal in orderTotals" :key="orderTotal.name"> | ||
| <td>{{orderTotal.name}}</td> | ||
| <td>{{orderTotal.amount}} x</td> | ||
| <td class="text-right">{{doubleToCurrency(orderTotal.price)}}</td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
| <div v-else> | ||
| Er zijn geen producten verkocht | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script> | ||
| import UserInput from '../UserInput.vue'; | ||
| import Spinner from 'vue-simple-spinner'; | ||
| export default { | ||
| props: { | ||
| activity: { | ||
| required: true, | ||
| } | ||
| }, | ||
| data() { | ||
| return { | ||
| user: {}, | ||
| orderTotals: [], | ||
| isLoading: true | ||
| }; | ||
| }, | ||
| created() { | ||
| this.loadProductTotals(); | ||
| }, | ||
| methods: { | ||
| loadProductTotals() { | ||
| this.isLoading = true; | ||
| let params = {user: this.user.id, paid_with_cash: this.user.paid_with_cash, paid_with_pin: this.user.paid_with_pin}; | ||
| this.$http.get('/activities/'+this.activity+'/product_totals', { params }).then((response) => { | ||
| this.orderTotals = response.body; | ||
| this.isLoading = false; | ||
| }); | ||
| }, | ||
| doubleToCurrency(price) { | ||
| return `€ ${parseFloat(price).toFixed(2)}`; | ||
| }, | ||
| }, | ||
| watch: { | ||
| user() { | ||
| this.loadProductTotals(); | ||
| } | ||
| }, | ||
| components: { | ||
| Spinner, | ||
| UserInput | ||
| } | ||
| }; | ||
| </script> |
Oops, something went wrong.