2020-11-09 11:11:47 -08:00
|
|
|
<template>
|
2020-11-09 12:41:52 -08:00
|
|
|
<div v-if="notEmpty">
|
|
|
|
<slot></slot>
|
2020-12-10 07:23:39 -08:00
|
|
|
<div v-if="pronoun && pronoun.sourcesInfo" class="alert alert-info small">
|
|
|
|
<Icon v="info-circle"/>
|
|
|
|
<LinkedText :text="pronoun.sourcesInfo"/>
|
|
|
|
</div>
|
2020-11-09 12:41:52 -08:00
|
|
|
<ul class="list-unstyled">
|
2021-05-13 12:43:53 -07:00
|
|
|
<li v-for="source in sources" :key="source.id" v-if="isVisible(source)" class="my-2 clearfix">
|
2020-12-05 11:37:10 -08:00
|
|
|
<Source :source="source" :manage="manage" @edit-source="edit"/>
|
2020-11-09 12:41:52 -08:00
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</div>
|
2020-11-09 11:11:47 -08:00
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
export default {
|
|
|
|
props: {
|
2020-12-04 13:09:57 -08:00
|
|
|
sources: { required: true },
|
2020-12-10 07:23:39 -08:00
|
|
|
pronoun: { },
|
2020-11-09 11:11:47 -08:00
|
|
|
filter: { default: '' },
|
2020-11-09 12:41:52 -08:00
|
|
|
filterType: { default: '' },
|
2020-12-05 11:37:10 -08:00
|
|
|
manage: { type: Boolean },
|
2020-11-09 11:11:47 -08:00
|
|
|
},
|
|
|
|
methods: {
|
2020-11-09 12:41:52 -08:00
|
|
|
isVisible(source) {
|
|
|
|
if (this.filterType && this.filterType !== source.type) {
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (this.filter) {
|
|
|
|
return source.index.includes(this.filter.toLowerCase());
|
|
|
|
}
|
|
|
|
|
|
|
|
return true;
|
|
|
|
},
|
2020-12-05 11:37:10 -08:00
|
|
|
edit(source) {
|
|
|
|
// TODO it should be possible to do it nicer
|
|
|
|
this.$emit('edit-source', source);
|
|
|
|
}
|
2020-11-09 12:41:52 -08:00
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
notEmpty() {
|
2020-12-04 13:09:57 -08:00
|
|
|
return this.sources.filter(this.isVisible).length > 0;
|
2020-11-09 12:41:52 -08:00
|
|
|
},
|
2020-11-09 11:11:47 -08:00
|
|
|
},
|
|
|
|
}
|
|
|
|
</script>
|