Saved is now shown in dynamic data table and saved queries are stored in backend

src/components.d.ts

@@ -72,7 +72,7 @@ export namespace Components {
 
  onSort?: (key: string) => Promise<void>;
  onFilter?: (column) => Promise<void>;
- onRowClick?: (id: string | number, key: string, value: any) => Promise<void>;
+ onRowClick?: (rowId: string | number, columnId: string | number, key: string, value: any) => Promise<void>;
  customColumnComponent?: (name: string) => any;
  customRowComponent?: (value: any) => any;
 
@@ -291,7 +291,7 @@ export namespace Components {
  }
  interface SaveQueryModal {
  "deleteQueryData": (deleteId: number) => void;
- "queryDataFetcher": () => void;
+ "queryDataFetcher": () => Promise<void>;
  }
  interface SideBar {
  "permissions": string;
@@ -825,7 +825,7 @@ declare namespace LocalJSX {
 
  onSort?: (key: string) => Promise<void>;
  onFilter?: (column) => Promise<void>;
- onRowClick?: (id: string | number, key: string, value: any) => Promise<void>;
+ onRowClick?: (rowId: string | number, columnId: string | number, key: string, value: any) => Promise<void>;
  customColumnComponent?: (name: string) => any;
  customRowComponent?: (value: any) => any;
 
@@ -1044,7 +1044,7 @@ declare namespace LocalJSX {
  }
  interface SaveQueryModal {
  "deleteQueryData"?: (deleteId: number) => void;
- "queryDataFetcher"?: () => void;
+ "queryDataFetcher"?: () => Promise<void>;
  }
  interface SideBar {
  "permissions"?: string;

src/components/common/items/data-table/data-table.tsx

@@ -34,7 +34,7 @@ type TColumn = {
 
  onSort?: (id: number | string, name: string) => Promise<void>;
  onFilter?: (column: TColumn) => Promise<void>;
- onRowClick?: (id: string | number, key: string, value: any) => Promise<void>;
+ onRowClick?: (rowId: string | number, columnId: string | number, key: string, value: any) => Promise<void>;
  customColumnComponent?: (name: string) => any;
  customRowComponent?: (value: any) => any;
 
@@ -78,7 +78,7 @@ export class DataTable {
 
  onSort?: (key: string) => Promise<void>;
  onFilter?: (column) => Promise<void>;
- onRowClick?: (id: string | number, key: string, value: any) => Promise<void>;
+ onRowClick?: (rowId: string | number, columnId: string | number, key: string, value: any) => Promise<void>;
  customColumnComponent?: (name: string) => any;
  customRowComponent?: (value: any) => any;
 
@@ -325,7 +325,7 @@ export class DataTable {
  class={`py-3 whitespace-nowrap text-sm text-gray-900 ${column.customStyle?.cellClass}`}
  style={{ cursor: column.onRowClick ? 'pointer' : 'auto', ...(column.customStyle?.cellStyle || {}) }}
  onClick={() => {
- return column.onRowClick ? column.onRowClick(column.id, keyName, fieldValue) : null;
+ return column.onRowClick ? column.onRowClick(rowId, column.id, keyName, fieldValue) : null;
  }}
  >
  {column.customRowComponent ? column.customRowComponent(fieldValue) : this.formatData(fieldValue, column)}

src/components/editorPage/code-editor/code-editor.tsx

@@ -1,38 +1,14 @@
 import { Component, h, Element, State, Prop, Host } from '@stencil/core';
 import { EditorState } from '@codemirror/basic-setup';
-import { Compartment } from '@codemirror/state';
+
 import { EditorView, keymap } from '@codemirror/view';
 import { java } from '@codemirror/lang-java';
 import { json } from '@codemirror/lang-json';
 import Swal from 'sweetalert2';
 import state from '../store';
 import { customSetup } from '../../customSetup';
+import axios from 'axios';
 
-let myTheme = EditorView.theme(
- {
- '&': {
- color: 'white',
- backgroundColor: '#034',
- },
- '.cm-content': {
- caretColor: '#0e9',
- },
- '&.cm-focused .cm-cursor': {
- borderLeftColor: '#0e9',
- },
- '&.cm-focused .cm-selectionBackground, ::selection': {
- backgroundColor: '#074',
- },
- '.cm-gutters': {
- backgroundColor: '#045',
- color: '#ddd',
- border: 'none',
- },
- },
- { dark: true },
-);
-
-const themeConfig = new Compartment();
 const TAB_LIST = [
  { name: 'Query', className: 'editor' },
  { name: 'Parameter', className: 'parameter' },
@@ -68,10 +44,6 @@ export class CodeEditor {
  }),
  ];
  const parameterExtensions = [customSetup, json(), this.onCtrlShiftEnter()];
- if (localStorage.getItem('themesArray') === 'dark') {
- editorExtensions.push(themeConfig.of([myTheme]));
- parameterExtensions.push(themeConfig.of([myTheme]));
- }
  state.stateQuery = EditorState.create({
  doc: state.query,
  extensions: editorExtensions,
@@ -114,105 +86,40 @@ export class CodeEditor {
  },
  ]);
  }
- saveQueryHandler() {
- const dbName: string = 'neptuneQueryDB';
- const dbVersion: number = 1;
-
- const request: IDBOpenDBRequest = indexedDB.open(dbName, dbVersion);
-
- request.onerror = function (event: Event): void {
- console.log('Database error: ' + (event.target as any).errorCode);
- };
-
- request.onupgradeneeded = function (event: IDBVersionChangeEvent): void {
- const db: IDBDatabase = (event.target as any).result;
- const objectStore: IDBObjectStore = db.createObjectStore('savedQueries', { keyPath: 'id', autoIncrement: true });
- objectStore.createIndex('id', 'id', { unique: false });
- };
-
- request.onsuccess = function (event: Event): void {
- const db: IDBDatabase = (event.target as any).result;
 
- // Add data to the database
- const transaction: IDBTransaction = db.transaction(['savedQueries'], 'readwrite');
- const objectStore: IDBObjectStore = transaction.objectStore('savedQueries');
-
- const data: any = { title: state.saveTitle, query: state.query, parameter: state.queryParameter };
- state.saveTitle = '';
- const addRequest: IDBRequest = objectStore.add(data);
- addRequest.onerror = function (event: Event): void {
- console.log('Error adding data: ' + (event.target as any).errorCode);
- };
-
- addRequest.onsuccess = function (): void {
- console.log('Data added successfully');
- };
- };
- this.isSaveModalOpen = false;
+ async queryDataFetcher() {
+ try {
+ const res = await axios.get("/api/editor/saved-queries");
+ state.queryHistory = res.data;
+ } catch (error) {
+ console.log(error);
+ }
  }
- retriveQueryData() {
- const dbName: string = 'neptuneQueryDB';
- const dbVersion: number = 1;
-
- const request: IDBOpenDBRequest = indexedDB.open(dbName, dbVersion);
 
- request.onerror = function (event: Event): void {
- console.log('Database error: ' + (event.target as any).errorCode);
- };
-
- request.onupgradeneeded = function (event: IDBVersionChangeEvent): void {
- const db: IDBDatabase = (event.target as any).result;
- const objectStore: IDBObjectStore = db.createObjectStore('savedQueries', { keyPath: 'id', autoIncrement: true });
- objectStore.createIndex('id', 'id', { unique: false });
- };
-
- request.onsuccess = function (event: Event): void {
- const db: IDBDatabase = (event.target as any).result;
- // Retrieve data from the database
- const transaction2: IDBTransaction = db.transaction(['savedQueries'], 'readonly');
- const objectStore2: IDBObjectStore = transaction2.objectStore('savedQueries');
- const index: IDBIndex = objectStore2.index('id');
- const getRequest: IDBRequest = index.getAll();
- getRequest.onerror = function (event: Event): void {
- console.log('Error retrieving data: ' + (event.target as any).errorCode);
- };
+ async saveQueryHandler() {
+ try {
+ let transactionQuery = state.viewQuery.state.update();
+ const query = transactionQuery.state.doc.toString().trim();
+ let transactionParameter = state.viewParameter.state.update();
+ const parameters = transactionParameter.state.doc.toString().trim();
+ const data: any = { queryTitle: state.saveTitle, queryText: query, queryParameter: parameters };
+ state.saveTitle = '';
+ await axios.post(`/api/editor/saved-queries`, data);
+ this.queryDataFetcher();
+ } catch (error) {
+ console.log(error);
 
- getRequest.onsuccess = function (event: Event): void {
- state.queryHistory = (event.target as any).result;
- };
- };
+ }
  }
- deleteQueryData(deleteId: number) {
- const dbName: string = 'neptuneQueryDB';
- const dbVersion: number = 1;
-
- const request: IDBOpenDBRequest = indexedDB.open(dbName, dbVersion);
-
- request.onerror = function (event: Event): void {
- console.log('Database error: ' + (event.target as any).errorCode);
- };
 
- request.onupgradeneeded = function (event: IDBVersionChangeEvent): void {
- const db: IDBDatabase = (event.target as any).result;
- const objectStore: IDBObjectStore = db.createObjectStore('savedQueries', { keyPath: 'id', autoIncrement: true });
- objectStore.createIndex('id', 'id', { unique: false });
- };
-
- request.onsuccess = function (event: Event): void {
- const db: IDBDatabase = (event.target as any).result;
- // Delete data from the database
- const transaction2: IDBTransaction = db.transaction(['savedQueries'], 'readwrite');
- const objectStore2: IDBObjectStore = transaction2.objectStore('savedQueries');
-
- const deleteRequest: IDBRequest = objectStore2.delete(deleteId);
- deleteRequest.onerror = function (event: Event): void {
- console.log('Error deleting data: ' + (event.target as any).errorCode);
- };
+ async deleteQueryData(deleteId: number) {
+ try {
+ const res = await axios.delete(`/api/editor/saved-queries/${deleteId}`);
+ return res
+ } catch (error) {
+ console.log(error);
 
- deleteRequest.onsuccess = function (): void {
- console.log('Data deleted successfully');
- };
- };
+ }
  }
  saveSubmitHandler() {
  try {
@@ -246,8 +153,10 @@ export class CodeEditor {
  <div class="px-3 w-full flex content-between" style={{ justifyContent: 'space-between' }}>
  <tabs-component activeIndex={this.activeIndex} tabslist={TAB_LIST} tabClickHandler={this.tabClickHandler}></tabs-component>
  <div class="flex w-40 justify-between">
- <save-query-modal class="pt-3" deleteQueryData={deleteId => this.deleteQueryData(deleteId)} queryDataFetcher={() => this.retriveQueryData()} />
-
+ <save-query-modal class="pt-3"
+ deleteQueryData={(deleteId: number) => this.deleteQueryData(deleteId)}
+ queryDataFetcher={() => this.queryDataFetcher()}
+ />
  <insert-node-modal fetchNavigators={() => this.fetchNavigators()} class="pt-3"></insert-node-modal>
 
  <icon-button-basic

src/components/editorPage/code-editor/readme.md

@@ -41,7 +41,9 @@ graph TD;
  code-editor --> text-field
  code-editor --> loader-component
  save-query-modal --> icon-button-basic
+ save-query-modal --> data-table
  save-query-modal --> icon-label-submit-button
+ data-table --> plain-button
  insert-node-modal --> icon-button-basic
  insert-node-modal --> custom-drop-down
  insert-node-modal --> basic-dropdown

src/components/editorPage/editor-page/readme.md

@@ -38,7 +38,9 @@ graph TD;
  code-editor --> text-field
  code-editor --> loader-component
  save-query-modal --> icon-button-basic
+ save-query-modal --> data-table
  save-query-modal --> icon-label-submit-button
+ data-table --> plain-button
  insert-node-modal --> icon-button-basic
  insert-node-modal --> custom-drop-down
  insert-node-modal --> basic-dropdown
@@ -57,7 +59,6 @@ graph TD;
  edit-table-modal --> icon-label-submit-button
  table-search-modal-form --> radio-button-multiple
  table-search-modal-form --> icon-label-submit-button
- data-table --> plain-button
  style editor-page fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

src/components/editorPage/save-query-modal/readme.md

@@ -10,7 +10,7 @@
 | Property | Attribute | Description | Type | Default |
 | ------------------ | --------- | ----------- | ---------------------------- | ----------- |
 | `deleteQueryData` | -- | | `(deleteId: number) => void` | `undefined` |
-| `queryDataFetcher` | -- | | `() => void`  | `undefined` |
+| `queryDataFetcher` | -- | | `() => Promise<void>` | `undefined` |
 
 
 ## Dependencies
@@ -22,13 +22,16 @@
 ### Depends on
 
 - [icon-button-basic](../../common/buttons/icon-button-basic)
+- [data-table](../../common/items/data-table)
 - [icon-label-submit-button](../../common/buttons/icon-label-submit-button)
 
 ### Graph
 ```mermaid
 graph TD;
  save-query-modal --> icon-button-basic
+ save-query-modal --> data-table
  save-query-modal --> icon-label-submit-button
+ data-table --> plain-button
  code-editor --> save-query-modal
  style save-query-modal fill:#f9f,stroke:#333,stroke-width:4px
 ```