feat: template creation

Signed-off-by: Pranav C <pranavxc@gmail.com>

packages/nc-gui/components/templates/categories.vue

@@ -20,8 +20,8 @@
         </v-list-item>
       </v-list-item-group>
     </v-list>
+    <!--      v-if="counter > 4"-->
     <v-btn
-      v-if="counter > 4"
       color="primary"
       outlined
       @click="showTemplateEditor"

packages/nc-gui/components/templates/detailed.vue

@@ -1,7 +1,7 @@
 <template>
   <v-container class="py-0">
     <div class="d-flex">
-      <v-navigation-drawer height="calc(100vh - 40px)">
+      <v-navigation-drawer permanent height="calc(100vh - 40px)">
         <categories
           ref="cat"
           :counter.sync="counter"

packages/nc-gui/components/templates/editor.vue

@@ -680,7 +680,7 @@ export default {
     validateAndFocus() {
       if (!this.$refs.form.validate()) {
         const input = this.$el.querySelector('.v-input.error--text')
-        this.expansionPanel = +input.parentElement.parentElement.dataset.exp
+        this.expansionPanel = input && input.parentElement && input.parentElement.parentElement && +input.parentElement.parentElement.dataset.exp
         setTimeout(() => {
           input.querySelector('input,select').focus()
         }, 500)
@@ -865,6 +865,7 @@ export default {
 
       const el = document.createElement('textarea')
       el.value = JSON.stringify(this.projectTemplate, null, 2)
+      debugger
       el.setAttribute('readonly', '')
       el.style = { position: 'absolute', left: '-9999px' }
       document.body.appendChild(el)
@@ -872,6 +873,7 @@ export default {
       document.execCommand('copy')
       document.body.removeChild(el)
       this.$toast.success('Successfully copied JSON data to clipboard!').goAway(3000)
+      return true
     },
     openUrl() {
       window.open(this.url, '_blank')
@@ -1025,6 +1027,14 @@ export default {
             }
           })
           this.$toast.success('Template updated successfully').goAway(3000)
+        } else if (!this.token) {
+          if (!this.copyJSON()) { return }
+
+          this.$toast.info('Initiating Github for template').goAway(3000)
+          const res = await this.$axios.post(`${process.env.NC_API_URL}/api/v1/projectTemplateCreate`, this.projectTemplate)
+          console.log(res)
+          this.$toast.success('Initiated Github successfully').goAway(3000)
+          window.open(res.data.path, '_blank')
         } else {
           const res = await this.$axios.post(`${process.env.NC_API_URL}/api/v1/nc/templates`, this.projectTemplate, {
             params: {

packages/nc-gui/components/templates/gradientGenerator.vue

@@ -7,8 +7,8 @@
     >
       Click to change gradient
     </div>
-    <input v-model="color1" :style="{background:color1} " type="color">
-    <input v-model="color2" :style="{background:color2} " type="color">
+    <input v-model="color1" :style="{color:color1} " type="color">
+    <input v-model="color2" :style="{color:color2} " type="color">
   </div>
 </template>
 
@@ -41,6 +41,11 @@ export default {
       }
     }
   },
+  created() {
+    if (!this.color1 && !this.color2) {
+      this.generateGradient()
+    }
+  },
   methods: {
 
     generateGradient() {
@@ -58,10 +63,8 @@ export default {
       const newColor1 = populate('#')
       const newColor2 = populate('#')
       this.angle = Math.round(Math.random() * 360)
-      this.color1 = newColor1
-      this.color2 = newColor2
-      // const gradient = 'linear-gradient(' + this.angle + 'deg, ' + newColor1 + ', ' + newColor2 + ')'
-      // this.$emit('input', gradient)
+      const gradient = 'linear-gradient(' + this.angle + 'deg, ' + newColor1 + ', ' + newColor2 + ')'
+      this.$emit('input', gradient)
     }
   }
 }

packages/nc-gui/components/templates/list.vue

@@ -1,7 +1,7 @@
 <template>
   <v-container v-if="newEditor || !modal || selectedId === null " class="py-0">
     <div class="d-flex">
-      <v-navigation-drawer height="calc(100vh - 40px)">
+      <v-navigation-drawer permanent height="calc(100vh - 40px)">
         <categories
           ref="cat"
           v-model="category"

packages/nc-gui/nuxt.config.js

@@ -210,7 +210,8 @@ export default {
   ],
   env: {
     EE: !!process.env.EE,
-    NC_API_URL: 'http://localhost:3000'
+    NC_API_URL: 'http://localhost:3001'
+    // NC_API_URL: 'https://nocodb.com'
   },
   pwa: {
     workbox: {