nocodb/packages/nc-gui/components/templates/Detailed.vue

<template>
  <v-container class="py-0">
    <div class="d-flex h-100">
      <v-navigation-drawer permanent height="100%">
        <categories
          ref="cat"
          :counter.sync="counter"
          @showTemplateEditor="$emit('showTemplateEditor')"
          @input="v => $emit('load-category', v)"
        />
      </v-navigation-drawer>
      <v-container fluid style="height: 100%; overflow: auto">
        <template v-if="loadingTemplate">
          <v-skeleton-loader type="image" />
          <div class="d-flex mt-2 align-center">
            <v-skeleton-loader style="width:200px; " type="card-heading" />
            <v-spacer />
            <v-skeleton-loader type="button" />
          </div>
          <v-skeleton-loader type="paragraph" class="mt-2" />
          <v-skeleton-loader type="table" class="mt-2" />
        </template>
        <template v-else-if="templateData">
          <v-img
            :src="templateData.image_url"
            height="200px"
            :style="{ background: templateData.image_url }"
          />
          <div class="d-flex align-center mt-10">
            <h2 class="display-2 font-weight-bold my-0 flex-grow-1">
              {{ templateData.title }}
            </h2>
            <v-menu v-if="createProject" bottom offset-y>
              <template #activator="{on}">
                <v-btn
                  :loading="loading"
                  :disabled="loading"
                  class="primary"
                  x-large
                  v-on="on"
                >
                  Use template
                  <v-icon>mdi-menu-down</v-icon>
                </v-btn>
              </template>
              <v-list>
                <v-list-item dense class="py-2" @click="useTemplate('rest')">
                  <v-list-item-title>
                    <v-icon class="mr-1" :color="textColors[7]">
                      mdi-code-json
                    </v-icon>
                    Create REST Project
                  </v-list-item-title>
                </v-list-item>
                <v-list-item dense class="py-2" @click="useTemplate('graphql')">
                  <v-list-item-title>
                    <v-icon class="mr-1" :color="textColors[3]">
                      mdi-graphql
                    </v-icon>
                    Create GQL Project
                  </v-list-item-title>
                </v-list-item>
              </v-list>
            </v-menu>
            <v-btn
              v-else
              :loading="loading"
              :disabled="loading"
              class="primary"
              x-large
              @click="useTemplate"
            >
              Use template
            </v-btn>
          </div>
          <p class="caption mt-10">
            {{ templateData.description }}
          </p>

          <templat-editor
            :id="templateId"
            ref="editor"
            :view-mode="$store.state.templateE < 4 && viewMode"
            :project-template.sync="templateData"
            @saved="onSaved"
          />
        </template>
      </v-container>
    </div>
  </v-container>
</template>

<script>
import TemplatEditor from '~/components/templates/Editor'
import Categories from '~/components/templates/Categories'
import colors from '~/mixins/colors'

export default {
  name: 'ProjectTemplateDetailed',
  components: { Categories, TemplatEditor },
  mixins: [colors],
  props: {
    loading: Boolean,
    modal: Boolean,
    viewMode: Boolean,
    id: [String, Number],
    createProject: Boolean
  },
  data: () => ({ templateData: null, counter: 0, loadingTemplate: false }),
  computed: {
    templateId() {
      return this.modal ? this.id : this.$route.params.id
    }
  },
  mounted() {
    this.loadTemplateData()
  },
  methods: {
    async loadTemplateData() {
      this.loadingTemplate = true
      try {
        const res = await this.$axios.get(`${process.env.NC_API_URL}/api/v1/nc/templates/${this.templateId}`)
        const data = res.data
        this.templateData = JSON.parse(data.template)
        await this.$nextTick()
        if (this.$refs.editor) { this.$refs.editor.parseAndLoadTemplate() }
      } catch (e) {
        console.log(e)
      }
      this.loadingTemplate = false
    },
    useTemplate(apiType) {
      if (this.modal) {
        this.$emit('import', this.templateData, apiType)
      }
    },
    async onSaved() {
      await this.loadTemplateData()
      if (this.$refs.cat) {
        await this.$refs.cat.loadCategories()
      }
      this.$emit('saved')
    }
  }
}
</script>

<style scoped>
/deep/ .v-list-item {
  min-height: 30px;
}
</style>