mirror of https://github.com/nocodb/nocodb
121 lines
3.1 KiB
121 lines
3.1 KiB
<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>
|
|
|