Customer.vue 2.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. <template lang="pug">
  2. .pos-step
  3. .customer-selection-step
  4. .customer-selector
  5. searcher(
  6. mode='normal'
  7. :items='customers'
  8. :keys="['name', 'phone', 'mobile', 'email']"
  9. @onSearch='filterCustomers'
  10. )
  11. card-grid(
  12. :canAdd='isWired'
  13. :items='visibleCustomers'
  14. :loading='loadingCustomers'
  15. @onAdd='showCustomerForm'
  16. @onSelect='selectCustomer'
  17. )
  18. customer-modal(
  19. :show='showingCustomerForm'
  20. @onAccept='submitCustomer'
  21. @onCancel='hideCustomerForm'
  22. )
  23. transition(name='slide-fade')
  24. customer-form(
  25. type='small'
  26. mode='details'
  27. v-if='!!selectedCustomer'
  28. :customer='selectedCustomer'
  29. )
  30. </template>
  31. <script>
  32. import { mapGetters, mapActions } from 'vuex'
  33. import { Searcher, CardGrid } from '../common'
  34. import CustomerModal from '../modals/CustomerModal'
  35. import CustomerForm from '../forms/CustomerForm'
  36. export default {
  37. components: {
  38. Searcher,
  39. CardGrid,
  40. CustomerModal,
  41. CustomerForm
  42. },
  43. computed: mapGetters([
  44. 'customers',
  45. 'visibleCustomers',
  46. 'loadingCustomers',
  47. 'showingCustomerForm',
  48. 'selectedCustomer',
  49. 'isWired'
  50. ]),
  51. methods: mapActions([
  52. 'filterCustomers',
  53. 'showCustomerForm',
  54. 'showCustomerForm',
  55. 'submitCustomer',
  56. 'hideCustomerForm',
  57. 'selectCustomer'
  58. ])
  59. }
  60. </script>
  61. <style lang="sass">
  62. .pos-step
  63. .customer-selection-step
  64. width: 100%
  65. height: 100%
  66. display: flex
  67. .customer-selector
  68. width: 100%
  69. height: 100%
  70. .slide-fade-enter-active
  71. transition: all 300ms ease
  72. .slide-fade-enter
  73. transform: translateX(300px)
  74. opacity: 0
  75. </style>