feat: order and ui control for bases

Signed-off-by: mertmit <mertmit99@gmail.com>

packages/nc-gui/components.d.ts

@@ -118,10 +118,12 @@ declare module '@vue/runtime-core' {
     MdiApi: typeof import('~icons/mdi/api')['default']
     MdiAppleKeyboardShift: typeof import('~icons/mdi/apple-keyboard-shift')['default']
     MdiArrowCollapse: typeof import('~icons/mdi/arrow-collapse')['default']
+    MdiArrowDownBox: typeof import('~icons/mdi/arrow-down-box')['default']
     MdiArrowDownDropCircle: typeof import('~icons/mdi/arrow-down-drop-circle')['default']
     MdiArrowDownDropCircleOutline: typeof import('~icons/mdi/arrow-down-drop-circle-outline')['default']
     MdiArrowExpand: typeof import('~icons/mdi/arrow-expand')['default']
     MdiArrowLeftBold: typeof import('~icons/mdi/arrow-left-bold')['default']
+    MdiArrowUpBox: typeof import('~icons/mdi/arrow-up-box')['default']
     MdiAt: typeof import('~icons/mdi/at')['default']
     MdiBackburger: typeof import('~icons/mdi/backburger')['default']
     MdiBookOpenOutline: typeof import('~icons/mdi/book-open-outline')['default']

packages/nc-gui/components/dashboard/TreeView.vue

@@ -67,6 +67,8 @@ const filteredTables = $computed(() =>
   tables.value?.filter((table) => !filterQuery || table.title.toLowerCase().includes(filterQuery.toLowerCase())),
 )
 
+const filteredBases = $computed(() => bases.value.filter((base) => base.enabled))
+
 let sortable: Sortable
 
 // todo: replace with vuedraggable
@@ -399,7 +401,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
 
           <div v-if="tables.length" class="transition-height duration-200 overflow-hidden">
             <div :key="key" ref="menuRef" class="border-none sortable-list">
-              <div v-for="[index, base] of Object.entries(bases)" :key="`${base.id}-index`">
+              <div v-for="[index, base] of Object.entries(filteredBases)" :key="`${base.id}-index`">
                 <div v-if="index === '0'">
                   <div
                     v-for="table of tables.filter((table) => table.base_id === base.id)"

packages/nc-gui/components/dashboard/settings/DataSources.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { Empty } from 'ant-design-vue'
 import type { BaseType } from 'nocodb-sdk'
+import type { CheckboxChangeEvent } from 'ant-design-vue/lib/checkbox/interface'
 import CreateBase from './data-sources/CreateBase.vue'
 import EditBase from './data-sources/EditBase.vue'
 import Metadata from './Metadata.vue'
@@ -92,6 +93,44 @@ const deleteBase = (base: BaseType) => {
   })
 }
 
+const toggleBase = async (base: BaseType, e: CheckboxChangeEvent) => {
+  try {
+    base.enabled = e.target.checked
+    await $api.base.update(base.project_id as string, base.id as string, {
+      id: base.id,
+      project_id: base.project_id,
+      enabled: base.enabled,
+    })
+    await loadProject()
+  } catch (e: any) {
+    message.error(await extractSdkResponseErrorMsg(e))
+  }
+}
+
+const moveBase = async (base: BaseType, direction: 'up' | 'down') => {
+  try {
+    if (!base.order) {
+      // empty update call to reorder bases (migration)
+      await $api.base.update(base.project_id as string, base.id as string, {
+        id: base.id,
+        project_id: base.project_id,
+      })
+      message.info('Bases are migrated. Please try again.')
+    } else {
+      direction === 'up' ? base.order-- : base.order++
+      await $api.base.update(base.project_id as string, base.id as string, {
+        id: base.id,
+        project_id: base.project_id,
+        order: base.order,
+      })
+    }
+    await loadProject()
+    await loadBases()
+  } catch (e: any) {
+    message.error(await extractSdkResponseErrorMsg(e))
+  }
+}
+
 onMounted(async () => {
   if (sources.length === 0) {
     await loadBases()
@@ -151,6 +190,32 @@ watch(
           bordered
         >
           <template #emptyText> <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" :description="$t('labels.noData')" /> </template>
+          <a-table-column key="enabled" data-index="enabled" :width="30">
+            <template #default="{ record }">
+              <div v-if="!record.is_meta" class="flex items-center gap-1">
+                <a-tooltip>
+                  <template #title>Show in UI</template>
+                  <a-checkbox :checked="record.enabled ? true : false" @change="toggleBase(record, $event)"></a-checkbox>
+                </a-tooltip>
+              </div>
+            </template>
+          </a-table-column>
+          <a-table-column key="order" width="60px">
+            <template #default="{ record, index }">
+              <div class="flex items-center gap-1 text-gray-600 font-light">
+                <MdiArrowUpBox
+                  v-if="!record.is_meta && index !== 1"
+                  class="text-lg group-hover:text-accent"
+                  @click="moveBase(record, 'up')"
+                />
+                <MdiArrowDownBox
+                  v-if="!record.is_meta && index !== sources.length - 1"
+                  class="text-lg group-hover:text-accent"
+                  @click="moveBase(record, 'down')"
+                />
+              </div>
+            </template>
+          </a-table-column>
           <a-table-column key="alias" title="Name" data-index="alias">
             <template #default="{ text, record }">
               <div class="flex items-center gap-1">

packages/nc-gui/composables/useProject.ts

@@ -98,7 +98,9 @@ const [setup, use] = useInjectionState(() => {
         includeM2M: includeM2M.value,
       })
 
-      if (tablesResponse.list) tables.value = tablesResponse.list
+      if (tablesResponse.list) {
+        tables.value = tablesResponse.list.filter((table) => bases.value.find((base) => base.id === table.base_id)?.enabled)
+      }
     }
   }
 

packages/nocodb-sdk/src/lib/Api.ts

@@ -84,6 +84,8 @@ export interface BaseType {
   updated_at?: any;
   inflection_column?: string;
   inflection_table?: string;
+  order?: number;
+  enabled?: boolean;
 }
 
 export interface BaseReqType {

packages/nocodb/src/lib/migrations/XcMigrationSourcev2.ts

@@ -10,7 +10,7 @@ import * as nc_019_add_meta_in_meta_tables from './v2/nc_019_add_meta_in_meta_ta
 import * as nc_020_kanban_view from './v2/nc_020_kanban_view';
 import * as nc_021_add_fields_in_token from './v2/nc_021_add_fields_in_token';
 import * as nc_022_qr_code_column_type from './v2/nc_022_qr_code_column_type';
-import * as nc_023_add_base_id_in_sync_source from './v2/nc_023_add_base_id_in_sync_source';
+import * as nc_023_multiple_source from './v2/nc_023_multiple_source';
 
 // Create a custom migration source class
 export default class XcMigrationSourcev2 {
@@ -32,7 +32,7 @@ export default class XcMigrationSourcev2 {
       'nc_020_kanban_view',
       'nc_021_add_fields_in_token',
       'nc_022_qr_code_column_type',
-      'nc_023_add_base_id_in_sync_source'
+      'nc_023_multiple_source'
     ]);
   }
 
@@ -66,8 +66,8 @@ export default class XcMigrationSourcev2 {
         return nc_021_add_fields_in_token;
       case 'nc_022_qr_code_column_type':
         return nc_022_qr_code_column_type;
-      case 'nc_023_add_base_id_in_sync_source':
-        return nc_023_add_base_id_in_sync_source;
+      case 'nc_023_multiple_source':
+        return nc_023_multiple_source;
     }
   }
 }

packages/nocodb/src/lib/migrations/v2/nc_023_multiple_source.ts

@@ -6,12 +6,22 @@ const up = async (knex: Knex) => {
     table.string('base_id', 20);
     table.foreign('base_id').references(`${MetaTable.BASES}.id`);
   });
+
+  await knex.schema.alterTable(MetaTable.BASES, (table) => {
+    table.boolean('enabled').defaultTo(true);
+    table.float('order');
+  });
 };
 
 const down = async (knex) => {
   await knex.schema.alterTable(MetaTable.SYNC_SOURCE, (table) => {
     table.dropColumn('base_id');
   });
+  
+  await knex.schema.alterTable(MetaTable.BASES, (table) => {
+    table.dropColumn('enabled');
+    table.dropColumn('order');
+  });
 };
 
 export { up, down };

packages/nocodb/src/lib/models/Base.ts

@@ -25,6 +25,8 @@ export default class Base implements BaseType {
   updated_at?: any;
   inflection_column?: string;
   inflection_table?: string;
+  order?: number;
+  enabled?: boolean;
 
   constructor(base: Partial<Base>) {
     Object.assign(this, base);
@@ -44,6 +46,8 @@ export default class Base implements BaseType {
       'updated_at',
       'inflection_column',
       'inflection_table',
+      'order',
+      'enabled',
     ]);
     insertObj.config = CryptoJS.AES.encrypt(
       JSON.stringify(base.config),
@@ -56,13 +60,19 @@ export default class Base implements BaseType {
       MetaTable.BASES,
       insertObj
     );
+
     await NocoCache.appendToList(
       CacheScope.BASE,
       [base.projectId],
       `${CacheScope.BASE}:${id}`
     );
     
-    return this.get(id, ncMeta);
+    // call before reorder to update cache
+    const returnBase = await this.get(id, ncMeta);
+
+    await this.reorderBases(base.projectId);
+
+    return returnBase;
   }
 
   public static async updateBase(
@@ -81,7 +91,7 @@ export default class Base implements BaseType {
     await NocoCache.deepDel(
       CacheScope.BASE,
       `${CacheScope.BASE}:${baseId}`,
-      CacheDelDirection.PARENT_TO_CHILD
+      CacheDelDirection.CHILD_TO_PARENT
     );
 
     const insertObj = extractProps(base, [
@@ -94,37 +104,48 @@ export default class Base implements BaseType {
       'updated_at',
       'inflection_column',
       'inflection_table',
+      'order',
+      'enabled',
     ]);
+    
+    if (insertObj.config) {
       insertObj.config = CryptoJS.AES.encrypt(
         JSON.stringify(base.config),
         Noco.getConfig()?.auth?.jwt?.secret
       ).toString();
+    }
+
+    // type property is undefined even if not provided
+    if (!insertObj.type) {
+      insertObj.type = oldBase.type;
+    }
+
+    // add missing (not updated) fields
+    const finalInsertObj = {
+      ...oldBase,
+      ...insertObj,
+    };
 
     const { id } = await ncMeta.metaInsert2(
       base.projectId,
       null,
       MetaTable.BASES,
-      insertObj
+      finalInsertObj
     );
+
     await NocoCache.appendToList(
       CacheScope.BASE,
       [base.projectId],
       `${CacheScope.BASE}:${id}`
     );
 
-    return this.get(id, ncMeta);
-  }
+    // call before reorder to update cache
+    const returnBase = await this.get(id, ncMeta);
 
-  /*
-  await ncMeta.metaDelete(null, null, MetaTable.COL_LOOKUP, {
-          fk_column_id: colId,
-        });
-        await NocoCache.deepDel(
-          CacheScope.COL_LOOKUP,
-          `${CacheScope.COL_LOOKUP}:${colId}`,
-          CacheDelDirection.CHILD_TO_PARENT
-        );
-  */
+    await this.reorderBases(base.projectId, id, ncMeta);
+
+    return returnBase;
+  }
 
   static async list(
     args: { projectId: string },
@@ -137,10 +158,22 @@ export default class Base implements BaseType {
       baseDataList = await ncMeta.metaList2(
         args.projectId,
         null,
-        MetaTable.BASES
+        MetaTable.BASES,
+        {
+          orderBy: {
+            order: 'asc',
+          },
+        }
       );
       await NocoCache.setList(CacheScope.BASE, [args.projectId], baseDataList);
     }
+
+    baseDataList.sort(
+      (a, b) =>
+        (a.order != null ? a.order : Infinity) -
+        (b.order != null ? b.order : Infinity)
+    );
+
     return baseDataList?.map((baseData) => {
       return new Base(baseData);
     });
@@ -160,6 +193,70 @@ export default class Base implements BaseType {
     return baseData && new Base(baseData);
   }
 
+  static async reorderBases(projectId: string, keepBase?: string, ncMeta = Noco.ncMeta) {
+    const bases = await this.list({ projectId: projectId }, ncMeta);
+
+    // order list for bases
+    const orders = [];
+    const takenOrders = bases.map((base) => base.order);
+    
+    if (keepBase) {
+      bases.find((base) => {
+        if (base.id === keepBase) {
+          orders.push({ id: base.id, order: base.order });
+        }
+      });
+    }
+
+    for (const b of bases) {
+      if (b.id === keepBase) continue;
+      let tempIndex = b.order;
+      if (!b.order || orders.find((o) => o.order === tempIndex)) {
+        tempIndex = 1;
+        while (takenOrders.includes(tempIndex)) {
+          tempIndex++;
+        }
+      }
+      // use index as order if order is not set
+      orders.push({ id: b.id, order: tempIndex });
+    }
+
+    orders.sort((a, b) => a.order - b.order);
+    
+    // update order for bases
+    for (const [i, o] of Object.entries(orders)) {
+      const fnd = bases.find((b) => b.id === o.id);
+      if (fnd && (!fnd.order || fnd.order != parseInt(i) + 1)) {
+        await ncMeta.metaDelete(null, null, MetaTable.BASES, {
+          id: fnd.id,
+        });
+    
+        await NocoCache.deepDel(
+          CacheScope.BASE,
+          `${CacheScope.BASE}:${fnd.id}`,
+          CacheDelDirection.CHILD_TO_PARENT
+        );
+          
+        fnd.order = parseInt(i) + 1;
+    
+        const { id } = await ncMeta.metaInsert2(
+          fnd.project_id,
+          null,
+          MetaTable.BASES,
+          fnd
+        );
+
+        await NocoCache.appendToList(
+          CacheScope.BASE,
+          [fnd.project_id],
+          `${CacheScope.BASE}:${id}`
+        );
+
+        await NocoCache.set(`${CacheScope.BASE}:${id}`, fnd);
+      }
+    }
+  }
+
   public getConnectionConfig(): any {
     if (this.is_meta) {
       const metaConfig = Noco.getConfig()?.meta?.db;

scripts/sdk/swagger.json

@@ -7262,6 +7262,12 @@
           },
           "inflection_table": {
             "type": "string"
+          },
+          "order": {
+            "type": "number"
+          },
+          "enabled": {
+            "type": "boolean"
           }
         }
       },