From 12d4135d691247bfae3f59a1d586eb6b331b7a05 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Tue, 26 Jul 2022 21:15:24 +0800
Subject: [PATCH] refactor: logic for plugin lifecircle management

Signed-off-by: Ryan Wang <i@ryanc.cc>
---
 src/modules/system/plugins/PluginDetail.vue   |  30 +----
 src/modules/system/plugins/PluginList.vue     | 114 ++++++------------
 .../system/plugins/composables/use-plugin.ts  |  74 ++++++++++++
 3 files changed, 115 insertions(+), 103 deletions(-)
 create mode 100644 src/modules/system/plugins/composables/use-plugin.ts

diff --git a/src/modules/system/plugins/PluginDetail.vue b/src/modules/system/plugins/PluginDetail.vue
index ee86b6041..e493ad7b4 100644
--- a/src/modules/system/plugins/PluginDetail.vue
+++ b/src/modules/system/plugins/PluginDetail.vue
@@ -1,42 +1,20 @@
 <script lang="ts" setup>
-import { useDialog, VSwitch, VTag } from "@halo-dev/components";
+import { VSwitch, VTag } from "@halo-dev/components";
 import type { Ref } from "vue";
 import { computed, inject, onMounted, ref } from "vue";
 import { apiClient } from "@halo-dev/admin-shared";
 import type { Plugin, Role } from "@halo-dev/api-client";
-import cloneDeep from "lodash.clonedeep";
 import { pluginLabels } from "@/constants/labels";
 import { rbacAnnotations } from "@/constants/annotations";
+import { usePluginLifeCycle } from "./composables/use-plugin";
 
 const plugin = inject<Ref<Plugin>>("plugin", ref({} as Plugin));
-
-const dialog = useDialog();
+const { changeStatus } = usePluginLifeCycle(plugin);
 
 const isStarted = computed(() => {
   return plugin.value.status?.phase === "STARTED" && plugin.value.spec.enabled;
 });
 
-const handleChangePluginStatus = async () => {
-  const pluginToUpdate = cloneDeep(plugin.value);
-
-  dialog.info({
-    title: `确定要${plugin.value.spec.enabled ? "停止" : "启动"}该插件吗？`,
-    onConfirm: async () => {
-      try {
-        pluginToUpdate.spec.enabled = !pluginToUpdate.spec.enabled;
-        await apiClient.extension.plugin.updatepluginHaloRunV1alpha1Plugin(
-          plugin.value.metadata.name,
-          pluginToUpdate
-        );
-      } catch (e) {
-        console.error(e);
-      } finally {
-        window.location.reload();
-      }
-    },
-  });
-};
-
 // TODO 临时解决方案
 interface RoleTemplateGroup {
   module: string | null | undefined;
@@ -98,7 +76,7 @@ onMounted(() => {
       </p>
     </div>
     <div v-permission="['system:plugins:manage']">
-      <VSwitch :model-value="isStarted" @change="handleChangePluginStatus" />
+      <VSwitch :model-value="isStarted" @change="changeStatus" />
     </div>
   </div>
   <div class="border-t border-gray-200">
diff --git a/src/modules/system/plugins/PluginList.vue b/src/modules/system/plugins/PluginList.vue
index f6cf86a2d..a3bd66d98 100644
--- a/src/modules/system/plugins/PluginList.vue
+++ b/src/modules/system/plugins/PluginList.vue
@@ -4,7 +4,6 @@ import {
   IconArrowDown,
   IconPlug,
   IconSettings,
-  useDialog,
   VButton,
   VCard,
   VPageHeader,
@@ -15,23 +14,15 @@ import {
 } from "@halo-dev/components";
 import PluginInstallModal from "./components/PluginInstallModal.vue";
 import { onMounted, ref } from "vue";
-import { useRouter } from "vue-router";
 import { apiClient } from "@halo-dev/admin-shared";
 import type { Plugin } from "@halo-dev/api-client";
-import cloneDeep from "lodash.clonedeep";
+import { usePluginLifeCycle } from "./composables/use-plugin";
 
 const plugins = ref<Plugin[]>([] as Plugin[]);
 const pluginInstall = ref(false);
+const selectedPlugin = ref<Plugin | null>(null);
 
-const router = useRouter();
-const dialog = useDialog();
-
-const handleRouteToDetail = (plugin: Plugin) => {
-  router.push({
-    name: "PluginDetail",
-    params: { name: plugin.metadata.name },
-  });
-};
+const { changeStatus, uninstall } = usePluginLifeCycle(selectedPlugin);
 
 const isStarted = (plugin: Plugin) => {
   return plugin.status?.phase === "STARTED" && plugin.spec.enabled;
@@ -47,58 +38,15 @@ const handleFetchPlugins = async () => {
   }
 };
 
-const handleChangeStatus = (plugin: Plugin) => {
-  const pluginToUpdate = cloneDeep(plugin);
+function handleChangeStatus(plugin: Plugin) {
+  selectedPlugin.value = plugin;
+  changeStatus();
+}
 
-  dialog.info({
-    title: `确定要${plugin.spec.enabled ? "停止" : "启动"}该插件吗？`,
-    onConfirm: async () => {
-      try {
-        pluginToUpdate.spec.enabled = !pluginToUpdate.spec.enabled;
-        await apiClient.extension.plugin.updatepluginHaloRunV1alpha1Plugin(
-          pluginToUpdate.metadata.name,
-          pluginToUpdate
-        );
-      } catch (e) {
-        console.error(e);
-      } finally {
-        window.location.reload();
-      }
-    },
-  });
-};
-
-const handleUninstall = (plugin: Plugin) => {
-  const { enabled } = plugin.spec;
-  dialog.warning({
-    title: `确定要卸载该插件吗？`,
-    description: `${
-      enabled ? "当前插件还在启用状态，将在停止运行后卸载。" : ""
-    }`,
-    confirmType: "danger",
-    confirmText: `${enabled ? "停止运行并卸载" : "卸载"}`,
-    onConfirm: async () => {
-      try {
-        if (enabled) {
-          const pluginToUpdate = cloneDeep(plugin);
-          pluginToUpdate.spec.enabled = false;
-          await apiClient.extension.plugin.updatepluginHaloRunV1alpha1Plugin(
-            plugin.metadata.name,
-            pluginToUpdate
-          );
-        }
-
-        await apiClient.extension.plugin.deletepluginHaloRunV1alpha1Plugin(
-          plugin.metadata.name
-        );
-      } catch (e) {
-        console.error(e);
-      } finally {
-        window.location.reload();
-      }
-    },
-  });
-};
+function handleUninstall(plugin: Plugin) {
+  selectedPlugin.value = plugin;
+  uninstall();
+}
 
 onMounted(handleFetchPlugins);
 </script>
@@ -266,25 +214,37 @@ onMounted(handleFetchPlugins);
           >
             <div class="relative flex flex-row items-center">
               <div v-if="plugin.spec.logo" class="mr-4">
-                <div
-                  class="h-12 w-12 rounded border bg-white p-1 hover:shadow-sm"
-                  @click.stop="handleRouteToDetail(plugin)"
+                <RouterLink
+                  :to="{
+                    name: 'PluginDetail',
+                    params: { name: plugin.metadata.name },
+                  }"
                 >
-                  <img
-                    :alt="plugin.metadata.name"
-                    :src="plugin.spec.logo"
-                    class="h-full w-full"
-                  />
-                </div>
+                  <div
+                    class="h-12 w-12 rounded border bg-white p-1 hover:shadow-sm"
+                  >
+                    <img
+                      :alt="plugin.metadata.name"
+                      :src="plugin.spec.logo"
+                      class="h-full w-full"
+                    />
+                  </div>
+                </RouterLink>
               </div>
               <div class="flex-1">
                 <div class="flex flex-row items-center">
-                  <span
-                    class="mr-2 truncate text-sm font-medium text-gray-900"
-                    @click.stop="handleRouteToDetail(plugin)"
+                  <RouterLink
+                    :to="{
+                      name: 'PluginDetail',
+                      params: { name: plugin.metadata.name },
+                    }"
                   >
-                    {{ plugin.spec.displayName }}
-                  </span>
+                    <span
+                      class="mr-2 truncate text-sm font-medium text-gray-900"
+                    >
+                      {{ plugin.spec.displayName }}
+                    </span>
+                  </RouterLink>
                   <VSpace>
                     <VTag>
                       {{ isStarted(plugin) ? "已启用" : "未启用" }}
diff --git a/src/modules/system/plugins/composables/use-plugin.ts b/src/modules/system/plugins/composables/use-plugin.ts
new file mode 100644
index 000000000..43a5d0079
--- /dev/null
+++ b/src/modules/system/plugins/composables/use-plugin.ts
@@ -0,0 +1,74 @@
+import type { Ref } from "vue";
+import type { Plugin } from "@halo-dev/api-client";
+import cloneDeep from "lodash.clonedeep";
+import { apiClient } from "@halo-dev/admin-shared";
+import { useDialog } from "@halo-dev/components";
+
+export function usePluginLifeCycle(plugin: Ref<Plugin | null>) {
+  const dialog = useDialog();
+
+  const changeStatus = () => {
+    if (!plugin.value) return;
+
+    const pluginToUpdate = cloneDeep(plugin.value);
+
+    dialog.info({
+      title: `确定要${pluginToUpdate.spec.enabled ? "停止" : "启动"}该插件吗？`,
+      onConfirm: async () => {
+        try {
+          pluginToUpdate.spec.enabled = !pluginToUpdate.spec.enabled;
+          await apiClient.extension.plugin.updatepluginHaloRunV1alpha1Plugin(
+            pluginToUpdate.metadata.name,
+            pluginToUpdate
+          );
+        } catch (e) {
+          console.error(e);
+        } finally {
+          window.location.reload();
+        }
+      },
+    });
+  };
+
+  const uninstall = () => {
+    if (!plugin.value) return;
+
+    const { enabled } = plugin.value.spec;
+
+    dialog.warning({
+      title: `确定要卸载该插件吗？`,
+      description: `${
+        enabled ? "当前插件还在启用状态，将在停止运行后卸载。" : ""
+      }`,
+      confirmType: "danger",
+      confirmText: `${enabled ? "停止运行并卸载" : "卸载"}`,
+      onConfirm: async () => {
+        if (!plugin.value) return;
+
+        try {
+          if (enabled) {
+            const pluginToUpdate = cloneDeep(plugin.value);
+            pluginToUpdate.spec.enabled = false;
+            await apiClient.extension.plugin.updatepluginHaloRunV1alpha1Plugin(
+              pluginToUpdate.metadata.name,
+              pluginToUpdate
+            );
+          }
+
+          await apiClient.extension.plugin.deletepluginHaloRunV1alpha1Plugin(
+            plugin.value.metadata.name
+          );
+        } catch (e) {
+          console.error(e);
+        } finally {
+          window.location.reload();
+        }
+      },
+    });
+  };
+
+  return {
+    changeStatus,
+    uninstall,
+  };
+}