feat(order): Add material ripple effect to item list #82

src/components/customer/ContactItem.vue

@@ -4,7 +4,7 @@
       <q-item
         v-ripple
         clickable
-        @click="$router.push({name: $options.routes.customerDetails, params: { id: value.id }})"
+        @click="handleClick"
       >
         <q-item-section avatar>
           <q-avatar
@@ -29,6 +29,7 @@
 </template>
 
 <script>
+import { debounce } from 'quasar'
 import { RouteNames } from 'src/constants/app'
 export default {
   name: 'HContactItem',
@@ -57,6 +58,11 @@ export default {
       } else return `${this.value.name1} ${this.value.lastName1}`
     }
   },
+  methods: {
+    handleClick: debounce(function (evt) {
+      this.$router.push({ name: this.$options.routes.customerDetails, params: { id: this.value.id } })
+    }, 200)
+  },
   routes: {
     customerDetails: RouteNames.CUSTOMER_DETAILS
   }

src/components/order/ListItem.vue

@@ -1,6 +1,7 @@
 <template>
   <div>
     <q-item
+      v-ripple
       v-touch-hold.mouse="handleHold"
       clickable
       :active="isActive"
@@ -53,7 +54,7 @@
 </template>
 
 <script>
-import { date } from 'quasar'
+import { date, debounce } from 'quasar'
 import { createNamespacedHelpers } from 'vuex'
 import { OrderComponentMixin } from './common'
 import { RouteNames } from 'src/constants/app'
@@ -118,7 +119,7 @@ export default {
     handleHold ({ evt, ...info }) {
       // this.$refs.selectionEl.toggle() // SELECTION DISABLED (#28)
     },
-    handleClick (evt) {
+    handleClick: debounce(function (evt) {
       if (this.selectedOrders.length > 0) {
         this.$refs.selectionEl.toggle()
       } else {
@@ -127,7 +128,7 @@ export default {
           params: { id: this.value.id }
         })
       }
-    },
+    }, 200),
     ...mapActions(['changeSelectedOrders', 'changeActiveToolbar'])
   }
 }