AI Admin settings: Implement mt settings, stt settings and tp settings

Signed-off-by: Marcel Klehr <mklehr@gmx.net>
(cherry picked from commit 4e33d044443973f2fc82e74bca0bc43e845a36e7)

diff --git a/apps/settings/src/components/AdminAI.vue b/apps/settings/src/components/AdminAI.vue
index 2e1104a49d288078825a516d7b5c0ff23dae6923..f11cb0c3da04614288261d982b25471f2daf03bb 100644 (file)
--- a/apps/settings/src/components/AdminAI.vue
+++ b/apps/settings/src/components/AdminAI.vue
@@ -1,34 +1,53 @@
 <template>
-       <NcSettingsSection :title="t('settings', 'Artificial Intelligence')"
-               :description="t('settings', 'Artificial Intelligence features can be implemented by different apps. Here you can set which app should be used for which features.')">
-               <h3>{{ t('settings', 'Translations') }}</h3>
-               <h3>{{ t('settings', 'Speech-To-Text') }}</h3>
-               <template v-for="provider in sttProviders">
-                       <NcCheckboxRadioSwitch :key="provider.class"
-                               :checked.sync="settings['ai.stt_provider']"
-                               :value="provider.class"
-                               name="stt_provider"
-                               type="radio">{{ provider.name }}</NcCheckboxRadioSwitch>
-               </template>
-               <template v-if="sttProviders.length === 0">
-               <NcCheckboxRadioSwitch disabled type="radio">{{ t('settings', 'No apps are currently installed that provide Speech-To-Text functionality') }}</NcCheckboxRadioSwitch>
-               </template>
-               <h3>{{ t('settings', 'Text processing') }}</h3>
-               <template v-for="(type, provider) in settings['ai.textprocessing_provider_preferences']">
-                       <h4>{{ type }}</h4>
-                       <!--<p>{{ getTaskType(type).description }}</p>
-                       <NcSelect v-model="settings['ai.textprocessing_provider_preferences'][type]" :options="textProcessingProviders.filter(provider => provider.taskType === type)" />-->
-               </template>
-               <template v-if="Object.keys(settings['ai.textprocessing_provider_preferences']).length === 0 || !Array.isArray(this.textProcessingTaskTypes)">
-                       <p>{{ t('settings', 'No apps are currently installed that provide Text processing functionality') }}</p>
-               </template>
-       </NcSettingsSection>
+       <div>
+               <NcSettingsSection :title="t('settings', 'Machine translation')"
+                       :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']">
+                               <div v-for="(providerClass, i) in settings['ai.translation_provider_preferences']" :key="providerClass" class="draggable__item"><span class="draggable__number">{{i+1}}</span> {{ translationProviders.find(p => p.class === providerClass)?.name }}</div>
+                       </draggable>
+               </NcSettingsSection>
+               <NcSettingsSection :title="t('settings', 'Speech-To-Text')"
+                       :description="t('settings', 'Speech-To-Text can be implemented by different apps. Here you can set which app should be used.')">
+                       <template v-for="provider in sttProviders">
+                               <NcCheckboxRadioSwitch :key="provider.class"
+                                       :checked.sync="settings['ai.stt_provider']"
+                                       :value="provider.class"
+                                       name="stt_provider"
+                                       type="radio">
+                                       {{ provider.name }}
+                               </NcCheckboxRadioSwitch>
+                       </template>
+                       <template v-if="sttProviders.length === 0">
+                               <NcCheckboxRadioSwitch disabled type="radio">
+                                       {{ t('settings', 'No apps are currently installed that provide Speech-To-Text functionality') }}
+                               </NcCheckboxRadioSwitch>
+                       </template>
+               </NcSettingsSection>
+               <NcSettingsSection :title="t('settings', 'Text processing')"
+                       :description="t('settings', 'Text processing tasks can be implemented by different apps. Here you can set which app should be used for which task.')">
+                       <template v-for="type in Object.keys(settings['ai.textprocessing_provider_preferences'])">
+                               <h3>{{ t('settings', 'Task:') }} {{ getTaskType(type).name }}</h3>
+                               <p>{{ getTaskType(type).description }}</p>
+                               <p>&nbsp;</p>
+                               <NcSelect v-model="settings['ai.textprocessing_provider_preferences'][type]"  :clearable="false" :options="textProcessingProviders.filter(p => p.taskType === type).map(p => p.class)">
+                                       <template #option="{label}">{{ textProcessingProviders.find(p => p.class === label)?.name }}</template>
+                                       <template #selected-option="{label}">{{ textProcessingProviders.find(p => p.class === label)?.name }}</template>
+                               </NcSelect>
+                               <p>&nbsp;</p>
+                       </template>
+                       <template v-if="Object.keys(settings['ai.textprocessing_provider_preferences']).length === 0 || !Array.isArray(textProcessingTaskTypes)">
+                               <p>{{ t('settings', 'No apps are currently installed that provide Text processing functionality') }}</p>
+                       </template>
+               </NcSettingsSection>
+       </div>
 </template>
 
 <script>
 import axios from '@nextcloud/axios'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
 import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection.js'
+import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js'
+import draggable from 'vuedraggable'
 import { loadState } from '@nextcloud/initial-state'
 
 import { generateUrl } from '@nextcloud/router'
@@ -38,6 +57,8 @@ export default {
        components: {
                NcCheckboxRadioSwitch,
                NcSettingsSection,
+               NcSelect,
+               draggable,
        },
        data() {
                return {
@@ -76,8 +97,20 @@ export default {
                  if (!Array.isArray(this.textProcessingTaskTypes)) {
                                return null
                        }
-                       return this.textProcessingTaskTypes.find(taskType => taskType === type)
-               }
+                       return this.textProcessingTaskTypes.find(taskType => taskType.class === type)
+               },
        },
 }
 </script>
+<style scoped>
+.draggable__item {
+       margin-bottom: 5px;
+}
+
+.draggable__number {
+       border-radius: 20px;
+       border: 2px solid var(--color-primary-default);
+       color: var(--color-primary-default);
+  padding: 2px 7px;
+}
+</style>