From a1c4a72dd1fe563f161048f9d465376ec55a3660 Mon Sep 17 00:00:00 2001
From: Kristian Binau <kristian@binau.me>
Date: Wed, 4 Oct 2023 23:57:45 +0200
Subject: [PATCH] #9 - Refactor & Added ContextMenu component

---
 src/components/Dashboard.astro                |  7 --
 src/components/Files/File.vue                 | 15 ----
 src/components/Files/Folder.vue               | 21 ------
 src/components/Files/NoFiles.vue              | 18 -----
 src/components/files/ContextMenu.vue          | 47 ++++++++++++
 src/components/files/File.vue                 | 23 ++++++
 .../{Files => files}/FileBrowser.vue          | 66 +++++++----------
 src/components/files/Folder.vue               | 73 +++++++++++++++++++
 src/components/files/NoFiles.vue              | 35 +++++++++
 src/lang/da.ts                                |  2 +-
 src/lang/en.ts                                |  2 +-
 src/layouts/SideBar.astro                     |  2 +-
 src/lib/items.ts                              | 64 +---------------
 src/pages/u/folder/[id].astro                 | 37 ++++++++++
 src/pages/u/index.astro                       |  6 +-
 15 files changed, 251 insertions(+), 167 deletions(-)
 delete mode 100644 src/components/Dashboard.astro
 delete mode 100644 src/components/Files/File.vue
 delete mode 100644 src/components/Files/Folder.vue
 delete mode 100644 src/components/Files/NoFiles.vue
 create mode 100644 src/components/files/ContextMenu.vue
 create mode 100644 src/components/files/File.vue
 rename src/components/{Files => files}/FileBrowser.vue (52%)
 create mode 100644 src/components/files/Folder.vue
 create mode 100644 src/components/files/NoFiles.vue
 create mode 100644 src/pages/u/folder/[id].astro

diff --git a/src/components/Dashboard.astro b/src/components/Dashboard.astro
deleted file mode 100644
index 09e2834..0000000
--- a/src/components/Dashboard.astro
+++ /dev/null
@@ -1,7 +0,0 @@
----
-import FileBrowser from './Files/FileBrowser.vue';
----
-
-<div class="h-screen px-4 pt-6">
-	<FileBrowser client:only/>
-</div>
diff --git a/src/components/Files/File.vue b/src/components/Files/File.vue
deleted file mode 100644
index db43a0e..0000000
--- a/src/components/Files/File.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<template>
-	<div>{{ file.name }}</div>
-</template>
-
-<script setup lang="ts">
-import { type PropType } from 'vue';
-import { FileClass } from '@lib/items';
-
-defineProps({
-	file: {
-		type: Object as PropType<FileClass>,
-		required: true,
-	},
-});
-</script>
diff --git a/src/components/Files/Folder.vue b/src/components/Files/Folder.vue
deleted file mode 100644
index 7475fbf..0000000
--- a/src/components/Files/Folder.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<template>
-	<button
-		type="button"
-		:class="folder.colorClass"
-		class="mb-2 mr-2 rounded-lg bg-gradient-to-br px-5 py-2.5 text-center text-sm font-medium text-white hover:bg-gradient-to-bl focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800"
-	>
-		{{ folder.name }}
-	</button>
-</template>
-
-<script setup lang="ts">
-import { type PropType } from 'vue';
-import { FolderClass } from '@lib/items';
-
-defineProps({
-	folder: {
-		type: Object as PropType<FolderClass>,
-		required: true,
-	},
-});
-</script>
diff --git a/src/components/Files/NoFiles.vue b/src/components/Files/NoFiles.vue
deleted file mode 100644
index 3e7f207..0000000
--- a/src/components/Files/NoFiles.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-	<div class="flex items-center justify-center w-full">
-    <label for="dropzone-file" class="flex flex-col items-center justify-center w-full h-64 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 dark:hover:bg-bray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600">
-        <div class="flex flex-col items-center justify-center pt-5 pb-6">
-            <svg class="w-8 h-8 mb-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 16">
-                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2"/>
-            </svg>
-            <p class="mb-2 text-sm text-gray-500 dark:text-gray-400"><span class="font-semibold">Click to upload</span> or drag and drop</p>
-            <p class="text-xs text-gray-500 dark:text-gray-400">SVG, PNG, JPG or GIF (MAX. 800x400px)</p>
-        </div>
-        <input id="dropzone-file" type="file" class="hidden" />
-    </label>
-</div> 
-</template>
-
-<script setup lang="ts">
-
-</script>
diff --git a/src/components/files/ContextMenu.vue b/src/components/files/ContextMenu.vue
new file mode 100644
index 0000000..1fb9656
--- /dev/null
+++ b/src/components/files/ContextMenu.vue
@@ -0,0 +1,47 @@
+<template>
+	<div class="relative" v-on:contextmenu.prevent="openMenu">
+		<slot name="content"></slot>
+		<div
+			v-if="showMenu"
+			ref="menu"
+			v-on:blur="closeMenu"
+			tabindex="-1"
+			:style="{ top: `${top}px`, left: `${left}px` }"
+			class="absolute z-10 block w-44 divide-y divide-gray-100 rounded-lg bg-white shadow dark:divide-gray-600 dark:bg-gray-700"
+		>
+			<slot name="menu"></slot>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, nextTick } from 'vue';
+
+const menu = ref<HTMLElement | null>(null);
+const showMenu = ref(false);
+const top = ref(0);
+const left = ref(0);
+
+onMounted(() => console.log(menu.value));
+
+function setMenu(y: number, x: number) {
+	top.value = y;
+	left.value = x;
+}
+
+function closeMenu() {
+	showMenu.value = false;
+}
+
+function openMenu(e: MouseEvent) {
+	showMenu.value = true;
+
+	nextTick(() => {
+		if (!menu.value) return;
+
+		menu.value.focus();
+
+		setMenu(e.offsetY, e.offsetX);
+	});
+}
+</script>
diff --git a/src/components/files/File.vue b/src/components/files/File.vue
new file mode 100644
index 0000000..825e32a
--- /dev/null
+++ b/src/components/files/File.vue
@@ -0,0 +1,23 @@
+<template>
+	<a
+		href="#"
+		class="block max-w-sm rounded-lg border border-gray-200 bg-white p-6 shadow hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700"
+	>
+		<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
+			{{ modelValue.name }}
+		</h5>
+	</a>
+</template>
+
+<script setup lang="ts">
+import { type PropType } from 'vue';
+import { FileClass } from '@lib/items';
+
+defineProps({
+	modelValue: {
+		type: Object as PropType<FileClass>,
+		required: true,
+	},
+});
+defineEmits(['update:modelValue']);
+</script>
diff --git a/src/components/Files/FileBrowser.vue b/src/components/files/FileBrowser.vue
similarity index 52%
rename from src/components/Files/FileBrowser.vue
rename to src/components/files/FileBrowser.vue
index 58e00de..611aef4 100644
--- a/src/components/Files/FileBrowser.vue
+++ b/src/components/files/FileBrowser.vue
@@ -3,22 +3,33 @@
 		<NoFiles />
 	</template>
 	<template v-else>
-		<div>
-			<Folder v-for="folder in folders" :folder="folder" />
+		<div class="flex flex-wrap gap-3">
+			<Folder
+				v-for="folder in folders"
+				:modelValue="folder"
+				@update:modelValue="updateItem(folder)"
+			/>
 		</div>
-		<div>
-			<File v-for="file in files" :file="file" />
+		<div class="mt-3 flex flex-wrap gap-3">
+			<File v-for="file in files" :modelValue="file" @update:modelValue="updateItem(file)" />
 		</div>
 	</template>
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue';
+import { computed, ref, type PropType } from 'vue';
 import NoFiles from './NoFiles.vue';
 import Folder from './Folder.vue';
 import File from './File.vue';
 import { FolderClass, FileClass, ItemClass } from '@lib/items';
 
+const props = defineProps({
+	modelValue: {
+		type: Object as PropType<FolderClass>,
+		required: false,
+	},
+});
+
 /**
  * Items
  */
@@ -27,13 +38,22 @@ const items = ref<ItemClass[]>([]);
 getItems();
 
 function getItems() {
+	console.log(props.modelValue instanceof FolderClass);
+	if (props.modelValue instanceof FolderClass) {
+		//
+	}
+
 	for (let i = 0; i < 29; i++) {
 		const item =
-			Math.random() > 0.5 ? FolderClass.create(randomName(), null) : FileClass.create(randomName(), null);
+			Math.random() > 0.5 ? FolderClass.create('jkghk', null) : FileClass.create('grffrw', null);
 		items.value.push(item);
 	}
 }
 
+function updateItem(item: ItemClass) {
+	console.log(item);
+}
+
 /**
  * Folders
  */
@@ -47,38 +67,4 @@ const folders = computed(() => {
 const files = computed(() => {
 	return items.value.filter((item) => item instanceof FileClass) as FileClass[];
 });
-
-/**
- * TODO: Delete this function
- */
-function randomName() {
-	const words = [
-		'ability',
-		'about',
-		'absent',
-		'brush',
-		'budget',
-		'cheap',
-		'comfort',
-		'common',
-		'company',
-		'compare',
-		'deep',
-		'define',
-		'demand',
-		'depth',
-		'easily',
-		'easy',
-		'factor',
-		'factory',
-		'happy',
-		'hard',
-		'have',
-		'machine',
-		'magazine',
-		'magic',
-		'magical',
-	];
-	return words[Math.floor(Math.random() * words.length)] as string;
-}
 </script>
diff --git a/src/components/files/Folder.vue b/src/components/files/Folder.vue
new file mode 100644
index 0000000..527c50e
--- /dev/null
+++ b/src/components/files/Folder.vue
@@ -0,0 +1,73 @@
+<template>
+	<ContextMenu>
+		<template v-slot:content>
+			<a :href="url(`u/folder/${modelValue.id}`)">
+				<button
+					v-on:click.ctrl.prevent="
+						console.log('ctrl');
+						editingName = !editingName;
+					"
+					type="button"
+					:contenteditable="editingName ? 'true' : 'false'"
+					:class="classes"
+					class="h-[40px] rounded-lg bg-gradient-to-br px-5 py-2.5 text-center text-sm font-medium text-white hover:bg-gradient-to-bl focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800"
+				>
+					{{ modelValue.name }}
+				</button>
+			</a>
+		</template>
+		<template v-slot:menu>
+			<ul class="py-2 text-sm text-gray-700 dark:text-gray-200">
+				<li>
+					<a
+						href="#"
+						class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
+						>Dashboard</a
+					>
+				</li>
+				<li>
+					<a
+						href="#"
+						class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
+						>Settings</a
+					>
+				</li>
+				<li>
+					<a
+						href="#"
+						class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
+						>Earnings</a
+					>
+				</li>
+			</ul>
+			<div class="py-2">
+				<a
+					href="#"
+					class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-600 dark:hover:text-white"
+					>Separated link</a
+				>
+			</div>
+		</template>
+	</ContextMenu>
+</template>
+
+<script setup lang="ts">
+import { ref, type PropType, computed } from 'vue';
+import { FolderClass } from '@lib/items';
+import { url } from '@lib/helpers';
+import ContextMenu from './ContextMenu.vue';
+
+const props = defineProps({
+	modelValue: {
+		type: Object as PropType<FolderClass>,
+		required: true,
+	},
+});
+defineEmits(['update:modelValue']);
+
+const editingName = ref(false);
+
+const classes = computed(() => {
+	return props.modelValue.colorClass + (editingName.value ? '' : '');
+});
+</script>
diff --git a/src/components/files/NoFiles.vue b/src/components/files/NoFiles.vue
new file mode 100644
index 0000000..73c2215
--- /dev/null
+++ b/src/components/files/NoFiles.vue
@@ -0,0 +1,35 @@
+<template>
+	<div class="flex w-full items-center justify-center">
+		<label
+			for="dropzone-file"
+			class="dark:hover:bg-bray-800 flex h-64 w-full cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed border-gray-300 bg-gray-50 hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-700 dark:hover:border-gray-500 dark:hover:bg-gray-600"
+		>
+			<div class="flex flex-col items-center justify-center pb-6 pt-5">
+				<svg
+					class="mb-4 h-8 w-8 text-gray-500 dark:text-gray-400"
+					aria-hidden="true"
+					xmlns="http://www.w3.org/2000/svg"
+					fill="none"
+					viewBox="0 0 20 16"
+				>
+					<path
+						stroke="currentColor"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2"
+					/>
+				</svg>
+				<p class="mb-2 text-sm text-gray-500 dark:text-gray-400">
+					<span class="font-semibold">Click to upload</span> or drag and drop
+				</p>
+				<p class="text-xs text-gray-500 dark:text-gray-400">
+					SVG, PNG, JPG or GIF (MAX. 800x400px)
+				</p>
+			</div>
+			<input id="dropzone-file" type="file" class="hidden" />
+		</label>
+	</div>
+</template>
+
+<script setup lang="ts"></script>
diff --git a/src/lang/da.ts b/src/lang/da.ts
index 8d5477a..db707ce 100644
--- a/src/lang/da.ts
+++ b/src/lang/da.ts
@@ -49,7 +49,7 @@ export default {
 			openUserMenu: 'Åben brugermenu',
 		},
 		link: {
-			dashboard: 'Hjem',
+			myfiles: 'Mine Filer',
 			settings: 'Indstillinger',
 			signOut: 'Log ud',
 		},
diff --git a/src/lang/en.ts b/src/lang/en.ts
index 1558101..332ade0 100644
--- a/src/lang/en.ts
+++ b/src/lang/en.ts
@@ -49,7 +49,7 @@ export default {
 			openUserMenu: 'Open user menu',
 		},
 		link: {
-			dashboard: 'Dashboard',
+			myfiles: 'My Files',
 			settings: 'Settings',
 			signOut: 'Sign out',
 		},
diff --git a/src/layouts/SideBar.astro b/src/layouts/SideBar.astro
index a6849ef..263a7f2 100644
--- a/src/layouts/SideBar.astro
+++ b/src/layouts/SideBar.astro
@@ -38,7 +38,7 @@ import { t } from '@lib/i18n';
 									d="M12 2.252A8.014 8.014 0 0117.748 8H12V2.252z"></path></svg
 							>
 							<span class="ml-3" sidebar-toggle-item
-								>{t('layout.link.dashboard', Astro.locals.currentLocale)}</span
+								>{t('layout.link.myfiles', Astro.locals.currentLocale)}</span
 							>
 						</a>
 					</li>
diff --git a/src/lib/items.ts b/src/lib/items.ts
index 2b8dfb1..3541e8e 100644
--- a/src/lib/items.ts
+++ b/src/lib/items.ts
@@ -2,7 +2,7 @@
  * Item
  */
 export abstract class ItemClass {
-	private _id: number | undefined;
+	private _id: number;
 	private _name: string;
 	private _mimeType: string;
 	private _ownerId: number;
@@ -12,7 +12,7 @@ export abstract class ItemClass {
 	private _deletedAt: Date | null;
 
 	protected constructor(ItemObject: ItemType) {
-		this._id = ItemObject.id || undefined;
+		this._id = ItemObject.id;
 		this._name = ItemObject.name;
 		this._mimeType = ItemObject.mimeType;
 		this._ownerId = ItemObject.ownerId;
@@ -56,7 +56,7 @@ export abstract class ItemClass {
 }
 
 export type ItemType = {
-	id?: number;
+	id: number;
 	name: string;
 	mimeType: string;
 	ownerId: number;
@@ -79,10 +79,6 @@ export class FolderClass extends ItemClass {
 	}
 
 	static create(name: string, parent: FolderClass | null) {
-		if (parent && !parent.id) {
-			throw new Error('Parent folder must have an id');
-		}
-
 		// Send request to create folder
 		const returnedFolder = {
 			id: 1,
@@ -140,7 +136,6 @@ const FolderColors = <const>{
 type FolderColor = keyof typeof FolderColors;
 type FolderColorValue = (typeof FolderColors)[FolderColor];
 
-
 /**
  * File
  */
@@ -154,10 +149,6 @@ export class FileClass extends ItemClass {
 	}
 
 	static create(name: string, parent: FolderClass | null) {
-		if (parent && !parent.id) {
-			throw new Error('Parent folder must have an id');
-		}
-
 		// Send request to create folder
 		const returnedFile = {
 			id: 1,
@@ -182,52 +173,3 @@ export class FileClass extends ItemClass {
 export type FileType = {
 	blobUrl: string;
 } & ItemType;
-
-
-/**
- * Mime Types
- */
-const FolderMimeType = <const>{
-	directory: 'application/vnd.cloudstore.folder',
-};
-type FolderMimeTypeValue = (typeof FolderMimeType)[keyof typeof FolderMimeType];
-
-const VideoMimeType = <const>{
-	mp4: 'video/mp4',
-	webm: 'video/webm',
-};
-
-const AudioMimeType = <const>{
-	mp3: 'audio/mpeg',
-	wav: 'audio/wav',
-	ogg: 'audio/ogg',
-};
-
-const ImageMimeType = <const>{
-	svg: 'image/svg+xml',
-	png: 'image/png',
-	jpg: 'image/jpeg',
-	gif: 'image/gif',
-};
-
-const ApplicationMimeType = <const>{
-	doc: 'application/clouddoc',
-	pdf: 'application/pdf',
-	json: 'application/json',
-	zip: 'application/zip',
-};
-
-const FileMimeType = <const>{
-	...VideoMimeType,
-	...AudioMimeType,
-	...ImageMimeType,
-	...ApplicationMimeType,
-};
-type FileMimeTypeValue = (typeof FileMimeType)[keyof typeof FileMimeType];
-
-const SupportedItemMimeTypes = <const>{
-	...FolderMimeType,
-	...FileMimeType,
-};
-type SupportedItemMimeTypesValue =
-	(typeof SupportedItemMimeTypes)[keyof typeof SupportedItemMimeTypes];
diff --git a/src/pages/u/folder/[id].astro b/src/pages/u/folder/[id].astro
new file mode 100644
index 0000000..f6190ac
--- /dev/null
+++ b/src/pages/u/folder/[id].astro
@@ -0,0 +1,37 @@
+---
+import LayoutSidebar from '@layouts/LayoutSidebar.astro';
+import FileBrowser from '@components/files/FileBrowser.vue';
+// @ts-ignore https://github.com/withastro/language-tools/issues/476
+import { api, url } from '@lib/helpers';
+import { FolderClass } from '@lib/items';
+
+const { id } = Astro.params;
+
+// Send a request to the API to get the folder
+const authenticationHeader = Astro.locals.authHeader as string;
+const folderResponse = await (
+	await fetch(api(`folder/${id}`), {
+		method: 'GET',
+		headers: {
+			Authorization: authenticationHeader,
+		},
+	})
+).json();
+
+// If the folder doesn't exist, redirect
+if (!folderResponse || folderResponse?.statusCode <= 400) {
+	return Astro.redirect(url('404'));
+}
+
+// Otherwise, create a new folder instance
+const folder = new FolderClass(folderResponse.data);
+
+// We can safely cast this as we know that middleware would have already checked for a valid user
+const user = Astro.locals.user as User;
+---
+
+<LayoutSidebar user={user}>
+	<div class="h-screen px-4 pt-6">
+		<FileBrowser modelValue={folder} client:only />
+	</div>
+</LayoutSidebar>
diff --git a/src/pages/u/index.astro b/src/pages/u/index.astro
index 53832f3..891cda0 100644
--- a/src/pages/u/index.astro
+++ b/src/pages/u/index.astro
@@ -1,11 +1,13 @@
 ---
 import LayoutSidebar from '@layouts/LayoutSidebar.astro';
-import Dashboard from '@components/Dashboard.astro';
+import FileBrowser from '@components/files/FileBrowser.vue';
 
 // We can safely cast this as we know that middleware would have already checked for a valid user
 const user = Astro.locals.user as User;
 ---
 
 <LayoutSidebar user={user}>
-	<Dashboard />
+	<div class="h-screen px-4 pt-6">
+		<FileBrowser modelValue={{}} client:only />
+	</div>
 </LayoutSidebar>