Added directory-creation to filedialogue

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

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>

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,13 +177,15 @@
 		: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"
 		v-model:search_strings="search_strings"
 		@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>

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="" />

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="" />

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>

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="" />

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;