多维表格
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

139 lines
3.8 KiB

<template>
<v-container v-if="newEditor || !modal || selectedId === null" class="py-0">
<div class="d-flex h-100">
<v-navigation-drawer permanent height="100% ">
<categories
ref="cat"
v-model="category"
:counter.sync="counter"
@input="newEditor = false"
@showTemplateEditor="newEditor = true"
/>
</v-navigation-drawer>
<template-editor
v-if="newEditor"
:project-template.sync="projectTemplate"
style="width: 100%; height: 100%"
@saved="onSaved"
/>
<v-container v-else fluid style="height: 100%; overflow: auto">
<v-row v-if="templatesLoading">
<v-col v-for="i in 10" :key="i" sm="8" offset-sm="2" offset-md="0" md="6" lg="4" xl="3">
<v-skeleton-loader type="card" />
</v-col>
</v-row>
<v-row v-else-if="templateList && templateList.length" class="align-stretch">
<v-col v-for="(template, i) in templateList" :key="i" sm="8" offset-sm="2" offset-md="0" md="6" lg="4" xl="3">
<v-card height="100%" class="mx-auto" @click="openTemplate(template.id)">
<v-img :src="template.image_url" height="50px" :style="{ background: template.image_url }" />
<v-card-title>
{{ template.title }}
</v-card-title>
<v-card-subtitle>
<span class="caption">
{{ getShortDescription(template.description) }}
</span>
</v-card-subtitle>
</v-card>
</v-col>
</v-row>
<div v-else class="d-flex justify-center mt-10">
<v-alert class="flex-shrink-1" type="info" outlined dense> No templates found </v-alert>
</div>
</v-container>
</div>
</v-container>
<project-template-detailed
v-else
:id="selectedId"
:create-project="createProject"
:loading="loading"
:counter="counter"
:modal="modal"
:view-mode="counter < 5"
@saved="onSaved"
@load-category="
v => {
category = v;
selectedId = null;
}
"
v-on="$listeners"
@showTemplateEditor="newEditor = true"
/>
</template>
<script>
// import templateList from './templates.list'
import ProjectTemplateDetailed from '~/components/templates/Detailed';
import Categories from '~/components/templates/Categories';
import TemplateEditor from '~/components/templates/Editor';
export default {
name: 'ProjectTemplates',
components: { TemplateEditor, Categories, ProjectTemplateDetailed },
props: {
modal: Boolean,
loading: Boolean,
createProject: Boolean,
},
data: () => ({
templatesLoading: false,
category: null,
selectedId: null,
templateListLoc: [],
counter: 0,
newEditor: false,
projectTemplate: null,
}),
computed: {
templateList() {
return this.templateListLoc.filter(t => !this.category || t.category === this.category);
},
},
created() {
this.loadTemplates();
},
methods: {
async loadTemplates() {
this.templatesLoading = true;
try {
const res = await this.$axios.get(`${process.env.NC_API_URL}/api/v1/nc/templates`);
this.templateListLoc = res.data.data;
} catch (e) {
console.log(e);
}
this.templatesLoading = false;
},
getShortDescription(str) {
if (!str || str.length < 200) {
return str;
}
return `${str.slice(0, 200)}...`;
},
openTemplate(id) {
if (this.modal) {
this.selectedId = id;
} else {
this.$router.push(`/project/templates/${id}`);
}
},
async onSaved() {
await this.loadTemplates();
if (this.$refs.cat) {
await this.$refs.cat.loadCategories();
}
},
},
};
</script>
<style scoped>
/deep/ .v-list-item {
min-height: 30px;
}
</style>