refactor: plugin settings page form

Signed-off-by: Ryan Wang <i@ryanc.cc>

packages/shared/src/composables/index.ts

@@ -0,0 +1 @@
+export { useSettingForm } from "./use-setting-form";

packages/shared/src/composables/use-setting-form.ts

@@ -1,16 +1,13 @@
 // core libs
 import { ref } from "vue";
-import { apiClient } from "@halo-dev/admin-shared";
+import { apiClient } from "../utils/api-client";
 
 // libs
 import cloneDeep from "lodash.clonedeep";
 
 // types
 import type { Ref } from "vue";
-import type {
-  FormKitSetting,
-  FormKitSettingSpec,
-} from "@halo-dev/admin-shared";
+import type { FormKitSetting, FormKitSettingSpec } from "../types/formkit";
 import type { ConfigMap } from "@halo-dev/api-client";
 
 const initialConfigMap: ConfigMap = {
@@ -64,6 +61,7 @@ export function useSettingForm(
 
       if (data) {
         configMapFormData.value = Object.keys(data).reduce((acc, key) => {
+          // @ts-ignore
           acc[key] = JSON.parse(data[key]);
           return acc;
         }, {});
@@ -73,6 +71,7 @@ export function useSettingForm(
     } finally {
       if (!configMapFormData.value) {
         configMapFormData.value = settings.value?.spec.reduce((acc, item) => {
+          // @ts-ignore
           acc[item.group] = {};
           return acc;
         }, {});

packages/shared/src/index.ts

@@ -6,3 +6,4 @@ export * from "./states/pages";
 export * from "./layouts";
 
 export * from "./utils/api-client";
+export * from "./composables";

packages/shared/src/layouts/PluginLayout.vue

@@ -1,25 +1,34 @@
 <script lang="ts" setup>
-import { VButton, VCard, VPageHeader, VTabbar } from "@halo-dev/components";
-import type { RouteLocationRaw } from "vue-router";
+// core libs
+import { computed, onMounted, provide, ref, watch } from "vue";
 import { RouterView, useRoute, useRouter } from "vue-router";
-import type { Ref } from "vue";
-import { onMounted, provide, ref, watch } from "vue";
-import type { Plugin } from "@halo-dev/api-client";
-import type { FormKitSetting, FormKitSettingSpec } from "../types/formkit";
-import { BasicLayout } from "../layouts";
 import { apiClient } from "../utils/api-client";
 
+// libs
+import cloneDeep from "lodash.clonedeep";
+
+// hooks
+import { useSettingForm } from "../composables";
+
+// components
+import { VButton, VCard, VPageHeader, VTabbar } from "@halo-dev/components";
+import { BasicLayout } from "../layouts";
+
+// types
+import type { Ref } from "vue";
+import type { Plugin } from "@halo-dev/api-client";
+import type { FormKitSettingSpec } from "../types/formkit";
+
 interface PluginTab {
   id: string;
   label: string;
-  route: RouteLocationRaw;
+  route: {
+    name: string;
+    params?: Record<string, string>;
+  };
 }
 
-const route = useRoute();
-const router = useRouter();
-
-const plugin = ref<Plugin>({} as Plugin);
-const tabs = ref<PluginTab[]>([
+const initialTabs: PluginTab[] = [
   {
     id: "detail",
     label: "详情",
@@ -27,12 +36,26 @@ const tabs = ref<PluginTab[]>([
       name: "PluginDetail",
     },
   },
-]);
+];
+
+const route = useRoute();
+const router = useRouter();
+
+const plugin = ref<Plugin>({} as Plugin);
+const tabs = ref<PluginTab[]>(cloneDeep(initialTabs));
 const activeTab = ref<string>();
 
 provide<Ref<Plugin>>("plugin", plugin);
 provide<Ref<string | undefined>>("activeTab", activeTab);
 
+const settingName = computed(() => plugin.value.spec?.settingName);
+const configMapName = computed(() => plugin.value.spec?.configMapName);
+
+const { settings, handleFetchSettings } = useSettingForm(
+  settingName,
+  configMapName
+);
+
 const handleFetchPlugin = async () => {
   try {
     const response =
@@ -40,39 +63,6 @@ const handleFetchPlugin = async () => {
         route.params.name as string
       );
     plugin.value = response.data;
-
-    await handleFetchSettings();
-  } catch (e) {
-    console.error(e);
-  }
-};
-
-const handleFetchSettings = async () => {
-  if (!plugin.value.spec.settingName) {
-    return;
-  }
-  try {
-    const response = await apiClient.extension.setting.getv1alpha1Setting(
-      plugin.value.spec.settingName as string
-    );
-    const settings = response.data as FormKitSetting;
-
-    const { spec } = settings;
-
-    if (spec) {
-      spec.forEach((item: FormKitSettingSpec) => {
-        tabs.value.push({
-          id: item.group,
-          label: item.label || "",
-          route: {
-            name: "PluginSetting",
-            params: {
-              group: item.group,
-            },
-          },
-        });
-      });
-    }
   } catch (e) {
     console.error(e);
   }
@@ -85,20 +75,54 @@ const handleTabChange = (id: string) => {
   }
 };
 
-onMounted(async () => {
-  await handleFetchPlugin();
-
-  // @ts-ignore
+const onTabChange = (routeName: string) => {
+  if (routeName === "PluginSetting") {
+    const tab = tabs.value.find((tab) => {
+      return (
+        tab.route.name === routeName &&
+        tab.route.params?.group === route.params.group
+      );
+    });
+    if (tab) {
+      activeTab.value = tab.id;
+      return;
+    }
+    router.push({ name: "PluginDetail" });
+    return;
+  }
   const tab = tabs.value.find((tab) => tab.route.name === route.name);
   activeTab.value = tab ? tab.id : tabs.value[0].id;
+};
+
+onMounted(async () => {
+  await handleFetchPlugin();
+  await handleFetchSettings();
+
+  tabs.value = cloneDeep(initialTabs);
+  if (settings.value && settings.value.spec) {
+    tabs.value = [
+      ...tabs.value,
+      ...settings.value.spec.map((item: FormKitSettingSpec) => {
+        return {
+          id: item.group,
+          label: item.label || "",
+          route: {
+            name: "PluginSetting",
+            params: {
+              group: item.group,
+            },
+          },
+        };
+      }),
+    ] as PluginTab[];
+    onTabChange(route.name as string);
+  }
 });
 
 watch(
   () => route.name,
   async (newRouteName) => {
-    // @ts-ignore
-    const tab = tabs.value.find((tab) => tab.route.name === newRouteName);
-    activeTab.value = tab ? tab.id : tabs.value[0].id;
+    onTabChange(newRouteName as string);
   }
 );
 </script>

src/modules/interface/themes/ThemeSetting.vue

@@ -10,7 +10,7 @@ import type { Ref } from "vue";
 import type { Theme } from "@halo-dev/api-client";
 
 // hooks
-import { useSettingForm } from "@/composables/use-setting-form";
+import { useSettingForm } from "@halo-dev/admin-shared";
 
 const selectedTheme = inject<Ref<Theme>>("selectedTheme", ref({} as Theme));
 const group = inject<Ref<string | undefined>>("activeTab");

src/modules/interface/themes/layouts/ThemeLayout.vue

@@ -8,7 +8,7 @@ import cloneDeep from "lodash.clonedeep";
 
 // hooks
 import { useThemeLifeCycle } from "../composables/use-theme";
-import { useSettingForm } from "@/composables/use-setting-form";
+import { useSettingForm } from "@halo-dev/admin-shared";
 
 // components
 import {
@@ -122,7 +122,6 @@ const onTabChange = (routeName: string) => {
     return;
   }
 
-  // @ts-ignore
   const tab = tabs.value.find((tab) => tab.route.name === route.name);
   activeTab.value = tab ? tab.id : tabs.value[0].id;
 };

src/modules/system/plugins/PluginSetting.vue

@@ -1,131 +1,54 @@
 <script lang="ts" setup>
+// core libs
+import { computed, inject, ref, watchEffect } from "vue";
+
+// hooks
+import { useSettingForm } from "@halo-dev/admin-shared";
+
+// components
 import { VButton } from "@halo-dev/components";
+
+// types
 import type { Ref } from "vue";
-import { computed, inject, onMounted, ref, watch } from "vue";
-import type { ConfigMap, Plugin } from "@halo-dev/api-client";
-import type {
-  FormKitSetting,
-  FormKitSettingSpec,
-} from "@halo-dev/admin-shared";
-import { apiClient } from "@halo-dev/admin-shared";
+import type { Plugin } from "@halo-dev/api-client";
 
 const plugin = inject<Ref<Plugin>>("plugin", ref({} as Plugin));
-const settings = ref<FormKitSetting>({} as FormKitSetting);
-const configmapFormData = ref<Record<string, Record<string, string>>>({});
-const configmap = ref<ConfigMap>({
-  data: {},
-  apiVersion: "v1alpha1",
-  kind: "ConfigMap",
-  metadata: {
-    name: "",
-  },
-});
-const saving = ref(false);
-
 const group = inject<Ref<string | undefined>>("activeTab");
 
+const settingName = computed(() => plugin.value.spec?.settingName);
+const configMapName = computed(() => plugin.value.spec?.configMapName);
+
+const {
+  settings,
+  configMapFormData,
+  saving,
+  handleFetchSettings,
+  handleFetchConfigMap,
+  handleSaveConfigMap,
+} = useSettingForm(settingName, configMapName);
+
 const formSchema = computed(() => {
-  if (!settings.value.spec) {
+  if (!settings?.value?.spec) {
     return;
   }
   return settings.value.spec.find((item) => item.group === group?.value)
     ?.formSchema;
 });
 
-const handleFetchSettings = async () => {
-  if (!plugin.value.spec?.settingName) {
-    return;
-  }
-  try {
-    const response = await apiClient.extension.setting.getv1alpha1Setting(
-      plugin.value.spec.settingName as string
-    );
-    settings.value = response.data as FormKitSetting;
-
-    const { spec } = settings.value;
-
-    if (spec) {
-      spec.forEach((item: FormKitSettingSpec) => {
-        configmapFormData.value[item.group] = {};
-      });
-    }
-  } catch (e) {
-    console.error(e);
-  }
-};
-
-const handleFetchConfigMap = async () => {
-  if (!plugin.value.spec?.configMapName) {
-    return;
-  }
-  try {
-    const response = await apiClient.extension.configMap.getv1alpha1ConfigMap(
-      plugin.value.spec?.configMapName as string
-    );
-    configmap.value = response.data;
-
-    const { data } = configmap.value;
-
-    if (data) {
-      Object.keys(data).forEach((key) => {
-        configmapFormData.value[key] = JSON.parse(data[key]);
-      });
-    }
-  } catch (e) {
-    console.error(e);
-  }
-};
-
-const handleSaveConfigMap = async () => {
-  try {
-    saving.value = true;
-
-    if (!configmap.value.metadata.name && plugin.value.spec.configMapName) {
-      configmap.value.metadata.name = plugin.value.spec.configMapName;
-    }
-
-    settings.value.spec.forEach((item: FormKitSettingSpec) => {
-      // @ts-ignore
-      configmap.value.data[item.group] = JSON.stringify(
-        configmapFormData.value[item.group]
-      );
-    });
-
-    if (!configmap.value.metadata.creationTimestamp) {
-      await apiClient.extension.configMap.createv1alpha1ConfigMap(
-        configmap.value
-      );
-    } else {
-      await apiClient.extension.configMap.updatev1alpha1ConfigMap(
-        configmap.value.metadata.name,
-        configmap.value
-      );
-    }
-  } catch (e) {
-    console.error(e);
-  } finally {
+watchEffect(async () => {
+  if (settingName.value && configMapName.value) {
+    await handleFetchSettings();
     await handleFetchConfigMap();
-    saving.value = false;
   }
-};
-
-onMounted(() => {
-  handleFetchSettings();
-  handleFetchConfigMap();
-});
-
-watch([() => plugin.value, () => group?.value], () => {
-  handleFetchSettings();
-  handleFetchConfigMap();
 });
 </script>
 <template>
   <div class="bg-white p-4 sm:px-6">
     <div class="w-1/3">
       <FormKit
-        v-if="group && formSchema"
+        v-if="group && formSchema && configMapFormData"
         :id="group"
-        v-model="configmapFormData[group]"
+        v-model="configMapFormData[group]"
         :actions="false"
         :preserve="true"
         type="form"