awing-library 2.1.5 → 2.1.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/ACM-AXN/Notifications/Constant.js +1 -1
- package/lib/ACM-AXN/Notifications/NotificationDetail/HeaderInfo/ButtonTabs.js +8 -4
- package/lib/ACM-AXN/Notifications/NotificationDetail/HeaderInfo/MenuNotification.js +1 -1
- package/lib/ACM-AXN/Notifications/NotificationDetail/HeaderInfo/index.d.ts +1 -0
- package/lib/ACM-AXN/Notifications/NotificationDetail/HeaderInfo/index.js +6 -7
- package/lib/ACM-AXN/Notifications/NotificationDetail/NotificationList/NotificationEmpty.js +2 -2
- package/lib/ACM-AXN/Notifications/NotificationDetail/NotificationList/NotificationItem/NotificationAvatar.js +2 -2
- package/lib/ACM-AXN/Notifications/NotificationDetail/NotificationList/NotificationItem/NotificationContent.js +7 -4
- package/lib/ACM-AXN/Notifications/NotificationDetail/NotificationList/NotificationItem/index.js +2 -2
- package/lib/ACM-AXN/Notifications/NotificationDetail/NotificationList/index.js +1 -1
- package/lib/ACM-AXN/Notifications/NotificationDetail/index.d.ts +5 -2
- package/lib/ACM-AXN/Notifications/NotificationDetail/index.js +11 -5
- package/lib/ACM-AXN/Notifications/NotificationPopover/Container.js +1 -1
- package/lib/ACM-AXN/Page/CreateOrEdit/Utils.d.ts +1 -1
- package/lib/translate/en/translation.json +2 -0
- package/lib/translate/vi/translation.json +2 -0
- package/package.json +1 -1
|
@@ -14,8 +14,10 @@ var ButtonTabs = function (props) {
|
|
|
14
14
|
};
|
|
15
15
|
return ((0, jsx_runtime_1.jsxs)(material_1.Box, { mt: 2, component: "div", children: [(0, jsx_runtime_1.jsx)(material_1.Button, { onClick: handleUpdateTabs, sx: [
|
|
16
16
|
{
|
|
17
|
-
|
|
17
|
+
fontSize: '14px',
|
|
18
|
+
fontWeight: 700,
|
|
18
19
|
borderRadius: '24px',
|
|
20
|
+
textTransform: 'none',
|
|
19
21
|
color: tabActive === Constant_1.Constants.ALL ? '#FFF' : '#000',
|
|
20
22
|
backgroundColor: tabActive === Constant_1.Constants.ALL ? '#ED1D25' : 'inherit',
|
|
21
23
|
},
|
|
@@ -26,11 +28,13 @@ var ButtonTabs = function (props) {
|
|
|
26
28
|
: 'inherit',
|
|
27
29
|
},
|
|
28
30
|
},
|
|
29
|
-
], "data-tabs": Constant_1.Constants.ALL, children: t('
|
|
31
|
+
], "data-tabs": Constant_1.Constants.ALL, children: t('Notification.All') }), (0, jsx_runtime_1.jsx)(material_1.Button, { onClick: handleUpdateTabs, "data-tabs": Constant_1.Constants.UNREAD, sx: [
|
|
30
32
|
{
|
|
33
|
+
fontSize: '14px',
|
|
31
34
|
marginLeft: '8px',
|
|
32
|
-
fontWeight:
|
|
35
|
+
fontWeight: 700,
|
|
33
36
|
borderRadius: '24px',
|
|
37
|
+
textTransform: 'none',
|
|
34
38
|
color: tabActive === Constant_1.Constants.UNREAD ? '#FFF' : '#000',
|
|
35
39
|
backgroundColor: tabActive === Constant_1.Constants.UNREAD
|
|
36
40
|
? '#ED1D25'
|
|
@@ -43,6 +47,6 @@ var ButtonTabs = function (props) {
|
|
|
43
47
|
: 'inherit',
|
|
44
48
|
},
|
|
45
49
|
},
|
|
46
|
-
], children: t('
|
|
50
|
+
], children: t('Notification.Unread') })] }));
|
|
47
51
|
};
|
|
48
52
|
exports.default = ButtonTabs;
|
|
@@ -73,6 +73,6 @@ var MenuNotification = function (props) {
|
|
|
73
73
|
}, children: menuData().map(function (item) { return ((0, jsx_runtime_1.jsxs)(material_1.MenuItem, { onClick: selectMenuItem, "data-value": item.value, children: [(0, jsx_runtime_1.jsx)(material_1.Box, { mr: 2, style: {
|
|
74
74
|
display: 'flex',
|
|
75
75
|
justifyContent: 'center',
|
|
76
|
-
}, children: (item === null || item === void 0 ? void 0 : item.icon) && ((0, jsx_runtime_1.jsx)("img", { alt: "", src: item.icon, style: { width: '20px', height: '20px' } })) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "inherit", children: item.title })] }, item.id)); }) })] }));
|
|
76
|
+
}, children: (item === null || item === void 0 ? void 0 : item.icon) && ((0, jsx_runtime_1.jsx)("img", { alt: "", src: item.icon, style: { width: '20px', height: '20px' } })) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "inherit", sx: { fontSize: '15px', fontWeight: 400 }, children: item.title })] }, item.id)); }) })] }));
|
|
77
77
|
};
|
|
78
78
|
exports.default = react_1.default.memo(MenuNotification);
|
|
@@ -20,11 +20,15 @@ var Router_1 = require("../../../../AWING/Router");
|
|
|
20
20
|
var HeaderInfo = function (props) {
|
|
21
21
|
var navigate = (0, Router_1.useNavigate)();
|
|
22
22
|
var t = (0, react_i18next_1.useTranslation)().t;
|
|
23
|
-
var valueFilter = props.valueFilter, _a = props.onValueFilter, onValueFilter = _a === void 0 ? function () { return null; } : _a, _b = props.onUpdateStatus, onUpdateStatus = _b === void 0 ? function () { return null; } : _b;
|
|
23
|
+
var valueFilter = props.valueFilter, _a = props.onValueFilter, onValueFilter = _a === void 0 ? function () { return null; } : _a, _b = props.onUpdateStatus, onUpdateStatus = _b === void 0 ? function () { return null; } : _b, _c = props.onClosePopover, onClosePopover = _c === void 0 ? function () { return null; } : _c;
|
|
24
24
|
var handleUpdateMenuItem = function (value) {
|
|
25
25
|
if (value === Constant_1.Constants.SELECT_ALL) {
|
|
26
26
|
onUpdateStatus(Constant_1.Constants.ALL);
|
|
27
27
|
}
|
|
28
|
+
else if (value === Constant_1.Constants.NOTIFICATION_SETTING_SCREEN_PATH) {
|
|
29
|
+
navigate("".concat(value));
|
|
30
|
+
onClosePopover();
|
|
31
|
+
}
|
|
28
32
|
else {
|
|
29
33
|
// Chuyển đến trang tương ứng
|
|
30
34
|
navigate("".concat(value));
|
|
@@ -40,15 +44,10 @@ var HeaderInfo = function (props) {
|
|
|
40
44
|
display: 'flex',
|
|
41
45
|
flexDirection: 'row',
|
|
42
46
|
justifyContent: 'space-between',
|
|
43
|
-
}, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, {
|
|
44
|
-
fontWeight: '700',
|
|
45
|
-
fontSize: '1.5em',
|
|
46
|
-
}, children: t('Common.Notification') }), (0, jsx_runtime_1.jsx)(MenuNotification_1.default, { onUpdateMenuItem: handleUpdateMenuItem })] }), (0, jsx_runtime_1.jsx)(SearchBox_1.default, { variantPaper: "outlined", onSearch: handleKeyWordPassing, stylePaper: {
|
|
47
|
+
}, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { component: "h1", variant: "h5", color: "inherit", noWrap: true, fontWeight: 'bold', children: t('Common.Notification') }), (0, jsx_runtime_1.jsx)(MenuNotification_1.default, { onUpdateMenuItem: handleUpdateMenuItem })] }), (0, jsx_runtime_1.jsx)(SearchBox_1.default, { onSearch: handleKeyWordPassing, stylePaper: {
|
|
47
48
|
flex: 1,
|
|
48
49
|
width: 'auto',
|
|
49
50
|
maxWidth: '100%',
|
|
50
|
-
borderRadius: '24px',
|
|
51
|
-
padding: '2px 20px 2px 10px',
|
|
52
51
|
} }), (0, jsx_runtime_1.jsx)(ButtonTabs_1.default, { tabActive: valueFilter.tabs, onUpdateTabActive: handleUpdateTabActive })] }));
|
|
53
52
|
};
|
|
54
53
|
exports.default = HeaderInfo;
|
|
@@ -24,9 +24,9 @@ var NotificationEmpty = function (props) {
|
|
|
24
24
|
alignItems: 'center',
|
|
25
25
|
justifyContent: 'space-between',
|
|
26
26
|
}, children: [(0, jsx_runtime_1.jsx)("img", { src: (isSearch ? binoculars_svg_1.default : bell_svg_1.default), alt: isSearch ? 'iconBinoculars' : 'iconBell', style: { width: '80px', height: '80px' } }), (0, jsx_runtime_1.jsx)(material_1.Typography, { style: {
|
|
27
|
-
fontSize: '
|
|
27
|
+
fontSize: '20px',
|
|
28
28
|
color: '#65676B',
|
|
29
|
-
fontWeight:
|
|
29
|
+
fontWeight: 600,
|
|
30
30
|
marginTop: '10px',
|
|
31
31
|
textAlign: 'center',
|
|
32
32
|
}, children: isSearch
|
|
@@ -25,8 +25,8 @@ var material_1 = require("@mui/material");
|
|
|
25
25
|
var NotificationAvatar = function (props) {
|
|
26
26
|
var url = props.url, name = props.name;
|
|
27
27
|
var styleAvatar = {
|
|
28
|
-
width: '
|
|
29
|
-
height: '
|
|
28
|
+
width: '54px',
|
|
29
|
+
height: '54px',
|
|
30
30
|
border: '1px solid #0000001a',
|
|
31
31
|
};
|
|
32
32
|
if (!url) {
|
|
@@ -29,23 +29,26 @@ var NotificationContent = function (props) {
|
|
|
29
29
|
textOverflow: 'ellipsis',
|
|
30
30
|
display: '-webkit-box',
|
|
31
31
|
WebkitBoxOrient: 'vertical',
|
|
32
|
-
WebkitLineClamp:
|
|
32
|
+
WebkitLineClamp: 5,
|
|
33
33
|
margin: '0 0 2px 0',
|
|
34
34
|
lineHeight: 1.2,
|
|
35
|
-
fontSize: '
|
|
35
|
+
fontSize: '14px',
|
|
36
|
+
fontWeight: 400,
|
|
36
37
|
justifyContent: 'space-between',
|
|
37
38
|
},
|
|
38
39
|
{
|
|
39
40
|
'& h1, h2, h3, h4, h5, h6, p, span, b, strong, small, em, i, big': {
|
|
40
41
|
marginTop: 0,
|
|
41
42
|
marginBottom: 0,
|
|
42
|
-
fontSize: '
|
|
43
|
+
fontSize: '14px',
|
|
44
|
+
fontWeight: 400,
|
|
43
45
|
textAlign: 'justify',
|
|
44
46
|
},
|
|
45
47
|
'& a': {
|
|
46
48
|
color: '#1a0dab',
|
|
47
49
|
textDecoration: 'none',
|
|
48
|
-
fontSize: '
|
|
50
|
+
fontSize: '14px',
|
|
51
|
+
fontWeight: 400,
|
|
49
52
|
textAlign: 'justify',
|
|
50
53
|
},
|
|
51
54
|
},
|
package/lib/ACM-AXN/Notifications/NotificationDetail/NotificationList/NotificationItem/index.js
CHANGED
|
@@ -25,10 +25,10 @@ var NotificationItem = function (props) {
|
|
|
25
25
|
};
|
|
26
26
|
var handleClickNotification = function () {
|
|
27
27
|
navigate((0, Message_1.getFullDescription)(sagaTransactionType, t, fields).url);
|
|
28
|
-
status === Types_1.NotificationMessageStatus.
|
|
28
|
+
status === Types_1.NotificationMessageStatus.Unread &&
|
|
29
29
|
onUpdateStatus({ id: id, status: status });
|
|
30
30
|
};
|
|
31
|
-
var itemStatus = status === Types_1.NotificationMessageStatus.
|
|
31
|
+
var itemStatus = status === Types_1.NotificationMessageStatus.Unread;
|
|
32
32
|
return ((0, jsx_runtime_1.jsxs)(material_1.Box, { color: "inherit", onClick: handleClickNotification, sx: [
|
|
33
33
|
{
|
|
34
34
|
display: 'flex',
|
|
@@ -44,7 +44,7 @@ var NotificationList = function (props) {
|
|
|
44
44
|
var _c = (0, react_1.useState)(notificationMessage), notifications = _c[0], setNotifications = _c[1];
|
|
45
45
|
(0, react_1.useLayoutEffect)(function () {
|
|
46
46
|
setNotifications(valueFilter.tabs === Constant_1.Constants.UNREAD
|
|
47
|
-
? notificationMessage.filter(function (item) { return item.status === Types_1.NotificationMessageStatus.
|
|
47
|
+
? notificationMessage.filter(function (item) { return item.status === Types_1.NotificationMessageStatus.Unread; })
|
|
48
48
|
: notificationMessage);
|
|
49
49
|
}, [notificationMessage, valueFilter.tabs]);
|
|
50
50
|
if (!notifications.length && !isLoading) {
|
|
@@ -3,6 +3,9 @@
|
|
|
3
3
|
* @author dauquan1108@gmail.com on 11/27/2023.
|
|
4
4
|
*
|
|
5
5
|
**/
|
|
6
|
-
|
|
7
|
-
|
|
6
|
+
/// <reference types="react" />
|
|
7
|
+
interface NotificationDetailProps {
|
|
8
|
+
onClosePopover?: () => void;
|
|
9
|
+
}
|
|
10
|
+
declare const NotificationDetail: (props: NotificationDetailProps) => JSX.Element;
|
|
8
11
|
export default NotificationDetail;
|
|
@@ -61,8 +61,9 @@ var Constant_1 = require("../Constant");
|
|
|
61
61
|
var Hooks_1 = __importDefault(require("../Hooks"));
|
|
62
62
|
var NotificationList_1 = __importDefault(require("./NotificationList"));
|
|
63
63
|
var Types_1 = require("../Types");
|
|
64
|
-
var NotificationDetail = function () {
|
|
64
|
+
var NotificationDetail = function (props) {
|
|
65
65
|
var service = (0, Hooks_1.default)().service;
|
|
66
|
+
var onClosePopover = props.onClosePopover;
|
|
66
67
|
var _a = (0, react_1.useState)({
|
|
67
68
|
textSearch: '',
|
|
68
69
|
tabs: Constant_1.Constants.ALL,
|
|
@@ -71,6 +72,7 @@ var NotificationDetail = function () {
|
|
|
71
72
|
var _b = react_1.default.useState(false), isLoading = _b[0], setIsLoading = _b[1];
|
|
72
73
|
var _c = react_1.default.useState(-1), count = _c[0], setCount = _c[1];
|
|
73
74
|
var _d = (0, react_1.useState)([]), notificationMessage = _d[0], setNotificationMessage = _d[1];
|
|
75
|
+
var totalItemCount = (0, react_1.useRef)(0);
|
|
74
76
|
(0, react_1.useEffect)(function () {
|
|
75
77
|
var observer = new IntersectionObserver(handleIntersection);
|
|
76
78
|
var lastItem = document.getElementById('last-Item');
|
|
@@ -85,7 +87,9 @@ var NotificationDetail = function () {
|
|
|
85
87
|
};
|
|
86
88
|
}, []);
|
|
87
89
|
(0, react_1.useEffect)(function () {
|
|
88
|
-
if (count >= 0
|
|
90
|
+
if (count >= 0 &&
|
|
91
|
+
(totalItemCount.current > notificationMessage.length ||
|
|
92
|
+
notificationMessage.length === 0)) {
|
|
89
93
|
setIsLoading(true);
|
|
90
94
|
service
|
|
91
95
|
.notificationsPaging(count, Constant_1.Constants.PAGE_SIZE_DEFAULT, valueFilter.textSearch, valueFilter.status, [])
|
|
@@ -96,6 +100,7 @@ var NotificationDetail = function () {
|
|
|
96
100
|
});
|
|
97
101
|
return __spreadArray(__spreadArray([], prevMessages, true), newItems, true);
|
|
98
102
|
});
|
|
103
|
+
totalItemCount.current = res.totalItemCount;
|
|
99
104
|
})
|
|
100
105
|
.finally(function () {
|
|
101
106
|
setIsLoading(false);
|
|
@@ -112,6 +117,7 @@ var NotificationDetail = function () {
|
|
|
112
117
|
var handleValueFilter = function (textSearch, tabs) {
|
|
113
118
|
textSearch.length === 0 ? setCount(0) : setCount(-1);
|
|
114
119
|
setNotificationMessage([]);
|
|
120
|
+
totalItemCount.current = 0;
|
|
115
121
|
setValueFilter({
|
|
116
122
|
textSearch: textSearch,
|
|
117
123
|
tabs: tabs,
|
|
@@ -123,12 +129,12 @@ var NotificationDetail = function () {
|
|
|
123
129
|
var handleUpdateStatus = (0, react_1.useCallback)(function (dataSent) {
|
|
124
130
|
if (typeof dataSent === 'string') {
|
|
125
131
|
var isCheckStatus = notificationMessage.some(function (item) {
|
|
126
|
-
return item.status === Types_1.NotificationMessageStatus.
|
|
132
|
+
return item.status === Types_1.NotificationMessageStatus.Unread;
|
|
127
133
|
});
|
|
128
134
|
if (isCheckStatus) {
|
|
129
135
|
service.notificationsReadAll().then(function () {
|
|
130
136
|
setNotificationMessage(function (prevNotifications) {
|
|
131
|
-
return prevNotifications.map(function (item) { return (__assign(__assign({}, item), { status: Types_1.NotificationMessageStatus.
|
|
137
|
+
return prevNotifications.map(function (item) { return (__assign(__assign({}, item), { status: Types_1.NotificationMessageStatus.Read })); });
|
|
132
138
|
});
|
|
133
139
|
});
|
|
134
140
|
}
|
|
@@ -153,6 +159,6 @@ var NotificationDetail = function () {
|
|
|
153
159
|
});
|
|
154
160
|
}
|
|
155
161
|
}, [notificationMessage, service]);
|
|
156
|
-
return ((0, jsx_runtime_1.jsxs)(react_i18next_1.I18nextProvider, { i18n: i18n_1.default, children: [(0, jsx_runtime_1.jsx)(Box_1.default, { pt: 2, pl: 2, pr: 2, pb: 1, component: "div", children: (0, jsx_runtime_1.jsx)(HeaderInfo_1.default, { valueFilter: valueFilter, onValueFilter: handleValueFilter, onUpdateStatus: handleUpdateStatus }) }), (0, jsx_runtime_1.jsx)(Box_1.default, { pl: 1, pr: 1, pb: 1, component: "div", children: (0, jsx_runtime_1.jsx)(NotificationList_1.default, { isLoading: isLoading, valueFilter: valueFilter, notificationMessage: notificationMessage, onUpdateStatus: handleUpdateStatus }) }), (0, jsx_runtime_1.jsx)(Box_1.default, { id: "last-Item", component: "div", sx: { height: '20px' } })] }));
|
|
162
|
+
return ((0, jsx_runtime_1.jsxs)(react_i18next_1.I18nextProvider, { i18n: i18n_1.default, children: [(0, jsx_runtime_1.jsx)(Box_1.default, { pt: 2, pl: 2, pr: 2, pb: 1, component: "div", children: (0, jsx_runtime_1.jsx)(HeaderInfo_1.default, { valueFilter: valueFilter, onClosePopover: onClosePopover, onValueFilter: handleValueFilter, onUpdateStatus: handleUpdateStatus }) }), (0, jsx_runtime_1.jsx)(Box_1.default, { pl: 1, pr: 1, pb: 1, component: "div", children: (0, jsx_runtime_1.jsx)(NotificationList_1.default, { isLoading: isLoading, valueFilter: valueFilter, notificationMessage: notificationMessage, onUpdateStatus: handleUpdateStatus }) }), (0, jsx_runtime_1.jsx)(Box_1.default, { id: "last-Item", component: "div", sx: { height: '20px' } })] }));
|
|
157
163
|
};
|
|
158
164
|
exports.default = NotificationDetail;
|
|
@@ -144,6 +144,6 @@ var Container = function () {
|
|
|
144
144
|
backgroundColor: '#c1c1c1',
|
|
145
145
|
},
|
|
146
146
|
},
|
|
147
|
-
], children: (0, jsx_runtime_1.jsx)(NotificationDetail_1.default, {}) }) })] }));
|
|
147
|
+
], children: (0, jsx_runtime_1.jsx)(NotificationDetail_1.default, { onClosePopover: handleClose }) }) })] }));
|
|
148
148
|
};
|
|
149
149
|
exports.default = Container;
|
|
@@ -4,7 +4,7 @@ export declare const isObjectType: (value: unknown) => value is object;
|
|
|
4
4
|
export declare const isObject: <T extends object>(value: unknown) => value is T;
|
|
5
5
|
export declare const composeKey: <F extends (...p: any[]) => any, G extends (...p: any[]) => any>(f: F, g: G) => F;
|
|
6
6
|
export declare const concatKey: (parent: string | string[]) => (child: string | string[]) => string[];
|
|
7
|
-
export declare const setObject: <O extends {}>(obj: O, arrKey:
|
|
7
|
+
export declare const setObject: <O extends {}>(obj: O, arrKey: (keyof O)[], value: unknown) => void;
|
|
8
8
|
export declare const convertTreeArrayToFlatArray: (treeArray: DataObject[]) => any[];
|
|
9
9
|
export declare const convertValueByType: (type: string, val: any) => any;
|
|
10
10
|
export declare const getFieldsValid: (templateDatas: TemplateData[]) => boolean[];
|
|
@@ -659,6 +659,8 @@
|
|
|
659
659
|
"CampaignDefault": "Chiến dịch mặc định"
|
|
660
660
|
},
|
|
661
661
|
"Notification": {
|
|
662
|
+
"All": "Tất cả",
|
|
663
|
+
"Unread": "Chưa đọc",
|
|
662
664
|
"TitleManagement": "Quản trị thông báo",
|
|
663
665
|
"TitleDetail": "Chi tiết người nhận thông báo",
|
|
664
666
|
"TitleAddReceiver": "Thêm người dùng/nhóm người dùng",
|