Add Test Suite

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 CreateNewTestSuite(testSuiteDetails: any, project_id:any){
+  await AuthClient.post(`/test_suites/${project_id}/`)
+  .then(response=>{
+  })
+  .catch(error=>{
+    return error
+  })
+}
+async function GetTestSuites(project_id:any){
+  await AuthClient.get(`/test_suites/${project_id}/`)
+  .then(response=>{
+    return response.data
+  })
+  .catch(error=>{
+    return error
+  })
+}
+
+async function SearchSuite(project_id:any,key_word:any){
+  await AuthClient.get(`/test_suites/${project_id}/search/${key_word}/`)
+  .then(response=>{
+    return response.data
+  })
+  .catch(error=>{
+    return error
+  })
+}
+
+export default{ AuthClient, BaseClient,GetPlans, CreateNewTestSuite, GetTestSuites,SearchSuite };

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']
+    NewTestSuite: typeof import('./components/NewTestSuite.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     Test: typeof import('./components/test.vue')['default']

client/src/components/NewTestSuite.vue

@@ -0,0 +1,78 @@
+<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 Suite</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>
+                <strong>Test Plan</strong>
+                <v-select v-model="details.test_plan" :items="plans" label="Select Plan"></v-select>
+            </div>
+            </v-card-subtitle>
+            <v-divider></v-divider>
+            <v-card-actions>
+            <v-btn color="info" @click="dialog = false">Close</v-btn>
+            <v-btn color="success" @click="createTestSuite">Create</v-btn>
+            </v-card-actions>
+        </v-card>
+        </v-dialog>
+    </div>
+</template>
+
+<script>
+import axios from '@/api/axios';
+import { onMounted } from 'vue';
+
+
+export default{
+    setup(){
+        let dialog=ref(false);
+        const details = ref({
+        title: '',
+        test_plan: null,
+        });
+
+        const plans = ref([]);
+
+        //from where to get the project id???
+        const fetchPlans = async () => {
+            try {
+            plans.value = await axios.GetPlans(projectId);
+            } catch (error) {
+            console.error(error);
+            }
+        };
+
+        const createTestSuite=async()=>{
+            try{
+                await axios.CreateNewTestSuite(details,projectId);
+            } catch(error){
+                console.error(error);
+            }
+        }
+
+        onMounted(() => {
+        fetchPlans();
+        });
+
+        return {
+        dialog,
+        details,
+        plans,
+        createTestSuite,
+        fetchPlans,
+        };
+    }
+}
+</script>