Skip to content

Commit 44820f2

Browse files
abhishekctvabhishekctv
authored
Merge pull request #35 from SwapnilTechVariable/enhancement/delete-data
Added support for delete data, cleaned the store
2 parents 45ef66e + ea3e73a commit 44820f2

File tree

20 files changed

+1035
-171
lines changed

20 files changed

+1035
-171
lines changed

‎src/components.d.ts‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,12 @@ export namespace Components {
2323
"backDropHandler": any;
2424
"showBackDrop": boolean;
2525
}
26+
interface BasicDropdown {
27+
"label": string;
28+
"optionHandler": any;
29+
"propOptions": any;
30+
"propSelectedOptionLabel": string;
31+
}
2632
interface CheckBox {
2733
"name": string;
2834
}
@@ -37,6 +43,11 @@ export namespace Components {
3743
"formatter": Function;
3844
"onClickRun": Function;
3945
}
46+
interface CustomDropDown {
47+
"dropDownValue": string;
48+
"optionListProp": { label: string; selected: boolean; }[];
49+
"selectHandler": any;
50+
}
4051
interface DataTable {
4152
"columns": {
4253
id: number | string;
@@ -126,6 +137,8 @@ export namespace Components {
126137
"iconPosition": 'right' | 'left';
127138
"type": 'outlined' | 'contained';
128139
}
140+
interface InsertNodeModal {
141+
}
129142
interface InviteComponent {
130143
"apiurl": string;
131144
"email": string;
@@ -312,6 +325,12 @@ declare global {
312325
prototype: HTMLBackdropFilterElement;
313326
new (): HTMLBackdropFilterElement;
314327
};
328+
interface HTMLBasicDropdownElement extends Components.BasicDropdown, HTMLStencilElement {
329+
}
330+
var HTMLBasicDropdownElement: {
331+
prototype: HTMLBasicDropdownElement;
332+
new (): HTMLBasicDropdownElement;
333+
};
315334
interface HTMLCheckBoxElement extends Components.CheckBox, HTMLStencilElement {
316335
}
317336
var HTMLCheckBoxElement: {
@@ -330,6 +349,12 @@ declare global {
330349
prototype: HTMLCodeEditorElement;
331350
new (): HTMLCodeEditorElement;
332351
};
352+
interface HTMLCustomDropDownElement extends Components.CustomDropDown, HTMLStencilElement {
353+
}
354+
var HTMLCustomDropDownElement: {
355+
prototype: HTMLCustomDropDownElement;
356+
new (): HTMLCustomDropDownElement;
357+
};
333358
interface HTMLDataTableElement extends Components.DataTable, HTMLStencilElement {
334359
}
335360
var HTMLDataTableElement: {
@@ -402,6 +427,12 @@ declare global {
402427
prototype: HTMLIconButtonElement;
403428
new (): HTMLIconButtonElement;
404429
};
430+
interface HTMLInsertNodeModalElement extends Components.InsertNodeModal, HTMLStencilElement {
431+
}
432+
var HTMLInsertNodeModalElement: {
433+
prototype: HTMLInsertNodeModalElement;
434+
new (): HTMLInsertNodeModalElement;
435+
};
405436
interface HTMLInviteComponentElement extends Components.InviteComponent, HTMLStencilElement {
406437
}
407438
var HTMLInviteComponentElement: {
@@ -598,9 +629,11 @@ declare global {
598629
"add-role": HTMLAddRoleElement;
599630
"all-users": HTMLAllUsersElement;
600631
"backdrop-filter": HTMLBackdropFilterElement;
632+
"basic-dropdown": HTMLBasicDropdownElement;
601633
"check-box": HTMLCheckBoxElement;
602634
"chips-list": HTMLChipsListElement;
603635
"code-editor": HTMLCodeEditorElement;
636+
"custom-drop-down": HTMLCustomDropDownElement;
604637
"data-table": HTMLDataTableElement;
605638
"data-table-updated": HTMLDataTableUpdatedElement;
606639
"dialog-component": HTMLDialogComponentElement;
@@ -613,6 +646,7 @@ declare global {
613646
"editor-res": HTMLEditorResElement;
614647
"fluid-container": HTMLFluidContainerElement;
615648
"icon-button": HTMLIconButtonElement;
649+
"insert-node-modal": HTMLInsertNodeModalElement;
616650
"invite-component": HTMLInviteComponentElement;
617651
"json-response-viewer": HTMLJsonResponseViewerElement;
618652
"last-logs": HTMLLastLogsElement;
@@ -665,6 +699,12 @@ declare namespace LocalJSX {
665699
"backDropHandler"?: any;
666700
"showBackDrop"?: boolean;
667701
}
702+
interface BasicDropdown {
703+
"label"?: string;
704+
"optionHandler"?: any;
705+
"propOptions"?: any;
706+
"propSelectedOptionLabel"?: string;
707+
}
668708
interface CheckBox {
669709
"name"?: string;
670710
}
@@ -679,6 +719,11 @@ declare namespace LocalJSX {
679719
"formatter"?: Function;
680720
"onClickRun"?: Function;
681721
}
722+
interface CustomDropDown {
723+
"dropDownValue"?: string;
724+
"optionListProp"?: { label: string; selected: boolean; }[];
725+
"selectHandler"?: any;
726+
}
682727
interface DataTable {
683728
"columns"?: {
684729
id: number | string;
@@ -768,6 +813,8 @@ declare namespace LocalJSX {
768813
"iconPosition"?: 'right' | 'left';
769814
"type"?: 'outlined' | 'contained';
770815
}
816+
interface InsertNodeModal {
817+
}
771818
interface InviteComponent {
772819
"apiurl"?: string;
773820
"email"?: string;
@@ -938,9 +985,11 @@ declare namespace LocalJSX {
938985
"add-role": AddRole;
939986
"all-users": AllUsers;
940987
"backdrop-filter": BackdropFilter;
988+
"basic-dropdown": BasicDropdown;
941989
"check-box": CheckBox;
942990
"chips-list": ChipsList;
943991
"code-editor": CodeEditor;
992+
"custom-drop-down": CustomDropDown;
944993
"data-table": DataTable;
945994
"data-table-updated": DataTableUpdated;
946995
"dialog-component": DialogComponent;
@@ -953,6 +1002,7 @@ declare namespace LocalJSX {
9531002
"editor-res": EditorRes;
9541003
"fluid-container": FluidContainer;
9551004
"icon-button": IconButton;
1005+
"insert-node-modal": InsertNodeModal;
9561006
"invite-component": InviteComponent;
9571007
"json-response-viewer": JsonResponseViewer;
9581008
"last-logs": LastLogs;
@@ -994,9 +1044,11 @@ declare module "@stencil/core" {
9941044
"add-role": LocalJSX.AddRole & JSXBase.HTMLAttributes<HTMLAddRoleElement>;
9951045
"all-users": LocalJSX.AllUsers & JSXBase.HTMLAttributes<HTMLAllUsersElement>;
9961046
"backdrop-filter": LocalJSX.BackdropFilter & JSXBase.HTMLAttributes<HTMLBackdropFilterElement>;
1047+
"basic-dropdown": LocalJSX.BasicDropdown & JSXBase.HTMLAttributes<HTMLBasicDropdownElement>;
9971048
"check-box": LocalJSX.CheckBox & JSXBase.HTMLAttributes<HTMLCheckBoxElement>;
9981049
"chips-list": LocalJSX.ChipsList & JSXBase.HTMLAttributes<HTMLChipsListElement>;
9991050
"code-editor": LocalJSX.CodeEditor & JSXBase.HTMLAttributes<HTMLCodeEditorElement>;
1051+
"custom-drop-down": LocalJSX.CustomDropDown & JSXBase.HTMLAttributes<HTMLCustomDropDownElement>;
10001052
"data-table": LocalJSX.DataTable & JSXBase.HTMLAttributes<HTMLDataTableElement>;
10011053
"data-table-updated": LocalJSX.DataTableUpdated & JSXBase.HTMLAttributes<HTMLDataTableUpdatedElement>;
10021054
"dialog-component": LocalJSX.DialogComponent & JSXBase.HTMLAttributes<HTMLDialogComponentElement>;
@@ -1009,6 +1061,7 @@ declare module "@stencil/core" {
10091061
"editor-res": LocalJSX.EditorRes & JSXBase.HTMLAttributes<HTMLEditorResElement>;
10101062
"fluid-container": LocalJSX.FluidContainer & JSXBase.HTMLAttributes<HTMLFluidContainerElement>;
10111063
"icon-button": LocalJSX.IconButton & JSXBase.HTMLAttributes<HTMLIconButtonElement>;
1064+
"insert-node-modal": LocalJSX.InsertNodeModal & JSXBase.HTMLAttributes<HTMLInsertNodeModalElement>;
10121065
"invite-component": LocalJSX.InviteComponent & JSXBase.HTMLAttributes<HTMLInviteComponentElement>;
10131066
"json-response-viewer": LocalJSX.JsonResponseViewer & JSXBase.HTMLAttributes<HTMLJsonResponseViewerElement>;
10141067
"last-logs": LocalJSX.LastLogs & JSXBase.HTMLAttributes<HTMLLastLogsElement>;

‎src/components/common/basic-dropdown/basic-dropdown.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
:host {
2+
display: block;
3+
}

‎src/components/common/basic-dropdown/basic-dropdown.tsx‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
import { Component, Host, h, Prop, State, Watch } from '@stencil/core';
2+
3+
const visibilityClasses = {
4+
true: '',
5+
false: 'hidden',
6+
};
7+
8+
@Component({
9+
tag: 'basic-dropdown',
10+
styleUrl: 'basic-dropdown.css',
11+
scoped: true,
12+
})
13+
export class BasicDropdown {
14+
@Prop() propOptions: any;
15+
@Prop() propSelectedOptionLabel: string;
16+
@Prop() label: string = 'DropDown';
17+
@Prop() optionHandler: any;
18+
@State() options: any;
19+
@State() toggle: boolean = false;
20+
@State() selectedOption: string = '';
21+
@Watch('propSelectedOptionLabel')
22+
validateName(newValue: string, oldValue: string) {
23+
if (newValue !== oldValue) {
24+
this.options = [...this.options].map(option => {
25+
if (option.label === newValue) {
26+
return {
27+
label: newValue,
28+
selected: true,
29+
};
30+
}
31+
return {
32+
label: option.label,
33+
selected: false,
34+
};
35+
});
36+
this.selectedOption = this.propSelectedOptionLabel;
37+
this.optionHandler(this.selectedOption);
38+
}
39+
}
40+
41+
componentWillLoad() {
42+
this.selectedOption = this.propSelectedOptionLabel;
43+
this.options = this.propOptions;
44+
}
45+
46+
toggleDropDown() {
47+
this.toggle = !this.toggle;
48+
}
49+
50+
selectHandler(selectedLabel) {
51+
this.selectedOption = selectedLabel;
52+
this.options = [...this.options].map(option => {
53+
if (option.label === selectedLabel) {
54+
return {
55+
label: selectedLabel,
56+
selected: true,
57+
};
58+
}
59+
return {
60+
label: option.label,
61+
selected: false,
62+
};
63+
});
64+
this.optionHandler(selectedLabel);
65+
this.toggleDropDown();
66+
}
67+
68+
render() {
69+
return (
70+
<Host>
71+
<button
72+
onClick={() => this.toggleDropDown()}
73+
id="dropdownDefaultButton"
74+
data-dropdown-toggle="dropdown"
75+
class="justify-between bg-gray-100 border border-gray-200 focus:ring-1 focus:outline-none focus:ring-gray-500 font-medium rounded-lg text-sm px-2 py-2 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 w-full"
76+
type="button"
77+
>
78+
{this.label} {this.selectedOption}{' '}
79+
<svg class="w-4 h-4 ml-2" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
80+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
81+
</svg>
82+
</button>
83+
<div id="dropdown" class={`absolute my-2 z-10 bg-white divide-y divide-gray-100 rounded-lg shadow w-40 dark:bg-gray-700 ${visibilityClasses[this.toggle.toString()]}`}>
84+
<ul class="py-2 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownDefaultButton">
85+
{this.options.map(option => {
86+
return (
87+
<li onClick={() => this.selectHandler(option.label)}>
88+
<a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
89+
{option.label}
90+
</a>
91+
</li>
92+
);
93+
})}
94+
</ul>
95+
</div>
96+
</Host>
97+
);
98+
}
99+
}

‎src/components/common/basic-dropdown/readme.md‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
# basic-dropdown
2+
3+
4+
5+
<!-- Auto Generated Below -->
6+
7+
8+
## Properties
9+
10+
| Property | Attribute | Description | Type | Default |
11+
| ------------------------- | ---------------------------- | ----------- | -------- | ------------ |
12+
| `label` | `label` | | `string` | `'DropDown'` |
13+
| `optionHandler` | `option-handler` | | `any` | `undefined` |
14+
| `propOptions` | `prop-options` | | `any` | `undefined` |
15+
| `propSelectedOptionLabel` | `prop-selected-option-label` | | `string` | `undefined` |
16+
17+
18+
## Dependencies
19+
20+
### Used by
21+
22+
- [insert-node-modal](../../editorPage/insert-node-modal)
23+
24+
### Graph
25+
```mermaid
26+
graph TD;
27+
insert-node-modal --> basic-dropdown
28+
style basic-dropdown fill:#f9f,stroke:#333,stroke-width:4px
29+
```
30+
31+
----------------------------------------------
32+
33+
*Built with [StencilJS](https://stenciljs.com/)*

‎src/components/common/custom-drop-down/custom-drop-down.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
:host {
2+
display: block;
3+
}

0 commit comments

Comments
 (0)