codescalersinternships · abdahmed22 · Aug 12, 2024 · Aug 12, 2024 · Aug 13, 2024 · Aug 14, 2024
diff --git a/client/index.html b/client/index.html
@@ -11,6 +11,7 @@
 <body>
     <div id="app"></div>
     <script type="module" src="/src/main.ts"></script>
+    <script src="/config.js"></script>
 </body>
 
 </html>
diff --git a/client/package.json b/client/package.json
@@ -12,7 +12,8 @@
     "core-js": "^3.37.1",
     "roboto-fontface": "*",
     "vue": "^3.4.31",
-    "vuetify": "^3.6.11"
+    "vuetify": "^3.6.11",
+    "vue3-notifier":"1.0.3"
   },
   "devDependencies": {
     "@babel/types": "^7.24.7",

diff --git a/client/public/config.js b/client/public/config.js
@@ -0,0 +1,3 @@
+window.env = {
+  SERVER_DOMAIN_NAME_API: 'http://127.0.0.1:8000/api',
+}
diff --git a/client/src/App.vue b/client/src/App.vue
@@ -1,11 +1,7 @@
 <template>
-  <v-app>
-    <v-main>
-      <router-view />
-    </v-main>
-  </v-app>
+  <ProjectForm />
 </template>
 
 <script lang="ts" setup>
-  //
+  import ProjectForm from './components/projects/ProjectForm.vue'
 </script>
diff --git a/client/src/api/axios.ts b/client/src/api/axios.ts
@@ -1,17 +1,15 @@
-import axios, { AxiosInstance } from 'axios';
-
-const AuthClient: AxiosInstance = axios.create({
-  baseURL: import.meta.env.VITE_APP_ENDPOINT, 
-  timeout: 1000,
-  headers: {
-    'Content-Type': 'application/json',
-    'Authorization': 'Bearer ' + localStorage.getItem("token"),
-  },
-});
-
-const BaseClient: AxiosInstance = axios.create({
-  baseURL: import.meta.env.VITE_APP_ENDPOINT,
-  timeout: 1000,
-});
-
-export { AuthClient, BaseClient };
+import axios, { AxiosInstance } from 'axios'
+
+export const AuthClient: AxiosInstance = axios.create({
+  baseURL: window.env.SERVER_DOMAIN_NAME_API,
+  timeout: 1000,
+  headers: {
+    'Content-Type': 'application/json',
+    Authorization: localStorage.getItem('token'),
+  },
+})
+
+export const BaseClient: AxiosInstance = axios.create({
+  baseURL: window.env.SERVER_DOMAIN_NAME_API,
+  timeout: 1000,
+})
diff --git a/client/src/api/projectService.ts b/client/src/api/projectService.ts
@@ -0,0 +1,18 @@
+import { AuthClient } from './axios'
+import { Project } from '@/types/types'
+
+export async function postProject (project :Partial<Project>) {
+  return AuthClient.post('/dashboard/projects/', project)
+}
+
+export async function getProjects (page :number) {
+  return AuthClient.get('/dashboard/projects/', {
+    params: {
+      page,
+    },
+  })
+}
+
+export async function searchProject (searchInput: string) {
+  await AuthClient.get(`/project/search/${searchInput}`)
+}
diff --git a/client/src/components.d.ts b/client/src/components.d.ts
@@ -7,10 +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']
+    ProjectForm: typeof import('./components/projects/ProjectForm.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
-    Test: typeof import('./components/test.vue')['default']
   }
 }
diff --git a/client/src/components/projects/ProjectForm.vue b/client/src/components/projects/ProjectForm.vue
@@ -0,0 +1,133 @@
+<template>
+  <v-form
+    ref="form"
+    fast-fail
+    @submit.prevent
+  >
+    <v-text-field
+      v-model="project.title"
+      base-color="blue"
+      clearable
+      color="blue"
+      label="Title"
+      required
+      :rules="titleRules"
+    />
+
+    <v-text-field
+      v-model="project.short_description"
+      base-color="blue"
+      clearable
+      color="blue"
+      label="Description"
+      required
+      :rules="descriptionRules"
+    />
+    <v-switch
+      v-model="githubRepo"
+      base-color="blue"
+      label="Github repository"
+    />
+
+    <v-text-field
+      v-if="githubRepo"
+      v-model="project.repo_link"
+      clearable
+      label="Git repository"
+      :rules="githubRepoRules"
+    />
+
+    <v-col class="text-right">
+      <v-btn
+        class="me-4"
+        color="blue"
+        :disabled="!form?.isValid || loading"
+        :loading="loading"
+        size="large"
+        text="Submit"
+        type="submit"
+        @click="createProject"
+      />
+    </v-col>
+  </v-form>
+</template>
+
+  <script lang="ts">
+  import { ref } from 'vue'
+  import { postProject } from '@/api/projectService'
+  import { Project } from '@/types/types'
+  import { descriptionRules, githubRepoRules, titleRules } from '@/utilities/validators'
+  import { useNotifier } from 'vue3-notifier'
+
+  export default {
+
+    name: 'ProjectForm',
+    setup () {
+      const notifier = useNotifier('top right')
+
+      const githubRepo = ref<boolean>(false)
+
+      const form = ref()
+
+      const loading = ref(false)
+
+      const project = ref<Partial<Project>>(
+        {
+          title: '',
+          short_description: '',
+          repo_link: '',
+        }
+      )
+
+      const createProject = async () => {
+        loading.value = true
+        let projectObject: Partial<Project> = {
+          title: project.value.title,
+          short_description: project.value.short_description,
+        }
+        if (project.value.repo_link !== '') {
+          projectObject = {
+            ...projectObject,
+            repo_link: project.value.repo_link,
+          }
+        }
+        postProject(projectObject)
+          .then((response: any) => {
+            notifier.notify({
+              title: 'Success',
+              description: response.data.message,
-              description: response.data.message,
+description: response.data.message || 'Project created Successfully',
-              description: response.data.message,
+description: response.data.message || 'Project created Successfully',
+              showProgressBar: true,
+              timeout: 7_000,
+              type: 'success',
+            })
+            loading.value = false
+          })
+          .catch((err: any) => {
+            let description = 'Can not create project'
-            let description = 'Can not create project'
+            let description = 'Unable to create a new project.'
-            let description = 'Can not create project'
+            let description = 'Unable to create a new project.'
+            if (err.response) {
+              description = err.response.data.detail
+            }
+            notifier.notify({
+              title: 'Fail',
+              description,
+              showProgressBar: true,
+              timeout: 7_000,
+              type: 'error',
+            })
+            loading.value = false
+          })
+      }
+
+      return {
+        form,
+        loading,
+        project,
+        githubRepo,
+        titleRules,
+        descriptionRules,
+        githubRepoRules,
+        createProject,
+      }
+    },
+  }
+  </script>
diff --git a/client/src/components/test.vue b/client/src/components/test.vue
diff --git a/client/src/index.ts b/client/src/index.ts
@@ -0,0 +1,9 @@
+export {}
+
+declare global {
+  interface Window {
+    env: {
+      SERVER_DOMAIN_NAME_API: string;
+    };
+  }
+}
diff --git a/client/src/layouts/README.md b/client/src/layouts/README.md
diff --git a/client/src/layouts/default.vue b/client/src/layouts/default.vue
diff --git a/client/src/main.ts b/client/src/main.ts
@@ -3,6 +3,8 @@
  *
  * Bootstraps Vuetify and other plugins then mounts the App`
  */
+// Styles
+import 'vue3-notifier/style.css'
 
 // Plugins
 import { registerPlugins } from '@/plugins'

diff --git a/client/src/pages/DashboardView.vue b/client/src/pages/DashboardView.vue
diff --git a/client/src/pages/projects/ProjectDetailsView.vue b/client/src/pages/projects/ProjectDetailsView.vue
@@ -0,0 +1,17 @@
+<template>
+  <p>To be implemented</p>
+</template>
+
+  <script lang="ts">
+
+  export default {
+
+    name: 'ProjectDetailsView',
+    components: {
+    },
+    setup () {
+      return {
+      }
+    },
+  }
+  </script>