halo/ui/console-src/modules/dashboard/composables/use-dashboard-widgets-fetch.ts

67 lines
1.9 KiB
TypeScript

import { ucApiClient } from "@halo-dev/api-client";
import type {
DashboardResponsiveLayout,
DashboardWidget,
} from "@halo-dev/console-shared";
import { useQuery } from "@tanstack/vue-query";
import { cloneDeep } from "lodash-es";
import { computed, ref, type Ref } from "vue";
import { DefaultResponsiveLayouts } from "../widgets/defaults";
export function useDashboardWidgetsFetch(breakpoint: Ref<string>) {
const layouts = ref<DashboardResponsiveLayout>({});
const layout = ref<DashboardWidget[]>([]);
const originalLayout = ref<DashboardWidget[]>([]);
const { isLoading } = useQuery({
queryKey: ["core:dashboard:widgets", breakpoint],
queryFn: async () => {
const { data } = await ucApiClient.user.preference.getMyPreference({
group: "dashboard-widgets",
});
if (!data) {
return null;
}
return data as DashboardResponsiveLayout;
},
cacheTime: 0,
onSuccess: (data) => {
layouts.value = data || DefaultResponsiveLayouts;
const layoutData =
layouts.value[breakpoint.value] || layouts.value["lg"] || [];
layout.value = layoutData;
originalLayout.value = cloneDeep(layoutData);
},
enabled: computed(() => !!breakpoint.value),
});
return {
layouts,
layout,
originalLayout,
isLoading,
};
}
export function useDashboardWidgetsViewFetch(breakpoint: Ref<string>) {
return useQuery({
queryKey: ["core:dashboard:widgets:view", breakpoint],
queryFn: async () => {
const { data } = await ucApiClient.user.preference.getMyPreference({
group: "dashboard-widgets",
});
const layouts = (data ||
DefaultResponsiveLayouts) as DashboardResponsiveLayout;
return {
layouts,
layout: layouts[breakpoint.value] || layouts.lg || [],
};
},
enabled: computed(() => !!breakpoint.value),
});
}