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,14 @@
 <template>
   <v-app>
     <v-main>
-      <router-view />
+      <ProjectsView />
     </v-main>
   </v-app>
 </template>
 
 <script lang="ts" setup>
+  import ProjectForm from './components/projects/ProjectForm.vue'
+  import ProjectsView from './pages/projects/ProjectsView.vue'
+
   //
 </script>
diff --git a/client/src/api/axios.ts b/client/src/api/axios.ts
diff --git a/client/src/api/userservice.ts b/client/src/api/userservice.ts
@@ -0,0 +1,34 @@
+import axios, { AxiosInstance } from 'axios'
+import { Project } from '@/types/types'
+
+const AuthClient: AxiosInstance = axios.create({
+  baseURL: window.env.SERVER_DOMAIN_NAME_API,
+  timeout: 1000,
+  headers: {
+    'Content-Type': 'application/json',
+    Authorization: 'Bearer ' + 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNzIzOTk0NzQ5LCJpYXQiOjE3MjM5ODU0NDksImp0aSI6ImRjMWRjMDU1ZTgzZjQ0NGQ4NDU1NTAwMGMyNDUwMTJhIiwidXNlcl9pZCI6NCwiZW1haWwiOiJib3VkaWVAYm91ZGllLmNvbSJ9.OgeODfFg5GxP1QxAAyu2FFlOMx2suAdWvjBtkK5eT0U',
+  },
+})
+
+const BaseClient: AxiosInstance = axios.create({
+  baseURL: window.env.SERVER_DOMAIN_NAME_API,
+  timeout: 1000,
+})
+
+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: {
+      cursor: page,
+    },
+  })
+}
+
+export async function searchProject (searchInput: string) {
+  await AuthClient.get(`/project/search/${searchInput}`)
+}
+
+export { AuthClient, BaseClient }
diff --git a/client/src/components.d.ts b/client/src/components.d.ts
@@ -9,6 +9,7 @@ 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,122 @@
+<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-btn
+      block
+      class="me-4"
+      color="blue"
+      :disabled="!form?.isValid"
+      text="Submit"
+      type="submit"
+      variant="tonal"
+      @click="createProject"
+    />
+  </v-form>
+</template>
+
+  <script lang="ts">
+  import { ref } from 'vue'
+  import { postProject } from '@/api/userservice'
+  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 project = ref<Partial<Project>>(
+        {
+          title: '',
+          short_description: '',
+          repo_link: '',
+        }
+      )
+
+      const createProject = async () => {
+        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: 'Project created Successfully',
+              showProgressBar: true,
+              timeout: 7_000,
+              type: 'success',
+            })
+          })
+          .catch((err: any) => {
+            notifier.notify({
+              title: 'Fail',
+              description: 'Can not create project',
+              showProgressBar: true,
+              timeout: 7_000,
+              type: 'error',
+            })
+            console.error(err)
+          })
+      }
+
+      return {
+        form,
+        project,
+        githubRepo,
+        titleRules,
+        descriptionRules,
+        githubRepoRules,
+        createProject,
+      }
+    },
+  }
+  </script>
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/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/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>