https://www.aptsolutions.net/vendor/APT/Assets/public/js/views/content/index.js

1Vue.component('treeview',  {
2
3    template: '<li class="sidebar__item" v-for="(index, node) in nodes" v-bind:class="{\'sidebar__item--active\': node.node_id == active }"><a v-if="node | isActive" href="{{ node | link }}">{{ node.name }}</a><span v-if="node.children.length" class="pull-right" @click="toggle(index, $event)"><i class="fa" :class="{\'fa-chevron-right\': !node.open, \'fa-chevron-down\': node.open }"></i></span><ul class="sidebar" v-show="node.open" v-if="node.children.length"><treeview :nodes.sync="node.children" :active="active"></treeview></ul></li>',
4
5    props: {
6        nodes: {
7            type: Array,
8            required: true
9        },
10        active: {
11            type: String,
12            required: true
13        },
14        order: {
15            type: String,
16            default: 'weight'
17        },
18        sort: {
19            type: Number,
20            default: 1
21        }
22    },
23
24    filters: {
25        isActive: function (node) {
26            if (node.node_id == this.active) {
27                this.position(node.node_id);
28            }
29            return true;
30        },
31        link: function (node) {
32            return _.isEmpty(node.externalLink) ? '/' + node.slug : node.externalLink;
33        }
34    },
35
36    events: {
37        'parent': function (id) {
38            this.position(id);
39        }
40    },
41
42    methods: {
43
44        toggle: function (index, evt) {
45            this.nodes[index]['open'] = !this.nodes[index]['open'];
46        },
47        position: function (id) {
48            var index = _.findIndex(this.nodes, ['node_id', id]);
49            if (index !== -1) {
50                this.nodes[index].open = true;
51                this.$dispatch('parent', this.nodes[index].parent_id);
52            }
53        }
54    }
55});
56
57new Vue({
58
59    el: '#app',
60
61    data: {
62        content: [],
63        callout: [],
64        descendants: [],
65        node: {},
66    },
67
68    created: function () {
69        this.$set('node', _.omit(contents,['contents']));
70        this.$set('content', contents.contents);
71        delete contents;
72        this.fetchData();
73    },
74
75    methods: {
76
77        fetchData: function () {
78
79            var url = ['/api/pages/descendants', this.node.breadcrumb.split('[>]')[2]];
80
81            this.$http.get(url.join('/'))
82                .then(
83                function (response) {
84                    this.$set('descendants', response.data[0]);
85                    if (this.descendants.children === undefined) {
86                        $('.well').parent().siblings('.col-md-8').removeClass('col-md-8').addClass('col-md-12');
87                    } else {
88                        $('.well').show();
89                    }
90                }
91            );
92
93            var callout_links = this.content.calloutLinks.data;
94
95            if (! _.isEmpty(callout_links)) {
96                this.$http.get('/api/pages/nodes', {nodes: JSON.parse(callout_links) })
97                    .then(
98                    function (response) {
99                        this.$set('callout', response.data);
100                    }
101                );
102            }
103
104        }
105    }
106})