refactor: plugin settings page form

Signed-off-by: Ryan Wang <i@ryanc.cc>
pull/594/head
Ryan Wang 2022-08-04 12:04:42 +08:00
parent 9f3ccb6af1
commit fa6b42e1da
7 changed files with 114 additions and 167 deletions

View File

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

View File

@ -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;
}, {});

View File

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

View File

@ -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>

View File

@ -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");

View File

@ -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;
};

View File

@ -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"