fix : route params problem

client/src/App.vue

@@ -1,3 +1,12 @@
+<template>
+  <v-app>
+    <v-main>
+      <NavigationBar v-if="displayNavBar(routeStore.routeName)" />
+      <RouterView />
+    </v-main>
+  </v-app>
+</template>
+
 <script lang="ts">
   import { RouterView } from 'vue-router'
   import NavigationBar from '@/layouts/NavigationBar.vue'
@@ -26,12 +35,3 @@
   }
 
 </script>
-
-<template>
-  <v-app>
-    <v-main>
-      <NavigationBar v-if="displayNavBar(routeStore.routeName)" />
-      <RouterView />
-    </v-main>
-  </v-app>
-</template>

client/src/components.d.ts

@@ -10,6 +10,7 @@ declare module 'vue' {
     AppFooter: typeof import('./components/AppFooter.vue')['default']
     CustomNotification: typeof import('./components/notifier/CustomNotification.vue')['default']
     HelloWorld: typeof import('./components/HelloWorld.vue')['default']
+    MemberForm: typeof import('./components/members/MemberForm.vue')['default']
     NavigationBar: typeof import('./components/NavigationBar.vue')['default']
     ProfileInformationForm: typeof import('./components/settings/ProfileInformationForm.vue')['default']
     ProjectForm: typeof import('./components/projects/ProjectForm.vue')['default']

client/src/components/members/MemberForm.vue

@@ -0,0 +1,18 @@
+<template>
+  <v-card class="pa-2">
+    Hello! member form
+  </v-card>
+</template>
+
+  <script lang="ts">
+
+  export default {
+
+    name: 'MemberForm',
+    setup () {
+      return {
+
+      }
+    },
+  }
+  </script>

client/src/components/test-plans/TestPlanForm.vue

@@ -0,0 +1,18 @@
+<template>
+  <v-card class="pa-2">
+    Hello! test plan form
+  </v-card>
+</template>
+
+  <script lang="ts">
+
+  export default {
+
+    name: 'TestPlanForm',
+    setup () {
+      return {
+
+      }
+    },
+  }
+  </script>

client/src/components/test-requirements/TestRequirementForm.vue

@@ -0,0 +1,18 @@
+<template>
+  <v-card class="pa-2">
+    Hello! test requirementform
+  </v-card>
+</template>
+
+  <script lang="ts">
+
+  export default {
+
+    name: 'TestRequirementForm',
+    setup () {
+      return {
+
+      }
+    },
+  }
+  </script>

client/src/components/test-runs/TestRunForm.vue

@@ -0,0 +1,18 @@
+<template>
+  <v-card class="pa-2">
+    Hello! test run form
+  </v-card>
+</template>
+
+  <script lang="ts">
+
+  export default {
+
+    name: 'TestRunForm',
+    setup () {
+      return {
+
+      }
+    },
+  }
+  </script>

client/src/components/test-suites/TestSuiteForm.vue

@@ -0,0 +1,18 @@
+<template>
+  <v-card class="pa-2">
+    Hello! test suite form
+  </v-card>
+</template>
+
+  <script lang="ts">
+
+  export default {
+
+    name: 'TestSuiteForm',
+    setup () {
+      return {
+
+      }
+    },
+  }
+  </script>

client/src/layouts/NavigationBar.vue

@@ -19,7 +19,7 @@
           v-for="(item,index) in mainRoutes"
           :key="index"
           class="mx-5 text-blue bg-white pa-3 rounded-lg font-weight-black"
-          :to="{ name: item.routeName}"
+          :to="{ name: item.routeName }"
         >
           {{ item.displayName }}
         </RouterLink>
@@ -81,7 +81,6 @@
           </v-list-item>
         </v-list>
       </v-menu>
-      <h1>{{ routeStore.routeName }}</h1>
     </div>
 
   </v-app-bar>
@@ -96,15 +95,24 @@
   import TestRequirementForm from '@/components/test-requirements/TestRequirementForm.vue'
   import TestSuiteForm from '@/components/test-suites/TestSuiteForm.vue'
   import TestRunForm from '@/components/test-runs/TestRunForm.vue'
+  import MemberForm from '@/components/members/MemberForm.vue'
 
   type AppRoute = {
     displayName: string,
     routeName: string,
   }
 
   export default {
-
     name: 'NavigationBar',
+
+    components: {
+      ProjectForm,
+      MemberForm,
+      TestPlanForm,
+      TestRequirementForm,
+      TestRunForm,
+      TestSuiteForm,
+    },
     setup () {
       const routeStore = useCurrentRouteStore()
 
@@ -224,19 +232,19 @@
           return [
             {
               displayName: 'New Test Plan',
-              routeName: 'testPlan',
+              component: TestPlanForm,
             },
             {
               displayName: 'New Requirement',
-              routeName: 'testRequirement',
+              component: TestRequirementForm,
             },
             {
               displayName: 'New Test Suite',
-              routeName: 'testSuite',
+              component: TestSuiteForm,
             },
             {
               displayName: 'New Test Run',
-              routeName: 'testRun',
+              component: TestRunForm,
             },
           ]
         } else if (routeName === 'testPlans') {

client/src/pages/dashboard/DashboardView.vue

@@ -11,6 +11,7 @@
     },
     setup () {
       return {
+
       }
     },
   }

client/src/pages/test-requirements/TestRequirementDetailsView.vue

@@ -0,0 +1,16 @@
+<template>
+  <v-card class="pa-2" />
+</template>
+
+  <script lang="ts">
+
+  export default {
+
+    name: 'TestRequirementDetailsView',
+    setup () {
+      return {
+
+      }
+    },
+  }
+  </script>

client/src/pages/test-requirements/TestRequirementsView.vue

@@ -0,0 +1,16 @@
+<template>
+  <v-card class="pa-2" />
+</template>
+
+  <script lang="ts">
+
+  export default {
+
+    name: 'TestRequirementsView',
+    setup () {
+      return {
+
+      }
+    },
+  }
+  </script>

client/src/router/index.ts

@@ -23,15 +23,15 @@ const router = createRouter({
     { path: '/login', name: 'login', component: () => import('@/pages/authorization/LoginView.vue') },
     { path: '/logout', name: 'logout', component: () => import('@/pages/authorization/LogoutView.vue') },
     // project routes
-    { path: '/projects/:project-id', name: 'projectDetails', component: () => import('@/pages/projects/ProjectDetailsView.vue'), props: { 'project-id': Number } },
-    { path: '/projects/:project-id/test-plan', name: 'testPlans', component: () => import('@/pages/test-plans/TestPlansView.vue'), props: { 'project-id': Number } },
-    { path: '/projects/:project-id/requirement', name: 'testRequirements', component: () => import('@/pages/test-requirements/TestRequirementsView.vue'), props: { 'project-id': Number } },
-    { path: '/projects/:project-id/test-suite', name: 'testSuites', component: () => import('@/pages/test-suites/TestSuitesView.vue'), props: { 'project-id': Number } },
-    { path: '/projects/:project-id/test-run', name: 'testRuns', component: () => import('@/pages/test-runs/TestRunsView.vue'), props: { 'project-id': Number } },
-    { path: '/projects/:project-id/test-plan/:id', name: 'testPlan', component: () => import('@/pages/test-plans/TestPlanDetailsView.vue'), props: { 'project-id': Number, 'test-plan-id': Number } },
-    { path: '/projects/:project-id/requirement/:id', name: 'testRequirement', component: () => import('@/pages/test-requirements/TestRequirementDetailsView.vue'), props: { 'project-id': Number, 'test-requirement-id': Number } },
-    { path: '/projects/:project-id/test-suite/:id', name: 'testSuite', component: () => import('@/pages/test-suites/TestSuiteDetailsView.vue'), props: { 'project-id': Number, 'test-suite-id': Number } },
-    { path: '/projects/:project-id/test-run/:test-run-id', name: 'testRun', component: () => import('@/pages/test-runs/TestRunDetailsView.vue'), props: { 'project-id': Number, 'test-run-id': Number } },
+    { path: `/projects/:projectId`, name: 'projectDetails', component: () => import('@/pages/projects/ProjectDetailsView.vue'), props: true },
+    { path: '/projects/:projectId/test-plan', name: 'testPlans', component: () => import('@/pages/test-plans/TestPlansView.vue'), props: true },
+    { path: '/projects/:projectId/requirement', name: 'testRequirements', component: () => import('@/pages/test-requirements/TestRequirementsView.vue'), props: true },
+    { path: '/projects/:projectId/test-suite', name: 'testSuites', component: () => import('@/pages/test-suites/TestSuitesView.vue'), props: true },
+    { path: '/projects/:projectId/test-run', name: 'testRuns', component: () => import('@/pages/test-runs/TestRunsView.vue'), props: true },
+    { path: '/projects/:projectId/test-plan/:testPlanId', name: 'testPlan', component: () => import('@/pages/test-plans/TestPlanDetailsView.vue'), props: true },
+    { path: '/projects/:projectId/requirement/:testRequirementId', name: 'testRequirement', component: () => import('@/pages/test-requirements/TestRequirementDetailsView.vue'), props: true },
+    { path: '/projects/:projectId/test-suite/:testSuiteId', name: 'testSuite', component: () => import('@/pages/test-suites/TestSuiteDetailsView.vue'), props: true },
+    { path: '/projects/:projectId/test-run/:testRunId', name: 'testRun', component: () => import('@/pages/test-runs/TestRunDetailsView.vue'), props: true },
   ],
 })