funktionalität edit

package-lock.json

@@ -5,7 +5,6 @@
   "requires": true,
   "packages": {
     "": {
-      "name": "ki-frontend",
       "version": "0.1.0",
       "dependencies": {
         "axios": "^0.21.1",
@@ -2010,7 +2009,6 @@
         "thread-loader": "^2.1.3",
         "url-loader": "^2.2.0",
         "vue-loader": "^15.9.2",
-        "vue-loader-v16": "npm:vue-loader@^16.1.0",
         "vue-style-loader": "^4.1.2",
         "webpack": "^4.0.0",
         "webpack-bundle-analyzer": "^3.8.0",
@@ -2186,7 +2184,6 @@
         "merge-source-map": "^1.1.0",
         "postcss": "^7.0.14",
         "postcss-selector-parser": "^6.0.2",
-        "prettier": "^1.18.2",
         "source-map": "~0.6.1",
         "vue-template-es2015-compiler": "^1.9.0"
       },
@@ -3584,7 +3581,6 @@
       "dependencies": {
         "anymatch": "~3.1.1",
         "braces": "~3.0.2",
-        "fsevents": "~2.3.1",
         "glob-parent": "~5.1.0",
         "is-binary-path": "~2.1.0",
         "is-glob": "~4.0.1",
@@ -8246,9 +8242,6 @@
       "resolved": "https://registry.npm.taobao.org/jsonfile/download/jsonfile-4.0.0.tgz?cache=0&sync_timestamp=1604161824632&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fjsonfile%2Fdownload%2Fjsonfile-4.0.0.tgz",
       "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
       "dev": true,
-      "dependencies": {
-        "graceful-fs": "^4.1.6"
-      },
       "optionalDependencies": {
         "graceful-fs": "^4.1.6"
       }
@@ -13610,10 +13603,8 @@
       "integrity": "sha1-EmfmxV4Lm1vkTCAjrtVDeiwmxFM=",
       "dev": true,
       "dependencies": {
-        "chokidar": "^3.4.1",
         "graceful-fs": "^4.1.2",
-        "neo-async": "^2.5.0",
+        "neo-async": "^2.5.0"
-        "watchpack-chokidar2": "^2.0.1"
       },
       "optionalDependencies": {
         "chokidar": "^3.4.1",
@@ -13675,7 +13666,6 @@
         "anymatch": "^2.0.0",
         "async-each": "^1.0.1",
         "braces": "^2.3.2",
-        "fsevents": "^1.2.7",
         "glob-parent": "^3.1.0",
         "inherits": "^2.0.3",
         "is-binary-path": "^1.0.0",
@@ -13962,7 +13952,6 @@
         "anymatch": "^2.0.0",
         "async-each": "^1.0.1",
         "braces": "^2.3.2",
-        "fsevents": "^1.2.7",
         "glob-parent": "^3.1.0",
         "inherits": "^2.0.3",
         "is-binary-path": "^1.0.0",
@@ -16214,7 +16203,6 @@
       "integrity": "sha1-y0dTIeTHP38RDawppIwqnLgK/rY=",
       "dev": true,
       "requires": {
-        "@babel/core": "^7.11.0",
         "@babel/helper-compilation-targets": "^7.9.6",
         "@babel/helper-module-imports": "^7.8.3",
         "@babel/plugin-proposal-class-properties": "^7.8.3",
@@ -16227,7 +16215,6 @@
         "@vue/babel-plugin-jsx": "^1.0.3",
         "@vue/babel-preset-jsx": "^1.2.4",
         "babel-plugin-dynamic-import-node": "^2.3.3",
-        "core-js": "^3.6.5",
         "core-js-compat": "^3.6.5",
         "semver": "^6.1.0"
       }

src/assets/iso3166_de.json

@@ -0,0 +1,241 @@
+{
+    "AF": "Afghanistan",
+    "EG": "Ägypten",
+    "AL": "Albanien",
+    "DZ": "Algerien",
+    "AD": "Andorra",
+    "AO": "Angola",
+    "AI": "Anguilla",
+    "AQ": "Antarktis",
+    "AG": "Antigua und Barbuda",
+    "GQ": "Äquatorial Guinea",
+    "AR": "Argentinien",
+    "AM": "Armenien",
+    "AW": "Aruba",
+    "AZ": "Aserbaidschan",
+    "ET": "Äthiopien",
+    "AU": "Australien",
+    "BS": "Bahamas",
+    "BH": "Bahrain",
+    "BD": "Bangladesh",
+    "BB": "Barbados",
+    "BE": "Belgien",
+    "BZ": "Belize",
+    "BJ": "Benin",
+    "BM": "Bermudas",
+    "BT": "Bhutan",
+    "MM": "Birma",
+    "BO": "Bolivien",
+    "BA": "Bosnien-Herzegowina",
+    "BW": "Botswana",
+    "BV": "Bouvet Inseln",
+    "BR": "Brasilien",
+    "IO": "Britisch-Indischer Ozean",
+    "BN": "Brunei",
+    "BG": "Bulgarien",
+    "BF": "Burkina Faso",
+    "BI": "Burundi",
+    "CL": "Chile",
+    "CN": "China",
+    "CX": "Christmas Island",
+    "CK": "Cook Inseln",
+    "CR": "Costa Rica",
+    "DK": "Dänemark",
+    "DE": "Deutschland",
+    "DJ": "Djibuti",
+    "DM": "Dominika",
+    "DO": "Dominikanische Republik",
+    "EC": "Ecuador",
+    "SV": "El Salvador",
+    "CI": "Elfenbeinküste",
+    "ER": "Eritrea",
+    "EE": "Estland",
+    "FK": "Falkland Inseln",
+    "FO": "Färöer Inseln",
+    "FJ": "Fidschi",
+    "FI": "Finnland",
+    "FR": "Frankreich",
+    "GF": "französisch Guyana",
+    "PF": "Französisch Polynesien",
+    "TF": "Französisches Süd-Territorium",
+    "GA": "Gabun",
+    "GM": "Gambia",
+    "GE": "Georgien",
+    "GH": "Ghana",
+    "GI": "Gibraltar",
+    "GD": "Grenada",
+    "GR": "Griechenland",
+    "GL": "Grönland",
+    "UK": "Großbritannien",
+    "GB": "Großbritannien (UK)",
+    "GP": "Guadeloupe",
+    "GU": "Guam",
+    "GT": "Guatemala",
+    "GN": "Guinea",
+    "GW": "Guinea Bissau",
+    "GY": "Guyana",
+    "HT": "Haiti",
+    "HM": "Heard und McDonald Islands",
+    "HN": "Honduras",
+    "HK": "Hong Kong",
+    "IN": "Indien",
+    "ID": "Indonesien",
+    "IQ": "Irak",
+    "IR": "Iran",
+    "IE": "Irland",
+    "IS": "Island",
+    "IL": "Israel",
+    "IT": "Italien",
+    "JM": "Jamaika",
+    "JP": "Japan",
+    "YE": "Jemen",
+    "JO": "Jordanien",
+    "YU": "Jugoslawien",
+    "KY": "Kaiman Inseln",
+    "KH": "Kambodscha",
+    "CM": "Kamerun",
+    "CA": "Kanada",
+    "CV": "Kap Verde",
+    "KZ": "Kasachstan",
+    "KE": "Kenia",
+    "KG": "Kirgisistan",
+    "KI": "Kiribati",
+    "CC": "Kokosinseln",
+    "CO": "Kolumbien",
+    "KM": "Komoren",
+    "CG": "Kongo",
+    "CD": "Demokratische Republik Kongo",
+    "HR": "Kroatien",
+    "CU": "Kuba",
+    "KW": "Kuwait",
+    "LA": "Laos",
+    "LS": "Lesotho",
+    "LV": "Lettland",
+    "LB": "Libanon",
+    "LR": "Liberia",
+    "LY": "Libyen",
+    "LI": "Liechtenstein",
+    "LT": "Litauen",
+    "LU": "Luxemburg",
+    "MO": "Macao",
+    "MG": "Madagaskar",
+    "MW": "Malawi",
+    "MY": "Malaysia",
+    "MV": "Malediven",
+    "ML": "Mali",
+    "MT": "Malta",
+    "MP": "Marianen",
+    "MA": "Marokko",
+    "MH": "Marshall Inseln",
+    "MQ": "Martinique",
+    "MR": "Mauretanien",
+    "MU": "Mauritius",
+    "YT": "Mayotte",
+    "MK": "Mazedonien",
+    "MX": "Mexiko",
+    "FM": "Mikronesien",
+    "MZ": "Mocambique",
+    "MD": "Moldavien",
+    "MC": "Monaco",
+    "MN": "Mongolei",
+    "MS": "Montserrat",
+    "NA": "Namibia",
+    "NR": "Nauru",
+    "NP": "Nepal",
+    "NC": "Neukaledonien",
+    "NZ": "Neuseeland",
+    "NI": "Nicaragua",
+    "NL": "Niederlande",
+    "AN": "Niederländische Antillen",
+    "NE": "Niger",
+    "NG": "Nigeria",
+    "NU": "Niue",
+    "KP": "Nord Korea",
+    "NF": "Norfolk Inseln",
+    "NO": "Norwegen",
+    "OM": "Oman",
+    "AT": "Österreich",
+    "PK": "Pakistan",
+    "PS": "Palästina",
+    "PW": "Palau",
+    "PA": "Panama",
+    "PG": "Papua Neuguinea",
+    "PY": "Paraguay",
+    "PE": "Peru",
+    "PH": "Philippinen",
+    "PN": "Pitcairn",
+    "PL": "Polen",
+    "PT": "Portugal",
+    "PR": "Puerto Rico",
+    "QA": "Qatar",
+    "RE": "Reunion",
+    "RW": "Ruanda",
+    "RO": "Rumänien",
+    "RU": "Russland",
+    "LC": "Saint Lucia",
+    "ZM": "Sambia",
+    "AS": "Samoa",
+    "WS": "Samoa",
+    "SM": "San Marino",
+    "ST": "Sao Tome",
+    "SA": "Saudi Arabien",
+    "SE": "Schweden",
+    "CH": "Schweiz",
+    "SN": "Senegal",
+    "SC": "Seychellen",
+    "SL": "Sierra Leone",
+    "SG": "Singapur",
+    "SK": "Slowakei",
+    "SI": "Slowenien",
+    "SB": "Solomon Inseln",
+    "SO": "Somalia",
+    "GS": "Südgeorgien und die Südlichen Sandwichinseln",
+    "ES": "Spanien",
+    "LK": "Sri Lanka",
+    "SH": "St. Helena",
+    "KN": "St. Kitts Nevis Anguilla",
+    "PM": "St. Pierre und Miquelon",
+    "VC": "St. Vincent",
+    "KR": "Süd Korea",
+    "ZA": "Südafrika",
+    "SD": "Sudan",
+    "SR": "Surinam",
+    "SJ": "Svalbard und Jan Mayen Islands",
+    "SZ": "Swasiland",
+    "SY": "Syrien",
+    "TJ": "Tadschikistan",
+    "TW": "Taiwan",
+    "TZ": "Tansania",
+    "TH": "Thailand",
+    "TP": "Timor",
+    "TG": "Togo",
+    "TK": "Tokelau",
+    "TO": "Tonga",
+    "TT": "Trinidad Tobago",
+    "TD": "Tschad",
+    "CZ": "Tschechische Republik",
+    "TN": "Tunesien",
+    "TR": "Türkei",
+    "TM": "Turkmenistan",
+    "TC": "Turks und Kaikos Inseln",
+    "TV": "Tuvalu",
+    "UG": "Uganda",
+    "UA": "Ukraine",
+    "HU": "Ungarn",
+    "UY": "Uruguay",
+    "UZ": "Usbekistan",
+    "VU": "Vanuatu",
+    "VA": "Vatikan",
+    "VE": "Venezuela",
+    "AE": "Vereinigte Arabische Emirate",
+    "US": "Vereinigte Staaten von Amerika",
+    "VN": "Vietnam",
+    "VG": "Virgin Island (Brit.)",
+    "VI": "Virgin Island (USA)",
+    "WF": "Wallis et Futuna",
+    "BY": "Weissrussland",
+    "EH": "Westsahara",
+    "CF": "Zentralafrikanische Republik",
+    "ZW": "Zimbabwe",
+    "CY": "Zypern"
+  }

src/components/AutoComplete.vue

@@ -0,0 +1,158 @@
+<template>
+  <div>
+    <label for="searchText" class="form-label">{{ label }}</label>
+    <div class="row">
+      <div class="col">
+        <input
+          autocomplete="off"
+          type="text"
+          class="form-control"
+          id="searchText"
+          v-model="searchText"
+          @keyup="search()"
+        />
+      </div>
+      <div class="col">
+        <div v-if="searchResults.length != 0">
+          <div v-if="type != 'contacttype'">
+            <select
+              class="form-select"
+              aria-label="Selektiere dein Level"
+              v-model="level"
+            >
+              <option value="1" selected>1</option>
+              <option value="2">2</option>
+              <option value="3">3</option>
+              <option value="3">4</option>
+            </select>
+          </div>
+          <div v-else>
+
+        <input
+          type="text"
+          class="form-control"
+          id="contactContent"
+          v-model="contactContent"
+        />
+          </div>
+        </div>
+      </div>
+      <div class="col">
+        <button
+          v-if="searchResults.length != 0"
+          type="button"
+          class="btn btn-success"
+          aria-label="Löschen"
+          @click="addSelectedResult()"
+        >
+          Hinzufügen
+        </button>
+      </div>
+    </div>
+    <div class="" v-if="searchResults">
+      <ul class="list-group">
+        <li
+          class="list-group-item"
+          v-for="result in searchResults"
+          :key="result.id"
+          :class="{
+            'bg-info': selectedResult.id && result.id === selectedResult.id,
+          }"
+          @click="selectedResult = result"
+        >
+          {{ result.name }}
+        </li>
+      </ul>
+    </div>
+    <ul>
+      <li v-for="value in values" :key="value.id">
+        <img v-if="value[type].icon_url" :src="iconUrl + value[type].icon_url" />
+        {{ value[type].name }} <span v-if="value.level">({{ value.level }})</span>
+        <span v-if="value.content">{{value.content}}</span>
+        <button
+          type="button"
+          class="btn-close"
+          aria-label="Löschen"
+          @click="removeValue(value[type].id)"
+        ></button>
+      </li>
+    </ul>
+  </div>
+</template>
+<script>
+export default {
+  name: "AutoComplete",
+  props: {
+    type: {
+      type: String,
+    },
+    label: {
+      type: String,
+    },
+    values: {
+      type: Array,
+    },
+  },
+  data() {
+    return {
+      iconUrl: process.env.VUE_APP_API_URL,
+      searchText: "",
+      contactContent: "",
+      searchResults: [],
+      showErrorMessage: false,
+      level: 1,
+      selectedResult: {},
+    };
+  },
+  methods: {
+    async search() {
+      try {
+        const request = await this.axios.get(
+          `${process.env.VUE_APP_API_URL}/${this.type}s?search=${this.searchText}`,
+          {
+            headers: {
+              Authorization: `Bearer ${localStorage.getItem("token")}`,
+            },
+          }
+        );
+        if (request.status === 200) {
+          this.searchResults = request.data[`${this.type}s`];
+        }
+      } catch (error) {
+        console.error();
+        this.showErrorMessage = true;
+      }
+    },
+    addSelectedResult() {
+      if (this.values.map((item) => item[this.type].id).includes(this.selectedResult.id))
+        return false;
+      let changeValues = Object.assign(this.values);
+      let newValue = {
+        profile_id: localStorage.getItem("user_id")
+      }
+      if(this.type != "contacttype"){
+          newValue.level = this.level
+      }else{
+          newValue.content = this.contactContent
+      }
+      newValue[this.type] = this.selectedResult
+      changeValues.push(newValue);
+      this.searchText = "";
+      this.searchResults = [];
+      this.selectedResult = {};
+      this.level = 1;
+      this.$emit("update-values", changeValues);
+    },
+    removeValue(valueId) {
+      const newValues = this.values.filter((value) => {
+        if (valueId === value[this.type].id) {
+          return false;
+        } else {
+          return true;
+        }
+      });
+      this.$emit("update-values", newValues);
+    },
+  },
+};
+</script>

src/main.js

@@ -2,6 +2,8 @@ import { createApp } from 'vue/dist/vue.esm-bundler';
 import App from './App.vue'
 import router from './router'
 
+import axios from 'axios'
+
 import 'bootstrap/dist/css/bootstrap.min.css'
 import './assets/custom.css'
 
@@ -9,6 +11,8 @@ const app = createApp(App)
 
 app.use(router)
 
+app.config.globalProperties.axios=axios
+
 app.config.globalProperties.apiUrl= (process.env.VUE_APP_API_URL ? process.env.VUE_APP_API_URL : '')
 
 app.mount('#app')

src/views/profile/Edit.vue

@@ -20,7 +20,6 @@
             class="form-control"
             id="pronouns"
             v-model="profile.pronouns"
-            required
           />
           <div id="emailHelp" class="form-text">
             Z.B.: Er/Ihn, Sie/Ihr, Es etc..
@@ -49,84 +48,59 @@
           ></textarea>
         </div>
       </div>
-      <div>
+      <auto-complete
-        <label for="skills" class="form-label"
+        type="skill"
-          >Deine Fähigkeiten: (Autocomplete)</label
+        label="Deine Fähigkeiten (Autocomplete)"
-        >
+        :values="profile.skills"
-        <input
+        @update-values="profile.skills = $event"
-          autocomplete="off"
+      ></auto-complete>
-          type="text"
+      <auto-complete
-          class="form-control"
+        type="language"
-          id="pronouns"
+        label="Deine Sprachen (Autocomplete)"
-          v-model="searchSkillsText"
+        :values="profile.languages"
-          @keyup="searchSkills()"
+        @update-values="profile.languages = $event"
-        />
+      ></auto-complete>
-        <div class="" v-if="searchSkillResults">
+      <auto-complete
-          <ul class="list-group">
+        type="skill"
-            <li
+        label="Ich Suche"
-              class="list-group-item"
+        :values="profile.searchtopics"
-              v-for="result in searchSkillResults"
+        @update-values="profile.searchtopics = $event"
-              :key="result.id"
+      ></auto-complete>
-              @click="addSkill(result)"
+
-            >
+      <auto-complete
-              {{ result.name }}
+        type="contacttype"
-            </li>
+        label="Kontaktmöglichkeiten"
-          </ul>
+        :values="profile.contacts"
+        @update-values="profile.contacts = $event"
+      ></auto-complete>
+
+      <div class="row">
+        <div class="col">
+          <label for="pzl" class="form-label">PZL</label>
+          <input
+            type="text"
+            class="form-control"
+            id="pzl"
+            v-model="profile.address.postcode"
+          />
         </div>
-        <div>
+        <div class="col">
-          <span
+          <label for="pzl" class="form-label">Stadt</label>
-            v-for="skill in profile.skills"
+          <input
-            :key="skill.id"
+            type="text"
-            class="badge bg-primary m-2"
+            class="form-control"
-          >
+            id="pzl"
-            {{ skill.name }}
+            v-model="profile.address.city"
-            <button
+          />
-              type="button"
-              class="btn-close"
-              aria-label="Close"
-              @click="removeSkill(skill.id)"
-            ></button>
-          </span>
         </div>
-      </div>
+        <div class="col">
-      <div>
+          <label for="pzl" class="form-label">Land</label>
-        <label for="skills" class="form-label"
+          <input
-          >Deine Sprachen: (Autocomplete)</label
+            type="text"
-        >
+            class="form-control"
-        <input
+            id="pzl"
-          autocomplete="off"
+            v-model="profile.address.country"
-          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>      
 
@@ -143,36 +117,30 @@
 </template>
 <script>
 import axios from "axios";
-
+import AutoComplete from "@/components/AutoComplete";
 export default {
   name: "profileEdit",
+  components: {
+    AutoComplete,
+  },
   data() {
     return {
       showErrorMessage: false,
-
       profile: {
         nickname: "",
         pronouns: "",
         volunteerwork: "",
         freetext: "",
-        created: "",
-        updated: "",
         address: {
-          name: "",
-          street: "",
-          house_number: "",
-          additional: "",
           postcode: "",
           city: "",
           country: "",
         },
         skills: [],
         languages: [],
+        searchtopics: [],
+        contacts: [],
       },
-      searchLanguagesText: "",
-      searchLanguagesResult: [],
-      searchSkillsText: "",
-      searchSkillResults: [],
     };
   },
   async created() {
@@ -190,6 +158,11 @@ export default {
       this.profile.pronouns = userProfile.data.profile.pronouns;
       this.profile.volunteerwork = userProfile.data.profile.volunteerwork;
       this.profile.freetext = userProfile.data.profile.freetext;
+      this.profile.skills = userProfile.data.profile.skills;
+      this.profile.languages = userProfile.data.profile.languages;
+      this.profile.searchtopics = userProfile.data.profile.searchtopics;
+      this.profile.contacts = userProfile.data.profile.contacts;
+      this.profile.address = userProfile.data.profile.address;
     } catch (error) {
       console.error(error);
     }
@@ -201,14 +174,7 @@ export default {
           `${process.env.VUE_APP_API_URL}/users/${localStorage.getItem(
             "user_id"
           )}/profile`,
-          {
+          this.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")}`,
@@ -225,67 +191,7 @@ export default {
         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>