From b9b49fd98801ac61fd07761ae647f3c161546f97 Mon Sep 17 00:00:00 2001
From: Julien Veyssier <julien-nc@posteo.net>
Date: Tue, 1 Aug 2023 11:43:13 +0200
Subject: [PATCH] move long click handlers into methods

Signed-off-by: Julien Veyssier <julien-nc@posteo.net>
---
 apps/settings/src/components/AdminAI.vue | 22 +++++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/apps/settings/src/components/AdminAI.vue b/apps/settings/src/components/AdminAI.vue
index 70c9c548615c7..51e5c5cede6dc 100644
--- a/apps/settings/src/components/AdminAI.vue
+++ b/apps/settings/src/components/AdminAI.vue
@@ -4,9 +4,9 @@
 			:description="t('settings', 'Machine translation can be implemented by different apps. Here you can define the precedence of the machine translation apps you have installed at the moment.')">
 			<draggable v-model="settings['ai.translation_provider_preferences']" @change="saveChanges">
 				<div v-for="(providerClass, i) in settings['ai.translation_provider_preferences']" :key="providerClass" class="draggable__item">
-					<DragVerticalIcon /> <span class="draggable__number">{{ i+1 }}</span> {{ translationProviders.find(p => p.class === providerClass)?.name }}
-					<NcButton aria-label="Move up" type="tertiary" @click="settings['ai.translation_provider_preferences'].splice(Math.min(i-1,0), 0, ...settings['ai.translation_provider_preferences'].splice(i, 1)); saveChanges()"><template #icon><ArrowUpIcon /></template></NcButton>
-					<NcButton aria-label="Move down" type="tertiary" @click="settings['ai.translation_provider_preferences'].splice(i+1, 0, ...settings['ai.translation_provider_preferences'].splice(i, 1)); saveChanges()"><template #icon><ArrowDownIcon /></template></NcButton>
+					<DragVerticalIcon /> <span class="draggable__number">{{ i + 1 }}</span> {{ translationProviders.find(p => p.class === providerClass)?.name }}
+					<NcButton aria-label="Move up" type="tertiary" @click="moveUp(i)"><template #icon><ArrowUpIcon /></template></NcButton>
+					<NcButton aria-label="Move down" type="tertiary" @click="moveDown(i)"><template #icon><ArrowDownIcon /></template></NcButton>
 				</div>
 			</draggable>
 		</NcSettingsSection>
@@ -96,6 +96,22 @@ export default {
 		}
 	},
 	methods: {
+	  moveUp(i) {
+			this.settings['ai.translation_provider_preferences'].splice(
+			  Math.min(i - 1, 0),
+				0,
+				...this.settings['ai.translation_provider_preferences'].splice(i, 1)
+			)
+			this.saveChanges()
+		},
+		moveDown(i) {
+	  	this.settings['ai.translation_provider_preferences'].splice(
+				i + 1,
+				0,
+				...this.settings['ai.translation_provider_preferences'].splice(i, 1)
+			)
+			this.saveChanges()
+		},
 		async saveChanges() {
 			this.loading = true
 			const data = { settings: this.settings }