forked from kompetenzinventar/ki-frontend
68 lines
1.6 KiB
Vue
68 lines
1.6 KiB
Vue
<!-- SPDX-License-Identifier: AGPL-3.0-or-later -->
|
|
<template>
|
|
<ul>
|
|
<li v-for="value in values" :key="value.id">
|
|
<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">:
|
|
<span v-if="value[type].name === 'E-Mail'">
|
|
<a :href="`mailto:${value.content}`">{{ value.content }}</a>
|
|
</span>
|
|
<span v-else>
|
|
{{ value.content }}
|
|
</span>
|
|
</span>
|
|
|
|
<button
|
|
v-if="this.editable"
|
|
type="button"
|
|
class="btn btn-outline-warning m-2"
|
|
aria-label="Bearbeiten"
|
|
@click="this.$emit('editValue', value)"
|
|
>
|
|
<img
|
|
src="/img/bootstrap-icons-1.5.0/pencil.svg"
|
|
alt="Bearbeiten Icon"
|
|
/>
|
|
</button>
|
|
<button
|
|
v-if="this.editable"
|
|
type="button"
|
|
class="btn btn-outline-danger m-2"
|
|
aria-label="Löschen"
|
|
@click="this.$emit('removeValue', value[type].id)"
|
|
>
|
|
<img src="/img/bootstrap-icons-1.5.0/trash.svg" alt="Löschen Icon" />
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
name: "ProfileList",
|
|
props: {
|
|
type: {
|
|
type: String,
|
|
},
|
|
values: {
|
|
type: Array,
|
|
},
|
|
editable: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
iconUrl: this.apiUrl
|
|
}
|
|
}
|
|
};
|
|
</script>
|