refactor: refactor plugin configuration component

Author: Ayideyia

frontend/src/views/PluginsView/components/PluginConfigItem.vue

@@ -0,0 +1,113 @@
+<script lang="ts" setup>
+import { ref, watch } from 'vue'
+
+import { deepClone, message } from '@/utils'
+
+import type { Plugin } from '@/types/app'
+
+interface Props {
+  plugin: Plugin
+  modelValue?: Recordable
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: () => ({}),
+})
+
+const emit = defineEmits(['change', 'update:modelValue'])
+
+const model = ref(deepClone(props.modelValue ?? {}))
+
+let internalUpdate = false
+
+watch(
+  () => props.modelValue,
+  (val) => {
+    if (!internalUpdate) {
+      model.value = val
+    }
+    internalUpdate = false
+  },
+  { deep: true },
+)
+
+const getOptions = (val: string[]) => {
+  return val.map((v) => {
+    const arr = v.split(',')
+    return { label: arr[0], value: arr[1] || arr[0] }
+  })
+}
+
+const emitUpdate = () => {
+  const val = deepClone(model.value)
+  emit('update:modelValue', val)
+  emit('change', val)
+  internalUpdate = true
+}
+
+const onChange = (key: string, originalValue: any, value: any) => {
+  // TODO: array order
+  if (JSON.stringify(originalValue) === JSON.stringify(value)) {
+    delete model.value[key]
+  } else {
+    model.value[key] = value
+  }
+  emitUpdate()
+}
+
+const handleReset = (key: string) => {
+  delete model.value[key]
+  emitUpdate()
+}
+
+const handleResetAll = () => {
+  model.value = {}
+  emitUpdate()
+  message.success('common.success')
+}
+
+defineExpose({ reset: handleResetAll })
+</script>
+
+<template>
+  <div>
+    <slot name="header" v-bind="{ handleResetAll }"></slot>
+    <Card
+      v-for="(conf, index) in plugin.configuration"
+      :key="conf.id"
+      :title="`${index + 1}. ${conf.title}`"
+      :class="{ warn: model[conf.key] !== undefined }"
+      class="card mb-8"
+    >
+      <template v-if="model[conf.key] !== undefined" #extra>
+        <Button
+          @click="handleReset(conf.key)"
+          :icon-size="12"
+          icon="clear"
+          type="text"
+          size="small"
+          v-tips="'settings.plugin.resetSetting'"
+        />
+      </template>
+      <div class="mb-8 text-12">{{ conf.description }}</div>
+      <Component
+        :modelValue="model[conf.key] ?? conf.value"
+        @change="(val: any) => onChange(conf.key, conf.value, val)"
+        :is="conf.component"
+        :options="getOptions(conf.options)"
+        :autofocus="false"
+        editable
+        lang="yaml"
+      />
+    </Card>
+  </div>
+</template>
+
+<style scoped>
+.card {
+  border-left: 2px solid transparent;
+}
+.warn {
+  border-left: 2px solid var(--primary-color);
+}
+</style>

frontend/src/views/PluginsView/components/PluginConfiguration.vue

@@ -0,0 +1,109 @@
+<script setup lang="ts">
+import { ref, inject, h, useTemplateRef } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { PluginTriggerEvent } from '@/enums/app'
+import { usePluginsStore, useAppSettingsStore } from '@/stores'
+import { message } from '@/utils'
+
+import Button from '@/components/Button/index.vue'
+
+import PluginConfigItem from './PluginConfigItem.vue'
+
+import type { Plugin } from '@/types/app'
+
+interface Props {
+  plugin: Plugin
+}
+
+const props = defineProps<Props>()
+
+const { t } = useI18n()
+const pluginsStore = usePluginsStore()
+const appSettingsStore = useAppSettingsStore()
+const pluginConfigRef = useTemplateRef('pluginConfigRef')
+
+const loading = ref(false)
+const settings = ref(appSettingsStore.app.pluginSettings[props.plugin.id] ?? {})
+const oldSettings = settings.value
+const originalSettings = props.plugin.configuration.reduce((p, { key, value }) => {
+  p[key] = value
+  return p
+}, {} as Recordable)
+
+const handleCancel = inject('cancel') as any
+const handleSubmit = inject('submit') as any
+
+const handleSave = async () => {
+  loading.value = true
+  try {
+    await pluginsStore.manualTrigger(
+      props.plugin.id,
+      PluginTriggerEvent.OnConfigure,
+      Object.assign({}, originalSettings, settings.value),
+      Object.assign({}, originalSettings, oldSettings),
+    )
+  } catch (error: any) {
+    const errors = [
+      props.plugin.id + ' Not Found',
+      'is Missing source code',
+      'Disabled',
+      "Can't find variable: " + PluginTriggerEvent.OnConfigure,
+      PluginTriggerEvent.OnConfigure + ' is not defined',
+    ]
+    if (errors.every((v) => !error.includes(v))) {
+      message.error(error)
+      return
+    }
+  } finally {
+    loading.value = false
+  }
+
+  if (JSON.stringify(settings.value) === '{}') {
+    delete appSettingsStore.app.pluginSettings[props.plugin.id]
+  } else {
+    appSettingsStore.app.pluginSettings[props.plugin.id] = settings.value
+  }
+
+  await handleSubmit()
+  message.success('common.success')
+}
+
+const modalSlots = {
+  action: () =>
+    h(
+      Button,
+      {
+        type: 'link',
+        class: 'mr-auto',
+        onClick: () => pluginConfigRef.value?.reset(),
+      },
+      () => t('plugin.restore'),
+    ),
+  cancel: () =>
+    h(
+      Button,
+      {
+        disabled: loading.value,
+        onClick: handleCancel,
+      },
+      () => t('common.cancel'),
+    ),
+  submit: () =>
+    h(
+      Button,
+      {
+        type: 'primary',
+        loading: loading.value,
+        onClick: handleSave,
+      },
+      () => t('common.save'),
+    ),
+}
+
+defineExpose({ modalSlots })
+</script>
+
+<template>
+  <PluginConfigItem ref="pluginConfigRef" :plugin="props.plugin" v-model="settings" />
+</template>

frontend/src/views/PluginsView/components/PluginConfigurator.vue

@@ -12,7 +12,7 @@ import Button from '@/components/Button/index.vue'
 import { useModal } from '@/components/Modal'
 
 import PluginChangelog from './components/PluginChangelog.vue'
-import PluginConfiguration from './components/PluginConfiguration.vue'
+import PluginConfigurator from './components/PluginConfigurator.vue'
 import PluginForm from './components/PluginForm.vue'
 import PluginHub from './components/PluginHub.vue'
 import PluginView from './components/PluginView.vue'
@@ -174,7 +174,7 @@ const generateMenus = (p: Plugin) => {
       label: 'plugins.configuration',
       handler: async () => {
         modalApi.setProps({ title: 'plugins.configuration' })
-        modalApi.setContent(PluginConfiguration, { id: p.id }).open()
+        modalApi.setContent(PluginConfigurator, { plugin: p }).open()
       },
     })
   }