123 lines
3.0 KiB
Vue
123 lines
3.0 KiB
Vue
<template>
|
|
<div class="explorer flex flex--column">
|
|
<div class="side-title">
|
|
<button class="side-title__button side-title__button--right button" @click="toggleExplorer(false)">
|
|
<icon-close></icon-close>
|
|
</button>
|
|
<button class="side-title__button button" @click="newItem()">
|
|
<icon-file-plus></icon-file-plus>
|
|
</button>
|
|
<button class="side-title__button button" @click="newItem(true)">
|
|
<icon-folder-plus></icon-folder-plus>
|
|
</button>
|
|
<button class="side-title__button button" @click="editItem()">
|
|
<icon-pen></icon-pen>
|
|
</button>
|
|
<button class="side-title__button button" @click="deleteItem()">
|
|
<icon-delete></icon-delete>
|
|
</button>
|
|
</div>
|
|
<div class="explorer__tree" :class="{'explorer__tree--new-item': !newChildNode.isNil}" tabindex="0">
|
|
<explorer-node :node="rootNode" :depth="0"></explorer-node>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapState, mapGetters, mapMutations } from 'vuex';
|
|
import ExplorerNode from './ExplorerNode';
|
|
import emptyFile from '../data/emptyFile';
|
|
import emptyFolder from '../data/emptyFolder';
|
|
|
|
export default {
|
|
components: {
|
|
ExplorerNode,
|
|
},
|
|
computed: {
|
|
...mapState('explorer', [
|
|
'newChildNode',
|
|
]),
|
|
...mapGetters('explorer', [
|
|
'rootNode',
|
|
]),
|
|
},
|
|
methods: {
|
|
...mapMutations('explorer', [
|
|
'setSelectedId',
|
|
]),
|
|
...mapMutations('layout', [
|
|
'toggleExplorer',
|
|
]),
|
|
newItem(isFolder) {
|
|
const parentId = this.$store.getters['explorer/selectedNodeFolder'].item.id;
|
|
this.$store.dispatch('explorer/openNode', parentId);
|
|
this.$store.commit('explorer/setNewItem', {
|
|
...isFolder ? emptyFolder() : emptyFile(),
|
|
parentId,
|
|
});
|
|
},
|
|
editItem() {
|
|
const selectNode = this.$store.getters['explorer/selectedNode'];
|
|
this.$store.commit('explorer/setEditingId', selectNode.item.id);
|
|
},
|
|
deleteItem() {
|
|
// const selectNode = this.$store.getters['explorer/selectedNode'];
|
|
// switch (this.node.item.type) {
|
|
// case 'file':
|
|
// default:
|
|
// this.$store.commit('files/setCurrentId', id);
|
|
// break;
|
|
// case 'folder':
|
|
// this.$store.commit('explorer/toggleOpenNode', id);
|
|
// break;
|
|
// }
|
|
},
|
|
},
|
|
created() {
|
|
this.$store.watch(
|
|
() => this.$store.getters['files/current'].id,
|
|
(currentFileId) => {
|
|
this.setSelectedId(currentFileId);
|
|
}, {
|
|
immediate: true,
|
|
});
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.explorer,
|
|
.explorer__tree {
|
|
height: 100%;
|
|
}
|
|
|
|
.side-title {
|
|
height: 44px;
|
|
line-height: 44px;
|
|
padding: 4px 8px 0;
|
|
background-color: rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.side-title__button {
|
|
width: 36px;
|
|
padding: 6px;
|
|
display: inline-block;
|
|
background-color: transparent;
|
|
opacity: 0.75;
|
|
|
|
/* prevent from seeing wrapped buttons */
|
|
margin-bottom: 20px;
|
|
|
|
&:active,
|
|
&:focus,
|
|
&:hover {
|
|
opacity: 1;
|
|
background-color: rgba(0, 0, 0, 0.1);
|
|
}
|
|
}
|
|
|
|
.side-title__button--right {
|
|
float: right;
|
|
}
|
|
</style>
|