feat: Add copy button as alt to move

src/electronApp/AppRenderer.ts

@@ -44,7 +44,7 @@ export namespace AppRenderer {
 
         JQueryUtils.renderHtml(grid.getHeaderHtml());
         SelectDirectoryRenderer.addSelectDirectoryListener(renderImagesAndPagerForDirectory);
-        MoveStarredImagesRenderer.addMovedStarredListener(
+        MoveStarredImagesRenderer.addMoveOrCopyStarredListeners(
             state,
             renderImagesAndPagerForDirectorySamePage
         );

src/electronApp/rendering/MovedStarredImagesRenderer.ts

@@ -1,35 +1,74 @@
-import * as fs from "fs";
-import * as path from "path";
-
-import { DataStorage } from "../../bars/model/persisted/DataStorage";
 import { DirectorySelectorDialog } from "../../utils/DirectorySelectorDialog";
+import { ImageMover, MoveOrCopy } from "../../utils/ImageMover";
 import { State } from "../State";
 
+type ButtonConfig = {
+    mode: MoveOrCopy;
+    buttonId: string;
+    dialog: {
+        title: string;
+        buttonText: string;
+    };
+};
+
 export namespace MoveStarredImagesRenderer {
     export function getButtonHtml(): string {
-        return `<button id="moveStarredButton">Move *...</button>`;
+        return (
+            `<button id="copyStarredButton" class="moveOrCopyStarredButton">Copy *...</button>` +
+            `<button id="moveStarredButton" class="moveOrCopyStarredButton">Move *...</button>`
+        );
     }
 
-    export function addMovedStarredListener(
+    export function addMoveOrCopyStarredListeners(
         state: State,
         renderImagesAndPagerForDirectorySamePage: (imageInputDir: string) => void
     ) {
-        const moveStarredButton = document.getElementById("moveStarredButton");
+        const buttons: ButtonConfig[] = [
+            {
+                mode: MoveOrCopy.Copy,
+                buttonId: "copyStarredButton",
+                dialog: {
+                    title: "Copy starred images to directory",
+                    buttonText: "Copy images"
+                }
+            },
+
+            {
+                mode: MoveOrCopy.Move,
+                buttonId: "moveStarredButton",
+                dialog: {
+                    title: "Move starred images to directory",
+                    buttonText: "Move images"
+                }
+            }
+        ];
 
-        if (!moveStarredButton) {
-            throw new Error("could not find the 'move starred' button");
+        buttons.forEach(button => {
+            addMoveOrCopyStarredListener(state, renderImagesAndPagerForDirectorySamePage, button);
+        });
+    }
+
+    function addMoveOrCopyStarredListener(
+        state: State,
+        renderImagesAndPagerForDirectorySamePage: (imageInputDir: string) => void,
+        buttonConfig: ButtonConfig
+    ) {
+        const button = document.getElementById(buttonConfig.buttonId);
+
+        if (!button) {
+            throw new Error(`Could not find the button with id '${buttonConfig.buttonId}'`);
         }
 
-        moveStarredButton.addEventListener("click", _ => {
+        button.addEventListener("click", _ => {
             const directories = DirectorySelectorDialog.selectImagesDirectory(
-                "Move starred images to directory",
-                "Move images"
+                buttonConfig.dialog.title,
+                buttonConfig.dialog.buttonText
             );
 
             const imageInputDir = state.imageInputDir;
 
             if (directories && directories.length === 1) {
-                moveStarredImagesTo(imageInputDir, directories[0])
+                ImageMover.moveStarredImagesTo(imageInputDir, directories[0], buttonConfig.mode)
                     .then(() => {
                         // refresh the current directory:
                         renderImagesAndPagerForDirectorySamePage(imageInputDir);
@@ -43,41 +82,4 @@ export namespace MoveStarredImagesRenderer {
             }
         });
     }
-
-    async function moveStarredImagesTo(
-        currentImageInputDir: string,
-        directoryPath: string
-    ): Promise<void> {
-        const imagePaths = DataStorage.getPathsOfStarredImages(currentImageInputDir);
-
-        let hasErrors = false;
-
-        return new Promise<void>((resolve, reject) => {
-            const done = () => {
-                if (hasErrors) {
-                    reject("Some errors occurred when moving the files");
-                } else {
-                    resolve();
-                }
-            };
-
-            imagePaths.forEach((imagePath, index) => {
-                const fileName = path.basename(imagePath);
-                const newPath = path.resolve(path.join(directoryPath, fileName));
-
-                fs.rename(imagePath, newPath, error => {
-                    if (error) {
-                        console.error(error);
-                        hasErrors = true;
-                    } else {
-                        DataStorage.setImageAsNoStar(imagePath);
-                    }
-
-                    if (index === imagePaths.length - 1) {
-                        done();
-                    }
-                });
-            });
-        });
-    }
 }

src/utils/ImageMover.ts

@@ -0,0 +1,67 @@
+import * as fs from "fs";
+import * as path from "path";
+
+import { DataStorage } from "../bars/model/persisted/DataStorage";
+
+export enum MoveOrCopy {
+    Copy,
+    Move
+}
+
+export namespace ImageMover {
+    export async function moveStarredImagesTo(
+        currentImageInputDir: string,
+        directoryPath: string,
+        mode: MoveOrCopy
+    ): Promise<void> {
+        const imagePaths = DataStorage.getPathsOfStarredImages(currentImageInputDir);
+
+        let hasErrors = false;
+
+        return new Promise<void>((resolve, reject) => {
+            const done = () => {
+                if (hasErrors) {
+                    reject("Some errors occurred when moving the files");
+                } else {
+                    resolve();
+                }
+            };
+
+            imagePaths.forEach((imagePath, index) => {
+                const fileName = path.basename(imagePath);
+                const newPath = path.resolve(path.join(directoryPath, fileName));
+
+                switch (mode) {
+                    case MoveOrCopy.Copy:
+                        fs.copyFile(imagePath, newPath, error => {
+                            if (error) {
+                                console.error(error);
+                                hasErrors = true;
+                            }
+
+                            if (index === imagePaths.length - 1) {
+                                done();
+                            }
+                        });
+                        break;
+                    case MoveOrCopy.Move:
+                        fs.rename(imagePath, newPath, error => {
+                            if (error) {
+                                console.error(error);
+                                hasErrors = true;
+                            } else {
+                                DataStorage.setImageAsNoStar(imagePath);
+                            }
+
+                            if (index === imagePaths.length - 1) {
+                                done();
+                            }
+                        });
+                        break;
+                    default:
+                        throw new Error(`unhandled mode '${mode}'`);
+                }
+            });
+        });
+    }
+}

static/electronApp/index.html

@@ -54,7 +54,7 @@
             }
 
             .grid-header {
-                text-align: center;
+                text-align: left;
                 margin-bottom: 10px;
                 width: 100%;
                 font-style: italic;
@@ -267,18 +267,23 @@
                 margin-right: 30px;
             }
 
-            #moveStarredButton {
+            .moveOrCopyStarredButton {
                 position: absolute;
                 top: 9px;
                 right: 0;
+            }
+            #copyStarredButton {
+                margin-right: 174px;
+            }
+            #moveStarredButton {
                 margin-right: 102px;
             }
 
             #refreshButton {
                 position: absolute;
                 top: 9px;
                 right: 0;
-                margin-right: 174px;
+                margin-right: 246px;
             }
 
             #content {