-
+
)
}
\ No newline at end of file
diff --git a/apps/frontend/src/components/tables/files-table.tsx b/apps/frontend/src/components/tables/files-table.tsx
index e816daa..abd057e 100644
--- a/apps/frontend/src/components/tables/files-table.tsx
+++ b/apps/frontend/src/components/tables/files-table.tsx
@@ -1,12 +1,14 @@
"use client"
-
import {
ColumnDef,
flexRender,
- getCoreRowModel, getPaginationRowModel, getSortedRowModel, SortingState,
+ getCoreRowModel,
+ getPaginationRowModel,
+ getSortedRowModel,
+ PaginationState,
+ SortingState,
useReactTable
} from '@tanstack/react-table';
-
import {
Table,
TableBody,
@@ -17,169 +19,207 @@ import {
} from "../ui/table"
import { Button } from '../ui/button';
import { Badge } from '../ui/badge'
-import { ArrowUpDown, Clock, Download, Trash } from 'lucide-react';
-import { useState } from 'react';
+import { ArrowUpDown, Clock, Download, Trash, TriangleAlert } from 'lucide-react';
+import { Dispatch, SetStateAction, useMemo, useReducer, useState } from 'react';
import Link from 'next/link';
-
-// This type is used to define the shape of our data.
-// You can use a Zod schema here if you want.
-export type IFile = {
- uuid: string;
- fileName: string;
- checksum: string;
- extension: string;
- groupId: string | null;
- fileSize: number;
- fileType: string;
- isRestricted: boolean;
- isDocumentation: boolean;
- uploadedAt: string;
- uploadedBy: string;
-}
+import { IFile } from '../../types/file';
+import { keepPreviousData, useQuery } from '@tanstack/react-query';
+import { FilesApi } from 'apps/frontend/src/requests/files';
+import { Alert, AlertDescription, AlertTitle } from '../ui/alert';
+import { LoadingSpinner } from 'apps/frontend/src/components/loading-spinner';
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '../ui/accordion';
+import {
+ ISearchBarResult,
+ SearchBar
+} from 'apps/frontend/src/components/tables/search-bar';
+import {
+ TablePagination
+} from 'apps/frontend/src/components/tables/pagination';
function ContextButtonForFile() {
- return (
-
-
)
+ return (
+
+
+
+ );
}
export const filesTableColumns: ColumnDef
[] = [
{
accessorKey: "fileName",
- header: ({ column }) => {
- return (
+ header: ({ column }) => (
+
Nom du fichier
-
)
- },
+
+ header: ({ column }) => (
+
Autheur(s)
-
)
- },
+
-
-
-
- {formatted}
-
-
-
+
+
+
+ {formatted}
+
+
+
+ header: ({ column }) => (
+
Extension du fichier
-
)
- },
+
- {extension}
-
)
+ return (
+
+ {extension}
+
+ );
},
},
{
id: "actions",
- header: ({ column }) => {
- return (
+ header: ({ column }) => (
+
Actions
-
)
- },
+
-
-
-
)
+ const file = row.original;
+ return (
+
+
+
+
+ );
},
},
-]
+];
interface DataTableProps {
columns: ColumnDef[]
- data: TData[]
+ searchField: ISearchBarResult
}
export function FilesDataTable({
- columns,
- data,
- }: DataTableProps) {
- const [sorting, setSorting] = useState([])
+ columns,
+ searchField
+ }: DataTableProps) {
+ const rerender = useReducer(() => ({}), {})[1];
+ const [sorting, setSorting] = useState([]);
+ const [data, setData] = useState([]);
+ const [rowsCount, setRowsCount] = useState(0);
+ const [pagination, setPagination] = useState({
+ pageIndex: 0,
+ pageSize: 10,
+ });
+
+ const queryResult = useQuery({
+ queryKey: ['files', pagination, searchField],
+ queryFn: async () => {
+ const response = await FilesApi.get.files(pagination, searchField.value);
+ setRowsCount(response.count);
+ setData(response.data as TData[]);
+ return response.data;
+ },
+ staleTime: 500,
+ placeholderData: keepPreviousData,
+ });
+
+ const { isPending, isError, error, isFetching, isPlaceholderData } = queryResult;
+
const table = useReactTable({
data,
columns,
+ pageCount: Math.ceil(rowsCount / pagination.pageSize),
getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel(),
+ manualPagination: true,
onSortingChange: setSorting,
getSortedRowModel: getSortedRowModel(),
state: {
sorting,
+ pagination,
},
- })
+ });
+
+
+ if (isError) {
+
+ return (
+
+
+ Erreur
+
+ {error.message}
+
+
+ Stack trace
+
+ {error.stack}
+
+
+
+
+
+ );
+ }
return (
-
-
+
+ {isPending && isFetching && isPlaceholderData ?
:
{table.getHeaderGroups().map((headerGroup) => (
- {headerGroup.headers.map((header) => {
- return (
-
- {header.isPlaceholder
- ? null
- : flexRender(
- header.column.columnDef.header,
- header.getContext()
- )}
-
- )
- })}
+ {headerGroup.headers.map((header) => (
+
+ {header.isPlaceholder ? null : flexRender(
+ header.column.columnDef.header,
+ header.getContext()
+ )}
+
+ ))}
))}
{table.getRowModel().rows?.length ? (
table.getRowModel().rows.map((row) => (
-
+
{row.getVisibleCells().map((cell) => (
{flexRender(cell.column.columnDef.cell, cell.getContext())}
@@ -195,7 +235,10 @@ export function FilesDataTable({
)}
-
+
}
+
+ {isMonoPage ? (
Il n'y as qu'une seule page.
) : (
Page {currentPage} sur {totalPages}
)}
+
+
+
+
+
+
+
+ setInputValue(e.target.value)}
+ placeholder="Votre recherche..." />
+
+ {isLoading &&
}
+
{
+ if (disabled) return;
+ inputRef?.current?.focus();
+ }}
+ >
+
+ {selected.map((option) => {
+ return (
+
+ {option.label}
+
+
+ );
+ })}
+ {/* Avoid having the "Search" Icon */}
+ {
+ setInputValue(value);
+ inputProps?.onValueChange?.(value);
+ }}
+ onBlur={(event) => {
+ if (!onScrollbar) {
+ setOpen(false);
+ }
+ inputProps?.onBlur?.(event);
+ }}
+ onFocus={(event) => {
+ setOpen(true);
+ triggerSearchOnFocus && onSearch?.(debouncedSearchTerm);
+ inputProps?.onFocus?.(event);
+ }}
+ placeholder={hidePlaceholderWhenSelected && selected.length !== 0 ? '' : placeholder}
+ className={cn(
+ 'flex-1 bg-transparent outline-none placeholder:text-muted-foreground',
+ {
+ 'w-full': hidePlaceholderWhenSelected,
+ 'px-3 py-2': selected.length === 0,
+ 'ml-1': selected.length !== 0,
+ },
+ inputProps?.className,
+ )}
+ />
+
+
+
+ {open && (
+ {
+ setOnScrollbar(false);
+ }}
+ onMouseEnter={() => {
+ setOnScrollbar(true);
+ }}
+ onMouseUp={() => {
+ inputRef?.current?.focus();
+ }}
+ >
+ {isLoading ? (
+ <>{loadingIndicator}
+ ) : (
+ <>
+ {EmptyItem()}
+ {CreatableItem()}
+ {!selectFirstItem && }
+ {Object.entries(selectables).map(([key, dropdowns]) => (
+
+ <>
+ {dropdowns.map((option) => {
+ return (
+ {
+ e.preventDefault();
+ e.stopPropagation();
+ }}
+ onSelect={() => {
+ if (selected.length >= maxSelected) {
+ onMaxSelected?.(selected.length);
+ return;
+ }
+ setInputValue('');
+ const newOptions = [...selected, option];
+ setSelected(newOptions);
+ onChange?.(newOptions);
+ }}
+ className={cn(
+ 'cursor-pointer',
+ option.disable && 'cursor-default text-muted-foreground',
+ )}
+ >
+ {option.label}
+
+ );
+ })}
+
+
+ ))}
+
+ )}
+
+ )}
+
+
+ );
+ },
+);
+
+MultipleSelector.displayName = 'MultipleSelector';
+export default MultipleSelector;
diff --git a/apps/frontend/src/hooks/use-controllable-state.ts b/apps/frontend/src/hooks/use-controllable-state.ts
new file mode 100644
index 0000000..b259376
--- /dev/null
+++ b/apps/frontend/src/hooks/use-controllable-state.ts
@@ -0,0 +1,67 @@
+import * as React from "react"
+
+import { useCallbackRef } from "@/hooks/use-callback-ref"
+
+/**
+ * @see https://github.com/radix-ui/primitives/blob/main/packages/react/use-controllable-state/src/useControllableState.tsx
+ */
+
+type UseControllableStateParams = {
+ prop?: T | undefined
+ defaultProp?: T | undefined
+ onChange?: (state: T) => void
+}
+
+type SetStateFn = (prevState?: T) => T
+
+function useControllableState({
+ prop,
+ defaultProp,
+ onChange = () => {},
+ }: UseControllableStateParams) {
+ const [uncontrolledProp, setUncontrolledProp] = useUncontrolledState({
+ defaultProp,
+ onChange,
+ })
+ const isControlled = prop !== undefined
+ const value = isControlled ? prop : uncontrolledProp
+ const handleChange = useCallbackRef(onChange)
+
+ const setValue: React.Dispatch> =
+ React.useCallback(
+ (nextValue) => {
+ if (isControlled) {
+ const setter = nextValue as SetStateFn
+ const value =
+ typeof nextValue === "function" ? setter(prop) : nextValue
+ if (value !== prop) handleChange(value as T)
+ } else {
+ setUncontrolledProp(nextValue)
+ }
+ },
+ [isControlled, prop, setUncontrolledProp, handleChange]
+ )
+
+ return [value, setValue] as const
+}
+
+function useUncontrolledState({
+ defaultProp,
+ onChange,
+ }: Omit, "prop">) {
+ const uncontrolledState = React.useState(defaultProp)
+ const [value] = uncontrolledState
+ const prevValueRef = React.useRef(value)
+ const handleChange = useCallbackRef(onChange)
+
+ React.useEffect(() => {
+ if (prevValueRef.current !== value) {
+ handleChange(value as T)
+ prevValueRef.current = value
+ }
+ }, [value, prevValueRef, handleChange])
+
+ return uncontrolledState
+}
+
+export { useControllableState }
\ No newline at end of file
diff --git a/apps/frontend/src/lib/utils.ts b/apps/frontend/src/lib/utils.ts
index ac680b3..34dad53 100644
--- a/apps/frontend/src/lib/utils.ts
+++ b/apps/frontend/src/lib/utils.ts
@@ -4,3 +4,42 @@ import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
+
+export function formatBytes(
+ bytes: number,
+ opts: {
+ decimals?: number
+ sizeType?: "accurate" | "normal"
+ } = {}
+) {
+ const { decimals = 0, sizeType = "normal" } = opts
+
+ const sizes = ["Octets", "Ko", "Mo", "Go", "To"]
+ const accurateSizes = ["Octets", "Kio", "Mio", "Gio", "Tio"]
+ if (bytes === 0) return "0 Byte"
+ const i = Math.floor(Math.log(bytes) / Math.log(1024))
+ return `${(bytes / (1024 ** i)).toFixed(decimals)} ${
+ sizeType === "accurate" ? accurateSizes[i] ?? "Bytest" : sizes[i] ?? "Bytes"
+ }`
+}
+
+/**
+ * Stole this from the @radix-ui/primitive
+ * @see https://github.com/radix-ui/primitives/blob/main/packages/core/primitive/src/primitive.tsx
+ */
+export function composeEventHandlers(
+ originalEventHandler?: (event: E) => void,
+ ourEventHandler?: (event: E) => void,
+ { checkForDefaultPrevented = true } = {}
+) {
+ return function handleEvent(event: E) {
+ originalEventHandler?.(event)
+
+ if (
+ checkForDefaultPrevented === false ||
+ !(event as unknown as Event).defaultPrevented
+ ) {
+ return ourEventHandler?.(event)
+ }
+ }
+}
\ No newline at end of file
diff --git a/apps/frontend/src/requests/files.ts b/apps/frontend/src/requests/files.ts
new file mode 100644
index 0000000..2f4d80c
--- /dev/null
+++ b/apps/frontend/src/requests/files.ts
@@ -0,0 +1,83 @@
+import { PaginationState } from "@tanstack/react-table";
+import { IFile, IFilesResponse } from "../types/file";
+import axios from 'axios';
+
+const API_URL = "http://localhost:3333/";
+const PAGE_LIMIT = 10;
+
+function getFullRoute(route: string) {
+ return API_URL + route;
+}
+
+/**
+ * Fetches a list of files from the server based on pagination and an optional search field.
+ *
+ * @param {PaginationState} pagination - The current state of pagination, including page size and page index.
+ * @param {string} [searchField] - An optional field used to filter the files by a search term.
+ * @return {Promise} A promise that resolves to an IFilesResponse object containing the list of files.
+ */
+async function getFiles(
+ pagination: PaginationState,
+ searchField?: string,
+): Promise {
+ const offset = pagination.pageSize * pagination.pageIndex;
+ const res = await fetch(
+ `${getFullRoute("api/files/find")}?limit=${PAGE_LIMIT}&offset=${offset}${searchField ? `&search=${searchField}` : "&search="}`,
+ );
+ return res.json();
+}
+
+/**
+ * Uploads a file to the server with specified metadata.
+ *
+ * @param {File} file - The file to be uploaded.
+ * @param {string} fileName - The name to be assigned to the uploaded file.
+ * @param {string} uploadedBy - The identifier for the user uploading the file.
+ * @param {Array} machineIds - An array of machine IDs associated with the file.
+ * @param {string|null} groupId - The group ID for grouping files, if applicable.
+ * @param {boolean} [isDocumentation=false] - Flag indicating if the file is documentation.
+ * @param {boolean} [isRestricted=false] - Flag indicating if the file is restricted.
+ * @return {Promise