forked from kompetenzinventar/ki-frontend
129 lines
3.6 KiB
Vue
129 lines
3.6 KiB
Vue
<!--
|
|
SPDX-FileCopyrightText: WTF Kooperative eG <https://wtf-eg.de/>
|
|
|
|
SPDX-License-Identifier: AGPL-3.0-or-later
|
|
-->
|
|
|
|
<template>
|
|
<ul>
|
|
<li v-for="(value, valueKey) in values" :key="value.id">
|
|
<div class="row m-1">
|
|
<div class="col">
|
|
<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 }}
|
|
</div>
|
|
<div class="col">
|
|
<div v-if="type == 'skill'">
|
|
<div v-if="editable">
|
|
<select
|
|
v-if="editableValues[valueKey]"
|
|
class="form-select"
|
|
aria-label="Selektiere dein Level"
|
|
v-model="editableValues[valueKey].level"
|
|
@input="$emit('update-values', editableValues)"
|
|
>
|
|
<option
|
|
v-for="(value, key) in levelSelection"
|
|
:value="key"
|
|
:key="key"
|
|
>
|
|
{{ value }}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
<div v-else><span v-if="value.level">({{ levelSelection[value.level] }})</span></div>
|
|
</div>
|
|
<div v-else-if="type == 'language'">
|
|
<div v-if="editable">
|
|
<div v-if="editable">
|
|
<select
|
|
v-if="editableValues[valueKey]"
|
|
class="form-select"
|
|
aria-label="Selektiere dein Level"
|
|
v-model="editableValues[valueKey].level"
|
|
@input="$emit('update-values', editableValues)"
|
|
>
|
|
<option
|
|
v-for="(value, key) in languagesSelection"
|
|
:value="key"
|
|
:key="key"
|
|
>
|
|
{{ value }}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div v-else><span v-if="value.level">({{languagesSelection[value.level]}})</span></div>
|
|
</div>
|
|
<div v-else-if="type == 'contacttype'">
|
|
<div v-if="editable">
|
|
<input class="form-control" v-model="editableValues[valueKey].content"/>
|
|
</div>
|
|
<div v-else>
|
|
<span v-if="value[type].name === 'E-Mail'">
|
|
<a :href="`mailto:${value.content}`">{{ value.content }}</a>
|
|
</span>
|
|
<span v-else>
|
|
{{ value.content }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<button
|
|
v-if="editable"
|
|
type="button"
|
|
class="btn btn-outline-danger"
|
|
aria-label="Löschen"
|
|
@click="$emit('removeValue', value[type].name)"
|
|
>
|
|
<img
|
|
src="/img/bootstrap-icons-1.5.0/trash.svg"
|
|
alt="Löschen Icon"
|
|
/>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</template>
|
|
<script>
|
|
import levelJson from "@/assets/skill_level.json";
|
|
import languagesJson from "@/assets/language_level.json";
|
|
|
|
export default {
|
|
name: "ProfileList",
|
|
props: {
|
|
type: {
|
|
type: String,
|
|
},
|
|
values: {
|
|
type: Array,
|
|
required: true,
|
|
},
|
|
editable: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
iconUrl: this.apiUrl,
|
|
levelSelection: levelJson,
|
|
languagesSelection: languagesJson,
|
|
editableValues: this.values,
|
|
};
|
|
},
|
|
watch: {
|
|
values: function (newVal) {
|
|
this.editableValues = newVal;
|
|
},
|
|
},
|
|
};
|
|
</script>
|