move long click handlers into methods

Signed-off-by: Julien Veyssier <julien-nc@posteo.net>
(cherry picked from commit 577640663b649836731ea4fb2ab60f6b6e156553)

diff --git a/apps/settings/src/components/AdminAI.vue b/apps/settings/src/components/AdminAI.vue
index 70c9c548615c7a0f5831c5a60c766b46c732e82d..51e5c5cede6dc0092a1a4faa8188c1ebf5a184f6 100644 (file)
--- 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 }