fix: lint Vue files too

.github/problem-matchers/eslint-stylish.json

@@ -4,7 +4,7 @@
       "owner": "eslint-stylish",
       "pattern": [
         {
-          "regexp": "^/app/app/([^\\s].*)$",
+          "regexp": "^/app/([^\\s].*)$",
           "file": 1
         },
         {

app/javascript/components/flash.vue → app/javascript/components/FlashNotification.vue

@@ -82,10 +82,10 @@ export default {
 
     classes(propObject, type) {
       let classes = {};
-      if(propObject.hasOwnProperty('base')) {
+      if(Object.prototype.hasOwnProperty.call(propObject, 'base')) {
         classes[propObject.base] = true;
       }
-      if (propObject.hasOwnProperty(type)) {
+      if (Object.prototype.hasOwnProperty.call(propObject, type)) {
         classes[propObject[type]] = true;
       }
       return classes;

app/javascript/components/producttable.vue → app/javascript/components/ProductTable.vue

@@ -1,5 +1,5 @@
 <template lang="html">
-  <b-container slot="row-details" slot-scope="row">
+  <b-container>
     <b-row class="b-table-details--header px-2 py-1 mb-2">
       <b-col sm="5">product</b-col>
       <b-col sm="2" class="text-right">aantal</b-col>
@@ -42,71 +42,71 @@
 </template>
 
 <script>
-  import axios from 'axios';
+import axios from 'axios';
 
-  export default {
-    props: {
-      activity: {
-        type: Object
-      },
-      order: {
-        type: Object,
-        required: true
-      },
-      editable: {
-        type: Boolean,
-        default: false
-      }
+export default {
+  props: {
+    activity: {
+      type: Object
     },
-    data: function () {
-      return {
-        orderRowErrors: {}
-      }
+    order: {
+      type: Object,
+      required: true
+    },
+    editable: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data: function () {
+    return {
+      orderRowErrors: {}
+    };
+  },
+  methods: {
+    doubleToCurrency(price) {
+      return `€ ${parseFloat(price).toFixed(2)}`;
     },
-    methods: {
-      doubleToCurrency(price) {
-        return `€ ${parseFloat(price).toFixed(2)}`;
-      },
-
-      editOrderRow(orderRow) {
-        orderRow.editing = true;
-      },
 
-      saveOrderRow(orderRow) {
-        const newOrder = {
-          order_rows_attributes: [ {
-            id: orderRow.id,
-            product_count: orderRow.product_count,
-          } ]
-        }
+    editOrderRow(orderRow) {
+      orderRow.editing = true;
+    },
 
-        if (this.activity.id) newOrder.activity_id = this.activity.id;
+    saveOrderRow(orderRow) {
+      const newOrder = {
+        order_rows_attributes: [ {
+          id: orderRow.id,
+          product_count: orderRow.product_count,
+        } ]
+      };
 
-        axios.patch(`/orders/${this.order.id}`, newOrder).then((response) => {
-          const updatedOrder = response.data;
+      if (this.activity.id) newOrder.activity_id = this.activity.id;
 
-          this.order.order_total = updatedOrder.order_total;
+      axios.patch(`/orders/${this.order.id}`, newOrder).then((response) => {
+        const updatedOrder = response.data;
 
-          orderRow.editing = false;
-        }, (error) => {
-          let errorMessage = 'Er is iets misgegaan bij het opslaan van deze rij';
-          if (error.response && error.response.data['order_rows.product_count']) {
-            errorMessage = `Aantal ${error.response.data['order_rows.product_count']}`
-          }
+        this.$emit('updateordertotal', this.order, updatedOrder.order_total);
 
-          this.$set(this.orderRowErrors, orderRow.id, errorMessage);
-        })
-      },
+        orderRow.editing = false;
+      }, (error) => {
+        let errorMessage = 'Er is iets misgegaan bij het opslaan van deze rij';
+        if (error.response && error.response.data['order_rows.product_count']) {
+          errorMessage = `Aantal ${error.response.data['order_rows.product_count']}`;
+        }
 
-      increaseProductCount(orderRow) {
-        orderRow.product_count += 1;
-      },
+        this.$set(this.orderRowErrors, orderRow.id, errorMessage);
+      });
+    },
 
-      decreaseProductCount(orderRow) {
-        if (orderRow.product_count > 0) {
-          orderRow.product_count -= 1;
-        }
-      },
+    increaseProductCount(orderRow) {
+      orderRow.product_count += 1;
     },
+
+    decreaseProductCount(orderRow) {
+      if (orderRow.product_count > 0) {
+        orderRow.product_count -= 1;
+      }
+    }
   }
+};
 </script>

app/javascript/components/UserInput.vue

@@ -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>

app/javascript/components/activity/ProductTotals.vue

@@ -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>