Skip to content

Commit a112d6f

Browse files
durgatechvardurgatechvar
authored
Merge pull request #48 from SwapnilTechVariable/wip/ui-save-query
Saved is now shown in dynamic data table and saved queries are stored in backend
2 parents 8ccfe56 + 7031e79 commit a112d6f

File tree

11 files changed

+211
-220
lines changed

11 files changed

+211
-220
lines changed

‎src/components.d.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ export namespace Components {
7272

7373
onSort?: (key: string) => Promise<void>;
7474
onFilter?: (column) => Promise<void>;
75-
onRowClick?: (id: string | number, key: string, value: any) => Promise<void>;
75+
onRowClick?: (rowId: string | number, columnId: string | number, key: string, value: any) => Promise<void>;
7676
customColumnComponent?: (name: string) => any;
7777
customRowComponent?: (value: any) => any;
7878

@@ -291,7 +291,7 @@ export namespace Components {
291291
}
292292
interface SaveQueryModal {
293293
"deleteQueryData": (deleteId: number) => void;
294-
"queryDataFetcher": () => void;
294+
"queryDataFetcher": () => Promise<void>;
295295
}
296296
interface SideBar {
297297
"permissions": string;
@@ -825,7 +825,7 @@ declare namespace LocalJSX {
825825

826826
onSort?: (key: string) => Promise<void>;
827827
onFilter?: (column) => Promise<void>;
828-
onRowClick?: (id: string | number, key: string, value: any) => Promise<void>;
828+
onRowClick?: (rowId: string | number, columnId: string | number, key: string, value: any) => Promise<void>;
829829
customColumnComponent?: (name: string) => any;
830830
customRowComponent?: (value: any) => any;
831831

@@ -1044,7 +1044,7 @@ declare namespace LocalJSX {
10441044
}
10451045
interface SaveQueryModal {
10461046
"deleteQueryData"?: (deleteId: number) => void;
1047-
"queryDataFetcher"?: () => void;
1047+
"queryDataFetcher"?: () => Promise<void>;
10481048
}
10491049
interface SideBar {
10501050
"permissions"?: string;

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ type TColumn = {
3434

3535
onSort?: (id: number | string, name: string) => Promise<void>;
3636
onFilter?: (column: TColumn) => Promise<void>;
37-
onRowClick?: (id: string | number, key: string, value: any) => Promise<void>;
37+
onRowClick?: (rowId: string | number, columnId: string | number, key: string, value: any) => Promise<void>;
3838
customColumnComponent?: (name: string) => any;
3939
customRowComponent?: (value: any) => any;
4040

@@ -78,7 +78,7 @@ export class DataTable {
7878

7979
onSort?: (key: string) => Promise<void>;
8080
onFilter?: (column) => Promise<void>;
81-
onRowClick?: (id: string | number, key: string, value: any) => Promise<void>;
81+
onRowClick?: (rowId: string | number, columnId: string | number, key: string, value: any) => Promise<void>;
8282
customColumnComponent?: (name: string) => any;
8383
customRowComponent?: (value: any) => any;
8484

@@ -325,7 +325,7 @@ export class DataTable {
325325
class={`py-3 whitespace-nowrap text-sm text-gray-900 ${column.customStyle?.cellClass}`}
326326
style={{ cursor: column.onRowClick ? 'pointer' : 'auto', ...(column.customStyle?.cellStyle || {}) }}
327327
onClick={() => {
328-
return column.onRowClick ? column.onRowClick(column.id, keyName, fieldValue) : null;
328+
return column.onRowClick ? column.onRowClick(rowId, column.id, keyName, fieldValue) : null;
329329
}}
330330
>
331331
{column.customRowComponent ? column.customRowComponent(fieldValue) : this.formatData(fieldValue, column)}

‎src/components/common/items/data-table/readme.md‎

Lines changed: 17 additions & 15 deletions
Large diffs are not rendered by default.

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

Lines changed: 33 additions & 124 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,14 @@
11
import { Component, h, Element, State, Prop, Host } from '@stencil/core';
22
import { EditorState } from '@codemirror/basic-setup';
3-
import { Compartment } from '@codemirror/state';
3+
44
import { EditorView, keymap } from '@codemirror/view';
55
import { java } from '@codemirror/lang-java';
66
import { json } from '@codemirror/lang-json';
77
import Swal from 'sweetalert2';
88
import state from '../store';
99
import { customSetup } from '../../customSetup';
10+
import axios from 'axios';
1011

11-
let myTheme = EditorView.theme(
12-
{
13-
'&': {
14-
color: 'white',
15-
backgroundColor: '#034',
16-
},
17-
'.cm-content': {
18-
caretColor: '#0e9',
19-
},
20-
'&.cm-focused .cm-cursor': {
21-
borderLeftColor: '#0e9',
22-
},
23-
'&.cm-focused .cm-selectionBackground, ::selection': {
24-
backgroundColor: '#074',
25-
},
26-
'.cm-gutters': {
27-
backgroundColor: '#045',
28-
color: '#ddd',
29-
border: 'none',
30-
},
31-
},
32-
{ dark: true },
33-
);
34-
35-
const themeConfig = new Compartment();
3612
const TAB_LIST = [
3713
{ name: 'Query', className: 'editor' },
3814
{ name: 'Parameter', className: 'parameter' },
@@ -68,10 +44,6 @@ export class CodeEditor {
6844
}),
6945
];
7046
const parameterExtensions = [customSetup, json(), this.onCtrlShiftEnter()];
71-
if (localStorage.getItem('themesArray') === 'dark') {
72-
editorExtensions.push(themeConfig.of([myTheme]));
73-
parameterExtensions.push(themeConfig.of([myTheme]));
74-
}
7547
state.stateQuery = EditorState.create({
7648
doc: state.query,
7749
extensions: editorExtensions,
@@ -114,105 +86,40 @@ export class CodeEditor {
11486
},
11587
]);
11688
}
117-
saveQueryHandler() {
118-
const dbName: string = 'neptuneQueryDB';
119-
const dbVersion: number = 1;
120-
121-
const request: IDBOpenDBRequest = indexedDB.open(dbName, dbVersion);
122-
123-
request.onerror = function (event: Event): void {
124-
console.log('Database error: ' + (event.target as any).errorCode);
125-
};
126-
127-
request.onupgradeneeded = function (event: IDBVersionChangeEvent): void {
128-
const db: IDBDatabase = (event.target as any).result;
129-
const objectStore: IDBObjectStore = db.createObjectStore('savedQueries', { keyPath: 'id', autoIncrement: true });
130-
objectStore.createIndex('id', 'id', { unique: false });
131-
};
132-
133-
request.onsuccess = function (event: Event): void {
134-
const db: IDBDatabase = (event.target as any).result;
13589

136-
// Add data to the database
137-
const transaction: IDBTransaction = db.transaction(['savedQueries'], 'readwrite');
138-
const objectStore: IDBObjectStore = transaction.objectStore('savedQueries');
139-
140-
const data: any = { title: state.saveTitle, query: state.query, parameter: state.queryParameter };
141-
state.saveTitle = '';
142-
const addRequest: IDBRequest = objectStore.add(data);
143-
addRequest.onerror = function (event: Event): void {
144-
console.log('Error adding data: ' + (event.target as any).errorCode);
145-
};
146-
147-
addRequest.onsuccess = function (): void {
148-
console.log('Data added successfully');
149-
};
150-
};
151-
this.isSaveModalOpen = false;
90+
async queryDataFetcher() {
91+
try {
92+
const res = await axios.get("/api/editor/saved-queries");
93+
state.queryHistory = res.data;
94+
} catch (error) {
95+
console.log(error);
96+
}
15297
}
153-
retriveQueryData() {
154-
const dbName: string = 'neptuneQueryDB';
155-
const dbVersion: number = 1;
156-
157-
const request: IDBOpenDBRequest = indexedDB.open(dbName, dbVersion);
15898

159-
request.onerror = function (event: Event): void {
160-
console.log('Database error: ' + (event.target as any).errorCode);
161-
};
162-
163-
request.onupgradeneeded = function (event: IDBVersionChangeEvent): void {
164-
const db: IDBDatabase = (event.target as any).result;
165-
const objectStore: IDBObjectStore = db.createObjectStore('savedQueries', { keyPath: 'id', autoIncrement: true });
166-
objectStore.createIndex('id', 'id', { unique: false });
167-
};
168-
169-
request.onsuccess = function (event: Event): void {
170-
const db: IDBDatabase = (event.target as any).result;
171-
// Retrieve data from the database
172-
const transaction2: IDBTransaction = db.transaction(['savedQueries'], 'readonly');
173-
const objectStore2: IDBObjectStore = transaction2.objectStore('savedQueries');
174-
const index: IDBIndex = objectStore2.index('id');
175-
const getRequest: IDBRequest = index.getAll();
176-
getRequest.onerror = function (event: Event): void {
177-
console.log('Error retrieving data: ' + (event.target as any).errorCode);
178-
};
99+
async saveQueryHandler() {
100+
try {
101+
let transactionQuery = state.viewQuery.state.update();
102+
const query = transactionQuery.state.doc.toString().trim();
103+
let transactionParameter = state.viewParameter.state.update();
104+
const parameters = transactionParameter.state.doc.toString().trim();
105+
const data: any = { queryTitle: state.saveTitle, queryText: query, queryParameter: parameters };
106+
state.saveTitle = '';
107+
await axios.post(`/api/editor/saved-queries`, data);
108+
this.queryDataFetcher();
109+
} catch (error) {
110+
console.log(error);
179111

180-
getRequest.onsuccess = function (event: Event): void {
181-
state.queryHistory = (event.target as any).result;
182-
};
183-
};
112+
}
184113
}
185-
deleteQueryData(deleteId: number) {
186-
const dbName: string = 'neptuneQueryDB';
187-
const dbVersion: number = 1;
188-
189-
const request: IDBOpenDBRequest = indexedDB.open(dbName, dbVersion);
190-
191-
request.onerror = function (event: Event): void {
192-
console.log('Database error: ' + (event.target as any).errorCode);
193-
};
194114

195-
request.onupgradeneeded = function (event: IDBVersionChangeEvent): void {
196-
const db: IDBDatabase = (event.target as any).result;
197-
const objectStore: IDBObjectStore = db.createObjectStore('savedQueries', { keyPath: 'id', autoIncrement: true });
198-
objectStore.createIndex('id', 'id', { unique: false });
199-
};
200-
201-
request.onsuccess = function (event: Event): void {
202-
const db: IDBDatabase = (event.target as any).result;
203-
// Delete data from the database
204-
const transaction2: IDBTransaction = db.transaction(['savedQueries'], 'readwrite');
205-
const objectStore2: IDBObjectStore = transaction2.objectStore('savedQueries');
206-
207-
const deleteRequest: IDBRequest = objectStore2.delete(deleteId);
208-
deleteRequest.onerror = function (event: Event): void {
209-
console.log('Error deleting data: ' + (event.target as any).errorCode);
210-
};
115+
async deleteQueryData(deleteId: number) {
116+
try {
117+
const res = await axios.delete(`/api/editor/saved-queries/${deleteId}`);
118+
return res
119+
} catch (error) {
120+
console.log(error);
211121

212-
deleteRequest.onsuccess = function (): void {
213-
console.log('Data deleted successfully');
214-
};
215-
};
122+
}
216123
}
217124
saveSubmitHandler() {
218125
try {
@@ -246,8 +153,10 @@ export class CodeEditor {
246153
<div class="px-3 w-full flex content-between" style={{ justifyContent: 'space-between' }}>
247154
<tabs-component activeIndex={this.activeIndex} tabslist={TAB_LIST} tabClickHandler={this.tabClickHandler}></tabs-component>
248155
<div class="flex w-40 justify-between">
249-
<save-query-modal class="pt-3" deleteQueryData={deleteId => this.deleteQueryData(deleteId)} queryDataFetcher={() => this.retriveQueryData()} />
250-
156+
<save-query-modal class="pt-3"
157+
deleteQueryData={(deleteId: number) => this.deleteQueryData(deleteId)}
158+
queryDataFetcher={() => this.queryDataFetcher()}
159+
/>
251160
<insert-node-modal fetchNavigators={() => this.fetchNavigators()} class="pt-3"></insert-node-modal>
252161

253162
<icon-button-basic

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,9 @@ graph TD;
4141
code-editor --> text-field
4242
code-editor --> loader-component
4343
save-query-modal --> icon-button-basic
44+
save-query-modal --> data-table
4445
save-query-modal --> icon-label-submit-button
46+
data-table --> plain-button
4547
insert-node-modal --> icon-button-basic
4648
insert-node-modal --> custom-drop-down
4749
insert-node-modal --> basic-dropdown

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,9 @@ graph TD;
3838
code-editor --> text-field
3939
code-editor --> loader-component
4040
save-query-modal --> icon-button-basic
41+
save-query-modal --> data-table
4142
save-query-modal --> icon-label-submit-button
43+
data-table --> plain-button
4244
insert-node-modal --> icon-button-basic
4345
insert-node-modal --> custom-drop-down
4446
insert-node-modal --> basic-dropdown
@@ -57,7 +59,6 @@ graph TD;
5759
edit-table-modal --> icon-label-submit-button
5860
table-search-modal-form --> radio-button-multiple
5961
table-search-modal-form --> icon-label-submit-button
60-
data-table --> plain-button
6162
style editor-page fill:#f9f,stroke:#333,stroke-width:4px
6263
```
6364

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
| Property | Attribute | Description | Type | Default |
1111
| ------------------ | --------- | ----------- | ---------------------------- | ----------- |
1212
| `deleteQueryData` | -- | | `(deleteId: number) => void` | `undefined` |
13-
| `queryDataFetcher` | -- | | `() => void` | `undefined` |
13+
| `queryDataFetcher` | -- | | `() => Promise<void>` | `undefined` |
1414

1515

1616
## Dependencies
@@ -22,13 +22,16 @@
2222
### Depends on
2323

2424
- [icon-button-basic](../../common/buttons/icon-button-basic)
25+
- [data-table](../../common/items/data-table)
2526
- [icon-label-submit-button](../../common/buttons/icon-label-submit-button)
2627

2728
### Graph
2829
```mermaid
2930
graph TD;
3031
save-query-modal --> icon-button-basic
32+
save-query-modal --> data-table
3133
save-query-modal --> icon-label-submit-button
34+
data-table --> plain-button
3235
code-editor --> save-query-modal
3336
style save-query-modal fill:#f9f,stroke:#333,stroke-width:4px
3437
```

0 commit comments

Comments
 (0)