Merge pull request #319 from bcgov/DAP-978-add-folder-button

Dap-978 Add Folder Button to Create File List Page

desktop/src/main/fileProcessing/actions/index.ts

@@ -1,2 +1,3 @@
 export * from "./copyFolderAndMetadata";
 export * from "./getFolderMetadata";
+export * from "./selectDirectory";

desktop/src/main/fileProcessing/actions/selectDirectory.ts

@@ -0,0 +1,23 @@
+import { dialog, type BrowserWindow } from "electron";
+
+let selectedDir: string[] | undefined;
+let dirPathArray: string[];
+
+/**
+ * Opens a (modal) dialog window off the main window for a user to select a directory.
+ *
+ * @param win - the main process window.
+ * @returns A string[] if a directory is selected or undefined if the dialog is closed with no selection.
+ */
+export const selectDirectory = (win: BrowserWindow): string[] => {
+	// open a dialog and allow a user to select multiple folders
+	selectedDir = dialog.showOpenDialogSync(win, {
+		properties: ["openDirectory", "multiSelections"],
+	});
+
+	// if selectedDir is undefined we have no selected path so return an empty array
+	// otherwise return the array of selected paths
+	dirPathArray = selectedDir ?? [""];
+
+	return dirPathArray;
+};

desktop/src/main/index.ts

@@ -12,7 +12,11 @@ import { is } from "@electron-toolkit/utils";
 import icon from "../../resources/icon.png?asset";
 import electronUpdater, { type AppUpdater } from "electron-updater";
 import { createWorkerPool } from "./fileProcessing";
-import { copyFolderAndMetadata, getFolderMetadata } from "./fileProcessing/actions";
+import {
+	copyFolderAndMetadata,
+	getFolderMetadata,
+	selectDirectory,
+} from "./fileProcessing/actions";
 
 app.setName("Digital Archives Transfer Service");
 
@@ -193,6 +197,12 @@ ipcMain.handle("get-folder-metadata", async (_, { filePath }: { filePath: string
 	await getFolderMetadata(pool, filePath, is.dev);
 });
 
+ipcMain.handle("select-directory", () => {
+	debug('Beginning "select-directory" of main process.');
+	// returns selected folder or undefined if no folder was selected
+	return selectDirectory(mainWindow);
+});
+
 const clearAuthState = () => {
 	debug("Beginning clearAuthState function of main process.");
 

desktop/src/preload/index.d.ts

@@ -9,6 +9,7 @@ declare global {
 			checkApiStatus: (url: string) => Promise<boolean>;
 			checkIpRange: () => Promise<boolean>;
 			getCurrentApiUrl: () => Promise<string>;
+			selectDirectory: () => Promise<string[]>;
 
 			sso: {
 				startLoginProcess: () => Promise<void>;

desktop/src/preload/index.ts

@@ -9,6 +9,7 @@ const api = {
 	checkApiStatus,
 	checkIpRange,
 	getCurrentApiUrl: () => ipcRenderer.invoke("get-current-api-url"),
+	selectDirectory: () => ipcRenderer.invoke("select-directory"),
 	sso: {
 		getUser,
 		fetchProtectedRoute,

desktop/src/renderer/src/assets/base.css

@@ -48,7 +48,6 @@ ul {
 body {
 	width: 100%;
 	height: 100%;
-	overflow: hidden;
 	user-select: none;
 	border-top: 1px solid #e3e3e3;
 	min-height: 100vh;

desktop/src/renderer/src/assets/main.css

@@ -5,7 +5,7 @@ body {
 	height: 100%;
 	min-width: 100vh;
 	min-height: 100vh;
-	overflow: hidden;
+	overflow: scroll;
 	user-select: none;
 }
 

desktop/src/renderer/src/components/file-list/ContinueButton.tsx

@@ -0,0 +1,17 @@
+import { Button } from "@bcgov/design-system-react-components";
+
+export const ContinueButton = (): JSX.Element => {
+	const handleClick = async () => {
+		console.log("TODO: THIS");
+	};
+
+	return (
+		<Button
+			variant="primary"
+			style={{ justifyContent: "center", width: "15%" }}
+			onPress={handleClick}
+		>
+			Continue
+		</Button>
+	);
+};

desktop/src/renderer/src/components/file-list/FolderDisplayGrid.tsx

@@ -3,6 +3,7 @@ import {
 	type GridColDef,
 	useGridApiContext,
 	type GridRenderEditCellParams,
+	type useGridApiRef,
 } from "@mui/x-data-grid";
 import {
 	HighlightOff as DeleteIcon,
@@ -72,9 +73,10 @@ const GridEditDateCell = ({
 type Props = {
 	rows: FolderRow[];
 	onFolderDelete: (folder: string) => Promise<void> | void;
+	apiRef: ReturnType<typeof useGridApiRef>;
 };
 
-export const FolderDisplayGrid = ({ rows, onFolderDelete }: Props) => {
+export const FolderDisplayGrid = ({ rows, onFolderDelete, apiRef }: Props) => {
 	const theme = useTheme();
 	const columns: GridColDef<(typeof rows)[number]>[] = [
 		{
@@ -94,22 +96,22 @@ export const FolderDisplayGrid = ({ rows, onFolderDelete }: Props) => {
 				</Box>
 			),
 		},
-		{ field: "folder", headerName: "Folder", width: 150 },
-		{ field: "schedule", headerName: "Schedule", width: 90, editable: true },
+		{ field: "folder", headerName: "Folder", width: 200 },
+		{ field: "schedule", headerName: "Schedule", width: 110, editable: true },
 		{ field: "classification", headerName: "Primary/Secondary", width: 150, editable: true },
-		{ field: "file", headerName: "FILE", width: 100, editable: true },
+		{ field: "file", headerName: "FILE ID", width: 90, editable: true },
 		{
 			field: "opr",
 			headerName: "OPR",
 			type: "boolean",
 			description: "Office of Primary Responsibility",
-			width: 80,
+			width: 60,
 			editable: true,
 		},
 		{
 			field: "startDate",
 			headerName: "Start Date",
-			width: 135,
+			width: 125,
 			editable: true,
 			renderEditCell: (params) => <GridEditDateCell {...params} />,
 			valueFormatter: (value) => {
@@ -122,7 +124,7 @@ export const FolderDisplayGrid = ({ rows, onFolderDelete }: Props) => {
 		{
 			field: "endDate",
 			headerName: "End Date",
-			width: 135,
+			width: 125,
 			editable: true,
 			renderEditCell: (params) => <GridEditDateCell {...params} />,
 			valueFormatter: (value) => {
@@ -135,7 +137,7 @@ export const FolderDisplayGrid = ({ rows, onFolderDelete }: Props) => {
 		{
 			field: "soDate",
 			headerName: "SO Date",
-			width: 135,
+			width: 125,
 			editable: true,
 			renderEditCell: (params) => <GridEditDateCell {...params} />,
 			valueFormatter: (value) => {
@@ -148,7 +150,7 @@ export const FolderDisplayGrid = ({ rows, onFolderDelete }: Props) => {
 		{
 			field: "fdDate",
 			headerName: "FD Date",
-			width: 135,
+			width: 125,
 			editable: true,
 			renderEditCell: (params) => <GridEditDateCell {...params} />,
 			valueFormatter: (value) => {
@@ -182,6 +184,7 @@ export const FolderDisplayGrid = ({ rows, onFolderDelete }: Props) => {
 				<DataGrid
 					rows={rows}
 					columns={columns}
+					apiRef={apiRef}
 					disableRowSelectionOnClick
 					disableColumnFilter
 					disableColumnMenu

desktop/src/renderer/src/components/file-list/SelectFolderButton.tsx

@@ -0,0 +1,23 @@
+import { useState } from "react";
+import { Button } from "@bcgov/design-system-react-components";
+
+export const SelectFolderButton = ({ onRowChange }): JSX.Element => {
+	const [api] = useState(window.api); // preload scripts
+
+	const handleClick = async () => {
+		const result = await api.selectDirectory();
+
+		onRowChange(result);
+		return result;
+	};
+
+	return (
+		<Button
+			variant="primary"
+			style={{ justifyContent: "center", width: "15%" }}
+			onPress={handleClick}
+		>
+			Select Folder(s)
+		</Button>
+	);
+};

desktop/src/renderer/src/components/file-list/index.ts

@@ -1 +1,3 @@
 export * from "./FolderDisplayGrid";
+export * from "./SelectFolderButton";
+export * from "./ContinueButton";

desktop/src/renderer/src/pages/FileList.tsx

@@ -1,24 +1,101 @@
 import { Box, useTheme } from "@mui/material";
-import { FolderDisplayGrid, type FolderRow } from "@renderer/components/file-list";
+import {
+	FolderDisplayGrid,
+	type FolderRow,
+	SelectFolderButton,
+	ContinueButton,
+} from "@renderer/components/file-list";
 import { useState } from "react";
+import { useGridApiRef } from "@mui/x-data-grid";
 
 export const FileListPage = () => {
 	const [rows, setRows] = useState<FolderRow[]>([]);
 	const theme = useTheme();
+	const apiRef = useGridApiRef();
+
 	const onFolderDelete = (folder: string) => {
 		alert(folder); // TBD
 	};
 
+	const handleAddPathArrayToRows = (inputPaths: string[]) => {
+		const newRows: FolderRow[] = [...rows];
+		let index = rows.length; // Start IDs based on the current rows
+		const newRowIds: number[] = []; // Track IDs of the newly added rows
+
+		try {
+			for (let i = 0; i < inputPaths.length; i++) {
+				const currentFolderPath = inputPaths[i];
+				let skipFlag = false;
+
+				// check if file path is already in the rows
+				for (let j = 0; j < rows.length; j++) {
+					if (currentFolderPath === rows[j].folder) skipFlag = true;
+				}
+				// if the path is already in the list, skip it
+				if (skipFlag === true) continue;
+
+				const curFolderRow: FolderRow = {
+					id: index, // Unique IDs for new rows
+					folder: currentFolderPath,
+					schedule: "",
+					classification: "",
+					file: "",
+					opr: false,
+					startDate: null,
+					endDate: null,
+					soDate: null,
+					fdDate: null,
+					progress: 0,
+				};
+				// Track new row IDs
+				newRowIds.push(index);
+				index++;
+				// add new folder row to list to be displayed
+				newRows.push(curFolderRow);
+			}
+			// set the new list of folder rows
+			setRows(newRows);
+
+			// Set all newly added rows to edit mode
+			if (apiRef.current && newRowIds.length > 0) {
+				setTimeout(() => {
+					newRowIds.forEach((rowId) => {
+						apiRef.current.startRowEditMode({ id: rowId });
+					});
+				});
+			}
+		} catch (error) {
+			setRows(rows); // Revert rows on error
+			console.log("Hit error:", error);
+		}
+	};
+
 	return (
-		<Box
-			sx={{
-				height: "100vh",
-				padding: 2,
-				flexShrink: 0,
-				background: `${theme.palette.primary}`,
-			}}
-		>
-			<FolderDisplayGrid rows={rows} onFolderDelete={onFolderDelete} />
-		</Box>
+		<>
+			<Box
+				sx={{
+					minHeight: "7vh",
+					display: "flex",
+					justifyContent: "flex-end",
+					gap: 1,
+					padding: 2,
+					flexShrink: 0,
+					background: `${theme.palette.primary}`,
+				}}
+			>
+				<SelectFolderButton onRowChange={handleAddPathArrayToRows} />
+				<ContinueButton />
+			</Box>
+			<Box
+				sx={{
+					height: "90vh",
+					padding: 2,
+					flexShrink: 0,
+					background: `${theme.palette.primary}`,
+				}}
+			>
+				<FolderDisplayGrid rows={rows} onFolderDelete={onFolderDelete} apiRef={apiRef} />
+			</Box>
+		</>
 	);
 };