login, profile edit

src/views/profile/Edit.vue

@@ -22,21 +22,70 @@
             v-model="pronouns"
             required
           />
-        <div id="emailHelp" class="form-text">Z.B.: Er/Ihn, Sie/Ihr, Es etc..</div>
+          <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="freetext"></textarea>
+          <label for="freetext" class="form-label">Freitext Vorstellung:</label>
+          <textarea
+            class="form-control"
+            id="freetext"
+            rows="3"
+            v-model="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="volunteerwork"></textarea>
+          <label for="volunteerwork" class="form-label"
+            >Ehrentamtliche Arbeit:</label
+          >
+          <textarea
+            class="form-control"
+            id="volunteerwork"
+            rows="3"
+            v-model="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 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>
 
-      <button type="submit" class="btn btn-primary mb-4">Speichern</button>
+      <button type="submit" class="btn btn-primary mb-4 mt-4">Speichern</button>
       <div
         class="alert alert-danger mb-4 mt-4"
         role="alert"
@@ -48,10 +97,12 @@
   </div>
 </template>
 <script>
+import axios from "axios";
+
 export default {
   name: "profileEdit",
   created() {
-      // get user profile by jwt tocken and fill the form details
+    // get user profile by jwt tocken and fill the form details
   },
   data() {
     return {
@@ -60,10 +111,49 @@ export default {
       pronouns: "",
       freetext: "",
       volunteerwork: "",
+      languages: [],
+      searchLanguagesText: "",
+      skills: [
+        { id: 3, name: "PHP" },
+        { id: 2, name: "PHP" },
+      ],
+      searchSkillsText: "",
+      searchSkillResults: [],
     };
   },
   methods: {
     submitForm() {},
+    async searchSkills() {
+      this.searchSkillResults = [{ id: 5, name: "JavaScript" }]
+      try {
+        const skillResult = await axios.get(
+          `${process.env.VUE_APP_API_URL}/skills?search=${this.searchSkillsText}`
+        );
+        console.log(skillResult);
+        if (skillResult.status === 200) {
+          this.searchSkillResults = skillResult.skills;
+        }
+      } catch (error) {
+        console.error();
+        this.showErrorMessage = true;
+      }
+    },
+    addSkill(skill){
+      if(this.skills.includes(skill)) return false
+      this.skills.push(skill)
+      this.searchSkillsText = ''
+      this.searchSkillResults = []
+    },
+    removeSkill(skillId) {
+      this.skills = this.skills.filter((skill) => {
+        if (skillId === skill.id) {
+          return false;
+        } else {
+          return true;
+        }
+      });
+    },
+    searchLanguages() {},
   },
 };
 </script>