Skip to content

Commit 5c84ba2

Browse files
jintu-techvariablejintu-techvariable
authored
Merge pull request #2 from jintu-techvariable/data-table
Data table
2 parents 3696f44 + b6ef5fc commit 5c84ba2

File tree

25 files changed

+716
-10047
lines changed

25 files changed

+716
-10047
lines changed

‎package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,12 +28,14 @@
2828
},
2929
"dependencies": {
3030
"@codemirror/basic-setup": "^0.19.1",
31+
"@codemirror/commands": "^0.19.8",
3132
"@codemirror/lang-java": "^0.19.1",
3233
"@codemirror/lang-json": "^0.19.2",
3334
"@codemirror/theme-one-dark": "^0.19.1",
3435
"@codemirror/view": "^0.19.42",
3536
"@stencil/core": "^2.13.0",
36-
"axios": "^0.26.0"
37+
"axios": "^0.26.0",
38+
"sweetalert2": "^11.4.6"
3739
},
3840
"devDependencies": {
3941
"@types/jest": "^27.0.3",

‎src/components.d.ts‎

Lines changed: 64 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@ export namespace Components {
1010
"name": string;
1111
}
1212
interface CodeEditor {
13-
"isEditable": 'true' | 'false';
14-
"language": 'java' | 'json';
13+
"doc": any;
14+
"url": string;
1515
}
1616
interface CustomTable {
1717
"clearSearch": any;
@@ -29,6 +29,11 @@ export namespace Components {
2929
"tableHeader": object[];
3030
"toggleSortMethod": any;
3131
}
32+
interface DataTable {
33+
"doc": any;
34+
}
35+
interface DialogComponent {
36+
}
3237
interface DropDown {
3338
"alias": string;
3439
"clearSearch": any;
@@ -68,24 +73,28 @@ export namespace Components {
6873
"align": 'vertical' | 'horizontal';
6974
"name": string;
7075
}
71-
interface SignIn {
76+
interface ResEditor {
77+
"doc": any;
78+
"responseLabel": 'result' | 'error';
79+
}
80+
interface TabComponent {
81+
"doc": any;
82+
"responseLabel": any;
7283
}
7384
interface TableWrapper {
7485
"api": any;
7586
"autocompute": boolean;
7687
"headerList": object[];
7788
"rowPerPage": number[];
7889
}
79-
interface TestCom {
80-
}
8190
interface TextField {
8291
"addClass": string;
92+
"eye": boolean;
8393
"name": string;
8494
"onChange": any;
8595
"onClick": any;
8696
"placeholder": string;
8797
"type": 'email' | 'password' | 'text' | 'search';
88-
"width": 'full' | 'auto';
8998
}
9099
interface TextFieldArea {
91100
"addClass": string;
@@ -111,6 +120,18 @@ declare global {
111120
prototype: HTMLCustomTableElement;
112121
new (): HTMLCustomTableElement;
113122
};
123+
interface HTMLDataTableElement extends Components.DataTable, HTMLStencilElement {
124+
}
125+
var HTMLDataTableElement: {
126+
prototype: HTMLDataTableElement;
127+
new (): HTMLDataTableElement;
128+
};
129+
interface HTMLDialogComponentElement extends Components.DialogComponent, HTMLStencilElement {
130+
}
131+
var HTMLDialogComponentElement: {
132+
prototype: HTMLDialogComponentElement;
133+
new (): HTMLDialogComponentElement;
134+
};
114135
interface HTMLDropDownElement extends Components.DropDown, HTMLStencilElement {
115136
}
116137
var HTMLDropDownElement: {
@@ -171,24 +192,24 @@ declare global {
171192
prototype: HTMLRadioButtonElement;
172193
new (): HTMLRadioButtonElement;
173194
};
174-
interface HTMLSignInElement extends Components.SignIn, HTMLStencilElement {
195+
interface HTMLResEditorElement extends Components.ResEditor, HTMLStencilElement {
175196
}
176-
var HTMLSignInElement: {
177-
prototype: HTMLSignInElement;
178-
new (): HTMLSignInElement;
197+
var HTMLResEditorElement: {
198+
prototype: HTMLResEditorElement;
199+
new (): HTMLResEditorElement;
200+
};
201+
interface HTMLTabComponentElement extends Components.TabComponent, HTMLStencilElement {
202+
}
203+
var HTMLTabComponentElement: {
204+
prototype: HTMLTabComponentElement;
205+
new (): HTMLTabComponentElement;
179206
};
180207
interface HTMLTableWrapperElement extends Components.TableWrapper, HTMLStencilElement {
181208
}
182209
var HTMLTableWrapperElement: {
183210
prototype: HTMLTableWrapperElement;
184211
new (): HTMLTableWrapperElement;
185212
};
186-
interface HTMLTestComElement extends Components.TestCom, HTMLStencilElement {
187-
}
188-
var HTMLTestComElement: {
189-
prototype: HTMLTestComElement;
190-
new (): HTMLTestComElement;
191-
};
192213
interface HTMLTextFieldElement extends Components.TextField, HTMLStencilElement {
193214
}
194215
var HTMLTextFieldElement: {
@@ -205,6 +226,8 @@ declare global {
205226
"check-box": HTMLCheckBoxElement;
206227
"code-editor": HTMLCodeEditorElement;
207228
"custom-table": HTMLCustomTableElement;
229+
"data-table": HTMLDataTableElement;
230+
"dialog-component": HTMLDialogComponentElement;
208231
"drop-down": HTMLDropDownElement;
209232
"fluid-container": HTMLFluidContainerElement;
210233
"icon-button": HTMLIconButtonElement;
@@ -215,9 +238,9 @@ declare global {
215238
"nav-bar": HTMLNavBarElement;
216239
"plain-button": HTMLPlainButtonElement;
217240
"radio-button": HTMLRadioButtonElement;
218-
"sign-in": HTMLSignInElement;
241+
"res-editor": HTMLResEditorElement;
242+
"tab-component": HTMLTabComponentElement;
219243
"table-wrapper": HTMLTableWrapperElement;
220-
"test-com": HTMLTestComElement;
221244
"text-field": HTMLTextFieldElement;
222245
"text-field-area": HTMLTextFieldAreaElement;
223246
}
@@ -227,8 +250,8 @@ declare namespace LocalJSX {
227250
"name"?: string;
228251
}
229252
interface CodeEditor {
230-
"isEditable"?: 'true' | 'false';
231-
"language"?: 'java' | 'json';
253+
"doc"?: any;
254+
"url"?: string;
232255
}
233256
interface CustomTable {
234257
"clearSearch"?: any;
@@ -246,6 +269,11 @@ declare namespace LocalJSX {
246269
"tableHeader"?: object[];
247270
"toggleSortMethod"?: any;
248271
}
272+
interface DataTable {
273+
"doc"?: any;
274+
}
275+
interface DialogComponent {
276+
}
249277
interface DropDown {
250278
"alias"?: string;
251279
"clearSearch"?: any;
@@ -285,24 +313,28 @@ declare namespace LocalJSX {
285313
"align"?: 'vertical' | 'horizontal';
286314
"name"?: string;
287315
}
288-
interface SignIn {
316+
interface ResEditor {
317+
"doc"?: any;
318+
"responseLabel"?: 'result' | 'error';
319+
}
320+
interface TabComponent {
321+
"doc"?: any;
322+
"responseLabel"?: any;
289323
}
290324
interface TableWrapper {
291325
"api"?: any;
292326
"autocompute"?: boolean;
293327
"headerList"?: object[];
294328
"rowPerPage"?: number[];
295329
}
296-
interface TestCom {
297-
}
298330
interface TextField {
299331
"addClass"?: string;
332+
"eye"?: boolean;
300333
"name"?: string;
301334
"onChange"?: any;
302335
"onClick"?: any;
303336
"placeholder"?: string;
304337
"type"?: 'email' | 'password' | 'text' | 'search';
305-
"width"?: 'full' | 'auto';
306338
}
307339
interface TextFieldArea {
308340
"addClass"?: string;
@@ -312,6 +344,8 @@ declare namespace LocalJSX {
312344
"check-box": CheckBox;
313345
"code-editor": CodeEditor;
314346
"custom-table": CustomTable;
347+
"data-table": DataTable;
348+
"dialog-component": DialogComponent;
315349
"drop-down": DropDown;
316350
"fluid-container": FluidContainer;
317351
"icon-button": IconButton;
@@ -322,9 +356,9 @@ declare namespace LocalJSX {
322356
"nav-bar": NavBar;
323357
"plain-button": PlainButton;
324358
"radio-button": RadioButton;
325-
"sign-in": SignIn;
359+
"res-editor": ResEditor;
360+
"tab-component": TabComponent;
326361
"table-wrapper": TableWrapper;
327-
"test-com": TestCom;
328362
"text-field": TextField;
329363
"text-field-area": TextFieldArea;
330364
}
@@ -336,6 +370,8 @@ declare module "@stencil/core" {
336370
"check-box": LocalJSX.CheckBox & JSXBase.HTMLAttributes<HTMLCheckBoxElement>;
337371
"code-editor": LocalJSX.CodeEditor & JSXBase.HTMLAttributes<HTMLCodeEditorElement>;
338372
"custom-table": LocalJSX.CustomTable & JSXBase.HTMLAttributes<HTMLCustomTableElement>;
373+
"data-table": LocalJSX.DataTable & JSXBase.HTMLAttributes<HTMLDataTableElement>;
374+
"dialog-component": LocalJSX.DialogComponent & JSXBase.HTMLAttributes<HTMLDialogComponentElement>;
339375
"drop-down": LocalJSX.DropDown & JSXBase.HTMLAttributes<HTMLDropDownElement>;
340376
"fluid-container": LocalJSX.FluidContainer & JSXBase.HTMLAttributes<HTMLFluidContainerElement>;
341377
"icon-button": LocalJSX.IconButton & JSXBase.HTMLAttributes<HTMLIconButtonElement>;
@@ -346,9 +382,9 @@ declare module "@stencil/core" {
346382
"nav-bar": LocalJSX.NavBar & JSXBase.HTMLAttributes<HTMLNavBarElement>;
347383
"plain-button": LocalJSX.PlainButton & JSXBase.HTMLAttributes<HTMLPlainButtonElement>;
348384
"radio-button": LocalJSX.RadioButton & JSXBase.HTMLAttributes<HTMLRadioButtonElement>;
349-
"sign-in": LocalJSX.SignIn & JSXBase.HTMLAttributes<HTMLSignInElement>;
385+
"res-editor": LocalJSX.ResEditor & JSXBase.HTMLAttributes<HTMLResEditorElement>;
386+
"tab-component": LocalJSX.TabComponent & JSXBase.HTMLAttributes<HTMLTabComponentElement>;
350387
"table-wrapper": LocalJSX.TableWrapper & JSXBase.HTMLAttributes<HTMLTableWrapperElement>;
351-
"test-com": LocalJSX.TestCom & JSXBase.HTMLAttributes<HTMLTestComElement>;
352388
"text-field": LocalJSX.TextField & JSXBase.HTMLAttributes<HTMLTextFieldElement>;
353389
"text-field-area": LocalJSX.TextFieldArea & JSXBase.HTMLAttributes<HTMLTextFieldAreaElement>;
354390
}

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

Lines changed: 77 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,99 @@
1-
import { Component, h, Element, State, Prop } from '@stencil/core';
1+
import { Component, h, Element, State, Prop, Host } from '@stencil/core';
22
import { EditorState, basicSetup } from '@codemirror/basic-setup';
3-
import { EditorView } from '@codemirror/view';
3+
import { EditorView, keymap } from '@codemirror/view';
4+
// import { defaultKeymap } from '@codemirror/commands';
45
import { java } from '@codemirror/lang-java';
5-
import { json } from '@codemirror/lang-json';
6-
// import { oneDarkTheme } from '@codemirror/theme-one-dark';
7-
6+
import axios from 'axios';
87
@Component({
98
tag: 'code-editor',
109
scoped: true,
1110
})
1211
export class CodeEditor {
13-
@Prop() isEditable: 'true' | 'false' = 'true';
14-
@Prop() language: 'java' | 'json' = 'java';
15-
@Element() element: HTMLElement;
12+
@Prop() url: string;
13+
@Prop() doc: any = '\n\n\n';
14+
@State() response: any;
15+
@State() responseLabel: any;
1616
@State() view: EditorView;
1717
@State() state: EditorState;
18+
@State() isLoading = false;
19+
@Element() element: HTMLElement;
1820

19-
componentWillLoad() {
21+
componentDidLoad() {
2022
this.state = EditorState.create({
21-
doc: 'console.log("hi")\n\n\n\n',
22-
extensions: [basicSetup, EditorView.editable.of(this.parseToBoolean(this.isEditable)), this.language === 'java' ? java() : json()],
23+
doc: this.doc,
24+
extensions: [
25+
basicSetup,
26+
java(),
27+
// keymap.of(defaultKeymap),
28+
this.dummyKeymap(),
29+
],
2330
});
2431

25-
this.view = new EditorView({ state: this.state, parent: this.element });
32+
this.view = new EditorView({
33+
state: this.state,
34+
parent: this.element.querySelector('#editor'),
35+
});
2636
}
2737

28-
disconnectedCallback() {
29-
this.view.destroy();
38+
clickHandler() {
39+
this.isLoading = true;
40+
let transaction = this.view.state.update();
41+
const query = transaction.state.doc.toString().trim();
42+
this.view.dispatch(transaction);
43+
44+
//axios call
45+
axios
46+
.post(this.url, {
47+
query,
48+
apiKey: 'VD695S0-471MNBN-Q253RNQ-TZ2G9PT',
49+
})
50+
.then((res: any) => {
51+
this.response = Object.values(res.data)[0];
52+
this.responseLabel = Object.keys(res.data)[0];
53+
this.isLoading = false;
54+
})
55+
.catch(err => console.log(err));
3056
}
3157

32-
parseToBoolean(str) {
33-
if (str === 'true') return true;
34-
return false;
58+
dummyKeymap() {
59+
let self = this;
60+
return keymap.of([
61+
{
62+
key: 'Ctrl-Shift-Enter',
63+
run() {
64+
self.clickHandler();
65+
return true;
66+
},
67+
},
68+
]);
3569
}
3670

3771
render() {
38-
return <div></div>;
72+
return (
73+
<Host>
74+
<div class="border border-gray-300 shadow-gray-300 p-3 space-y-2">
75+
<div id="editor" class="border border-gray-300"></div>
76+
<button
77+
title="Ctrl+Shift+Enter to run"
78+
onClick={() => this.clickHandler()}
79+
class="flex text-sm gap-2 items-center justify-center text-gray-600 border border-gray-300 px-3 py-2 hover:bg-gray-200 hover:text-gray-800"
80+
>
81+
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
82+
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
83+
</svg>
84+
Run
85+
</button>
86+
</div>
87+
88+
{this.isLoading && (
89+
<div>
90+
<p class="text-gray-400 pt-8 pb-12">Output :</p>
91+
<loader-component></loader-component>
92+
</div>
93+
)}
94+
{this.response && !this.isLoading && <tab-component responseLabel={this.responseLabel} doc={this.response}></tab-component>}
95+
{/* {this.response && !this.isLoading && <res-editor responseLabel={this.responseLabel} doc={JSON.stringify(this.response, null, 2)}></res-editor>} */}
96+
</Host>
97+
);
3998
}
4099
}

0 commit comments

Comments
 (0)