From ea0543c476d72f0ae6a323868cd50ef19f370bae Mon Sep 17 00:00:00 2001
From: FEARmeR <fearmer@gmail.com>
Date: Sat, 20 May 2023 17:21:29 +0100
Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?=
 =?UTF-8?q?=D0=BD=D1=8B=20=D1=81=D1=82=D1=80=D0=B0=D0=BD=D0=B8=D1=86=D1=8B?=
 =?UTF-8?q?=20/Profiles=20=D0=B8=20/Projects?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.js                           |  15 +++
 .../LandingPages/Profile/AllProfiles.vue      | 124 ++++++++++++++++++
 .../LandingPages/Project/AllProjects.vue      | 124 ++++++++++++++++++
 3 files changed, 263 insertions(+)
 create mode 100644 src/views/LandingPages/Profile/AllProfiles.vue
 create mode 100644 src/views/LandingPages/Project/AllProjects.vue

diff --git a/src/router/index.js b/src/router/index.js
index d935b72..cfda41a 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -28,6 +28,9 @@ import Profile from "../views/LandingPages/Profile/Profile.vue";
 import TopSecretProject from "../views/LandingPages/Project/TopSecretProject.vue";
 import BasicRegister from "../views/LandingPages/SignIn/BasicRegister.vue";
 import ForgotPassword from "../views/LandingPages/SignIn/ForgotPassword.vue";
+import Projects from "../views/LandingPages/Project/AllProjects.vue";
+import Profiles from "../views/LandingPages/Profile/AllProfiles.vue";
+
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -44,6 +47,12 @@ const router = createRouter({
       component: Project
     },
 
+    {
+      path: '/projects',
+      name: 'projects',
+      component: Projects
+    },
+
     {
       path: '/TopSecret',
       name: 'topsecretproject',
@@ -56,6 +65,12 @@ const router = createRouter({
       component: Profile
     },
 
+    {
+      path: '/profiles',
+      name: 'profiles',
+      component: Profiles
+    },
+
     {
       path: "/register",
       name: "register",
diff --git a/src/views/LandingPages/Profile/AllProfiles.vue b/src/views/LandingPages/Profile/AllProfiles.vue
new file mode 100644
index 0000000..453b7b0
--- /dev/null
+++ b/src/views/LandingPages/Profile/AllProfiles.vue
@@ -0,0 +1,124 @@
+<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);
+  }
+};
+
+
+onMounted(() => {
+  search();
+});
+
+</script>
+
+
+<template>
+
+  <div>
+    
+    <h2 class="result-header">Найдено людей: {{ searchResultUsers.length}} </h2>
+    <div class="result-grid">
+      <div class="result-card" v-for="user in searchResultUsers" :key="user.id">
+        <h3>{{ user.username }} with id {{ user.id }}</h3>
+        <p>{{ user.email }}</p>
+        <a :href="`http://somebodyhire.me/profile/${user.id}`">Страница пользователя</a>
+      </div>
+    </div>
+  </div>
+
+
+  </template>
+
+<style scoped>
+.searchBar {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.searchInput {
+  /* Makes the search input take up the maximum available width */
+  flex-grow: 1;
+  /* Adds some padding inside the input field */
+  padding: 10px;
+  /* Adds some margin to the right side of the input field */
+  margin-right: 10px;
+  /* Increased the font size a bit */
+  font-size: 16px;
+}
+
+.searchButton {
+  /* Adds some padding inside the button */
+  padding: 10px 20px;
+  /* Changes the font size */
+  font-size: 16px;
+  /* Changes the background color of the button */
+  background-color: #3d9132;
+  /* Changes the color of the text inside the button */
+  color: white;
+  /* Makes the border corners rounded */
+  border-radius: 4px;
+  /* Removes the default button border */
+  border: none;
+  /* Changes the cursor to a hand pointer when hovering over the button */
+  cursor: pointer;
+}
+
+.searchButton:hover {
+  /* Changes the background color of the button when hovering over it */
+  background-color: #25581e;
+}
+.result-header {
+  color: #fff;
+  background-color: #333;
+  padding: 10px;
+  text-align: center;
+  margin-top: 20px;
+}
+
+.result-grid {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
+.result-card {
+  display: flex;
+  flex-direction: column;
+  background-color: rgba(255, 255, 255, 0.5);
+  padding: 10px;
+  margin: 10px;
+  border-radius: 10px;
+  width: calc(100% / 3 - 20px);
+  box-sizing: border-box;
+}
+
+@media screen and (max-width: 992px) {
+  .result-card {
+    width: calc(100% / 2 - 20px);
+  }
+}
+
+@media screen and (max-width: 600px) {
+  .result-card {
+    width: 100%;
+  }
+}
+
+</style>
\ No newline at end of file
diff --git a/src/views/LandingPages/Project/AllProjects.vue b/src/views/LandingPages/Project/AllProjects.vue
new file mode 100644
index 0000000..a6c6dc5
--- /dev/null
+++ b/src/views/LandingPages/Project/AllProjects.vue
@@ -0,0 +1,124 @@
+<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);
+  }
+};
+
+
+onMounted(() => {
+  search();
+});
+
+</script>
+
+
+<template>
+
+  <div>
+    <h2 class="result-header">Найдено проектов: {{ searchResultProjects.length}} </h2>
+    <div class="result-grid">
+      <div class="result-card" v-for="project in searchResultProjects" :key="project.id">
+        <h3>{{ project.title }} with ID {{ project.id }}</h3>
+        <p>{{ project.description }}</p>
+        <a :href="`http://somebodyhire.me/project/${project.id}`">Страница проекта</a>
+      </div>
+    </div>
+    
+  </div>
+
+
+  </template>
+
+<style scoped>
+.searchBar {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.searchInput {
+  /* Makes the search input take up the maximum available width */
+  flex-grow: 1;
+  /* Adds some padding inside the input field */
+  padding: 10px;
+  /* Adds some margin to the right side of the input field */
+  margin-right: 10px;
+  /* Increased the font size a bit */
+  font-size: 16px;
+}
+
+.searchButton {
+  /* Adds some padding inside the button */
+  padding: 10px 20px;
+  /* Changes the font size */
+  font-size: 16px;
+  /* Changes the background color of the button */
+  background-color: #3d9132;
+  /* Changes the color of the text inside the button */
+  color: white;
+  /* Makes the border corners rounded */
+  border-radius: 4px;
+  /* Removes the default button border */
+  border: none;
+  /* Changes the cursor to a hand pointer when hovering over the button */
+  cursor: pointer;
+}
+
+.searchButton:hover {
+  /* Changes the background color of the button when hovering over it */
+  background-color: #25581e;
+}
+.result-header {
+  color: #fff;
+  background-color: #333;
+  padding: 10px;
+  text-align: center;
+  margin-top: 20px;
+}
+
+.result-grid {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
+.result-card {
+  display: flex;
+  flex-direction: column;
+  background-color: rgba(255, 255, 255, 0.5);
+  padding: 10px;
+  margin: 10px;
+  border-radius: 10px;
+  width: calc(100% / 3 - 20px);
+  box-sizing: border-box;
+}
+
+@media screen and (max-width: 992px) {
+  .result-card {
+    width: calc(100% / 2 - 20px);
+  }
+}
+
+@media screen and (max-width: 600px) {
+  .result-card {
+    width: 100%;
+  }
+}
+
+</style>
\ No newline at end of file