|
@@ -1,22 +1,59 @@
|
|
<template lang="pug">
|
|
<template lang="pug">
|
|
.pos-step
|
|
.pos-step
|
|
- customer-searcher
|
|
|
|
- customers-grid
|
|
|
|
|
|
+ .customers-step
|
|
|
|
+ .customers-left
|
|
|
|
+ customer-searcher
|
|
|
|
+ customers-grid
|
|
|
|
+ transition(name="slide-fade")
|
|
|
|
+ .customers-right(v-if="hasSelectedCustomer")
|
|
|
|
+ customer-details
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
|
|
+ import { mapGetters } from 'vuex'
|
|
|
|
+
|
|
import CustomerSearcher from '@/components/customer/CustomerSearcher'
|
|
import CustomerSearcher from '@/components/customer/CustomerSearcher'
|
|
import CustomersGrid from '@/components/customer/CustomersGrid'
|
|
import CustomersGrid from '@/components/customer/CustomersGrid'
|
|
|
|
+ import CustomerDetails from '@/components/customer/CustomerDetails'
|
|
|
|
|
|
export default {
|
|
export default {
|
|
components: {
|
|
components: {
|
|
CustomerSearcher,
|
|
CustomerSearcher,
|
|
- CustomersGrid
|
|
|
|
- }
|
|
|
|
|
|
+ CustomersGrid,
|
|
|
|
+ CustomerDetails
|
|
|
|
+ },
|
|
|
|
+ computed: mapGetters([
|
|
|
|
+ 'hasSelectedCustomer'
|
|
|
|
+ ])
|
|
}
|
|
}
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<style lang="sass">
|
|
<style lang="sass">
|
|
|
|
+ .pos-step
|
|
|
|
+ .customers-step
|
|
|
|
+ width: 100%
|
|
|
|
+ height: 100%
|
|
|
|
+ display: flex
|
|
|
|
+
|
|
|
|
+ .customers-left, .customers-right
|
|
|
|
+ height: 100%
|
|
|
|
+
|
|
|
|
+ .customers-left
|
|
|
|
+ width: 100%
|
|
|
|
+
|
|
|
|
+ .customers-right
|
|
|
|
+ width: 360px
|
|
|
|
+ margin: 0 15px
|
|
|
|
+
|
|
|
|
+ .slide-fade-enter-active
|
|
|
|
+ transition: all .3s ease;
|
|
|
|
+
|
|
|
|
+ .slide-fade-leave-active
|
|
|
|
+ transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0)
|
|
|
|
+
|
|
|
|
+ .slide-fade-enter, .slide-fade-leave-to
|
|
|
|
+ transform: translateX(10px)
|
|
|
|
+ opacity: 0
|
|
</style>
|
|
</style>
|
|
|
|
|
|
|
|
|