feat(project-dashboard): create project-dashboard page with dashboard-shared

apps/web/src/api-clients/dashboard/private-dashboard/schema/api-verbs/list.ts

@@ -5,4 +5,5 @@ export interface PrivateDashboardListParameters {
     query?: Query;
     dashboard_id?: string;
     name?: string;
+    folder_id?: string;
 }

apps/web/src/api-clients/dashboard/public-dashboard/schema/api-verbs/list.ts

@@ -8,4 +8,5 @@ export interface PublicDashboardListParameters {
     workspace_id?: string;
     project_id?: string;
     project_group_id?: string;
+    folder_id?: string;
 }

apps/web/src/services/dashboard-shared/core/actions/use-dashboard-change-folder-action.ts

@@ -0,0 +1,55 @@
+import type { ComputedRef } from 'vue';
+import { computed } from 'vue';
+
+import {
+    useMutation, useQueryClient,
+} from '@tanstack/vue-query';
+
+import type { DashboardChangeFolderParams, DashboardModel } from '@/api-clients/dashboard/_types/dashboard-type';
+import { usePrivateDashboardApi } from '@/api-clients/dashboard/private-dashboard/composables/use-private-dashboard-api';
+import { usePublicDashboardApi } from '@/api-clients/dashboard/public-dashboard/composables/use-public-dashboard-api';
+import { useServiceQueryKey } from '@/query/query-key/use-service-query-key';
+
+interface UseDashboardChangeFolderActionOptions {
+    dashboardId: ComputedRef<string|undefined>;
+    onSuccess?: (data: DashboardModel, variables: DashboardChangeFolderParams) => void|Promise<void>;
+    onError?: (error: Error, variables: DashboardChangeFolderParams) => void|Promise<void>;
+    onSettled?: (data: DashboardModel|undefined, error: Error|null, variables: DashboardChangeFolderParams) => void|Promise<void>;
+}
+
+export const useDashboardChangeFolderAction = (options: UseDashboardChangeFolderActionOptions) => {
+    const { publicDashboardAPI } = usePublicDashboardApi();
+    const { privateDashboardAPI } = usePrivateDashboardApi();
+    const queryClient = useQueryClient();
+    const { withSuffix: publicDashboardGetQueryKey } = useServiceQueryKey('dashboard', 'public-dashboard', 'get');
+    const { withSuffix: privateDashboardGetQueryKey } = useServiceQueryKey('dashboard', 'private-dashboard', 'get');
+
+    const {
+        dashboardId, onSuccess, onError, onSettled,
+    } = options;
+
+    const isPrivate = computed(() => dashboardId.value?.startsWith('private'));
+
+    const changeFolderFn = (params: DashboardChangeFolderParams): Promise<DashboardModel> => {
+        if (!dashboardId.value) throw new Error('Dashboard ID is not provided');
+        const fetcher = isPrivate.value ? privateDashboardAPI.changeFolder : publicDashboardAPI.changeFolder;
+        return fetcher(params);
+    };
+
+    return useMutation({
+        mutationFn: changeFolderFn,
+        onSuccess: async (data, variables) => {
+            const _dashboardId = variables.dashboard_id;
+            const _isPrivate = _dashboardId.startsWith('private');
+            const dashboardListQueryKey = _isPrivate ? privateDashboardGetQueryKey(_dashboardId) : publicDashboardGetQueryKey(_dashboardId);
+            queryClient.invalidateQueries({ queryKey: dashboardListQueryKey });
+            if (onSuccess) await onSuccess(data, variables);
+        },
+        onError: (error, variables) => {
+            if (onError) onError(error, variables);
+        },
+        onSettled: (data, error, variables) => {
+            if (onSettled) onSettled(data, error, variables);
+        },
+    });
+};

apps/web/src/services/dashboard-shared/core/actions/use-dashboard-clone-action.ts

@@ -0,0 +1,118 @@
+import type { ComputedRef } from 'vue';
+
+import { useMutation } from '@tanstack/vue-query';
+
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
+import { RESOURCE_GROUP } from '@/api-clients/_common/schema/constant';
+import type { DashboardCreateParams, DashboardModel } from '@/api-clients/dashboard/_types/dashboard-type';
+import type { WidgetModel } from '@/api-clients/dashboard/_types/widget-type';
+import { usePrivateDashboardApi } from '@/api-clients/dashboard/private-dashboard/composables/use-private-dashboard-api';
+import type { PrivateDashboardCreateParameters } from '@/api-clients/dashboard/private-dashboard/schema/api-verbs/create';
+import { usePrivateWidgetApi } from '@/api-clients/dashboard/private-widget/composables/use-private-widget-api';
+import { usePublicDashboardApi } from '@/api-clients/dashboard/public-dashboard/composables/use-public-dashboard-api';
+import type { PublicDashboardCreateParameters } from '@/api-clients/dashboard/public-dashboard/schema/api-verbs/create';
+import { usePublicWidgetApi } from '@/api-clients/dashboard/public-widget/composables/use-public-widget-api';
+
+import { useAllReferenceStore } from '@/store/reference/all-reference-store';
+import { useUserStore } from '@/store/user/user-store';
+
+import { useDashboardRouteContext } from '@/services/dashboard-shared/core/composables/use-dashboard-route-context';
+import { getSharedDashboardLayouts } from '@/services/dashboard-shared/core/helpers/dashboard-share-helper';
+
+
+interface UseDashboardCloneActionOptions {
+    dashboardId: ComputedRef<string|undefined>;
+    isPrivate?: ComputedRef<boolean>;
+    onSuccess?: (data: DashboardModel, variables: DashboardCreateParams) => void|Promise<void>;
+    onError?: (error: Error, variables: DashboardCreateParams) => void|Promise<void>;
+    onSettled?: (data: DashboardModel|undefined, error: Error|null, variables: DashboardCreateParams) => void|Promise<void>;
+}
+
+export const useDashboardCloneAction = (options: UseDashboardCloneActionOptions) => {
+    const { publicDashboardAPI } = usePublicDashboardApi();
+    const { privateDashboardAPI } = usePrivateDashboardApi();
+    const { privateWidgetAPI } = usePrivateWidgetApi();
+    const { publicWidgetAPI } = usePublicWidgetApi();
+    const allReferenceStore = useAllReferenceStore();
+    const userStore = useUserStore();
+    const {
+        entryPoint,
+    } = useDashboardRouteContext();
+
+    const {
+        dashboardId, isPrivate, onSuccess, onError, onSettled,
+    } = options;
+
+
+    const getDashboardFn = async (): Promise<DashboardModel> => {
+        if (!dashboardId.value) throw new Error('Dashboard id not found');
+        try {
+            if (dashboardId.value.startsWith('private')) {
+                return privateDashboardAPI.get({ dashboard_id: dashboardId.value });
+            }
+            return publicDashboardAPI.get({ dashboard_id: dashboardId.value });
+        } catch (error) {
+            throw new Error('Dashboard not found');
+        }
+    };
+
+    const listWidgetFn = async (): Promise<ListResponse<WidgetModel>> => {
+        if (!dashboardId.value) throw new Error('Dashboard id not found');
+        try {
+            if (dashboardId.value.startsWith('private')) {
+                return privateWidgetAPI.list({ dashboard_id: dashboardId.value });
+            }
+            return publicWidgetAPI.list({ dashboard_id: dashboardId.value });
+        } catch (error) {
+            throw new Error('Widget list not found');
+        }
+    };
+
+
+    const cloneDashboardFn = async (params: DashboardCreateParams): Promise<DashboardModel> => {
+        if (!dashboardId.value) throw new Error('Dashboard id not found');
+
+        const dashboard = await getDashboardFn();
+        const widgetList = await listWidgetFn();
+
+        const _sharedLayouts = await getSharedDashboardLayouts(dashboard.layouts, widgetList.results || [], allReferenceStore.getters.costDataSource);
+
+        const _sharedDashboard: DashboardCreateParams = {
+            name: params.name,
+            layouts: _sharedLayouts,
+            options: dashboard.options || {},
+            labels: dashboard.labels || [],
+            tags: { created_by: userStore.state.userId },
+            vars: dashboard.vars,
+            vars_schema: dashboard.vars_schema,
+        };
+        if (entryPoint.value === 'ADMIN') {
+            (_sharedDashboard as PublicDashboardCreateParameters).resource_group = RESOURCE_GROUP.DOMAIN;
+        } else if (entryPoint.value === 'WORKSPACE') {
+            if (!isPrivate?.value) {
+                (_sharedDashboard as PublicDashboardCreateParameters).resource_group = RESOURCE_GROUP.WORKSPACE;
+            }
+        } else if (entryPoint.value === 'PROJECT') {
+            (_sharedDashboard as PublicDashboardCreateParameters).resource_group = RESOURCE_GROUP.PROJECT;
+        }
+
+
+        if (isPrivate?.value) {
+            return privateDashboardAPI.create(_sharedDashboard as PrivateDashboardCreateParameters);
+        }
+        return publicDashboardAPI.create(_sharedDashboard as PublicDashboardCreateParameters);
+    };
+
+    return useMutation({
+        mutationFn: cloneDashboardFn,
+        onSuccess: async (data, variables) => {
+            if (onSuccess) await onSuccess(data, variables);
+        },
+        onError: (error, variables) => {
+            if (onError) onError(error, variables);
+        },
+        onSettled: (data, error, variables) => {
+            if (onSettled) onSettled(data, error, variables);
+        },
+    });
+};

apps/web/src/services/dashboard-shared/core/actions/use-dashboard-delete-action.ts

@@ -0,0 +1,55 @@
+import type { ComputedRef } from 'vue';
+import { computed } from 'vue';
+
+import {
+    useMutation, useQueryClient,
+} from '@tanstack/vue-query';
+
+import type { DashboardDeleteParams } from '@/api-clients/dashboard/_types/dashboard-type';
+import { usePrivateDashboardApi } from '@/api-clients/dashboard/private-dashboard/composables/use-private-dashboard-api';
+import { usePublicDashboardApi } from '@/api-clients/dashboard/public-dashboard/composables/use-public-dashboard-api';
+import { useServiceQueryKey } from '@/query/query-key/use-service-query-key';
+
+interface UseDashboardDeleteActionOptions {
+    dashboardId: ComputedRef<string|undefined>;
+    onSuccess?: (data: unknown, variables: DashboardDeleteParams) => void|Promise<void>;
+    onError?: (error: Error, variables: DashboardDeleteParams) => void|Promise<void>;
+    onSettled?: (data: unknown|undefined, error: Error|null, variables: DashboardDeleteParams) => void|Promise<void>;
+}
+
+export const useDashboardDeleteAction = (options: UseDashboardDeleteActionOptions) => {
+    const { publicDashboardAPI } = usePublicDashboardApi();
+    const { privateDashboardAPI } = usePrivateDashboardApi();
+    const queryClient = useQueryClient();
+    const { withSuffix: publicDashboardGetQueryKey } = useServiceQueryKey('dashboard', 'public-dashboard', 'get');
+    const { withSuffix: privateDashboardGetQueryKey } = useServiceQueryKey('dashboard', 'private-dashboard', 'get');
+
+    const {
+        dashboardId, onSuccess, onError, onSettled,
+    } = options;
+
+    const isPrivate = computed(() => dashboardId.value?.startsWith('private'));
+
+    const deleteDashboardFn = (params: DashboardDeleteParams) => {
+        if (!dashboardId.value) throw new Error('Dashboard ID is not provided');
+        const fetcher = isPrivate.value ? privateDashboardAPI.delete : publicDashboardAPI.delete;
+        return fetcher(params);
+    };
+
+    return useMutation({
+        mutationFn: deleteDashboardFn,
+        onSuccess: async (data, variables) => {
+            const _dashboardId = variables.dashboard_id;
+            const _isPrivate = _dashboardId.startsWith('private');
+            const dashboardListQueryKey = _isPrivate ? privateDashboardGetQueryKey(_dashboardId) : publicDashboardGetQueryKey(_dashboardId);
+            queryClient.invalidateQueries({ queryKey: dashboardListQueryKey });
+            if (onSuccess) await onSuccess(data, variables);
+        },
+        onError: (error, variables) => {
+            if (onError) onError(error, variables);
+        },
+        onSettled: (data, error, variables) => {
+            if (onSettled) onSettled(data, error, variables);
+        },
+    });
+};

apps/web/src/services/dashboard-shared/core/actions/use-dashboard-folder-share-action.ts

@@ -0,0 +1,77 @@
+import type { ComputedRef } from 'vue';
+
+import {
+    useMutation, useQueryClient,
+} from '@tanstack/vue-query';
+
+import { usePublicDashboardApi } from '@/api-clients/dashboard/public-dashboard/composables/use-public-dashboard-api';
+import { usePublicFolderApi } from '@/api-clients/dashboard/public-folder/composables/use-public-folder-api';
+import type { PublicFolderShareParameters } from '@/api-clients/dashboard/public-folder/schema/api-verbs/share';
+import type { PublicFolderUnshareParameters } from '@/api-clients/dashboard/public-folder/schema/api-verbs/unshare';
+import type { PublicFolderModel } from '@/api-clients/dashboard/public-folder/schema/model';
+import { useServiceQueryKey } from '@/query/query-key/use-service-query-key';
+
+interface UseDashboardFolderShareActionOptions {
+    folderId: ComputedRef<string|undefined>;
+    isShared: ComputedRef<boolean>;
+    onSuccess?: (data: PublicFolderModel, variables: PublicFolderShareParameters|PublicFolderUnshareParameters) => void|Promise<void>;
+    onError?: (error: Error, variables: PublicFolderShareParameters|PublicFolderUnshareParameters) => void|Promise<void>;
+    onSettled?: (data: PublicFolderModel|undefined, error: Error|null, variables: PublicFolderShareParameters|PublicFolderUnshareParameters) => void|Promise<void>;
+}
+
+export const useDashboardFolderShareAction = (options: UseDashboardFolderShareActionOptions) => {
+    const { publicFolderAPI } = usePublicFolderApi();
+    const { publicDashboardAPI } = usePublicDashboardApi();
+    const queryClient = useQueryClient();
+    const { withSuffix: publicFolderGetQueryKey } = useServiceQueryKey('dashboard', 'public-folder', 'get');
+    const { withSuffix: publicDashboardGetQueryKey } = useServiceQueryKey('dashboard', 'public-dashboard', 'get');
+    const {
+        folderId, isShared, onSuccess, onError, onSettled,
+    } = options;
+
+
+    const listPublicDashboard = async () => {
+        if (!folderId.value) throw new Error('Folder ID is not provided');
+        try {
+            const _dashboardList = await publicDashboardAPI.list({
+                folder_id: folderId.value,
+            });
+            return _dashboardList;
+        } catch (error) {
+            console.error(error);
+            return {
+                results: [],
+            };
+        }
+    };
+
+    const shareFolderFn = async (params: PublicFolderShareParameters|PublicFolderUnshareParameters): Promise<PublicFolderModel> => {
+        if (!folderId.value) throw new Error('Folder ID is not provided');
+        if (isShared.value) return publicFolderAPI.unshare(params as PublicFolderUnshareParameters);
+        return publicFolderAPI.share(params as PublicFolderShareParameters);
+    };
+
+    return useMutation({
+        mutationFn: shareFolderFn,
+        onSuccess: async (data, variables) => {
+            const _folderId = variables.folder_id;
+            queryClient.invalidateQueries({ queryKey: publicFolderGetQueryKey(_folderId) });
+            if (!isShared.value) {
+                const _dashboardList = await listPublicDashboard();
+                const _dashboardIds = _dashboardList.results?.map((dashboard) => dashboard.dashboard_id);
+                if (_dashboardIds) {
+                    await Promise.all(
+                        _dashboardIds.map((dashboardId) => queryClient.invalidateQueries({ queryKey: publicDashboardGetQueryKey(dashboardId) })),
+                    );
+                }
+            }
+            if (onSuccess) await onSuccess(data, variables);
+        },
+        onError: (error, variables) => {
+            if (onError) onError(error, variables);
+        },
+        onSettled: (data, error, variables) => {
+            if (onSettled) onSettled(data, error, variables);
+        },
+    });
+};

apps/web/src/services/dashboard-shared/core/actions/use-dashboard-share-action.ts

@@ -0,0 +1,50 @@
+import type { ComputedRef } from 'vue';
+
+import {
+    useMutation, useQueryClient,
+} from '@tanstack/vue-query';
+
+import type { DashboardModel } from '@/api-clients/dashboard/_types/dashboard-type';
+import { usePublicDashboardApi } from '@/api-clients/dashboard/public-dashboard/composables/use-public-dashboard-api';
+import type { PublicDashboardShareParameters } from '@/api-clients/dashboard/public-dashboard/schema/api-verbs/share';
+import type { PublicDashboardUnshareParameters } from '@/api-clients/dashboard/public-dashboard/schema/api-verbs/unshare';
+import { useServiceQueryKey } from '@/query/query-key/use-service-query-key';
+
+interface UseDashboardShareActionOptions {
+    dashboardId: ComputedRef<string|undefined>;
+    isShared: ComputedRef<boolean>;
+    onSuccess?: (data: DashboardModel, variables: PublicDashboardShareParameters|PublicDashboardUnshareParameters) => void|Promise<void>;
+    onError?: (error: Error, variables: PublicDashboardShareParameters|PublicDashboardUnshareParameters) => void|Promise<void>;
+    onSettled?: (data: DashboardModel|undefined, error: Error|null, variables: PublicDashboardShareParameters|PublicDashboardUnshareParameters) => void|Promise<void>;
+}
+
+export const useDashboardShareAction = (options: UseDashboardShareActionOptions) => {
+    const { publicDashboardAPI } = usePublicDashboardApi();
+    const queryClient = useQueryClient();
+    const { withSuffix: publicDashboardGetQueryKey } = useServiceQueryKey('dashboard', 'public-dashboard', 'get');
+
+    const {
+        dashboardId, isShared, onSuccess, onError, onSettled,
+    } = options;
+
+    const shareDashboardFn = (params: PublicDashboardShareParameters|PublicDashboardUnshareParameters): Promise<DashboardModel> => {
+        if (!dashboardId.value) throw new Error('Dashboard ID is not provided');
+        if (isShared.value) return publicDashboardAPI.unshare(params as PublicDashboardUnshareParameters);
+        return publicDashboardAPI.share(params as PublicDashboardShareParameters);
+    };
+
+    return useMutation({
+        mutationFn: shareDashboardFn,
+        onSuccess: async (data, variables) => {
+            const _dashboardId = variables.dashboard_id;
+            queryClient.invalidateQueries({ queryKey: publicDashboardGetQueryKey(_dashboardId) });
+            if (onSuccess) await onSuccess(data, variables);
+        },
+        onError: (error, variables) => {
+            if (onError) onError(error, variables);
+        },
+        onSettled: (data, error, variables) => {
+            if (onSettled) onSettled(data, error, variables);
+        },
+    });
+};