Handle capabilities and mention editing and change edit timestamp design

Signed-off-by: DorraJaouad <dorra.jaoued7@gmail.com>
nextcloud · Jan 26, 2024 · de32f0b · de32f0b
1 parent 91c4451
commit de32f0b
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 15 deletions.
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.vue b/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.vue
@@ -66,17 +66,13 @@
 						{{ messageDateTime }}
 					</NcActionText>
 					<!-- Edited message timestamp -->
-					<NcActionButtonGroup v-if="lastEditTimestamp">
-						<NcActionText>
-							<template #icon>
-								<ClockEditOutline :size="16" />
-							</template>
-							{{ lastEditActorDisplayName }}
-						</NcActionText>
-						<NcActionText>
-							{{ editedDateTime }}
-						</NcActionText>
-					</NcActionButtonGroup>
+					<NcActionText v-if="lastEditTimestamp"
+						:name="lastEditActorDisplayName">
+						<template #icon>
+							<ClockEditOutline :size="16" />
+						</template>
+						{{ editedDateTime }}
+					</NcActionText>
 					<NcActionSeparator />
 
 					<NcActionButton v-if="supportReminders"
@@ -297,7 +293,6 @@ import { showError, showSuccess } from '@nextcloud/dialogs'
 import moment from '@nextcloud/moment'
 
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
-import NcActionButtonGroup from '@nextcloud/vue/dist/Components/NcActionButtonGroup.js'
 import NcActionInput from '@nextcloud/vue/dist/Components/NcActionInput.js'
 import NcActionLink from '@nextcloud/vue/dist/Components/NcActionLink.js'
 import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
@@ -314,12 +309,13 @@ import { useReactionsStore } from '../../../../../stores/reactions.js'
 
 const EmojiIndex = new EmojiIndexFactory(data)
 const supportReminders = getCapabilities()?.spreed?.features?.includes('remind-me-later')
+const canEditMessage = getCapabilities()?.spreed?.features?.includes('edit-messages')
+const canDeleteMessageUnlimited = getCapabilities()?.spreed?.features?.includes('delete-messages-unlimited')
 
 export default {
 	name: 'MessageButtonsBar',
 
 	components: {
-		NcActionButtonGroup,
 		NcActionButton,
 		NcActionInput,
 		NcActionLink,
@@ -518,7 +514,7 @@ export default {
 		},
 
 		isEditable() {
-			if (!this.isModifiable || this.isObjectShare
+			if (!canEditMessage || !this.isModifiable || this.isObjectShare
 					|| (!this.$store.getters.isModerator && !this.isMyMsg)) {
 				return false
 			}
@@ -531,7 +527,8 @@ export default {
 				return false
 			}
 
-			return (moment(this.timestamp * 1000).add(6, 'h')) > moment()
+			return ((moment(this.timestamp * 1000).add(6, 'h')) > moment()
+				|| canDeleteMessageUnlimited)
 				&& (this.messageType === 'comment' || this.messageType === 'voice-message')
 				&& !this.isDeleting
 				&& (this.isMyMsg

diff --git a/src/components/NewMessage/NewMessage.vue b/src/components/NewMessage/NewMessage.vue
@@ -87,6 +87,10 @@
 						:can-cancel="!!parentMessage"
 						:edit-message="!!messageToEdit" />
 				</div>
+				<!-- mention editing hint -->
+				<NcNoteCard v-if="showMentionEditHint" type="warning">
+					<p>{{ t('spreed','Adding a mention will only notify users who did not read the message.') }}</p>
+				</NcNoteCard>
 				<NcRichContenteditable ref="richContenteditable"
 					v-shortkey.once="$options.disableKeyboardShortcuts ? null : ['c']"
 					:value.sync="text"
@@ -194,13 +198,15 @@ import EmoticonOutline from 'vue-material-design-icons/EmoticonOutline.vue'
 import Send from 'vue-material-design-icons/Send.vue'
 
 import { getCapabilities } from '@nextcloud/capabilities'
+import { showError } from '@nextcloud/dialogs'
 import { FilePickerVue } from '@nextcloud/dialogs/filepicker.js'
 import { generateOcsUrl } from '@nextcloud/router'
 
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcEmojiPicker from '@nextcloud/vue/dist/Components/NcEmojiPicker.js'
+import NcNoteCard from '@nextcloud/vue/dist/Components/NcNoteCard.js'
 import NcRichContenteditable from '@nextcloud/vue/dist/Components/NcRichContenteditable.js'
 
 import NewMessageAbsenceInfo from './NewMessageAbsenceInfo.vue'
@@ -235,6 +241,7 @@ export default {
 		NcActions,
 		NcButton,
 		NcEmojiPicker,
+		NcNoteCard,
 		NcRichContenteditable,
 		NewMessageAbsenceInfo,
 		NewMessageAttachments,
@@ -452,6 +459,10 @@ export default {
 		chatEditInput() {
 			return this.chatExtrasStore.getChatEditInput(this.token)
 		},
+
+		showMentionEditHint() {
+			return this.chatEditInput?.includes('@')
+		},
 	},
 
 	watch: {
@@ -689,6 +700,7 @@ export default {
 				this.chatExtrasStore.removeMessageIdToEdit(this.token)
 			} catch {
 				this.$emit('failure')
+				showError(t('spreed', 'The message could not be edited'))
 			}
 		},