feat: integrate template api - ui

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

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

@@ -2,12 +2,18 @@
   <v-container class="py-0">
     <div class="d-flex">
       <v-navigation-drawer height="calc(100vh - 40px)">
-        <categories ref="cat" :counter.sync="counter" @input="v => $emit('load-category', v)" />
+        <categories
+          ref="cat"
+          :counter.sync="counter"
+          @showTemplateEditor="$emit('showTemplateEditor')"
+          @input="v => $emit('load-category', v)"
+        />
       </v-navigation-drawer>
       <v-container v-if="templateData" fluid style="height: calc(100vh - 40px ); overflow: auto">
         <v-img
-          :src="templateData.image_url || `https://picsum.photos/200/300?${id}`"
+          :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">

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

@@ -381,6 +381,17 @@
                       :rules="[v => !!v || 'Required'] "
                     />
                   </div>
+                  <!--
+                  <div
+                    class="rounded pa-5 mb-5 d-100 text-center caption"
+                    :style="{background:project.image_url}"
+                    @click="generateGradient"
+                  >
+                    Click to change gradient
+                  </div>-->
+
+                  <gradient-generator v-model="project.image_url" class=" d-100" />
+
                   <v-row>
                     <v-col>
                       <v-text-field
@@ -497,6 +508,7 @@
 <script>
 
 import { uiTypes, getUIDTIcon } from '~/components/project/spreadsheet/helpers/uiTypes'
+import GradientGenerator from '~/components/templates/gradientGenerator'
 
 const LinkToAnotherRecord = 'LinkToAnotherRecord'
 const Lookup = 'Lookup'
@@ -505,7 +517,7 @@ const defaultColProp = {}
 
 export default {
   name: 'TemplateEditor',
-  components: {},
+  components: { GradientGenerator },
   props: {
     id: [Number, String],
     viewMode: Boolean,
@@ -1003,6 +1015,7 @@ export default {
         accord.scrollIntoView()
       })
     },
+
     async saveTemplate() {
       try {
         if (this.id || this.localId) {

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

@@ -0,0 +1,72 @@
+<template>
+  <div class="d-100 mb-5">
+    <div
+      class="rounded pa-5 mb-2 d-100 text-center caption"
+      :style="{background:value}"
+      @click="generateGradient"
+    >
+      Click to change gradient
+    </div>
+    <input v-model="color1" :style="{background:color1} " type="color">
+    <input v-model="color2" :style="{background:color2} " type="color">
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'GradientGenerator',
+  props: {
+    value: [String]
+  },
+  data: () => ({
+    angle: 0
+  }),
+  computed: {
+    color1: {
+      get() {
+        return this.value && this.value.split(',')[1]
+      },
+      set(v) {
+        const gradient = 'linear-gradient(' + this.angle + 'deg, ' + v + ', ' + this.color2 + ')'
+        this.$emit('input', gradient)
+      }
+    },
+    color2: {
+      get() {
+        return this.value && this.value.split(',')[2].slice(0, -1)
+      },
+      set(v) {
+        const gradient = 'linear-gradient(' + this.angle + 'deg, ' + this.color1 + ', ' + v + ')'
+        this.$emit('input', gradient)
+      }
+    }
+  },
+  methods: {
+
+    generateGradient() {
+      const hexValues = '0123456789abcde'
+
+      function populate(a) {
+        for (let i = 0; i < 6; i++) {
+          const x = Math.round(Math.random() * 14)
+          const y = hexValues[x]
+          a += y
+        }
+        return a
+      }
+
+      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)
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

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

@@ -32,8 +32,9 @@
               class="mx-auto"
             >
               <v-img
-                :src="template.image_url || `https://picsum.photos/200/300?${template.id}`"
+                :src="template.image_url"
                 height="200px"
+                :style="{ background: template.image_url }"
               />
 
               <v-card-title>
@@ -65,6 +66,7 @@
     @saved="onSaved"
     @load-category="v =>{ category = v; selectedId = null }"
     v-on="$listeners"
+    @showTemplateEditor="newEditor = true"
   />
 </template>
 

packages/nocodb/src/lib/templateParser/NcTemplateParser.ts

@@ -107,10 +107,9 @@ export default class NcTemplateParser {
               dtx: 'specificType',
               dtxp: this.sqlUi.getDefaultLengthForDatatype(colProp.dt),
               dtxs: this.sqlUi.getDefaultScaleForDatatype(colProp.dt),
-              cn: tableColumn.cn,
+              ...colProp,
               _cn: tableColumn.cn,
-              uidt: tableColumn.uidt,
-              ...colProp
+              ...tableColumn
             });
           }
           break;