chew/components/AddCohort.vue

58 lines
1.6 KiB
Vue

<template>
<article class='card inline-block'>
<input type="text" v-model='name' placeholder="Name">
<input type="text" v-model='description' placeholder="Description">
<ul>
<li class="p-2 bg-slate-700 " v-for='source, id in sources' :key="id">
<div class="font-bold text-xl">{{ source.name }}</div>
<span class="text-red-500">{{source.description}}</span>
</li>
</ul>
<button @click='addCohort' class="p-2 text-xl font-bold border-2 rounded mt-5">Create +</button>
</article>
</template>
<script>
export default {
props: {
modelValue: String
},
data: () => {
return {
name: '',
sources: '',
url: '',
error: '' }
},
methods: {
async addCohort () {
const cohort = await $fetch('/api/cohort', { method: 'POST', body: {
name: this.name,
sources: this.sources.map(s => s.id)
}})
this.$emit("addCohort", cohort)
},
async addSource() {
console.error('dentro add source', this.url, this.name)
this.error = ''
// invio un url al backend
// se e' un feed valido, lo aggiungo ai sources e all cohort appena creata
// se non e' valido provo a cercare il feed dentro quell'url
try {
const source = await $fetch('/api/source', { method: 'POST', body: { URL: this.url } })
this.sources.push( source )
// this.$emit('addCohort', { id: 1, title: this.title })
this.url = ''
} catch (e) {
this.error = String(e)
}
}
}
}
</script>
<style lang="scss" scoped>
.card {
@apply w-full rounded-md border-2 border-dashed p-2 mt-3
max-w-sm border-pink-500;
}
</style>