Soft-delete exported directory by move to custom trash bin folder (#130)

Add feature to soft-delete (move) exported comic folder to user defined trash bin path.
The trash bin path can be configured in `config.yaml`.

Author: dark-person

README.md

@@ -59,6 +59,12 @@ After preview & press button to export, User can defined export folder, and expo
 | ![Export UI](screenshots/export.png) | ![Custom Export](screenshots/export_custom.png) |
 | ------------------------------------ | ----------------------------------------------- |
 
+#### Soft Delete after export
+
+If user has configured a trash bin (specified for this program), then they can tick "Soft delete after export" option.
+
+This option will move current working comic folder to user defined trash bin when a successful export process completed.
+
 ### Quick Export (Komga Only)
 
 Ignore preview section and generate `.cbz` with `komga` folder structure directly.
@@ -102,6 +108,8 @@ You should use absolute paths as possible. If folder is missing, then program wi
 | `default`               | struct | storing default values for program                                              |
 | `default.export-folder` | string | default export folder path, if empty string, then create inside input directory |
 | `default.comic-folder`  | string | default folder location when choose folder to create comicinfo                  |
+| `trash-bin`             | struct | Store trash bin definition for soft-deletion                                    |
+| `trash-bin.path`        | string | path of program trash bin, if empty string, then no soft-deletion operation     |
 
 ## Data
 

config-default.yaml

@@ -1,3 +1,6 @@
 default:
     export-folder:
     comic-folder:
+
+trash-bin:
+    path:

config-example.yaml

@@ -1,3 +1,6 @@
 default:
     export-folder: ./my-export
     comic-folder: ./my-input
+
+trash-bin:
+    path: "./.trash"

frontend/src/App.tsx

@@ -44,6 +44,7 @@ function App() {
 
 	const [sessionData, setSessionData] = useState<SessionData>({
 		exportMethod: ExportMethod.DEFAULT_WRAP_CBZ,
+		deleteAfterExport: false,
 	});
 
 	/** Controller of modal. */
@@ -152,17 +153,6 @@ function App() {
 		setInfo(temp);
 	}
 
-	/**
-	 * Handle change for export method.
-	 * @param val the new value of export method
-	 */
-	function handleExportMethodChange(val: ExportMethod) {
-		setSessionData({
-			...sessionData,
-			exportMethod: val,
-		});
-	}
-
 	return (
 		<div id="App" className="container-fluid">
 			{/* Modal Part */}
@@ -222,7 +212,9 @@ function App() {
 							originalDirectory={inputDir}
 							modalControl={modalController}
 							exportMethod={sessionData.exportMethod}
-							setExportMethod={handleExportMethodChange}
+							setExportMethod={(val) => setSessionData({ ...sessionData, exportMethod: val })}
+							deleteAfterExport={sessionData.deleteAfterExport}
+							setDeleteAfterExport={(val) => setSessionData({ ...sessionData, deleteAfterExport: val })}
 						/>
 					)}
 					{mode === AppMode.HELP && <HelpPanel backToHome={backToHomePanel} />}

frontend/src/components/ColoredRadio.css renamed to frontend/src/components/ColoredFormCheck.css

@@ -1,10 +1,10 @@
 import { ChangeEvent } from "react";
 import { Form } from "react-bootstrap";
-import "./ColoredRadio.css";
+import "./ColoredFormCheck.css";
 
 type supportedColors = "dark-red" | "dark-orange" | "dark-yellow" | "dark-green" | "dark-blue";
 
-type ColoredRadioProps = {
+type ColoredFormCheckProps = {
 	/** HTML element ID. */
 	id?: string;
 	/** Radio button group usage. */
@@ -21,11 +21,11 @@ type ColoredRadioProps = {
 	onChange?: (evt: ChangeEvent<HTMLInputElement>) => void;
 };
 
-/** Component of a colored radio button. */
-export default function ColoredRadio(props: Readonly<ColoredRadioProps>) {
+/** Form check element with custom color. */
+function ColoredFormCheck(props: Readonly<ColoredFormCheckProps & { type: "radio" | "checkbox" }>) {
 	return (
 		<Form.Check
-			type={"radio"}
+			type={props.type}
 			label={props.label}
 			name={props.name}
 			id={props.id}
@@ -35,3 +35,13 @@ export default function ColoredRadio(props: Readonly<ColoredRadioProps>) {
 		/>
 	);
 }
+
+/** Component of a colored radio button. */
+export function ColoredRadio(props: Readonly<ColoredFormCheckProps>) {
+	return <ColoredFormCheck {...props} type="radio" />;
+}
+
+/** Component of a colored checkbox. */
+export function ColoredCheckBox(props: Readonly<ColoredFormCheckProps>) {
+	return <ColoredFormCheck {...props} type="checkbox" />;
+}

frontend/src/components/ColoredRadio.tsx renamed to frontend/src/components/ColoredFormCheck.tsx

@@ -11,4 +11,6 @@ export enum ExportMethod {
 export type SessionData = {
 	/** Method to export. This will keep save last option until program close. */
 	exportMethod: ExportMethod;
+	/** Delete input folder after export */
+	deleteAfterExport: boolean;
 };

frontend/src/controls/SessionData.ts

@@ -8,7 +8,7 @@ import Button from "react-bootstrap/Button";
 import Form from "react-bootstrap/Form";
 
 // Project Component
-import ColoredRadio from "../components/ColoredRadio";
+import { ColoredCheckBox, ColoredRadio } from "../components/ColoredFormCheck";
 import FolderSelector from "../components/FolderSelector";
 import { ModalControl } from "../controls/ModalControl";
 
@@ -18,6 +18,7 @@ import {
 	ExportCbzWithDefaultWrap,
 	ExportCbzWithWrap,
 	GetDefaultOutputDirectory,
+	RunSoftDelete,
 } from "../../wailsjs/go/application/App";
 import { comicinfo } from "../../wailsjs/go/models";
 import { ExportMethod } from "../controls/SessionData";
@@ -35,6 +36,10 @@ type ExportProps = {
 	exportMethod: ExportMethod;
 	/** Method to set export method as react hook. */
 	setExportMethod: (val: ExportMethod) => void;
+	/** Delete after export. */
+	deleteAfterExport: boolean;
+	/** Method to set delete after export as react hook. */
+	setDeleteAfterExport: (val: boolean) => void;
 };
 
 /**
@@ -47,6 +52,8 @@ export default function ExportPanel({
 	modalControl,
 	exportMethod,
 	setExportMethod,
+	deleteAfterExport,
+	setDeleteAfterExport,
 }: Readonly<ExportProps>) {
 	// Since this is the final step, could ignore the interaction with App.tsx
 	const [defaultDir, setDefaultDir] = useState<string>("");
@@ -114,12 +121,32 @@ export default function ExportPanel({
 
 		// Start running
 		promise.then((msg) => {
+			console.log(`cbz return: '${msg}'`);
+
 			if (msg !== "") {
 				modalControl.showErr(msg);
-			} else {
+				return;
+			}
+
+			// Early return if no need to do anything
+			if (!deleteAfterExport) {
 				modalControl.completeAndReset();
+				return;
+			}
+
+			// Run soft deletion if necessary
+			if (deleteAfterExport) {
+				console.log("Start soft deletion");
+
+				RunSoftDelete().then((errMsg) => {
+					if (errMsg !== "") {
+						modalControl.showErr(errMsg);
+						return;
+					}
+
+					modalControl.completeAndReset();
+				});
 			}
-			console.log(`cbz return: '${msg}'`);
 		});
 	}
 
@@ -180,6 +207,18 @@ export default function ExportPanel({
 					Export
 				</Button>
 			</div>
+
+			{/* Checkbox to soft deletion */}
+			<div className="d-flex justify-content-center mt-2">
+				<ColoredCheckBox
+					id="soft-deletion"
+					name="soft-deletion"
+					color="dark-red"
+					label="Soft Delete after export"
+					checked={deleteAfterExport}
+					onChange={() => setDeleteAfterExport(!deleteAfterExport)}
+				/>
+			</div>
 		</div>
 	);
 }

frontend/src/pages/exportPanel.tsx

@@ -28,3 +28,5 @@ export function GetDirectory(arg1:string):Promise<application.DirectoryResp>;
 export function OpenFolder(arg1:string):Promise<void>;
 
 export function QuickExportKomga(arg1:string):Promise<string>;
+
+export function RunSoftDelete():Promise<string>;

frontend/wailsjs/go/application/App.d.ts

@@ -53,3 +53,7 @@ export function OpenFolder(arg1) {
 export function QuickExportKomga(arg1) {
   return window['go']['application']['App']['QuickExportKomga'](arg1);
 }
+
+export function RunSoftDelete() {
+  return window['go']['application']['App']['RunSoftDelete']();
+}