Skip to content

Commit fb90b11

Browse files
durgatechvardurgatechvar
committed
minor fixes
1 parent 5b827ce commit fb90b11

File tree

6 files changed

+72
-31
lines changed

6 files changed

+72
-31
lines changed

‎src/components.d.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -161,6 +161,7 @@ export namespace Components {
161161
"align": 'vertical' | 'horizontal';
162162
"checked": string;
163163
"clickHandler": any;
164+
"label": string;
164165
"labels": string[];
165166
"name": string;
166167
}
@@ -693,6 +694,7 @@ declare namespace LocalJSX {
693694
"align"?: 'vertical' | 'horizontal';
694695
"checked"?: string;
695696
"clickHandler"?: any;
697+
"label"?: string;
696698
"labels"?: string[];
697699
"name"?: string;
698700
}

‎src/components/menu-drop-down/menu-drop-down.tsx‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,21 @@
11
import { Component, h, Prop, State } from '@stencil/core';
2+
import { ClickOutside } from "stencil-click-outside";
23
import state from '../store';
34

45
@Component({
56
tag: 'menu-drop-down',
67
scoped: true,
78
})
8-
export class MenuDropDown {
9+
export class MenuDropDown {
10+
11+
@ClickOutside()
12+
someMethod() {
13+
console.log(
14+
"someMethod was called because user just clicked outside of MyComponent"
15+
);
16+
}
17+
18+
919
@Prop() listTitle: string;
1020
@Prop() list: string[];
1121
@Prop() fetchData: any;
@@ -41,8 +51,8 @@ export class MenuDropDown {
4151
</h2>
4252

4353
{/* List */}
44-
<div class={this.showDropdown ? 'absolute bg-white z-10 w-44 text-sm list-none mt-2 rounded divide-y divide-gray-100 shadow ' : 'hidden'}>
45-
<ul class="py-1">
54+
<div id="dropdownDefaultButton" data-dropdown-toggle="dropdown" class={this.showDropdown ? 'absolute bg-white z-10 w-44 text-sm list-none mt-2 rounded divide-y divide-gray-100 shadow ' : 'hidden'}>
55+
<ul id="dropdown" class="py-1">
4656
{this.list?.map(item => (
4757
<li>
4858
<a href="#" onClick={() => this.buttonHandler(this.listTitle)} class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100">

‎src/components/radio-button-multiple/radio.button-multiple.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { Component, h, Prop } from '@stencil/core';
66
})
77
export class RadioButtonMultiple {
88
@Prop() name: string;
9+
@Prop() label: string;
910
@Prop() labels: string[];
1011
@Prop() align: 'vertical' | 'horizontal' = 'horizontal';
1112
@Prop() clickHandler:any;
@@ -14,7 +15,7 @@ export class RadioButtonMultiple {
1415
render() {
1516
return (
1617
<div class="py-2">
17-
<p class="m-2">{this.name}</p>
18+
<p class="m-2">{this.label}</p>
1819
{this.labels.map(item => {
1920
return (
2021
<div class={this.align === 'horizontal' ? 'inline-block mr-7' : 'block'}>

‎src/components/radio-button-multiple/readme.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
| `align` | `align` | | `"horizontal" \| "vertical"` | `'horizontal'` |
1313
| `checked` | `checked` | | `string` | `undefined` |
1414
| `clickHandler` | `click-handler` | | `any` | `undefined` |
15+
| `label` | `label` | | `string` | `undefined` |
1516
| `labels` | -- | | `string[]` | `undefined` |
1617
| `name` | `name` | | `string` | `undefined` |
1718

‎src/components/table-search-modal/table-search-modal.css‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
.mt-2 {
2+
margin-top: 0.5rem/* 8px */;
3+
}
4+
5+
.mb-2 {
6+
margin-bottom: 0.5rem/* 8px */;
7+
}
8+
9+
.bg-yellow-500 {
10+
--tw-bg-opacity: 1;
11+
background-color: rgb(234 179 8 / var(--tw-bg-opacity));
12+
}
13+
14+
.text-red-800 {
15+
--tw-text-opacity: 1;
16+
color: rgb(153 27 27 / var(--tw-text-opacity));
17+
}
18+
19+
.border-red-600 {
20+
--tw-border-opacity: 1;
21+
border-color: rgb(220 38 38 / var(--tw-border-opacity));
22+
}

‎src/components/table-search-modal/table-search-modal.tsx‎

Lines changed: 32 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { Component, Host, h, State, Prop } from '@stencil/core';
22

33
@Component({
44
tag: 'table-search-modal',
5+
styleUrl: 'table-search-modal.css',
56
scoped: true,
67
})
78
export class TableSearchModal {
@@ -21,8 +22,8 @@ export class TableSearchModal {
2122
@State() selectedSearchOption: string = '';
2223
@State() selectedTextSearchOption: string = '';
2324
@State() selectedNumberSearchOption: string = '';
24-
@State() colName: string = "";
25-
25+
@State() colName: string = '';
26+
@State()
2627
componentWillLoad() {
2728
this.colName = this.alias;
2829
if (this.type !== null) {
@@ -36,11 +37,11 @@ export class TableSearchModal {
3637
}
3738

3839
clearFields() {
39-
this.value = "";
40-
this.colName = "";
41-
this.selectedSearchOption = "";
42-
this.selectedTextSearchOption = "";
43-
this.selectedNumberSearchOption = "";
40+
this.value = '';
41+
this.colName = '';
42+
this.selectedSearchOption = '';
43+
this.selectedTextSearchOption = '';
44+
this.selectedNumberSearchOption = '';
4445
}
4546

4647
toggleModalState() {
@@ -49,7 +50,7 @@ export class TableSearchModal {
4950

5051
submitHandler(e) {
5152
e.preventDefault();
52-
if (this.selectedSearchOption !== "") {
53+
if (this.selectedSearchOption !== '') {
5354
this.searchMethod(this.value, this.alias, this.selectedSearchOption, this.selectedTextSearchOption, this.selectedNumberSearchOption);
5455
this.toggleModalState();
5556
this.clearFields();
@@ -62,17 +63,14 @@ export class TableSearchModal {
6263

6364
radioSearchTypeHandler = event => {
6465
this.selectedSearchOption = event.target.value;
65-
console.log(this.selectedSearchOption);
6666
};
6767

6868
radioTextSearchOptionHandler = event => {
6969
this.selectedTextSearchOption = event.target.value;
70-
console.log(this.selectedTextSearchOption);
7170
};
7271

7372
radioNumberSearchOptionHandler = event => {
7473
this.selectedNumberSearchOption = event.target.value;
75-
console.log(this.selectedNumberSearchOption);
7674
};
7775

7876
render() {
@@ -85,21 +83,21 @@ export class TableSearchModal {
8583

8684
{/* Main Modal */}
8785
{this.isModalOpen && (
88-
<form onSubmit={e => this.submitHandler(e)} class="pt-6 space-y-3" action="/invite">
89-
<div class="fixed z-12 inset-0 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
86+
<form onSubmit={e => this.submitHandler(e)} class="pt-6 space-y-3">
87+
<div class="fixed z-12 inset-0 overflow-y-auto">
9088
<div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
91-
<div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"></div>
89+
<div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>
9290

9391
{/* <!-- This element is to trick the browser into centering the modal contents. --> */}
94-
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">
92+
<span class="hidden sm:inline-block sm:align-middle sm:h-screen">
9593
&#8203;
9694
</span>
9795

9896
<div class="relative inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
9997
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
100-
<div class="sm:flex sm:items-start">
101-
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
102-
<h3 class="text-lg leading-6 font-medium text-gray-900 my-2" id="modal-title">
98+
<div>
99+
<div class="mt-3 text-center sm:mt-0 sm:text-left">
100+
<h3 class="text-lg leading-6 font-semibold text-gray-600 my-2" id="modal-title">
103101
Search in {this.alias}
104102
</h3>
105103
<div class="mt-2">
@@ -108,22 +106,27 @@ export class TableSearchModal {
108106
clickHandler={this.radioSearchTypeHandler}
109107
labels={this.searchOptions}
110108
name="SearchMethod"
109+
label="Data Type"
111110
align="horizontal"
112111
checked={this.type}
113112
></radio-button-multiple>
114113
</div>
115-
114+
{this.selectedSearchOption !== this.type ? (
115+
<p style={{ marginBottom: '10px' }} class="px-3 py-2 bg-yellow-200 text-gray-800 border-l-4 w-full my-2">
116+
You have overridden the auto-detected type, some functinalities may not work properly{' '}
117+
</p>
118+
) : null}
116119
{this.selectedSearchOption === 'string' && (
117120
<div>
118-
<label class="block" htmlFor="searchText">
119-
Enter text to be searched.
121+
<label class="block pb-2" htmlFor="searchText">
122+
Search Key
120123
</label>
121124
<input
122-
type="name"
125+
type="text"
123126
name="searchText"
124127
required
125-
placeholder="india"
126-
class="border w-96 px-2 py-1 rounded-md text-sm"
128+
placeholder="Type something to search"
129+
class="mb-2 border px-2 p-2 rounded-md text-sm w-full"
127130
value={this.value}
128131
onInput={event => this.handleChange(event)}
129132
/>
@@ -132,22 +135,23 @@ export class TableSearchModal {
132135
clickHandler={this.radioTextSearchOptionHandler}
133136
labels={this.textSearchOptions}
134137
name="TextSearchOption"
138+
label="Search Method"
135139
align="horizontal"
136140
></radio-button-multiple>
137141
</div>
138142
)}
139143

140144
{this.selectedSearchOption === 'number' && (
141145
<div>
142-
<label class="block" htmlFor="searchNumber">
146+
<label class="block py-2" htmlFor="searchNumber">
143147
Enter number to be searched.
144148
</label>
145149
<input
146150
type="number"
147151
name="searchNumber"
148152
required
149-
placeholder="123"
150-
class="border w-96 px-2 py-1 rounded-md text-sm"
153+
placeholder="Type a number to search"
154+
class="border w-full px-2 py-1 rounded-md text-sm mb-2"
151155
value={this.value}
152156
onInput={event => this.handleChange(event)}
153157
/>
@@ -156,6 +160,7 @@ export class TableSearchModal {
156160
clickHandler={this.radioNumberSearchOptionHandler}
157161
labels={this.numberSearchOptions}
158162
name="NumberSearchOption"
163+
label="Search Method"
159164
align="horizontal"
160165
></radio-button-multiple>
161166
</div>

0 commit comments

Comments
 (0)