385 lines
9.7 KiB
TypeScript
385 lines
9.7 KiB
TypeScript
import { ChevronsUpDown, RefreshCcw } from "lucide-react";
|
|
import { useState } from "react";
|
|
import toast from "react-hot-toast";
|
|
import { AreaRiservataLayout } from "~/components/Layout";
|
|
import { LoadingPage } from "~/components/loading";
|
|
import { Status500 } from "~/components/status-page";
|
|
import { StorageTable } from "~/components/tables/storage-table";
|
|
import { Button } from "~/components/ui/button";
|
|
import {
|
|
Command,
|
|
CommandEmpty,
|
|
CommandGroup,
|
|
CommandInput,
|
|
CommandItem,
|
|
CommandList,
|
|
} from "~/components/ui/command";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from "~/components/ui/dialog";
|
|
import {
|
|
Popover,
|
|
PopoverContent,
|
|
PopoverTrigger,
|
|
} from "~/components/ui/popover";
|
|
import { Separator } from "~/components/ui/separator";
|
|
import { UploadModal } from "~/components/upload_modal";
|
|
import { UserAvatar } from "~/components/user_avatar";
|
|
import { cn } from "~/lib/utils";
|
|
import type { NextPageWithLayout } from "~/pages/_app";
|
|
import { useTranslation } from "~/providers/I18nProvider";
|
|
import {
|
|
StorageTableProvider,
|
|
type StorageTable as StorageTableType,
|
|
useStorageTable,
|
|
} from "~/providers/StorageTableProvider";
|
|
import type {
|
|
Storageindex,
|
|
StorageindexId,
|
|
} from "~/schemas/public/Storageindex";
|
|
import type { Users } from "~/schemas/public/Users";
|
|
import { api } from "~/utils/api";
|
|
|
|
const AdminStorage: NextPageWithLayout = () => {
|
|
const { data, isLoading, refetch } = api.storage.getAll.useQuery();
|
|
const { t } = useTranslation();
|
|
const utils = api.useUtils();
|
|
const { mutate: deleteFile } = api.storage.deleteStorage.useMutation({
|
|
onMutate: () => {
|
|
const toastId = toast.loading(t.caricamento, {
|
|
icon: "🪛",
|
|
});
|
|
return { toastId };
|
|
},
|
|
onSuccess: async (_error, _variables, context) => {
|
|
await utils.storage.getAll.invalidate();
|
|
|
|
toast.success(t.allegati.allegato_rimosso, {
|
|
icon: "🗑️",
|
|
id: context?.toastId,
|
|
});
|
|
},
|
|
});
|
|
|
|
const handleDelete = (id: StorageindexId) => {
|
|
deleteFile({ storageId: id });
|
|
};
|
|
|
|
const handleRefetch = async () => {
|
|
await refetch();
|
|
};
|
|
|
|
if (isLoading) return <LoadingPage />;
|
|
if (!data) return <Status500 />;
|
|
//magari query amche file ownership per poter filtrare in tab se da admin o da utente o una lista di utenti a cui è visibile il file
|
|
return (
|
|
<StorageTableProvider>
|
|
<div className="mx-1 flex-1 overflow-auto">
|
|
<div className="mx-auto py-8">
|
|
<StorageTableHeader
|
|
handleDelete={handleDelete}
|
|
handleRefetch={handleRefetch}
|
|
/>
|
|
|
|
<StorageTable data={data} handleDelete={handleDelete} />
|
|
</div>
|
|
</div>
|
|
</StorageTableProvider>
|
|
);
|
|
};
|
|
export default AdminStorage;
|
|
|
|
const StorageTableHeader = ({
|
|
handleRefetch,
|
|
handleDelete,
|
|
}: {
|
|
handleRefetch: () => Promise<void>;
|
|
handleDelete: (id: StorageindexId) => void;
|
|
}) => {
|
|
const { table } = useStorageTable();
|
|
if (!table) return null;
|
|
return (
|
|
<div className="mx-3 flex flex-wrap items-center justify-between gap-3">
|
|
<div className="flex max-w-lg items-center gap-3">
|
|
<h3 className="text-accent-foreground text-xl font-bold sm:text-2xl">
|
|
Impostazioni
|
|
</h3>
|
|
<button
|
|
className="cursor-pointer hover:scale-110"
|
|
onClick={async () => {
|
|
await handleRefetch();
|
|
table.resetRowSelection();
|
|
}}
|
|
type="button"
|
|
>
|
|
<RefreshCcw className="size-6" />
|
|
</button>
|
|
</div>
|
|
<div className="flex max-w-lg flex-wrap items-center gap-3">
|
|
<UploadModal
|
|
cb_onUpload={() => {
|
|
table.setRowSelection({});
|
|
}}
|
|
/>
|
|
<Actions handleDelete={handleDelete} table={table} />
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
AdminStorage.getLayout = function getLayout(page) {
|
|
return <AreaRiservataLayout>{page}</AreaRiservataLayout>;
|
|
};
|
|
|
|
const Actions = ({
|
|
handleDelete,
|
|
table,
|
|
}: {
|
|
handleDelete: (id: StorageindexId) => void;
|
|
table: StorageTableType;
|
|
}) => {
|
|
const { selectedRows } = useStorageTable();
|
|
const [visbOpen, setVisbOpen] = useState(false);
|
|
|
|
const deleteSelected = () => {
|
|
selectedRows.forEach((row) => handleDelete(row.id));
|
|
table.resetRowSelection();
|
|
};
|
|
|
|
return (
|
|
<div className="flex items-center gap-4 md:mt-0">
|
|
<Button
|
|
className="transition-all duration-100"
|
|
disabled={selectedRows.length === 0}
|
|
onClick={() => setVisbOpen(true)}
|
|
variant="info"
|
|
>
|
|
Modifica Visibilità
|
|
</Button>
|
|
|
|
<Button
|
|
className="transition-all duration-100"
|
|
disabled={selectedRows.length === 0}
|
|
onClick={() => deleteSelected()}
|
|
variant="destructive"
|
|
>
|
|
Elimina
|
|
</Button>
|
|
{visbOpen && (
|
|
<VisibComponent
|
|
allegati={selectedRows}
|
|
open={visbOpen}
|
|
setOpen={setVisbOpen}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const VisibComponent = ({
|
|
allegati,
|
|
open,
|
|
setOpen,
|
|
}: {
|
|
allegati: Storageindex[];
|
|
open: boolean;
|
|
setOpen: (v: boolean) => void;
|
|
}) => {
|
|
const utils = api.useUtils();
|
|
const { data, isLoading } = api.storage.getStorageVisibility.useQuery({
|
|
storageIds: allegati.map((a) => a.id),
|
|
});
|
|
const { data: users } = api.users.getUsers.useQuery();
|
|
|
|
const { mutate: remove } = api.storage.removeStorageVisibility.useMutation({
|
|
onMutate: () => {
|
|
const toastId = toast.loading("Rimozione utente in corso", {
|
|
icon: "🪛",
|
|
});
|
|
return { toastId };
|
|
},
|
|
onSuccess: async (_error, _variables, context) => {
|
|
await utils.storage.getStorageVisibility.invalidate();
|
|
toast.success("Utente rimosso", {
|
|
icon: "🗑️",
|
|
id: context?.toastId,
|
|
});
|
|
},
|
|
});
|
|
const { mutate: add } = api.storage.addStorageVisibility.useMutation({
|
|
onMutate: () => {
|
|
const toastId = toast.loading("Aggiunta utente in corso", {
|
|
icon: "🪛",
|
|
});
|
|
return { toastId };
|
|
},
|
|
onSuccess: async (_error, _variables, context) => {
|
|
await utils.storage.getStorageVisibility.invalidate();
|
|
toast.success("Utente aggiunto", {
|
|
icon: "👍",
|
|
id: context?.toastId,
|
|
});
|
|
},
|
|
});
|
|
|
|
const { mutate: reset } = api.storage.resetStorageVisibility.useMutation({
|
|
onMutate: () => {
|
|
const toastId = toast.loading("Reset visibilità in corso", {
|
|
icon: "🪛",
|
|
});
|
|
return { toastId };
|
|
},
|
|
onSuccess: async (_error, _variables, context) => {
|
|
await utils.storage.getStorageVisibility.invalidate();
|
|
toast.success("Reset effettuato", {
|
|
icon: "👍",
|
|
id: context?.toastId,
|
|
});
|
|
},
|
|
});
|
|
|
|
return (
|
|
<>
|
|
<Dialog onOpenChange={setOpen} open={open}>
|
|
<DialogContent className="max-w-2xl">
|
|
<DialogHeader>
|
|
<DialogTitle>Modifica Visibilità</DialogTitle>
|
|
<DialogDescription className="sr-only">
|
|
Modifica la visibilità degli allegati selezionati
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<div className="flex flex-col gap-4">
|
|
{isLoading ? (
|
|
<LoadingPage />
|
|
) : (
|
|
<>
|
|
<div className="flex items-center gap-3">
|
|
<p>Seleziona utente:</p>
|
|
<UtentiCombo
|
|
onSelect={(user) => {
|
|
for (const allegato of allegati) {
|
|
add({ storageId: allegato.id, userId: user.id });
|
|
}
|
|
}}
|
|
users={users || []}
|
|
/>
|
|
<Button
|
|
className="ml-auto"
|
|
onClick={() =>
|
|
reset({ storageId: allegati.map((a) => a.id) })
|
|
}
|
|
variant="destructive"
|
|
>
|
|
Reset
|
|
</Button>
|
|
</div>
|
|
{data?.map((allegato, i) => (
|
|
<div
|
|
className={cn(
|
|
"flex flex-col gap-3 rounded-md p-2",
|
|
i % 2 === 0 && "bg-gray-200",
|
|
)}
|
|
key={allegato.id}
|
|
>
|
|
<p className="text-lg font-semibold">
|
|
File: {allegato.filename}
|
|
</p>
|
|
<div className="flex items-center gap-3">
|
|
<p>Visibile a:</p>
|
|
{allegato.users_storages.length === 0 ? (
|
|
<p>Nessuno</p>
|
|
) : (
|
|
<ul className="flex gap-2">
|
|
{allegato.users_storages.map((user) => (
|
|
<li key={user.userid}>
|
|
<Button
|
|
className="after:content-['X']"
|
|
onClick={() =>
|
|
remove({
|
|
storageId: allegato.id,
|
|
userId: user.userid,
|
|
})
|
|
}
|
|
variant="outline"
|
|
>
|
|
{user.username}
|
|
</Button>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</>
|
|
)}
|
|
<Separator />
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</>
|
|
);
|
|
};
|
|
|
|
const UtentiCombo = ({
|
|
users,
|
|
onSelect,
|
|
}: {
|
|
users: Users[];
|
|
onSelect: (user: Users) => void;
|
|
}) => {
|
|
const [open, setOpen] = useState(false);
|
|
|
|
return (
|
|
<Popover onOpenChange={setOpen} open={open}>
|
|
<PopoverTrigger asChild>
|
|
<Button
|
|
aria-expanded={open}
|
|
className="w-auto justify-between"
|
|
role="combobox"
|
|
variant="outline"
|
|
>
|
|
Seleziona utente...
|
|
<ChevronsUpDown className="ml-2 size-4 shrink-0 opacity-50" />
|
|
</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent className="w-auto p-0">
|
|
<Command>
|
|
<CommandInput placeholder="Cerca Utente..." />
|
|
<CommandList>
|
|
<CommandEmpty>Nessun utente.</CommandEmpty>
|
|
<CommandGroup>
|
|
{users.map((user) => (
|
|
<CommandItem
|
|
key={user.id}
|
|
onSelect={(currentValue) => {
|
|
// biome-ignore lint/style/noNonNullAssertion: <known lenght>
|
|
onSelect(users.find((u) => u.id === currentValue)!);
|
|
setOpen(false);
|
|
}}
|
|
value={user.id}
|
|
>
|
|
<span className="flex items-center gap-2">
|
|
<UserAvatar
|
|
className="size-8"
|
|
userId={user.id}
|
|
username={user.username}
|
|
/>
|
|
|
|
<span>
|
|
<span className="block font-medium">{user.username}</span>
|
|
</span>
|
|
</span>
|
|
</CommandItem>
|
|
))}
|
|
</CommandGroup>
|
|
</CommandList>
|
|
</Command>
|
|
</PopoverContent>
|
|
</Popover>
|
|
);
|
|
};
|