Add support for basic filtering, next setps major refactoring

Client/src/App.vue

@@ -345,6 +345,7 @@ onMounted(async () => {
         <AgGridTable
           :limit="limit"
           :offset="offset"
+          :filters="filtersRef?.filtersDict || []"
           :table="currentTable"
           ref="tableRef"
         />

Client/src/components/AgGridTable.vue

@@ -30,6 +30,10 @@ const props = defineProps({
     type: Number,
     required: true,
   },
+  filters: {
+    type: Array<string>,
+    required: true,
+  },
   table: {
     type: String,
     required: true,
@@ -45,9 +49,19 @@ const tableData = ref<Record<string, any>[]>([]);
  * Watch over the table prop and repopulate the grid when it changes
  */
 watch(
-  [() => props.table, () => props.limit, () => props.offset],
-  async ([newTable, newLimit, newOffset]: [string, number, number]) => {
-    await getGridData(newTable, newLimit, newOffset);
+  [
+    () => props.table,
+    () => props.filters,
+    () => props.limit,
+    () => props.offset,
+  ],
+  async ([newTable, newFilters, newLimit, newOffset]: [
+    string,
+    string[],
+    number,
+    number
+  ]) => {
+    await getGridData(newTable, newFilters, newLimit, newOffset);
   },
   { deep: true }
 );
@@ -115,7 +129,12 @@ const gridOptions: GridOptions = {
   suppressRowClickSelection: true,
 };
 
-const getGridData = async (table: string, limit: number, offset: number) => {
+const getGridData = async (
+  table: string,
+  filters: string[],
+  limit: number,
+  offset: number
+) => {
   loading.value = true;
 
   // i kinnda like this
@@ -166,7 +185,7 @@ const getGridData = async (table: string, limit: number, offset: number) => {
   if (!offset) offset = 0;
   if (!limit) limit = 50;
 
-  tableData.value = await getTableData(table, limit, offset);
+  tableData.value = await getTableData(table, filters, limit, offset);
 
   rowData.value = tableData.value.map((row: any) => {
     const newRow: Record<string, any> = {};
@@ -182,7 +201,7 @@ const getGridData = async (table: string, limit: number, offset: number) => {
 };
 
 onMounted(async () => {
-  await getGridData(props.table, props.limit, props.offset);
+  await getGridData(props.table, props.filters, props.limit, props.offset);
 });
 
 const valueChanges = ref<
@@ -202,7 +221,7 @@ const refreshGrid = async () => {
   newRows.value = [];
   valueChanges.value = [];
 
-  await getGridData(props.table, props.limit, props.offset);
+  await getGridData(props.table, props.filters, props.limit, props.offset);
 };
 
 const addRow = () => {

Client/src/components/ColumnsSelector.vue

@@ -81,9 +81,9 @@ const filterFunction = (list: any[], term: string) =>
             placeholder="Search columns"
           />
         </div>
-        <CommandList class="normal-scrollbar" :align="'start'">
+        <CommandList :align="'start'">
           <CommandEmpty>No columns found</CommandEmpty>
-          <CommandGroup>
+          <CommandGroup class="max-h-60 overflow-y-auto">
             <template v-for="col in allColumns" :key="col">
               <CommandItem :value="col" @click="toggleColumn(col)">
                 <div

Client/src/components/FilteringSection.vue

@@ -8,7 +8,7 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { Input } from "@/components/ui/input";
 import { ChevronDownIcon, InfoIcon, XIcon } from "lucide-vue-next";
-import { ref } from "vue";
+import { ref, watch } from "vue";
 
 interface Props {
   show: boolean;
@@ -80,7 +80,24 @@ type Filter = {
 // this might need to go to a global store
 const filters = ref<Filter[]>([]);
 
-defineExpose({ filters });
+const filtersDict = ref<string[]>([]);
+
+watch(
+  filters.value,
+  (value) => {
+    filtersDict.value = value.map(
+      (filter) =>
+        `${filter.column} ${operations[filter.operator].value} ${
+          operations[filter.operator].hasValue ? `'${filter.value}'` : ""
+        }`
+    );
+
+    console.log(filtersDict.value);
+  },
+  { deep: true }
+);
+
+defineExpose({ filters, filtersDict });
 </script>
 
 <template>
@@ -110,7 +127,7 @@ defineExpose({ filters });
             </Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent>
-            <div class="w-52 max-h-96 normal-scrollbar overflow-y-auto">
+            <div class="w-52 max-h-64 normal-scrollbar overflow-y-auto">
               <DropdownMenuItem
                 v-for="column in columns"
                 :key="column"

Client/src/service/dataService.ts

@@ -16,10 +16,14 @@ export const getTableSchema = async (tableName: string) => {
 
 export const getTableData = async (
   tableName: string,
+  filters: string[] = [],
   limit: number = 50,
   offset: number = 0
 ) => {
   const url = new URL(`${baseURI}/tables/${tableName}/data`);
+  filters.forEach((filter) => {
+    url.searchParams.append("filter", filter);
+  });
   url.searchParams.append("limit", limit.toString());
   url.searchParams.append("offset", offset.toString());
   const response = await fetch(url);

Client/src/styles.css

@@ -201,18 +201,18 @@
   @apply bg-slate-200;
 }
 
-.normal-scrollbar::-webkit-scrollbar {
+::-webkit-scrollbar {
   width: 5px;
   height: 5px;
 }
 
-.normal-scrollbar::-webkit-scrollbar-track {
+::-webkit-scrollbar-track {
   margin-left: 5px;
   margin-right: 5px;
   margin-bottom: 5px;
 }
 
-.normal-scrollbar::-webkit-scrollbar-thumb {
+::-webkit-scrollbar-thumb {
   @apply bg-secondary-foreground rounded-md;
 }
 

Connectors/SqliteConnector.cs

@@ -52,10 +52,14 @@ public TableSchema GetSchema(string tableName)
     /// Gets the data from a table.
     /// </summary>
     /// <param name="tableName">The name of the table.</param>
-    public DataTable GetData(string tableName, int limit, int offset)
+    public DataTable GetData(string tableName, string[] filters, int limit, int offset)
     {
         var command = connection.CreateCommand();
-        command.CommandText = $"SELECT * FROM {tableName} LIMIT {limit} OFFSET {offset}";
+        command.CommandText =
+            $"SELECT * FROM {tableName} {(filters.Length > 0
+                ? $"WHERE {string.Join(" AND ", filters.Select(x => $"{x}"))}"
+                : string.Empty)} LIMIT {limit} OFFSET {offset}";
+        Console.WriteLine(command.CommandText);
         var reader = command.ExecuteReader();
         var table = new DataTable();
         table.Load(reader);

Controllers/DbController.cs

@@ -33,10 +33,11 @@ public ActionResult GetSchema(string tableName)
     public ActionResult<IEnumerable<IDictionary<string, object>>> GetData(
         string tableName,
         [FromQuery] int limit = 50,
-        [FromQuery] int offset = 0
+        [FromQuery] int offset = 0,
+        [FromQuery] string[] filter = default!
     )
     {
-        var data = _sqliteProvider.GetData(tableName, limit, offset);
+        var data = _sqliteProvider.GetData(tableName, filter, limit, offset);
         var aux = data.AsEnumerable()
             .Select(
                 row =>