ki-frontend/src/views/profile/Edit.vue

<template>
  <div class="container">
    <h1>Profil Ändern</h1>
    <form @submit.prevent="submitForm()">
      <div class="row">
        <div class="col-6 col-xs-12">
          <label for="nickname" class="form-label">Nickname:</label>
          <input
            type="text"
            class="form-control"
            id="nickname"
            v-model="profile.nickname"
            required
          />
        </div>
        <div class="col-6 col-xs-12">
          <label for="nickname" class="form-label">Pronomen:</label>
          <input
            type="text"
            class="form-control"
            id="pronouns"
            v-model="profile.pronouns"
            required
          />
          <div id="emailHelp" class="form-text">
            Z.B.: Er/Ihn, Sie/Ihr, Es etc..
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-12 col-xs-12">
          <label for="freetext" class="form-label">Freitext Vorstellung:</label>
          <textarea
            class="form-control"
            id="freetext"
            rows="3"
            v-model="profile.freetext"
          ></textarea>
        </div>
        <div class="col-12 col-xs-12">
          <label for="volunteerwork" class="form-label"
            >Ehrentamtliche Arbeit:</label
          >
          <textarea
            class="form-control"
            id="volunteerwork"
            rows="3"
            v-model="profile.volunteerwork"
          ></textarea>
        </div>
      </div>
      <div>
        <label for="skills" class="form-label"
          >Deine Fähigkeiten: (Autocomplete)</label
        >
        <input
          autocomplete="off"
          type="text"
          class="form-control"
          id="pronouns"
          v-model="searchSkillsText"
          @keyup="searchSkills()"
        />
        <div class="" v-if="searchSkillResults">
          <ul class="list-group">
            <li
              class="list-group-item"
              v-for="result in searchSkillResults"
              :key="result.id"
              @click="addSkill(result)"
            >
              {{ result.name }}
            </li>
          </ul>
        </div>
        <div>
          <span
            v-for="skill in profile.skills"
            :key="skill.id"
            class="badge bg-primary m-2"
          >
            {{ skill.name }}
            <button
              type="button"
              class="btn-close"
              aria-label="Close"
              @click="removeSkill(skill.id)"
            ></button>
          </span>
        </div>
      </div>
      <div>
        <label for="skills" class="form-label"
          >Deine Sprachen: (Autocomplete)</label
        >
        <input
          autocomplete="off"
          type="text"
          class="form-control"
          id="pronouns"
          v-model="searchLanguagesText"
          @keyup="searchLanguages()"
        />
        <div class="" v-if="searchLanguagesResult">
          <ul class="list-group">
            <li
              class="list-group-item"
              v-for="result in searchLanguagesResult"
              :key="result.id"
              @click="addLanguage(result)"
            >
              {{ result.name }}
            </li>
          </ul>
        </div>
        <div>
          <span
            v-for="language in profile.languages"
            :key="language.id"
            class="badge bg-primary m-2"
          >
            {{ language.name }}
            <button
              type="button"
              class="btn-close"
              aria-label="Close"
              @click="removeLanguage(language.id)"
            ></button>
          </span>
        </div>
      </div>

      <button type="submit" class="btn btn-primary mb-4 mt-4">Speichern</button>
      <div
        class="alert alert-danger mb-4 mt-4"
        role="alert"
        v-if="showErrorMessage"
      >
        Es ist Fehler aufgetreten
      </div>
    </form>
  </div>
</template>
<script>
import axios from "axios";

export default {
  name: "profileEdit",
  data() {
    return {
      showErrorMessage: false,

      profile: {
        nickname: "",
        pronouns: "",
        volunteerwork: "",
        freetext: "",
        created: "",
        updated: "",
        address: {
          name: "",
          street: "",
          house_number: "",
          additional: "",
          postcode: "",
          city: "",
          country: "",
        },
        skills: [],
        languages: [],
      },
      searchLanguagesText: "",
      searchLanguagesResult: [],
      searchSkillsText: "",
      searchSkillResults: [],
    };
  },
  async created() {
    try {
      const userProfile = await axios.get(
        `${process.env.VUE_APP_API_URL}/users/${localStorage.getItem(
          "user_id"
        )}/profile`,
        {
          headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
        }
      );
      console.log(userProfile.data);
      this.profile.nickname = userProfile.data.profile.nickname;
      this.profile.pronouns = userProfile.data.profile.pronouns;
      this.profile.volunteerwork = userProfile.data.profile.volunteerwork;
      this.profile.freetext = userProfile.data.profile.freetext;
    } catch (error) {
      console.error(error);
    }
  },
  methods: {
    async submitForm() {
      try {
        const formSubmitResult = await axios.post(
          `${process.env.VUE_APP_API_URL}/users/${localStorage.getItem(
            "user_id"
          )}/profile`,
          {
            nickname: this.profile.nickname,
            pronouns: this.profile.pronouns,
            volunteerwork: this.profile.volunteerwork,
            freetext: this.profile.freetext,
            skills: this.profile.skills,
            languages: this.profile.languages,
          },
          {
            headers: {
              Authorization: `Bearer ${localStorage.getItem("token")}`,
            },
          }
        );
        console.log(formSubmitResult);
        if (formSubmitResult.status === 200) {
          // success
        } else {
          // failure
        }
      } catch (error) {
        console.error();
        this.showErrorMessage = true;
      }
    },
    async searchSkills() {
      try {
        const skillResult = await axios.get(
          `${process.env.VUE_APP_API_URL}/skills?search=${this.searchSkillsText}`
        );
        if (skillResult.status === 200) {
          this.searchSkillResults = skillResult.data.skills;
        }
      } catch (error) {
        console.error();
        this.showErrorMessage = true;
      }
    },
    addSkill(skill) {
      console.log(this.profile.skills.map((item) => item.id));
      if (this.profile.skills.map((item) => item.id).includes(skill.id))
        return false;
      this.profile.skills.push(skill);
      this.searchSkillsText = "";
      this.searchSkillResults = [];
    },
    removeSkill(skillId) {
      this.profile.skills = this.profile.skills.filter((skill) => {
        if (skillId === skill.id) {
          return false;
        } else {
          return true;
        }
      });
    },
    async searchLanguages() {
      try {
        const languageResult = await axios.get(
          `${process.env.VUE_APP_API_URL}/languages?search=${this.searchLanguagesText}`
        );
        if (languageResult.status === 200) {
          this.searchLanguagesResult = languageResult.data.languages;
        }
      } catch (error) {
        console.error();
        this.showErrorMessage = true;
      }
    },

    addLanguage(language) {
      if (this.profile.languages.map((item) => item.id).includes(language.id))
        return false;
      this.profile.languages.push(language);
      this.searchLanguagesText = "";
      this.searchLanguagesResult = [];
    },
    removeLanguage(languageId) {
      this.profile.languages = this.profile.languages.filter((language) => {
        if (languageId === language.id) {
          return false;
        } else {
          return true;
        }
      });
    },
  },
};
</script>