aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorJohannes Zellner <johannes@cloudron.io>2019-02-24 21:51:30 +0100
committerJohannes Zellner <johannes@cloudron.io>2019-02-24 21:51:30 +0100
commit8538b6b70524416a7916ea2418e6b3c46077c2a5 (patch)
tree9ec2f7615e99afb5ae8e9540b1f5c50ff090b16b
parent701c2be63f33a868f0369fe95d823ed0b11ec683 (diff)
downloadSurfer-8538b6b70524416a7916ea2418e6b3c46077c2a5.tar.gz
Surfer-8538b6b70524416a7916ea2418e6b3c46077c2a5.tar.zst
Surfer-8538b6b70524416a7916ea2418e6b3c46077c2a5.zip
Use inline renaming
-rw-r--r--frontend/index.html9
-rw-r--r--frontend/js/app.js49
2 files changed, 44 insertions, 14 deletions
diff --git a/frontend/index.html b/frontend/index.html
index 5bc64c1..0c18b52 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -85,13 +85,18 @@
85 <img v-bind:src="scope.row.previewUrl" height="48px" width="48px"/> 85 <img v-bind:src="scope.row.previewUrl" height="48px" width="48px"/>
86 </template> 86 </template>
87 </el-table-column> 87 </el-table-column>
88 <el-table-column prop="filePath" label="Name" sortable></el-table-column> 88 <el-table-column prop="filePath" label="Name" sortable>
89 <template slot-scope="scope">
90 <el-input v-on:keyup.native.enter="onRenameSubmit(scope.row)" v-on:keyup.native.esc="onRenameEnd(scope.row)" @blur="onRenameEnd(scope.row)" v-model="scope.row.filePathNew" :id="'filePathRenameInputId-' + scope.$index" v-show="scope.row.rename"></el-input>
91 <span v-show="!scope.row.rename">{{ scope.row.filePath }}</span>
92 </template>
93 </el-table-column>
89 <el-table-column prop="size" label="Size" width="150px" sortable :formatter="prettyFileSize"></el-table-column> 94 <el-table-column prop="size" label="Size" width="150px" sortable :formatter="prettyFileSize"></el-table-column>
90 <el-table-column prop="mtime" label="Modified" width="150px" sortable :formatter="prettyDate"></el-table-column> 95 <el-table-column prop="mtime" label="Modified" width="150px" sortable :formatter="prettyDate"></el-table-column>
91 <el-table-column label="Actions" align="right" width="200px" class-name="list-actions"> 96 <el-table-column label="Actions" align="right" width="200px" class-name="list-actions">
92 <template slot-scope="scope"> 97 <template slot-scope="scope">
93 <el-button size="small" icon="el-icon-download" circle v-show="scope.row.isFile" @click.stop="onDownload(scope.row)"></el-button> 98 <el-button size="small" icon="el-icon-download" circle v-show="scope.row.isFile" @click.stop="onDownload(scope.row)"></el-button>
94 <el-button size="small" icon="el-icon-edit" circle @click.stop="onRename(scope.row)"></el-button> 99 <el-button size="small" icon="el-icon-edit" circle @click.stop="onRename(scope.row, scope)"></el-button>
95 <el-button size="small" icon="el-icon-delete" circle @click.stop="onDelete(scope.row)"></el-button> 100 <el-button size="small" icon="el-icon-delete" circle @click.stop="onDelete(scope.row)"></el-button>
96 </template> 101 </template>
97 </el-table-column> 102 </el-table-column>
diff --git a/frontend/js/app.js b/frontend/js/app.js
index e446db3..22d203b 100644
--- a/frontend/js/app.js
+++ b/frontend/js/app.js
@@ -116,6 +116,8 @@ function loadDirectory(filePath) {
116 app.entries = result.body.entries.map(function (entry) { 116 app.entries = result.body.entries.map(function (entry) {
117 entry.previewUrl = getPreviewUrl(entry, filePath); 117 entry.previewUrl = getPreviewUrl(entry, filePath);
118 entry.extension = getExtension(entry); 118 entry.extension = getExtension(entry);
119 entry.rename = false;
120 entry.filePathNew = entry.filePath;
119 return entry; 121 return entry;
120 }); 122 });
121 app.path = filePath; 123 app.path = filePath;
@@ -132,6 +134,9 @@ function loadDirectory(filePath) {
132} 134}
133 135
134function open(row, event, column) { 136function open(row, event, column) {
137 // ignore item open on row clicks if we are renaming this entry
138 if (row.rename) return;
139
135 var path = sanitize(app.path + '/' + row.filePath); 140 var path = sanitize(app.path + '/' + row.filePath);
136 141
137 if (row.isDirectory) { 142 if (row.isDirectory) {
@@ -358,22 +363,42 @@ var app = new Vue({
358 }); 363 });
359 }).catch(function () {}); 364 }).catch(function () {});
360 }, 365 },
361 onRename: function (entry) { 366 onRename: function (entry, scope) {
367 if (entry.rename) return entry.rename = false;
368
369 entry.rename = true;
370
371 Vue.nextTick(function () {
372 var elem = document.getElementById('filePathRenameInputId-' + scope.$index);
373 elem.focus();
374
375 if (typeof elem.selectionStart != "undefined") {
376 elem.selectionStart = 0;
377 elem.selectionEnd = entry.filePath.lastIndexOf('.');
378 }
379 });
380 },
381 onRenameEnd: function (entry) {
382 entry.rename = false;
383 entry.filePathNew = entry.filePath;
384 },
385 onRenameSubmit: function (entry) {
362 var that = this; 386 var that = this;
363 387
364 var title = 'Rename ' + entry.filePath; 388 entry.rename = false;
365 this.$prompt('', title, { confirmButtonText: 'Yes', cancelButtonText: 'No', inputPlaceholder: 'new filename', inputValue: entry.filePath }).then(function (data) {
366 var path = encode(sanitize(that.path + '/' + entry.filePath));
367 var newFilePath = sanitize(that.path + '/' + data.value);
368 389
369 superagent.put('/api/files' + path).query({ access_token: localStorage.accessToken }).send({ newFilePath: newFilePath }).end(function (error, result) { 390 if (entry.filePathNew === entry.filePath) return;
370 if (result && result.statusCode === 401) return logout();
371 if (result && result.statusCode !== 200) return that.$message.error('Error renaming file: ' + result.statusCode);
372 if (error) return that.$message.error(error.message);
373 391
374 refresh(); 392 var path = encode(sanitize(this.path + '/' + entry.filePath));
375 }); 393 var newFilePath = sanitize(this.path + '/' + entry.filePathNew);
376 }).catch(function () {}); 394
395 superagent.put('/api/files' + path).query({ access_token: localStorage.accessToken }).send({ newFilePath: newFilePath }).end(function (error, result) {
396 if (result && result.statusCode === 401) return logout();
397 if (result && result.statusCode !== 200) return that.$message.error('Error renaming file: ' + result.statusCode);
398 if (error) return that.$message.error(error.message);
399
400 entry.filePath = entry.filePathNew;
401 });
377 }, 402 },
378 onNewFolder: function () { 403 onNewFolder: function () {
379 var that = this; 404 var that = this;