diff --git a/components/admin/Cohorts.vue b/components/admin/Cohorts.vue index 3c73ec36..c48eb482 100644 --- a/components/admin/Cohorts.vue +++ b/components/admin/Cohorts.vue @@ -8,26 +8,31 @@ v-container single-line hide-details) v-card-subtitle(v-html="$t('admin.cohort_description')") - v-btn(color='primary' text @click='dialog = true') {{$t('common.new')}} + v-btn(color='primary' text @click='newCohort') {{$t('common.new')}} v-dialog(v-model='dialog' width='800' destroy-on-close :fullscreen='$vuetify.breakpoint.xsOnly') v-card(color='secondary') v-card-title {{$t('admin.edit_cohort')}} v-card-text v-form(v-model='valid' ref='form' lazy-validation) - v-text-field( - :rules="[$validators.required('common.name')]" - :label="$t('common.name')" - v-model='cohort.name' - :placeholder='$t("common.name")') - - v-row + v-text-field( + v-if='!cohort.id' + :rules="[$validators.required('common.name')]" + :label="$t('common.name')" + v-model='cohort.name' + :placeholder='$t("common.name")') + template(v-slot:append-outer v-if='!cohort.id') + v-btn(text @click='saveCohort' color='primary' :loading='loading' + :disabled='!valid || loading || !!cohort.id') {{$t('common.save')}} + h3(v-else class='text-h5' v-text='cohort.name') + v-row v-col(cols=5) v-autocomplete(v-model='filterTags' :prepend-icon="mdiTagMultiple" chips small-chips multiple deletable-chips hide-no-data hide-selected persistent-hint no-filter + :disabled="!cohort.id" placeholder='Tutte' :search-input.sync="tagName" :delimiters="[',', ';']" @@ -40,13 +45,15 @@ v-container chips small-chips multiple deletable-chips hide-no-data hide-selected persistent-hint no-filter item-text='name' + return-object + :disabled="!cohort.id" :search-input.sync="placeName" :delimiters="[',', ';']" :items="filteredPlaces" :label="$t('common.places')") v-col(cols=2) - v-btn(color='primary' text @click='addFilter') add + v-btn(color='primary' text @click='addFilter' :disabled='!cohort.id || !filterPlaces.length && !filterTags.length') add v-data-table( @@ -60,15 +67,15 @@ v-container template(v-slot:item.tags='{item}') v-chip.ma-1(small v-for='tag in item.tags' v-text='tag' :key='tag') template(v-slot:item.places='{item}') - v-chip.ma-1(small v-for='place in item.places' v-text='place.name' :key='place' ) + v-chip.ma-1(small v-for='place in item.places' v-text='place.name' :key='place.id' ) v-card-actions v-spacer - v-btn(text @click='dialog=false' color='warning') {{$t('common.cancel')}} - v-btn(text @click='saveCohort' color='primary' :loading='loading' - :disable='!valid || loading') {{$t('common.save')}} + v-btn(text @click='dialog=false' color='warning') {{$t('common.close')}} + //- v-btn(text @click='saveCohort' color='primary' :loading='loading' + //- :disable='!valid || loading') {{$t('common.save')}} v-card-text v-data-table( @@ -77,6 +84,8 @@ v-container :hide-default-footer='cohorts.length<5' :footer-props='{ prevIcon: mdiChevronLeft, nextIcon: mdiChevronRight }' :search='search') + template(v-slot:item.filters='{item}') + span {{cohortFilters(item)}} template(v-slot:item.actions='{item}') v-btn(@click='editCohort(item)' color='primary' icon) v-icon(v-text='mdiPencil') @@ -106,7 +115,7 @@ export default { placeName: '', cohortHeaders: [ { value: 'name', text: 'Name' }, - { value: 'description', text: 'Description' }, + { value: 'filters', text: 'Filters' }, { value: 'actions', text: 'Actions', align: 'right' } ], filterHeaders: [ @@ -142,40 +151,50 @@ export default { return matches } }, - async mounted () { - this.cohorts = await this.$axios.$get('/cohorts') + async fetch () { + this.cohorts = await this.$axios.$get('/cohorts?withFilters=true') }, methods: { ...mapActions(['updateMeta']), + cohortFilters (cohort) { + return cohort.filters.map(f => { + return '(' + f.tags?.join(', ') + f.places?.map(p => p.name).join(', ') + ')' + }).join(' - ') + }, async addFilter () { this.loading = true const tags = this.filterTags const places = this.filterPlaces.map(p => ({ id: p.id, name: p.name })) const filter = await this.$axios.$post('/filter', { cohortId: this.cohort.id, tags, places }) + this.$fetch() this.filters.push(filter) this.filterTags = [] this.filterPlaces = [] this.loading = false }, async editCohort (cohort) { - console.error(cohort) this.cohort = { ...cohort } this.filters = await this.$axios.$get(`/filter/${cohort.id}`) this.dialog = true }, + newCohort () { + this.cohort = { name: '', id: null }, + this.filters = [] + this.dialog = true + }, async saveCohort () { if (!this.$refs.form.validate()) return this.loading = true this.cohort = await this.$axios.$post('/cohorts', this.cohort) - // this.updateMeta() + this.$fetch() this.loading = false - // this.dialog = false }, async removeFilter(filter) { try { await this.$axios.$delete(`/filter/${filter.id}`) this.filters = this.filters.filter(f => f.id !== filter.id) + this.$fetch() } catch (e) { const err = get(e, 'response.data.errors[0].message', e) this.$root.$message(this.$t(err), { color: 'error' })