Profil ansehen Technisch Abgeschlossen

src/components/AutoComplete.vue

@@ -79,44 +79,23 @@
         </li>
       </ul>
     </div>
-    <ul>
+    <profile-list
-      <li v-for="value in values" :key="value.id">
+      :values="values"
-        <img
+      :type="type"
-          style="max-width: 64px"
+      :editable="true"
-          v-if="value[type].icon_url"
+      @edit-value="editValue($event)"
-          :src="iconUrl + value[type].icon_url"
+      @remove-value="removeValue($event)"
-          :alt="`${value[type].name} Logo`"
+    ></profile-list>
-        />
-        {{ value[type].name }}
-        <span v-if="value.level">({{ value.level }})</span>
-        <span v-if="value.content">{{ value.content }}</span>
-
-        <button
-          type="button"
-          class="btn btn-outline-warning m-2"
-          aria-label="Bearbeiten"
-          @click="editValue(value)"
-        >
-          <img
-            src="/img/bootstrap-icons-1.5.0/pencil.svg"
-            alt="Bearbeiten Icon"
-          />
-        </button>
-        <button
-          type="button"
-          class="btn btn-outline-danger m-2"
-          aria-label="Löschen"
-          @click="removeValue(value[type].id)"
-        >
-          <img src="/img/bootstrap-icons-1.5.0/trash.svg" alt="Löschen Icon" />
-        </button>
-      </li>
-    </ul>
   </div>
 </template>
 <script>
+import ProfileList from "@/components/ProfileList";
+
 export default {
   name: "AutoComplete",
+  components: {
+    ProfileList,
+  },
   props: {
     type: {
       type: String,
@@ -186,11 +165,11 @@ export default {
     },
     editSelectedResult() {
       this.values.map((item) => {
-        if(item[this.type].name == this.selectedResult.name){
+        if (item[this.type].name == this.selectedResult.name) {
           if (this.type != "contacttype") {
-            item.level = this.level
+            item.level = this.level;
           } else {
-            item.content = this.contactContent
+            item.content = this.contactContent;
           }
         }
         return item;

src/components/ProfileList.vue

@@ -0,0 +1,66 @@
+<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">({{ value.level }})</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>
+  </ul>
+</template>
+<script>
+export default {
+  name: "ProfileList",
+  props: {
+    type: {
+      type: String,
+    },
+    values: {
+      type: Array,
+    },
+    editable: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      iconUrl: process.env.VUE_APP_API_URL
+    }
+  }
+};
+</script>

src/router/index.js

@@ -28,7 +28,7 @@ const routes = [
         component: Search
       },
       {
-        path: 'profile/:member',
+        path: 'profile/:memberId',
         name: 'ProfileMember',
         component: View
       },

src/views/Search.vue

@@ -9,7 +9,6 @@
             class="form-control"
             id="searchText"
             v-model="searchText"
-            required
           />
         </div>
         <div class="col">
@@ -29,7 +28,6 @@
   </div>
 </template>
 <script>
-import axios from "axios";
 
 export default {
   name: "Search",
@@ -43,21 +41,18 @@ export default {
     async submitSearch() {
       this.showErrorMessage = false;
       try {
-        const loginResult = await axios.post(
+        const result = await this.axios.get(
-          `${process.env.VUE_APP_API_URL}/search`,
+          `${process.env.VUE_APP_API_URL}/users/profiles`,
-          // Beispiel Hafte Daten
           {
-            searchText: this.searchText,
+            headers: {
+              Authorization: `Bearer ${localStorage.getItem("token")}`,
+            },
           }
         );
-        if (loginResult.status === 200) {
+        console.log(result)
-          //success login
+       
-          this.router.push({ path: "s/search" });
-        } else {
-          this.showErrorMessage = true;
-        }
       } catch (error) {
-        console.error();
+        console.error(error);
         this.showErrorMessage = true;
       }
     },

src/views/profile/Edit.vue

@@ -101,7 +101,7 @@
 
       <div class="row">
         <div class="col">
-          <label for="pzl" class="form-label fw-bold">PZL</label>
+          <label for="pzl" class="form-label fw-bold">PLZ</label>
           <input
             type="text"
             class="form-control"
@@ -150,6 +150,7 @@
 <script>
 import axios from "axios";
 import AutoComplete from "@/components/AutoComplete";
+
 export default {
   name: "profileEdit",
   components: {

src/views/profile/View.vue

@@ -1,11 +1,59 @@
 <template>
-    <div class="container">
+  <div v-if="profile" class="container">
-        <h1>Profil Ansehen</h1>
+    <h1>{{profile.nickname}}({{profile.pronouns}})</h1>
-        
+    <p><label class="fw-bold">Vorstellung: </label> {{profile.freetext}}</p>
+    <p><label class="fw-bold">Ehrentamtliche Arbeit: </label> {{profile.volunteerwork}}</p>
+    <p><label class="fw-bold">Verfügbarkeit: </label> {{profile.availability}}</p>
+    <h3>Meine Skills:</h3>
+    <profile-list
+      :values="profile.skills"
+      type="skill"
+    ></profile-list>
+    <h3>Ich Suche:</h3>
+    <profile-list
+      :values="profile.searchtopics"
+      type="skill"
+    ></profile-list>
+    <h3>Meine Kontaktmöglichkeiten:</h3>
+    <profile-list
+      :values="profile.contacts"
+      type="contacttype"
+    ></profile-list>
+    <h3>Ich Spreche Folgende Sprachen:</h3>
+    <profile-list
+      :values="profile.languages"
+      type="language"
+    ></profile-list>
+    <h3>Meine Location:</h3>
+    {{profile.address.city}} ({{profile.address.postcode}}), {{profile.address.country}}
   </div>
 </template>
 <script>
+import ProfileList from "@/components/ProfileList";
+
 export default {
-    name: 'profileView'
+  name: "profileView",
-}
+  components: {
+    ProfileList,
+  },
+  data() {
+    return {
+        profile: null
+    };
+  },
+  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`,
+        {
+          headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
+        }
+      );
+      this.profile = userProfile.data.profile;
+    } catch (error) {
+      console.error(error);
+    }
+  },
+};
 </script>