Vault

midday-ai · Dec 15, 2023 · 57af56a · 57af56a
1 parent 0f4d187
commit 57af56a
Show file tree

Hide file tree

Showing 19 changed files with 262 additions and 193 deletions.
diff --git a/.github/workflows/preview-dashboard.yaml b/.github/workflows/preview-dashboard.yaml
@@ -20,7 +20,7 @@ jobs:
         uses: rlespinasse/github-slug-action@v4
       - uses: oven-sh/setup-bun@v1
         with:
-          bun-version: "1.0.17"
+          bun-version: "1.0.18"
       - name: Install dependencies
         run: bun install --frozen-lockfile
       - name: 📤 Pull Vercel Environment Information

diff --git a/.github/workflows/preview-website.yml b/.github/workflows/preview-website.yml
@@ -20,7 +20,7 @@ jobs:
         uses: rlespinasse/github-slug-action@v4
       - uses: oven-sh/setup-bun@v1
         with:
-          bun-version: "1.0.17"
+          bun-version: "1.0.18"
       - name: Install dependencies
         run: bun install --frozen-lockfile
       - name: 📤 Pull Vercel Environment Information

diff --git a/.github/workflows/production-dashboard.yml b/.github/workflows/production-dashboard.yml
@@ -18,7 +18,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: oven-sh/setup-bun@v1
         with:
-          bun-version: "1.0.17"
+          bun-version: "1.0.18"
       - name: Install dependencies
         run: bun install --frozen-lockfile
       - name: 📤 Pull Vercel Environment Information

diff --git a/.github/workflows/production-website.yml b/.github/workflows/production-website.yml
@@ -18,7 +18,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: oven-sh/setup-bun@v1
         with:
-          bun-version: "1.0.17"
+          bun-version: "1.0.18"
       - name: Install dependencies
         run: bun install --frozen-lockfile
       - name: 📤 Pull Vercel Environment Information

diff --git a/apps/dashboard/package.json b/apps/dashboard/package.json
@@ -22,9 +22,9 @@
     "@midday/supabase": "workspace:*",
     "@midday/ui": "workspace:*",
     "@novu/headless": "^0.22.0",
-    "@trigger.dev/nextjs": "^2.3.5",
+    "@trigger.dev/nextjs": "^2.3.6",
     "@vercel/edge-config": "^0.4.1",
-    "@vercel/speed-insights": "^1.0.1",
+    "@vercel/speed-insights": "^1.0.2",
     "@vercel/toolbar": "^0.1.6",
     "@zip.js/zip.js": "2.7.32",
     "change-case": "^5.3.0",

diff --git a/apps/dashboard/src/app/[locale]/@dashboard/(root)/vault/[[...folders]]/page.tsx b/apps/dashboard/src/app/[locale]/@dashboard/(root)/vault/[[...folders]]/page.tsx
@@ -1,7 +1,4 @@
-import { Breadcrumbs } from "@/components/breadcrumbs";
 import { Table } from "@/components/tables/vault";
-import { CreateFolderButton } from "@/components/tables/vault/create-folder-button";
-import { UploadButton } from "@/components/tables/vault/upload-button";
 import { Metadata } from "next";
 
 export const metadata: Metadata = {
@@ -13,17 +10,5 @@ export default function Vault({ params }) {
     params?.folders?.at(0)
   );
 
-  return (
-    <div>
-      <div className="flex justify-between items-center mt-6 h-[32px]">
-        <Breadcrumbs folders={params?.folders} />
-
-        <div className="flex space-x-2">
-          <CreateFolderButton disableActions={disableActions} />
-          <UploadButton disableActions={disableActions} />
-        </div>
-      </div>
-      <Table path={params?.folders?.join("/")} />
-    </div>
-  );
+  return <Table folders={params.folders} disableActions={disableActions} />;
 }
diff --git a/apps/dashboard/src/components/tables/vault/create-folder-button.tsx b/apps/dashboard/src/components/tables/vault/create-folder-button.tsx
@@ -1,13 +1,23 @@
+"use client";
+
+import { useVaultContext } from "@/store/vault/hook";
 import { Button } from "@midday/ui/button";
 import { Icons } from "@midday/ui/icons";
 
 export function CreateFolderButton({ disableActions }) {
+  const createFolder = useVaultContext((s) => s.createFolder);
+
+  const handleCreateFolder = () => {
+    createFolder({ name: "Untitled folder" });
+  };
+
   return (
     <Button
       variant="outline"
       className="w-[32px] h-[32px]"
       size="icon"
       disabled={disableActions}
+      onClick={handleCreateFolder}
     >
       <Icons.CreateNewFolder />
     </Button>

diff --git a/apps/dashboard/src/components/tables/vault/data-table-row.tsx b/apps/dashboard/src/components/tables/vault/data-table-row.tsx
@@ -1,8 +1,12 @@
 "use client";
 
+import { createFolderAction } from "@/actions/create-folder-action";
+import { deleteFileAction } from "@/actions/delete-file-action";
+import { deleteFolderAction } from "@/actions/delete-folder-action";
 import { shareFileAction } from "@/actions/share-file-action";
 import { FileIcon } from "@/components/file-icon";
 import { useI18n } from "@/locales/client";
+import { useVaultContext } from "@/store/vault/hook";
 import { formatSize } from "@/utils/format";
 import {
   AlertDialog,
@@ -40,12 +44,15 @@ import {
   HoverCardTrigger,
 } from "@midday/ui/hover-card";
 import { Icons } from "@midday/ui/icons";
+import { Input } from "@midday/ui/input";
 import { TableCell, TableRow } from "@midday/ui/table";
 import { useToast } from "@midday/ui/use-toast";
 import { format } from "date-fns";
 import ms from "ms";
 import { useAction } from "next-safe-action/hook";
-import { useParams, usePathname, useRouter } from "next/navigation";
+import Link from "next/link";
+import { useParams, usePathname } from "next/navigation";
+import { useState } from "react";
 
 export const translatedFolderName = (t: any, folder: string) => {
   switch (folder) {
@@ -57,24 +64,62 @@ export const translatedFolderName = (t: any, folder: string) => {
       return t("folders.transactions");
     case "exports":
       return t("folders.exports");
-
     default:
       return decodeURIComponent(folder);
   }
 };
 
-export function DataTableRow({
-  data,
-  deleteFile,
-  createFolder,
-  deleteFolder,
-  teamId,
-}) {
+function RowTitle({ isEditing, name: initialName, path, href }) {
   const t = useI18n();
   const { toast } = useToast();
-  const router = useRouter();
+  const [name, setName] = useState(initialName ?? "Untitled Folder");
+
+  const createFolder = useAction(createFolderAction, {
+    onExecute: () => {},
+    onError: () => {
+      toast({
+        duration: 3500,
+        title:
+          "The folder already exists in the current directory. Please use a different name.",
+      });
+    },
+  });
+
+  const handleOnBlur = (evt) => {
+    createFolder.execute({ path, name });
+  };
+
+  const handleOnKeyDown = (evt: React.KeyboardEvent<HTMLInputElement>) => {
+    if (evt.key === "Enter") {
+      createFolder.execute({ path, name });
+    }
+  };
+
+  if (isEditing) {
+    return (
+      <Input
+        className="w-auto border-0"
+        value={name}
+        autoFocus
+        onBlur={handleOnBlur}
+        onKeyDown={handleOnKeyDown}
+        onChange={(evt) => setName(evt.target.value)}
+      />
+    );
+  }
+
+  if (href) {
+    return <Link href={href}>{translatedFolderName(t, name)}</Link>;
+  }
+
+  return <span>{translatedFolderName(t, name)}</span>;
+}
+
+export function DataTableRow({ data, teamId }) {
+  const { toast } = useToast();
   const pathname = usePathname();
   const params = useParams();
+  const { deleteItem, createFolder } = useVaultContext((s) => s);
 
   const folders = params?.folders ?? [];
   const isDefaultFolder = ["inbox", "exports", "transactions"].includes(
@@ -85,6 +130,40 @@ export function DataTableRow({
   const folderPath = folders.join("/");
   const filepath = [...folders, data.name].join("/");
 
+  const deleteFolder = useAction(deleteFolderAction, {
+    onExecute: () => deleteItem(data.name),
+    onError: () => {
+      toast({
+        duration: 3500,
+        variant: "error",
+        title: "Something went wrong pleaase try again.",
+      });
+    },
+  });
+
+  const deleteFile = useAction(deleteFileAction, {
+    onExecute: ({ id }) => deleteItem(id),
+    onError: () => {
+      toast({
+        duration: 3500,
+        variant: "error",
+        title: "Something went wrong pleaase try again.",
+      });
+    },
+  });
+
+  const handleDeleteItem = () => {
+    if (data.isFolder) {
+      deleteFolder.execute({ path: [...folders, data.name] });
+    } else {
+      deleteFile.execute({ id: data.id, path: [...folders, data.name] });
+    }
+  };
+
+  const handleCreateFolder = () => {
+    createFolder({ path: folderPath, name: "Untitled folder" });
+  };
+
   const shareFile = useAction(shareFileAction, {
     onSuccess: async (url) => {
       try {
@@ -99,20 +178,12 @@ export function DataTableRow({
     },
   });
 
-  const handleNavigate = () => {
-    if (data.isFolder) {
-      router.push(`${pathname}/${data.name}`);
-    }
-  };
-
-  console.log(data);
-
   return (
     <AlertDialog>
       <ContextMenu>
         <ContextMenuTrigger asChild>
           <TableRow className="h-[45px] cursor-default">
-            <TableCell onClick={handleNavigate}>
+            <TableCell>
               <HoverCard openDelay={300}>
                 <HoverCardTrigger
                   disabled={data?.metadata?.mimetype !== "application/pdf"}
@@ -123,7 +194,14 @@ export function DataTableRow({
                       name={data.name}
                       isFolder={data.isFolder}
                     />
-                    <span>{translatedFolderName(t, data.name)}</span>
+
+                    <RowTitle
+                      href={data.isFolder && `${pathname}/${data.name}`}
+                      name={data.name}
+                      isEditing={data.isEditing}
+                      path={folderPath}
+                    />
+
                     {data?.metadata?.size && (
                       <span className="text-[#878787]">
                         {formatSize(data.metadata.size)}
@@ -157,7 +235,7 @@ export function DataTableRow({
                     <Icons.MoreHoriz />
                   </DropdownMenuTrigger>
                   <DropdownMenuContent
-                    className="w-56"
+                    className="w-42"
                     sideOffset={10}
                     align="end"
                   >
@@ -203,9 +281,9 @@ export function DataTableRow({
                       </DropdownMenuSub>
                     )}
 
-                    {!disableActions && !isDefaultFolder && (
+                    {/* {!disableActions && !isDefaultFolder && (
                       <DropdownMenuItem>Rename</DropdownMenuItem>
-                    )}
+                    )} */}
                     <DropdownMenuItem>
                       {data.isFolder ? (
                         <a
@@ -275,19 +353,14 @@ export function DataTableRow({
               </ContextMenuSubContent>
             </ContextMenuSub>
           )}
-          <ContextMenuItem
-            onClick={() =>
-              createFolder({
-                path: folderPath,
-                name: "Untitled folder",
-              })
-            }
-          >
-            Create folder
-          </ContextMenuItem>
-          {!disableActions && !isDefaultFolder && (
-            <ContextMenuItem>Rename</ContextMenuItem>
+          {!disableActions && (
+            <ContextMenuItem onClick={handleCreateFolder}>
+              Create folder
+            </ContextMenuItem>
           )}
+          {/* {!disableActions && !isDefaultFolder && (
+            <ContextMenuItem>Rename</ContextMenuItem>
+          )} */}
           <ContextMenuItem>
             {data.isFolder ? (
               <a
@@ -324,20 +397,7 @@ export function DataTableRow({
           </AlertDialogHeader>
           <AlertDialogFooter>
             <AlertDialogCancel>Cancel</AlertDialogCancel>
-            <AlertDialogAction
-              onClick={() => {
-                if (data.isFolder) {
-                  deleteFolder({
-                    path: [...folders, data.name],
-                  });
-                } else {
-                  deleteFile({
-                    id: data.id,
-                    path: [...folders, data.name],
-                  });
-                }
-              }}
-            >
+            <AlertDialogAction onClick={handleDeleteItem}>
               Continue
             </AlertDialogAction>
           </AlertDialogFooter>