#10 - Added Shortcut functionality

src/components/TestForm.vue

@@ -49,7 +49,7 @@ async function onSubmit() {
 
 	const newBlob = await upload(file.name, file, {
 		access: 'public',
-		handleUploadUrl: api('item'),
+		handleUploadUrl: api('blob'),
 		clientPayload: JSON.stringify({
 			parentId: null,
 		}),

src/components/item/CreateShortcutModal.vue

@@ -0,0 +1,130 @@
+<template>
+	<BaseModal ref="modal" @close="close">
+		<h3 class="mb-4 text-xl font-medium">{{ t('item.createShortcut') }}</h3>
+		<hr>
+		<div class="mb-5">
+			<div class="hover:bg-gray-600 py-1" v-on:click="createShortcut(null)">
+				<h1>Mine Filer</h1>
+			</div>
+			<div v-for="folder in folders" class="relative inline-flex items-center w-full hover:bg-gray-600 py-1"
+				v-on:click="createShortcut(folder.id)">
+				<h1 class="col">{{ folder.name }}</h1>
+				<svg xmlns="http://www.w3.org/2000/svg" height="1em" style="color: white" color="white"
+					viewBox="0 0 448 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
+					<path
+						d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z" />
+				</svg>
+			</div>
+		</div>
+		<BaseButton type="submit" :color="ButtonColor.Primary">{{
+			t('fileBrowser.folder.edit')
+		}}</BaseButton>
+	</BaseModal>
+</template>
+
+<script setup lang="ts">
+import { ref, type PropType } from 'vue';
+import { FolderClass } from '@lib/items/folders';
+import BaseModal from '@components/base/modal.vue';
+import BaseButton, { ButtonColor } from '@components/base/button.vue';
+import { type ErrorObject } from '@components/base/errorAlert.vue';
+import { t } from '@lib/i18n';
+import { api } from '@lib/helpers';
+import { ItemFactory } from '@lib/items/factory';
+import { ItemClass } from '@lib/items/items';
+
+const props = defineProps({
+	item: {
+		type: Object as PropType<FolderClass>,
+		required: true,
+	},
+});
+
+defineExpose({
+	open,
+	close,
+});
+
+const modal = ref<InstanceType<typeof BaseModal>>();
+
+const item = ref<{ name: string; }>({
+	name: props.item.name,
+});
+const errorObject = ref<null | ErrorObject>(null);
+
+async function createShortcut(parentId: number | null) {
+	alert(parentId);
+	//errorObject.value = null;
+
+	//try {
+	/*const updatedFolder = await props.folder.update({
+		name: folder.value.name,
+		color: folder.value.color,
+	});
+
+	updateItem(updatedFolder);*/
+
+	// TODO: Show success toast
+
+	//	close();
+	//} catch (e) { }
+}
+
+function open() {
+	modal.value?.open();
+}
+
+function close() {
+	item.value = {
+		name: props.item.name,
+	};
+	modal.value?.close(false);
+}
+
+const fileBrowserFolder = ref<FolderClass | null>(null);
+const hasItemsLoaded = ref(false);
+const folders = ref<FolderClass[]>([]);
+
+async function getFolders() {
+	try {
+		const response = await fetch(
+			api(`item/${FolderClass.isFolder(fileBrowserFolder) ? `${fileBrowserFolder.id}` : ''}`),
+			{
+				method: 'GET',
+				headers: {
+					'Content-Type': 'application/json',
+				},
+				credentials: 'include',
+			},
+		);
+
+		if (!response.ok) {
+			if (response.status >= 400 && response.status < 500) {
+				throw new Error((await response.json()).error);
+			}
+
+			throw new Error(await response.text());
+		}
+
+		const rawItems = await response.json();
+
+		for (const rawItem of rawItems) {
+			if (!ItemClass.isItem(rawItem)) continue;
+
+			const item = ItemFactory.getItemFromObject(rawItem);
+
+			if (item === null) continue;
+
+			if (!FolderClass.isFolder(item)) continue;
+
+			folders.value.push(item);
+		}
+	} catch (e) {
+		console.error('Error' + e);
+	}
+
+	hasItemsLoaded.value = true;
+}
+
+getFolders();
+</script>

src/components/item/folder/Folder.vue

@@ -33,6 +33,14 @@
 						>{{ t('fileBrowser.folder.edit') }}</a
 					>
 				</li>
+				<li>
+					<a
+						href="javascript:void(0)"
+						@click="createShortcutModal?.open()"
+						class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
+						>{{ t('item.createShortcut') }}</a
+					>
+				</li>
 				<!--
 				<li>
 					<a
@@ -59,6 +67,7 @@
 		{{ t('fileBrowser.folder.areYouSureYouWantToDeleteThisFolder') }}</BaseConfirmModal
 	>
 	<EditFolderModal ref="editFolderModal" :folder="modelValue" />
+	<CreateShortcutModal ref="createShortcutModal" :item="modelValue" />
 </template>
 
 <script setup lang="ts">
@@ -68,6 +77,7 @@ import { url } from '@lib/helpers';
 import ContextMenu from '@components/base/contextMenu.vue';
 import BaseConfirmModal, { ConfirmModalType } from '@components/base/confirmModal.vue';
 import EditFolderModal from './EditModal.vue';
+import CreateShortcutModal from '../CreateShortcutModal.vue';
 import { t } from '@lib/i18n';
 import { removeItem } from '@stores/items';
 
@@ -101,4 +111,5 @@ async function deleteFolder() {
 }
 
 const editFolderModal = ref<InstanceType<typeof EditFolderModal>>();
+const createShortcutModal = ref<InstanceType<typeof CreateShortcutModal>>();
 </script>

src/lang/da.ts

@@ -85,6 +85,9 @@ export default {
 			},
 		},
 	},
+	item: {
+		createShortcut: 'Opret genvej',
+	},
 	layout: {
 		sr: {
 			signOut: 'Log ud',

src/lang/en.ts

@@ -85,6 +85,9 @@ export default {
 			},
 		},
 	},
+	item: {
+		createShortcut: 'Opret genvej',
+	},
 	layout: {
 		sr: {
 			signOut: 'Sign out',

src/lib/items/folders.ts

@@ -84,6 +84,37 @@ export class FolderClass extends ItemClass {
 		}
 	}
 
+	static async all() {
+		const response = await fetch(api('item/folders'), {
+			method: 'GET',
+			headers: {
+				'Content-Type': 'application/json',
+			},
+			credentials: 'include',
+		});
+
+		if (!response.ok) {
+			if (response.status >= 400 && response.status < 500) {
+				const json = await response.json();
+
+				throw new Error(json.error);
+			}
+
+			throw new Error(await response.text());
+		}
+
+		var f: FolderClass[] = [];
+
+		await response.json().then((y: FolderClass[]) => {
+			y.forEach(l => {
+				f.push(new FolderClass(l));
+			})
+		});
+
+		return f;
+		//return await response.json();
+	}
+
 	get color() {
 		return this._color;
 	}