#16 - Implemented create folder modal

src/components/files/FileBrowser.vue

@@ -35,7 +35,7 @@
 							fileBrowserContextMenu?.closeMenu();
 						"
 						class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
-						>Create folder</a
+						>{{ t('fileBrowser.folder.createFolder') }}</a
 					>
 				</li>
 			</ul>
@@ -48,7 +48,7 @@
 						"
 						href="javascript:void(0)"
 						class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
-						>Upload file</a
+						>{{ t('fileBrowser.file.uploadFile') }}</a
 					>
 					<input ref="fileInput" type="file" class="hidden" @change="uploadFiles" />
 				</li>
@@ -57,13 +57,15 @@
 
 		<!-- Modals -->
 		<BaseModal v-show="showCreateFolderModal" @close="closeCreateFolderModal">
-			<h3 class="mb-4 text-xl font-medium">Create folder</h3>
-			<form class="space-y-6" @submit.prevent="createFolder">
-				<BaseInput id="folderName" type="text" v-model="folder.name">Name</BaseInput>
-				<BaseSelect id="folderColor" v-model="folder.color">
+			<h3 class="mb-4 text-xl font-medium">{{ t('fileBrowser.folder.createFolder') }}</h3>
+			<form class="space-y-6" @submit.prevent="createFolder" ref="createFolderForm">
+				<BaseInput id="folderName" type="text" v-model="folder.name" :required="true">{{
+					t('fileBrowser.folder.name')
+				}}</BaseInput>
+				<BaseSelect id="folderColor" v-model="folder.color" :required="true">
 					<template v-slot:label>
 						<div class="flex">
-							<span>Color</span>
+							<span>{{ t('fileBrowser.folder.color.name') }}</span>
 							<div
 								v-if="folder.color"
 								:class="
@@ -74,23 +76,25 @@
 						</div>
 					</template>
 					<template v-slot:options>
-						<option v-for="(_value, key) in FolderColors" :key="key">
-							{{ key }}
+						<option v-for="(_value, key) in FolderColors" :key="key" :value="key">
+							{{ t('fileBrowser.folder.color.' + key) }}
 						</option>
 					</template>
 				</BaseSelect>
-				<BaseButton type="submit" :color="ButtonColor.Primary">Create</BaseButton>
+				<BaseButton type="submit" :color="ButtonColor.Primary">{{
+					t('fileBrowser.folder.create')
+				}}</BaseButton>
+				<ErrorAlert
+					v-if="createFolderErrorObject"
+					:errorObject="createFolderErrorObject"
+				></ErrorAlert>
 			</form>
 		</BaseModal>
 
 		<!-- Toasts -->
-		<TransitionGroup
-			name="toasts"
-			tag="div"
-			class="fixed right-5 top-24 z-50 flex w-full max-w-xs flex-col"
-		>
+		<div class="fixed right-5 top-24 z-50 flex w-full max-w-xs flex-col">
 			<BaseToast v-for="toast in toasts" :type="toast.type">{{ toast.message }}</BaseToast>
-		</TransitionGroup>
+		</div>
 	</div>
 </template>
 <script setup lang="ts">
@@ -109,6 +113,8 @@ import BaseModal from '@components/base/modal.vue';
 import BaseInput from '@components/base/input.vue';
 import BaseButton, { ButtonColor } from '@components/base/button.vue';
 import BaseSelect from '@components/base/select.vue';
+import type { ErrorObject } from '@components/base/errorAlert.vue';
+import { t } from '@lib/i18n';
 
 const props = defineProps({
 	modelValue: {
@@ -184,19 +190,45 @@ function closeCreateFolderModal() {
 	showCreateFolderModal.value = false;
 	folder.value = { name: '', color: '' };
 }
+
+const createFolderForm = ref<HTMLFormElement>();
+const createFolderErrorObject = ref<null | ErrorObject>(null);
+
 async function createFolder() {
-	if (!folder.value.color) return;
+	createFolderErrorObject.value = null;
 
-	items.value?.push(
-		await FolderClass.create(folder.value.name, props.modelValue ?? null, folder.value.color),
-	);
+	if (!folder.value.color) {
+		createFolderErrorObject.value = {
+			error: 'Validation Error',
+			errors: {
+				confirmPassword: [t('fileBrowser.folder.color.required')],
+			},
+			statusCode: 400,
+		};
+		return;
+	}
 
-	toasts.value.push({
-		message: `Folder ${folder.value.name} created`,
-		type: ToastType.Success,
-	});
+	if (!createFolderForm.value?.checkValidity() || createFolderErrorObject.value) {
+		createFolderForm.value?.reportValidity();
+		return;
+	}
+
+	try {
+		const createdFolder = await FolderClass.create({
+			name: folder.value.name,
+			parent: props.modelValue ?? null,
+			color: folder.value.color,
+		});
+
+		items.value?.push(createdFolder);
+
+		toasts.value.push({
+			message: `Folder ${folder.value.name} created`,
+			type: ToastType.Success,
+		});
 
-	closeCreateFolderModal();
+		closeCreateFolderModal();
+	} catch (e) {}
 }
 
 const folders = computed(() => {

src/lang/da.ts

@@ -43,6 +43,37 @@ export default {
 			submit: 'Nulstil adgangskode',
 		},
 	},
+	fileBrowser: {
+		file: {
+			uploadFile: 'Upload fil',
+		},
+		folder: {
+			name: 'Navn',
+			createFolder: 'Opret mappe',
+			create: 'Opret',
+			color: {
+				name: 'Farve',
+				required: 'Farve er påkrævet',
+				red: 'Rød',
+				orange: 'Orange',
+				amber: 'Amber',
+				yellow: 'Gul',
+				lime: 'Lime',
+				green: 'Grøn',
+				emerald: 'Emerald',
+				teal: 'Blågrøn',
+				cyan: 'Cyan',
+				sky: 'Sky',
+				blue: 'Blå',
+				indigo: 'Indigo',
+				violet: 'Violet',
+				purple: 'Lilla',
+				fuchsia: 'Fuchsia',
+				pink: 'Pink',
+				rose: 'Rose',
+			},
+		},
+	},
 	layout: {
 		sr: {
 			signOut: 'Log ud',

src/lang/en.ts

@@ -43,6 +43,37 @@ export default {
 			submit: 'Reset password',
 		},
 	},
+	fileBrowser: {
+		file: {
+			uploadFile: 'Upload file',
+		},
+		folder: {
+			name: 'Name',
+			createFolder: 'Create folder',
+			create: 'Create',
+			color: {
+				name: 'Color',
+				required: 'Color is required',
+				red: 'Red',
+				orange: 'Orange',
+				amber: 'Amber',
+				yellow: 'Yellow',
+				lime: 'Lime',
+				green: 'Green',
+				emerald: 'Emerald',
+				teal: 'Teal',
+				cyan: 'Cyan',
+				sky: 'Sky',
+				blue: 'Blue',
+				indigo: 'Indigo',
+				violet: 'Violet',
+				purple: 'Purple',
+				fuchsia: 'Fuchsia',
+				pink: 'Pink',
+				rose: 'Rose',
+			},
+		},
+	},
 	layout: {
 		sr: {
 			signOut: 'Sign out',

src/lib/items/files.ts

@@ -20,8 +20,6 @@ export class FileClass extends ItemClass {
 				parentId: parent?.id ?? null,
 			}),
 		});
-
-		//return new FileClass(returnedFile);
 	}
 
 	get blobUrl() {

src/lib/items/folders.ts

@@ -10,19 +10,17 @@ export class FolderClass extends ItemClass {
 		this._color = folderObject.color;
 	}
 
-	static async create(name: string, parent: FolderType | null, color: FolderColor) {
-		// TODO: Send request to create folder
-
+	static async create(input: { name: string; parent: FolderType | null; color: FolderColor }) {
 		const returnedFolder = await fetch(api('folder'), {
 			method: 'POST',
 			headers: {
 				'Content-Type': 'application/json',
 			},
 			credentials: 'include',
 			body: JSON.stringify({
-				name: name,
-				parentId: parent?.id ?? null,
-				color: color,
+				name: input.name,
+				parentId: input.parent?.id ?? null,
+				color: input.color,
 			}),
 		})
 			.then(async (response) => {