Skip to content

Commit 3970a24

Browse files
DaneEverittDaneEveritt
committed
Migrate the rename action to follow better structure
1 parent f3159bc commit 3970a24

File tree

5 files changed

+83
-71
lines changed

5 files changed

+83
-71
lines changed

‎resources/assets/scripts/components/server/components/filemanager/FileContextMenu.vue‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -74,12 +74,11 @@
7474
},
7575
7676
openRenameModal: function () {
77-
window.events.$emit('server:files:rename', this.object);
78-
this.$emit('close');
77+
this.$emit('action:rename');
7978
},
8079
8180
openDeleteModal: function () {
82-
this.$emit('action:delete', this.object);
81+
this.$emit('action:delete');
8382
}
8483
}
8584
});

‎resources/assets/scripts/components/server/components/filemanager/FileRow.vue‎

Lines changed: 23 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -31,10 +31,12 @@
3131
:object="file"
3232
v-show="contextMenuVisible"
3333
v-on:close="contextMenuVisible = false"
34-
v-on:action:delete="showDeleteFileModal"
34+
v-on:action:delete="showModal('delete')"
35+
v-on:action:rename="showModal('rename')"
3536
ref="contextMenu"
3637
/>
37-
<DeleteFileModal :visible.sync="deleteModalVisible" :object="file" v-on:deleted="$emit('deleted')" v-on:close="deleteModalVisible = false"/>
38+
<DeleteFileModal :visible.sync="modals.delete" :object="file" v-on:deleted="$emit('deleted')" v-on:close="modal.delete = false"/>
39+
<RenameModal :visible.sync="modals.rename" :object="file" v-on:renamed="$emit('renamed')" v-on:close="modal.rename = false"/>
3840
</div>
3941
</template>
4042

@@ -46,10 +48,17 @@
4648
import FileContextMenu from "./FileContextMenu.vue";
4749
import {DirectoryContentObject} from "@/api/server/types";
4850
import DeleteFileModal from "@/components/server/components/filemanager/modals/DeleteFileModal.vue";
51+
import RenameModal from "@/components/server/components/filemanager/modals/RenameModal.vue";
52+
53+
type DataStructure = {
54+
currentDirectory: string,
55+
contextMenuVisible: boolean,
56+
modals: { [key: string]: boolean },
57+
};
4958
5059
export default Vue.extend({
5160
name: 'FileRow',
52-
components: {DeleteFileModal, Icon, FileContextMenu},
61+
components: {DeleteFileModal, Icon, FileContextMenu, RenameModal},
5362
5463
props: {
5564
file: {
@@ -63,11 +72,14 @@
6372
},
6473
},
6574
66-
data: function () {
75+
data: function (): DataStructure {
6776
return {
6877
currentDirectory: this.$route.params.path || '/',
6978
contextMenuVisible: false,
70-
deleteModalVisible: false,
79+
modals: {
80+
rename: false,
81+
delete: false,
82+
},
7183
};
7284
},
7385
@@ -89,9 +101,13 @@
89101
},
90102
91103
methods: {
92-
showDeleteFileModal: function () {
104+
showModal: function (name: string) {
105+
console.warn('showModal', name);
93106
this.contextMenuVisible = false;
94-
this.deleteModalVisible = true;
107+
108+
Object.keys(this.modals).forEach(k => {
109+
this.modals[k] = k === name;
110+
});
95111
},
96112
97113
/**

‎resources/assets/scripts/components/server/components/filemanager/modals/DeleteFileModal.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<Modal :show="isVisible" v-on:close="isVisible = false">
2+
<Modal :show="isVisible" v-on:close="isVisible = false" :dismissable="!isLoading">
33
<MessageBox
44
class="alert error mb-8"
55
title="Error"

‎resources/assets/scripts/components/server/components/filemanager/modals/RenameModal.vue‎

Lines changed: 41 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,5 @@
11
<template>
2-
<Modal
3-
:show="visible"
4-
v-on:close="closeModal"
5-
:showCloseIcon="false"
6-
:dismissable="!isLoading"
7-
>
2+
<Modal :show="isVisible" v-on:close="closeModal" :showCloseIcon="false" :dismissable="!isLoading">
83
<MessageBox
94
class="alert error mb-8"
105
title="Error"
@@ -18,6 +13,7 @@
1813
</label>
1914
<input
2015
type="text" class="input" name="element_name"
16+
:placeholder="object.name"
2117
ref="elementNameField"
2218
v-model="newName"
2319
v-validate.disabled="'required'"
@@ -33,7 +29,7 @@
3329
>
3430
<span class="spinner white" v-bind:class="{ hidden: !isLoading }">&nbsp;</span>
3531
<span :class="{ hidden: isLoading }">
36-
Edit
32+
Rename
3733
</span>
3834
</button>
3935
</div>
@@ -53,85 +49,87 @@
5349
import {mapState} from "vuex";
5450
import {renameElement} from "@/api/server/files/renameElement";
5551
import {AxiosError} from 'axios';
52+
import {ApplicationState} from "@/store/types";
5653
5754
type DataStructure = {
58-
object: null | DirectoryContentObject,
5955
error: null | string,
6056
newName: string,
61-
visible: boolean,
6257
isLoading: boolean,
6358
};
6459
6560
export default Vue.extend({
6661
name: 'RenameModal',
6762
components: { Flash, Modal, MessageBox },
6863
64+
props: {
65+
visible: { type: Boolean, default: false },
66+
object: { type: Object as () => DirectoryContentObject, required: true },
67+
},
68+
6969
computed: {
70-
...mapState('server', ['fm', 'server', 'credentials']),
70+
...mapState({
71+
server: (state: ApplicationState) => state.server.server,
72+
credentials: (state: ApplicationState) => state.server.credentials,
73+
fm: (state: ApplicationState) => state.server.fm,
74+
}),
75+
76+
isVisible: {
77+
get: function (): boolean {
78+
return this.visible;
79+
},
80+
set: function (value: boolean) {
81+
this.$emit('update:visible', value);
82+
},
83+
},
84+
},
85+
86+
watch: {
87+
visible: function (newVal, oldVal) {
88+
if (newVal && newVal !== oldVal) {
89+
this.$nextTick(() => {
90+
if (this.$refs.elementNameField) {
91+
(this.$refs.elementNameField as HTMLInputElement).focus();
92+
}
93+
});
94+
}
95+
}
7196
},
7297
7398
data: function (): DataStructure {
7499
return {
75-
object: null,
76100
newName: '',
77101
error: null,
78-
visible: false,
79102
isLoading: false,
80103
};
81104
},
82105
83-
mounted: function () {
84-
window.events.$on('server:files:rename', (data: DirectoryContentObject): void => {
85-
this.visible = true;
86-
this.object = data;
87-
this.newName = data.name;
88-
89-
this.$nextTick(() => {
90-
if (this.$refs.elementNameField) {
91-
(this.$refs.elementNameField as HTMLInputElement).focus();
92-
}
93-
})
94-
});
95-
},
96-
97-
beforeDestroy: function () {
98-
window.events.$off('server:files:rename');
99-
},
100-
101106
methods: {
102107
submit: function () {
103-
if (!this.object) {
104-
return;
105-
}
106-
107108
this.isLoading = true;
108109
this.error = null;
110+
111+
// @ts-ignore
109112
renameElement(this.server.uuid, this.credentials, {
113+
// @ts-ignore
110114
path: this.fm.currentDirectory,
111115
toName: this.newName,
112116
fromName: this.object.name
113117
})
114118
.then(() => {
115-
if (this.object) {
116-
this.object.name = this.newName;
117-
}
118-
119+
this.$emit('renamed', this.newName);
119120
this.closeModal();
120121
})
121122
.catch((error: AxiosError) => {
122-
const t = this.object ? (this.object.file ? 'file' : 'folder') : 'item';
123-
124-
this.error = `There was an error while renaming the requested ${t}. Response: ${error.message}`;
123+
this.error = `There was an error while renaming the requested ${this.object.file ? 'file' : 'folder'}. Response: ${error.message}`;
125124
console.error('Error at Server::Files::Rename', { error });
126125
})
127126
.then(() => this.isLoading = false);
128127
},
129128
130129
closeModal: function () {
131-
this.object = null;
132130
this.newName = '';
133-
this.visible = false;
134131
this.error = null;
132+
this.isVisible = false;
135133
},
136134
},
137135
});

‎resources/assets/scripts/components/server/subpages/FileManager.vue‎

Lines changed: 16 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -31,11 +31,14 @@
3131
<div class="flex-1 text-right">Modified</div>
3232
<div class="flex-none w-1/6">Actions</div>
3333
</div>
34-
<div v-for="directory in directories">
35-
<FileRow :file="directory" v-on:deleted="folderRowDeleted(directory)" :key="`dir-${directory.name}`"/>
36-
</div>
37-
<div v-for="file in files">
38-
<FileRow :file="file" :editable="editableFiles" v-on:deleted="fileRowDeleted(file)" :key="file.name"/>
34+
<div v-for="file in Array.concat(directories, files)">
35+
<FileRow
36+
:key="file.directory ? `dir-${file.name}` : file.name"
37+
:file="file"
38+
:editable="editableFiles"
39+
v-on:deleted="fileRowDeleted(file, file.directory)"
40+
v-on:renamed="listDirectory"
41+
/>
3942
</div>
4043
</div>
4144
</div>
@@ -49,7 +52,6 @@
4952
</div>
5053
</div>
5154
<CreateFolderModal v-on:created="directoryCreated"/>
52-
<RenameModal/>
5355
</div>
5456
</template>
5557

@@ -61,7 +63,6 @@
6163
import getDirectoryContents from "@/api/server/getDirectoryContents";
6264
import FileRow from "@/components/server/components/filemanager/FileRow.vue";
6365
import CreateFolderModal from '../components/filemanager/modals/CreateFolderModal.vue';
64-
import RenameModal from '../components/filemanager/modals/RenameModal.vue';
6566
import DeleteFileModal from '../components/filemanager/modals/DeleteFileModal.vue';
6667
import {DirectoryContentObject} from "@/api/server/types";
6768
@@ -76,11 +77,9 @@
7677
7778
export default Vue.extend({
7879
name: 'FileManager',
79-
components: {CreateFolderModal, DeleteFileModal, FileRow, RenameModal},
80-
computed: {
81-
...mapState('server', ['server', 'credentials']),
82-
...mapState('socket', ['connected']),
80+
components: {CreateFolderModal, DeleteFileModal, FileRow},
8381
82+
computed: {
8483
/**
8584
* Configure the breadcrumbs that display on the filemanager based on the directory that the
8685
* user is currently in.
@@ -180,12 +179,12 @@
180179
window.events.$emit('server:files:open-directory-modal');
181180
},
182181
183-
fileRowDeleted: function (file: DirectoryContentObject) {
184-
this.files = this.files.filter(data => data !== file);
185-
},
186-
187-
folderRowDeleted: function (file: DirectoryContentObject) {
188-
this.directories = this.directories.filter(data => data !== file);
182+
fileRowDeleted: function (file: DirectoryContentObject, directory: boolean) {
183+
if (directory) {
184+
this.directories = this.directories.filter(data => data !== file);
185+
} else {
186+
this.files = this.files.filter(data => data !== file);
187+
}
189188
},
190189
191190
directoryCreated: function (directory: string) {

0 commit comments

Comments
 (0)