funktionalität edit
This commit is contained in:
scammo
parent
7c8a7bf178
commit
feb425c1d7
15
package-lock.json
generated
15
package-lock.json
generated
@ -5,7 +5,6 @@
|
|||||||
"requires": true,
|
"requires": true,
|
||||||
"packages": {
|
"packages": {
|
||||||
"": {
|
"": {
|
||||||
"name": "ki-frontend",
|
|
||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"axios": "^0.21.1",
|
"axios": "^0.21.1",
|
||||||
@ -2010,7 +2009,6 @@
|
|||||||
"thread-loader": "^2.1.3",
|
"thread-loader": "^2.1.3",
|
||||||
"url-loader": "^2.2.0",
|
"url-loader": "^2.2.0",
|
||||||
"vue-loader": "^15.9.2",
|
"vue-loader": "^15.9.2",
|
||||||
"vue-loader-v16": "npm:vue-loader@^16.1.0",
|
|
||||||
"vue-style-loader": "^4.1.2",
|
"vue-style-loader": "^4.1.2",
|
||||||
"webpack": "^4.0.0",
|
"webpack": "^4.0.0",
|
||||||
"webpack-bundle-analyzer": "^3.8.0",
|
"webpack-bundle-analyzer": "^3.8.0",
|
||||||
@ -2186,7 +2184,6 @@
|
|||||||
"merge-source-map": "^1.1.0",
|
"merge-source-map": "^1.1.0",
|
||||||
"postcss": "^7.0.14",
|
"postcss": "^7.0.14",
|
||||||
"postcss-selector-parser": "^6.0.2",
|
"postcss-selector-parser": "^6.0.2",
|
||||||
"prettier": "^1.18.2",
|
|
||||||
"source-map": "~0.6.1",
|
"source-map": "~0.6.1",
|
||||||
"vue-template-es2015-compiler": "^1.9.0"
|
"vue-template-es2015-compiler": "^1.9.0"
|
||||||
},
|
},
|
||||||
@ -3584,7 +3581,6 @@
|
|||||||
"dependencies": {
|
"dependencies": {
|
||||||
"anymatch": "~3.1.1",
|
"anymatch": "~3.1.1",
|
||||||
"braces": "~3.0.2",
|
"braces": "~3.0.2",
|
||||||
"fsevents": "~2.3.1",
|
|
||||||
"glob-parent": "~5.1.0",
|
"glob-parent": "~5.1.0",
|
||||||
"is-binary-path": "~2.1.0",
|
"is-binary-path": "~2.1.0",
|
||||||
"is-glob": "~4.0.1",
|
"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",
|
"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=",
|
"integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"dependencies": {
|
|
||||||
"graceful-fs": "^4.1.6"
|
|
||||||
},
|
|
||||||
"optionalDependencies": {
|
"optionalDependencies": {
|
||||||
"graceful-fs": "^4.1.6"
|
"graceful-fs": "^4.1.6"
|
||||||
}
|
}
|
||||||
@ -13610,10 +13603,8 @@
|
|||||||
"integrity": "sha1-EmfmxV4Lm1vkTCAjrtVDeiwmxFM=",
|
"integrity": "sha1-EmfmxV4Lm1vkTCAjrtVDeiwmxFM=",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"chokidar": "^3.4.1",
|
|
||||||
"graceful-fs": "^4.1.2",
|
"graceful-fs": "^4.1.2",
|
||||||
"neo-async": "^2.5.0",
|
"neo-async": "^2.5.0"
|
||||||
"watchpack-chokidar2": "^2.0.1"
|
|
||||||
},
|
},
|
||||||
"optionalDependencies": {
|
"optionalDependencies": {
|
||||||
"chokidar": "^3.4.1",
|
"chokidar": "^3.4.1",
|
||||||
@ -13675,7 +13666,6 @@
|
|||||||
"anymatch": "^2.0.0",
|
"anymatch": "^2.0.0",
|
||||||
"async-each": "^1.0.1",
|
"async-each": "^1.0.1",
|
||||||
"braces": "^2.3.2",
|
"braces": "^2.3.2",
|
||||||
"fsevents": "^1.2.7",
|
|
||||||
"glob-parent": "^3.1.0",
|
"glob-parent": "^3.1.0",
|
||||||
"inherits": "^2.0.3",
|
"inherits": "^2.0.3",
|
||||||
"is-binary-path": "^1.0.0",
|
"is-binary-path": "^1.0.0",
|
||||||
@ -13962,7 +13952,6 @@
|
|||||||
"anymatch": "^2.0.0",
|
"anymatch": "^2.0.0",
|
||||||
"async-each": "^1.0.1",
|
"async-each": "^1.0.1",
|
||||||
"braces": "^2.3.2",
|
"braces": "^2.3.2",
|
||||||
"fsevents": "^1.2.7",
|
|
||||||
"glob-parent": "^3.1.0",
|
"glob-parent": "^3.1.0",
|
||||||
"inherits": "^2.0.3",
|
"inherits": "^2.0.3",
|
||||||
"is-binary-path": "^1.0.0",
|
"is-binary-path": "^1.0.0",
|
||||||
@ -16214,7 +16203,6 @@
|
|||||||
"integrity": "sha1-y0dTIeTHP38RDawppIwqnLgK/rY=",
|
"integrity": "sha1-y0dTIeTHP38RDawppIwqnLgK/rY=",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"@babel/core": "^7.11.0",
|
|
||||||
"@babel/helper-compilation-targets": "^7.9.6",
|
"@babel/helper-compilation-targets": "^7.9.6",
|
||||||
"@babel/helper-module-imports": "^7.8.3",
|
"@babel/helper-module-imports": "^7.8.3",
|
||||||
"@babel/plugin-proposal-class-properties": "^7.8.3",
|
"@babel/plugin-proposal-class-properties": "^7.8.3",
|
||||||
@ -16227,7 +16215,6 @@
|
|||||||
"@vue/babel-plugin-jsx": "^1.0.3",
|
"@vue/babel-plugin-jsx": "^1.0.3",
|
||||||
"@vue/babel-preset-jsx": "^1.2.4",
|
"@vue/babel-preset-jsx": "^1.2.4",
|
||||||
"babel-plugin-dynamic-import-node": "^2.3.3",
|
"babel-plugin-dynamic-import-node": "^2.3.3",
|
||||||
"core-js": "^3.6.5",
|
|
||||||
"core-js-compat": "^3.6.5",
|
"core-js-compat": "^3.6.5",
|
||||||
"semver": "^6.1.0"
|
"semver": "^6.1.0"
|
||||||
}
|
}
|
||||||
|
|||||||
241
src/assets/iso3166_de.json
Normal file
241
src/assets/iso3166_de.json
Normal file
@ -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"
|
||||||
|
}
|
||||||
158
src/components/AutoComplete.vue
Normal file
158
src/components/AutoComplete.vue
Normal file
@ -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 App from './App.vue'
|
||||||
import router from './router'
|
import router from './router'
|
||||||
|
|
||||||
|
import axios from 'axios'
|
||||||
|
|
||||||
import 'bootstrap/dist/css/bootstrap.min.css'
|
import 'bootstrap/dist/css/bootstrap.min.css'
|
||||||
import './assets/custom.css'
|
import './assets/custom.css'
|
||||||
|
|
||||||
@ -9,6 +11,8 @@ const app = createApp(App)
|
|||||||
|
|
||||||
app.use(router)
|
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.config.globalProperties.apiUrl= (process.env.VUE_APP_API_URL ? process.env.VUE_APP_API_URL : '')
|
||||||
|
|
||||||
app.mount('#app')
|
app.mount('#app')
|
||||||
|
|||||||
@ -20,7 +20,6 @@
|
|||||||
class="form-control"
|
class="form-control"
|
||||||
id="pronouns"
|
id="pronouns"
|
||||||
v-model="profile.pronouns"
|
v-model="profile.pronouns"
|
||||||
required
|
|
||||||
/>
|
/>
|
||||||
<div id="emailHelp" class="form-text">
|
<div id="emailHelp" class="form-text">
|
||||||
Z.B.: Er/Ihn, Sie/Ihr, Es etc..
|
Z.B.: Er/Ihn, Sie/Ihr, Es etc..
|
||||||
@ -49,84 +48,59 @@
|
|||||||
></textarea>
|
></textarea>
|
||||||
</div>
|
</div>
|
||||||
</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>
|
<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>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -143,36 +117,30 @@
|
|||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import axios from "axios";
|
import axios from "axios";
|
||||||
|
import AutoComplete from "@/components/AutoComplete";
|
||||||
export default {
|
export default {
|
||||||
name: "profileEdit",
|
name: "profileEdit",
|
||||||
|
components: {
|
||||||
|
AutoComplete,
|
||||||
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
showErrorMessage: false,
|
showErrorMessage: false,
|
||||||
|
|
||||||
profile: {
|
profile: {
|
||||||
nickname: "",
|
nickname: "",
|
||||||
pronouns: "",
|
pronouns: "",
|
||||||
volunteerwork: "",
|
volunteerwork: "",
|
||||||
freetext: "",
|
freetext: "",
|
||||||
created: "",
|
|
||||||
updated: "",
|
|
||||||
address: {
|
address: {
|
||||||
name: "",
|
|
||||||
street: "",
|
|
||||||
house_number: "",
|
|
||||||
additional: "",
|
|
||||||
postcode: "",
|
postcode: "",
|
||||||
city: "",
|
city: "",
|
||||||
country: "",
|
country: "",
|
||||||
},
|
},
|
||||||
skills: [],
|
skills: [],
|
||||||
languages: [],
|
languages: [],
|
||||||
|
searchtopics: [],
|
||||||
|
contacts: [],
|
||||||
},
|
},
|
||||||
searchLanguagesText: "",
|
|
||||||
searchLanguagesResult: [],
|
|
||||||
searchSkillsText: "",
|
|
||||||
searchSkillResults: [],
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
async created() {
|
async created() {
|
||||||
@ -190,6 +158,11 @@ export default {
|
|||||||
this.profile.pronouns = userProfile.data.profile.pronouns;
|
this.profile.pronouns = userProfile.data.profile.pronouns;
|
||||||
this.profile.volunteerwork = userProfile.data.profile.volunteerwork;
|
this.profile.volunteerwork = userProfile.data.profile.volunteerwork;
|
||||||
this.profile.freetext = userProfile.data.profile.freetext;
|
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) {
|
} catch (error) {
|
||||||
console.error(error);
|
console.error(error);
|
||||||
}
|
}
|
||||||
@ -201,14 +174,7 @@ export default {
|
|||||||
`${process.env.VUE_APP_API_URL}/users/${localStorage.getItem(
|
`${process.env.VUE_APP_API_URL}/users/${localStorage.getItem(
|
||||||
"user_id"
|
"user_id"
|
||||||
)}/profile`,
|
)}/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: {
|
headers: {
|
||||||
Authorization: `Bearer ${localStorage.getItem("token")}`,
|
Authorization: `Bearer ${localStorage.getItem("token")}`,
|
||||||
@ -225,67 +191,7 @@ export default {
|
|||||||
console.error();
|
console.error();
|
||||||
this.showErrorMessage = true;
|
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>
|
</script>
|
||||||
Loading…
Reference in New Issue
Block a user