feat(gui-v2): add update/insert method

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

packages/nc-gui-v2/components/smartsheet/Grid.vue

@@ -15,7 +15,7 @@ const editEnabled = ref(false)
 provide('isForm', false)
 provide('isGrid', true)
 
-const { loadData, paginationData, formattedData: data } = useViewData(meta)
+const { loadData, paginationData, formattedData: data, updateRowProperty } = useViewData(meta)
 
 onMounted(() => loadData({}))
 
@@ -131,6 +131,7 @@ onKeyStroke(['Enter'], (e) => {
             v-model="row[columnObj.title]"
             :column="columnObj"
             :edit-enabled="editEnabled && selected.col === colIndex && selected.row === rowIndex"
+            @update:modelValue="updateRowProperty(row,columnObj.title)"
           />
 
           <!--          <SmartsheetCell v-else :column="columnObj" :value="row[columnObj.title]" /> -->

packages/nc-gui-v2/composables/useViewData.ts

@@ -1,29 +1,90 @@
-import type { Api, PaginatedType, TableType } from 'nocodb-sdk'
-import type { ComputedRef, Ref } from 'vue'
-import { useNuxtApp } from '#app'
-import useProject from '~/composables/useProject'
+import type { Api, PaginatedType, TableType } from "nocodb-sdk";
+import type { ComputedRef, Ref } from "vue";
+import { useNuxtApp } from "#app";
+import useProject from "~/composables/useProject";
 
 const formatData = (list: Array<Record<string, any>>) =>
   list.map((row) => ({
     row: { ...row },
     oldRow: { ...row },
-    rowMeta: {},
-  }))
+    rowMeta: {}
+  }));
 
 export default (meta: Ref<TableType> | ComputedRef<TableType> | undefined) => {
-  const data = ref<Array<Record<string, any>>>()
-  const formattedData = ref<Array<{ row: Record<string, any>; oldRow: Record<string, any> }>>()
-  const paginationData = ref<PaginatedType>()
+  const data = ref<Array<Record<string, any>>>();
+  const formattedData = ref<Array<{ row: Record<string, any>; oldRow: Record<string, any>; rowMeta?: any }>>();
+  const paginationData = ref<PaginatedType>();
 
-  const { project } = useProject()
-  const { $api } = useNuxtApp()
+  const { project } = useProject();
+  const { $api } = useNuxtApp();
 
-  const loadData = async (params: Parameters<Api<any>['dbTableRow']['list']>[3] = {}) => {
-    if (!project?.value?.id || !meta?.value?.id) return
-    const response = await $api.dbTableRow.list('noco', project.value.id, meta.value.id, params)
-    data.value = response.list
-    formattedData.value = formatData(response.list)
-  }
+  const loadData = async (params: Parameters<Api<any>["dbTableRow"]["list"]>[3] = {}) => {
+    if (!project?.value?.id || !meta?.value?.id) return;
+    const response = await $api.dbTableRow.list("noco", project.value.id, meta.value.id, params);
+    data.value = response.list;
+    formattedData.value = formatData(response.list);
+  };
 
-  return { data, loadData, paginationData, formattedData }
+  const updateRowProperty = async (row: Record<string, any>, property: string) => {
+    const id = meta?.value?.columns?.filter(c => c.pk)
+      .map(c => row[c.title as string])
+      .join("___") as string;
+
+    const newData = await $api.dbTableRow.update(
+      "noco",
+      project?.value.id as string,
+      meta?.value.id as string,
+      id,
+      {
+        [property]: row[property]
+      }
+      // todo:
+      // {
+      //   query: { ignoreWebhook: !saved }
+      // }
+    );
+
+    /*
+
+        todo: audit
+
+        // audit
+          this.$api.utils
+            .auditRowUpdate(id, {
+              fk_model_id: this.meta.id,
+              column_name: column.title,
+              row_id: id,
+              value: getPlainText(rowObj[column.title]),
+              prev_value: getPlainText(oldRow[column.title])
+            })
+            .then(() => {})
+        */
+
+  };
+  const insertRow = async (row: Record<string, any>, rowIndex = formattedData.value?.length) => {
+    // todo: implement insert row
+
+
+    const insertObj = meta?.value?.columns?.reduce((o: any, col) => {
+      if (!col.ai && row?.[col.title as string] !== null) {
+        o[col.title as string] = row?.[col.title as string];
+      }
+      return o;
+    }, {});
+
+    const insertedData = await $api.dbTableRow.create(
+      "noco",
+      project?.value.id as string,
+      meta?.value.id as string,
+      insertObj
+    );
+
+    formattedData.value?.splice(rowIndex ?? 0, 1, {
+      row: insertedData,
+      rowMeta: {},
+      oldRow: { ...insertedData }
+    });
+  };
+
+  return { data, loadData, paginationData, formattedData, insertRow, updateRowProperty };
 }