Improved folder name editing

dev/External/ko.js

@@ -28,12 +28,12 @@ export const
 
 	dispose = disposable => isFunction(disposable?.dispose) && disposable.dispose(),
 
-	onKey = (key, element, fValueAccessor, fAllBindings, viewModel) => {
+	onKey = (key, element, fValueAccessor, fAllBindings, model) => {
 		let fn = event => {
 			if (key == event.key) {
 //				stopEvent(event);
 //				element.dispatchEvent(new Event('change'));
-				fValueAccessor().call(viewModel);
+				fValueAccessor().call(model);
 			}
 		};
 		element.addEventListener('keydown', fn);
@@ -68,18 +68,18 @@ Object.assign(ko.bindingHandlers, {
 	},
 
 	onEnter: {
-		init: (element, fValueAccessor, fAllBindings, viewModel) =>
+		init: (element, fValueAccessor, fAllBindings, model) =>
-			onKey('Enter', element, fValueAccessor, fAllBindings, viewModel)
+			onKey('Enter', element, fValueAccessor, fAllBindings, model)
 	},
 
 	onEsc: {
-		init: (element, fValueAccessor, fAllBindings, viewModel) =>
+		init: (element, fValueAccessor, fAllBindings, model) =>
-			onKey('Escape', element, fValueAccessor, fAllBindings, viewModel)
+			onKey('Escape', element, fValueAccessor, fAllBindings, model)
 	},
 
 	onSpace: {
-		init: (element, fValueAccessor, fAllBindings, viewModel) =>
+		init: (element, fValueAccessor, fAllBindings, model) =>
-			onKey(' ', element, fValueAccessor, fAllBindings, viewModel)
+			onKey(' ', element, fValueAccessor, fAllBindings, model)
 	},
 
 	i18nUpdate: {

dev/Model/FolderCollection.js

@@ -3,8 +3,9 @@ import { AbstractCollectionModel } from 'Model/AbstractCollection';
 import { UNUSED_OPTION_VALUE } from 'Common/Consts';
 import { isArray, getKeyByValue, forEachObjectEntry, b64EncodeJSONSafe } from 'Common/Utils';
 import { ClientSideKeyNameExpandedFolders, FolderType, FolderMetadataKeys } from 'Common/EnumsUser';
-import { getFolderFromCacheList, setFolder, setFolderInboxName } from 'Common/Cache';
+import { getFolderFromCacheList, setFolder, setFolderInboxName, removeFolderFromCacheList } from 'Common/Cache';
 import { Settings, SettingsGet, fireEvent } from 'Common/Globals';
+import { Notifications } from 'Common/Enums';
 
 import * as Local from 'Storage/Client';
 
@@ -14,7 +15,7 @@ import { MessagelistUserStore } from 'Stores/User/Messagelist';
 import { SettingsUserStore } from 'Stores/User/Settings';
 
 import { sortFolders } from 'Common/Folders';
-import { i18n, translateTrigger } from 'Common/Translator';
+import { i18n, translateTrigger, getNotification } from 'Common/Translator';
 
 import { AbstractModel } from 'Knoin/AbstractModel';
 
@@ -473,6 +474,41 @@ export class FolderModel extends AbstractModel {
 		this.editing(false);
 	}
 
+	rename() {
+		const folder = this,
+			nameToEdit = folder.nameForEdit().trim();
+		if (nameToEdit && folder.name() !== nameToEdit) {
+			Remote.abort('Folders').post('FolderRename', FolderUserStore.foldersRenaming, {
+					folder: folder.fullName,
+					newFolderName: nameToEdit,
+					subscribe: folder.isSubscribed() ? 1 : 0
+				})
+				.then(data => {
+					folder.name(nameToEdit/*data.name*/);
+					if (folder.subFolders.length) {
+						Remote.setTrigger(FolderUserStore.foldersLoading, true);
+//						clearTimeout(Remote.foldersTimeout);
+//						Remote.foldersTimeout = setTimeout(loadFolders, 500);
+						setTimeout(loadFolders, 500);
+						// TODO: rename all subfolders with folder.delimiter to prevent reload?
+					} else {
+						removeFolderFromCacheList(folder.fullName);
+						folder.fullName = data.Result.fullName;
+						setFolder(folder);
+						const parent = getFolderFromCacheList(folder.parentName);
+						sortFolders(parent ? parent.subFolders : FolderUserStore.folderList);
+					}
+				})
+				.catch(error => {
+					FolderUserStore.folderListError(
+						getNotification(error.code, '', Notifications.CantRenameFolder)
+						+ '.\n' + error.message);
+				});
+		}
+
+		folder.editing(false);
+	}
+
 	/**
 	 * For url safe '/#/mailbox/...' path
 	 */

dev/Settings/User/Folders.js

@@ -4,9 +4,8 @@ import { Notifications } from 'Common/Enums';
 import { FolderMetadataKeys } from 'Common/EnumsUser';
 import { getNotification } from 'Common/Translator';
 
-import { setFolder, getFolderFromCacheList, removeFolderFromCacheList } from 'Common/Cache';
+import { getFolderFromCacheList, removeFolderFromCacheList } from 'Common/Cache';
 import { defaultOptionsAfterRender } from 'Common/Utils';
-import { sortFolders } from 'Common/Folders';
 import { initOnStartOrLangChange, i18n } from 'Common/Translator';
 
 import { FolderUserStore } from 'Stores/User/Folder';
@@ -18,7 +17,6 @@ import { showScreenPopup } from 'Knoin/Knoin';
 
 import { FolderCreatePopupView } from 'View/Popup/FolderCreate';
 import { FolderSystemPopupView } from 'View/Popup/FolderSystem';
-import { loadFolders } from 'Model/FolderCollection';
 
 const folderForDeletion = ko.observable(null).askDeleteHelper();
 
@@ -56,40 +54,6 @@ export class UserSettingsFolders /*extends AbstractViewSettings*/ {
 		SettingsUserStore.unhideKolabFolders.subscribe(value => Remote.saveSetting('UnhideKolabFolders', value));
 	}
 
-	folderEditOnEnter(folder) {
-		const nameToEdit = folder?.nameForEdit().trim();
-		if (nameToEdit && folder.name() !== nameToEdit) {
-			Remote.abort('Folders').post('FolderRename', FolderUserStore.foldersRenaming, {
-					folder: folder.fullName,
-					newFolderName: nameToEdit,
-					subscribe: folder.isSubscribed() ? 1 : 0
-				})
-				.then(data => {
-					folder.name(nameToEdit/*data.name*/);
-					if (folder.subFolders.length) {
-						Remote.setTrigger(FolderUserStore.foldersLoading, true);
-//						clearTimeout(Remote.foldersTimeout);
-//						Remote.foldersTimeout = setTimeout(loadFolders, 500);
-						setTimeout(loadFolders, 500);
-						// TODO: rename all subfolders with folder.delimiter to prevent reload?
-					} else {
-						removeFolderFromCacheList(folder.fullName);
-						folder.fullName = data.Result.fullName;
-						setFolder(folder);
-						const parent = getFolderFromCacheList(folder.parentName);
-						sortFolders(parent ? parent.subFolders : FolderUserStore.folderList);
-					}
-				})
-				.catch(error => {
-					FolderUserStore.folderListError(
-						getNotification(error.code, '', Notifications.CantRenameFolder)
-						+ '.\n' + error.message);
-				});
-		}
-
-		folder.editing(false);
-	}
-
 	onShow() {
 		FolderUserStore.folderListError('');
 	}

snappymail/v/0.0.0/app/templates/Views/User/SettingsFolderItem.html

@@ -5,7 +5,7 @@
 			tooltipErrorTip: errorMsg"></span>
 		<input type="text"
 			autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
-			data-bind="value: nameForEdit, visible: editing, hasfocus: editing, onEnter: function () { $root.folderEditOnEnter($data); }, onEsc: unedit">
+			data-bind="textInput: nameForEdit, visible: editing, hasfocus: editing, onEnter: rename, onEsc: unedit">
 		&nbsp;
 		<span class="folder-system-name" data-bind="text: manageFolderSystemName, visible: isSystemFolder"></span>
 	</td>