NMC-533 Set new folder name inline: rebased

apps/files/js/filelist.js

@@ -1939,7 +1939,7 @@
 			}
 
 			if (options.scrollTo) {
-				this.scrollTo(fileData.name);
+				this.scrollTo(fileData.name, options.showDetailsView !== undefined ? options.showDetailsView : true);
 			}
 
 			// defaults to true if not defined
@@ -3060,7 +3060,7 @@
 		 *
 		 * @since 8.2
 		 */
-		createDirectory: function(name) {
+		 createDirectory: function(name, options) {
 			var self = this;
 			var deferred = $.Deferred();
 			var promise = deferred.promise();
@@ -3076,7 +3076,8 @@
 
 			this.filesClient.createDirectory(targetPath)
 				.done(function() {
-					self.addAndFetchFileInfo(targetPath, '', {scrollTo:true}).then(function(status, data) {
+					options = _.extend({scrollTo: true}, options || {});
+					self.addAndFetchFileInfo(targetPath, '', options).then(function(status, data) {
 						deferred.resolve(status, data);
 					}, function() {
 						OC.Notification.show(t('files', 'Could not create folder "{dir}"',
@@ -3087,8 +3088,9 @@
 				.fail(function(createStatus) {
 					// method not allowed, folder might exist already
 					if (createStatus === 405) {
+						options = _.extend({scrollTo: true}, options || {});
 						// add it to the list, for completeness
-						self.addAndFetchFileInfo(targetPath, '', {scrollTo:true})
+						self.addAndFetchFileInfo(targetPath, '', options)
 							.done(function(status, data) {
 								OC.Notification.show(t('files', 'Could not create folder "{dir}" because it already exists',
 									{dir: name}), {type: 'error'}
@@ -3326,11 +3328,11 @@
 			this.$el.find('.mask').remove();
 			this.$table.removeClass('hidden');
 		},
-		scrollTo:function(file) {
+		scrollTo:function(file, showDetailsView = true) {
 			if (!_.isArray(file)) {
 				file = [file];
 			}
-			if (file.length === 1) {
+			if (file.length === 1 && showDetailsView) {
 				_.defer(function() {
 					this.showDetailsView(file[0]);
 				}.bind(this));
@@ -3546,7 +3548,10 @@
 		},
 
 		getUniqueName: function(name) {
-			if (this.findFileEl(name).exists()) {
+			var fileNamesOld = this.files.findIndex(function(el) {
+				return el.name === name
+			})
+			if (fileNamesOld !== -1) {
 				var numMatch;
 				var parts=name.split('.');
 				var extension = "";

apps/files/js/newfilemenu.js

@@ -52,7 +52,11 @@
 				iconClass: 'icon-folder',
 				fileType: 'folder',
 				actionHandler: function(name) {
-					self.fileList.createDirectory(name);
+					const uniqueName = self.fileList.getUniqueName(name)
+					let tempPromise = self.fileList.createDirectory(uniqueName, { showDetailsView: false })
+					Promise.all([tempPromise]).then(() => {
+						self.fileList.rename(uniqueName)
+					})
 				}
 		        }];
 
@@ -90,102 +94,13 @@
 
 		_promptFileName: function($target) {
 			var self = this;
+			var newname = $target.attr('data-templatename');
+			var action = _.filter(self._menuItems, function(item) {
+				return item.id == $target.attr('data-action');
+			}).pop();
 
-			if ($target.find('form').length) {
-				$target.find('input[type=\'text\']').focus();
-				return;
-			}
-
-			// discard other forms
-			this.$el.find('form').remove();
-			this.$el.find('.displayname').removeClass('hidden');
-
-			$target.find('.displayname').addClass('hidden');
-
-			var newName = $target.attr('data-templatename');
-			var fileType = $target.attr('data-filetype');
-			var $form = $(OCA.Files.Templates['newfilemenu_filename_form']({
-				fileName: newName,
-				cid: this.cid,
-				fileType: fileType
-			}));
-
-			//this.trigger('actionPerformed', action);
-			$target.append($form);
-
-			// here comes the OLD code
-			var $input = $form.find('input[type=\'text\']');
-			var $submit = $form.find('input[type=\'submit\']');
-
-			var lastPos;
-			var checkInput = function () {
-				// Special handling for the setup template directory
-				if ($target.attr('data-action') === 'template-init') {
-					return true;
-				}
-
-				var filename = $input.val();
-				try {
-					if (!Files.isFileNameValid(filename)) {
-						// Files.isFileNameValid(filename) throws an exception itself
-					} else if (self.fileList.inList(filename)) {
-						throw t('files', '{newName} already exists', {newName: filename}, undefined, {
-							escape: false
-						});
-					} else {
-						return true;
-					}
-				} catch (error) {
-					$input.attr('title', error);
-					$input.tooltip({placement: 'right', trigger: 'manual', container: self.$el});
-					$input.tooltip('_fixTitle');
-					$input.tooltip('show');
-					$input.addClass('error');
-				}
-				return false;
-			};
-
-			// verify filename on typing
-			$input.keyup(function() {
-				if (checkInput()) {
-					$input.tooltip('hide');
-					$input.removeClass('error');
-				}
-			});
-
-			$submit.click(function(event) {
-				event.stopPropagation();
-				event.preventDefault();
-				$form.submit();
-			});
-
-			$input.focus();
-			// pre select name up to the extension
-			lastPos = newName.lastIndexOf('.');
-			if (lastPos === -1) {
-				lastPos = newName.length;
-			}
-			$input.selectRange(0, lastPos);
-
-			$form.submit(function(event) {
-				event.stopPropagation();
-				event.preventDefault();
-
-				if (checkInput()) {
-					var newname = $input.val().trim();
-
-					/* Find the right actionHandler that should be called.
-					 * Actions is retrieved by using `actionSpec.id` */
-					var action = _.filter(self._menuItems, function(item) {
-						return item.id == $target.attr('data-action');
-					}).pop();
-					action.actionHandler(newname);
-
-					$form.remove();
-					$target.find('.displayname').removeClass('hidden');
-					OC.hideMenus();
-				}
-			});
+			action.actionHandler(newname);
+			OC.hideMenus();
 		},
 
 		/**

apps/files/src/templates.js

@@ -110,7 +110,8 @@ templates.forEach((provider, index) => {
 				iconClass: provider.iconClass || 'icon-file',
 				fileType: 'file',
 				actionHandler(name) {
-					TemplatePicker.open(name, provider)
+					const fileName = FileList.getUniqueName(name)
+					TemplatePicker.open(fileName, provider)
 				},
 			})
 		},

apps/files/src/views/TemplatePicker.vue

@@ -64,18 +64,19 @@
 </template>
 
 <script>
-import { normalize } from 'path'
 import { showError } from '@nextcloud/dialogs'
+import { generateOcsUrl } from '@nextcloud/router'
+import axios from '@nextcloud/axios'
 import EmptyContent from '@nextcloud/vue/dist/Components/EmptyContent'
 import Modal from '@nextcloud/vue/dist/Components/Modal'
 
 import { getCurrentDirectory } from '../utils/davUtils'
-import { createFromTemplate, getTemplates } from '../services/Templates'
+import { getTemplates } from '../services/Templates'
 import TemplatePreview from '../components/TemplatePreview'
 
 const border = 2
 const margin = 8
-const width = margin * 20
+const width = margin * 18
 
 export default {
 	name: 'TemplatePicker',
@@ -201,34 +202,19 @@ export default {
 			const currentDirectory = getCurrentDirectory()
 			const fileList = OCA?.Files?.App?.currentFileList
 
-			// If the file doesn't have an extension, add the default one
-			if (this.nameWithoutExt === this.name) {
-				this.logger.debug('Fixed invalid filename', { name: this.name, extension: this.provider?.extension })
-				this.name = this.name + this.provider?.extension
-			}
-
 			try {
-				const fileInfo = await createFromTemplate(
-					normalize(`${currentDirectory}/${this.name}`),
-					this.selectedTemplate?.filename,
-					this.selectedTemplate?.templateType,
-				)
-				this.logger.debug('Created new file', fileInfo)
+				const response = await axios.post(generateOcsUrl('apps/files/api/v1/templates/create'), {
+					filePath: `${currentDirectory}/${this.name}`,
+					templatePath: this.selectedTemplate?.filename,
+					templateType: this.selectedTemplate?.templateType,
+				})
 
-				const data = await fileList?.addAndFetchFileInfo(this.name).then((status, data) => data)
+				const fileInfo = response.data.ocs.data
+				this.logger.debug('Created new file', fileInfo)
 
-				const model = new OCA.Files.FileInfoModel(data, {
-					filesClient: fileList?.filesClient,
-				})
-				// Run default action
-				const fileAction = OCA.Files.fileActions.getDefaultFileAction(fileInfo.mime, 'file', OC.PERMISSION_ALL)
-				fileAction.action(fileInfo.basename, {
-					$file: fileList?.findFileEl(this.name),
-					dir: currentDirectory,
-					fileList,
-					fileActions: fileList?.fileActions,
-					fileInfoModel: model,
-				})
+				const options = _.extend({ scrollTo: true }, { showDetailsView: false } || {})
+				await fileList?.addAndFetchFileInfo(this.name, undefined, options)
+				fileList.rename(this.name)
 
 				this.close()
 			} catch (error) {
@@ -249,6 +235,11 @@ export default {
 		padding: calc(var(--margin) * 2);
 		// Will be handled by the buttons
 		padding-bottom: 0;
+		// Dynamix height content
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+		box-sizing: border-box;
 
 		h2 {
 			text-align: center;
@@ -268,6 +259,11 @@ export default {
 		grid-auto-rows: 1fr;
 		// Center the columns set
 		justify-content: center;
+		// Fit max size and grow, scroll if necessary
+		flex: 1 1 100%;
+		height: 100%;
+		min-height: 0;
+		overflow-y: auto;
 	}
 
 	&__buttons {
@@ -295,7 +291,7 @@ export default {
 		justify-content: center;
 		width: 100%;
 		height: 100%;
-		margin: 0;
+		margin: 0 !important;
 		background-color: var(--color-main-background-translucent);
 	}
 }

apps/files/tests/js/newfilemenuSpec.js

@@ -62,41 +62,13 @@ describe('OCA.Files.NewFileMenu', function() {
 		beforeEach(function() {
 			createDirectoryStub = sinon.stub(FileList.prototype, 'createDirectory');
 			menu.$el.find('.menuitem').eq(1).click();
-			$input = menu.$el.find('form.filenameform input');
 		});
 		afterEach(function() {
 			createDirectoryStub.restore();
 		});
 
-		it('sets default text in field', function() {
-			// text + submit
-			expect($input.length).toEqual(2);
-			expect($input.val()).toEqual('New folder');
-		});
-		it('prevents entering invalid file names', function() {
-			$input.val('..');
-			$input.trigger(new $.Event('keyup', {keyCode: 13}));
-			$input.closest('form').submit();
-
-			expect(createDirectoryStub.notCalled).toEqual(true);
-		});
-		it('prevents entering file names that already exist', function() {
-			var inListStub = sinon.stub(fileList, 'inList').returns(true);
-			$input.val('existing.txt');
-			$input.trigger(new $.Event('keyup', {keyCode: 13}));
-			$input.closest('form').submit();
-
-			expect(createDirectoryStub.notCalled).toEqual(true);
-			inListStub.restore();
-		});
 		it('creates directory when clicking on create directory field', function() {
-			$input = menu.$el.find('form.filenameform input');
-			$input.val('some folder');
-			$input.trigger(new $.Event('keyup', {keyCode: 13}));
-			$input.closest('form').submit();
-
-			expect(createDirectoryStub.calledOnce).toEqual(true);
-			expect(createDirectoryStub.getCall(0).args[0]).toEqual('some folder');
+			expect(createDirectoryStub.getCall(0).args[0]).toEqual('New folder');
 		});
 	});
 	describe('custom entries', function() {
@@ -135,17 +107,7 @@ describe('OCA.Files.NewFileMenu', function() {
 		});
 		it('calls action handler when clicking on custom item', function() {
 			menu.$el.find('.menuitem').eq(2).click();
-			var $input = menu.$el.find('form.filenameform input');
-			$input.val('some name');
-			$input.trigger(new $.Event('keyup', {keyCode: 13}));
-			$input.closest('form').submit();
-
-			expect(actionStub.calledOnce).toEqual(true);
-			expect(actionStub.getCall(0).args[0]).toEqual('some name');
-		});
-		it('switching fields removes the previous form', function() {
-			menu.$el.find('.menuitem').eq(2).click();
-			expect(menu.$el.find('form').length).toEqual(1);
+			expect(actionStub.getCall(0).args[0]).toEqual('New text file.txt');
 		});
 	});
 });

tests/acceptance/features/app-comments.feature

@@ -179,7 +179,7 @@ Feature: app-comments
     And I see that the file is shared with "user0"
     And I enter in the folder named "Folder"
     And I create a new folder named "Child folder"
-    # The details view should already be open
+    And I open the details view for "Child folder"
     And I open the "Comments" tab in the details view
     And I create a new comment with "Hello world" as message
     And I see a comment with "Hello world" as message
@@ -206,7 +206,7 @@ Feature: app-comments
     And I open the Files app
     And I enter in the folder named "Folder"
     And I create a new folder named "Child folder"
-    # The details view should already be open
+    And I open the details view for "Child folder"
     And I open the "Comments" tab in the details view
     And I create a new comment with "Hello world" as message
     And I see a comment with "Hello world" as message