forked from kompetenzinventar/ki-frontend
145 lines
4.0 KiB
Vue
145 lines
4.0 KiB
Vue
<!--
|
|
SPDX-FileCopyrightText: WTF Kooperative eG <https://wtf-eg.de/>
|
|
|
|
SPDX-License-Identifier: AGPL-3.0-or-later
|
|
-->
|
|
|
|
<template>
|
|
<ul class="list-group list-group-flush">
|
|
<li
|
|
class="list-group-item"
|
|
v-for="(value, valueKey) in values"
|
|
:key="value.id"
|
|
>
|
|
<div class="row">
|
|
<div class="col d-flex align-items-center">
|
|
<div
|
|
class="list-icon me-1"
|
|
:style="{ backgroundImage: `url('${iconBaseUrl + value[type].icon_url}'` }"
|
|
v-if="value[type].icon_url"
|
|
/>
|
|
<div>
|
|
{{ value[type].name }}
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div v-if="type == 'skill'">
|
|
<div v-if="editable">
|
|
<select
|
|
v-if="editableValues[valueKey]"
|
|
class="form-select form-select-sm"
|
|
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.long || 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 form-select-sm"
|
|
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 form-control-sm"
|
|
maxlength="200"
|
|
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 text-end">
|
|
<button
|
|
v-if="editable"
|
|
type="button"
|
|
class="btn btn-sm btn-light"
|
|
aria-label="Löschen"
|
|
@click="$emit('removeValue', value[type].name)"
|
|
>
|
|
<i class="text-danger bi bi-x-circle"></i>
|
|
</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 {
|
|
iconBaseUrl: this.apiUrl,
|
|
levelSelection: levelJson,
|
|
languagesSelection: languagesJson,
|
|
editableValues: this.values,
|
|
};
|
|
},
|
|
watch: {
|
|
values: function (newVal) {
|
|
this.editableValues = newVal;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scope>
|
|
.list-icon {
|
|
background-position: center center;
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
height: 32px;
|
|
width: 32px;
|
|
}
|
|
</style>
|