(follow-up) Minor javascript refactoring

src/components/CallView/Grid/Grid.vue

@@ -438,7 +438,7 @@ export default {
 		// Hides or displays the `grid-navigation next` button
 		hasNextPage() {
 			if (this.displayedVideos.length !== 0 && this.hasPagination) {
-				return this.displayedVideos[this.displayedVideos.length - 1] !== this.videos[this.videos.length - 1]
+				return this.displayedVideos.at(-1) !== this.videos.at(-1)
 			} else {
 				return false
 			}

src/components/CallView/shared/EmptyCallView.vue

@@ -32,7 +32,7 @@
 			</p>
 			<NcButton v-if="showLink"
 				type="primary"
-				@click.stop.prevent="handleCopyLink">
+				@click.stop="handleCopyLink">
 				{{ t('spreed', 'Copy link') }}
 			</NcButton>
 		</template>

src/components/ConversationSettings/DangerZone.vue

@@ -32,7 +32,7 @@
 				<p class="danger-zone__hint">
 					{{ t('spreed', 'Once a conversation is left, to rejoin a closed conversation, an invite is needed. An open conversation can be rejoined at any time.') }}
 				</p>
-				<NcButton type="warning" @click.prevent.exact="leaveConversation">
+				<NcButton type="warning" @click="leaveConversation">
 					{{ t('spreed', 'Leave conversation') }}
 				</NcButton>
 			</div>
@@ -44,7 +44,7 @@
 					{{ t('spreed', 'Permanently delete this conversation.') }}
 				</p>
 				<NcButton type="error"
-					@click.prevent.exact="deleteConversation">
+					@click="deleteConversation">
 					{{ t('spreed', 'Delete conversation') }}
 				</NcButton>
 			</div>
@@ -56,7 +56,7 @@
 					{{ t('spreed', 'Permanently delete all the messages in this conversation.') }}
 				</p>
 				<NcButton type="error"
-					@click.prevent.exact="clearChatHistory">
+					@click="clearChatHistory">
 					{{ t('spreed', 'Delete chat messages') }}
 				</NcButton>
 			</div>

src/components/ConversationSettings/ExpirationSettings.vue

@@ -100,7 +100,7 @@ export default {
 				return option
 			}
 
-			return this.expirationOptions[this.expirationOptions.length - 1]
+			return this.expirationOptions.at(-1)
 		},
 	},
 

src/components/ConversationSettings/LinkShareSettings.vue

@@ -68,7 +68,7 @@
 		<div class="app-settings-subsection app-settings-subsection__buttons">
 			<NcButton ref="copyLinkButton"
 				:wide="true"
-				@click.prevent="handleCopyLink"
+				@click="handleCopyLink"
 				@keydown.enter="handleCopyLink">
 				<template #icon>
 					<ClipboardTextOutline />
@@ -78,7 +78,7 @@
 			<NcButton v-if="isSharedPublicly"
 				:disabled="isSendingInvitations"
 				:wide="true"
-				@click.prevent="handleResendInvitations"
+				@click="handleResendInvitations"
 				@keydown.enter="handleResendInvitations">
 				<template #icon>
 					<Email />

src/components/ConversationSettings/NotificationsSettings.vue

@@ -24,45 +24,19 @@
 		<h4 class="app-settings-section__subtitle">
 			{{ t('spreed', 'Notifications') }}
 		</h4>
-		<a href="#"
-			class="radio-element"
-			:class="{'radio-element--active': isNotifyAlways}"
-			@click.prevent.exact="setNotificationLevel(1)">
-			<VolumeHigh :size="20"
-				class="radio-element__icon" />
-			<label class="radio-element__label">
-				{{ t('spreed', 'All messages') }}
-			</label>
-			<Check v-if="isNotifyAlways"
-				class="check"
-				:size="20" />
-		</a>
-		<a href="#"
-			class="radio-element"
-			:class="{'radio-element--active': isNotifyMention}"
-			@click.prevent.exact="setNotificationLevel(2)">
-			<Account :size="20"
-				class="radio-element__icon" />
-			<label class="radio-element__label">
-				{{ t('spreed', '@-mentions only') }}
-			</label>
-			<Check v-if="isNotifyMention"
-				class="check"
-				:size="20" />
-		</a>
-		<a href="#"
-			class="radio-element"
-			:class="{'radio-element--active': isNotifyNever}"
-			@click.prevent.exact="setNotificationLevel(3)">
-			<VolumeOff :size="20"
-				class="radio-element__icon" />
-			<label class="radio-element__label">
-				{{ t('spreed', 'Off') }}
-			</label>
-			<Check v-if="isNotifyNever"
-				class="check"
-				:size="20" />
-		</a>
+
+		<NcCheckboxRadioSwitch v-for="level in notificationLevels"
+			:key="level.value"
+			:value="level.value.toString()"
+			:checked.sync="notificationLevel"
+			name="notification_level"
+			type="radio"
+			@update:checked="setNotificationLevel">
+			<VolumeHigh v-if="level.value === PARTICIPANT.NOTIFY.ALWAYS" class="radio__icon" />
+			<Account v-else-if="level.value === PARTICIPANT.NOTIFY.MENTION" class="radio__icon" />
+			<VolumeOff v-else class="radio__icon" />
+			{{ level.label }}
+		</NcCheckboxRadioSwitch>
 
 		<NcCheckboxRadioSwitch id="notification_calls"
 			type="switch"
@@ -75,14 +49,19 @@
 
 <script>
 import Account from 'vue-material-design-icons/Account.vue'
-import Check from 'vue-material-design-icons/Check.vue'
 import VolumeHigh from 'vue-material-design-icons/VolumeHigh.vue'
 import VolumeOff from 'vue-material-design-icons/VolumeOff.vue'
 
 import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
 
 import { PARTICIPANT } from '../../constants.js'
 
+const notificationLevels = [
+	{ value: PARTICIPANT.NOTIFY.ALWAYS, label: t('spreed', 'All messages') },
+	{ value: PARTICIPANT.NOTIFY.MENTION, label: t('spreed', '@-mentions only') },
+	{ value: PARTICIPANT.NOTIFY.NEVER, label: t('spreed', 'Off') },
+]
+
 export default {
 	name: 'NotificationsSettings',
 
@@ -91,7 +70,6 @@ export default {
 		VolumeHigh,
 		Account,
 		VolumeOff,
-		Check,
 	},
 
 	props: {
@@ -101,32 +79,18 @@ export default {
 		},
 	},
 
-	data() {
+	setup() {
 		return {
-			notifyCalls: true,
+			PARTICIPANT,
+			notificationLevels,
 		}
 	},
 
-	computed: {
-		token() {
-			return this.conversation.token
-		},
-
-		isNotifyAlways() {
-			return this.conversation.notificationLevel === PARTICIPANT.NOTIFY.ALWAYS
-		},
-
-		isNotifyMention() {
-			return this.conversation.notificationLevel === PARTICIPANT.NOTIFY.MENTION
-		},
-
-		isNotifyNever() {
-			return this.conversation.notificationLevel === PARTICIPANT.NOTIFY.NEVER
-		},
-	},
-
-	mounted() {
-		this.notifyCalls = this.conversation.notificationCalls === PARTICIPANT.NOTIFY_CALLS.ON
+	data() {
+		return {
+			notifyCalls: this.conversation.notificationCalls === PARTICIPANT.NOTIFY_CALLS.ON,
+			notificationLevel: this.conversation.notificationLevel.toString(),
+		}
 	},
 
 	methods: {
@@ -136,7 +100,7 @@ export default {
 		 * @param {number} notificationLevel The notification level to set.
 		 */
 		async setNotificationLevel(notificationLevel) {
-			await this.$store.dispatch('setNotificationLevel', { token: this.token, notificationLevel })
+			await this.$store.dispatch('setNotificationLevel', { token: this.conversation.token, notificationLevel })
 		},
 
 		/**
@@ -146,41 +110,17 @@ export default {
 		 */
 		async setNotificationCalls(isChecked) {
 			const notificationCalls = isChecked ? PARTICIPANT.NOTIFY_CALLS.ON : PARTICIPANT.NOTIFY_CALLS.OFF
-			await this.$store.dispatch('setNotificationCalls', { token: this.token, notificationCalls })
+			await this.$store.dispatch('setNotificationCalls', { token: this.conversation.token, notificationCalls })
 		},
 	},
 }
 </script>
 
 <style lang="scss" scoped>
-.radio-element {
-	display: flex;
-	align-items: center;
-	height: 44px;
-	padding: 0 12px;
-	margin: 4px 0;
-	border-radius: var(--border-radius-pill);
-	&:hover,
-	&:focus {
-		background-color: var(--color-background-hover);
-	}
-	&--active{
-		background-color: var(--color-primary-element-light) !important;
-	}
-	&__icon {
-		display: flex;
-	}
-	&__label {
-		margin-left: 12px;
-	}
-}
-
-h4 {
-	font-weight: bold;
-}
-
-.check {
+.radio__icon {
 	display: flex;
-	margin: 0 8px 0 auto;
+	width: var(--default-clickable-area);
+	height: var(--default-clickable-area);
+	margin-right: var(--default-grid-baseline);
 }
 </style>

src/components/LeftSidebar/ConversationsList/Conversation.vue

@@ -48,43 +48,43 @@
 		<template v-if="!isSearchResult" #actions>
 			<NcActionButton v-if="canFavorite"
 				:close-after-click="true"
-				@click.prevent.exact="toggleFavoriteConversation">
+				@click="toggleFavoriteConversation">
 				<template #icon>
 					<Star v-if="item.isFavorite" :size="20" />
 					<Star v-else :size="20" :fill-color="'#FFCC00'" />
 				</template>
 				{{ labelFavorite }}
 			</NcActionButton>
 			<NcActionButton icon="icon-clippy"
-				@click.stop.prevent="handleCopyLink">
+				@click.stop="handleCopyLink">
 				{{ t('spreed', 'Copy link') }}
 			</NcActionButton>
 			<NcActionButton v-if="item.unreadMessages"
 				:close-after-click="true"
-				@click.prevent.exact="markConversationAsRead">
+				@click="markConversationAsRead">
 				<template #icon>
 					<EyeOutline :size="16" />
 				</template>
 				{{ t('spreed', 'Mark as read') }}
 			</NcActionButton>
 			<NcActionButton v-else
 				:close-after-click="true"
-				@click.prevent.exact="markConversationAsUnread">
+				@click="markConversationAsUnread">
 				<template #icon>
 					<EyeOffOutline :size="16" />
 				</template>
 				{{ t('spreed', 'Mark as unread') }}
 			</NcActionButton>
 			<NcActionButton :close-after-click="true"
-				@click.prevent.exact="showConversationSettings">
+				@click="showConversationSettings">
 				<template #icon>
 					<Cog :size="20" />
 				</template>
 				{{ t('spreed', 'Conversation settings') }}
 			</NcActionButton>
 			<NcActionButton v-if="canLeaveConversation"
 				:close-after-click="true"
-				@click.prevent.exact="leaveConversation">
+				@click="leaveConversation">
 				<template #icon>
 					<ExitToApp :size="16" />
 				</template>
@@ -93,7 +93,7 @@
 			<NcActionButton v-if="canDeleteConversation"
 				:close-after-click="true"
 				class="critical"
-				@click.prevent.exact="deleteConversation">
+				@click="deleteConversation">
 				<template #icon>
 					<Delete :size="16" />
 				</template>
@@ -108,7 +108,7 @@
 				{{ t('spreed', 'Join conversation') }}
 			</NcActionButton>
 			<NcActionButton icon="icon-clippy"
-				@click.stop.prevent="handleCopyLink">
+				@click.stop="handleCopyLink">
 				{{ t('spreed', 'Copy link') }}
 			</NcActionButton>
 		</template>

src/components/LeftSidebar/LeftSidebar.spec.js

@@ -473,7 +473,7 @@ describe('LeftSidebar.vue', () => {
 					expect(captionsEls.at(0).props('title')).toBe('Conversations')
 				}
 				// last dynamic caption for "No search results"
-				expect(captionsEls.at(captionsEls.length - 1).props('title')).toBe(expectedCaption)
+				expect(captionsEls.at(-1).props('title')).toBe(expectedCaption)
 
 				return wrapper
 			}

src/components/LeftSidebar/LeftSidebar.vue

@@ -540,7 +540,6 @@ export default {
 			if (this?.conversationsList[0]?.token) {
 				this.$router.push({ name: 'conversation', params: { token: this.conversationsList[0].token } })
 			}
-			this.handleClickSearchResult()
 		},
 
 		scrollToConversation(token) {

src/components/LeftSidebar/SearchBox/SearchBox.vue

@@ -27,7 +27,7 @@
 			:show-trailing-button="isSearching"
 			trailing-button-icon="close"
 			@trailing-button-click="abortSearch"
-			@keypress.enter.prevent="handleSubmit">
+			@keypress.enter="handleSubmit">
 			<Magnify :size="16" />
 		</NcTextField>
 	</form>

src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.vue

@@ -73,7 +73,7 @@
 				</NcActionButton>
 				<NcActionButton icon="icon-external"
 					:close-after-click="true"
-					@click.stop.prevent="handleCopyMessageLink">
+					@click.stop="handleCopyMessageLink">
 					{{ t('spreed', 'Copy message link') }}
 				</NcActionButton>
 				<NcActionButton :close-after-click="true"

src/components/MessagesList/MessagesList.vue

@@ -208,7 +208,7 @@ export default {
 					groups.push([message])
 					lastMessage = message
 				} else {
-					groups[groups.length - 1].push(message)
+					groups.at(-1).push(message)
 				}
 			}
 			return groups

src/components/NewMessage/NewMessage.vue

@@ -95,7 +95,7 @@
 						:placeholder="placeholderText"
 						:aria-label="placeholderText"
 						@shortkey="focusInput"
-						@keydown.esc.prevent="handleInputEsc"
+						@keydown.esc="handleInputEsc"
 						@tribute-active-true.native="isTributePickerActive = true"
 						@tribute-active-false.native="isTributePickerActive = false"
 						@paste="handlePastedFiles"

src/components/NewMessage/NewMessagePollEditor.vue

@@ -148,7 +148,7 @@ export default {
 		addOption() {
 			this.pollOptions.push('')
 			this.$nextTick(() => {
-				this.$refs.pollOption[this.pollOptions.length - 1].$el.querySelector('.input-field__input').focus()
+				this.$refs.pollOption.at(-1).$el.querySelector('.input-field__input').focus()
 			})
 		},
 

src/components/RightSidebar/Participants/ParticipantsList/Participant/Participant.spec.js

@@ -39,7 +39,7 @@ describe('Participant.vue', () => {
 		})
 
 		if (filteredCalls.length) {
-			return filteredCalls[filteredCalls.length - 1][1].value
+			return filteredCalls.at(-1)[1].value
 		}
 
 		return null