12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879 |
- <template lang="pug">
- .pos-step
- .customer-selection-step
- .customer-selector
- searcher(
- mode='normal'
- :items='customers'
- :keys="['name', 'phone', 'mobile', 'email']"
- @onSearch='filterCustomers'
- )
- card-grid(
- :canAdd='isWired'
- :items='visibleCustomers'
- :loading='loadingCustomers'
- @onAdd='showCustomerForm'
- @onSelect='selectCustomer'
- )
- customer-modal(
- :show='showingCustomerForm'
- @onAccept='submitCustomer'
- @onCancel='hideCustomerForm'
- )
- transition(name='slide-fade')
- customer-form(
- type='small'
- mode='details'
- v-if='!!selectedCustomer'
- :customer='selectedCustomer'
- )
- </template>
- <script>
- import { mapGetters, mapActions } from 'vuex'
- import { Searcher, CardGrid } from '../common'
- import CustomerModal from '../modals/CustomerModal'
- import CustomerForm from '../forms/CustomerForm'
- export default {
- components: {
- Searcher,
- CardGrid,
- CustomerModal,
- CustomerForm
- },
- computed: mapGetters([
- 'customers',
- 'visibleCustomers',
- 'loadingCustomers',
- 'showingCustomerForm',
- 'selectedCustomer',
- 'isWired'
- ]),
- methods: mapActions([
- 'filterCustomers',
- 'showCustomerForm',
- 'showCustomerForm',
- 'submitCustomer',
- 'hideCustomerForm',
- 'selectCustomer'
- ])
- }
- </script>
- <style lang="sass">
- .pos-step
- .customer-selection-step
- width: 100%
- height: 100%
- display: flex
- .customer-selector
- width: 100%
- height: 100%
- .slide-fade-enter-active
- transition: all 300ms ease
- .slide-fade-enter
- transform: translateX(300px)
- opacity: 0
- </style>
|