Add test plan

client/package.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "@mdi/font": "7.4.47",
+    "axios": "^1.7.3",
     "core-js": "^3.37.1",
     "roboto-fontface": "*",
     "vue": "^3.4.31",

client/src/api/axios.ts

@@ -14,4 +14,43 @@ const BaseClient: AxiosInstance = axios.create({
   timeout: 1000,
 });
 
-export { AuthClient, BaseClient };
+
+async function GetPlans(projectId:any){
+  await AuthClient.get(`/test_plan/${projectId}/`)
+  .then(response=>{
+    return response.data
+  })
+  .catch(error=>{
+    return error
+  })
+}
+
+async function SearchPlans(project_id:any,key_word:any){
+  await AuthClient.post(`/test_plan/${project_id}/search/${key_word}/`)
+  .then(response=>{
+    return response.data
+  })
+  .catch(error=>{
+    return error
+  })
+}
+
+async function DeletePlan(project_id:any,test_plan_id:any) {
+  await AuthClient.delete(`/test_plan/${project_id}/actions/${test_plan_id}/`)
+  .then(response=>{
+  })
+  .catch(error=>{
+    return error
+  })
+}
+
+async function UpdatePlanTitle(project_id:any,test_plan_id:any,title:any) {
+  await AuthClient.put(`/test_plan/${project_id}/${test_plan_id}/update/`,title)
+  .then(response=>{
+  })
+  .catch(error=>{
+    return error
+  })
+}
+
+export default{ AuthClient, BaseClient,GetPlans,SearchPlans,DeletePlan,UpdatePlanTitle };

client/src/components.d.ts

@@ -7,8 +7,7 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
-    AppFooter: typeof import('./components/AppFooter.vue')['default']
-    HelloWorld: typeof import('./components/HelloWorld.vue')['default']
+    NewPlan: typeof import('./components/NewPlan.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     Test: typeof import('./components/test.vue')['default']

client/src/components/NewPlan.vue

@@ -0,0 +1,60 @@
+<template>
+    <div class="text-center pa-4">
+        <!-- this is just to be replaced later on with the + button on click , it opens the dialog.. -->
+        <v-btn @click="dialog = true">
+            Open Dialog
+        </v-btn>
+
+        <v-dialog v-model="dialog" max-width="600px">
+        <v-card >
+            <v-card-title>New Test Plan</v-card-title>
+            <v-divider></v-divider>
+            <br>
+            <v-card-subtitle>
+            <div>
+                <strong>Title</strong>
+                <v-text-field v-model="details.title" placeholder="Enter title "></v-text-field>
+            </div>
+            <div>
+                <v-radio-group v-model="details.type">
+                <v-radio label="Create With Default Templates" value="template"></v-radio>
+                <v-radio label="Create With Custom Templates" value="blank" ></v-radio>
+                </v-radio-group>
+            </div>
+            </v-card-subtitle>
+            <v-divider></v-divider>
+            <v-card-actions>
+            <v-btn color="primary" @click="dialog = false">Close</v-btn>
+            <v-btn color="success" @click="createTestPlan">Create</v-btn>
+            </v-card-actions>
+        </v-card>
+        </v-dialog>
+    </div>
+</template>
+
+<script>
+import axios from '@/api/axios';
+export default{
+    setup(){
+        let dialog=ref(false);
+        const details = ref({
+        title: '',
+        type: null,
+        });
+
+        const createTestPlan=async()=>{
+            try{
+                await axios.CreateNewTestPlan(details.value,projectId);
+            } catch(error){
+                console.error(error);
+            }
+        }
+        return{
+            dialog,
+            createTestPlan,
+            details
+        }
+
+    }
+}
+</script>