Add minimum code needed to open new file modal
This commit is contained in:
parent
d280a91115
commit
2c73991f2b
3 changed files with 57 additions and 3 deletions
|
@ -27,7 +27,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="context-row">
|
||||
<div class="context-row" v-on:click="openNewFileModal">
|
||||
<div class="icon">
|
||||
<Icon name="file-plus" class="h-4"/>
|
||||
</div>
|
||||
|
@ -73,6 +73,11 @@
|
|||
this.$emit('close');
|
||||
},
|
||||
|
||||
openNewFileModal: function () {
|
||||
window.events.$emit('server:files:open-new-file-modal');
|
||||
this.$emit('close');
|
||||
},
|
||||
|
||||
triggerAction: function (action: string) {
|
||||
this.$emit(`action:${action}`);
|
||||
}
|
||||
|
|
|
@ -0,0 +1,43 @@
|
|||
<template>
|
||||
<Modal :show="isVisible" v-on:close="isVisible = false" :dismissable="!isLoading">
|
||||
<MessageBox class="alert error mb-8" title="Error" :message="error" v-if="error"/>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
import MessageBox from "@/components/MessageBox.vue";
|
||||
import Modal from "@/components/core/Modal.vue";
|
||||
import {ApplicationState} from '@/store/types';
|
||||
import {mapState} from "vuex";
|
||||
|
||||
export default Vue.extend({
|
||||
name: 'NewFileModal',
|
||||
|
||||
components: {MessageBox, Modal},
|
||||
|
||||
data: function (): { error: string | null, isVisible: boolean, isLoading: boolean } {
|
||||
return {
|
||||
error: null,
|
||||
isVisible: false,
|
||||
isLoading: false,
|
||||
};
|
||||
},
|
||||
|
||||
computed: mapState({
|
||||
fm: (state: ApplicationState) => state.server.fm,
|
||||
}),
|
||||
|
||||
mounted: function () {
|
||||
window.events.$on('server:files:open-new-file-modal', () => {
|
||||
this.isVisible = true;
|
||||
});
|
||||
},
|
||||
|
||||
methods: {
|
||||
submit: function () {
|
||||
|
||||
},
|
||||
}
|
||||
})
|
||||
</script>
|
|
@ -48,10 +48,11 @@
|
|||
<a href="#" class="block btn btn-secondary btn-sm" v-on:click.prevent="openNewFolderModal">New Folder</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="#" class="block btn btn-primary btn-sm">New File</a>
|
||||
<a href="#" class="block btn btn-primary btn-sm" v-on:click.prevent="openNewFileModal">New File</a>
|
||||
</div>
|
||||
</div>
|
||||
<CreateFolderModal v-on:created="directoryCreated"/>
|
||||
<NewFileModal/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
@ -64,6 +65,7 @@
|
|||
import CreateFolderModal from '../components/filemanager/modals/CreateFolderModal.vue';
|
||||
import DeleteFileModal from '../components/filemanager/modals/DeleteFileModal.vue';
|
||||
import {DirectoryContentObject} from "@/api/server/types";
|
||||
import NewFileModal from "@/components/server/components/filemanager/modals/NewFileModal.vue";
|
||||
|
||||
type DataStructure = {
|
||||
loading: boolean,
|
||||
|
@ -76,7 +78,7 @@
|
|||
|
||||
export default Vue.extend({
|
||||
name: 'FileManager',
|
||||
components: {CreateFolderModal, DeleteFileModal, FileRow},
|
||||
components: {CreateFolderModal, DeleteFileModal, FileRow, NewFileModal},
|
||||
|
||||
computed: {
|
||||
/**
|
||||
|
@ -178,6 +180,10 @@
|
|||
window.events.$emit('server:files:open-directory-modal');
|
||||
},
|
||||
|
||||
openNewFileModal: function () {
|
||||
window.events.$emit('server:files:open-new-file-modal');
|
||||
},
|
||||
|
||||
fileRowDeleted: function (file: DirectoryContentObject, directory: boolean) {
|
||||
if (directory) {
|
||||
this.directories = this.directories.filter(data => data !== file);
|
||||
|
|
Loading…
Reference in a new issue