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

@@ -1,17 +1,54 @@
-import axios, { AxiosInstance } from 'axios';
+import axios, { AxiosInstance } from 'axios'
 
 const AuthClient: AxiosInstance = axios.create({
-  baseURL: import.meta.env.VITE_APP_ENDPOINT, 
+  baseURL: 'https://server.gent02.dev.grid.tf/api',
   timeout: 1000,
   headers: {
     'Content-Type': 'application/json',
-    'Authorization': 'Bearer ' + localStorage.getItem("token"),
+    Authorization: 'Bearer ' + localStorage.getItem('token'),
   },
-});
+})
 
 const BaseClient: AxiosInstance = axios.create({
-  baseURL: import.meta.env.VITE_APP_ENDPOINT,
+  baseURL: 'https://server.gent02.dev.grid.tf/api',
   timeout: 1000,
-});
+})
 
-export { AuthClient, BaseClient };
+async function GetPlans (projectId:string) {
+  try {
+    localStorage.setItem('token', 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNzIzNzI0Njg5LCJpYXQiOjE3MjM3MTUzODksImp0aSI6IjlmNTU1NmY0MjQzZTRjMmI5OWZmZTcxYjFkNWQxYmJiIiwidXNlcl9pZCI6MSwiZW1haWwiOiJuYWJpbGFAZ21haWwuY29tIn0.OUIvvLV5sgtyVQM_PtLu4HsqJaeOLC5FIx7w39VZ7js')
+    await AuthClient.get(`/test_plan/${projectId}`)
+  } catch (error) {
+    console.error(error)
+    throw error
+  }
+}
+
+async function SearchPlans (projectId:any, keyWord:any) {
+  try {
+    return await AuthClient.post(`/test_plan/${projectId}/search/${keyWord}/`)
+  } catch (error) {
+    console.error(error)
+    throw error
+  }
+}
+
+async function DeletePlan (projectId:any, testPlanId:any) {
+  try {
+    await AuthClient.delete(`/test_plan/${projectId}/actions/${testPlanId}/`)
+  } catch (error) {
+    console.error(error)
+    throw error
+  }
+}
+
+async function UpdatePlanTitle (projectId:any, testPlanId:any, title:any) {
+  try {
+    await AuthClient.put(`/test_plan/${projectId}/${testPlanId}/update/`, title)
+  } catch (error) {
+    console.error(error)
+    throw error
+  }
+}
+
+export default { AuthClient, BaseClient, GetPlans, SearchPlans, DeletePlan, UpdatePlanTitle }

client/src/components.d.ts

@@ -7,8 +7,8 @@ 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']
+    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/NewPlan.vue

@@ -0,0 +1,83 @@
+<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 />
+        <br>
+        <v-card-subtitle>
+          <!-- <strong>Title</strong> -->
+          <v-text-field v-model="details.title" density="compact" placeholder="Title" variant="outlined" />
+          <div>
+            <v-radio-group v-model="details.type">
+              <v-radio label="Create With Default Templates" value="template" />
+              <v-radio label="Create With Custom Templates" value="blank" />
+            </v-radio-group>
+          </div>
+        </v-card-subtitle>
+        <v-divider />
+        <v-card-actions>
+          <v-btn class="text-white" style="background-color: #37ADE3;" @click="dialog = false">Close</v-btn>
+          <v-btn
+            class="text-white"
+            :disabled="loading"
+            :loading="loading"
+            style="background-color: #43A047;"
+            @click="createTestPlan"
+          >Create</v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </div>
+</template>
+
+<script>
+  import axios from '@/api/axios'
+  export default {
+    setup () {
+      const dialog = ref(false)
+      const details = ref({
+        title: '',
+        type: null,
+      })
+
+      const loading = ref(false)
+
+      const createTestPlan = async () => {
+        loading.value = true
+        try {
+          await axios.CreateNewTestPlan(details.value, projectId)
+          notifier.notify({
+            title: 'Success',
+            description: 'plan created successfully',
+            showProgressBar: true,
+            timeout: 7_000,
+            type: 'success',
+          })
+        } catch (error) {
+          console.error(error)
+          notifier.notify({
+            title: 'Fail',
+            description: 'Failed to create plan',
+            showProgressBar: true,
+            timeout: 7_000,
+            type: 'error',
+          })
+        } finally {
+          loading.value = false
+        }
+      }
+      return {
+        dialog,
+        createTestPlan,
+        details,
+        loading,
+      }
+    },
+  }
+</script>