implement search layout #32 #33 #35

src/views/Index.vue

@@ -5,46 +5,51 @@ SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 
 <template>
-  <div class="container pt-5">
-    <div class="text-center mb-5">
-      <img class="wtf-logo wtf-logo--index" src="@/assets/img/wtf_logo.svg">
-      <h1>Kompetenzinventar</h1>
+  <div class="bg-wtf">
+    <div class="container pt-5">
+      <div class="text-center mb-5">
+        <img class="wtf-logo wtf-logo--index" src="@/assets/img/wtf_logo.svg">
+        <h1 class="text-white">Kompetenzinventar</h1>
+      </div>
+      <form @submit.prevent="submitLogin()" class="card bg-white login-form">
+        <div class="card-body">
+          <div class="mb-3">
+            <label for="exampleInputusername1" class="form-label" >
+              WTF-Benutzername:
+            </label>
+            <input
+              type="username"
+              class="form-control"
+              id="exampleInputusername1"
+              v-model="username"
+              required
+            />
+          </div>
+          <div class="mb-3">
+            <label for="exampleInputPassword1" class="form-label">Passwort:</label>
+            <input
+              type="password"
+              class="form-control"
+              id="exampleInputPassword1"
+              v-model="password"
+              required
+            />
+          </div>
+          <button type="submit" class="btn btn-primary">Login</button>
+          <a class="btn btn-link" href="https://resetpw.wtf-eg.de/">Passwort vergessen?</a>
+          <div
+            class="alert alert-danger mt-3 mb-0"
+            role="alert"
+            v-if="showErrorMessage"
+          >
+            Dein Benutzername oder Passwort ist falsch.<br>Versuche es noch einmal.
+          </div>
+        </div>
+      </form>
     </div>
-    <form @submit.prevent="submitLogin()" class="bg-white p-3 login-form">
-      <div class="mb-3">
-        <label for="exampleInputusername1" class="form-label" >
-          WTF-Benutzername:
-        </label>
-        <input
-          type="username"
-          class="form-control"
-          id="exampleInputusername1"
-          v-model="username"
-          required
-        />
-      </div>
-      <div class="mb-3">
-        <label for="exampleInputPassword1" class="form-label">Passwort:</label>
-        <input
-          type="password"
-          class="form-control"
-          id="exampleInputPassword1"
-          v-model="password"
-          required
-        />
-      </div>
-      <button type="submit" class="btn btn-primary">Login</button>
-      <a class="btn btn-link" href="https://resetpw.wtf-eg.de/">Passwort vergessen?</a>
-      <div
-        class="alert alert-danger mt-3 mb-0"
-        role="alert"
-        v-if="showErrorMessage"
-      >
-        Dein Benutzername oder Passwort ist falsch.<br>Versuche es noch einmal.
-      </div>
-    </form>
   </div>
 </template>
+
 <script>
 import RequestMixin from "@/mixins/request.mixin"
 
@@ -62,6 +67,7 @@ export default {
 </script>
 
 <style scoped>
+
 .container {
   min-height: 100vh;
 }

src/views/Search.vue

@@ -5,88 +5,129 @@ SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 
 <template>
-  <div class="container">
-    <h1>Suche</h1>
-    <form @submit.prevent="submitSearch()">
-      <div class="row">
-        <div class="col">
-          <input
-            type="text"
-            class="form-control"
-            id="searchText"
-            v-model="searchText"
-          />
-        </div>
-        <div class="col">
-          <button type="submit" class="btn btn-primary mb-4">
-            Suche starten
-          </button>
+  <div class="content">
+    <div class="bg-wtf text-white pt-3 pb-4">
+      <div class="container">
+        <div class="fs-3 text-center lh-1 mb-3">Finde WTF Member</div>
+        <div class="card mx-auto bg-white">
+          <div class="card-body">
+            <form @submit.prevent="handleSubmit">
+              <fieldset class="d-flex" :disabled="searching">
+                <div class="flex-grow-1 me-3">
+                  <input
+                    type="text"
+                    class="form-control"
+                    id="searchText"
+                    v-model="searchText"
+                    placeholder="Nick, Fähigkeit, Sprache"
+                    ref="searchTextInput"
+                  />
+                </div>
+                <div class="">
+                  <button type="submit" class="btn btn-primary">
+                    <i class="bi-search"></i>
+                    <span class="d-none d-md-inline"> Suchen</span>
+                  </button>
+                </div>
+              </fieldset>
+            </form>
+          </div>
         </div>
       </div>
-    </form>
-    <div
-      class="alert alert-danger mb-4 mt-4"
-      role="alert"
-      v-if="showErrorMessage"
-    >
-      Bei der Suche ist ein Fehler aufgetreten
     </div>
-    <div v-if="searchTotal == 0">
-      Es wurde kein Suchergebnis gefunden.
-      <p v-if="searchText !== ''">Probiere eine andere Suche.</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
-            class="text-decoration-none"
-            :to="{ path: `/s/profile/${result.user_id}` }"
-          >
-            <div class="card search-card">
-              <div class="card-body">
-                <h5 class="card-title">
-                  {{ result.nickname}}
-                  <span v-if="result.pronouns"> ({{ result.pronouns }})</span>
-                </h5>
-                <p
-                  class="card-text"
-                  v-if="result.skills && result.skills.length > 0"
-                >
-                  Fähigkeiten:
-                  <span v-for="(skill, index) in result.skills" :key="index"
-                    >
-                    {{ skill.skill.name}}<span v-if="index != result.skills.length - 1">, </span>
-                  </span>
-                </p>
-              </div>
-            </div>
-          </router-link>
-        </div>
+    <div class="container pt-4 pb-3">
+      <div class="text-center" v-if="showSpinner">
+        <Spinner />
+      </div>
+      <div
+        class="fs-2 text-danger text-center"
+        role="alert"
+        v-if="error"
+      >
+        <div class="fs-1 mb-3">Kernel panic :/</div>
+        Bei der Suche ist ein Fehler aufgetreten.
+      </div>
+      <div v-else-if="showNoResults" class="fs-2 text-black-50 text-center">
+        <div class="fs-1 mb-3">nullptr :/</div>
+        Es wurde kein Suchergebnis gefunden.
+        <p v-if="searchText !== ''">Probiere eine andere Suche.</p>
+      </div>
+      <div v-else-if="showResults">
+        <SearchResult
+          v-for="profile in profiles"
+          :key="profile.user_id"
+          class="mb-3"
+          :profile="profile"
+        />
       </div>
     </div>
   </div>
 </template>
+
 <script>
-import RequestMixin from "@/mixins/request.mixin";
+import { mapState } from 'vuex'
+
+import SearchResult from '@/components/SearchResult'
+import Spinner from '@/components/Spinner'
 
 export default {
-  name: "Search",
-  mixins: [RequestMixin],
-  data() {
-    return {
-      showErrorMessage: false,
-      searchText: "",
-      searchResults: null,
-      searchTotal: 0,
-    };
+  name: 'Search',
+  components: {
+    SearchResult,
+    Spinner,
+  },
+  computed: {
+    ...mapState({
+      searching: state => state.search.searching,
+      profiles: state => state.search.profiles,
+      error: state => state.search.error,
+      showSpinner: state => state.search.showSpinner,
+    }),
+      searchText: {
+        get() {
+          return this.$store.state.search.query.search
+        },
+        set(text) {
+          this.$store.commit('search/setQuerySearch', text)
+        }
+      },
+      showNoResults() {
+        return !this.searching && (!this.profiles || this.profiles.length === 0)
+      },
+      showResults() {
+        return !this.error && this.profiles && this.profiles.length > 0
+      }
+  },
+  watch: {
+    searching(value) {
+      if (value) {
+        if (this.$refs.searchTextInput) {
+            this.$refs.searchTextInput.focus()
+        }
+      }
+    }
+  },
+  methods: {
+    handleSubmit() {
+      this.$store.dispatch('search/search')
+    }
   },
   created() {
-    if (this.$route.query.query) this.searchText = this.$route.query.query;
-    this.submitSearch();
-  },
+    if (this.$route.query.query !== undefined) {
+      this.searchText = this.$route.query.query
+      this.$store.commit('search/clearProfiles')
+    }
+
+    this.$store.dispatch('search/search')
+  }
 };
 </script>
+<style scoped>
+.container {
+  max-width: 768px;
+}
+
+.content {
+  min-height: calc(100vh - 60px);
+}
+</style>