Feat: introduce self files tab in the file manager

Author: khanzadimahdi

package-lock.json

@@ -24,5 +24,5 @@ async function FilesPage() {
 }
 
 export default withPermissions(FilesPage, {
-  requiredPermissions: ["files.index"],
+  requiredPermissions: ["files.index", "self.files.index"],
 });

src/app/(dashboard)/dashboard/files/page.tsx

@@ -2,7 +2,11 @@
 
 import {revalidatePath} from "next/cache";
 import {APP_PATHS} from "@/lib/app-paths";
-import {deleteFile} from "@/dal/private/files";
+import {addNewFile, deleteFile} from "@/dal/private/files";
+
+export async function addFileAction(formData: FormData): Promise<any> {
+  await addNewFile(formData);
+}
 
 export async function deleteFileAction(formData: FormData) {
   const fileId = formData.get("id")?.toString();
@@ -12,3 +16,4 @@ export async function deleteFileAction(formData: FormData) {
   await deleteFile(fileId);
   revalidatePath(APP_PATHS.dashboard.files);
 }
+

src/features/files/actions/delete-file.ts src/components/files-explorer/actions.tssrc/features/files/actions/delete-file.ts renamed to src/components/files-explorer/actions.ts

@@ -3,7 +3,7 @@
 import {useState, useRef, useId} from "react";
 import {Tooltip, ActionIcon, Loader} from "@mantine/core";
 import {IconPlus} from "@tabler/icons-react";
-import {addFileAction} from "@/features/files/actions";
+import {addFileAction} from "./actions";
 
 type Props = {
   onAdd: () => void;

src/components/files-explorer/add-file-button.tsx

@@ -17,7 +17,7 @@ import {
 } from "@mantine/core";
 import {IconEye, IconTrash, IconCheck} from "@tabler/icons-react";
 import {FILES_PUBLIC_URL} from "@/constants/envs";
-import {deleteFileAction} from "@/features/files/actions";
+import {deleteFileAction} from "./actions";
 import {mimeToIcon, defaultIcon} from "./mimetype-mapping";
 import classes from "./file-card.module.css";
 
@@ -30,7 +30,7 @@ type File = {
 type Props = {
   file: File;
   isSelected?: boolean;
-  onDelete: (id: string) => void;
+  onDelete?: (id: string) => void;
   onSelect?: (id: string) => void;
 };
 
@@ -39,7 +39,7 @@ export function FileCard({file, isSelected, onDelete, onSelect}: Props) {
     mutationKey: ["file-delete"],
     mutationFn: deleteFileAction,
     onSuccess: () => {
-      onDelete(file.uuid);
+      onDelete?.(file.uuid);
       handleClose();
     },
   });
@@ -58,6 +58,7 @@ export function FileCard({file, isSelected, onDelete, onSelect}: Props) {
   };
 
   const handleDelete = async () => {
+    if (!onDelete) return;
     const fd = new FormData();
     fd.set("id", file.uuid);
     mutate(fd);
@@ -128,16 +129,18 @@ export function FileCard({file, isSelected, onDelete, onSelect}: Props) {
                   >
                     <IconEye />
                   </ActionIcon>
-                  <ActionIcon
-                    size={"lg"}
-                    color="red"
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      setShowDeleteConfirm(true);
-                    }}
-                  >
-                    <IconTrash />
-                  </ActionIcon>
+                  {onDelete !== undefined && (
+                    <ActionIcon
+                      size={"lg"}
+                      color="red"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        setShowDeleteConfirm(true);
+                      }}
+                    >
+                      <IconTrash />
+                    </ActionIcon>
+                  )}
                 </ActionIconGroup>
               </Box>
             </Overlay>