upd

progof · Nov 8, 2024 · 6c81104 · 6c81104
1 parent 29fb53a
commit 6c81104
Show file tree

Hide file tree

Showing 7 changed files with 103 additions and 148 deletions.
diff --git a/backend/src/auth/password/password.service.ts b/backend/src/auth/password/password.service.ts
@@ -11,7 +11,7 @@ import {
 	adminsTable,
 } from "../../../db/schema.js";
 import { eq } from "drizzle-orm";
-import { Database, HTTPError, Transaction, dateToUTCTimestamp } from "@/utils.js";
+import { HTTPError, dateToUTCTimestamp } from "@/utils.js";
 import { User } from "@shared/index.js";
 import { z, ZodType } from "zod";
 
@@ -152,66 +152,6 @@ export class AuthPasswordService {
 		} satisfies User);
 	}
 
-	// async getUserById(userId: string):Promise<User> {
-	// 	const user = (
-	// 		await db
-	// 			.select()
-	// 			.from(usersTable)
-	// 			.where(eq(usersTable.id, userId))
-	// 	).at(0);
-
-	// 	if (!user) {
-	// 		throw new HTTPError({ status: 404, message: "User not found" });
-	// 	}
-
-	// 	return userSchema.parse({
-	// 		id: user.id,
-	// 		username: user.username,
-	// 		email: user.email,
-	// 		emailVerified: user.emailVerified,
-	// 		avatarKey: user.avatarKey,
-	// 		createdAt: dateToUTCTimestamp(user.createdAt),
-	// 		role: user.role,
-	// 		score: user.score,
-	// 		level: user.level,
-	// 		currency: user.currency,
-	// 	} satisfies User);
-	// }
-
-
-
-	// function for get user by userId with checking if the user is an admin join with adminsTable
-
-
-	// async getUserById(userId: string): Promise<User> {
-	// 	const user = (
-	// 		await db
-	// 			.select()
-	// 			.from(usersTable)
-	// 			.leftJoin(adminsTable, eq(usersTable.email, adminsTable.email))
-	// 			.where(eq(usersTable.id, userId))
-	// 	).at(0);
-
-	// 	if (!user) {
-	// 		throw new HTTPError({ status: 404, message: "User not found" });
-	// 	}
-
-	// 	return userSchema.parse({
-	// 		id: user.id,
-	// 		username: user.username,
-	// 		email: user.email,
-	// 		emailVerified: user.emailVerified,
-	// 		avatarKey: user.avatarKey,
-	// 		createdAt: dateToUTCTimestamp(user.createdAt),
-	// 		role: user.role,
-	// 		score: user.score,
-	// 		level: user.level,
-	// 		currency: user.currency,
-	// 		isAdmin: user.admins !== null,
-	// 	} satisfies User);
-	// }
-
-
 
 	async getUserRoleById(userId: string) {
 		const [user] = await db

diff --git a/frontend/src/components/dayquest-progress-bar/DayQuestProgressBar.vue b/frontend/src/components/dayquest-progress-bar/DayQuestProgressBar.vue
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { getMeQueryOptions } from "@/services/user.service";
+import { useQuery } from "@tanstack/vue-query";
+import { categoriesQuery } from "@/services/dayquest/category.service";
+
+import DiamondIcon from "@/assets/icons/diamond.svg?component";
+import StarIcon from "@/assets/icons/star.svg?component";
+import { Progress } from "@/components/ui/progress";
+import { computed } from "vue";
+
+const { data: user } = useQuery(getMeQueryOptions);
+
+const { data: categories } = useQuery({
+  ...categoriesQuery,
+  enabled: true,
+});
+
+const baseLevelScore = 8;
+
+const nextLevelScore = computed(() => {
+  if (!user.value) return 0;
+  return (user.value.level + 1) * baseLevelScore;
+});
+
+const progress = computed(() => {
+  if (!user.value) return 0;
+  const currentScore = user.value.score;
+  const requiredScore = nextLevelScore.value;
+  return requiredScore ? (currentScore / requiredScore) * 100 : 0;
+});
+</script>
+
+<template>
+  <div class="flex flex-col gap-3 flex-1">
+    <div class="flex gap-3 justify-between">
+      <div
+        class="flex gap-3 bg-blue-100 p-2 rounded-xl items-center"
+        title="Experience"
+      >
+        <span class="text-zinc-700 text-xs" v-if="user">
+          Exp:
+          {{ user.score }}
+          / {{ (user.level + 1) * baseLevelScore }}
+        </span>
+      </div>
+      <div class="flex gap-3">
+        <div
+          class="flex gap-1 bg-blue-100 p-2 rounded-xl items-center"
+          title="Level"
+        >
+          <StarIcon class="size-5 stroke-[1.7] text-zinc-700 text-sm" />
+          <span class="text-zinc-700" v-if="user"> {{ user.level }} lvl </span>
+        </div>
+        <div
+          class="flex gap-1 bg-blue-100 p-2 rounded-xl items-center"
+          title="Score"
+        >
+          <DiamondIcon class="size-6 stroke-[1.7] text-zinc-700" />
+          <span class="text-zinc-700">{{ user?.currency }}</span>
+        </div>
+      </div>
+    </div>
+    <Progress v-model="progress" class="flex" />
+  </div>
+</template>
diff --git a/frontend/src/components/dayquest-progress-bar/index.ts b/frontend/src/components/dayquest-progress-bar/index.ts
@@ -0,0 +1 @@
+export { default as DayQuestProgressBar } from "./DayQuestProgressBar.vue";
diff --git a/frontend/src/layouts/AppLayout.vue b/frontend/src/layouts/AppLayout.vue
@@ -2,35 +2,9 @@
 import ProfileDropdownMenu from "@/layouts/ProfileDropdownMenu.vue";
 import { getMeQueryOptions } from "@/services/user.service";
 import { useQuery } from "@tanstack/vue-query";
-import { categoriesQuery } from "@/services/dayquest/category.service";
-
-import DiamondIcon from "@/assets/icons/diamond.svg?component";
-import StarIcon from "@/assets/icons/star.svg?component";
-import { computed } from "vue";
-import { Progress } from "@/components/ui/progress";
 import AstronautIcon from "@/assets/icons/astronaut.svg?component";
-import CategoriesIcon from "@/assets/icons/categories.svg?component";
 
 const { data: user } = useQuery(getMeQueryOptions);
-
-const { data: categories } = useQuery({
-  ...categoriesQuery,
-  enabled: true,
-});
-
-const baseLevelScore = 8;
-
-const nextLevelScore = computed(() => {
-  if (!user.value) return 0;
-  return (user.value.level + 1) * baseLevelScore;
-});
-
-const progress = computed(() => {
-  if (!user.value) return 0;
-  const currentScore = user.value.score;
-  const requiredScore = nextLevelScore.value;
-  return requiredScore ? (currentScore / requiredScore) * 100 : 0;
-});
 </script>
 
 <template>
@@ -46,50 +20,6 @@ const progress = computed(() => {
       <ProfileDropdownMenu v-if="user" :user="user" class="md:hidden" />
     </div>
   </header>
-  <div class="bg-blue-50 flex gap-3 p-3 px-6 md:px-10 items-center">
-    <div class="flex flex-col gap-3 flex-1">
-      <div class="flex gap-3 justify-between">
-        <div
-          class="flex gap-3 bg-blue-100 p-2 rounded-xl items-center"
-          title="Experience"
-        >
-          <span class="text-zinc-700 text-xs" v-if="user">
-            Exp:
-            {{ user.score }}
-            / {{ (user.level + 1) * baseLevelScore }}
-          </span>
-        </div>
-        <div class="flex gap-3">
-          <div
-            class="flex gap-1 bg-blue-100 p-2 rounded-xl items-center"
-            title="Categories"
-          >
-            <CategoriesIcon class="size-5 stroke-[1.7] text-zinc-700 text-sm" />
-            <span class="text-zinc-700" v-if="user">
-              {{ categories ? categories.length : 0 }} / 5
-            </span>
-          </div>
-          <div
-            class="flex gap-1 bg-blue-100 p-2 rounded-xl items-center"
-            title="Level"
-          >
-            <StarIcon class="size-5 stroke-[1.7] text-zinc-700 text-sm" />
-            <span class="text-zinc-700" v-if="user">
-              {{ user.level }} lvl
-            </span>
-          </div>
-          <div
-            class="flex gap-1 bg-blue-100 p-2 rounded-xl items-center"
-            title="Score"
-          >
-            <DiamondIcon class="size-6 stroke-[1.7] text-zinc-700" />
-            <span class="text-zinc-700">{{ user?.currency }}</span>
-          </div>
-        </div>
-      </div>
-      <Progress v-model="progress" class="flex" />
-    </div>
-  </div>
   <div class="relative flex flex-1 flex-col bg-blue-50 h-screen">
     <slot />
   </div>

diff --git a/frontend/src/pages/user/dayComment.vue b/frontend/src/pages/user/dayComment.vue
@@ -67,7 +67,7 @@ function getEmotionalStateIcon(emotionalState: string) {
       <div class="container flex w-auto flex-col gap-1">
         <div class="flex flex-col gap-6">
           <div
-            class="flex justify-between items-center border-b border-blue-600 py-3"
+            class="flex justify-between items-center border-b-2 border-blue-400 py-3"
           >
             <h2 class="text-xl font-bold tracking-tight text-zinc-700">
               DayComment

diff --git a/frontend/src/pages/user/dayQuest.vue b/frontend/src/pages/user/dayQuest.vue
@@ -12,6 +12,7 @@ import PlusIcon from "@/assets/icons/plus.svg?component";
 import InfoIcon from "@/assets/icons/info.svg?component";
 import RankingIcon from "@/assets/icons/ranking.svg?component";
 import DumbbellIcon from "@/assets/icons/dumbbell.svg?component";
+import CategoriesIcon from "@/assets/icons/categories.svg?component";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -32,12 +33,16 @@ import {
   getTaskDifficultyColor,
 } from "@/services/dayquest/taskState";
 import { cn } from "@/utils";
+import { DayQuestProgressBar } from "@/components/dayquest-progress-bar";
+import { getMeQueryOptions } from "@/services/user.service";
 
 const { data: categories } = useQuery({
   ...categoriesQuery,
   enabled: true,
 });
 
+const { data: user } = useQuery(getMeQueryOptions);
+
 console.log(categories);
 
 const { mutate: deleteTask } = useDeleteTaskMutation();
@@ -70,27 +75,41 @@ function handleOpenModal(
   <AppLayout>
     <section class="relative p-3 px-6 md:px-10">
       <div class="container flex w-auto flex-col gap-1">
-        <div class="flex flex-col gap-6">
+        <DayQuestProgressBar />
+        <div class="flex flex-col gap-6 mt-6">
           <div
-            class="flex justify-between items-center border-b border-blue-600 py-3"
+            class="flex justify-between items-center border-b-2 border-blue-400 py-3"
           >
             <h2 class="text-xl font-bold tracking-tight text-zinc-700">
               DayQuest
             </h2>
 
-            <Button
-              size="md"
-              @click="
-                () => {
-                  isOpenDayQuestDialog = true;
-                }
-              "
-              class="bg-blue-400 hover:bg-blue-600 p-2 rounded-full"
-              title="Create new category"
-              alt="Create new category"
-            >
-              <PlusIcon class="size-8 stroke-[3] text-white" />
-            </Button>
+            <div class="flex gap-3">
+              <div
+                class="flex gap-1 bg-blue-100 p-2 rounded-xl items-center"
+                title="Categories"
+              >
+                <CategoriesIcon
+                  class="size-5 stroke-[1.7] text-zinc-700 text-sm"
+                />
+                <span class="text-zinc-700 text-sm" v-if="user">
+                  {{ categories ? categories.length : 0 }} / 5
+                </span>
+              </div>
+              <Button
+                size="md"
+                @click="
+                  () => {
+                    isOpenDayQuestDialog = true;
+                  }
+                "
+                class="bg-blue-400 hover:bg-blue-600 p-2 rounded-full"
+                title="Create new category"
+                alt="Create new category"
+              >
+                <PlusIcon class="size-8 stroke-[3] text-white" />
+              </Button>
+            </div>
           </div>
 
           <div

diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
@@ -50,7 +50,7 @@ const router = createRouter({
 			path: '/admin',
 			children: [
 			{ 
-				path: 'dashboard',
+				path: 'users',
 				name: 'AdminUsersPage', 
 				component: () => import("../pages/admin/AdminUsersPageContent.vue") 
 				}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { default as DayQuestProgressBar } from "./DayQuestProgressBar.vue";