Skip to content

PUBLIC / surfer-okd

Go to a project
Commit 8538b6b7 by Johannes Zellner
Options

Use inline renaming

1 parent 701c2be6
Inline Side-by-side
Showing with 44 additions and 14 deletions
frontend/index.html
...@@ -85,13 +85,18 @@ ...@@ -85,13 +85,18 @@
<img v-bind:src="scope.row.previewUrl" height="48px" width="48px"/> <img v-bind:src="scope.row.previewUrl" height="48px" width="48px"/>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="filePath" label="Name" sortable></el-table-column> <el-table-column prop="filePath" label="Name" sortable>
<template slot-scope="scope">
<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>
<span v-show="!scope.row.rename">{{ scope.row.filePath }}</span>
</template>
</el-table-column>
<el-table-column prop="size" label="Size" width="150px" sortable :formatter="prettyFileSize"></el-table-column> <el-table-column prop="size" label="Size" width="150px" sortable :formatter="prettyFileSize"></el-table-column>
<el-table-column prop="mtime" label="Modified" width="150px" sortable :formatter="prettyDate"></el-table-column> <el-table-column prop="mtime" label="Modified" width="150px" sortable :formatter="prettyDate"></el-table-column>
<el-table-column label="Actions" align="right" width="200px" class-name="list-actions"> <el-table-column label="Actions" align="right" width="200px" class-name="list-actions">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button size="small" icon="el-icon-download" circle v-show="scope.row.isFile" @click.stop="onDownload(scope.row)"></el-button> <el-button size="small" icon="el-icon-download" circle v-show="scope.row.isFile" @click.stop="onDownload(scope.row)"></el-button>
<el-button size="small" icon="el-icon-edit" circle @click.stop="onRename(scope.row)"></el-button> <el-button size="small" icon="el-icon-edit" circle @click.stop="onRename(scope.row, scope)"></el-button>
<el-button size="small" icon="el-icon-delete" circle @click.stop="onDelete(scope.row)"></el-button> <el-button size="small" icon="el-icon-delete" circle @click.stop="onDelete(scope.row)"></el-button>
</template> </template>
</el-table-column> </el-table-column>
......
frontend/js/app.js
...@@ -116,6 +116,8 @@ function loadDirectory(filePath) { ...@@ -116,6 +116,8 @@ function loadDirectory(filePath) {
app.entries = result.body.entries.map(function (entry) { app.entries = result.body.entries.map(function (entry) {
entry.previewUrl = getPreviewUrl(entry, filePath); entry.previewUrl = getPreviewUrl(entry, filePath);
entry.extension = getExtension(entry); entry.extension = getExtension(entry);
entry.rename = false;
entry.filePathNew = entry.filePath;
return entry; return entry;
}); });
app.path = filePath; app.path = filePath;
...@@ -132,6 +134,9 @@ function loadDirectory(filePath) { ...@@ -132,6 +134,9 @@ function loadDirectory(filePath) {
} }
function open(row, event, column) { function open(row, event, column) {
// ignore item open on row clicks if we are renaming this entry
if (row.rename) return;
var path = sanitize(app.path + '/' + row.filePath); var path = sanitize(app.path + '/' + row.filePath);
if (row.isDirectory) { if (row.isDirectory) {
...@@ -358,22 +363,42 @@ var app = new Vue({ ...@@ -358,22 +363,42 @@ var app = new Vue({
}); });
}).catch(function () {}); }).catch(function () {});
}, },
onRename: function (entry) { onRename: function (entry, scope) {
if (entry.rename) return entry.rename = false;
entry.rename = true;
Vue.nextTick(function () {
var elem = document.getElementById('filePathRenameInputId-' + scope.$index);
elem.focus();
if (typeof elem.selectionStart != "undefined") {
elem.selectionStart = 0;
elem.selectionEnd = entry.filePath.lastIndexOf('.');
}
});
},
onRenameEnd: function (entry) {
entry.rename = false;
entry.filePathNew = entry.filePath;
},
onRenameSubmit: function (entry) {
var that = this; var that = this;
var title = 'Rename ' + entry.filePath; entry.rename = false;
this.$prompt('', title, { confirmButtonText: 'Yes', cancelButtonText: 'No', inputPlaceholder: 'new filename', inputValue: entry.filePath }).then(function (data) {
var path = encode(sanitize(that.path + '/' + entry.filePath));
var newFilePath = sanitize(that.path + '/' + data.value);
superagent.put('/api/files' + path).query({ access_token: localStorage.accessToken }).send({ newFilePath: newFilePath }).end(function (error, result) { if (entry.filePathNew === entry.filePath) return;
if (result && result.statusCode === 401) return logout();
if (result && result.statusCode !== 200) return that.$message.error('Error renaming file: ' + result.statusCode);
if (error) return that.$message.error(error.message);
refresh(); var path = encode(sanitize(this.path + '/' + entry.filePath));
}); var newFilePath = sanitize(this.path + '/' + entry.filePathNew);
}).catch(function () {});
superagent.put('/api/files' + path).query({ access_token: localStorage.accessToken }).send({ newFilePath: newFilePath }).end(function (error, result) {
if (result && result.statusCode === 401) return logout();
if (result && result.statusCode !== 200) return that.$message.error('Error renaming file: ' + result.statusCode);
if (error) return that.$message.error(error.message);
entry.filePath = entry.filePathNew;
});
}, },
onNewFolder: function () { onNewFolder: function () {
var that = this; var that = this;
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!