Merge pull request #2 from VikingEngineers/YuryTest

Yury test

src/router/index.js

@@ -23,6 +23,9 @@ import ElDropdowns from "../layouts/sections/elements/dropdowns/DropdownsView.vu
 import ElProgressBars from "../layouts/sections/elements/progress-bars/ProgressBarsView.vue";
 import ElToggles from "../layouts/sections/elements/toggles/TogglesView.vue";
 import ElTypography from "../layouts/sections/elements/typography/TypographyView.vue";
+import Project from "../views/LandingPages/Project/Project.vue";
+
+
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
@@ -31,6 +34,12 @@ const router = createRouter({
       name: "presentation",
       component: PresentationView,
     },
+    {
+      path: '/project/:id',
+      name: 'project',
+      component: Project
+    },
+
     {
       path: "/pages/landing-pages/about-us",
       name: "about",

src/views/LandingPages/Project/Project.vue

@@ -0,0 +1,56 @@
+<script setup>
+import axios from 'axios';
+import { onMounted, ref } from "vue";
+import { useRoute } from "vue-router";
+
+
+const projectId = ref(null);
+const route = useRoute();
+const projectData = ref([]);
+
+onMounted(async() => {
+    projectId.value = route.params.id;
+    await getProject();
+});
+
+
+const getProject = async () => {
+    try {
+        const projectDataRecieved = await axios.get(`http://somebodyhire.me/api/projects/${projectId.value}/`);
+        projectData.value = projectDataRecieved.data;
+    } catch (error) {
+        console.error('There was an error fetching the project data', error);
+    }
+};
+
+
+
+
+</script>
+
+
+<template>
+    <div v-if="projectData">
+      <h1>Проект номер: {{ projectData.id }}</h1>
+      <h2>{{ projectData.title }}</h2>
+      <p>{{ projectData.description }}</p>
+      <img :src="projectData.featured_image" alt="Featured image">
+      <p v-if="projectData.demo_link">Demo Link: <a :href="projectData.demo_link">{{ projectData.demo_link }}</a></p>
+      <p v-if="projectData.source_link">Source Link: <a :href="projectData.source_link">{{ projectData.source_link }}</a></p>
+      <p>Total Votes: {{ projectData.vote_total }}</p>
+      <p>Vote Ratio: {{ projectData.vote_ratio }}</p>
+      <p>Created On: {{ new Date(projectData.created).toLocaleDateString() }}</p>
+      <p>Owner ID: {{ projectData.owner }}</p>
+      <p>Tags: 
+        <span v-for="(tag, index) in projectData.tags" :key="index">
+          {{ tag }}<span v-if="index < projectData.tags.length - 1">, </span>
+        </span>
+      </p>
+    </div>
+  </template> 
+
+
+
+<style scoped>
+</style>
+  

src/views/Presentation/PresentationView.vue

@@ -21,19 +21,10 @@ import NavbarDefault from "../..//examples/navbars/NavbarDefault.vue";
 import DefaultFooter from "../../examples/footers/FooterDefault.vue";
 import Header from "../../examples/Header.vue";
 
-
-
-//Vue Material Kit 2 components
-import MaterialInput from "@/components/MaterialInput.vue";
-
 // sections
 import PresentationCounter from "./Sections/PresentationCounter.vue";
-import PresentationPages from "./Sections/PresentationPages.vue";
+import PresentationSearch from "./Sections/PresentationSearch.vue";
-import PresentationExample from "./Sections/PresentationExample.vue";
+
-import data from "./Sections/Data/designBlocksData";
-import BuiltByDevelopers from "./Components/BuiltByDevelopers.vue";
-import PresentationTestimonials from "./Sections/PresentationTestimonials.vue";
-import PresentationInformation from "./Sections/PresentationInformation.vue";
 
 //images
 import vueMkHeader from "@/assets/img/space-background.jpg";
@@ -101,253 +92,26 @@ export default {
             </p>
           </div>
         </div>
-
+        <div>
-        <div class="container">
+          <PresentationSearch />
-      <div class="row justify-space-between py-2">
+          
-        <div class="col-lg-4 mx-auto">
+  </div>
-          <MaterialInput
+  </div>
-            class="input-group-dynamic mb-4"
+</div>
-            icon="search"
+</Header>
-            type="text"
-            placeholder="Поиск по проектам или людям"
-          />
-        </div>
-      </div>
-    </div>
-      </div>
-        
-    </div>
-  </Header>
 
 
 
-
+<div class="card card-body blur shadow-blur mx-3 mx-md-4 mt-n6">
-  <div class="card card-body blur shadow-blur mx-3 mx-md-4 mt-n6">
     <PresentationCounter />
     <div class="project-container">
     <div class="project-card" v-for="project in projects" :key="project.id">
       <h3>{{ project.title }}</h3>
       <p>{{ project.description }}</p>
     </div>
+  </div>   
   </div>
 
-  </div>
-<!-- 
-    <div class="container">
-      <div class="row">
-        <div class="col-lg-4">
-          <FilledInfoCard
-            class="p-4"
-            :color="{ text: 'white', background: 'bg-gradient-success' }"
-            :icon="{ component: 'flag', color: 'white' }"
-            title="Getting Started"
-            description="Check the possible ways of working with our product and the necessary files for building your own project."
-            :action="{
-              route:
-                'https://www.creative-tim.com/learning-lab/vue/overview/material-kit/',
-              label: { text: 'Let\'s start', color: 'white' }
-            }"
-          />
-        </div>
-        <div class="col-lg-4">
-          <FilledInfoCard
-            class="px-lg-1 mt-lg-0 mt-4 p-4"
-            height="h-100"
-            :icon="{ component: 'precision_manufacturing', color: 'success' }"
-            title="Plugins"
-            description="Get inspiration and have an overview about the plugins that we
-                used to create the Material Kit."
-            :action="{
-              route:
-                'https://www.creative-tim.com/learning-lab/vue/input/material-kit/',
-              label: { text: 'Read more' }
-            }"
-          />
-        </div>
-        <div class="col-lg-4">
-          <FilledInfoCard
-            class="px-lg-1 mt-lg-0 mt-4 p-4"
-            :icon="{ component: 'receipt_long', color: 'success' }"
-            title="Utility Classes"
-            description="Material Kit is giving you a lot of pre-made elements. For those
-                who want flexibility, we included many utility classes."
-            :action="{
-              route:
-                'https://www.creative-tim.com/learning-lab/vue/utilities/material-kit/',
-              label: { text: 'Read more' }
-            }"
-          />
-        </div>
-      </div>
-    </div>
-    <PresentationTestimonials />
-
-    <div
-      class="container-fluid mt-sm-5 border-radius-xl"
-      :style="{
-        background: 'linear-gradient(195deg, rgb(66, 66, 74), rgb(25, 25, 25))'
-      }"
-    >
-      <div
-        class="page-header py-6 py-md-5 my-sm-3 mb-3 border-radius-xl"
-        :style="{
-          backgroundImage: `url(${wavesWhite})`
-        }"
-        loading="lazy"
-      >
-        <span class="mask bg-gradient-dark"></span>
-        <div class="container">
-          <div class="row">
-            <div class="d-flex justify-content-center p-5">
-              <div class="col-lg-8 ms-lg-5 text-center">
-                <h3 class="text-white">
-                  Do you love this awesome UI Kit from Vuejs & Bootstrap?
-                </h3>
-                <p class="text-white text-md">
-                  Cause if you do, it can be yours for FREE. Hit the button
-                  below to navigate to Creative Tim where you can <br />
-                  find the Design System in HTML. Start a new project or give an
-                  old Bootstrap project a new look!
-                </p>
-
-                <a
-                  href="https://www.creative-tim.com/product/vue-material-kit"
-                  class="btn btn-sm mb-0 bg-gradient-success px-5 py-3 mt-4"
-                  >Download Now</a
-                >
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div class="container">
-      <div class="row">
-        <div class="d-flex flex-column w-100 text-center p-5 mb-8">
-          <h3>Available on these technologies</h3>
-          <div class="d-flex justify-content-center mt-3 flex-wrap">
-            <a
-              href="https://www.creative-tim.com/product/material-kit"
-              data-bs-toggle="tooltip"
-              data-bs-placement="bottom"
-              title="Bootstrap 5 - Most popular front-end component library"
-            >
-              <img
-                :src="logoBootstrap"
-                alt="title"
-                loading="lazy"
-                :style="{ height: '90px' }"
-              />
-            </a>
-            <a
-              class="opacity-5 ms-3"
-              href="#"
-              data-bs-toggle="tooltip"
-              data-bs-placement="bottom"
-              title="Coming Soon"
-            >
-              <img
-                :src="logoTailwind"
-                alt="title"
-                loading="lazy"
-                :style="{ height: '90px' }"
-              />
-            </a>
-            <a
-              href="https://www.creative-tim.com/product/vue-material-kit-pro"
-              class="mx-3"
-              data-bs-toggle="tooltip"
-              data-bs-placement="bottom"
-              title="Vue.js - Is a Progressive JavaScript Framework"
-            >
-              <img
-                :src="logoVue"
-                alt="title"
-                loading="lazy"
-                :style="{ height: '90px' }"
-              />
-            </a>
-            <a
-              class="opacity-5"
-              href="#"
-              data-bs-toggle="tooltip"
-              data-bs-placement="bottom"
-              title="Coming Soon"
-            >
-              <img
-                :src="logoAngular"
-                alt="title"
-                loading="lazy"
-                :style="{ height: '90px' }"
-              />
-            </a>
-            <a
-              href="https://www.creative-tim.com/product/material-kit-react-pro"
-              class="mx-3"
-              data-bs-toggle="tooltip"
-              data-bs-placement="bottom"
-              title="React – A JavaScript library for building user interfaces"
-            >
-              <img
-                :src="logoReact"
-                alt="title"
-                loading="lazy"
-                :style="{ height: '90px' }"
-              />
-            </a>
-            <a
-              class="opacity-5"
-              href="#"
-              data-bs-toggle="tooltip"
-              data-bs-placement="bottom"
-              title="Coming Soon"
-            >
-              <img
-                :src="logoSketch"
-                alt="title"
-                loading="lazy"
-                :style="{ height: '90px' }"
-              />
-            </a>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="py-5">
-      <div class="container">
-        <div class="row">
-          <div class="col-lg-5 ms-auto">
-            <h4 class="mb-1">Thank you for your support!</h4>
-            <p class="lead mb-0">We deliver the best web products</p>
-          </div>
-          <div class="col-lg-5 me-lg-auto my-lg-auto text-lg-end mt-5">
-          
-            <MaterialSocialButton
-              route="https://twitter.com/intent/tweet?text=Check%20Material%20Design%20System%20made%20by%20%40CreativeTim%20%23webdesign%20%23designsystem%20%23bootstrap5&url=https%3A%2F%2Fwww.creative-tim.com%2Fproduct%2Fmaterial-design-system-pro"
-              component="twitter"
-              color="twitter"
-              label="Tweet"
-            />
-            <MaterialSocialButton
-              route="https://www.facebook.com/sharer/sharer.php?u=https://www.creative-tim.com/product/material-design-system-pro"
-              component="facebook-square"
-              color="facebook"
-              label="Share"
-            />
-            
-            <MaterialSocialButton
-              route=""
-              component="pinterest"
-              color="pinterest"
-              label="Pin it"
-            />
-           
-          </div>
-        </div>
-      </div>
-    </div>
-  </div> -->
   <DefaultFooter />
 </template>
 

src/views/Presentation/Sections/PresentationSearch.vue

@@ -0,0 +1,61 @@
+<script setup>
+import { onMounted, onUnmounted } from "vue";
+import axios from 'axios';
+import { ref } from "vue";
+
+const searchQuery = ref('');
+const searchResultProjects = ref([]);
+const searchResultUsers = ref([]);
+
+const search = async () => {
+  try {
+    const projectsResponse = await axios.get(`http://somebodyhire.me/api/search/projects/?search_query=${searchQuery.value}`);
+    searchResultProjects.value = projectsResponse.data;
+
+    const usersResponse = await axios.get(`http://somebodyhire.me/api/search/profiles/?search_query=${searchQuery.value}`);
+    searchResultUsers.value = usersResponse.data;
+  } catch (error) {
+    console.error('There was an error fetching the search results', error);
+  }
+};
+
+
+
+
+</script>
+
+
+<template>
+    <div class="searchBar">
+        <input type="text" v-model="searchQuery" placeholder="Поиск по проектам и людям" />
+        <button type="submit" @click="search">Go</button>
+    </div>
+
+    <div>
+        <h2>Найдено проектов: {{ searchResultProjects.length}} </h2>
+        <div v-for = "project in searchResultProjects" :key="project.id">
+            <h3>{{ project.title }}</h3>
+            <p>{{ project.description }}</p>
+        </div>
+        <h2>Найдено людей: {{ searchResultUsers.length}} </h2>
+        <div v-for = "user in searchResultUsers" :key="user.id">
+            <h3>{{ user.username }}</h3>
+            <p>{{ user.email }}</p>
+            
+            
+        </div>
+
+    </div>
+        
+
+
+  </template>
+
+<style scoped>
+.searchBar{
+    display: flex;
+    justify-content: center;
+
+}
+</style>
+