Merge branch 'main' of git.wtf-eg.de:kompetenzinventar/ki-frontend into main

Reviewed-on: kompetenzinventar/ki-frontend#24

.editorconfig

@@ -0,0 +1,24 @@
+# SPDX-FileCopyrightText: WTF Kooperative eG <https://wtf-eg.de/>
+#
+# SPDX-License-Identifier: AGPL-3.0-or-later
+
+root = true
+
+[*]
+end_of_line = lf
+insert_final_newline = true
+charset = utf-8
+indent_style = space
+indent_size = 4
+
+[*.{json,js,vue}]
+indent_size = 2
+
+[*.{yml,yaml}]
+indent_size = 2
+
+[*.html]
+indent_size = 2
+
+[*.{css,scss}]
+indent_size = 2

package.json

@@ -18,6 +18,8 @@
     "core-js": "^3.6.5",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^7.0.0",
+    "sass": "^1.37.5",
+    "sass-loader": "^10.2.0",
     "vue": "^3.0.0",
     "vue-router": "^4.0.0-0"
   }

src/assets/global.scss

@@ -2,7 +2,9 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
+@import "variables";
+@import "bootstrap/scss/bootstrap";
+
 .container{
   min-height: calc(100vh - 70px - 24px);
 }
-  

src/assets/variables.scss

@@ -0,0 +1 @@
+$primary: #0790a9;

src/components/AutoComplete.vue

@@ -11,45 +11,16 @@
           id="searchText"
           v-model="searchText"
           @keyup="search()"
+          @keyup.enter="addResult()"
         />
       </div>
-      <div class="col">
-        <div v-if="selectedResult">
-          <div v-if="type === 'contacttype'">
-            <input
-              type="text"
-              class="form-control"
-              id="contactContent"
-              v-model="contactContent"
-            />
-          </div>
-          <div v-if="type === 'language'">
-            <select
-              class="form-select"
-              aria-label="Selektiere dein Level"
-              v-model="level"
-            >
-              <option v-for="(value, key) in languagesSelection" :value="key" :key="key">{{value}}</option>
-            </select>
-          </div>
-          <div v-else>
-            <select
-              class="form-select"
-              aria-label="Selektiere dein Level"
-              v-model="level"
-            >
-              <option v-for="(value, key) in levelSelection" :value="key" :key="key">{{value}}</option>
-            </select>
-          </div>
-        </div>
-      </div>
       <div class="col">
         <button
-          v-if="selectedResult && !selectedResult.edit"
+          v-if="searchText != ''"
           type="button"
           class="btn btn-outline-success"
           aria-label="Hinzufügen"
-          @click="addSelectedResult()"
+          @click="addResult()"
         >
           <img
             src="/img/bootstrap-icons-1.5.0/plus-lg.svg"
@@ -57,15 +28,6 @@
           />
           Hinzufügen
         </button>
-        <button
-          v-if="selectedResult && selectedResult.edit"
-          type="button"
-          class="btn btn-outline-success"
-          aria-label="Hinzufügen"
-          @click="editSelectedResult()"
-        >
-          Änderung speichern
-        </button>
       </div>
     </div>
     <div class="" v-if="searchResults">
@@ -74,13 +36,7 @@
           class="list-group-item"
           v-for="result in searchResults"
           :key="result.id"
-          :class="{
-            'bg-info':
-              selectedResult &&
-              selectedResult.id &&
-              result.id === selectedResult.id,
-          }"
-          @click="selectedResult = result"
+          @click="addResult(result)"
         >
           {{ result.name }}
         </li>
@@ -90,19 +46,20 @@
       :values="values"
       :type="type"
       :editable="true"
-      @edit-value="editValue($event)"
       @remove-value="removeValue($event)"
-    ></profile-list>
+      @update-values="this.$emit('update-values', this.values)"
+    >
+    </profile-list>
   </div>
 </template>
 <script>
-import ProfileList from "@/components/ProfileList";
+import RequestMixin from "@/mixins/request.mixin"
 
-import levelJson from "@/assets/skill_level.json"
-import languagesJson from "@/assets/language_level.json"
+import ProfileList from "@/components/ProfileList";
 
 export default {
   name: "AutoComplete",
+  mixins: [RequestMixin],
   components: {
     ProfileList,
   },
@@ -121,39 +78,15 @@ export default {
     return {
       iconUrl: this.apiUrl,
       searchText: "",
-      contactContent: "",
       searchResults: [],
       showErrorMessage: false,
-      level: "1",
-      selectedResult: null,
-      levelSelection: levelJson,
-      languagesSelection: languagesJson,
     };
   },
   methods: {
-    async search() {
-      try {
-        const request = await this.axios.get(
-          `${this.apiUrl}/${this.type}s?search=${this.searchText}`,
-          {
-            headers: {
-              Authorization: `Bearer ${localStorage.getItem("token")}`,
-            },
-          }
-        );
-        if (request.status === 200) {
-          this.searchResults = request.data[`${this.type}s`];
-        }
-      } catch (error) {
-        console.error();
-        this.showErrorMessage = true;
-      }
-    },
-    addSelectedResult() {
+    addResult(result = false) {
+      if (!result) result = this.searchResults[0];
       if (
-        this.values
-          .map((item) => item[this.type].id)
-          .includes(this.selectedResult.id)
+        this.values.map((item) => item[this.type].name).includes(result.name)
       ) {
         return false;
       }
@@ -163,35 +96,19 @@ export default {
         profile_id: localStorage.getItem("user_id"),
       };
       if (this.type != "contacttype") {
-        newValue.level = this.level;
+        newValue.level = 1;
       } else {
-        newValue.content = this.contactContent;
+        newValue.content = "";
       }
-      newValue[this.type] = this.selectedResult;
-      changeValues.push(newValue);
+      newValue[this.type] = result;
+      changeValues.unshift(newValue);
       this.searchText = "";
       this.searchResults = [];
-      this.selectedResult = null;
-      this.level = 1;
       this.$emit("update-values", changeValues);
     },
-    editSelectedResult() {
-      this.values.map((item) => {
-        if (item[this.type].name == this.selectedResult.name) {
-          if (this.type != "contacttype") {
-            item.level = this.level;
-          } else {
-            item.content = this.contactContent;
-          }
-        }
-        return item;
-      });
-
-      this.$emit("update-values", this.values);
-    },
-    removeValue(valueId) {
+    removeValue(valueName) {
       const newValues = this.values.filter((value) => {
-        if (valueId === value[this.type].id) {
+        if (valueName === value[this.type].name) {
           return false;
         } else {
           return true;
@@ -199,21 +116,6 @@ export default {
       });
       this.$emit("update-values", newValues);
     },
-    editValue(value) {
-      this.searchResults = [value[this.type]];
-      this.selectedResult = {
-        ...value[this.type],
-        level: value.level,
-        edit: true,
-      };
-
-      if (this.type != "contacttype") {
-        this.level = value.level;
-      } else {
-        this.contactContent = value.content;
-      }
-      this.level = value.level;
-    },
   },
 };
 </script>

src/components/ProfileList.vue

@@ -1,54 +1,95 @@
 <!-- SPDX-License-Identifier: AGPL-3.0-or-later -->
 <template>
   <ul>
-    <li v-for="value in values" :key="value.id">
-      <img
-        style="max-width: 64px"
-        v-if="value[type].icon_url"
-        :src="iconUrl + value[type].icon_url"
-        :alt="`${value[type].name} Logo`"
-      />
-      {{ value[type].name }}
-      <span v-if="value.level">
-        <span v-if="type == 'skill'">({{ levelSelection[value.level] }})</span>
-        <span v-if="type == 'language'">({{ languagesSelection[value.level] }})</span>
-      </span>
-      <span v-if="value.content">:
-          <span v-if="value[type].name === 'E-Mail'">
-              <a :href="`mailto:${value.content}`">{{ value.content }}</a>
-          </span>
-          <span v-else>
-           {{ value.content }}
-          </span>
-        </span>
-
-      <button
-        v-if="this.editable"
-        type="button"
-        class="btn btn-outline-warning m-2"
-        aria-label="Bearbeiten"
-        @click="this.$emit('editValue', value)"
-      >
-        <img
-          src="/img/bootstrap-icons-1.5.0/pencil.svg"
-          alt="Bearbeiten Icon"
-        />
-      </button>
-      <button
-        v-if="this.editable"
-        type="button"
-        class="btn btn-outline-danger m-2"
-        aria-label="Löschen"
-        @click="this.$emit('removeValue', value[type].id)"
-      >
-        <img src="/img/bootstrap-icons-1.5.0/trash.svg" alt="Löschen Icon" />
-      </button>
+    <li v-for="(value, valueKey) in values" :key="value.id">
+      <div class="row m-1">
+        <div class="col">
+          <img
+            style="max-width: 64px"
+            v-if="value[type].icon_url"
+            :src="iconUrl + value[type].icon_url"
+            :alt="`${value[type].name} Logo`"
+          />
+          {{ value[type].name }}
+        </div>
+        <div class="col">
+          <div v-if="type == 'skill'">
+            <div v-if="editable">
+              <select
+                v-if="editableValues[valueKey]"
+                class="form-select"
+                aria-label="Selektiere dein Level"
+                v-model="editableValues[valueKey].level"
+                @input="$emit('update-values', editableValues)"
+              >
+                <option
+                  v-for="(value, key) in levelSelection"
+                  :value="key"
+                  :key="key"
+                >
+                  {{ value }}
+                </option>
+              </select>
+            </div>
+            <div v-else>({{ levelSelection[value.level] }})</div>
+          </div>
+          <div v-else-if="type == 'language'">
+            <div v-if="editable">
+              <div v-if="editable">
+              <select
+                v-if="editableValues[valueKey]"
+                class="form-select"
+                aria-label="Selektiere dein Level"
+                v-model="editableValues[valueKey].level"
+                @input="$emit('update-values', editableValues)"
+              >
+                <option
+                  v-for="(value, key) in languagesSelection"
+                  :value="key"
+                  :key="key"
+                >
+                  {{ value }}
+                </option>
+              </select>
+            </div>
+            </div>
+            <div v-else></div>
+          </div>
+          <div v-else-if="value.content">
+            <div v-if="editable">
+              <input class="form-control" v-model="editableValues[valueKey].content"/>
+            </div>
+            <div v-else>
+              <span v-if="value[type].name === 'E-Mail'">
+                <a :href="`mailto:${value.content}`">{{ value.content }}</a>
+              </span>
+              <span v-else>
+                {{ value.content }}
+              </span>
+            </div>
+          </div>
+        </div>
+        <div class="col">
+          <button
+            v-if="editable"
+            type="button"
+            class="btn btn-outline-danger"
+            aria-label="Löschen"
+            @click="$emit('removeValue', value[type].name)"
+          >
+            <img
+              src="/img/bootstrap-icons-1.5.0/trash.svg"
+              alt="Löschen Icon"
+            />
+          </button>
+        </div>
+      </div>
     </li>
   </ul>
 </template>
 <script>
-import levelJson from "@/assets/skill_level.json"
-import languagesJson from "@/assets/language_level.json"
+import levelJson from "@/assets/skill_level.json";
+import languagesJson from "@/assets/language_level.json";
 
 export default {
   name: "ProfileList",
@@ -58,6 +99,7 @@ export default {
     },
     values: {
       type: Array,
+      required: true,
     },
     editable: {
       type: Boolean,
@@ -69,7 +111,13 @@ export default {
       iconUrl: this.apiUrl,
       levelSelection: levelJson,
       languagesSelection: languagesJson,
-    }
-  }
+      editableValues: this.values,
+    };
+  },
+  watch: {
+    values: function (newVal) {
+      this.editableValues = newVal;
+    },
+  },
 };
 </script>

src/main.js

@@ -3,16 +3,12 @@ import { createApp } from 'vue/dist/vue.esm-bundler'
 import App from './App.vue'
 import router from './router'
 
-import axios from 'axios'
-
-import 'bootstrap/dist/css/bootstrap.min.css'
-import './assets/custom.css'
+import './assets/global.scss'
 
 const app = createApp(App)
 
 app.use(router)
 
-app.config.globalProperties.axios=axios
 app.config.globalProperties.apiUrl = window.ki.apiUrl
 
 app.mount('#app')

src/mixins/request.mixin.js

@@ -0,0 +1,123 @@
+import axios from "axios";
+
+export default {
+  methods: {
+    async submitLogin() {
+      this.showErrorMessage = false;
+      try {
+        const loginResult = await axios.post(
+          `${this.apiUrl}/users/login`,
+          {
+            username: this.username,
+            password: this.password,
+          }
+        );
+        if (loginResult.status === 200) {
+          this.showErrorMessage = false;
+          //success login
+          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(error);
+        this.showErrorMessage = true;
+      }
+    },
+    async search() {
+      try {
+        const request = await axios.get(
+          `${this.apiUrl}/${this.type}s?search=${this.searchText}`,
+          {
+            headers: {
+              Authorization: `Bearer ${localStorage.getItem("token")}`,
+            },
+          }
+        );
+        if (request.status === 200) {
+          this.searchResults = request.data[`${this.type}s`];
+          if (
+            !this.values
+              .map((item) => item[this.type].name.toLowerCase())
+              .includes(this.searchText.toLowerCase())
+          ) {
+            this.searchResults.unshift({ name: this.searchText });
+          }
+        }
+      } catch (error) {
+        console.error();
+        this.showErrorMessage = true;
+      }
+    },
+    async initEditPage() {
+      try {
+        const userProfile = await axios.get(
+          `${this.apiUrl}/users/${localStorage.getItem("user_id")}/profile`,
+          {
+            headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
+          }
+        );
+        this.profile = userProfile.data.profile;
+      } catch (error) {
+        console.error(error);
+      }
+    },
+    async submitFormEdit() {
+      try {
+        const formSubmitResult = await axios.post(
+          `${this.apiUrl}/users/${localStorage.getItem("user_id")}/profile`,
+          this.profile,
+          {
+            headers: {
+              Authorization: `Bearer ${localStorage.getItem("token")}`,
+            },
+          }
+        );
+        if (formSubmitResult.status === 200) {
+          // success
+          this.showSuccessMessage = true;
+        } else {
+          // failure
+          this.showErrorMessage = true;
+        }
+      } catch (error) {
+        console.error(error);
+        this.showErrorMessage = true;
+      }
+    },
+    async initViewPage() {
+      try {
+        const userProfile = await axios.get(
+          `${this.apiUrl}/users/${this.$route.params.memberId}/profile`,
+          {
+            headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
+          }
+        );
+        this.profile = userProfile.data.profile;
+      } catch (error) {
+        console.error(error);
+      }
+    },
+    async submitSearch() {
+      this.showErrorMessage = false;
+      try {
+        let url = `${this.apiUrl}/users/profiles`;
+        if (this.searchText != "") {
+          url += `?nickname=${this.searchText}`;
+        }
+        const result = await axios.get(url, {
+          headers: {
+            Authorization: `Bearer ${localStorage.getItem("token")}`,
+          },
+        });
+        this.searchResults = result.data.profiles;
+        this.searchTotal = result.data.total;
+      } catch (error) {
+        console.error(error);
+        this.showErrorMessage = true;
+      }
+    },
+  },
+}

src/router/index.js

@@ -13,10 +13,7 @@ const routes = [
       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}})

src/views/Index.vue

@@ -43,10 +43,11 @@
   </div>
 </template>
 <script>
-import axios from "axios";
+import RequestMixin from "@/mixins/request.mixin"
 
 export default {
   name: "Index",
+  mixins: [RequestMixin],
   data() {
     return {
       showErrorMessage: false,
@@ -54,35 +55,5 @@ export default {
       password: "",
     };
   },
-  methods: {
-    async submitLogin() {
-      this.showErrorMessage = false;
-      try {
-        console.log(this.apiUrl)
-        const loginResult = await axios.post(
-          `${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.data.token);
-          localStorage.setItem("user_id", loginResult.data.user_id);
-          this.$router.push({ path: "/s/search" });
-        } else {
-          this.showErrorMessage = true;
-        }
-      } catch (error) {
-        console.error(error);
-        this.showErrorMessage = true;
-      }
-    },
-  },
 };
 </script>

src/views/Search.vue

@@ -63,8 +63,11 @@
   </div>
 </template>
 <script>
+import RequestMixin from "@/mixins/request.mixin"
+
 export default {
   name: "Search",
+  mixins: [RequestMixin],
   data() {
     return {
       showErrorMessage: false,
@@ -77,26 +80,5 @@ export default {
     if (this.$route.query.query) this.searchText = this.$route.query.query;
     this.submitSearch();
   },
-  methods: {
-    async submitSearch() {
-      this.showErrorMessage = false;
-      try {
-        let url = `${this.apiUrl}/users/profiles`;
-        if (this.searchText != "") {
-          url += `?nickname=${this.searchText}`;
-        }
-        const result = await this.axios.get(url, {
-          headers: {
-            Authorization: `Bearer ${localStorage.getItem("token")}`,
-          },
-        });
-        this.searchResults = result.data.profiles;
-        this.searchTotal = result.data.total;
-      } catch (error) {
-        console.error(error);
-        this.showErrorMessage = true;
-      }
-    },
-  },
 };
 </script>

src/views/profile/Edit.vue

@@ -2,20 +2,32 @@
 <template>
   <div class="container">
     <h1>Profil bearbeiten</h1>
-    <form @submit.prevent="submitForm()">
+    <form @submit.prevent="submitFormEdit()">
       <div class="row">
         <div class="col">
-          <input type="radio" id="false" :value="false" v-model="profile.visible" class="mr-2"/>
+          <input
+            type="radio"
+            id="false"
+            :value="false"
+            v-model="profile.visible"
+            class="mr-2"
+          />
           <label for="false" class="m-2 fw-bold"> Nicht öffentlich</label>
         </div>
         <div class="col">
-          <input type="radio" id="true" :value="true" v-model="profile.visible" />
+          <input
+            type="radio"
+            id="true"
+            :value="true"
+            v-model="profile.visible"
+          />
           <label for="true" class="m-2 fw-bold"> Öffentlich</label>
         </div>
       </div>
       <div id="visibilityHelp" class="form-text">
-            Erst wenn du dein Profil Öffentlich stellst, können andere Genoss:innen darauf zugreifen oder es in der Suche finden.
-          </div>
+        Erst wenn du dein Profil Öffentlich stellst, können andere Genoss:innen
+        darauf zugreifen oder es in der Suche finden.
+      </div>
       <div class="row">
         <div class="col-6 col-xs-12">
           <label for="nickname" class="form-label fw-bold">Nickname:</label>
@@ -82,16 +94,16 @@
       ></auto-complete>
 
       <div class="col-12 col-xs-12">
-          <label for="availability" class="form-label fw-bold"
-            >Ich bin für Anfragen verfügbar:</label
-          >
-          <textarea
-            class="form-control"
-            id="availability"
-            rows="3"
-            v-model="profile.availability"
-          ></textarea>
-        </div>
+        <label for="availability" class="form-label fw-bold"
+          >Ich bin für Anfragen verfügbar:</label
+        >
+        <textarea
+          class="form-control"
+          id="availability"
+          rows="3"
+          v-model="profile.availability"
+        ></textarea>
+      </div>
 
       <auto-complete
         type="contacttype"
@@ -130,7 +142,9 @@
         </div>
       </div>
 
-      <button type="submit" class="btn btn-outline-success mb-4 mt-4 col-12">Speichern</button>
+      <button type="submit" class="btn btn-outline-success mb-4 mt-4 col-12">
+        Speichern
+      </button>
       <div
         class="alert alert-danger mb-4 mt-4"
         role="alert"
@@ -149,11 +163,13 @@
   </div>
 </template>
 <script>
-import axios from "axios";
+import RequestMixin from "@/mixins/request.mixin"
+
 import AutoComplete from "@/components/AutoComplete";
 
 export default {
   name: "profileEdit",
+  mixins: [RequestMixin],
   components: {
     AutoComplete,
   },
@@ -181,46 +197,7 @@ export default {
     };
   },
   async created() {
-    try {
-      const userProfile = await axios.get(
-        `${this.apiUrl}/users/${localStorage.getItem(
-          "user_id"
-        )}/profile`,
-        {
-          headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
-        }
-      );
-      this.profile = userProfile.data.profile;
-    } catch (error) {
-      console.error(error);
-    }
-  },
-  methods: {
-    async submitForm() {
-      try {
-        const formSubmitResult = await axios.post(
-          `${this.apiUrl}/users/${localStorage.getItem(
-            "user_id"
-          )}/profile`,
-          this.profile,
-          {
-            headers: {
-              Authorization: `Bearer ${localStorage.getItem("token")}`,
-            },
-          }
-        );
-        if (formSubmitResult.status === 200) {
-          // success
-          this.showSuccessMessage = true;
-        } else {
-          // failure
-          this.showErrorMessage = true;
-        }
-      } catch (error) {
-        console.error(error);
-        this.showErrorMessage = true;
-      }
-    }
+    await this.initEditPage();
   },
 };
 </script>

src/views/profile/View.vue

@@ -28,15 +28,20 @@
       :values="profile.languages"
       type="language"
     ></profile-list>
-    <h3>Meine Location:</h3>
-    {{profile.address.city}} ({{profile.address.postcode}}), {{profile.address.country}}
+    <div v-if="profile.address">
+      <h3>Meine Location:</h3>
+      {{profile.address.city}} ({{profile.address.postcode}}), {{profile.address.country}}
+    </div>
   </div>
 </template>
 <script>
+import RequestMixin from "@/mixins/request.mixin"
+
 import ProfileList from "@/components/ProfileList";
 
 export default {
   name: "profileView",
+  mixins: [RequestMixin],
   components: {
     ProfileList,
   },
@@ -46,17 +51,7 @@ export default {
     };
   },
   async created() {
-    try {
-      const userProfile = await this.axios.get(
-        `${this.apiUrl}/users/${this.$route.params.memberId}/profile`,
-        {
-          headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
-        }
-      );
-      this.profile = userProfile.data.profile;
-    } catch (error) {
-      console.error(error);
-    }
-  },
+    await this.initViewPage();
+  }
 };
 </script>