Suche mit richtigen API Endpunkt, Suche in der Navbar, kleinigkeiten

src/App.vue

@@ -1,67 +1,110 @@
 <template>
-<header v-if="this.$route.path.includes('/s/')">
+  <header v-if="this.$route.path.includes('/s/')">
     <nav class="navbar navbar-expand-lg navbar-light bg-light">
       <div class="container-fluid">
         <a class="navbar-brand" href="#">KI</a>
-    <button @click="showMobileNavbar = !showMobileNavbar" class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+        <button
+          @click="showMobileNavbar = !showMobileNavbar"
+          class="navbar-toggler"
+          type="button"
+          data-bs-toggle="collapse"
+          data-bs-target="#navbarSupportedContent"
+          aria-controls="navbarSupportedContent"
+          aria-expanded="false"
+          aria-label="Toggle navigation"
+        >
           <span class="navbar-toggler-icon"></span>
         </button>
-    <div class="collapse navbar-collapse"
+        <div
+          class="collapse navbar-collapse"
           :class="{
-      'show': showMobileNavbar,
+            show: showMobileNavbar,
           }"
-      id="navbarSupportedContent">
+          id="navbarSupportedContent"
+        >
           <ul class="navbar-nav me-auto mb-2 mb-lg-0">
             <li class="nav-item">
-          <router-link class="nav-link" :to="{path: `/s/search`}" active-class="active">Suche</router-link>
+              <router-link
+                class="nav-link"
+                :to="{ path: `/s/search` }"
+                active-class="active"
+                >Suche</router-link
+              >
             </li>
             <li class="nav-item">
-          <router-link class="nav-link" :to="{path: `/s/profile/${memberId}`}" active-class="active">Mein Profil</router-link>
+              <router-link
+                class="nav-link"
+                :to="{ path: `/s/profile/${memberId}` }"
+                active-class="active"
+                >Mein Profil</router-link
+              >
             </li>
             <li class="nav-item">
-          <router-link class="nav-link" :to="{path: `/s/profile-edit`}" active-class="active">Bearbeiten</router-link>
+              <router-link
+                class="nav-link"
+                :to="{ path: `/s/profile-edit` }"
+                active-class="active"
+                >Bearbeiten</router-link
+              >
             </li>
             <li class="nav-item">
-          <button class="btn btn-outline-danger" @click="logout()">Logout</button>
+              <button class="btn btn-outline-danger" @click="logout()">
+                Logout
+              </button>
               <a class="nav-link active" aria-current="page" href="#"></a>
             </li>
           </ul>
-      <form class="d-flex">
-        <input class="form-control me-2" type="search" placeholder="Direkt Suchen" aria-label="Search">
-        <button class="btn btn-outline-success" type="submit">
-          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
-            <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
-          </svg>
+          <form class="d-flex" @submit.prevent="searchRedirect()">
+            <input
+              class="form-control me-2"
+              v-model="searchText"
+              type="search"
+              placeholder="Direkt Suchen"
+              aria-label="Search"
+            />
+            <button
+              class="btn btn-outline-primary"
+              type="submit"
+            >
+              <img
+                src="/img/bootstrap-icons-1.5.0/search.svg"
+                alt="Suche Icon"
+              />
             </button>
           </form>
         </div>
       </div>
-</nav>
-</header>
-  <router-view/>
+    </nav>
+  </header>
+  <router-view />
   <footer>
     <a href="https://wtf-eg.de/impressum/" class="m-4">Impressum</a>
     <a href="https://wtf-eg.de/datenschutz/" class="m-4">Datenschutz</a>
     <a href="https://git.wtf-eg.de/kompetenzinventar" class="m-4">git(ea)</a>
+    <a href="https://git.wtf-eg.de/kompetenzinventar/ki-frontend/issues/new" class="m-4">Problem Melden</a>
   </footer>
 </template>
 <script>
 export default {
-  name: 'App',
+  name: "App",
   data() {
     return {
       showMobileNavbar: false,
-      memberId: null
+      memberId: null,
+      searchText: "",
     };
   },
-  created(){
-    this.memberId = localStorage.getItem('user_id')
+  created() {
+    this.memberId = localStorage.getItem("user_id");
   },
   methods: {
-    logout(){
+    logout() {
       localStorage.clear();
       this.$router.push({ path: "/" });
-    }
-  }
-}
+    },
+    searchRedirect() {
+      this.$router.push({ path: `/s/search?text`, query: { query: this.searchText } } );
+    },
+  },
+};
 </script>

src/views/Search.vue

@@ -25,11 +25,21 @@
     >
       Bei der Suche ist ein Fehler aufgetreten
     </div>
-    <div v-if="!searchResults">Keine Suchergebnisse Gefunden</div>
+    <div v-if="searchTotal == 0">
+      Es wurde kein Suchergebnis gefunden.
+      <p v-if="searchText !== ''">Am besten suchst du weniger Spezifisch.</p>
+    </div>
     <div v-else>
       <div class="row">
-        <div class="col-4 p-2" v-for="result in searchResults" :key="result.user_id">
-          <router-link :to="{ path: `/s/profile/${result.user_id}` }">
+        <div
+          class="col-4 p-2"
+          v-for="result in searchResults"
+          :key="result.user_id"
+        >
+          <router-link
+            class="text-decoration-none"
+            :to="{ path: `/s/profile/${result.user_id}` }"
+          >
             <div class="card">
               <div class="card-body">
                 <h5 class="card-title">
@@ -39,11 +49,9 @@
                 <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
                 <p class="card-text" v-if="result.skills">
                   Fähigkeiten:
-                  <span
-                    v-for="skill in result.skills"
-                    :key="skill.skill.name"
-                    >{{ skill.skill.name }} </span
-                  >
+                  <span v-for="skill in result.skills" :key="skill.skill.name"
+                    >{{ skill.skill.name }}
+                  </span>
                 </p>
               </div>
             </div>
@@ -54,7 +62,6 @@
   </div>
 </template>
 <script>
-
 export default {
   name: "Search",
   data() {
@@ -62,29 +69,28 @@ export default {
       showErrorMessage: false,
       searchText: "",
       searchResults: null,
+      searchTotal: 0,
     };
   },
+  created() {
+    if (this.$route.query.query) this.searchText = this.$route.query.query;
+    this.submitSearch();
+  },
   methods: {
     async submitSearch() {
       this.showErrorMessage = false;
       try {
-        const result = await this.axios.get(
-          `${process.env.VUE_APP_API_URL}/users/profiles`,
-          {
+        let url = `${process.env.VUE_APP_API_URL}/users/profiles`;
+        if (this.searchText != "") {
+          url += `?nickname=${this.searchText}`;
+        }
+        const result = await this.axios.get(url, {
           headers: {
             Authorization: `Bearer ${localStorage.getItem("token")}`,
           },
-          }
-        );
-        console.log(result)
-
-        this.searchResults = [
-          {"nickname": "peternichtlustig","user_id": 1,"skills": [ { "level": 5, "profile_id": 1, "skill": { "icon_url": "/skills/1/icon", "id": 1, "name": "PHP" } }, { "level": 3, "profile_id": 1, "skill": { "icon_url": "/skills/3/icon", "id": 3, "name": "Python" } } ],},
-          {"nickname": "Petra","user_id": 3,"skills": [  { "level": 3, "profile_id": 1, "skill": { "icon_url": "/skills/3/icon", "id": 3, "name": "Python" } } ],},
-          {"nickname": "Paul","user_id": 4,"skills": [ { "level": 5, "profile_id": 1, "skill": { "icon_url": "/skills/1/icon", "id": 1, "name": "PHP" }  } ],},
-          {"nickname": "Keine Skills Sebastian","user_id": 5,}
-        ]
-       
+        });
+        this.searchResults = result.data.profiles;
+        this.searchTotal = result.data.total;
       } catch (error) {
         console.error(error);
         this.showErrorMessage = true;

src/views/profile/View.vue

@@ -42,7 +42,6 @@ export default {
     };
   },
   async created() {
-      console.log(this.$route.params.memberId)
     try {
       const userProfile = await this.axios.get(
         `${process.env.VUE_APP_API_URL}/users/${this.$route.params.memberId}/profile`,