empower-container 0.1.9 → 0.1.10
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +68 -2
- package/package.json +2 -2
- package/src/main/MenuBar.js +12 -11
- package/src/main/MenuBar.tsx +22 -20
- package/src/main/inputs/InputSelectionHandler.d.ts +1 -0
- package/src/sample/TestMenuBar.d.ts +1 -0
- package/src/sample/TestMenuBar.js +35 -16
- package/src/sample/TestMenuBar.tsx +63 -48
- package/src/scss/elements/_button.scss +5 -5
- package/src/scss/library/_menubar.scss +41 -11
- package/src/scss/library/_select.scss +6 -5
- package/dist/cjs/DatetimeFormatter.d.ts +0 -3
- package/dist/cjs/DatetimeFormatter.js +0 -389
- package/dist/cjs/Information.d.ts +0 -10
- package/dist/cjs/Information.js +0 -63
- package/dist/cjs/MenuBar.d.ts +0 -24
- package/dist/cjs/MenuBar.js +0 -537
- package/dist/cjs/Modal.d.ts +0 -33
- package/dist/cjs/Modal.js +0 -32
- package/dist/cjs/assets/Asset.d.ts +0 -16
- package/dist/cjs/assets/Asset.js +0 -30
- package/dist/cjs/constants/Constant.d.ts +0 -15
- package/dist/cjs/constants/Constant.js +0 -35
- package/dist/cjs/index.d.ts +0 -3
- package/dist/cjs/index.js +0 -10
- package/dist/cjs/inputs/Input.d.ts +0 -25
- package/dist/cjs/inputs/Input.js +0 -106
- package/dist/cjs/inputs/InputSelectionHandler.d.ts +0 -3
- package/dist/cjs/inputs/InputSelectionHandler.js +0 -36
- package/dist/cjs/inputs/Select.d.ts +0 -28
- package/dist/cjs/inputs/Select.js +0 -403
- package/dist/esm/DatetimeFormatter.d.ts +0 -3
- package/dist/esm/DatetimeFormatter.js +0 -385
- package/dist/esm/Information.d.ts +0 -10
- package/dist/esm/Information.js +0 -38
- package/dist/esm/MenuBar.d.ts +0 -24
- package/dist/esm/MenuBar.js +0 -532
- package/dist/esm/Modal.d.ts +0 -33
- package/dist/esm/Modal.js +0 -27
- package/dist/esm/assets/Asset.d.ts +0 -16
- package/dist/esm/assets/Asset.js +0 -27
- package/dist/esm/constants/Constant.d.ts +0 -15
- package/dist/esm/constants/Constant.js +0 -32
- package/dist/esm/index.d.ts +0 -3
- package/dist/esm/index.js +0 -3
- package/dist/esm/inputs/Input.d.ts +0 -25
- package/dist/esm/inputs/Input.js +0 -104
- package/dist/esm/inputs/InputSelectionHandler.d.ts +0 -3
- package/dist/esm/inputs/InputSelectionHandler.js +0 -31
- package/dist/esm/inputs/Select.d.ts +0 -28
- package/dist/esm/inputs/Select.js +0 -399
- package/dist/scss/components/_modal.scss +0 -66
- package/dist/scss/elements/_button.scss +0 -107
- package/dist/scss/elements/_index.scss +0 -2
- package/dist/scss/elements/_popover.scss +0 -8
- package/dist/scss/foundation/_colors.scss +0 -60
- package/dist/scss/foundation/_mixins.scss +0 -41
- package/dist/scss/foundation/_normalize.scss +0 -204
- package/dist/scss/foundation/_settings.scss +0 -36
- package/dist/scss/foundation/_typography.scss +0 -95
- package/dist/scss/library/_information.scss +0 -68
- package/dist/scss/library/_input.scss +0 -37
- package/dist/scss/library/_menubar.scss +0 -225
- package/dist/scss/library/_select.scss +0 -258
- package/dist/scss/style.scss +0 -24
package/README.md
CHANGED
@@ -7,7 +7,7 @@
|
|
7
7
|
## 1) Menubar
|
8
8
|
### Implementation
|
9
9
|
```js
|
10
|
-
import { MenuBar } from '
|
10
|
+
import { MenuBar } from 'empoower-container';
|
11
11
|
```
|
12
12
|
### Options
|
13
13
|
|
@@ -19,6 +19,39 @@ config: {
|
|
19
19
|
iconType: ['check', "back", 'standard']
|
20
20
|
}
|
21
21
|
```
|
22
|
+
```js
|
23
|
+
mainButton: {
|
24
|
+
show: true,
|
25
|
+
label: 'File a Request',
|
26
|
+
icon: SVG_ADD,
|
27
|
+
actions: [
|
28
|
+
{
|
29
|
+
|
30
|
+
label: "File Leave",
|
31
|
+
action: "leave", // string optional
|
32
|
+
icon: SVG_SUBMIT
|
33
|
+
},
|
34
|
+
{
|
35
|
+
label: "File Overtime",
|
36
|
+
action: "overtime", // string optional
|
37
|
+
icon: SVG_SUBMIT
|
38
|
+
},
|
39
|
+
|
40
|
+
{
|
41
|
+
label: "File Toil",
|
42
|
+
action: "toil", // string optional
|
43
|
+
icon: SVG_SUBMIT
|
44
|
+
},
|
45
|
+
|
46
|
+
{
|
47
|
+
label: "File Amendment",
|
48
|
+
action: "amendment", // string optional
|
49
|
+
icon: SVG_SUBMIT
|
50
|
+
}
|
51
|
+
]
|
52
|
+
}
|
53
|
+
```
|
54
|
+
|
22
55
|
```js
|
23
56
|
button {
|
24
57
|
show: true
|
@@ -156,7 +189,7 @@ info: 'Sample Information'
|
|
156
189
|
## 2) Modal
|
157
190
|
### Implementation
|
158
191
|
```js
|
159
|
-
import { Modal } from '
|
192
|
+
import { Modal } from 'empoower-container';
|
160
193
|
```
|
161
194
|
### Options
|
162
195
|
|
@@ -172,6 +205,39 @@ config: {
|
|
172
205
|
modalSize: 'lg'
|
173
206
|
}
|
174
207
|
```
|
208
|
+
```js
|
209
|
+
mainButton: {
|
210
|
+
show: true,
|
211
|
+
label: 'File a Request',
|
212
|
+
icon: SVG_ADD,
|
213
|
+
actions: [
|
214
|
+
{
|
215
|
+
|
216
|
+
label: "File Leave",
|
217
|
+
action: "leave", // string optional
|
218
|
+
icon: SVG_SUBMIT
|
219
|
+
},
|
220
|
+
{
|
221
|
+
label: "File Overtime",
|
222
|
+
action: "overtime", // string optional
|
223
|
+
icon: SVG_SUBMIT
|
224
|
+
},
|
225
|
+
|
226
|
+
{
|
227
|
+
label: "File Toil",
|
228
|
+
action: "toil", // string optional
|
229
|
+
icon: SVG_SUBMIT
|
230
|
+
},
|
231
|
+
|
232
|
+
{
|
233
|
+
label: "File Amendment",
|
234
|
+
action: "amendment", // string optional
|
235
|
+
icon: SVG_SUBMIT
|
236
|
+
}
|
237
|
+
]
|
238
|
+
}
|
239
|
+
```
|
240
|
+
|
175
241
|
```js
|
176
242
|
button {
|
177
243
|
show: true
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "empower-container",
|
3
|
-
"version": "0.1.
|
3
|
+
"version": "0.1.10",
|
4
4
|
"private": false,
|
5
5
|
"main": "./dist/cjs/index.js",
|
6
6
|
"module": "./dist/esm/index.js",
|
@@ -36,7 +36,7 @@
|
|
36
36
|
"dist": "npm run build:esm && npm run build:cjs && npm run copy-files",
|
37
37
|
"build:esm": "tsc -b src/main/",
|
38
38
|
"build:cjs": "tsc -p src/main/tsconfig.common.json",
|
39
|
-
"copy-files": "cp -r ./src/scss/ ./dist/",
|
39
|
+
"copy-files": "cp -r ./src/scss/ ./dist/ && cp -r ./src/main/assets/ ./dist/",
|
40
40
|
"dev": "npx tsc -p src/sample/tsconfig.json -w"
|
41
41
|
},
|
42
42
|
"eslintConfig": {
|
package/src/main/MenuBar.js
CHANGED
@@ -490,13 +490,14 @@ var MenuBar = function (_a) {
|
|
490
490
|
config && config.addedTitle ? (react_1.default.createElement("p", null, config.addedTitle)) : null),
|
491
491
|
react_1.default.createElement("div", { className: "em-beltleft-cta" },
|
492
492
|
mainButton && mainButton.show ? (mainButton.actions && mainButton.actions.constructor === Array && mainButton.actions.length > 1 ? (react_1.default.createElement(react_1.Fragment, null,
|
493
|
-
react_1.default.createElement("
|
494
|
-
react_1.default.createElement("
|
495
|
-
|
496
|
-
|
497
|
-
react_1.default.createElement(
|
498
|
-
|
499
|
-
|
493
|
+
react_1.default.createElement("div", { className: "em-dropdown" },
|
494
|
+
react_1.default.createElement("a", { className: "em-button belt-action-main", id: "main-button", href: "#", onClick: function (event) { return popoverRequestHandler(event, 'main-button'); } },
|
495
|
+
react_1.default.createElement("div", { className: "belt-icon" }, mainButton.icon ? mainButton.icon : ''),
|
496
|
+
react_1.default.createElement("span", null, mainButton.label ? mainButton.label : 'File a Request')),
|
497
|
+
react_1.default.createElement(Select_1.Popover, { id: "mainButtonPopover", open: Boolean(mainButtonPopover), onClick: function (event) { return popoverRequestHandler(event, 'main-button'); }, className: Boolean(dropdownPopover) ? 'open-popover' : '' },
|
498
|
+
react_1.default.createElement("div", { className: "popover em-popover-list" }, mainButton.actions.map(function (btn, idx) {
|
499
|
+
return react_1.default.createElement("a", { href: "#", key: idx, onClick: function (event) { return actionRequestHandler(event, 'main-button', btn.action); } }, btn.label);
|
500
|
+
})))))) : mainButton.actions && mainButton.actions.constructor === Array && mainButton.actions.length === 1 ? (mainButton.actions.map(function (btn, idx) {
|
500
501
|
return (react_1.default.createElement("a", { className: btn.class ? 'belt-action ' + btn.class : 'belt-action', href: "#", key: idx, onClick: function (event) { return actionRequestHandler(event, 'main-button', btn.action); } },
|
501
502
|
react_1.default.createElement("div", { className: "belt-icon " }, btn.icon ? btn.icon : ''),
|
502
503
|
react_1.default.createElement("span", null, btn.label ? btn.label : '')));
|
@@ -504,14 +505,14 @@ var MenuBar = function (_a) {
|
|
504
505
|
// Button Actions Configuration
|
505
506
|
button && button.show && button.show.constructor === Boolean &&
|
506
507
|
button.actions && button.actions.constructor === Array && button.actions.length > 0 ? (button.actions.map(function (btn, idx) {
|
507
|
-
return (react_1.default.createElement("a", { className: btn.class ? btn.class : 'belt-action' + ' ' + (idx === 0 ? 'is-primary' : ''), href: "#", key: idx, onClick: function (event) { return actionRequestHandler(event, 'button', btn.action); }, "data-testid": "menubar-button" },
|
508
|
+
return (react_1.default.createElement("a", { className: btn.class ? btn.class : ' belt-action' + ' ' + (idx === 0 ? 'is-primary' : ''), href: "#", key: idx, onClick: function (event) { return actionRequestHandler(event, 'button', btn.action); }, "data-testid": "menubar-button" },
|
508
509
|
react_1.default.createElement("div", { className: "belt-icon belt-buttons" }, btn.icon ? btn.icon : ''),
|
509
510
|
react_1.default.createElement("span", { "data-testid": 'button-action-' + btn.action }, btn.label ? btn.label : '')));
|
510
511
|
})) : null,
|
511
512
|
// UndoButton Actions Configuration
|
512
513
|
undoButton && undoButton.show && !undoButton.isFooter &&
|
513
514
|
undoButton.actions && undoButton.actions.constructor === Array && undoButton.actions.length > 0 ? (undoButton.actions.map(function (btn, idx) {
|
514
|
-
return seconds > 0 || (btn.timer !== undefined) ? (react_1.default.createElement("a", __assign({ className: btn.class ? btn.class : 'belt-action' + ' ' + (idx === 0 ? 'is-primary' : '') + (btn.disabled === true ? ' is-disabled' : ' button outline button-undo'), href: "#", "data-testid": "undo-button-".concat(btn.action), key: idx }, (btn.disabled === true ? { onClick: function (event) { event.preventDefault(); } } : { onClick: function (event) { return actionRequestHandler(event, 'undo-button', btn.action); } })),
|
515
|
+
return seconds > 0 || (btn.timer !== undefined) ? (react_1.default.createElement("a", __assign({ className: btn.class ? btn.class : 'belt-action' + ' ' + (idx === 0 ? 'is-primary' : '') + (btn.disabled === true ? ' is-disabled' : ' em-button outline button-undo'), href: "#", "data-testid": "undo-button-".concat(btn.action), key: idx }, (btn.disabled === true ? { onClick: function (event) { event.preventDefault(); } } : { onClick: function (event) { return actionRequestHandler(event, 'undo-button', btn.action); } })),
|
515
516
|
react_1.default.createElement("div", { className: "belt-icon" }, btn.icon ? btn.icon : ''),
|
516
517
|
react_1.default.createElement("span", { "data-testid": "undo-button-text" }, btn.label ? ("".concat(btn.label, " ").concat(btn.timer !== undefined && btn.timer.constructor === Number && seconds > 0 ? ("in ".concat(seconds, "s")) : '')) : ''))) : null;
|
517
518
|
})) : null)),
|
@@ -636,13 +637,13 @@ var MenuBar = function (_a) {
|
|
636
637
|
react_1.default.createElement("div", { className: "em-card-footer" },
|
637
638
|
buttonFooter && buttonFooter.show && buttonFooter.actions.length > 0 &&
|
638
639
|
react_1.default.createElement("div", { className: buttonFooter.className }, buttonFooter.actions.map(function (btn, idx) { return (btn.show &&
|
639
|
-
react_1.default.createElement("a", __assign({ className: 'button ' + btn.className, href: "#", key: idx }, (btn.disabled === true ? { onClick: function (event) { event.preventDefault(); } } : { onClick: function (event) { return actionRequestHandler(event, 'button', btn.action); } }), { "data-testid": btn.id && btn.id.constructor === String ? btn.id : 'default-button-footer' }),
|
640
|
+
react_1.default.createElement("a", __assign({ className: 'em-button ' + btn.className, href: "#", key: idx }, (btn.disabled === true ? { onClick: function (event) { event.preventDefault(); } } : { onClick: function (event) { return actionRequestHandler(event, 'button', btn.action); } }), { "data-testid": btn.id && btn.id.constructor === String ? btn.id : 'default-button-footer' }),
|
640
641
|
react_1.default.createElement("div", { className: "icon" }, btn.icon ? btn.icon : ''),
|
641
642
|
react_1.default.createElement("span", { "data-testid": 'button-action-' + btn.action }, btn.label ? btn.label : ''))); })),
|
642
643
|
// UndoButton Actions Configuration
|
643
644
|
undoButton && undoButton.show && undoButton.isFooter &&
|
644
645
|
undoButton.actions && undoButton.actions.constructor === Array && undoButton.actions.length > 0 ? (undoButton.actions.map(function (btn, idx) {
|
645
|
-
return seconds > 0 || (btn.timer !== undefined) ? (react_1.default.createElement("a", __assign({ className: btn.class ? btn.class : 'button
|
646
|
+
return seconds > 0 || (btn.timer !== undefined) ? (react_1.default.createElement("a", __assign({ className: btn.class ? btn.class : 'em-button ' + ' ' + (idx === 0 ? 'disabled' : 'outline button-undo') + (btn.disabled === true ? ' is-disabled button-undo' : ''), href: "#", "data-testid": "undo-button-".concat(btn.action), key: idx }, (btn.disabled === true ? { onClick: function (event) { event.preventDefault(); } } : { onClick: function (event) { return actionRequestHandler(event, 'undo-button', btn.action); } })),
|
646
647
|
react_1.default.createElement("div", { className: "belt-icon" }, btn.icon ? btn.icon : ''),
|
647
648
|
react_1.default.createElement("span", { "data-testid": "undo-button-text" }, btn.label ? ("".concat(btn.label, " ").concat(btn.timer !== undefined && btn.timer.constructor === Number && seconds > 0 ? ("in ".concat(seconds, "s")) : '')) : ''))) : null;
|
648
649
|
})) : null)));
|
package/src/main/MenuBar.tsx
CHANGED
@@ -606,22 +606,24 @@ const MenuBar: React.FunctionComponent<IMenuBarProps> = ({ config, info, button,
|
|
606
606
|
mainButton && mainButton.show ? (
|
607
607
|
mainButton.actions && mainButton.actions.constructor === Array && mainButton.actions.length > 1 ? (
|
608
608
|
<Fragment>
|
609
|
-
<
|
610
|
-
<
|
611
|
-
|
612
|
-
|
613
|
-
|
614
|
-
|
615
|
-
|
616
|
-
|
617
|
-
|
618
|
-
|
619
|
-
|
620
|
-
|
621
|
-
|
622
|
-
|
623
|
-
|
624
|
-
|
609
|
+
<div className="em-dropdown">
|
610
|
+
<a className="em-button belt-action-main" id="main-button" href="#" onClick={event => popoverRequestHandler(event, 'main-button')}>
|
611
|
+
<div className="belt-icon">{mainButton.icon ? mainButton.icon : ''}</div>
|
612
|
+
<span>{mainButton.label ? mainButton.label : 'File a Request'}</span>
|
613
|
+
</a>
|
614
|
+
<Popover
|
615
|
+
id="mainButtonPopover"
|
616
|
+
open={Boolean(mainButtonPopover)}
|
617
|
+
onClick={event => popoverRequestHandler(event, 'main-button')}
|
618
|
+
className={Boolean(dropdownPopover) ? 'open-popover' : ''}
|
619
|
+
>
|
620
|
+
<div className="popover em-popover-list">
|
621
|
+
{mainButton.actions.map((btn: any, idx: number) =>
|
622
|
+
<a href="#" key={idx} onClick={event => actionRequestHandler(event, 'main-button', btn.action)}>{btn.label}</a>
|
623
|
+
)}
|
624
|
+
</div>
|
625
|
+
</Popover>
|
626
|
+
</div>
|
625
627
|
</Fragment>
|
626
628
|
) : mainButton.actions && mainButton.actions.constructor === Array && mainButton.actions.length === 1 ? (
|
627
629
|
mainButton.actions.map((btn: any, idx: number) => {
|
@@ -642,7 +644,7 @@ const MenuBar: React.FunctionComponent<IMenuBarProps> = ({ config, info, button,
|
|
642
644
|
button.actions && button.actions.constructor === Array && button.actions.length > 0 ? (
|
643
645
|
button.actions.map((btn: any, idx: number) => {
|
644
646
|
return (
|
645
|
-
<a className={btn.class ? btn.class : 'belt-action' + ' ' + (idx === 0 ? 'is-primary' : '')} href="#" key={idx} onClick={event => actionRequestHandler(event, 'button', btn.action)} data-testid="menubar-button">
|
647
|
+
<a className={btn.class ? btn.class : ' belt-action' + ' ' + (idx === 0 ? 'is-primary' : '')} href="#" key={idx} onClick={event => actionRequestHandler(event, 'button', btn.action)} data-testid="menubar-button">
|
646
648
|
<div className="belt-icon belt-buttons">{btn.icon ? btn.icon : ''}</div>
|
647
649
|
<span data-testid={'button-action-' + btn.action}>{btn.label ? btn.label : ''}</span>
|
648
650
|
</a>
|
@@ -658,7 +660,7 @@ const MenuBar: React.FunctionComponent<IMenuBarProps> = ({ config, info, button,
|
|
658
660
|
undoButton.actions.map((btn: any, idx: number) => {
|
659
661
|
return seconds > 0 || (btn.timer !== undefined) ? (
|
660
662
|
<a
|
661
|
-
className={btn.class ? btn.class : 'belt-action' + ' ' + (idx === 0 ? 'is-primary' : '') + (btn.disabled === true ? ' is-disabled' : ' button outline button-undo')}
|
663
|
+
className={btn.class ? btn.class : 'belt-action' + ' ' + (idx === 0 ? 'is-primary' : '') + (btn.disabled === true ? ' is-disabled' : ' em-button outline button-undo')}
|
662
664
|
href="#"
|
663
665
|
data-testid={`undo-button-${btn.action}`}
|
664
666
|
key={idx}
|
@@ -1025,7 +1027,7 @@ const MenuBar: React.FunctionComponent<IMenuBarProps> = ({ config, info, button,
|
|
1025
1027
|
{
|
1026
1028
|
buttonFooter.actions.map((btn: any, idx: number) => (
|
1027
1029
|
btn.show &&
|
1028
|
-
<a className={'button ' + btn.className}
|
1030
|
+
<a className={'em-button ' + btn.className}
|
1029
1031
|
href="#" key={idx}
|
1030
1032
|
{...(btn.disabled === true ? { onClick: event => { event.preventDefault() } } : { onClick: event => actionRequestHandler(event, 'button', btn.action) })}
|
1031
1033
|
data-testid={btn.id && btn.id.constructor === String ? btn.id : 'default-button-footer'}
|
@@ -1048,7 +1050,7 @@ const MenuBar: React.FunctionComponent<IMenuBarProps> = ({ config, info, button,
|
|
1048
1050
|
return seconds > 0 || (btn.timer !== undefined) ? (
|
1049
1051
|
|
1050
1052
|
<a
|
1051
|
-
className={btn.class ? btn.class : 'button
|
1053
|
+
className={btn.class ? btn.class : 'em-button ' + ' ' + (idx === 0 ? 'disabled' : 'outline button-undo') + (btn.disabled === true ? ' is-disabled button-undo' : '')}
|
1052
1054
|
href="#"
|
1053
1055
|
data-testid={`undo-button-${btn.action}`}
|
1054
1056
|
key={idx}
|
@@ -80,14 +80,13 @@ var TestMenuBar = function () {
|
|
80
80
|
show: true,
|
81
81
|
actions: [
|
82
82
|
{
|
83
|
-
class: 'button',
|
83
|
+
class: 'em-button',
|
84
84
|
label: "Submit",
|
85
85
|
action: "readytosubmit",
|
86
86
|
icon: Asset_1.SVG_SUBMIT
|
87
87
|
}
|
88
88
|
]
|
89
89
|
},
|
90
|
-
info: null
|
91
90
|
},
|
92
91
|
menubar: {
|
93
92
|
config: {
|
@@ -96,11 +95,38 @@ var TestMenuBar = function () {
|
|
96
95
|
showInfo: true,
|
97
96
|
iconType: ['check', "back", 'standard']
|
98
97
|
},
|
98
|
+
mainButton: {
|
99
|
+
show: true,
|
100
|
+
label: 'File a Request',
|
101
|
+
icon: Asset_1.SVG_ADD,
|
102
|
+
actions: [
|
103
|
+
{
|
104
|
+
label: "File Leave",
|
105
|
+
action: "leave",
|
106
|
+
icon: Asset_1.SVG_SUBMIT
|
107
|
+
},
|
108
|
+
{
|
109
|
+
label: "File Overtime",
|
110
|
+
action: "overtime",
|
111
|
+
icon: Asset_1.SVG_SUBMIT
|
112
|
+
},
|
113
|
+
{
|
114
|
+
label: "File Toil",
|
115
|
+
action: "toil",
|
116
|
+
icon: Asset_1.SVG_SUBMIT
|
117
|
+
},
|
118
|
+
{
|
119
|
+
label: "File Amendment",
|
120
|
+
action: "amendment",
|
121
|
+
icon: Asset_1.SVG_SUBMIT
|
122
|
+
}
|
123
|
+
]
|
124
|
+
},
|
99
125
|
button: {
|
100
126
|
show: true,
|
101
127
|
actions: [
|
102
128
|
{
|
103
|
-
class: 'button',
|
129
|
+
class: 'em-button',
|
104
130
|
label: "Submit",
|
105
131
|
action: "readytosubmit",
|
106
132
|
icon: Asset_1.SVG_SUBMIT
|
@@ -111,7 +137,7 @@ var TestMenuBar = function () {
|
|
111
137
|
show: true,
|
112
138
|
actions: [
|
113
139
|
{
|
114
|
-
class: 'button',
|
140
|
+
class: 'em-button',
|
115
141
|
label: "Submit",
|
116
142
|
action: "footer-submit",
|
117
143
|
icon: Asset_1.SVG_SUBMIT,
|
@@ -171,7 +197,7 @@ var TestMenuBar = function () {
|
|
171
197
|
isFooter: true,
|
172
198
|
actions: [
|
173
199
|
{
|
174
|
-
class: 'button disabled',
|
200
|
+
class: 'em-button disabled',
|
175
201
|
show: true,
|
176
202
|
label: "Submit",
|
177
203
|
action: "submit",
|
@@ -261,14 +287,7 @@ var TestMenuBar = function () {
|
|
261
287
|
console.log(action, data, 'action modal');
|
262
288
|
switch (action) {
|
263
289
|
case 'icon':
|
264
|
-
|
265
|
-
case 'close':
|
266
|
-
modal.show = false;
|
267
|
-
break;
|
268
|
-
case 'info':
|
269
|
-
modal.info = 'Hello menubar info';
|
270
|
-
break;
|
271
|
-
}
|
290
|
+
modal.show = false;
|
272
291
|
break;
|
273
292
|
default: break;
|
274
293
|
}
|
@@ -277,7 +296,7 @@ var TestMenuBar = function () {
|
|
277
296
|
};
|
278
297
|
var View = function () {
|
279
298
|
return (react_1.default.createElement(react_1.default.Fragment, null,
|
280
|
-
react_1.default.createElement(main_1.MenuBar, { config: menubar.config, button: menubar.button, pagination: menubar.pagination, pivot: menubar.pivot, dropdown: menubar.dropdown, search: menubar.search, undoButton: menubar.undoButton, buttonFooter: menubar.buttonFooter, check: menubar.check, info: menubar.info, getActions: function (action, data) { return getActions(action, data); } },
|
299
|
+
react_1.default.createElement(main_1.MenuBar, { config: menubar.config, button: menubar.button, mainButton: menubar.mainButton, pagination: menubar.pagination, pivot: menubar.pivot, dropdown: menubar.dropdown, search: menubar.search, undoButton: menubar.undoButton, buttonFooter: menubar.buttonFooter, check: menubar.check, info: menubar.info, getActions: function (action, data) { return getActions(action, data); } },
|
281
300
|
react_1.default.createElement("h2", null, "CHILDREN")),
|
282
301
|
react_1.default.createElement(main_1.MenuBar, { config: menubar.config, dropdown: {
|
283
302
|
show: true,
|
@@ -302,10 +321,10 @@ var TestMenuBar = function () {
|
|
302
321
|
value: "view-shift-schedule", // string optional
|
303
322
|
},
|
304
323
|
]
|
305
|
-
},
|
324
|
+
}, getActions: function (action, data) { return getActions(action, data); } },
|
306
325
|
react_1.default.createElement("h2", null, "CHILDREN AGAIN")),
|
307
326
|
react_1.default.createElement("div", null,
|
308
|
-
react_1.default.createElement("button", { className: "button", onClick: function (event) { return displayModal(event); } },
|
327
|
+
react_1.default.createElement("button", { className: "em-button", onClick: function (event) { return displayModal(event); } },
|
309
328
|
react_1.default.createElement("span", null, "DISPLAY MODAL"))),
|
310
329
|
react_1.default.createElement(main_1.Modal, __assign({}, modal, { getActions: function (action, data) { return getModalActions(action, data); } }),
|
311
330
|
react_1.default.createElement("div", { className: "card-grid card-grid-multiple" },
|
@@ -55,14 +55,13 @@ const TestMenuBar = () => {
|
|
55
55
|
show: true,
|
56
56
|
actions: [
|
57
57
|
{
|
58
|
-
class: 'button',
|
58
|
+
class: 'em-button',
|
59
59
|
label: "Submit",
|
60
60
|
action: "readytosubmit", // string optional
|
61
61
|
icon: SVG_SUBMIT
|
62
62
|
}
|
63
63
|
]
|
64
64
|
},
|
65
|
-
info: null
|
66
65
|
},
|
67
66
|
menubar: {
|
68
67
|
config: {
|
@@ -71,11 +70,44 @@ const TestMenuBar = () => {
|
|
71
70
|
showInfo: true,
|
72
71
|
iconType: ['check', "back", 'standard']
|
73
72
|
},
|
73
|
+
|
74
|
+
mainButton: {
|
75
|
+
show: true,
|
76
|
+
label: 'File a Request',
|
77
|
+
icon: SVG_ADD,
|
78
|
+
actions: [
|
79
|
+
{
|
80
|
+
|
81
|
+
label: "File Leave",
|
82
|
+
action: "leave", // string optional
|
83
|
+
icon: SVG_SUBMIT
|
84
|
+
},
|
85
|
+
{
|
86
|
+
label: "File Overtime",
|
87
|
+
action: "overtime", // string optional
|
88
|
+
icon: SVG_SUBMIT
|
89
|
+
},
|
90
|
+
|
91
|
+
{
|
92
|
+
label: "File Toil",
|
93
|
+
action: "toil", // string optional
|
94
|
+
icon: SVG_SUBMIT
|
95
|
+
},
|
96
|
+
|
97
|
+
{
|
98
|
+
label: "File Amendment",
|
99
|
+
action: "amendment", // string optional
|
100
|
+
icon: SVG_SUBMIT
|
101
|
+
}
|
102
|
+
]
|
103
|
+
},
|
104
|
+
|
105
|
+
|
74
106
|
button: {
|
75
107
|
show: true,
|
76
108
|
actions: [
|
77
109
|
{
|
78
|
-
class: 'button',
|
110
|
+
class: 'em-button',
|
79
111
|
label: "Submit",
|
80
112
|
action: "readytosubmit", // string optional
|
81
113
|
icon: SVG_SUBMIT
|
@@ -86,7 +118,7 @@ const TestMenuBar = () => {
|
|
86
118
|
show: true,
|
87
119
|
actions: [
|
88
120
|
{
|
89
|
-
class: 'button',
|
121
|
+
class: 'em-button',
|
90
122
|
label: "Submit",
|
91
123
|
action: "footer-submit", // string optional
|
92
124
|
icon: SVG_SUBMIT,
|
@@ -146,7 +178,7 @@ const TestMenuBar = () => {
|
|
146
178
|
isFooter: true,
|
147
179
|
actions: [
|
148
180
|
{
|
149
|
-
class: 'button disabled',
|
181
|
+
class: 'em-button disabled',
|
150
182
|
show: true,
|
151
183
|
label: "Submit",
|
152
184
|
action: "submit", // string optional
|
@@ -170,7 +202,7 @@ const TestMenuBar = () => {
|
|
170
202
|
info: null
|
171
203
|
}
|
172
204
|
|
173
|
-
|
205
|
+
|
174
206
|
|
175
207
|
})
|
176
208
|
|
@@ -211,31 +243,25 @@ const TestMenuBar = () => {
|
|
211
243
|
break;
|
212
244
|
|
213
245
|
case 'icon':
|
214
|
-
|
215
|
-
|
216
|
-
|
217
|
-
|
218
|
-
|
219
|
-
|
220
|
-
|
221
|
-
|
222
|
-
|
223
|
-
|
224
|
-
|
225
|
-
|
226
|
-
|
227
|
-
|
228
|
-
|
229
|
-
|
230
|
-
|
231
|
-
|
232
|
-
|
233
|
-
break;
|
234
|
-
}
|
235
|
-
|
236
|
-
|
237
|
-
|
238
|
-
|
246
|
+
// menubar.info = '<p>In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before the final copy is</p>';
|
247
|
+
const infoMenuBar = {
|
248
|
+
infoDetails: {
|
249
|
+
"companyPolicy": "<p><strong>Certifying Daily Time Records (DTR) </strong></p>\n<p>All Employees are expected to certify all DTRs covering a pay period as true, correct, accurate and final that will serve as basis to compute their pay.</p>\n<p><strong>Failure</strong> to certify DTRs shall result to an Auto-Certification at the end of the pay cutoff. Uncertified DTRs will be deemed true, correct, accurate and final, except for Absences incurred on the day of the cutoff itself, either on the 10th or 26th of the month.</p>\n<p>For these absences, either of the following will apply:</p>\n<p>1. The employee is given until the 12th or the 27th to amend the DTR and seek approval;</p>\n<p>2. The Timekeeping & Benefits department will verify the details of the absence incurred and amend the DTR appropriately.</p>\n<p>The Company has two (2) pay cutoff periods:</p>\n<p>1. Payroll for the 15th -- 26th of the previous month to the 10th of the current month 2. Payroll for the 30th -- 11th to the 25th of the current month.</p>\n<p><strong>Clock In</strong></p>\n<p>When an employee clocks into work, the Company’s online system shall provide the applicable status:</p>\n<p><strong> ON TIME</strong> - Clock In before the start of shift and/ or before the grace period (if any) ends</p>\n<p>TARDY - Clock In within the first four (4) hours after the shift has started</p>\n<p>ABSENT (1ST HALF and TARDY) - Clock In beyond the first four (4) hours after the shift has started will be tagged as Tardy. The first four (4) hours after the shift has started will be tagged as Absent - 1st Half.</p>\n<p><strong> Tardiness</strong></p>\n<p>1. Failure to come ON TIME six (6) times or accumulation of at least 60 minutes of TARDINESS (whichever comes first) within the 11th of the current month to the 10th of the following month, shall constitute an offense of TARDINESS.</p>\n<p>Employees are expected to time in upon arriving at their respective office. However, due to unforeseen circumstances preventing the employee to timely Clock In within the Company’s online system, employees are allowed to amend their Clock In time, subject to the approval of their respective Department Head / Immediate Superior. Amendments to Clock In within the Company’s online system can be done on or before the payroll cutoff.</p>\n<p>2. Employee reporting to work after the official start of the assigned work shift and, if any, after the grace period. Applicable only to Time-bounded Work Shifts.</p>\n<p>Tardiness computed in payroll is equivalent to length of time computed as the difference between the clock in time and the grace period. If no Grace Period allowed, it will be the difference between the clock in time and the start of the shift.</p>\n<p>Example:</p>\n<p>Start Time - 6:00 AM</p>\n<p>Grace Period - 6:10 AM (10 minutes from the start of the shift)</p>\n<p>Clock In - 6:15 AM</p>\n<p>Tardiness = 5 minutes (time in excess of the end of the Grace Period)</p>\n<p>Computed Tardiness will be the basis of payroll deductions.</p>\n<p><strong>Clock Out</strong></p>\n<p>When an employee clocks out of work, the Company’s online system shall provide the applicable status:</p>\n<p><strong> SHIFT ENDED</strong> - Clock out on or beyond the end of shift will be tagged as Shift Ended</p>\n<p><strong>UNDERTIME</strong> - Clock out before the expected end of shift will tag the talent as Undertime</p>\n<p><strong>ABSENT (2ND HALF and Undertime)</strong> - Clock out within the first four (4) hours after the shift has started will be tagged as Undertime. The last four (4) hours before the shift ends will be tagged as Absent - 2nd Half.</p>\n<p><strong> Undertime </strong></p>\n<p>An employee leaving work earlier than the required end of a Work Shift. Undertime computed in payroll is equivalent to length of time computed as the difference between the end of shift and the clock out time.</p>\n<p>Example:</p>\n<p>End Time - 3:00 PM</p>\n<p>Clock In - 2:55 PM</p>\n<p>Undertime = 5 minutes (time out short of the end of the Grace Period)</p>\n<p>Computed Undertime will be the basis of payroll deductions.</p>",
|
250
|
+
"systemPolicy": "<p><strong>Certify </strong></p>\n<p>1. Certification of DTR can only be done<strong> within the cutoff. </strong></p>\n<p>2. You cannot certify an <strong>incomplete DTR, current day</strong> and <strong>an ongoing shift. </strong></p>\n<p>3. Failure to certify DTRs shall result to an Auto-Certification at the end of the pay cutoff.</p>\n<p><strong>What you can do:</strong></p>\n<p>1. If with time logged (whether complete or incomplete), allows <strong>DTR amendment</strong> or <strong>Certify</strong>.</p>\n<p>2. If registered Absent, allows DTR amendment, File a Leave or Certify.</p>\n<p><strong>Amendment can be done in the following ways: </strong></p>\n<p>1. Time Recorder - Previous Shift</p>\n<p>2. Requests - File Request / DTR amendment</p>\n<p>3. Express Button - Amendment</p>\n<p><strong>Filing of leave can be done in the following ways:</strong></p>\n<p>1. Time Recorder - Previous Shift</p>\n<p>2. Requests - File Request / File Leave</p>\n<p>3. Express Button - File Leave</p>\n<p><strong>Amend DTR</strong></p>\n<p>1. You cannot amend an<strong> Ongoing / Current Shift.</strong> Filing of DTR amendment is allowed the next day after you have Clocked In.</p>\n<p>2. Amendments are disallowed by the end of the cutoff (10th or 25th).</p>\n<p>3. You are expected to amend your DTR within <strong>twenty-four (24) hours upon return to work</strong> in the succeeding Work Shift.</p>\n<p>4. You can only adjust your CLOCK IN DATE one (1) day prior your Chosen Work Date.</p>\n<p><strong>E.g</strong></p>\n<p>Work Date: November 08, 2019 - 12:00am to 09:00am</p>\n<p>Clock in Date: November 07, 2019 Clock In Time:11:00pm</p>\n<p>Clock out Date: November 08, 2019 Clock out Time:09:00am</p>\n<p>5. You can only adjust your CLOCK OUT DATE one (1) day after your Chosen Work Date.</p>\n<p><strong>E.g</strong></p>\n<p>Work Date: November 08, 2019 - 8:00am to 05:00pm</p>\n<p>Clock in Date: November 08, 2019 Clock In Time:08:00am</p>\n<p>Clock out Date: November 09, 2019 Clock out Time:02:00am</p>\n<p>6. DTR amendment request can be canceled / edited provided the request is still pending.</p>\n<p>7. DTR amendment requests that have already passed or requests that have already been denied cannot be canceled.</p>\n<p>8. DTRs that have been previously certified <strong>CANNOT</strong> be amended.</p>\n<p><strong> File Leave </strong></p>\n<p>1. Filing of Sick / Emergency Leave is allowed the next day after you have Clocked In.</p>\n<p>2. You cannot file a backdated Vacation Leave.</p>\n<p>3. You cannot file a future - dated Sick / Emergency Leave.</p>\n<p>4. The employee is expected to file a Sick or Emergency Leave within the Company online system within <strong>twenty-four (24) hours upon return to work</strong> in the succeeding Work Shift.</p>\n<p>5. Leave request can be edited provided the request is still pending.</p>\n<p>6. Approved leave request can be canceled before the effectivity date.</p>\n<p>7. Reporting to work on a day with a pre-approved SIL.</p>\n<p>- Will cancel the leave</p>\n<p>- Credit back the approved SIL to the Leave balance</p>\n<p>- Record the DTR for the day</p>",
|
251
|
+
"instruction": "<p><strong>What you can do:</strong></p>\n<p>1. If with time logged (whether complete or incomplete), allows DTR amendment or Certify.</p>\n<p>2. If without time logged, allows DTR Amemdment.</p>\n<p>3. If registered Absent, allows DTR amendment, File a Leave or Certify.</p>\n<p><strong>Amendment can be done in the following ways:</strong></p>\n<p>1. Time Recorder - Previous Shift</p>\n<p>2. Requests - File Request / DTR amendment</p>\n<p>3. Express Button - Amendment</p>\n<p><strong>Filing of leave can be done in the following ways:</strong></p>\n<p>1. Time Recorder - Previous Shift</p>\n<p>2. Requests - File Request / File Leave</p>\n<p>3. Express Button - File Leave</p>"
|
252
|
+
},
|
253
|
+
listRow: [
|
254
|
+
"COMPANY POLICY",
|
255
|
+
"SYSTEM POLICY",
|
256
|
+
"INSTRUCTION"
|
257
|
+
],
|
258
|
+
"loaded": false,
|
259
|
+
"cardIconDesc": false
|
260
|
+
}
|
261
|
+
|
262
|
+
menubar.info = infoMenuBar
|
263
|
+
|
264
|
+
|
239
265
|
break;
|
240
266
|
|
241
267
|
default: break;
|
@@ -243,14 +269,14 @@ const TestMenuBar = () => {
|
|
243
269
|
statedata.menubar = menubar;
|
244
270
|
statedata.modal = modal;
|
245
271
|
|
246
|
-
setStateData({
|
272
|
+
setStateData({...statedata});
|
247
273
|
}
|
248
274
|
|
249
275
|
const displayModal = (event) => {
|
250
276
|
event.preventDefault();
|
251
277
|
modal.show = true;
|
252
278
|
statedata.modal = modal
|
253
|
-
setStateData({
|
279
|
+
setStateData({...statedata});
|
254
280
|
}
|
255
281
|
|
256
282
|
const getModalActions = (action, data) => {
|
@@ -258,24 +284,13 @@ const TestMenuBar = () => {
|
|
258
284
|
console.log(action, data, 'action modal');
|
259
285
|
switch (action) {
|
260
286
|
case 'icon':
|
261
|
-
|
262
|
-
switch (data) {
|
263
|
-
case 'close':
|
264
|
-
modal.show = false;
|
265
|
-
break;
|
266
|
-
|
267
|
-
case 'info':
|
268
|
-
modal.info = 'Hello menubar info';
|
269
|
-
break;
|
270
|
-
}
|
271
|
-
|
272
|
-
|
287
|
+
modal.show = false;
|
273
288
|
break;
|
274
289
|
default: break;
|
275
290
|
}
|
276
291
|
|
277
292
|
statedata.modal = modal
|
278
|
-
setStateData({
|
293
|
+
setStateData({...statedata});
|
279
294
|
}
|
280
295
|
|
281
296
|
const View = () => {
|
@@ -284,6 +299,7 @@ const TestMenuBar = () => {
|
|
284
299
|
<MenuBar
|
285
300
|
config={menubar.config}
|
286
301
|
button={menubar.button}
|
302
|
+
mainButton={menubar.mainButton }
|
287
303
|
pagination={menubar.pagination}
|
288
304
|
pivot={menubar.pivot}
|
289
305
|
dropdown={menubar.dropdown}
|
@@ -327,13 +343,12 @@ const TestMenuBar = () => {
|
|
327
343
|
},
|
328
344
|
]
|
329
345
|
}}
|
330
|
-
info={menubar.info}
|
331
346
|
getActions={(action, data) => getActions(action, data)}
|
332
347
|
>
|
333
348
|
<h2>CHILDREN AGAIN</h2>
|
334
349
|
</MenuBar>
|
335
350
|
<div>
|
336
|
-
<button className="button" onClick={event => displayModal(event)}>
|
351
|
+
<button className="em-button" onClick={event => displayModal(event)}>
|
337
352
|
<span>
|
338
353
|
DISPLAY MODAL
|
339
354
|
</span>
|