64 lines
1.8 KiB
JavaScript
64 lines
1.8 KiB
JavaScript
/* eslint-disable no-unused-vars */
|
|
|
|
import Vue from 'vue';
|
|
import GroupFilterableList from './groups_filterable_list';
|
|
import GroupsComponent from './components/groups.vue';
|
|
import GroupFolder from './components/group_folder.vue';
|
|
import GroupItem from './components/group_item.vue';
|
|
import GroupsStore from './stores/groups_store';
|
|
import GroupsService from './services/groups_service';
|
|
import eventHub from './event_hub';
|
|
|
|
$(() => {
|
|
const appEl = document.querySelector('#dashboard-group-app');
|
|
const form = document.querySelector('form#group-filter-form');
|
|
const filter = document.querySelector('.js-groups-list-filter');
|
|
const holder = document.querySelector('.js-groups-list-holder');
|
|
|
|
const store = new GroupsStore();
|
|
const service = new GroupsService(appEl.dataset.endpoint);
|
|
|
|
Vue.component('groups-component', GroupsComponent);
|
|
Vue.component('group-folder', GroupFolder);
|
|
Vue.component('group-item', GroupItem);
|
|
|
|
const GroupsApp = new Vue({
|
|
el: appEl,
|
|
data() {
|
|
return {
|
|
store,
|
|
state: store.state,
|
|
};
|
|
},
|
|
methods: {
|
|
fetchGroups(parentGroup) {
|
|
let parentId = null;
|
|
|
|
if (parentGroup) {
|
|
parentId = parentGroup.id;
|
|
}
|
|
|
|
service.getGroups(parentId)
|
|
.then((response) => {
|
|
store.setGroups(response.json(), parentGroup);
|
|
})
|
|
.catch(() => {
|
|
// TODO: Handler error
|
|
});
|
|
},
|
|
toggleSubGroups(parentGroup = null) {
|
|
GroupsStore.toggleSubGroups(parentGroup);
|
|
this.fetchGroups(parentGroup);
|
|
},
|
|
},
|
|
created() {
|
|
const groupFilterList = new GroupFilterableList(form, filter, holder, store);
|
|
groupFilterList.initSearch();
|
|
|
|
this.fetchGroups();
|
|
|
|
eventHub.$on('toggleSubGroups', this.toggleSubGroups);
|
|
},
|
|
});
|
|
});
|