cms/resources/js/interfaces/FileManager/Modals/MoveFileModal.vue at 2baa3dc61d56230dbb14a61d3006438e4fd9d5df · fusioncms/cms · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<template>
    <ui-modal name="move-file" title="Move file(s) to directory">
        <div v-if="loading">Loading ...</div>

        <ui-treeview v-else :nodes="directories" v-model="directory">
            <i class="fas fa-folder-open"></i>

            <template v-slot:prepend="{ node, open }">
                <fa-icon v-if="open && node" :icon="['fas', 'folder-open']" class="mr-2" :class="{'fill-current text-info-500': node.isCurrent}"></fa-icon>
                <fa-icon v-else-if="node" :icon="['fas', 'folder']" class="mr-2" :class="{'fill-current text-info-500': node.isCurrent}"></fa-icon>
            </template>
        </ui-treeview>

        <template v-slot:footer>
            <ui-button v-modal:move-file>Close</ui-button>
            <ui-button variant="primary" @click="submit" v-modal:move-file class="mr-1">Move</ui-button>
        </template>
    </ui-modal>
</template>

<script>
    import { mapActions, mapGetters } from 'vuex'

    export default {
        name: 'move-file-modal',

        data() {
            return {
                loading: false,
                isOpen: false,
                directory: null,
                directories: []
            }
        },

        watch: {
            isOpen(value) {
                if (value) {
                    this.gatherOptions()
                }
            },
        },

        computed: {
            ...mapGetters({
                disk:                'filemanager/getDisk',
                selectedDirectories: 'filemanager/getSelectedDirectories',
                currentDirectory:    'filemanager/getCurrentDirectory',
                selectedFiles:       'filemanager/getSelectedFiles',
            })
        },

        methods: {
            ...mapActions({
                clearDirectorySelection: 'filemanager/clearDirectorySelection',
                moveFileToDirectory:     'filemanager/moveFileToDirectory',
                clearFileSelection:      'filemanager/clearFileSelection',
            }),

            submit() {
                if (this.directory) {
                    if (this.directory.id == this.currentDirectory) {
                        toast('Cannot move files to same location.', 'warning')
                    } else {
                        this.moveFileToDirectory({
                            directory: this.directory.id,
                            moving: {
                                files: this.selectedFiles,
                                directories: this.selectedDirectories
                            }
                        })
                    }

                    this.clearSelection()
                } else {
                    toast('No directory selected.', 'failed')
                }
            },

            clearSelection() {
                this.clearFileSelection()
                this.clearDirectorySelection()

                this.directory = null
            },

            recursiveMap(items) {
                return _.map(items, (item) => {
                    return {
                        id:        item.id,
                        name:      item.name,
                        isFolder:  true,
                        isCurrent: this.currentDirectory === item.id,
                        children:  this.recursiveMap(item.children)
                    }
                })
            },

            gatherOptions() {
                this.loading = true
                axios.get(`/api/directories/${this.disk.id}?recursive=true`).then(({data}) => {
                    this.loading = false
                    this.directories = [{
                        id:        '0',
                        name:      'Root',
                        isFolder:  true,
                        isCurrent: this.currentDirectory === 0,
                        children:  this.recursiveMap(data.data)
                    }]
                }).catch((error) => {
                    this.loading = false
                })
            }
        },

        created() {
            bus().$on('modal-opened', (name) => {
                if (name == 'move-file') { this.isOpen = true }
            })
            bus().$on('modal-closed', (name) => {
                if (name == 'move-file') { this.isOpen = false }
            })
        }
    }
</script>