70 lines
1.9 KiB
Vue
70 lines
1.9 KiB
Vue
|
<template>
|
||
|
<section>
|
||
|
<v-card>
|
||
|
<v-card-title>Embed to your website</v-card-title>
|
||
|
<v-card-text>
|
||
|
<v-autocomplete
|
||
|
v-model='source'
|
||
|
:search-input.sync="search"
|
||
|
label='Source'
|
||
|
hide-no-data
|
||
|
item-value="id"
|
||
|
item-text="name"
|
||
|
:items="sources"
|
||
|
:disabled='loading'
|
||
|
:loading='loading'
|
||
|
prepend-icon="mdi-magnify"
|
||
|
placeholder="Start typing to search for a source to add"
|
||
|
clearable
|
||
|
return-object
|
||
|
no-filter>
|
||
|
<template v-slot:item="{ item }">
|
||
|
<v-list-item-content three-line>
|
||
|
<v-list-item-title>{{item.name}}</v-list-item-title>
|
||
|
<v-list-item-subtitle>{{ item.description }}</v-list-item-subtitle>
|
||
|
<v-list-item-subtitle>Last update: {{ item.updatedAt }} / Tags: / Link: {{item.link}}</v-list-item-subtitle>
|
||
|
</v-list-item-content>
|
||
|
</template>
|
||
|
</v-autocomplete>
|
||
|
<v-alert class='white--text blue-grey darken-2' v-text='code'></v-alert>
|
||
|
<display-feed :feed="feed"></display-feed>
|
||
|
</v-card-text>
|
||
|
</v-card>
|
||
|
</section>
|
||
|
</template>
|
||
|
<script>
|
||
|
export default {
|
||
|
data: () => ({
|
||
|
source: {},
|
||
|
loading: false,
|
||
|
search: '',
|
||
|
sources: [],
|
||
|
cohorts: []
|
||
|
}),
|
||
|
watch: {
|
||
|
async search (value) {
|
||
|
if (!value) return
|
||
|
this.makeSearch()
|
||
|
}
|
||
|
},
|
||
|
computed: {
|
||
|
code () {
|
||
|
return `<display-feed feed="http://localhost:3000/api/source/${this.source && this.source.id}"></display-feed>`
|
||
|
},
|
||
|
feed () {
|
||
|
if (this.source && this.source.id) {
|
||
|
return `http://localhost:3000/api/source/${this.source.id}`
|
||
|
} else {
|
||
|
return ''
|
||
|
}
|
||
|
}
|
||
|
},
|
||
|
methods: {
|
||
|
async makeSearch () {
|
||
|
this.loading = true
|
||
|
this.sources = await this.$http.$get(`/api/source/search?search=${encodeURIComponent(this.search)}`)
|
||
|
this.loading = false
|
||
|
},
|
||
|
}
|
||
|
}
|
||
|
</script>
|