From 094d6ad89a8caedf0c9dcb807b925f35e1d1fa5a Mon Sep 17 00:00:00 2001
From: TZGyn <ca538901d@mozmail.com>
Date: Sat, 4 Feb 2023 20:38:07 +0800
Subject: [PATCH] remove @apply and made icon alias

---
 app.config.ts                   | 10 ++++
 assets/css/tailwind.css         | 31 -----------
 components/app/App.vue          |  6 ++
 components/card/Note.vue        | 14 +----
 components/card/Panel.vue       | 37 +++---------
 components/element/TextArea.vue | 29 ++++++++++
 components/header/Header.vue    | 17 ++----
 pages/index.vue                 |  4 +-
 pages/login/index.vue           | 25 +++------
 pages/notes/[id].vue            | 99 +++++++++++++++++++++------------
 pages/notes/index.vue           | 23 ++++----
 pages/profile/index.vue         | 20 ++++---
 12 files changed, 151 insertions(+), 164 deletions(-)
 create mode 100644 app.config.ts
 create mode 100644 components/app/App.vue
 create mode 100644 components/element/TextArea.vue

diff --git a/app.config.ts b/app.config.ts
new file mode 100644
index 0000000..57df767
--- /dev/null
+++ b/app.config.ts
@@ -0,0 +1,10 @@
+export default defineAppConfig({
+	nuxtIcon: {
+		size: '24px', // default <Icon> size applied
+		class: 'icon', // default <Icon> class applied
+		aliases: {
+			nuxt: 'logos:nuxt-icon',
+			loading: 'svg-spinners:90-ring-with-bg',
+		},
+	},
+});
diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css
index d1c3976..a90f074 100644
--- a/assets/css/tailwind.css
+++ b/assets/css/tailwind.css
@@ -2,34 +2,3 @@
 @tailwind components;
 @tailwind utilities;
 
-html {
-	@apply bg-primary text-white;
-}
-
-#__nuxt {
-	@apply h-screen w-screen;
-}
-
-.app {
-	@apply flex w-full flex-col items-center px-12;
-}
-.content {
-	@apply mx-12 flex h-full w-full max-w-3xl flex-row justify-center gap-5;
-}
-
-
-.sidebar {
-	@apply sticky top-3 h-fit w-64 rounded-lg px-10 py-5 text-white;
-}
-
-.main {
-	@apply h-screen w-2/5;
-}
-
-.card {
-	@apply bg-secondary;
-}
-
-textarea {
-	@apply bg-secondary outline-none border-none focus:outline-none resize-none;
-}
diff --git a/components/app/App.vue b/components/app/App.vue
new file mode 100644
index 0000000..c3a1477
--- /dev/null
+++ b/components/app/App.vue
@@ -0,0 +1,6 @@
+<template>
+	<div
+		class="bg-primary flex h-screen w-full flex-col items-center px-12 text-white">
+		<slot />
+	</div>
+</template>
diff --git a/components/card/Note.vue b/components/card/Note.vue
index 327cddd..17f9804 100644
--- a/components/card/Note.vue
+++ b/components/card/Note.vue
@@ -1,8 +1,8 @@
 <template>
 	<div
-		class="note"
+		class="bg-secondary flex w-96 cursor-pointer flex-col gap-4 rounded-lg p-4"
 		@click="noteDetail(props.id)">
-		<div class="title">
+		<div class="w-full text-center text-2xl font-bold">
 			{{ props.title }}
 		</div>
 		<div>
@@ -25,13 +25,3 @@
 		router.push(`/notes/${id}`);
 	};
 </script>
-
-<style scoped>
-	.note {
-		@apply bg-secondary flex w-96 cursor-pointer flex-col gap-4 rounded-lg p-4;
-	}
-
-	.title {
-		@apply w-full text-center text-2xl font-bold;
-	}
-</style>
diff --git a/components/card/Panel.vue b/components/card/Panel.vue
index dceae18..8906324 100644
--- a/components/card/Panel.vue
+++ b/components/card/Panel.vue
@@ -1,21 +1,19 @@
 <template>
 	<div
-		class="panel"
+		class="bg-secondary flex h-fit w-full justify-start gap-8 p-4 text-center"
 		:class="props.mode === 'horizontal' ? 'flex-row' : 'flex-col'">
-		<div class="top">
-			<Icon
-				:name="props.icon"
-				size="24" />
-			<div class="title">
+		<div class="flex flex-row items-center justify-start gap-4">
+			<Icon :name="props.icon" />
+			<div class="text-2xl font-bold">
 				{{ props.title }}
 			</div>
 		</div>
-		<div class="middle">
-			<div class="data">
+		<div class="flex flex-grow flex-row items-center gap-4">
+			<div class="w-full text-right text-2xl font-bold">
 				{{ props.data }}
 			</div>
 		</div>
-		<div class="bottom"> </div>
+		<div class="flex flex-row items-center gap-4"> </div>
 	</div>
 </template>
 
@@ -30,24 +28,3 @@
 
 	const props = defineProps<Props>();
 </script>
-
-<style scoped>
-	.panel {
-		@apply bg-secondary flex h-fit w-full justify-start gap-8 p-4 text-center;
-	}
-	.top {
-		@apply flex flex-row items-center justify-start gap-4;
-	}
-	.middle {
-		@apply flex flex-row items-center gap-4;
-	}
-	.bottom {
-		@apply flex flex-row items-center gap-4;
-	}
-	.title {
-		@apply text-2xl font-bold;
-	}
-	.data {
-		@apply text-2xl font-bold;
-	}
-</style>
diff --git a/components/element/TextArea.vue b/components/element/TextArea.vue
new file mode 100644
index 0000000..3c3634b
--- /dev/null
+++ b/components/element/TextArea.vue
@@ -0,0 +1,29 @@
+<template>
+	<textarea
+		class="bg-secondary w-full max-w-2xl resize-none border-none outline-none placeholder:text-zinc-700 focus:outline-none"
+		v-model="data"
+		:placeholder="props.placeholder"
+		@input="updateData()">
+	</textarea>
+</template>
+
+<script setup lang="ts">
+	interface Props {
+		modelValue: string;
+		placeholder?: string;
+	}
+
+	const props = defineProps<Props>();
+	const emit = defineEmits(['update:modelValue']);
+
+	const data = ref<string>(props.modelValue);
+
+	const updateData = () => {
+		emit('update:modelValue', data.value);
+	};
+
+	watch(
+		() => props.modelValue,
+		() => (data.value = props.modelValue)
+	);
+</script>
diff --git a/components/header/Header.vue b/components/header/Header.vue
index 9c60bd7..8381ed6 100644
--- a/components/header/Header.vue
+++ b/components/header/Header.vue
@@ -1,15 +1,16 @@
 <template>
-	<div class="header">
+	<div
+		class="bg-secondary my-3 flex h-16 w-full max-w-3xl flex-row items-center justify-center rounded-lg">
 		<div @click="profile">
 			<img
 				v-if="props.avatar"
-				class="avatar"
+				class="bg-secondary h-12 w-12 rounded-full hover:cursor-pointer"
 				@click="profile"
 				:src="props.avatar"
 				alt="" />
 			<Icon
 				v-else
-				class="avatar"
+				class="bg-secondary h-12 w-12 rounded-full hover:cursor-pointer"
 				name="fa6-solid:circle-user" />
 		</div>
 	</div>
@@ -28,13 +29,3 @@
 		router.push('/profile');
 	};
 </script>
-
-<style scoped>
-	.header {
-		@apply bg-secondary my-3 flex h-16 w-full max-w-3xl flex-row items-center justify-center rounded-lg;
-	}
-
-	.avatar {
-		@apply bg-secondary h-12 w-12 rounded-full hover:cursor-pointer;
-	}
-</style>
diff --git a/pages/index.vue b/pages/index.vue
index 7b30b26..5b92e9b 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,9 +1,9 @@
 <template>
-	<div class="app">
+	<App>
 		<Header />
 		{{ user?.email }}
 		<NuxtLink to="/notes"> Notes </NuxtLink>
-	</div>
+	</App>
 </template>
 
 <script setup lang="ts">
diff --git a/pages/login/index.vue b/pages/login/index.vue
index b20a90e..19416fc 100644
--- a/pages/login/index.vue
+++ b/pages/login/index.vue
@@ -1,19 +1,21 @@
 <template>
-	<div class="app">
+	<App>
 		<Header />
 		<div
 			class="bg-secondary mx-auto mt-12 flex h-96 w-96 flex-col items-center justify-center gap-8 rounded-xl p-8">
 			<div class="flex w-full flex-col gap-2">
-				<label> Email </label>
+				<label class="w-full text-[#b3b3b3]"> Email </label>
 				<input
 					type="text"
+					class="h-12 w-full rounded-md border border-[#373737] bg-[#2b2b2b] p-4 text-lg placeholder:text-[#4f4f4f] focus:outline-none active:outline-none"
 					v-model="credential.email"
 					placeholder="username" />
 			</div>
 			<div class="flex w-full flex-col gap-2">
-				<label> Password </label>
+				<label class="w-full text-[#b3b3b3]"> Password </label>
 				<input
 					type="password"
+					class="h-12 w-full rounded-md border border-[#373737] bg-[#2b2b2b] p-4 text-lg placeholder:text-[#4f4f4f] focus:outline-none active:outline-none"
 					v-model="credential.password"
 					placeholder="password" />
 			</div>
@@ -29,6 +31,7 @@
 				}}
 			</p>
 			<button
+				class="w-fit rounded-lg bg-blue-500 py-4 px-8"
 				v-on="
 					mode === 'login'
 						? { click: () => signIn($event) }
@@ -37,7 +40,7 @@
 				{{ mode === 'login' ? 'Login' : 'Sign Up' }}
 			</button>
 		</div>
-	</div>
+	</App>
 </template>
 
 <script setup lang="ts">
@@ -89,17 +92,3 @@
 		console.log('error', error);
 	};
 </script>
-
-<style scoped>
-	input {
-		@apply h-12 w-full rounded-md border border-[#373737] bg-[#2b2b2b] p-4 text-lg placeholder:text-[#4f4f4f] focus:outline-none active:outline-none;
-	}
-
-	button {
-		@apply w-fit rounded-lg bg-blue-500 py-4 px-8;
-	}
-
-	label {
-		@apply w-full text-[#b3b3b3];
-	}
-</style>
diff --git a/pages/notes/[id].vue b/pages/notes/[id].vue
index ba24f46..2006e1d 100644
--- a/pages/notes/[id].vue
+++ b/pages/notes/[id].vue
@@ -1,20 +1,35 @@
 <template>
-	<div class="app">
-		<textarea
-			v-model="title"
-			placeholder="untitled"
-			class="titleTextArea" />
-		<button @click="submit()">
-			<LoadingSpinner v-if="isSubmitting" />
-			<Icon
-				v-if="!isSubmitting"
-				name="fa6-solid:floppy-disk"
-				size="24" />
-		</button>
-		<textarea
-			v-model="description"
-			class="noteTextArea"></textarea>
-	</div>
+	<App class="p-4">
+		<ClientOnly>
+			<ElementTextArea
+				@keydown.ctrl.s.prevent="submit(note)"
+				v-model="note.title"
+				placeholder="untitled"
+				class="bg-primary focus:bg-secondary text-center" />
+			<div class="menu">
+				<button @click="submit(note)">
+					<Icon
+						v-if="isSubmitting"
+						name="loading" />
+					<Icon
+						v-if="!isSubmitting"
+						name="fa6-solid:floppy-disk" />
+				</button>
+				<button @click="deleteNote">
+					<Icon
+						v-if="isDeleting"
+						name="loading" />
+					<Icon
+						v-if="!isDeleting"
+						name="fa6-solid:trash" />
+				</button>
+			</div>
+			<ElementTextArea
+				@keydown.ctrl.s.prevent="submit(note)"
+				v-model:model-value="note.description"
+				class="h-full p-4" />
+		</ClientOnly>
+	</App>
 </template>
 
 <script setup lang="ts">
@@ -22,11 +37,15 @@
 		middleware: ['auth'],
 	});
 
-	const title = ref<string>('');
-	const description = ref<string>('');
+	const note = reactive<Note>({
+		title: '',
+		description: '',
+	});
 	const route = useRoute();
+	const router = useRouter();
 	const isLoading = ref<Boolean>(false);
 	const isSubmitting = ref<Boolean>(false);
+	const isDeleting = ref<Boolean>(false);
 
 	const { refresh } = await useFetch('/api/note', {
 		method: 'GET',
@@ -34,13 +53,18 @@
 			id: route.params.id,
 		},
 		onResponse({ response }) {
-			title.value = response._data.note.title;
-			description.value = response._data.note.description;
-			console.log(response);
+			console.log('Response: ', response);
+			if (response.status === 500) {
+				console.log(`Error: ${response._data.message}`);
+				router.push('/notes');
+				return;
+			}
+			note.title = response._data.note.title;
+			note.description = response._data.note.description;
 		},
 	});
 
-	const submit = async () => {
+	const submit = async (note: Note) => {
 		isSubmitting.value = true;
 		await useFetch('/api/note', {
 			method: 'POST',
@@ -48,8 +72,8 @@
 				id: route.params.id,
 			},
 			body: {
-				title: title.value,
-				description: description.value,
+				title: note.title,
+				description: note.description,
 			},
 			onResponse({ response }) {
 				isSubmitting.value = false;
@@ -58,21 +82,24 @@
 		});
 	};
 
+	const deleteNote = async () => {
+		isDeleting.value = true;
+		await useFetch('/api/note', {
+			method: 'DELETE',
+			query: {
+				id: route.params.id,
+			},
+			onResponse({ response }) {
+				isDeleting.value = false;
+				console.log('DELETE:', response._data.message);
+				router.push('/notes');
+			},
+		});
+	};
+
 	onMounted(() => {
 		isLoading.value = true;
 		refresh();
 		isLoading.value = false;
 	});
 </script>
-
-<style scoped>
-	.noteTextArea {
-		@apply h-full w-full max-w-2xl p-4;
-	}
-	.titleTextArea {
-		@apply bg-primary focus:bg-secondary w-full max-w-2xl text-center;
-	}
-	.app {
-		@apply h-full p-4;
-	}
-</style>
diff --git a/pages/notes/index.vue b/pages/notes/index.vue
index 405364f..2632dd4 100644
--- a/pages/notes/index.vue
+++ b/pages/notes/index.vue
@@ -1,20 +1,22 @@
 <template>
-	<div class="app">
+	<App>
 		<Header />
 
 		<button @click="signout">Sign Out</button>
 		<button @click="create">
-			<LoadingSpinner v-if="isCreating" />
+			<Icon
+				v-if="isCreating"
+				name="loading" />
 			<Icon
 				v-if="!isCreating"
-				name="fa6-solid:square-plus"
-				size="24" />
+				name="fa6-solid:square-plus" />
 		</button>
 
-		<div class="content">
+		<div
+			class="mx-12 flex h-full w-full max-w-3xl flex-row justify-center gap-4">
 			<div
 				v-if="data"
-				class="notes">
+				class="flex flex-col gap-4">
 				<div v-for="note in data.notes">
 					<LazyCardNote
 						:id="note.id"
@@ -23,7 +25,7 @@
 				</div>
 			</div>
 		</div>
-	</div>
+	</App>
 </template>
 
 <script setup lang="ts">
@@ -43,6 +45,7 @@
 		isCreating.value = true;
 		await useFetch('/api/note/new', {
 			onResponse({ response }) {
+				console.log(response._data.message);
 				isCreating.value = false;
 				router.push(`/notes/${response._data.note.id}`);
 			},
@@ -61,9 +64,3 @@
 		refresh();
 	});
 </script>
-
-<style scoped>
-	.notes {
-		@apply flex flex-col gap-4;
-	}
-</style>
diff --git a/pages/profile/index.vue b/pages/profile/index.vue
index 47adc34..be902d5 100644
--- a/pages/profile/index.vue
+++ b/pages/profile/index.vue
@@ -1,7 +1,7 @@
 <template>
-	<div class="app">
+	<App>
 		<Header />
-		<div class="dashboard">
+		<div class="flex w-full max-w-3xl flex-col gap-4">
 			<CardPanel
 				v-for="data in dashboardData"
 				:key="data.title"
@@ -11,7 +11,7 @@
 				:description="data.description"
 				:data="data.data" />
 		</div>
-	</div>
+	</App>
 </template>
 
 <script setup lang="ts">
@@ -29,9 +29,17 @@
 		};
 	}
 
+	const user = useSupabaseUser();
 	const isLoading = ref<boolean>(true);
 
 	const dashboardData: DashboardData = reactive({
+		user: {
+			title: 'Email',
+			description: 'User',
+			data: user.value?.email,
+			mode: 'horizontal',
+			icon: 'fa6-solid:envelope',
+		},
 		noteCount: {
 			title: 'Note Count',
 			description: 'The number of notes this account is currently having',
@@ -53,9 +61,3 @@
 		isLoading.value = false;
 	});
 </script>
-
-<style scoped>
-	.dashboard {
-		@apply w-full max-w-3xl;
-	}
-</style>