#17 #16

2021-08-18 14:34:28 +02:00 · 2021-08-18 14:34:28 +02:00 · 513d204d58
commit 513d204d58
parent 096c317da8
4 changed files with 149 additions and 171 deletions
--- 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>
--- 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>
--- 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);
--- 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>