linked url with goal modal (#157)

app/router.options.ts

@@ -0,0 +1,17 @@
+import type { RouterConfig } from '@nuxt/schema'
+
+export default {
+  routes: (_routes) => [
+    {
+      name: 'home',
+      path: '/',
+      component: async () => await import('~/pages/index.vue').then(r => r.default || r),
+      children: [
+        {
+          path: '/goal/:goalId',
+          component: async () => await import('~/pages/goal/[id].vue')
+        }
+      ]
+    }
+  ]
+} as RouterConfig

components/GoalFormModal.vue

@@ -12,7 +12,6 @@
             <v-icon icon="mdi-close" />
           </v-btn>
           <v-toolbar-title>Goal Form</v-toolbar-title>
-      <!-- <v-spacer></v-spacer> -->
         </v-toolbar>
         <GoalForm />
       </v-card>
@@ -29,14 +28,14 @@ export default {
     GoalForm,
   },
 
-  props: ["visible", "closeCreateGoalModal"],
+  props: ["visible", "closeGoalModal"],
   computed: {
     show: {
       get() {
         return this.visible;
       },
       set() {
-        this.closeCreateGoalModal();
+        this.closeGoalModal();
       },
     },
   },

components/GoalList.vue

@@ -14,33 +14,18 @@
           v-for="goalId in recentlyCreated.data"
           :key="goalId"
           :goal-id="goalId"
-          :openCreateGoalModal="openCreateGoalModal"
         />
       </tbody>
     </v-table>
-
-    <GoalFormModal
-      :visible="showCreateGoalModal"
-      :closeCreateGoalModal="closeCreateGoalModal"
-    />
   </v-container>
 </template>
 
 <script lang="ts" setup>
 import { useGoalsStore } from "~/store/goals";
 import { storeToRefs } from "pinia";
-import { ref } from "vue";
 
 const goalStore = useGoalsStore();
 const { recentlyCreated } = storeToRefs(goalStore);
-const showCreateGoalModal = ref(false);
-
-const openCreateGoalModal = (goalId: number) => {
-  showCreateGoalModal.value = true;
-};
-const closeCreateGoalModal = () => {
-  showCreateGoalModal.value = false;
-};
 </script>
 
 <style scoped></style>

components/GoalListTabEdit.vue

@@ -1,6 +1,8 @@
 <template>
   <tr v-if="goal">
-    <td @click="openCreateGoalModal(state.id)">{{ state.title }}</td>
+    <nuxt-link :to="`/goal/${props.goalId}`">
+      {{ state.title }}
+    </nuxt-link>
     <td>{{ state.status || "---" }}</td>
     <td>
       <v-menu v-model="state.assigneeMenu" location="bottom">
@@ -39,7 +41,7 @@ import { reactive, ref } from "vue";
 import { goalRepo } from "~/models/Goal";
 import { useGoalsStore } from "~/store/goals";
 import { useUsersStore } from "~/store/users";
-const props = defineProps(["goalId", "openCreateGoalModal"]);
+const props = defineProps(["goalId"]);
 
 const goalStore = useGoalsStore();
 const userStore = useUsersStore();

pages/goal/[id].vue

@@ -0,0 +1,15 @@
+<template>
+  <GoalFormModal
+    :visible="showCreateGoalModal"
+    :close-goal-modal="closeGoalModal"
+  />
+</template>
+
+<script setup lang="ts">
+const showCreateGoalModal = ref(true);
+const router = useRouter()
+const closeGoalModal = () => {
+  router.push('/')
+};
+
+</script>

pages/index.vue

@@ -2,6 +2,7 @@
   <v-container>
     <GoalTabPost />
     <GoalList />
+    <router-view />
   </v-container>
 </template>