From cda9014a08e52121b11865bbfec871a3ada27ec3 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sun, 12 Dec 2021 13:13:53 +0530
Subject: [PATCH] fix: template editor

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/components/templates/detailed.vue   |  8 ++++++--
 packages/nc-gui/components/templates/editor.vue     | 13 ++++++++-----
 packages/nc-gui/components/templates/list.vue       |  5 +++--
 .../nc-gui/components/templates/templatesModal.vue  |  2 ++
 4 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/packages/nc-gui/components/templates/detailed.vue b/packages/nc-gui/components/templates/detailed.vue
index 16e657b65e..6b4a75af4a 100644
--- a/packages/nc-gui/components/templates/detailed.vue
+++ b/packages/nc-gui/components/templates/detailed.vue
@@ -39,7 +39,8 @@
                   x-large
                   v-on="on"
                 >
-                  Use template <v-icon>mdi-menu-down</v-icon>
+                  Use template
+                  <v-icon>mdi-menu-down</v-icon>
                 </v-btn>
               </template>
               <v-list>
@@ -78,8 +79,9 @@
 
           <templat-editor
             :id="templateId"
+            ref="editor"
             :view-mode="$store.state.templateE < 4 && viewMode"
-            :template-data.sync="templateData"
+            :project-template.sync="templateData"
             @saved="onSaved"
           />
         </template>
@@ -120,6 +122,8 @@ export default {
         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)
       }
diff --git a/packages/nc-gui/components/templates/editor.vue b/packages/nc-gui/components/templates/editor.vue
index e441702605..9d6bc55392 100644
--- a/packages/nc-gui/components/templates/editor.vue
+++ b/packages/nc-gui/components/templates/editor.vue
@@ -709,7 +709,7 @@ export default {
             return table
           })
         }
-
+        debugger
         this.$emit('update:projectTemplate', template)
       }
     }
@@ -722,10 +722,7 @@ export default {
     document.removeEventListener('keydown', this.handleKeyDown)
   },
   mounted() {
-    if (this.projectTemplate) {
-      this.parseTemplate(this.projectTemplate)
-      this.expansionPanel = Array.from({ length: this.project.tables.length }, (_, i) => i)
-    }
+    this.parseAndLoadTemplate()
     const input = this.$refs.projec && this.$refs.project.$el.querySelector('input')
     if (input) {
       input.focus()
@@ -733,6 +730,12 @@ export default {
     }
   },
   methods: {
+    parseAndLoadTemplate() {
+      if (this.projectTemplate) {
+        this.parseTemplate(this.projectTemplate)
+        this.expansionPanel = Array.from({ length: this.project.tables.length }, (_, i) => i)
+      }
+    },
     getIcon(type) {
       return getUIDTIcon(type)
     },
diff --git a/packages/nc-gui/components/templates/list.vue b/packages/nc-gui/components/templates/list.vue
index c6937d80ed..f0758e8a36 100644
--- a/packages/nc-gui/components/templates/list.vue
+++ b/packages/nc-gui/components/templates/list.vue
@@ -10,7 +10,7 @@
           @showTemplateEditor="newEditor = true"
         />
       </v-navigation-drawer>
-      <template-editor v-if="newEditor" style="width:100%; height: 100%; " @saved="onSaved" />
+      <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
@@ -108,7 +108,8 @@ export default {
     selectedId: null,
     templateListLoc: [],
     counter: 0,
-    newEditor: false
+    newEditor: false,
+    projectTemplate: null
   }),
   computed: {
     templateList() {
diff --git a/packages/nc-gui/components/templates/templatesModal.vue b/packages/nc-gui/components/templates/templatesModal.vue
index 8e339f583d..d15cf2abd4 100644
--- a/packages/nc-gui/components/templates/templatesModal.vue
+++ b/packages/nc-gui/components/templates/templatesModal.vue
@@ -13,6 +13,7 @@
           style="height:90vh"
           modal
           :loading="loading"
+          :project-template.sync="templateData"
           @import="importTemplate"
         />
       </v-card>
@@ -39,6 +40,7 @@ export default {
     createProject: Boolean
   },
   data: () => ({
+    templateData: null,
     loading: false,
     projectCreation: false,
     loaderMessagesIndex: 0,