From 513d204d58c13c1a3602619430e3f6ad9319fc12 Mon Sep 17 00:00:00 2001
From: scammo <samuel.brinkmann@googlemail.com>
Date: Wed, 18 Aug 2021 14:34:28 +0200
Subject: [PATCH] #17 #16

---
 src/components/AutoComplete.vue | 122 ++++++----------------------
 src/components/ProfileList.vue  | 140 +++++++++++++++++++++-----------
 src/views/Index.vue             |   4 -
 src/views/profile/Edit.vue      |  54 +++++++-----
 4 files changed, 149 insertions(+), 171 deletions(-)

diff --git a/src/components/AutoComplete.vue b/src/components/AutoComplete.vue
index 1a374b2..3b6b779 100644
--- a/src/components/AutoComplete.vue
+++ b/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,17 +46,15 @@
       :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 levelJson from "@/assets/skill_level.json"
-import languagesJson from "@/assets/language_level.json"
-
 export default {
   name: "AutoComplete",
   components: {
@@ -121,13 +75,8 @@ export default {
     return {
       iconUrl: this.apiUrl,
       searchText: "",
-      contactContent: "",
       searchResults: [],
       showErrorMessage: false,
-      level: "1",
-      selectedResult: null,
-      levelSelection: levelJson,
-      languagesSelection: languagesJson,
     };
   },
   methods: {
@@ -143,17 +92,23 @@ export default {
         );
         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;
       }
     },
-    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 +118,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 +138,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>
diff --git a/src/components/ProfileList.vue b/src/components/ProfileList.vue
index 36e91fa..4e266a8 100644
--- a/src/components/ProfileList.vue
+++ b/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>
diff --git a/src/views/Index.vue b/src/views/Index.vue
index d533112..0ecf475 100644
--- a/src/views/Index.vue
+++ b/src/views/Index.vue
@@ -58,7 +58,6 @@ export default {
     async submitLogin() {
       this.showErrorMessage = false;
       try {
-        console.log(this.apiUrl)
         const loginResult = await axios.post(
           `${this.apiUrl}/users/login`,
           {
@@ -66,10 +65,7 @@ export default {
             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);
diff --git a/src/views/profile/Edit.vue b/src/views/profile/Edit.vue
index 32b0a6c..2a5beca 100644
--- a/src/views/profile/Edit.vue
+++ b/src/views/profile/Edit.vue
@@ -5,17 +5,29 @@
     <form @submit.prevent="submitForm()">
       <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"
@@ -183,9 +197,7 @@ export default {
   async created() {
     try {
       const userProfile = await axios.get(
-        `${this.apiUrl}/users/${localStorage.getItem(
-          "user_id"
-        )}/profile`,
+        `${this.apiUrl}/users/${localStorage.getItem("user_id")}/profile`,
         {
           headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
         }
@@ -199,9 +211,7 @@ export default {
     async submitForm() {
       try {
         const formSubmitResult = await axios.post(
-          `${this.apiUrl}/users/${localStorage.getItem(
-            "user_id"
-          )}/profile`,
+          `${this.apiUrl}/users/${localStorage.getItem("user_id")}/profile`,
           this.profile,
           {
             headers: {
@@ -220,7 +230,7 @@ export default {
         console.error(error);
         this.showErrorMessage = true;
       }
-    }
+    },
   },
 };
 </script>