]> BookStack Code Mirror - bookstack/blob - resources/js/components/attachments.js
Finished breakdown of attachment vue into components
[bookstack] / resources / js / components / attachments.js
1 /**
2  * Attachments
3  * @extends {Component}
4  */
5 import {showLoading} from "../services/dom";
6
7 class Attachments {
8
9     setup() {
10         this.container = this.$el;
11         this.pageId = this.$opts.pageId;
12         this.editContainer = this.$refs.editContainer;
13         this.listContainer = this.$refs.listContainer;
14         this.mainTabs = this.$refs.mainTabs;
15         this.list = this.$refs.list;
16
17         this.setupListeners();
18     }
19
20     setupListeners() {
21         const reloadListBound = this.reloadList.bind(this);
22         this.container.addEventListener('dropzone-success', reloadListBound);
23         this.container.addEventListener('ajax-form-success', reloadListBound);
24
25         this.container.addEventListener('sortable-list-sort', event => {
26             this.updateOrder(event.detail.ids);
27         });
28
29         this.container.addEventListener('event-emit-select-edit', event => {
30             this.startEdit(event.detail.id);
31         });
32
33         this.container.addEventListener('event-emit-select-edit-back', event => {
34             this.stopEdit();
35         });
36     }
37
38     reloadList() {
39         this.stopEdit();
40         this.mainTabs.components.tabs.show('items');
41         window.$http.get(`/attachments/get/page/${this.pageId}`).then(resp => {
42             this.list.innerHTML = resp.data;
43             window.components.init(this.list);
44         });
45     }
46
47     updateOrder(idOrder) {
48         window.$http.put(`/attachments/sort/page/${this.pageId}`, {order: idOrder}).then(resp => {
49             window.$events.emit('success', resp.data.message);
50         });
51     }
52
53     async startEdit(id) {
54         this.editContainer.classList.remove('hidden');
55         this.listContainer.classList.add('hidden');
56
57         showLoading(this.editContainer);
58         const resp = await window.$http.get(`/attachments/edit/${id}`);
59         this.editContainer.innerHTML = resp.data;
60         window.components.init(this.editContainer);
61     }
62
63     stopEdit() {
64         this.editContainer.classList.add('hidden');
65         this.listContainer.classList.remove('hidden');
66     }
67
68 }
69
70 export default Attachments;