forked from kompetenzinventar/ki-frontend
funktionalität edit
This commit is contained in:
scammo
parent
7c8a7bf178
commit
feb425c1d7
|
|
@ -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",
|
||||
"watchpack-chokidar2": "^2.0.1"
|
||||
"neo-async": "^2.5.0"
|
||||
},
|
||||
"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"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
@ -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')
|
||||
|
|
|
|||
|
|
@ -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,86 +48,61 @@
|
|||
></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>
|
||||
<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>
|
||||
|
||||
<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">PZL</label>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="pzl"
|
||||
v-model="profile.address.postcode"
|
||||
/>
|
||||
</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 class="col">
|
||||
<label for="pzl" class="form-label">Stadt</label>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="pzl"
|
||||
v-model="profile.address.city"
|
||||
/>
|
||||
</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 class="col">
|
||||
<label for="pzl" class="form-label">Land</label>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="pzl"
|
||||
v-model="profile.address.country"
|
||||
/>
|
||||
</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>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-primary mb-4 mt-4">Speichern</button>
|
||||
<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`,
|
||||
{
|
||||
nickname: this.profile.nickname,
|
||||
pronouns: this.profile.pronouns,
|
||||
volunteerwork: this.profile.volunteerwork,
|
||||
freetext: this.profile.freetext,
|
||||
skills: this.profile.skills,
|
||||
languages: this.profile.languages,
|
||||
},
|
||||
this.profile,
|
||||
{
|
||||
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>
|
||||
Loading…
Reference in New Issue