Skip to content

Commit 89194b4

Browse files
DaneEverittDaneEveritt
committed
Show a cleaner interface while loading file contents
1 parent a8462bf commit 89194b4

File tree

2 files changed

+74
-26
lines changed

2 files changed

+74
-26
lines changed

‎resources/assets/scripts/components/core/SpinnerModal.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<transition name="modal">
33
<div class="modal-mask" v-show="visible">
44
<div class="modal-container w-auto">
5-
<div class="p-8 pb-0">
5+
<div class="modal-content p-8 pb-0">
66
<div class="spinner spinner-thick spinner-relative blue spinner-xl"></div>
77
<p class="text-neutral-700 mt-8 text-sm">
88
<slot/>

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

Lines changed: 73 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,21 @@
22
<transition name="modal">
33
<div class="modal-mask" v-show="isVisible">
44
<div class="modal-container full-screen" @click.stop>
5-
<div class="modal-close-icon" v-on:click="isVisible = false">
5+
<SpinnerModal :visible="isVisible && isLoading"/>
6+
<div class="modal-close-icon" v-on:click="closeModal">
67
<Icon name="x" aria-label="Close modal" role="button"/>
78
</div>
8-
<MessageBox class="alert error mb-8" title="Error" :message="error" v-if="error"/>
9+
<MessageBox class="alert error mb-2" title="Error" :message="error" v-if="error"/>
910
<div id="editor"></div>
1011
<div class="flex mt-4 bg-white rounded p-2">
1112
<div class="flex-1">
12-
<select v-on:change="updateFileLanguage">
13-
<option v-for="item in supportedTypes" :value="item.type">{{ item.name }}</option>
13+
<select v-on:change="updateFileLanguage" ref="fileLanguageSelector">
14+
<option v-for="item in supportedTypes" :value="item.type">
15+
{{ item.name }}
16+
</option>
1417
</select>
1518
</div>
16-
<button class="btn btn-secondary btn-sm" v-on:click="isVisible = false">
19+
<button class="btn btn-secondary btn-sm" v-on:click="closeModal">
1720
Cancel
1821
</button>
1922
<button class="ml-2 btn btn-primary btn-sm">
@@ -35,6 +38,7 @@
3538
import { join } from 'path';
3639
import {DirectoryContentObject} from "@/api/server/types";
3740
import getFileContents from '@/api/server/files/getFileContents';
41+
import SpinnerModal from "@/components/core/SpinnerModal.vue";
3842
3943
interface Data {
4044
file?: DirectoryContentObject,
@@ -44,21 +48,26 @@
4448
editor: Ace.Editor | null,
4549
isVisible: boolean,
4650
isLoading: boolean,
47-
supportedTypes: {type: string, name: string}[],
51+
supportedTypes: {type: string, name: string, default?: boolean}[],
4852
}
4953
54+
const defaults = {
55+
error: null,
56+
editor: null,
57+
isVisible: false,
58+
isLoading: true,
59+
};
60+
5061
export default Vue.extend({
5162
name: 'NewFileModal',
5263
53-
components: {Icon, MessageBox},
64+
components: {Icon, SpinnerModal, MessageBox},
5465
5566
data: function (): Data {
5667
return {
57-
error: null,
58-
editor: null,
59-
isVisible: false,
60-
isLoading: false,
68+
...defaults,
6169
supportedTypes: [
70+
{type: 'text', name: 'Text'},
6271
{type: 'dockerfile', name: 'Docker'},
6372
{type: 'golang', name: 'Go'},
6473
{type: 'html', name: 'HTML'},
@@ -68,7 +77,6 @@
6877
{type: 'kotlin', name: 'Kotlin'},
6978
{type: 'lua', name: 'Lua'},
7079
{type: 'markdown', name: 'Markdown'},
71-
{type: 'plain_text', name: 'Text'},
7280
{type: 'php', name: 'PHP'},
7381
{type: 'properties', name: 'Properties'},
7482
{type: 'python', name: 'Python'},
@@ -90,13 +98,22 @@
9098
window.events.$on('server:files:open-edit-file-modal', (file?: DirectoryContentObject) => {
9199
this.file = file;
92100
this.isVisible = true;
101+
this.isLoading = true;
93102
94103
this.$nextTick(() => {
95104
this.editor = Ace.edit('editor');
96105
this.loadDependencies()
97106
.then(() => this.loadLanguages())
98107
.then(() => this.configureEditor())
99108
.then(() => this.loadFileContent())
109+
.then(() => {
110+
this.isLoading = false;
111+
})
112+
.catch(error => {
113+
console.error(error);
114+
this.isLoading = false;
115+
this.error = error.message;
116+
});
100117
});
101118
});
102119
},
@@ -106,16 +123,40 @@
106123
107124
},
108125
109-
loadFileContent: function () {
110-
if (!this.file || !this.editor || this.file.directory) {
111-
return;
112-
}
113-
114-
getFileContents(this.serverUuid!, join(this.fm!.currentDirectory, this.file.name))
115-
.then(contents => {
116-
this.editor!.$blockScrolling = Infinity;
117-
this.editor!.setValue(contents, 1);
118-
});
126+
loadFileContent: function (): Promise<void> {
127+
return new Promise((resolve, reject) => {
128+
const { editor, file } = this;
129+
130+
if (!file || !editor || file.directory) {
131+
return resolve();
132+
}
133+
134+
getFileContents(this.serverUuid!, join(this.fm!.currentDirectory, file.name))
135+
.then(contents => {
136+
editor.$blockScrolling = Infinity;
137+
editor.setValue(contents, 1);
138+
})
139+
.then(() => {
140+
// Set the correct MIME type on the editor for the user.
141+
const modelist = Ace.acequire('ace/ext/modelist');
142+
if (modelist) {
143+
const mode = modelist.getModeForPath(file.name).mode || 'ace/mode/text';
144+
editor.getSession().setMode(mode);
145+
146+
const parts = mode.split('/');
147+
const element = (this.$refs.fileLanguageSelector as HTMLSelectElement | null);
148+
149+
if (element) {
150+
const index = this.supportedTypes.findIndex(value => value.type === parts[parts.length - 1]);
151+
if (index >= 0) {
152+
element.selectedIndex = index;
153+
}
154+
}
155+
}
156+
})
157+
.then(() => resolve())
158+
.catch(reject);
159+
});
119160
},
120161
121162
updateFileLanguage: function (e: MouseEvent) {
@@ -131,7 +172,7 @@
131172
this.supportedTypes.map(o => import(
132173
/* webpackChunkName: "ace_editor" */
133174
/* webpackMode: "lazy-once" */
134-
/* webpackInclude: /(dockerfile|golang|html|java|javascript|json|kotlin|lua|markdown|plain_text|php|properties|python|ruby|sh|sql|xml|yaml).js$/ */
175+
/* webpackInclude: /(dockerfile|golang|html|java|javascript|json|kotlin|lua|markdown|text|php|properties|python|ruby|sh|sql|xml|yaml).js$/ */
135176
`brace/mode/${o.type}`
136177
))
137178
);
@@ -153,7 +194,6 @@
153194
return;
154195
}
155196
156-
// const modelist = Ace.acequire('brace/ext/whitespace');
157197
const whitespace = Ace.acequire('ace/ext/whitespace');
158198
159199
this.editor.setTheme('ace/theme/chrome');
@@ -167,7 +207,15 @@
167207
this.editor!.commands.addCommand(c);
168208
});
169209
whitespace.detectIndentation(this.editor.session);
170-
}
210+
},
211+
212+
closeModal: function () {
213+
if (this.editor) {
214+
this.editor.setValue('', -1);
215+
}
216+
217+
Object.assign(this.$data, defaults);
218+
},
171219
}
172220
})
173221
</script>

0 commit comments

Comments
 (0)