<template> <div class=""> <div v-if="loading" class="pr-4" > <v-skeleton-loader type="text" class="mx-2 mt-4 mr-14" /> <v-skeleton-loader type="text@10" class="mx-2 mt-4" /> <v-skeleton-loader type="text@2" class="mx-2 mt-4 mr-14" /> </div> <template v-else> <v-list dense> <v-list-item dense> <v-list-item-subtitle> <span class="caption" @dblclick="counterLoc++">Categories</span> </v-list-item-subtitle> </v-list-item> <v-list-item-group v-model="category"> <v-list-item v-for="c in categories" :key="c.category" :value="c.category" dense> <v-list-item-title> <span :class="{'font-weight-black' : category === c.category } " class="body-1" > {{ c.category }} </span> <span class="grey--text ">({{ c.count }})</span> </v-list-item-title> </v-list-item> </v-list-item-group> </v-list> <!-- v-if="counter > 4"--> <v-btn class="ml-4" color="grey" small outlined @click="showTemplateEditor" > <v-icon class="mr-1" small> mdi-plus </v-icon> New template </v-btn> <v-tooltip bottom> <template #activator="{on}"> <v-btn class="ml-4 mt-4" color="grey" small outlined v-on="on" @click="$toast.info('Happy hacking!').goAway(3000)" > <v-icon small class="mr-1"> mdi-file-excel-outline </v-icon> Import </v-btn> </template> <span class="caption">Create templates from multiple Excel files</span> </v-tooltip> <v-text-field v-if="$store.state.templateE > 3" v-model="t" autocomplete="new-password" name="nc" outlined dense :full-width="false" style="width: 135px" type="password" class="caption mt-4 ml-1 mr-3 ml-4 " hide-details /> </template> </div> </template> <script> // import categories from './templates.categories' export default { name: 'Categories', props: { value: String, counter: Number }, data: () => ({ categories: [], loading: false }), computed: { counterLoc: { get() { return this.$store.state.templateE }, set(c) { this.$store.commit('mutTemplateE', c) } }, category: { get() { return this.value }, set(v) { this.$emit('input', v) } }, t: { get() { return this.$store.state.template }, set(t) { this.$store.commit('mutTemplate', t) } } }, created() { this.loadCategories() }, methods: { async loadCategories() { this.loading = true try { const res = await this.$axios.get(`${process.env.NC_API_URL}/api/v1/nc/templates/categories`) this.categories = res.data } catch (e) { console.log(e) } this.loading = false }, showTemplateEditor() { this.$emit('showTemplateEditor') } } } </script> <style scoped> </style>