Gro/ki-frontend
0
0
Fork 0
forked from kompetenzinventar/ki-frontend
Code Issues Pull Requests Packages Projects Releases Wiki Activity

besser editieren, bootstrap iccons, mehr style

Browse Source
This commit is contained in:
scammo
2021-07-26 16:12:23 +02:00
parent 055e05822d
commit 95e1c14afe
1378 changed files with 13096 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

132
src/components/AutoComplete.vue
View File

@ -1,7 +1,7 @@
<template>
<div>
<label for="searchText" class="form-label">{{ label }}</label>
<div class="row">
<label for="searchText" class="form-label fw-bold">{{ label }}</label>
<div class="row mb-2">
<div class="col">
<input
autocomplete="off"
@ -13,40 +13,52 @@
/>
</div>
<div class="col">
<div v-if="searchResults.length != 0">
<div v-if="selectedResult">
<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="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="3">4</option>
<option value="4">4</option>
</select>
</div>
<div v-else>
<input
type="text"
class="form-control"
id="contactContent"
v-model="contactContent"
/>
<input
type="text"
class="form-control"
id="contactContent"
v-model="contactContent"
/>
</div>
</div>
</div>
<div class="col">
<button
v-if="searchResults.length != 0"
v-if="selectedResult && !selectedResult.edit"
type="button"
class="btn btn-success"
aria-label="Löschen"
class="btn btn-outline-success"
aria-label="Hinzufügen"
@click="addSelectedResult()"
>
<img
src="/img/bootstrap-icons-1.5.0/plus-lg.svg"
alt="Hinzufügen Icon"
/>
Hinzufügen
</button>
<button
v-if="selectedResult && selectedResult.edit"
type="button"
class="btn btn-outline-success"
aria-label="Hinzufügen"
@click="editSelectedResult()"
>
Änderung Speichern
</button>
</div>
</div>
<div class="" v-if="searchResults">
@ -56,7 +68,10 @@
v-for="result in searchResults"
:key="result.id"
:class="{
'bg-info': selectedResult.id && result.id === selectedResult.id,
'bg-info':
selectedResult &&
selectedResult.id &&
result.id === selectedResult.id,
}"
@click="selectedResult = result"
>
@ -66,15 +81,35 @@
</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>
<img
style="max-width: 64px"
v-if="value[type].icon_url"
:src="iconUrl + value[type].icon_url"
:alt="`${value[type].name} Logo`"
/>
{{ 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"
class="btn btn-outline-warning m-2"
aria-label="Bearbeiten"
@click="editValue(value)"
>
<img
src="/img/bootstrap-icons-1.5.0/pencil.svg"
alt="Bearbeiten Icon"
/>
</button>
<button
type="button"
class="btn btn-outline-danger m-2"
aria-label="Löschen"
@click="removeValue(value[type].id)"
></button>
>
<img src="/img/bootstrap-icons-1.5.0/trash.svg" alt="Löschen Icon" />
</button>
</li>
</ul>
</div>
@ -101,7 +136,7 @@ export default {
searchResults: [],
showErrorMessage: false,
level: 1,
selectedResult: {},
selectedResult: null,
};
},
methods: {
@ -124,25 +159,45 @@ export default {
}
},
addSelectedResult() {
if (this.values.map((item) => item[this.type].id).includes(this.selectedResult.id))
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")
profile_id: localStorage.getItem("user_id"),
};
if (this.type != "contacttype") {
newValue.level = this.level;
} else {
newValue.content = this.contactContent;
}
if(this.type != "contacttype"){
newValue.level = this.level
}else{
newValue.content = this.contactContent
}
newValue[this.type] = this.selectedResult
newValue[this.type] = this.selectedResult;
changeValues.push(newValue);
this.searchText = "";
this.searchResults = [];
this.selectedResult = {};
this.selectedResult = null;
this.level = 1;
this.$emit("update-values", changeValues);
},
editSelectedResult() {
this.values.map((item) => {
if(item[this.type].name == this.selectedResult.name){
if (this.type != "contacttype") {
item.level = this.level
} else {
item.content = this.contactContent
}
}
return item;
});
this.$emit("update-values", this.values);
},
removeValue(valueId) {
const newValues = this.values.filter((value) => {
if (valueId === value[this.type].id) {
@ -153,6 +208,21 @@ export default {
});
this.$emit("update-values", newValues);
},
editValue(value) {
this.searchResults = [value[this.type]];
this.selectedResult = {
...value[this.type],
level: value.level,
edit: true,
};
if (this.type != "contacttype") {
this.level = value.level;
} else {
this.contactContent = value.content;
}
this.level = value.level;
},
},
};
</script>

47
src/views/profile/Edit.vue
View File

@ -4,17 +4,20 @@
<form @submit.prevent="submitForm()">
<div class="row">
<div class="col">
<input type="radio" id="false" :value="false" v-model="profile.visible" />
<label for="false">Nicht Öffentlich</label>
<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">Öffentlich</label>
<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">Nickname:</label>
<label for="nickname" class="form-label fw-bold">Nickname:</label>
<input
type="text"
class="form-control"
@ -24,21 +27,21 @@
/>
</div>
<div class="col-6 col-xs-12">
<label for="nickname" class="form-label">Pronomen:</label>
<label for="pronouns" class="form-label fw-bold">Pronomen:</label>
<input
type="text"
class="form-control"
id="pronouns"
v-model="profile.pronouns"
/>
<div id="emailHelp" class="form-text">
<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">Freitext Vorstellung:</label>
<label for="freetext" class="form-label fw-bold">Freitext Vorstellung:</label>
<textarea
class="form-control"
id="freetext"
@ -47,7 +50,7 @@
></textarea>
</div>
<div class="col-12 col-xs-12">
<label for="volunteerwork" class="form-label"
<label for="volunteerwork" class="form-label fw-bold"
>Ehrentamtliche Arbeit:</label
>
<textarea
@ -78,7 +81,7 @@
></auto-complete>
<div class="col-12 col-xs-12">
<label for="volunteerwork" class="form-label"
<label for="availability" class="form-label fw-bold"
>Ich bin für Anfragen verfügbar:</label
>
<textarea
@ -98,7 +101,7 @@
<div class="row">
<div class="col">
<label for="pzl" class="form-label">PZL</label>
<label for="pzl" class="form-label fw-bold">PZL</label>
<input
type="text"
class="form-control"
@ -107,26 +110,26 @@
/>
</div>
<div class="col">
<label for="pzl" class="form-label">Stadt</label>
<label for="city" class="form-label fw-bold">Stadt</label>
<input
type="text"
class="form-control"
id="pzl"
id="city"
v-model="profile.address.city"
/>
</div>
<div class="col">
<label for="pzl" class="form-label">Land</label>
<label for="country" class="form-label fw-bold">Land</label>
<input
type="text"
class="form-control"
id="pzl"
id="country"
v-model="profile.address.country"
/>
</div>
</div>
<button type="submit" class="btn btn-primary mb-4 mt-4">Speichern</button>
<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"
@ -134,6 +137,13 @@
>
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>
@ -148,6 +158,7 @@ export default {
data() {
return {
showErrorMessage: false,
showSuccessMessage: false,
profile: {
visible: false,
nickname: "",
@ -177,7 +188,6 @@ export default {
headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
}
);
console.log(userProfile.data);
this.profile = userProfile.data.profile;
} catch (error) {
console.error(error);
@ -197,14 +207,15 @@ export default {
},
}
);
console.log(formSubmitResult);
if (formSubmitResult.status === 200) {
// success
this.showSuccessMessage = true;
} else {
// failure
this.showErrorMessage = true;
}
} catch (error) {
console.error();
console.error(error);
this.showErrorMessage = true;
}
}