Merge pull request #2757 from nextcloud/bugfix/2670/rename-conversations

Add ability to rename conversations

package-lock.json

@@ -2773,9 +2773,9 @@
 			}
 		},
 		"@nextcloud/vue": {
-			"version": "1.2.5",
-			"resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-1.2.5.tgz",
-			"integrity": "sha512-PW7QKBYFoUwU3TuKx3qAVm/7bNENh7jiMO/atkAAstWgupXiqv59j24mejZRQeGECsP2AzF9nWbbwT6iM7YcwQ==",
+			"version": "1.2.7",
+			"resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-1.2.7.tgz",
+			"integrity": "sha512-hw6nqP6CpkFdj+o8wwVllSmC2h4f+oE+bSoiynlzHFt+TOxgrxh/wABkafEW7DmSCfTo4cOze9aVyoRU/zu8VA==",
 			"requires": {
 				"@nextcloud/axios": "^1.1.0",
 				"@nextcloud/router": "^1.0.0",

package.json

@@ -22,7 +22,7 @@
 		"@nextcloud/l10n": "^1.0.1",
 		"@nextcloud/moment": "^1.1.0",
 		"@nextcloud/router": "^1.0.0",
-		"@nextcloud/vue": "^1.2.5",
+		"@nextcloud/vue": "^1.2.7",
 		"attachmediastream": "^2.1.0",
 		"crypto-js": "^3.1.9-1",
 		"debounce": "^1.2.0",

src/components/RightSidebar/RightSidebar.vue

@@ -25,10 +25,20 @@
 		v-if="opened"
 		:title="conversation.displayName"
 		:starred="isFavorited"
+		:title-editable="canModerate && isRenamingConversation"
 		@update:starred="onFavoriteChange"
+		@submit-title="handleSubmitTitle"
+		@dismiss-editing="isRenamingConversation = false"
 		@close="handleClose">
 		<template v-if="conversationHasSettings && showModerationMenu"
 			v-slot:secondary-actions>
+			<ActionButton
+				v-if="canModerate"
+				:close-after-click="true"
+				icon="icon-rename"
+				@click="handleRenameConversation">
+				{{ t('spreed', 'Rename conversation') }}
+			</ActionButton>
 			<ActionText
 				v-if="canFullModerate"
 				icon="icon-shared"
@@ -139,6 +149,7 @@ import ActionCheckbox from '@nextcloud/vue/dist/Components/ActionCheckbox'
 import ActionInput from '@nextcloud/vue/dist/Components/ActionInput'
 import ActionText from '@nextcloud/vue/dist/Components/ActionText'
 import AppSidebar from '@nextcloud/vue/dist/Components/AppSidebar'
+import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
 import AppSidebarTab from '@nextcloud/vue/dist/Components/AppSidebarTab'
 import ChatView from '../ChatView'
 import { CollectionList } from 'nextcloud-vue-collections'
@@ -148,6 +159,7 @@ import {
 	addToFavorites,
 	removeFromFavorites,
 	setConversationPassword,
+	setConversationName,
 } from '../../services/conversationsService'
 import isInLobby from '../../mixins/isInLobby'
 import { setGuestUserName } from '../../services/participantsService'
@@ -158,6 +170,7 @@ export default {
 		ActionCheckbox,
 		ActionInput,
 		ActionText,
+		ActionButton,
 		AppSidebar,
 		AppSidebarTab,
 		ChatView,
@@ -186,6 +199,10 @@ export default {
 			isEditingPassword: false,
 			guestUserName: '',
 			isEditingUsername: false,
+			// Changes the conversation title into an input field for renaming
+			isRenamingConversation: false,
+			// The conversation name (while editing)
+			conversationName: '',
 		}
 	},
 
@@ -377,6 +394,19 @@ export default {
 				this.$refs.usernameInput.focus()
 			})
 		},
+
+		handleRenameConversation() {
+			this.isRenamingConversation = true
+		},
+		async handleSubmitTitle(event) {
+			const name = event.target[0].value.trim()
+			try {
+				await setConversationName(this.token, name)
+				this.isRenamingConversation = false
+			} catch (exception) {
+				console.debug(exception)
+			}
+		},
 	},
 }
 </script>
@@ -398,23 +428,6 @@ export default {
 	padding: 0;
 }
 
-/** TODO: fix these in the nextcloud-vue library **/
-
-::v-deep .app-sidebar-header {
-	&__menu {
-	top: 6px !important;
-	margin-top: 0 !important;
-	right: 54px !important;
-	}
-	&__title {
-		line-height: inherit;
-	}
-}
-::v-deep .app-sidebar__close {
-	top: 6px !important;
-	right: 6px !important;
-}
-
 /** Username form for guest users */
 .username-form {
 	padding: 0 12px;

src/services/conversationsService.js

@@ -134,6 +134,18 @@ const setConversationPassword = async function(token, password) {
 	return response
 }
 
+/**
+ * Set a conversation's name
+ * @param {string} token the conversation's token
+ * @param {string} name the name to be set
+ */
+const setConversationName = async function(token, name) {
+	const response = await axios.put(generateOcsUrl('apps/spreed/api/v1', 2) + `room/${token}`, {
+		roomName: name,
+	})
+	return response
+}
+
 /**
  * Delete a conversation.
  * @param {string} token The token of the conversation to be deleted.
@@ -247,4 +259,5 @@ export {
 	makePrivate,
 	changeLobbyState,
 	setConversationPassword,
+	setConversationName,
 }