router, auth, edit, first autocomplete, bascis structure, no design

2021-06-25 19:28:41 +02:00 · 2021-06-25 19:28:41 +02:00 · 16b03bb5f2
parent 356aa738fb
commit 16b03bb5f2
9 changed files with 314 additions and 92 deletions
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/index.html
+++ b/public/index.html
@ -4,7 +4,8 @@
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <link rel="icon" type="image/png" href="<%= BASE_URL %>favicon.ico">
+    <link rel="icon" type="image/png" href="<%= BASE_URL %>favicon-96x96.png" sizes="96x96">
    <title>Kompetenz Inventar der WTF eG</title>
  </head>
  <body>
--- a/src/App.vue
+++ b/src/App.vue
@ -1,8 +1,67 @@
 <template>
+<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">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+    <div class="collapse navbar-collapse"
+     :class="{ 
+      'show': showMobileNavbar,
+      }" 
+      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>
+        </li>
+        <li class="nav-item">
+          <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>
+        </li>
+        <li class="nav-item">
+          <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>
+        </button>
+      </form>
+    </div>
+  </div>
+</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>
  </footer>
-</template>
+</template>
+<script>
+export default {
+  name: 'App',
+  data() {
+    return {
+      showMobileNavbar: false,
+      memberId: null
+    };
+  },
+  created(){
+    this.memberId = localStorage.getItem('user_id')
+  },
+  methods: {
+    logout(){
+      localStorage.clear();
+      this.$router.push({ path: "/" });
+    }
+  }
+}
+</script>
--- a/src/assets/custom.css
+++ b/src/assets/custom.css
@ -0,0 +1,4 @@
+.container{
+  min-height: calc(100vh - 70px - 24px);
+}
+  
--- a/src/main.js
+++ b/src/main.js
@ -3,11 +3,15 @@ import App from './App.vue'
 import router from './router'

 import 'bootstrap/dist/css/bootstrap.min.css'
+import './assets/custom.css'

 const app = createApp(App)

 app.use(router)

+app.config.globalProperties.apiUrl= (process.env.VUE_APP_API_URL ? process.env.VUE_APP_API_URL : '')
+
 app.mount('#app')

-app.config.globalProperties.apiUrl="todo"
+
+
--- a/src/router/index.js
+++ b/src/router/index.js
@ -9,7 +9,17 @@ const routes = [
    path: '/s',
    name: 's',
    component: {
-      template: "<router-view/>"
+      template: "<router-view/>",
+    },
+    beforeEnter: (to, from, next) => {
+      console.log('test')
+      console.log('token', localStorage.getItem('token'))
+      if(localStorage.getItem('token') !== null){
+        console.log('next')
+        next()
+      }else{
+        next({path: '/', query: {url: to.fullPath, access: false}})
+      }
    },
    children: [
      {
@ -18,12 +28,12 @@ const routes = [
        component: Search
      },
      {
-        path: '/profile/:member',
+        path: 'profile/:member',
        name: 'ProfileMember',
        component: View
      },
      {
-        path: '/profile-edit',
+        path: 'profile-edit',
        name: 'ProfileEdit',
        component: Edit
      },
--- a/src/views/Index.vue
+++ b/src/views/Index.vue
@ -57,24 +57,28 @@ export default {
    async submitLogin() {
      this.showErrorMessage = false;
      try {
+        console.log(this.apiUrl)
        const loginResult = await axios.post(
-          `${process.env.VUE_APP_API_URL}/users/login`,
+          `${this.apiUrl}/users/login`,
          {
            username: this.username,
            password: this.password,
          }
        );
        console.log(loginResult);
+        console.log(loginResult.status);
        if (loginResult.status === 200) {
+          console.log('if true')
+          this.showErrorMessage = false;
          //success login
-          localStorage.setItem("token", loginResult.token);
-          localStorage.setItem("user_id", loginResult.user_id);
-          this.router.push({ path: "s/search" });
+          localStorage.setItem("token", loginResult.data.token);
+          localStorage.setItem("user_id", loginResult.data.user_id);
+          this.$router.push({ path: "/s/search" });
        } else {
          this.showErrorMessage = true;
        }
      } catch (error) {
-        console.error();
+        console.error(error);
        this.showErrorMessage = true;
      }
    },
--- a/src/views/Search.vue
+++ b/src/views/Search.vue
@ -1,58 +1,66 @@
 <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"
-                    required
-                    />
-            </div>
-            <div class="col">
-                 <button type="submit" class="btn btn-primary mb-4">Suche Starten</button>
-            </div>
+      <div class="row">
+        <div class="col">
+          <input
+            type="text"
+            class="form-control"
+            id="searchText"
+            v-model="searchText"
+            required
+          />
        </div>
+        <div class="col">
+          <button type="submit" class="btn btn-primary mb-4">
+            Suche Starten
+          </button>
+        </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
+      class="alert alert-danger mb-4 mt-4"
+      role="alert"
+      v-if="showErrorMessage"
+    >
+      Bei der Suche ist ein Fehler aufgetreten
    </div>
+  </div>
 </template>
 <script>
-import axios from 'axios'
+import axios from "axios";

 export default {
-    name: 'Search',
-  data(){
-      return {
-          showErrorMessage: false,
-          searchText: '',
-      }
+  name: "Search",
+  data() {
+    return {
+      showErrorMessage: false,
+      searchText: "",
+    };
  },
  methods: {
-      async submitSearch(){
-          this.showErrorMessage = false
-          try{
-              const loginResult = await axios.post(
-                `${process.env.VUE_APP_API_URL}/search`,
-                // Beispiel Hafte Daten
-                {
-                    searchText: this.searchText,
-                })
-                if(loginResult.status === 200){
-                    //success login
-                    this.router.push({path: 's/search'})
-                }
-                else{
-                    this.showErrorMessage = true
-                }
-          }catch(error){
-              console.error()
-                this.showErrorMessage = true
+    async submitSearch() {
+      this.showErrorMessage = false;
+      try {
+        const loginResult = await axios.post(
+          `${process.env.VUE_APP_API_URL}/search`,
+          // Beispiel Hafte Daten
+          {
+            searchText: this.searchText,
          }
+        );
+        if (loginResult.status === 200) {
+          //success login
+          this.router.push({ path: "s/search" });
+        } else {
+          this.showErrorMessage = true;
+        }
+      } catch (error) {
+        console.error();
+        this.showErrorMessage = true;
      }
-  }
-}
+    },
+  },
+};
 </script>
--- a/src/views/profile/Edit.vue
+++ b/src/views/profile/Edit.vue
@ -9,7 +9,7 @@
            type="text"
            class="form-control"
            id="nickname"
-            v-model="nickname"
+            v-model="profile.nickname"
            required
          />
        </div>
@ -19,7 +19,7 @@
            type="text"
            class="form-control"
            id="pronouns"
-            v-model="pronouns"
+            v-model="profile.pronouns"
            required
          />
          <div id="emailHelp" class="form-text">
@ -34,7 +34,7 @@
            class="form-control"
            id="freetext"
            rows="3"
-            v-model="freetext"
+            v-model="profile.freetext"
          ></textarea>
        </div>
        <div class="col-12 col-xs-12">
@ -45,14 +45,16 @@
            class="form-control"
            id="volunteerwork"
            rows="3"
-            v-model="volunteerwork"
+            v-model="profile.volunteerwork"
          ></textarea>
        </div>
      </div>
      <div>
-        <label for="skills" class="form-label">Deine Fähigkeiten: (Autocomplete)</label>
+        <label for="skills" class="form-label"
+          >Deine Fähigkeiten: (Autocomplete)</label
+        >
        <input
-          autocomplete="off" 
+          autocomplete="off"
          type="text"
          class="form-control"
          id="pronouns"
@ -61,16 +63,19 @@
        />
        <div class="" v-if="searchSkillResults">
          <ul class="list-group">
-            <li 
-              class="list-group-item" 
-              v-for="result in searchSkillResults" 
+            <li
+              class="list-group-item"
+              v-for="result in searchSkillResults"
              :key="result.id"
-              @click="addSkill(result)">{{result.name}}</li>
+              @click="addSkill(result)"
+            >
+              {{ result.name }}
+            </li>
          </ul>
        </div>
        <div>
          <span
-            v-for="skill in skills"
+            v-for="skill in profile.skills"
            :key="skill.id"
            class="badge bg-primary m-2"
          >
@ -84,6 +89,46 @@
          </span>
        </div>
      </div>
+      <div>
+        <label for="skills" class="form-label"
+          >Deine Sprachen: (Autocomplete)</label
+        >
+        <input
+          autocomplete="off"
+          type="text"
+          class="form-control"
+          id="pronouns"
+          v-model="searchLanguagesText"
+          @keyup="searchLanguages()"
+        />
+        <div class="" v-if="searchLanguagesResult">
+          <ul class="list-group">
+            <li
+              class="list-group-item"
+              v-for="result in searchLanguagesResult"
+              :key="result.id"
+              @click="addLanguage(result)"
+            >
+              {{ result.name }}
+            </li>
+          </ul>
+        </div>
+        <div>
+          <span
+            v-for="language in profile.languages"
+            :key="language.id"
+            class="badge bg-primary m-2"
+          >
+            {{ language.name }}
+            <button
+              type="button"
+              class="btn-close"
+              aria-label="Close"
+              @click="removeLanguage(language.id)"
+            ></button>
+          </span>
+        </div>
+      </div>

      <button type="submit" class="btn btn-primary mb-4 mt-4">Speichern</button>
      <div
@ -101,51 +146,109 @@ import axios from "axios";

 export default {
  name: "profileEdit",
-  created() {
-    // get user profile by jwt tocken and fill the form details
-  },
  data() {
    return {
      showErrorMessage: false,
-      nickname: "",
-      pronouns: "",
-      freetext: "",
-      volunteerwork: "",
-      languages: [],
+
+      profile: {
+        nickname: "",
+        pronouns: "",
+        volunteerwork: "",
+        freetext: "",
+        created: "",
+        updated: "",
+        address: {
+          name: "",
+          street: "",
+          house_number: "",
+          additional: "",
+          postcode: "",
+          city: "",
+          country: "",
+        },
+        skills: [],
+        languages: [],
+      },
      searchLanguagesText: "",
-      skills: [
-        { id: 3, name: "PHP" },
-        { id: 2, name: "PHP" },
-      ],
+      searchLanguagesResult: [],
      searchSkillsText: "",
      searchSkillResults: [],
    };
  },
+  async created() {
+    try {
+      const userProfile = await axios.get(
+        `${process.env.VUE_APP_API_URL}/users/${localStorage.getItem(
+          "user_id"
+        )}/profile`,
+        {
+          headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
+        }
+      );
+      console.log(userProfile.data);
+      this.profile.nickname = userProfile.data.profile.nickname;
+      this.profile.pronouns = userProfile.data.profile.pronouns;
+      this.profile.volunteerwork = userProfile.data.profile.volunteerwork;
+      this.profile.freetext = userProfile.data.profile.freetext;
+    } catch (error) {
+      console.error(error);
+    }
+  },
  methods: {
-    submitForm() {},
-    async searchSkills() {
-      this.searchSkillResults = [{ id: 5, name: "JavaScript" }]
+    async submitForm() {
      try {
-        const skillResult = await axios.get(
-          `${process.env.VUE_APP_API_URL}/skills?search=${this.searchSkillsText}`
+        const formSubmitResult = await axios.post(
+          `${process.env.VUE_APP_API_URL}/users/${localStorage.getItem(
+            "user_id"
+          )}/profile`,
+          {
+            nickname: this.profile.nickname,
+            pronouns: this.profile.pronouns,
+            volunteerwork: this.profile.volunteerwork,
+            freetext: this.profile.freetext,
+            skills: this.profile.skills,
+            languages: this.profile.languages,
+          },
+          {
+            headers: {
+              Authorization: `Bearer ${localStorage.getItem("token")}`,
+            },
+          }
        );
-        console.log(skillResult);
-        if (skillResult.status === 200) {
-          this.searchSkillResults = skillResult.skills;
+        console.log(formSubmitResult);
+        if (formSubmitResult.status === 200) {
+          // success
+        } else {
+          // failure
        }
      } catch (error) {
        console.error();
        this.showErrorMessage = true;
      }
    },
-    addSkill(skill){
-      if(this.skills.includes(skill)) return false
-      this.skills.push(skill)
-      this.searchSkillsText = ''
-      this.searchSkillResults = []
+    async searchSkills() {
+      try {
+        const skillResult = await axios.get(
+          `${process.env.VUE_APP_API_URL}/skills?search=${this.searchSkillsText}`
+        );
+        if (skillResult.status === 200) {
+          this.searchSkillResults = skillResult.data.skills;
+        }
+      } catch (error) {
+        console.error();
+        this.showErrorMessage = true;
+      }
+    },
+    addSkill(skill) {
+      console.log(this.profile.skills.map((item) => item.id));
+      if (this.profile.skills.map((item) => item.id).includes(skill.id))
+        return false;
+      this.profile.skills.push(skill);
+      this.searchSkillsText = "";
+      this.searchSkillResults = [];
    },
    removeSkill(skillId) {
-      this.skills = this.skills.filter((skill) => {
+      this.profile.skills = this.profile.skills.filter((skill) => {
        if (skillId === skill.id) {
          return false;
        } else {
@ -153,7 +256,36 @@ export default {
        }
      });
    },
-    searchLanguages() {},
+    async searchLanguages() {
+      try {
+        const languageResult = await axios.get(
+          `${process.env.VUE_APP_API_URL}/languages?search=${this.searchLanguagesText}`
+        );
+        if (languageResult.status === 200) {
+          this.searchLanguagesResult = languageResult.data.languages;
+        }
+      } catch (error) {
+        console.error();
+        this.showErrorMessage = true;
+      }
+    },
+
+    addLanguage(language) {
+      if (this.profile.languages.map((item) => item.id).includes(language.id))
+        return false;
+      this.profile.languages.push(language);
+      this.searchLanguagesText = "";
+      this.searchLanguagesResult = [];
+    },
+    removeLanguage(languageId) {
+      this.profile.languages = this.profile.languages.filter((language) => {
+        if (languageId === language.id) {
+          return false;
+        } else {
+          return true;
+        }
+      });
+    },
  },
 };
 </script>