Faris Ansari | f089dad | 2018-08-26 22:20:16 +0530 | [diff] [blame] | 1 | <template> |
| 2 | <div ref="sidebar-container"> |
| 3 | <ul class="list-unstyled hub-sidebar-group" data-nav-buttons> |
| 4 | <li class="hub-sidebar-item" v-for="item in items" :key="item.label" v-route="item.route" v-show="item.condition === undefined || item.condition()"> |
| 5 | {{ item.label }} |
| 6 | </li> |
| 7 | </ul> |
| 8 | <ul class="list-unstyled hub-sidebar-group" data-categories> |
Faris Ansari | 725603c | 2018-08-27 19:51:36 +0530 | [diff] [blame] | 9 | <li class="hub-sidebar-item is-title bold text-muted"> |
| 10 | {{ __('Categories') }} |
| 11 | </li> |
Faris Ansari | f089dad | 2018-08-26 22:20:16 +0530 | [diff] [blame] | 12 | <li class="hub-sidebar-item" v-for="category in categories" :key="category.label" v-route="category.route"> |
| 13 | {{ category.label }} |
| 14 | </li> |
| 15 | </ul> |
| 16 | </div> |
| 17 | </template> |
| 18 | <script> |
| 19 | export default { |
| 20 | data() { |
| 21 | return { |
| 22 | items: [ |
| 23 | { |
| 24 | label: __('Browse'), |
| 25 | route: 'marketplace/home' |
| 26 | }, |
| 27 | { |
| 28 | label: __('Become a Seller'), |
| 29 | action: this.show_register_dialog, |
| 30 | condition: () => !hub.settings.registered |
| 31 | }, |
| 32 | { |
| 33 | label: __('Saved Products'), |
| 34 | route: 'marketplace/saved-products', |
| 35 | condition: () => hub.settings.registered |
| 36 | }, |
| 37 | { |
| 38 | label: __('Your Profile'), |
| 39 | route: 'marketplace/profile', |
| 40 | condition: () => hub.settings.registered |
| 41 | }, |
| 42 | { |
| 43 | label: __('Your Products'), |
| 44 | route: 'marketplace/my-products', |
| 45 | condition: () => hub.settings.registered |
| 46 | }, |
| 47 | { |
| 48 | label: __('Publish Products'), |
| 49 | route: 'marketplace/publish', |
| 50 | condition: () => hub.settings.registered |
| 51 | }, |
| 52 | { |
| 53 | label: __('Selling'), |
| 54 | route: 'marketplace/selling', |
| 55 | condition: () => hub.settings.registered |
| 56 | }, |
| 57 | { |
| 58 | label: __('Buying'), |
| 59 | route: 'marketplace/buying', |
| 60 | condition: () => hub.settings.registered |
| 61 | }, |
| 62 | ], |
| 63 | categories: [] |
| 64 | } |
| 65 | }, |
| 66 | created() { |
| 67 | this.get_categories() |
| 68 | .then(categories => { |
| 69 | this.categories = categories.map(c => { |
| 70 | return { |
| 71 | label: __(c.name), |
| 72 | route: 'marketplace/category/' + c.name |
| 73 | } |
| 74 | }); |
| 75 | this.categories.unshift({ |
| 76 | label: __('All'), |
| 77 | route: 'marketplace/home' |
| 78 | }); |
| 79 | this.$nextTick(() => { |
| 80 | this.update_sidebar_state(); |
| 81 | }); |
| 82 | }); |
| 83 | }, |
| 84 | mounted() { |
| 85 | this.update_sidebar_state(); |
| 86 | frappe.route.on('change', () => this.update_sidebar_state()); |
| 87 | }, |
| 88 | methods: { |
| 89 | get_categories() { |
| 90 | return hub.call('get_categories'); |
| 91 | }, |
| 92 | update_sidebar_state() { |
| 93 | const container = $(this.$refs['sidebar-container']); |
| 94 | const route = frappe.get_route(); |
| 95 | const route_str = route.join('/'); |
| 96 | const part_route_str = route.slice(0, 2).join('/'); |
| 97 | const $sidebar_item = container.find(`[data-route="${route_str}"], [data-route="${part_route_str}"]`); |
| 98 | |
| 99 | const $siblings = container.find('[data-route]'); |
| 100 | $siblings.removeClass('active').addClass('text-muted'); |
| 101 | $sidebar_item.addClass('active').removeClass('text-muted'); |
| 102 | } |
| 103 | } |
| 104 | } |
| 105 | </script> |