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">
          <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" />
          <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>
      <div class="row">
        <div class="col-6 col-xs-12">
          <label for="nickname" class="form-label fw-bold">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="pronouns" class="form-label fw-bold">Pronomen:</label>
          <input
            type="text"
            class="form-control"
            id="pronouns"
            v-model="profile.pronouns"
          />
          <div for="pronouns" 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 fw-bold">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 fw-bold"
            >Ehrentamtliche Arbeit:</label
          >
          <textarea
            class="form-control"
            id="volunteerwork"
            rows="3"
            v-model="profile.volunteerwork"
          ></textarea>
        </div>
      </div>
      <auto-complete
        type="skill"
        label="Deine Fähigkeiten (Autocomplete)"
        :values="profile.skills"
        @update-values="profile.skills = $event"
      ></auto-complete>
      <auto-complete
        type="language"
        label="Deine Sprachen (Autocomplete)"
        :values="profile.languages"
        @update-values="profile.languages = $event"
      ></auto-complete>
      <auto-complete
        type="skill"
        label="Ich Suche"
        :values="profile.searchtopics"
        @update-values="profile.searchtopics = $event"
      ></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>

      <auto-complete
        type="contacttype"
        label="Kontaktmöglichkeiten"
        :values="profile.contacts"
        @update-values="profile.contacts = $event"
      ></auto-complete>

      <div class="row">
        <div class="col">
          <label for="pzl" class="form-label fw-bold">PLZ</label>
          <input
            type="text"
            class="form-control"
            id="pzl"
            v-model="profile.address.postcode"
          />
        </div>
        <div class="col">
          <label for="city" class="form-label fw-bold">Stadt</label>
          <input
            type="text"
            class="form-control"
            id="city"
            v-model="profile.address.city"
          />
        </div>
        <div class="col">
          <label for="country" class="form-label fw-bold">Land</label>
          <input
            type="text"
            class="form-control"
            id="country"
            v-model="profile.address.country"
          />
        </div>
      </div>

      <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"
        v-if="showErrorMessage"
      >
        Es ist Fehler aufgetreten
      </div>
      <div
        class="alert alert-success mb-4 mt-4"
        role="alert"
        v-if="showSuccessMessage"
      >
        Deine Änderungen wurden erfolgreich gespeichert
      </div>
    </form>
  </div>
</template>
<script>
import axios from "axios";
import AutoComplete from "@/components/AutoComplete";

export default {
  name: "profileEdit",
  components: {
    AutoComplete,
  },
  data() {
    return {
      showErrorMessage: false,
      showSuccessMessage: false,
      profile: {
        visible: false,
        nickname: "",
        pronouns: "",
        volunteerwork: "",
        freetext: "",
        availability: "",
        address: {
          postcode: "",
          city: "",
          country: "",
        },
        skills: [],
        languages: [],
        searchtopics: [],
        contacts: [],
      },
    };
  },
  async created() {
    try {
      const userProfile = await axios.get(
        `${this.apiUrl}/users/${localStorage.getItem(
          "user_id"
        )}/profile`,
        {
          headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
        }
      );
      this.profile = userProfile.data.profile;
    } catch (error) {
      console.error(error);
    }
  },
  methods: {
    async submitForm() {
      try {
        const formSubmitResult = await axios.post(
          `${this.apiUrl}/users/${localStorage.getItem(
            "user_id"
          )}/profile`,
          this.profile,
          {
            headers: {
              Authorization: `Bearer ${localStorage.getItem("token")}`,
            },
          }
        );
        if (formSubmitResult.status === 200) {
          // success
          this.showSuccessMessage = true;
        } else {
          // failure
          this.showErrorMessage = true;
        }
      } catch (error) {
        console.error(error);
        this.showErrorMessage = true;
      }
    }
  },
};
</script>