Save draft

app/components/chart-selection-tabs.tsx

@@ -8,8 +8,10 @@ import {
   Tabs,
   Theme,
   Tooltip,
+  useEventCallback,
 } from "@mui/material";
 import { makeStyles } from "@mui/styles";
+import { PUBLISHED_STATE } from "@prisma/client";
 import { useSession } from "next-auth/react";
 import { useRouter } from "next/router";
 import React from "react";
@@ -37,9 +39,13 @@ import { useUserConfig } from "@/domain/user-configs";
 import { useDataCubesComponentsQuery } from "@/graphql/hooks";
 import { Icon, IconName } from "@/icons";
 import { useLocale } from "@/src";
+import { createConfig, updateConfig } from "@/utils/chart-config/api";
 import { createChartId } from "@/utils/create-chart-id";
 import { getRouterChartId } from "@/utils/router/helpers";
 import useEvent from "@/utils/use-event";
+import { useMutate } from "@/utils/use-fetch-data";
+
+import { useLocalSnack } from "./use-local-snack";
 
 type TabsState = {
   popoverOpen: boolean;
@@ -313,15 +319,97 @@ export const LayoutChartButton = () => {
   );
 };
 
-export const PublishChartButton = () => {
-  const { asPath } = useRouter();
+const SaveAsDraftButton = ({ chartId }: { chartId: string | undefined }) => {
+  const { data: config, invalidate: invalidateConfig } = useUserConfig(chartId);
+  console.log("config", config?.user_id);
+  const session = useSession();
+
+  const [state] = useConfiguratorState();
+
+  const [snack, enqueueSnackbar] = useLocalSnack();
+  const { asPath, replace } = useRouter();
+
+  const createConfigMut = useMutate(createConfig);
+  const updatePublishedStateMut = useMutate(updateConfig);
+  const loggedInId = session.data?.user.id;
+
+  const handleClick = useEventCallback(async () => {
+    try {
+      if (config?.user_id && loggedInId) {
+        const updated = await updatePublishedStateMut.mutate(state, {
+          userId: loggedInId,
+          published_state: PUBLISHED_STATE.DRAFT,
+          key: config.key,
+        });
+
+        if (updated) {
+          if (asPath !== `/create/${updated.key}`) {
+            replace(`/create/new?edit=${updated.key}`);
+          }
+          enqueueSnackbar({
+            message: "Draft updated !",
+            variant: "success",
+          });
+        } else {
+          throw new Error("Could not update draft");
+        }
+      } else if (state) {
+        const saved = await createConfigMut.mutate(
+          state,
+          PUBLISHED_STATE.DRAFT
+        );
+        if (saved) {
+          enqueueSnackbar({
+            message: "Draft saved !",
+            variant: "success",
+          });
+          replace(`/create/${saved.key}`);
+        } else {
+          throw new Error("Could not save draft");
+        }
+      }
+      invalidateConfig();
+    } catch (e) {
+      enqueueSnackbar({
+        message: `Error while saving draft: ${
+          e instanceof Error ? e.message : e
+        }`,
+        variant: "error",
+      });
+    }
+  });
+
+  return (
+    <Tooltip
+      arrow
+      title={snack?.message ?? ""}
+      open={!!snack}
+      disableFocusListener
+      disableHoverListener
+      disableTouchListener
+    >
+      <Button variant="outlined" onClick={handleClick}>
+        <Trans id="button.save-draft">Save draft</Trans>
+      </Button>
+    </Tooltip>
+  );
+};
+
+export const PublishChartButton = ({
+  chartId,
+}: {
+  chartId: string | undefined;
+}) => {
   const session = useSession();
-  const chartId = getRouterChartId(asPath);
   const { data: config, status } = useUserConfig(chartId);
   const editingPublishedChart =
-    session.data?.user.id && config?.user_id === session.data.user.id;
+    session.data?.user.id &&
+    config?.user_id === session.data.user.id &&
+    config.published_state === "PUBLISHED";
 
-  return status === "fetching" ? null : (
+  return status === "fetching" && !config ? (
+    <>{status}</>
+  ) : (
     <NextStepButton>
       {editingPublishedChart ? (
         <Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
@@ -367,6 +455,9 @@ const TabsInner = (props: TabsInnerProps) => {
   } = props;
   const [state, dispatch] = useConfiguratorState(hasChartConfigs);
 
+  const { asPath } = useRouter();
+  const chartId = getRouterChartId(asPath);
+
   return (
     <Box
       sx={{
@@ -414,6 +505,7 @@ const TabsInner = (props: TabsInnerProps) => {
                         {...provided.draggableProps}
                         {...provided.dragHandleProps}
                         style={{ ...style, transform, opacity: 1 }}
+                        component="div"
                         key={d.key}
                         sx={{
                           mr: 2,
@@ -475,7 +567,10 @@ const TabsInner = (props: TabsInnerProps) => {
         (enableLayouting(state) ? (
           <LayoutChartButton />
         ) : (
-          <PublishChartButton />
+          <Box gap={"1rem"} display="flex">
+            <SaveAsDraftButton chartId={chartId} />
+            <PublishChartButton chartId={chartId} />
+          </Box>
         ))}
     </Box>
   );

app/components/use-local-snack.tsx

@@ -0,0 +1,34 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+
+/**
+ * Holds a temporary snack state
+ */
+export const useLocalSnack = () => {
+  type Snack = {
+    message: string;
+    variant: "success" | "error";
+    duration?: number;
+  };
+  const timeoutRef = useRef<ReturnType<typeof setTimeout>>();
+  const [snack, setSnack] = useState(undefined as Snack | undefined);
+
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+
+  return [
+    snack,
+    useCallback((snack: Snack | undefined) => {
+      setSnack(snack);
+      if (snack) {
+        timeoutRef.current = setTimeout(() => {
+          setSnack(undefined);
+        }, snack.duration || 5000);
+      }
+    }, []),
+  ] as const;
+};

app/config-types.ts

@@ -1127,21 +1127,17 @@ const Layout = t.intersection([
 export type Layout = t.TypeOf<typeof Layout>;
 export type LayoutType = Layout["type"];
 
-const Config = t.intersection([
-  t.type(
-    {
-      version: t.string,
-      dataSource: DataSource,
-      layout: Layout,
-      chartConfigs: t.array(ChartConfig),
-      activeChartKey: t.string,
-    },
-    "Config"
-  ),
-  t.partial({
-    publishedState: t.string,
-  }),
-]);
+const Config = t.type(
+  {
+    version: t.string,
+    dataSource: DataSource,
+    layout: Layout,
+    chartConfigs: t.array(ChartConfig),
+    activeChartKey: t.string,
+  },
+  "Config"
+);
+[];
 export type Config = t.TypeOf<typeof Config>;
 
 export const isValidConfig = (config: unknown): config is Config => {

app/configurator/configurator-state.tsx

@@ -1,3 +1,4 @@
+import { PUBLISHED_STATE } from "@prisma/client";
 import produce, { current } from "immer";
 import get from "lodash/get";
 import pickBy from "lodash/pickBy";
@@ -1875,7 +1876,10 @@ async function publishState(
           chartKey
         );
 
-        const result = await createConfig(preparedConfig);
+        const result = await createConfig(
+          preparedConfig,
+          PUBLISHED_STATE.PUBLISHED
+        );
 
         onSaveConfig(result, i, reversedChartKeys.length);
         return result;
@@ -1897,8 +1901,9 @@ async function publishState(
         ? updateConfig(preparedConfig, {
             key: dbConfig.key,
             userId: user.id,
+            published_state: PUBLISHED_STATE.PUBLISHED,
           })
-        : createConfig(preparedConfig));
+        : createConfig(preparedConfig, PUBLISHED_STATE.PUBLISHED));
 
       onSaveConfig(result, 0, 1);
       return result;

app/db/config.ts

@@ -2,7 +2,7 @@
  * Server side methods to connect to the database
  */
 
-import { Config, Prisma, User } from "@prisma/client";
+import { Config, Prisma, PUBLISHED_STATE, User } from "@prisma/client";
 
 import { ChartConfig, ConfiguratorStatePublished } from "@/configurator";
 import { migrateConfiguratorState } from "@/utils/chart-config/versioning";
@@ -20,16 +20,19 @@ export const createConfig = async ({
   key,
   data,
   userId,
+  publishedState,
 }: {
   key: string;
   data: Prisma.ConfigCreateInput["data"];
   userId?: User["id"] | undefined;
+  publishedState: PUBLISHED_STATE;
 }): Promise<{ key: string }> => {
   return await prisma.config.create({
     data: {
       key,
       data,
       user_id: userId,
+      published_state: publishedState,
     },
   });
 };

app/login/components/profile-tables.tsx

@@ -23,6 +23,7 @@
 import { PUBLISHED_STATE } from "@prisma/client";
 import NextLink from "next/link";
 import React from "react";
+import { ObjectInspector } from "react-inspector";
 
 import useDisclosure from "@/components/use-disclosure";
 import { ParsedConfig } from "@/db/config";
@@ -122,6 +123,11 @@
                 Published
               </Trans>
             </TableCell>
+            <TableCell>
+              <Trans id="login.profile.my-visualizations.chart-updated-date">
+                Updated
+              </Trans>
+            </TableCell>
             <TableCell align="right">
               <Trans id="login.profile.my-visualizations.chart-actions">
                 Actions
@@ -182,6 +188,12 @@
   const removeMut = useMutate(removeConfig);
   const actions = React.useMemo(() => {
     const actions: ActionProps[] = [
+      {
+        type: "link",
+        href: `/v/${config.key}`,
+        label: t({ id: "login.chart.view", message: "View" }),
+        iconName: "eye",
+      },
       {
         type: "link",
         href: `/create/new?copy=${config.key}`,
@@ -332,7 +344,14 @@
       </TableCell>
       <TableCell width={120}>
         <Typography variant="body2">
-          {config.created_at.toLocaleDateString("de")}
+          {config.published_state === PUBLISHED_STATE.DRAFT
+            ? "Draft"
+            : config.created_at.toLocaleDateString("de")}
+        </Typography>
+      </TableCell>
+      <TableCell width={120}>
+        <Typography variant="body2">
+          {config.updated_at.toLocaleDateString("de")}
         </Typography>
       </TableCell>
       <TableCell width="auto" align="right">

app/pages/api/config-create.ts

@@ -10,12 +10,13 @@ const route = api({
   POST: async ({ req, res }) => {
     const session = await getServerSession(req, res, nextAuthOptions);
     const userId = session?.user?.id;
-    const { data } = req.body;
+    const { data, publishedState } = req.body;
 
     return await createConfig({
       key: data.key,
       data,
       userId,
+      publishedState: publishedState,
     });
   },
 });

app/prisma/schema.prisma

@@ -23,7 +23,7 @@ model Config {
   user    User? @relation(fields: [user_id], references: [id])
   user_id Int?
 
-  published_state PUBLISHED_STATE @default(DRAFT)
+  published_state PUBLISHED_STATE @default(PUBLISHED)
 
   @@map("config")
 }

app/server/nextkit.ts

@@ -1,10 +1,12 @@
 import createAPI from "nextkit";
 
 export const api = createAPI({
-  async onError() {
+  async onError(req, res, error) {
     return {
       status: 500,
-      message: "Something went wrong.",
+      message: `Something went wrong: ${
+        error instanceof Error ? error.message : error
+      }`,
     };
   },
 });