Improve file deletion logic to not require a refresh
This commit is contained in:
Dane Everitt
parent
6b4bf3eaa7
commit
66320972be
4 changed files with 37 additions and 41 deletions
|
|
@ -79,8 +79,7 @@
|
|||
},
|
||||
|
||||
openDeleteModal: function () {
|
||||
window.events.$emit('server:files:delete', this.object);
|
||||
this.$emit('close');
|
||||
this.$emit('action:delete', this.object);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -12,11 +12,13 @@
|
|||
</div>
|
||||
<FileContextMenu
|
||||
class="context-menu"
|
||||
v-bind:object="file"
|
||||
:object="file"
|
||||
v-show="contextMenuVisible"
|
||||
v-on:close="contextMenuVisible = false"
|
||||
v-on:action:delete="showDeleteFileModal"
|
||||
ref="contextMenu"
|
||||
/>
|
||||
<DeleteFileModal :visible.sync="deleteModalVisible" :object="file" v-on:deleted="$emit('deleted')" v-on:close="deleteModalVisible = false"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -27,10 +29,11 @@
|
|||
import {formatDate, readableSize} from '../../../../helpers'
|
||||
import FileContextMenu from "./FileContextMenu.vue";
|
||||
import {DirectoryContentObject} from "@/api/server/types";
|
||||
import DeleteFileModal from "@/components/server/components/filemanager/modals/DeleteFileModal.vue";
|
||||
|
||||
export default Vue.extend({
|
||||
name: 'FileRow',
|
||||
components: {Icon, FileContextMenu},
|
||||
components: {DeleteFileModal, Icon, FileContextMenu},
|
||||
|
||||
props: {
|
||||
file: {
|
||||
|
|
@ -46,6 +49,7 @@
|
|||
data: function () {
|
||||
return {
|
||||
contextMenuVisible: false,
|
||||
deleteModalVisible: false,
|
||||
};
|
||||
},
|
||||
|
||||
|
|
@ -67,6 +71,11 @@
|
|||
},
|
||||
|
||||
methods: {
|
||||
showDeleteFileModal: function () {
|
||||
this.contextMenuVisible = false;
|
||||
this.deleteModalVisible = true;
|
||||
},
|
||||
|
||||
/**
|
||||
* Handle a right-click action on a file manager row.
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -13,7 +13,10 @@
|
|||
</p>
|
||||
<div class="mt-8 text-right">
|
||||
<button class="btn btn-secondary btn-sm" v-on:click.prevent="visible = false">Cancel</button>
|
||||
<button class="btn btn-red btn-sm ml-2" v-on:click="deleteItem">Yes, Delete</button>
|
||||
<button class="btn btn-red btn-sm ml-2" v-on:click="deleteItem" :disabled="isLoading">
|
||||
<span v-if="isLoading" class="spinner white"> </span>
|
||||
<span v-else>Yes, Delete</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
|
|
@ -30,8 +33,6 @@
|
|||
|
||||
type DataStructure = {
|
||||
isLoading: boolean,
|
||||
object: null | DirectoryContentObject,
|
||||
visible: boolean,
|
||||
error: string | null,
|
||||
};
|
||||
|
||||
|
|
@ -39,11 +40,20 @@
|
|||
name: 'DeleteFileModal',
|
||||
components: {Modal},
|
||||
|
||||
props: {
|
||||
visible: { type: Boolean, default: false },
|
||||
object: { type: Object as () => DirectoryContentObject, required: true }
|
||||
},
|
||||
|
||||
watch: {
|
||||
visible: function (value: boolean) {
|
||||
this.$emit('update:visible', value);
|
||||
},
|
||||
},
|
||||
|
||||
data: function (): DataStructure {
|
||||
return {
|
||||
isLoading: false,
|
||||
visible: false,
|
||||
object: null,
|
||||
error: null,
|
||||
};
|
||||
},
|
||||
|
|
@ -52,45 +62,20 @@
|
|||
...mapState('server', ['fm', 'server', 'credentials']),
|
||||
},
|
||||
|
||||
mounted: function () {
|
||||
window.events.$on('server:files:delete', (object: DirectoryContentObject) => {
|
||||
this.visible = true;
|
||||
this.object = object;
|
||||
});
|
||||
},
|
||||
|
||||
beforeDestroy: function () {
|
||||
window.events.$off('server:files:delete');
|
||||
},
|
||||
|
||||
methods: {
|
||||
deleteItem: function () {
|
||||
if (!this.object) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.isLoading = true;
|
||||
|
||||
deleteElement(this.server.uuid, this.credentials, [
|
||||
join(this.fm.currentDirectory, this.object.name)
|
||||
])
|
||||
.then(() => {
|
||||
this.$emit('close');
|
||||
this.closeModal();
|
||||
})
|
||||
.then(() => this.$emit('deleted'))
|
||||
.catch((error: AxiosError) => {
|
||||
this.error = `There was an error deleting the requested ${(this.object && this.object.directory) ? 'folder' : 'file'}. Response was: ${error.message}`;
|
||||
console.error('Error at Server::Files::Delete', { error });
|
||||
this.error = `There was an error deleting the requested ${(this.object.directory) ? 'folder' : 'file'}. Response was: ${error.message}`;
|
||||
console.error('Error at Server::Files::Delete', {error});
|
||||
})
|
||||
.then(() => this.isLoading = false);
|
||||
},
|
||||
|
||||
closeModal: function () {
|
||||
this.object = null;
|
||||
this.isLoading = false;
|
||||
this.visible = false;
|
||||
this.error = null;
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -32,10 +32,10 @@
|
|||
<div class="flex-none w-1/6">Actions</div>
|
||||
</div>
|
||||
<div v-for="directory in directories">
|
||||
<FolderRow :directory="directory"/>
|
||||
<FolderRow :directory="directory" :key="directory.name"/>
|
||||
</div>
|
||||
<div v-for="file in files">
|
||||
<FileRow :file="file" :editable="editableFiles"/>
|
||||
<FileRow :file="file" :editable="editableFiles" v-on:deleted="fileRowDeleted(file)" :key="file.name"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -50,7 +50,6 @@
|
|||
</div>
|
||||
<CreateFolderModal v-on:close="listDirectory"/>
|
||||
<RenameModal/>
|
||||
<DeleteFileModal v-on:close="listDirectory"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -179,7 +178,11 @@
|
|||
|
||||
openNewFolderModal: function () {
|
||||
window.events.$emit('server:files:open-directory-modal');
|
||||
}
|
||||
},
|
||||
|
||||
fileRowDeleted: function (file: DirectoryContentObject) {
|
||||
this.files = this.files.filter(data => data !== file);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in a new issue