better cohort admin management

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') <v-icon v-text='mdiPlus'></v-icon> {{$t('common.new')}}
+  v-btn(color='primary' text @click='newCohort') <v-icon v-text='mdiPlus'></v-icon> {{$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(
+          v-text-field(
-          :rules="[$validators.required('common.name')]"
+            v-if='!cohort.id'
-          :label="$t('common.name')"
+            :rules="[$validators.required('common.name')]"
-          v-model='cohort.name'
+            :label="$t('common.name')"
-          :placeholder='$t("common.name")')
+            v-model='cohort.name'
-        
+            :placeholder='$t("common.name")')
-        v-row
+              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-icon v-text='mdiPlus'></v-icon>
+            v-btn(color='primary' text @click='addFilter' :disabled='!cohort.id || !filterPlaces.length && !filterTags.length') add <v-icon v-text='mdiPlus'></v-icon>
             
 
         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='dialog=false' color='warning') {{$t('common.close')}}
-          v-btn(text @click='saveCohort' color='primary' :loading='loading'
+          //- v-btn(text @click='saveCohort' color='primary' :loading='loading'
-              :disable='!valid || loading') {{$t('common.save')}}
+          //-     :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 () {
+  async fetch () {
-    this.cohorts = await this.$axios.$get('/cohorts')
+    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' })