jjkiers/cloudron-box
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Move rename and extract into main filemanager controller

Browse Source
This commit is contained in:
Johannes Zellner
2022-08-25 21:10:35 +02:00
parent 568c4af15c
commit 5413e52198
4 changed files with 155 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/filetree.html
-49
View File
@@ -57,31 +57,6 @@
</div>
</div>
<!-- Modal rename entry -->
<div class="modal fade" id="{{ 'renameEntryModal-' + $id }}" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">{{ 'filemanager.renameDialog.title' | tr:{ fileName: renameEntry.entry.fileName } }}</h4>
</div>
<div class="modal-body">
<form role="form" name="renameEntryForm" ng-submit="renameEntry.submit()" autocomplete="off">
<div class="form-group" ng-class="{ 'has-error': (renameEntryForm.newName.$dirty && renameEntryForm.newName.$invalid) }">
<label class="control-label">{{ 'filemanager.renameDialog.newName' | tr }}</label>
<div class="control-label" ng-show="renameEntry.error">{{ renameEntry.error }}</div>
<input type="text" class="form-control" id="inputNewName" name="newName" ng-model="renameEntry.newName" required autofocus>
</div>
<input class="ng-hide" type="submit" ng-disabled="renameEntryForm.$invalid || renameEntry.busy"/>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">{{ 'main.dialog.close' | tr }}</button>
<button type="button" class="btn btn-primary" ng-click="renameEntry.submit()" ng-hide="renameEntry.error" ng-disabled="renameEntry.busy"><i class="fa fa-circle-notch fa-spin" ng-show="renameEntry.busy"></i> {{ 'filemanager.renameDialog.rename' | tr }}</button>
</div>
</div>
</div>
</div>
<!-- Modal chown entry -->
<div class="modal fade" id="{{ 'chownEntryModal-' + $id }}" tabindex="-1" role="dialog">
<div class="modal-dialog">
@@ -112,30 +87,6 @@
</div>
</div>
<!-- Modal extract -->
<div class="modal fade" id="extractModal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">{{ 'filemanager.extractDialog.title' | tr:{ fileName: extractStatus.fileName } }}</h4>
</div>
<div class="modal-body">
<div ng-show="extractStatus.error">
<p class="text-danger">{{ extractStatus.error }}</p>
</div>
<div class="progress progress-striped active" ng-hide="extractStatus.error">
<div class="progress-bar" role="progressbar" style="width: 100%">
</div>
</div>
<p class="no-wrap" ng-hide="extractStatus.error">{{ extractStatus.fileName }}</p>
</div>
<div class="modal-footer" style="text-align: left;">
<small ng-hide="extractStatus.error">{{ 'filemanager.extractDialog.closeWarning' | tr }}</small>
<button class="btn btn-primary pull-right" ng-show="extractStatus.error" data-dismiss="modal">{{ 'main.dialog.close' | tr }}</button>
</div>
</div>
</div>
</div>
<!-- main content -->
src/components/filetree.js
+10 -94
View File
@@ -10,6 +10,8 @@ angular.module('Application').component('filetree', {
view: '<',
onUploadFile: '&',
onUploadFolder: '&',
onRenameEntry: '&',
onExtractEntry: '&',
onDeleteEntries: '&'
},
templateUrl: 'components/filetree.html?<%= revision %>',
@@ -148,42 +150,6 @@ function FileTreeController($scope, $translate, $timeout, Client) {
return $scope.selected.indexOf(entry) !== -1;
};
$scope.extractStatus = {
error: null,
busy: false,
fileName: ''
};
function extract(entry) {
var filePath = sanitize($scope.cwd + '/' + entry.fileName);
if (entry.isDirectory) return;
// prevent it from getting closed
$('#extractModal').modal({
backdrop: 'static',
keyboard: false
});
$scope.extractStatus.fileName = entry.fileName;
$scope.extractStatus.error = null;
$scope.extractStatus.busy = true;
Client.filesExtract($scope.backendId, $scope.backendType, filePath, function (error) {
$scope.extractStatus.busy = false;
if (error) {
console.error(error);
$scope.extractStatus.error = $translate.instant('filemanager.extract.error', error.message);
return;
}
$('#extractModal').modal('hide');
$scope.refresh();
});
}
function download(entry) {
var filePath = sanitize($scope.cwd + '/' + entry.fileName);
@@ -316,6 +282,7 @@ function FileTreeController($scope, $translate, $timeout, Client) {
$scope.$parent.refresh();
};
// called from the parent
$scope.onRefresh = function () {
$scope.selected = [];
@@ -592,38 +559,6 @@ function FileTreeController($scope, $translate, $timeout, Client) {
}
};
$scope.renameEntry = {
busy: false,
error: null,
entry: null,
newName: '',
show: function (entry) {
$scope.renameEntry.error = null;
$scope.renameEntry.entry = entry;
$scope.renameEntry.newName = entry.fileName;
$scope.renameEntry.busy = false;
$('#renameEntryModal-' + $scope.$id).modal('show');
},
submit: function () {
$scope.renameEntry.busy = true;
var oldFilePath = sanitize($scope.cwd + '/' + $scope.renameEntry.entry.fileName);
var newFilePath = sanitize(($scope.renameEntry.newName[0] === '/' ? '' : ($scope.cwd + '/')) + $scope.renameEntry.newName);
Client.filesRename($scope.backendId, $scope.backendType, oldFilePath, newFilePath, function (error) {
$scope.renameEntry.busy = false;
if (error) return Client.error(error);
$scope.refresh();
$('#renameEntryModal-' + $scope.$id).modal('hide');
});
}
};
$scope.mediaViewer = {
type: '',
src: '',
@@ -741,14 +676,14 @@ function FileTreeController($scope, $translate, $timeout, Client) {
}, {
text: tr['filemanager.list.menu.rename'],
enabled: function () { return $scope.selected.length === 1; },
click: function ($itemScope, $event, entry) { $scope.renameEntry.show(entry); }
click: function ($itemScope, $event, entry) { ctrl.onRenameEntry({ cwd: $scope.cwd, entry: entry }); }
}, {
text: tr['filemanager.list.menu.chown'],
click: function ($itemScope, $event, entry) { $scope.chownEntry.show(); }
}, {
text: tr['filemanager.list.menu.extract'],
displayed: function ($itemScope, $event, entry) { return !entry.isDirectory && isArchive(entry.fileName); },
click: function ($itemScope, $event, entry) { extract(entry); }
click: function ($itemScope, $event, entry) { ctrl.onExtractEntry({ cwd: $scope.cwd, entry: entry }); }
}, {
text: tr['filemanager.list.menu.download'],
enabled: function () { return $scope.selected.length === 1; },
@@ -840,31 +775,12 @@ function FileTreeController($scope, $translate, $timeout, Client) {
openPath('.');
// DOM handlers, wait for elements to exist
setTimeout(function () {
$('.file-list').on('scroll', function (event) {
if (event.target.scrollTop > 10) event.target.classList.add('top-scroll-indicator');
else event.target.classList.remove('top-scroll-indicator');
});
$('.file-list').on('scroll', function (event) {
if (event.target.scrollTop > 10) event.target.classList.add('top-scroll-indicator');
else event.target.classList.remove('top-scroll-indicator');
});
// setup all the dialog focus handling
['newFileModal', 'newDirectoryModal', 'renameEntryModal'].forEach(function (id) {
$('#' + id + '-' + $scope.$id).on('shown.bs.modal', function () {
$(this).find('[autofocus]:first').focus();
});
});
// selects filename (without extension)
['renameEntryModal'].forEach(function (id) {
$('#' + id + '-' + $scope.$id).on('shown.bs.modal', function () {
var elem = $(this).find('[autofocus]:first');
var text = elem.val();
elem[0].setSelectionRange(0, text.indexOf('.'));
});
});
}, 0);
// handle save shortcuts
// handle shortcuts
window.addEventListener('keydown', function (event) {
if ($scope.$parent.activeView !== $scope.view || $scope.$parent.viewerOpen || isModalVisible()) return;