refactor: theme settings page form

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

src/composables/use-setting-form.ts

@@ -0,0 +1,126 @@
+// core libs
+import { ref } from "vue";
+import { apiClient } from "@halo-dev/admin-shared";
+
+// libs
+import cloneDeep from "lodash.clonedeep";
+
+// types
+import type { Ref } from "vue";
+import type {
+  FormKitSetting,
+  FormKitSettingSpec,
+} from "@halo-dev/admin-shared";
+import type { ConfigMap } from "@halo-dev/api-client";
+
+const initialConfigMap: ConfigMap = {
+  apiVersion: "v1alpha1",
+  kind: "ConfigMap",
+  metadata: {
+    name: "",
+  },
+  data: {},
+};
+
+export function useSettingForm(
+  settingName: Ref<string | undefined>,
+  configMapName: Ref<string | undefined>
+) {
+  const settings = ref<FormKitSetting | undefined>();
+  const configMap = ref<ConfigMap>(cloneDeep(initialConfigMap));
+  const configMapFormData = ref<
+    Record<string, Record<string, string>> | undefined
+  >();
+  const saving = ref(false);
+
+  const handleFetchSettings = async () => {
+    if (!settingName.value) {
+      settings.value = undefined;
+      return;
+    }
+    try {
+      const response = await apiClient.extension.setting.getv1alpha1Setting(
+        settingName.value
+      );
+      settings.value = response.data as FormKitSetting;
+    } catch (e) {
+      console.error(e);
+    }
+  };
+
+  const handleFetchConfigMap = async () => {
+    if (!configMapName.value) {
+      configMap.value = cloneDeep(initialConfigMap);
+      configMapFormData.value = undefined;
+      return;
+    }
+    try {
+      const response = await apiClient.extension.configMap.getv1alpha1ConfigMap(
+        configMapName.value
+      );
+      configMap.value = response.data;
+
+      const { data } = configMap.value;
+
+      if (data) {
+        configMapFormData.value = Object.keys(data).reduce((acc, key) => {
+          acc[key] = JSON.parse(data[key]);
+          return acc;
+        }, {});
+      }
+    } catch (e) {
+      console.error(e);
+    } finally {
+      if (!configMapFormData.value) {
+        configMapFormData.value = settings.value?.spec.reduce((acc, item) => {
+          acc[item.group] = {};
+          return acc;
+        }, {});
+      }
+    }
+  };
+
+  const handleSaveConfigMap = async () => {
+    try {
+      saving.value = true;
+
+      if (!configMap.value.metadata.name && configMapName.value) {
+        configMap.value.metadata.name = configMapName.value;
+      }
+
+      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 {
+      await handleFetchSettings();
+      await handleFetchConfigMap();
+      saving.value = false;
+    }
+  };
+
+  return {
+    settings,
+    configMap,
+    configMapFormData,
+    saving,
+    handleFetchSettings,
+    handleFetchConfigMap,
+    handleSaveConfigMap,
+  };
+}

src/modules/interface/themes/ThemeDetail.vue

@@ -1,8 +1,13 @@
 <script lang="ts" setup>
-import { VAlert, VSpace, VTag } from "@halo-dev/components";
-import type { ComputedRef, Ref } from "vue";
+// core libs
 import { computed, inject, ref } from "vue";
 import { RouterLink } from "vue-router";
+
+// components
+import { VAlert, VSpace, VTag } from "@halo-dev/components";
+
+// types
+import type { ComputedRef, Ref } from "vue";
 import type { Theme } from "@halo-dev/api-client";
 
 const selectedTheme = inject<Ref<Theme>>(

src/modules/interface/themes/ThemeSetting.vue

@@ -1,24 +1,30 @@
 <script lang="ts" setup>
-import type { Ref } from "vue";
-import { computed, inject, ref } from "vue";
-import { VButton } from "@halo-dev/components";
-import { apiClient } from "@halo-dev/admin-shared";
-import type { ConfigMap, Theme } from "@halo-dev/api-client";
-import type {
-  FormKitSetting,
-  FormKitSettingSpec,
-} from "@halo-dev/admin-shared/src";
+// core libs
+import { computed, inject, onMounted, ref } from "vue";
+
+// components
+import { VButton } from "@halo-dev/components";
+
+// types
+import type { Ref } from "vue";
+import type { Theme } from "@halo-dev/api-client";
+
+// hooks
+import { useSettingForm } from "@/composables/use-setting-form";
 
-const settings = inject<Ref<FormKitSetting | undefined>>("settings");
-const configmapFormData =
-  inject<Ref<Record<string, Record<string, string>> | undefined>>(
-    "configmapFormData"
-  );
-const configmap = inject<Ref<ConfigMap>>("configmap", {} as Ref<ConfigMap>);
 const selectedTheme = inject<Ref<Theme>>("selectedTheme", ref({} as Theme));
 const group = inject<Ref<string | undefined>>("activeTab");
 
-const saving = ref(false);
+const settingName = computed(() => selectedTheme.value.spec?.settingName);
+const configMapName = computed(() => selectedTheme.value.spec?.configMapName);
+const {
+  settings,
+  configMapFormData,
+  saving,
+  handleFetchConfigMap,
+  handleFetchSettings,
+  handleSaveConfigMap,
+} = useSettingForm(settingName, configMapName);
 
 const formSchema = computed(() => {
   if (!settings?.value?.spec) {
@@ -28,53 +34,18 @@ const formSchema = computed(() => {
     ?.formSchema;
 });
 
-const handleFetchSettings = inject<() => void>("handleFetchSettings");
-const handleFetchConfigMap = inject<() => void>("handleFetchConfigMap");
-
-const handleSaveConfigMap = async () => {
-  try {
-    saving.value = true;
-
-    if (
-      !configmap.value.metadata.name &&
-      selectedTheme.value.spec.configMapName
-    ) {
-      configmap.value.metadata.name = selectedTheme.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 {
-    handleFetchSettings?.();
-    handleFetchConfigMap?.();
-    saving.value = false;
-  }
-};
+onMounted(() => {
+  handleFetchSettings();
+  handleFetchConfigMap();
+});
 </script>
 <template>
   <div class="bg-white p-4 sm:px-6">
     <div class="w-1/3">
       <FormKit
-        v-if="group && formSchema && configmapFormData"
+        v-if="group && formSchema && configMapFormData"
         :id="group"
-        v-model="configmapFormData[group]"
+        v-model="configMapFormData[group]"
         :actions="false"
         :preserve="true"
         type="form"

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

@@ -1,4 +1,16 @@
 <script lang="ts" setup>
+// core libs
+import { computed, provide, ref, watch, watchEffect } from "vue";
+import { useRoute, useRouter } from "vue-router";
+
+// libs
+import cloneDeep from "lodash.clonedeep";
+
+// hooks
+import { useThemeLifeCycle } from "../composables/use-theme";
+import { useSettingForm } from "@/composables/use-setting-form";
+
+// components
 import {
   IconExchange,
   IconEye,
@@ -9,24 +21,21 @@ import {
   VSpace,
   VTabbar,
 } from "@halo-dev/components";
-import type {
-  FormKitSetting,
-  FormKitSettingSpec,
-} from "@halo-dev/admin-shared";
-import { apiClient, BasicLayout } from "@halo-dev/admin-shared";
 import ThemeListModal from "../components/ThemeListModal.vue";
+import { BasicLayout } from "@halo-dev/admin-shared";
+
+// types
+import type { FormKitSettingSpec } from "@halo-dev/admin-shared";
 import type { ComputedRef, Ref } from "vue";
-import { provide, ref, watch, watchEffect } from "vue";
-import type { RouteLocationRaw } from "vue-router";
-import { useRoute, useRouter } from "vue-router";
-import type { ConfigMap, Theme } from "@halo-dev/api-client";
-import { useThemeLifeCycle } from "../composables/use-theme";
-import cloneDeep from "lodash.clonedeep";
+import type { Theme } from "@halo-dev/api-client";
 
 interface ThemeTab {
   id: string;
   label: string;
-  route: RouteLocationRaw;
+  route: {
+    name: string;
+    params?: Record<string, string>;
+  };
 }
 
 const initialTabs: ThemeTab[] = [
@@ -39,36 +48,24 @@ const initialTabs: ThemeTab[] = [
   },
 ];
 
-const initialConfigMap: ConfigMap = {
-  data: {},
-  apiVersion: "v1alpha1",
-  kind: "ConfigMap",
-  metadata: {
-    name: "",
-  },
-};
-
 const tabs = ref<ThemeTab[]>(cloneDeep(initialTabs));
 const selectedTheme = ref<Theme>({} as Theme);
-const settings = ref<FormKitSetting | undefined>();
-const configmapFormData = ref<
-  Record<string, Record<string, string>> | undefined
->();
-const configmap = ref<ConfigMap>(cloneDeep(initialConfigMap));
 const themesModal = ref(false);
-const activeTab = ref("detail");
+const activeTab = ref("");
 
 const { isActivated, activatedTheme, handleActiveTheme } =
   useThemeLifeCycle(selectedTheme);
 
+const settingName = computed(() => selectedTheme.value.spec?.settingName);
+const configMapName = computed(() => selectedTheme.value.spec?.configMapName);
+
+const { settings, handleFetchSettings } = useSettingForm(
+  settingName,
+  configMapName
+);
+
 provide<Ref<Theme>>("activatedTheme", activatedTheme);
 provide<Ref<Theme>>("selectedTheme", selectedTheme);
-provide<Ref<FormKitSetting | undefined>>("settings", settings);
-provide<Ref<Record<string, Record<string, string>> | undefined>>(
-  "configmapFormData",
-  configmapFormData
-);
-provide<Ref<ConfigMap>>("configmap", configmap);
 provide<ComputedRef<boolean>>("isActivated", isActivated);
 provide<Ref<string | undefined>>("activeTab", activeTab);
 
@@ -82,23 +79,16 @@ const handleTabChange = (id: string) => {
   }
 };
 
-const handleFetchSettings = async () => {
-  tabs.value = cloneDeep(initialTabs);
-  if (!selectedTheme.value?.spec?.settingName) {
-    return;
-  }
-  try {
-    const response = await apiClient.extension.setting.getv1alpha1Setting(
-      selectedTheme.value.spec.settingName as string
-    );
-    settings.value = response.data as FormKitSetting;
+watchEffect(async () => {
+  if (selectedTheme.value) {
+    // reset tabs
+    tabs.value = cloneDeep(initialTabs);
+    await handleFetchSettings();
 
-    const { spec } = settings.value;
-
-    if (spec) {
+    if (settings.value && settings.value.spec) {
       tabs.value = [
         ...tabs.value,
-        ...spec.map((item: FormKitSettingSpec) => {
+        ...settings.value.spec.map((item: FormKitSettingSpec) => {
           return {
             id: item.group,
             label: item.label || "",
@@ -111,51 +101,8 @@ const handleFetchSettings = async () => {
           };
         }),
       ] as ThemeTab[];
-
       onTabChange(route.name as string);
     }
-  } catch (e) {
-    console.error(e);
-  }
-};
-
-const handleFetchConfigMap = async () => {
-  if (!selectedTheme.value.spec?.configMapName) {
-    return;
-  }
-  try {
-    const response = await apiClient.extension.configMap.getv1alpha1ConfigMap(
-      selectedTheme.value.spec?.configMapName as string
-    );
-    configmap.value = response.data;
-
-    const { data } = configmap.value;
-
-    if (data) {
-      configmapFormData.value = Object.keys(data).reduce((acc, key) => {
-        acc[key] = JSON.parse(data[key]);
-        return acc;
-      }, {});
-    }
-  } catch (e) {
-    console.error(e);
-  } finally {
-    if (!configmapFormData.value) {
-      configmapFormData.value = settings.value?.spec.reduce((acc, item) => {
-        acc[item.group] = {};
-        return acc;
-      }, {});
-    }
-  }
-};
-
-provide<() => void>("handleFetchSettings", handleFetchSettings);
-provide<() => void>("handleFetchConfigMap", handleFetchConfigMap);
-
-watchEffect(() => {
-  if (selectedTheme.value) {
-    handleFetchSettings();
-    handleFetchConfigMap();
   }
 });
 
@@ -163,10 +110,8 @@ const onTabChange = (routeName: string) => {
   if (routeName === "ThemeSetting") {
     const tab = tabs.value.find((tab) => {
       return (
-        // @ts-ignore
         tab.route.name === routeName &&
-        // @ts-ignore
-        tab.route.params.group === route.params.group
+        tab.route.params?.group === route.params.group
       );
     });
     if (tab) {