135 lines
No EOL
4.6 KiB
Vue
135 lines
No EOL
4.6 KiB
Vue
<template>
|
|
<section class='mt-4'>
|
|
<v-data-table dense
|
|
:items="cohorts"
|
|
:headers="headers">
|
|
<template v-slot:item.actions="{ item }">
|
|
<v-btn target="_blank" :href='`/api/cohort/${item.id}.rss`' small text color='orange' label='rss feed'><v-icon>mdi-rss</v-icon> Rss</v-btn>
|
|
<v-btn @click='copy($event, item)' small text color='primary' label='embedd'><v-icon>mdi-application-brackets-outline</v-icon> Embed</v-btn>
|
|
</template>
|
|
</v-data-table>
|
|
<v-card>
|
|
<v-card-title>Add your group</v-card-title>
|
|
<v-card-subtitle>Search for a source to add</v-card-subtitle>
|
|
<v-card-text>
|
|
<v-text-field label='Name' v-model='cohort.name'></v-text-field>
|
|
<v-text-field label='Description' v-model='cohort.description'></v-text-field>
|
|
<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:append-outer>
|
|
<v-btn text link :disabled='!source' @click='addSource'>Add this source</v-btn>
|
|
</template>
|
|
<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-btn @click='addCohort' text color='primary'>Create group</v-btn>
|
|
<v-list>
|
|
<v-list-item v-for='source in cohortSources' :key='source.id'>
|
|
<v-list-item-content>
|
|
<v-list-item-title>{{source.name}} <small>{{source.link}}</small></v-list-item-title>
|
|
<v-list-item-subtitle>{{source.description}}</v-list-item-subtitle>
|
|
</v-list-item-content>
|
|
</v-list-item>
|
|
</v-list>
|
|
</v-card-text>
|
|
</v-card>
|
|
<!-- <section class="flex place-content-center gap-5">
|
|
<add-cohort></add-cohort>
|
|
</section> -->
|
|
<!-- <v-row>
|
|
<v-col>
|
|
<nuxt-link :to='`/group/${cohort.id}`' v-for='cohort in cohorts' :key='cohort.id'>
|
|
<cohort :cohort='cohort' :max-posts='5'/>
|
|
</nuxt-link>
|
|
</v-col>
|
|
</v-row> -->
|
|
|
|
</section>
|
|
</template>
|
|
<script>
|
|
// import AddCohort from '@/components/AddCohort.vue'
|
|
// import debounce from 'lodash/debounce'
|
|
import Cohort from '@/components/Cohort.vue'
|
|
// import Post from '@/components/Post.vue'
|
|
// import TextCohort from '@/components/TextCohort.vue'
|
|
|
|
export default {
|
|
components: { Cohort },
|
|
data: () => ({
|
|
cohort: {},
|
|
loading: true,
|
|
source: null,
|
|
search: '',
|
|
cohorts: [],
|
|
cohortSources: [],
|
|
sources: [],
|
|
loading: false,
|
|
headers: [
|
|
{ text: 'Actions', value: 'actions' },
|
|
{ text: 'Name', value: 'name' },
|
|
{ text: 'Description', value: 'description' },
|
|
{ text: 'Updated', value: 'updatedAt' },
|
|
{ text: 'Sources', value: 'sources' },
|
|
]
|
|
}),
|
|
async fetch() {
|
|
// const lastPosts = await fetch('http://localhost:3000/api/posts').then(res => res.json())
|
|
this.cohorts = await this.$http.$get(`${process.env.baseUrl}/api/cohorts`)
|
|
},
|
|
watch: {
|
|
async search (value) {
|
|
if (!value) return
|
|
this.makeSearch()
|
|
}
|
|
},
|
|
methods: {
|
|
async makeSearch () {
|
|
this.loading = true
|
|
this.sources = await this.$http.$get(`${process.env.baseUrl}/api/source/search?search=${encodeURIComponent(this.search)}`)
|
|
this.loading = false
|
|
},
|
|
async addCohort () {
|
|
const cohort = await this.$http.$post(`${process.env.baseUrl}/api/cohort`, { ...this.cohort, sources: this.cohortSources.map(s => s.id) })
|
|
this.cohorts.unshift(cohort)
|
|
this.cohort = {}
|
|
},
|
|
async addSource () {
|
|
this.cohortSources.unshift(this.source)
|
|
this.source = null
|
|
this.sources = []
|
|
},
|
|
copy (ev, item) {
|
|
const str = `<display-feed feed='${process.env.baseUrl}/api/cohort/${item.id}'></display-feed>`
|
|
try {
|
|
navigator.clipboard.writeText(str)
|
|
} catch (e) {
|
|
const el = document.createElement('textarea')
|
|
el.addEventListener('focusin', e => e.stopPropagation())
|
|
el.value = str
|
|
document.body.appendChild(el)
|
|
el.select()
|
|
document.execCommand('copy')
|
|
document.body.removeChild(el)
|
|
}
|
|
},
|
|
}
|
|
}
|
|
</script> |