From 17c96acf04291f13595c3277e3d494fb1c04c11f Mon Sep 17 00:00:00 2001
From: Simon Ziegler <simon.ziegler.1998+github@pm.me>
Date: Wed, 12 Jun 2024 15:10:39 +0200
Subject: [PATCH] Added directory-creation to filedialogue

---
 README.md                                     |   3 -
 .../FileDialogue/FileDialogue.vue             | 139 ++++++++++++++----
 .../FileDialogue/SongDialogue.vue             |   4 +
 .../FileEditor/Psalm/PsalmEditor.vue          |   9 ++
 .../FileEditor/Song/SongEditor.vue            |   9 ++
 .../ControlWindow/Playlist/PlaylistItem.vue   |  10 +-
 src/client/src/ControlWindow/SavePlaylist.vue |   9 ++
 src/server/JCGPReceiveMessages.ts             |   9 +-
 src/server/control.ts                         |  41 +++++-
 9 files changed, 187 insertions(+), 46 deletions(-)

diff --git a/README.md b/README.md
index 24c49f5..a8035b0 100644
--- a/README.md
+++ b/README.md
@@ -31,8 +31,5 @@ Generate graphics with song-lyrics or for other church-service-elements and play
 - support other browser than Chrome and phone / tablet resolution
 - save_song(): check, wether "chords" is valid
 - reload psalm and song after file-edit
-- FileDialogue: Create directories
 - Fix style of AddPart-Draggable-Drag-n-drop Placeholder
-- SavePlaylist: create-directory-stack
-- move config-file to yaml and create default-config-file with comments
 - repair new-file abort unsaved changes
\ No newline at end of file
diff --git a/src/client/src/ControlWindow/FileDialogue/FileDialogue.vue b/src/client/src/ControlWindow/FileDialogue/FileDialogue.vue
index 81e9272..b0c8606 100644
--- a/src/client/src/ControlWindow/FileDialogue/FileDialogue.vue
+++ b/src/client/src/ControlWindow/FileDialogue/FileDialogue.vue
@@ -82,6 +82,7 @@
 	import Draggable from "vuedraggable";
 
 	import MenuButton from "@/ControlWindow/MenuBar/MenuButton.vue";
+	import PopUp from "../PopUp.vue";
 
 	import type * as JCGPSend from "@server/JCGPSendMessages";
 	import type { ItemProps } from "@server/PlaylistItems/PlaylistItem";
@@ -92,7 +93,9 @@
 		fas.faChevronRight,
 		fas.faArrowsRotate,
 		fas.faFileCirclePlus,
-		fas.faXmark
+		fas.faXmark,
+		fas.faFolderPlus,
+		fas.faPlus
 	);
 
 	const props = defineProps<{
@@ -103,11 +106,13 @@
 		hide_header?: boolean;
 		clone_callback?: (arg: JCGPSend.ItemFiles<keyof ItemFileType>["files"][0]) => ItemProps;
 		new_button?: boolean;
+		new_directory?: boolean;
 		search_disabled?: boolean;
 	}>();
 
 	const emit = defineEmits<{
 		new_file: [];
+		new_directory: [path: string];
 		choose: [file: ItemFileMapped<T> | undefined];
 		refresh_files: [];
 	}>();
@@ -116,6 +121,9 @@
 
 	const search_strings = defineModel<SearchInputDefinition<unknown>[]>("search_strings");
 
+	const show_new_directory = ref<boolean>(false);
+	const directory_name = ref<string>("");
+	const directory_name_input = ref<HTMLInputElement>();
 	const rotate_button = ref<boolean>(false);
 	const directory_stack = defineModel<ItemFileMapped<T>[]>("directory_stack", {
 		default: () => reactive([])
@@ -157,6 +165,17 @@
 
 		emit("choose", file);
 	}
+
+	function on_new_directory() {
+		let directory = "";
+
+		if (directory_stack.value.length > 0) {
+			directory = directory_stack.value[directory_stack.value.length - 1].path + "/";
+		}
+
+		emit("new_directory", directory + directory_name.value);
+		show_new_directory.value = false;
+	}
 </script>
 
 <template>
@@ -192,24 +211,26 @@
 						</div>
 					</div>
 				</div>
-				<div id="directory_stack">
-					<MenuButton
-						:square="true"
-						@click="
-							directory_stack = reactive([]);
-							$emit(
-								'choose',
-								directory_stack.length > 0 ? directory_stack[directory_stack.length - 1] : undefined
-							);
-						"
-					>
-						<FontAwesomeIcon :icon="['fas', 'house']" />
-					</MenuButton>
-					<template v-for="(dir, dir_index) of directory_stack">
-						<FontAwesomeIcon :icon="['fas', 'chevron-right']" />
+				<div id="navigation_bar">
+					<div v-if="new_directory" id="new_directory_wrapper">
+						<MenuButton
+							:square="true"
+							@click="
+								show_new_directory = true;
+								directory_name = '';
+								$nextTick(() => {
+									directory_name_input?.focus();
+								});
+							"
+						>
+							<FontAwesomeIcon :icon="['fas', 'folder-plus']" />
+						</MenuButton>
+					</div>
+					<div id="directory_stack">
 						<MenuButton
+							:square="true"
 							@click="
-								directory_stack.splice(dir_index + 1, directory_stack.length);
+								directory_stack = reactive([]);
 								$emit(
 									'choose',
 									directory_stack.length > 0
@@ -218,21 +239,37 @@
 								);
 							"
 						>
-							{{ dir.name }}
+							<FontAwesomeIcon :icon="['fas', 'house']" />
 						</MenuButton>
-					</template>
-					<MenuButton
-						id="refresh_button"
-						:class="{ rotate_button: rotate_button }"
-						:square="true"
-						@click="
-							emit('refresh_files');
-							rotate_button = true;
-						"
-						@animationend="rotate_button = false"
-					>
-						<FontAwesomeIcon :icon="['fas', 'arrows-rotate']" />
-					</MenuButton>
+						<template v-for="(dir, dir_index) of directory_stack">
+							<FontAwesomeIcon :icon="['fas', 'chevron-right']" />
+							<MenuButton
+								@click="
+									directory_stack.splice(dir_index + 1, directory_stack.length);
+									$emit(
+										'choose',
+										directory_stack.length > 0
+											? directory_stack[directory_stack.length - 1]
+											: undefined
+									);
+								"
+							>
+								{{ dir.name }}
+							</MenuButton>
+						</template>
+						<MenuButton
+							id="refresh_button"
+							:class="{ rotate_button: rotate_button }"
+							:square="true"
+							@click="
+								emit('refresh_files');
+								rotate_button = true;
+							"
+							@animationend="rotate_button = false"
+						>
+							<FontAwesomeIcon :icon="['fas', 'arrows-rotate']" />
+						</MenuButton>
+					</div>
 				</div>
 				<div id="file_view_wrapper">
 					<div id="file_view">
@@ -321,6 +358,20 @@
 				</div>
 			</div>
 		</div>
+		<PopUp v-model:active="show_new_directory" title="Create Directory">
+			<div id="create_directory_popup">
+				<input
+					ref="directory_name_input"
+					class="search_box"
+					v-model="directory_name"
+					placeholder="Directory Name"
+					@keydown.enter="on_new_directory"
+				/>
+				<MenuButton :square="true" @click="on_new_directory">
+					<FontAwesomeIcon :icon="['fas', 'plus']" />
+				</MenuButton>
+			</div>
+		</PopUp>
 	</div>
 </template>
 
@@ -335,6 +386,7 @@
 		flex: 1;
 		display: flex;
 		flex-direction: column;
+		gap: inherit;
 	}
 
 	#search_wrapper {
@@ -425,11 +477,30 @@
 		justify-content: center;
 	}
 
+	#navigation_bar {
+		display: flex;
+
+		gap: 0.25rem;
+	}
+
+	#new_directory_wrapper {
+		background-color: var(--color-container);
+		border-radius: 0.25rem;
+
+		display: flex;
+		align-items: center;
+		justify-content: center;
+
+		aspect-ratio: 1;
+		max-height: 100%;
+	}
+
 	#directory_stack {
 		background-color: var(--color-container);
 
 		border-radius: 0.25rem;
 
+		flex: 1;
 		display: flex;
 		align-items: center;
 
@@ -620,4 +691,10 @@
 			transform: rotate(180deg);
 		}
 	}
+
+	#create_directory_popup {
+		display: flex;
+
+		background-color: var(--color-container);
+	}
 </style>
diff --git a/src/client/src/ControlWindow/FileDialogue/SongDialogue.vue b/src/client/src/ControlWindow/FileDialogue/SongDialogue.vue
index 4b2f6ca..ea3301e 100644
--- a/src/client/src/ControlWindow/FileDialogue/SongDialogue.vue
+++ b/src/client/src/ControlWindow/FileDialogue/SongDialogue.vue
@@ -13,11 +13,13 @@
 		select_dirs?: boolean;
 		new_button?: boolean;
 		hide_header?: boolean;
+		new_directory?: boolean;
 	}>();
 
 	const emit = defineEmits<{
 		add: [item_props: SongProps];
 		new_song: [];
+		new_directory: [path: string];
 	}>();
 
 	// currently selected song
@@ -175,6 +177,7 @@
 		:new_button="new_button"
 		:select_dirs="select_dirs"
 		:hide_header="hide_header"
+		:new_directory="new_directory"
 		v-model:directory_stack="directory_stack"
 		name="Song"
 		v-model:selection="selection"
@@ -182,6 +185,7 @@
 		@choose="add_song"
 		@refresh_files="() => Globals.get_song_files(true)"
 		@new_file="emit('new_song')"
+		@new_directory="(path: string) => emit('new_directory', path)"
 	>
 		<template v-slot:buttons>
 			<slot name="buttons"></slot>
diff --git a/src/client/src/ControlWindow/FileEditor/Psalm/PsalmEditor.vue b/src/client/src/ControlWindow/FileEditor/Psalm/PsalmEditor.vue
index 7645018..d3b5432 100644
--- a/src/client/src/ControlWindow/FileEditor/Psalm/PsalmEditor.vue
+++ b/src/client/src/ControlWindow/FileEditor/Psalm/PsalmEditor.vue
@@ -372,10 +372,19 @@
 			name="Save Path"
 			:files="psalm_file_tree"
 			:select_dirs="true"
+			:new_directory="true"
 			v-model:selection="file_selection"
 			v-model:search_strings="psalm_search_strings"
 			v-model:directory_stack="directory_stack"
 			@refresh_files="() => Globals.get_psalm_files(true)"
+			@new_directory="
+				(path: string) =>
+					Globals.ws?.send<JCGPRecv.NewDirectory>({
+						command: 'new_directory',
+						path,
+						type: 'psalm'
+					})
+			"
 		>
 			<template v-slot:buttons>
 				<input class="file_name_box" v-model="psalm_file_name" placeholder="Filename" @input="" />
diff --git a/src/client/src/ControlWindow/FileEditor/Song/SongEditor.vue b/src/client/src/ControlWindow/FileEditor/Song/SongEditor.vue
index 07c2214..0a8f0bc 100644
--- a/src/client/src/ControlWindow/FileEditor/Song/SongEditor.vue
+++ b/src/client/src/ControlWindow/FileEditor/Song/SongEditor.vue
@@ -434,8 +434,17 @@
 		<SongDialogue
 			:select_dirs="true"
 			:hide_header="true"
+			:new_directory="true"
 			v-model:directory_stack="song_directory_stack"
 			v-model:selection="song_selection"
+			@new_directory="
+				(path: string) =>
+					Globals.ws?.send<JCGPRecv.NewDirectory>({
+						command: 'new_directory',
+						path,
+						type: 'song'
+					})
+			"
 		>
 			<template v-slot:buttons>
 				<input class="file_name_box" v-model="song_file_name" placeholder="Filename" @input="" />
diff --git a/src/client/src/ControlWindow/Playlist/PlaylistItem.vue b/src/client/src/ControlWindow/Playlist/PlaylistItem.vue
index 9239983..a9d00cf 100644
--- a/src/client/src/ControlWindow/Playlist/PlaylistItem.vue
+++ b/src/client/src/ControlWindow/Playlist/PlaylistItem.vue
@@ -18,7 +18,6 @@
 	}>();
 
 	const item = ref<HTMLDivElement>();
-	const color_picker = ref<HTMLInputElement>();
 	const caption_element = ref<HTMLDivElement>();
 	const item_props = defineModel<ClientPlaylistItem>("item_props", { required: true });
 
@@ -65,14 +64,7 @@
 		@keydown.enter="emit('set_active')"
 		@keydown.delete="delete_item"
 	>
-		<div
-			class="item_color_indicator"
-			:style="{ 'background-color': item_props.color }"
-			@contextmenu="
-				color_picker?.click();
-				$event.preventDefault();
-			"
-		></div>
+		<div class="item_color_indicator" :style="{ 'background-color': item_props.color }"></div>
 		<div class="playlist_item" ref="caption_element">
 			{{ item_props.caption }}
 		</div>
diff --git a/src/client/src/ControlWindow/SavePlaylist.vue b/src/client/src/ControlWindow/SavePlaylist.vue
index e305f15..0ffd948 100644
--- a/src/client/src/ControlWindow/SavePlaylist.vue
+++ b/src/client/src/ControlWindow/SavePlaylist.vue
@@ -88,8 +88,17 @@
 		:search_disabled="true"
 		v-model:selection="selection"
 		:select_dirs="true"
+		:new_directory="true"
 		@choose="(playlist) => save_playlist(playlist)"
 		@refresh_files="() => Globals.get_playlist_files(true)"
+		@new_directory="
+			(path: string) =>
+				Globals.ws?.send<JCGPRecv.NewDirectory>({
+					command: 'new_directory',
+					path,
+					type: 'playlist'
+				})
+		"
 	>
 		<template v-slot:buttons>
 			<input class="file_name_box" v-model="file_name" placeholder="Filename" @input="" />
diff --git a/src/server/JCGPReceiveMessages.ts b/src/server/JCGPReceiveMessages.ts
index e1451ea..c3f5160 100644
--- a/src/server/JCGPReceiveMessages.ts
+++ b/src/server/JCGPReceiveMessages.ts
@@ -127,6 +127,12 @@ export interface GetMediaThumbnails extends Base {
 	files: MediaFile[];
 }
 
+export interface NewDirectory extends Base {
+	command: "new_directory";
+	path: string;
+	type: "playlist" | "song" | "psalm";
+}
+
 /**
  * Uniun of the different JCGP-messages
  */
@@ -149,4 +155,5 @@ export type Message =
 	| GetItemData
 	| CreatePlaylistPDF
 	| SaveFile
-	| GetMediaThumbnails;
+	| GetMediaThumbnails
+	| NewDirectory;
diff --git a/src/server/control.ts b/src/server/control.ts
index 8c320b7..632f10b 100644
--- a/src/server/control.ts
+++ b/src/server/control.ts
@@ -70,7 +70,9 @@ export default class Control {
 			this.create_playlist_pdf(ws, msg.type),
 		update_playlist_caption: (msg: JCGPRecv.UpdatePlaylistCaption, ws: WebSocket) =>
 			this.update_playlist_caption(msg.caption, ws),
-		save_file: (msg: JCGPRecv.SaveFile, ws: WebSocket) => this.save_file(msg.path, msg, ws)
+		save_file: (msg: JCGPRecv.SaveFile, ws: WebSocket) => this.save_file(msg.path, msg, ws),
+		new_directory: (msg: JCGPRecv.NewDirectory, ws: WebSocket) =>
+			this.new_directory(msg.path, msg.type, ws)
 	};
 
 	private readonly ws_message_handler: WebsocketMessageHandler = {
@@ -772,11 +774,46 @@ export default class Control {
 		});
 	}
 
+	private new_directory<Type extends JCGPRecv.NewDirectory["type"]>(
+		path: string,
+		type: Type,
+		ws: WebSocket
+	) {
+		const directory_path = Config.get_path(type, path);
+		logger.log(`creating directory: '${path}'`);
+
+		// eslint-disable-next-line @typescript-eslint/no-misused-promises
+		fs.mkdir(directory_path, async (err) => {
+			if (err) {
+				logger.error(`Can't create directory: ${err.message}`);
+				ws_send_response(`Can't create directory: ${err.message}`, false, ws);
+			} else {
+				logger.debug(`Created directory: ${directory_path}`);
+				ws_send_response(`Created directory: ${directory_path}`, true, ws);
+
+				const search_map: {
+					[T in JCGPRecv.NewDirectory["type"]]: () => Promise<ItemFileMapped<T>[]>;
+				} = {
+					song: () => Promise.resolve(this.search_part.find_sng_files()),
+					playlist: () => Promise.resolve(this.search_part.find_jcg_files()),
+					psalm: () => Promise.resolve(this.search_part.find_psalm_files())
+				};
+
+				// send the new files to the client
+				this.send_all_clients<JCGPSend.ItemFiles<Type>>({
+					command: "item_files",
+					type,
+					files: await search_map[type]()
+				});
+			}
+		});
+	}
+
 	/**
 	 * Send a JCGP-message to all registered clients
 	 * @param message JSON-message to be sent
 	 */
-	private send_all_clients(message: JCGPSend.Message) {
+	private send_all_clients<T extends JCGPSend.Message>(message: T) {
 		const message_string = JSON.stringify(message);
 
 		// gather all the clients