feat: Expand form relations and ui corrections

Signed-off-by: Pranav C <61551451+pranavxc@users.noreply.github.com>

packages/nc-gui/components/project/spreadsheet/components/columnFilterMenu.vue

@@ -19,6 +19,7 @@
     <column-filter v-model="filters" :field-list="fieldList">
       <div class="d-flex align-center mx-2" @click.stop>
         <v-checkbox
+          class="col-filter-checkbox"
           hide-details
           dense
           id="col-filter-checkbox"
@@ -85,4 +86,7 @@ export default {
 </script>
 
 <style scoped>
+/deep/ .col-filter-checkbox .v-input--selection-controls__input {
+  transform: scale(.7);
+}
 </style>

packages/nc-gui/components/project/spreadsheet/components/virtualHeaderCell.vue

@@ -1,15 +1,18 @@
 <template>
   <div class="d-flex align-center">
 
+    <v-tooltip bottom>
+      <template #activator="{on}">
+        <v-icon v-if="column.hm" color="warning" x-small class="mr-1" v-on="on">mdi-table-arrow-right</v-icon>
+        <v-icon v-else-if="column.bt" color="info" x-small class="mr-1" v-on="on">mdi-table-arrow-left</v-icon>
+        <v-icon v-else-if="column.mm" color="pink" x-small class="mr-1" v-on="on">mdi-table-network</v-icon>
 
-    <v-icon v-if="column.hm" color="warning" x-small class="mr-1">mdi-table-arrow-right</v-icon>
+        <span v-on="on">{{ column._cn }}</span>
-    <v-icon v-else-if="column.bt" color="info" x-small class="mr-1">mdi-table-arrow-left</v-icon>
-    <v-icon v-else-if="column.mm" color="pink" x-small class="mr-1">mdi-table-network</v-icon>
-
-    {{ column._cn }}
-
-    <span v-if="column.rqd" class="error--text text--lighten-1">&nbsp;*</span>
 
+        <span v-if="column.rqd" v-on="on" class="error--text text--lighten-1">&nbsp;*</span>
+      </template>
+      <span class="caption" v-html="tooltipMsg"></span>
+    </v-tooltip>
     <v-spacer>
     </v-spacer>
 
@@ -18,37 +21,46 @@
         <v-icon v-on="on" small>mdi-menu-down</v-icon>
       </template>
       <v-list dense>
-        <v-list-item dense @click="editColumnMenu = true">
+        <!--  <v-list-item dense @click="editColumnMenu = true">
-          <x-icon small class="mr-1" color="primary">mdi-pencil</x-icon>
+            <x-icon small class="mr-1" color="primary">mdi-pencil</x-icon>
-          <span class="caption">Edit</span>
+            <span class="caption">Edit</span>
-        </v-list-item>
+          </v-list-item>
-        <v-list-item dense @click="setAsPrimaryValue">
+          <v-list-item dense @click="setAsPrimaryValue">
-          <x-icon small class="mr-1" color="primary">mdi-key-star</x-icon>
+            <x-icon small class="mr-1" color="primary">mdi-key-star</x-icon>
-          <v-tooltip bottom>
+            <v-tooltip bottom>
-            <template v-slot:activator="{on}">
+              <template v-slot:activator="{on}">
-              <span class="caption" v-on="on">Set as Primary value</span>
+                <span class="caption" v-on="on">Set as Primary value</span>
-            </template>
+              </template>
-            <span class="caption font-weight-bold">Primary value will be shown in place of primary key</span>
+              <span class="caption font-weight-bold">Primary value will be shown in place of primary key</span>
-          </v-tooltip>
+            </v-tooltip>
-        </v-list-item>
+          </v-list-item>
-        <v-list-item @click="columnDeleteDialog = true">
+          <v-list-item @click="columnDeleteDialog = true">
-          <x-icon small class="mr-1" color="error">mdi-delete-outline</x-icon>
+            <x-icon small class="mr-1" color="error">mdi-delete-outline</x-icon>
-          <span class="caption">Delete</span>
+            <span class="caption">Delete</span>
-        </v-list-item>
+          </v-list-item>-->
       </v-list>
     </v-menu>
 
 
-
-
   </div>
 </template>
 <script>
 export default {
   props: ['column'],
   name: "virtualHeaderCell",
-  data: () => ({
+  data: () => ({}),
-  }),
+  computed: {
+    tooltipMsg() {
+      if (!this.column) return '';
+      if (this.column.hm) {
+        return `'${this.column.hm._rtn}' has many '${this.column.hm._tn}'`
+      } else if (this.column.mm) {
+        return `'${this.column.mm._tn}' & '${this.column.mm._rtn}' have <br>many to many relation`
+      } else if (this.column.bt) {
+        return `'${this.column.bt._tn}' belongs to '${this.column.bt._rtn}'`
+      }
+    }
+  }
 }
 </script>
 

packages/nc-gui/components/project/spreadsheet/mixins/spreadsheet.js

@@ -109,11 +109,12 @@ export default {
       return {
         limit: this.size,
         offset: this.size * (this.page - 1),
+        // condition: this.condition,
         where: this.concatenatedXWhere,
         sort: this.sort,
-        childs: (this.meta && this.meta.v && this.meta.v.filter(v=>v.hm).map(({hm}) => hm.tn).join()) || '',
+        childs: (this.meta && this.meta.v && this.meta.v.filter(v => v.hm).map(({hm}) => hm.tn).join()) || '',
-        parents: (this.meta && this.meta.v && this.meta.v.filter(v=>v.bt).map(({bt}) => bt.rtn).join()) || '',
+        parents: (this.meta && this.meta.v && this.meta.v.filter(v => v.bt).map(({bt}) => bt.rtn).join()) || '',
-        many: (this.meta && this.meta.v && this.meta.v.filter(v=>v.mm).map(({mm}) => mm.rtn).join()) || ''
+        many: (this.meta && this.meta.v && this.meta.v.filter(v => v.mm).map(({mm}) => mm.rtn).join()) || ''
       }
     }, colLength() {
       return (this.availableColumns && this.availableColumns.length) || 0

packages/nc-gui/components/project/tableTabs/customAcl.vue

@@ -1,6 +1,6 @@
 <template>
   <v-skeleton-loader v-if="loading" type="text@3"></v-skeleton-loader>
-  <div class="caption" v-else>{{ Array.isArray(value) ? '[' : '{' }}
+  <div class="caption text-left" v-else>{{ Array.isArray(value) ? '[' : '{' }}
 
     <ul>
       <template v-if="Array.isArray(value)">

packages/nocodb/src/lib/noco/rest/RestAuthCtrl.ts

@@ -84,7 +84,7 @@ export default class RestAuthCtrl {
     autoBind(this);
     // todo: default secret generation
     this.config.auth.jwt.secret = this.config?.auth?.jwt?.secret ?? 'secret';
-    this.jwtOptions = {secretOrKey: this.config.auth.jwt.secret}
+    this.jwtOptions = {secretOrKey: this.config.auth.jwt.secret, expiresIn: process.env.NC_JWT_EXPIRES_IN ?? '10h'}
     this.jwtOptions.jwtFromRequest = ExtractJwt.fromHeader('xc-auth');
     if (this.config?.auth?.jwt?.options) {
       Object.assign(this.jwtOptions, this.config?.auth?.jwt?.options);

packages/nocodb/src/lib/noco/rest/RestCtrl.ts

@@ -142,8 +142,15 @@ export class RestCtrl extends RestBaseCtrl {
   public async nestedList(req: Request | any, res): Promise<void> {
     const startTime = process.hrtime();
 
-    if (req.query.conditionGraph && typeof req.query.conditionGraph === 'string') {
+    try {
-      req.query.conditionGraph = {models: this.models, condition: JSON.parse(req.query.conditionGraph)}
+      if (req.query.conditionGraph && typeof req.query.conditionGraph === 'string') {
+        req.query.conditionGraph = {models: this.models, condition: JSON.parse(req.query.conditionGraph)}
+      }
+      if (req.query.condition && typeof req.query.condition === 'string') {
+        req.query.condition = JSON.parse(req.query.condition)
+      }
+    }catch (e){
+      /* ignore parse error */
     }
 
     const data = await req.model.nestedList({