Merge pull request #5 from HamoonZamiri/dev

feat: add ability to edit goal categories

.github/workflows/tests.yml

@@ -1,8 +1,6 @@
 name: All tests action
-run-name: test containers running on GitHub Actions
+run-name: Test containers running on GitHub Actions
 on:
-  push:
-    branches: [main]
   pull_request:
     branches: [main]
 jobs:

frontend/src/App.vue

@@ -10,8 +10,8 @@ function handleLogout(e: MouseEvent) {
 </script>
 
 <template>
-  <div class="bg-gray-900 w-[100vw] h-[100vh]">
-    <header class="bg-gray-800 mb-2">
+  <div class="bg-gray-900 h-screen w-screen flex flex-col">
+    <header class="bg-gray-800 mb-2 h-auto">
       <div class="flex text-gray-200 justify-between p-6">
         <RouterLink to="/">
           <h1 class="font-semibold text-3xl hover:text-gray-300">Goalify</h1>
@@ -33,6 +33,6 @@ function handleLogout(e: MouseEvent) {
         </nav>
       </div>
     </header>
-    <main><RouterView /></main>
+    <div class="w-full h-full"><RouterView /></div>
   </div>
 </template>

frontend/src/components/Home.vue

@@ -30,10 +30,16 @@ onMounted(async () => {
   </div>
   <div
     v-else
-    class="flex flex-col bg-gray-900 items-center sm:items-start px-6 w-auto"
+    class="flex flex-col h-full bg-gray-900 items-center sm:items-start px-6 w-full overflow-hidden"
   >
-    <section class="flex-col sm:flex-row flex gap-4 w-full">
-      <div class="w-full sm:w-1/3" v-for="cat in goalState.categories">
+    <section
+      class="flex-col flex-grow sm:flex-row flex gap-4 w-full overflow-x-auto"
+    >
+      <div
+        class="w-full sm:w-1/3 flex-shrink-0"
+        v-for="cat in goalState.categories"
+        key="cat.id"
+      >
         <GoalCategoryCard :goalCategory="cat" />
       </div>
       <ModalForm

frontend/src/components/goals/GoalCard.vue

@@ -125,7 +125,7 @@ const statusMap = { not_complete: "Not Complete", complete: "Complete" };
                     :value="status.value"
                     :disabled="status.value === updates.status"
                     :class="{
-                      'w-56 h-8 bg-gray-300 text-gray-600 text-center hover:bg-gray-400': true,
+                      'w-56 hover:cursor-pointer h-8 bg-gray-300 text-gray-600 text-center hover:bg-gray-400': true,
                       hidden: updates.status === status.value,
                     }"
                   >

frontend/src/components/goals/GoalCategoryCard.vue

@@ -7,6 +7,7 @@ import CreateGoalButton from "./CreateGoalButton.vue";
 import { Menu, MenuButton, MenuItems, MenuItem } from "@headlessui/vue";
 import { ApiClient } from "@/utils/api";
 import goalState from "@/state/goals";
+import { watch, watchEffect } from "vue";
 const props = defineProps<{
   goalCategory: GoalCategory;
 }>();
@@ -18,13 +19,23 @@ async function handleDeleteCategory(e: MouseEvent) {
   // remove category from state
   goalState.deleteCategory(props.goalCategory.id);
 }
+
+watch(props.goalCategory, async (category) => {
+  if (!category.title) {
+    return;
+  }
+  await ApiClient.updateCategory(props.goalCategory.id, {
+    title: category.title,
+  });
+});
 </script>
 <template>
   <div class="flex flex-col">
     <header class="flex justify-between">
-      <span class="text-xl text-gray-200 pb-2">{{
-        props.goalCategory.title
-      }}</span>
+      <input
+        v-model="props.goalCategory.title"
+        class="w-full text-gray-200 bg-gray-900 pb-2 text-xl focus:outline-none"
+      />
       <div class="flex">
         <ModalForm
           :FormComponent="CreateGoalForm"
@@ -49,7 +60,7 @@ async function handleDeleteCategory(e: MouseEvent) {
             </svg>
           </MenuButton>
           <MenuItems
-            class="absolute flex flex-col items-start w-56 bg-gray-300 p-1 rounded-md"
+            class="absolute flex flex-col items-start w-56 bg-gray-300 p-1 rounded-md justify-self-start"
           >
             <MenuItem
               as="button"
@@ -101,7 +112,7 @@ async function handleDeleteCategory(e: MouseEvent) {
         </Menu>
       </div>
     </header>
-    <div class="mb-4 w-full" v-for="goal in goalCategory.goals">
+    <div class="w-full flex flex-col gap-2" v-for="goal in goalCategory.goals">
       <GoalCard :goal="goal" />
     </div>
   </div>

frontend/src/utils/api.ts

@@ -68,7 +68,7 @@ async function zodFetch<T>(
         Authorization: `Bearer ${authState.user?.access_token}`,
       },
     });
-    router.push(RouteNames.HOME);
+    router.push({ name: RouteNames.HOME });
   }
   if (!res.ok) {
     const error = json as ErrorResponse;
@@ -180,6 +180,23 @@ async function deleteCategory(categoryId: string): Promise<void> {
   }
 }
 
+async function updateCategory(
+  categoryId: string,
+  updates: Partial<GoalCategory>,
+) {
+  const res = await fetch(`${API_BASE}/goals/categories/${categoryId}`, {
+    method: http.MethodPut,
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${authState.user?.access_token}`,
+    },
+    body: JSON.stringify(updates),
+  });
+  if (!res.ok) {
+    throw new Error("Failed to update category");
+  }
+}
+
 // async function deleteGoal(goalId: string)
 
 export const ApiClient = {
@@ -191,5 +208,6 @@ export const ApiClient = {
   updateGoal,
   deleteGoal,
   deleteCategory,
+  updateCategory,
   isError,
 } as const;