#17 #16

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="{
+          @click="addResult(result)"
-            'bg-info':
-              selectedResult &&
-              selectedResult.id &&
-              result.id === selectedResult.id,
-          }"
-          @click="selectedResult = 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
+        this.values.map((item) => item[this.type].name).includes(result.name)
-          .map((item) => item[this.type].id)
-          .includes(this.selectedResult.id)
       ) {
         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;
+      newValue[this.type] = result;
-      changeValues.push(newValue);
+      changeValues.unshift(newValue);
       this.searchText = "";
       this.searchResults = [];
-      this.selectedResult = null;
-      this.level = 1;
       this.$emit("update-values", changeValues);
     },
-    editSelectedResult() {
+    removeValue(valueName) {
-      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) {
       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>

src/components/ProfileList.vue

@@ -1,7 +1,9 @@
 <!-- SPDX-License-Identifier: AGPL-3.0-or-later -->
 <template>
   <ul>
-    <li v-for="value in values" :key="value.id">
+    <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"
@@ -9,46 +11,85 @@
             :alt="`${value[type].name} Logo`"
           />
           {{ value[type].name }}
-      <span v-if="value.level">
+        </div>
-        <span v-if="type == 'skill'">({{ levelSelection[value.level] }})</span>
+        <div class="col">
-        <span v-if="type == 'language'">({{ languagesSelection[value.level] }})</span>
+          <div v-if="type == 'skill'">
-      </span>
+            <div v-if="editable">
-      <span v-if="value.content">:
+              <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>
-        </span>
+            </div>
-
+          </div>
+        </div>
+        <div class="col">
           <button
-        v-if="this.editable"
+            v-if="editable"
             type="button"
-        class="btn btn-outline-warning m-2"
+            class="btn btn-outline-danger"
-        aria-label="Bearbeiten"
+            aria-label="Löschen"
-        @click="this.$emit('editValue', value)"
+            @click="$emit('removeValue', value[type].name)"
           >
             <img
-          src="/img/bootstrap-icons-1.5.0/pencil.svg"
+              src="/img/bootstrap-icons-1.5.0/trash.svg"
-          alt="Bearbeiten Icon"
+              alt="Löschen Icon"
             />
           </button>
-      <button
+        </div>
-        v-if="this.editable"
+      </div>
-        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>
-import levelJson from "@/assets/skill_level.json"
+import levelJson from "@/assets/skill_level.json";
-import languagesJson from "@/assets/language_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/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);

src/views/profile/Edit.vue

@@ -5,16 +5,28 @@
     <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.
+        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">
@@ -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(
+        `${this.apiUrl}/users/${localStorage.getItem("user_id")}/profile`,
-          "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(
+          `${this.apiUrl}/users/${localStorage.getItem("user_id")}/profile`,
-            "user_id"
-          )}/profile`,
           this.profile,
           {
             headers: {
@@ -220,7 +230,7 @@ export default {
         console.error(error);
         this.showErrorMessage = true;
       }
-    }
+    },
   },
 };
 </script>