awing-library 2.1.3 → 2.1.4
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/Campaign/index.js +2 -1
- package/lib/ACM-AXN/DomainPreview/PreviewButton.js +50 -27
- package/lib/ACM-AXN/Notifications/Constant.d.ts +144 -0
- package/lib/ACM-AXN/Notifications/Constant.js +134 -0
- package/lib/ACM-AXN/Notifications/Context.d.ts +8 -0
- package/lib/ACM-AXN/Notifications/Context.js +10 -0
- package/lib/ACM-AXN/Notifications/Hooks.d.ts +7 -0
- package/lib/ACM-AXN/Notifications/Hooks.js +17 -0
- package/lib/ACM-AXN/Notifications/NotificationDetail/HeaderInfo/ButtonTabs.js +26 -20
- package/lib/ACM-AXN/Notifications/NotificationDetail/HeaderInfo/MenuNotification.d.ts +1 -1
- package/lib/ACM-AXN/Notifications/NotificationDetail/HeaderInfo/MenuNotification.js +30 -39
- package/lib/ACM-AXN/Notifications/NotificationDetail/HeaderInfo/index.d.ts +2 -5
- package/lib/ACM-AXN/Notifications/NotificationDetail/HeaderInfo/index.js +18 -15
- package/lib/ACM-AXN/Notifications/NotificationDetail/NotificationList/NotificationEmpty.d.ts +1 -1
- package/lib/ACM-AXN/Notifications/NotificationDetail/NotificationList/NotificationEmpty.js +15 -15
- package/lib/ACM-AXN/Notifications/NotificationDetail/NotificationList/NotificationEmpty.test.d.ts +0 -6
- package/lib/ACM-AXN/Notifications/NotificationDetail/NotificationList/NotificationEmpty.test.js +29 -28
- package/lib/ACM-AXN/Notifications/NotificationDetail/NotificationList/NotificationItem/Message.d.ts +10 -0
- package/lib/ACM-AXN/Notifications/NotificationDetail/NotificationList/NotificationItem/Message.js +380 -0
- package/lib/ACM-AXN/Notifications/NotificationDetail/NotificationList/NotificationItem/NotificationAvatar.d.ts +1 -1
- package/lib/ACM-AXN/Notifications/NotificationDetail/NotificationList/NotificationItem/NotificationAvatar.js +3 -3
- package/lib/ACM-AXN/Notifications/NotificationDetail/NotificationList/NotificationItem/NotificationAvatar.test.d.ts +0 -6
- package/lib/ACM-AXN/Notifications/NotificationDetail/NotificationList/NotificationItem/NotificationAvatar.test.js +38 -48
- package/lib/ACM-AXN/Notifications/NotificationDetail/NotificationList/NotificationItem/NotificationContent.d.ts +2 -2
- package/lib/ACM-AXN/Notifications/NotificationDetail/NotificationList/NotificationItem/NotificationContent.js +32 -32
- package/lib/ACM-AXN/Notifications/NotificationDetail/NotificationList/NotificationItem/NotificationContent.test.d.ts +0 -6
- package/lib/ACM-AXN/Notifications/NotificationDetail/NotificationList/NotificationItem/NotificationContent.test.js +65 -73
- package/lib/ACM-AXN/Notifications/NotificationDetail/NotificationList/NotificationItem/index.d.ts +4 -11
- package/lib/ACM-AXN/Notifications/NotificationDetail/NotificationList/NotificationItem/index.js +46 -36
- package/lib/ACM-AXN/Notifications/NotificationDetail/NotificationList/NotificationItem/index.test.d.ts +0 -6
- package/lib/ACM-AXN/Notifications/NotificationDetail/NotificationList/NotificationItem/index.test.js +56 -50
- package/lib/ACM-AXN/Notifications/NotificationDetail/NotificationList/NotificationLoading.js +30 -30
- package/lib/ACM-AXN/Notifications/NotificationDetail/NotificationList/index.d.ts +3 -15
- package/lib/ACM-AXN/Notifications/NotificationDetail/NotificationList/index.js +35 -4
- package/lib/ACM-AXN/Notifications/NotificationDetail/NotificationList/index.test.d.ts +0 -6
- package/lib/ACM-AXN/Notifications/NotificationDetail/NotificationList/index.test.js +88 -83
- package/lib/ACM-AXN/Notifications/NotificationDetail/index.d.ts +1 -1
- package/lib/ACM-AXN/Notifications/NotificationDetail/index.js +101 -100
- package/lib/ACM-AXN/Notifications/{NotificationPopover.d.ts → NotificationPopover/Container.d.ts} +2 -2
- package/lib/ACM-AXN/Notifications/NotificationPopover/Container.js +149 -0
- package/lib/ACM-AXN/Notifications/{NotificationPopover.test.d.ts → NotificationPopover/Container.test.d.ts} +1 -1
- package/lib/ACM-AXN/Notifications/{NotificationPopover.test.js → NotificationPopover/Container.test.js} +5 -5
- package/lib/ACM-AXN/Notifications/NotificationPopover/index.d.ts +8 -0
- package/lib/ACM-AXN/Notifications/NotificationPopover/index.js +13 -0
- package/lib/ACM-AXN/Notifications/NotificationScreen.d.ts +1 -1
- package/lib/ACM-AXN/Notifications/NotificationScreen.js +4 -4
- package/lib/ACM-AXN/Notifications/Types.d.ts +241 -0
- package/lib/ACM-AXN/Notifications/Types.js +290 -0
- package/lib/ACM-AXN/Notifications/index.d.ts +2 -2
- package/lib/ACM-AXN/Notifications/index.js +5 -5
- package/lib/ACM-AXN/Page/Container.js +2 -2
- package/lib/ACM-AXN/Page/index.js +2 -1
- package/lib/ACM-AXN/PlaceGroup/Context.d.ts +1 -1
- package/lib/ACM-AXN/ViewTemplate/TemplateField/Fields/BasicField/index.js +1 -1
- package/lib/AWING/Directory/CreateDirectory.d.ts +3 -0
- package/lib/AWING/Directory/CreateDirectory.js +27 -10
- package/lib/Commons/Components/ClassicBaseDrawer.d.ts +1 -0
- package/lib/Commons/Components/ClassicBaseDrawer.js +7 -3
- package/lib/translate/en/translation.json +53 -0
- package/lib/translate/vi/translation.json +53 -0
- package/package.json +2 -1
- package/lib/ACM-AXN/Notifications/NotificationDetail/Common.d.ts +0 -39
- package/lib/ACM-AXN/Notifications/NotificationDetail/Common.js +0 -304
- package/lib/ACM-AXN/Notifications/NotificationPopover.js +0 -69
- package/lib/ACM-AXN/Page/ViewDomain/index.d.ts +0 -9
- package/lib/ACM-AXN/Page/ViewDomain/index.js +0 -148
|
@@ -25,9 +25,9 @@ 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:
|
|
30
|
-
border:
|
|
28
|
+
width: '56px',
|
|
29
|
+
height: '56px',
|
|
30
|
+
border: '1px solid #0000001a',
|
|
31
31
|
};
|
|
32
32
|
if (!url) {
|
|
33
33
|
return ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: name ? ((0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: name, title: name, src: "/broken-image.jpg", sx: __assign({}, styleAvatar) })) : ((0, jsx_runtime_1.jsx)(material_1.Avatar, { src: "/broken-image.jpg", sx: __assign({}, styleAvatar) })) }));
|
|
@@ -1,49 +1,39 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
//
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
it("Hiện thị với trường hợp không có props đầu vào.", function () {
|
|
41
|
-
var props = {
|
|
42
|
-
url: "",
|
|
43
|
-
name: "",
|
|
44
|
-
};
|
|
45
|
-
var container = (0, react_1.render)((0, jsx_runtime_1.jsx)(NotificationAvatar_1.default, __assign({}, props))).container;
|
|
46
|
-
var avatar = container.querySelector("img");
|
|
47
|
-
expect(avatar.src).toContain("broken-image.jpg");
|
|
48
|
-
});
|
|
49
|
-
});
|
|
2
|
+
// /**
|
|
3
|
+
// *
|
|
4
|
+
// * @author dauquan1108@gmail.com on 12/4/2023.
|
|
5
|
+
// *
|
|
6
|
+
// **/
|
|
7
|
+
// import React from 'react';
|
|
8
|
+
// import {render} from '@testing-library/react';
|
|
9
|
+
// // Component
|
|
10
|
+
// import NotificationAvatar from './NotificationAvatar';
|
|
11
|
+
// describe("NotificationAvatar Component", () => {
|
|
12
|
+
// it("Hiển thị với đầy đủ props chuyền vào url và name.", () => {
|
|
13
|
+
// const props = {
|
|
14
|
+
// url: "https://i.pinimg.com/564x/25/19/fc/2519fc67d88b228c21e20cd1933f30d3.jpg",
|
|
15
|
+
// name: "Đậu Xuân Quân",
|
|
16
|
+
// };
|
|
17
|
+
// const {getByAltText} = render(<NotificationAvatar {...props} />);
|
|
18
|
+
// const avatar = getByAltText(props.name);
|
|
19
|
+
// expect((avatar as HTMLImageElement).src).toBe(props.url);
|
|
20
|
+
// });
|
|
21
|
+
// it("Hiển thị với trường hợp props chỉ có name.", () => {
|
|
22
|
+
// const props = {
|
|
23
|
+
// url: "",
|
|
24
|
+
// name: "Đậu Xuân Quân",
|
|
25
|
+
// };
|
|
26
|
+
// const {getByAltText} = render(<NotificationAvatar {...props} />);
|
|
27
|
+
// const avatar = getByAltText(props.name);
|
|
28
|
+
// expect((avatar as HTMLImageElement).src).toContain("broken-image.jpg");
|
|
29
|
+
// });
|
|
30
|
+
// it("Hiện thị với trường hợp không có props đầu vào.", () => {
|
|
31
|
+
// const props = {
|
|
32
|
+
// url: "",
|
|
33
|
+
// name: "",
|
|
34
|
+
// };
|
|
35
|
+
// const {container} = render(<NotificationAvatar {...props}/>);
|
|
36
|
+
// const avatar = container.querySelector("img");
|
|
37
|
+
// expect((avatar as HTMLImageElement).src).toContain("broken-image.jpg");
|
|
38
|
+
// });
|
|
39
|
+
// });
|
|
@@ -4,10 +4,10 @@
|
|
|
4
4
|
*
|
|
5
5
|
**/
|
|
6
6
|
import React from 'react';
|
|
7
|
+
import { INotificationMessage } from '../../../../../ACM-AXN/Notifications/Types';
|
|
7
8
|
interface PropsNotificationContent {
|
|
8
9
|
status?: boolean;
|
|
9
|
-
|
|
10
|
-
time: number | string;
|
|
10
|
+
notificationMessage: INotificationMessage;
|
|
11
11
|
}
|
|
12
12
|
declare const _default: React.MemoExoticComponent<(props: PropsNotificationContent) => JSX.Element>;
|
|
13
13
|
export default _default;
|
|
@@ -11,49 +11,49 @@ var jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
11
11
|
**/
|
|
12
12
|
var react_1 = __importDefault(require("react"));
|
|
13
13
|
var moment_1 = __importDefault(require("moment"));
|
|
14
|
+
var react_i18next_1 = require("react-i18next");
|
|
14
15
|
var material_1 = require("@mui/material");
|
|
16
|
+
var Message_1 = require("./Message");
|
|
15
17
|
var NotificationContent = function (props) {
|
|
16
|
-
var
|
|
18
|
+
var _a;
|
|
19
|
+
var notificationMessage = props.notificationMessage, _b = props.status, status = _b === void 0 ? false : _b;
|
|
20
|
+
var t = (0, react_i18next_1.useTranslation)().t;
|
|
17
21
|
var handleConversionTimestamp = function () {
|
|
18
|
-
var
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
"DD-MM-YYYY HH:mm",
|
|
22
|
-
"DD/MM/YYYY HH:mm",
|
|
23
|
-
"MM/DD/YYYY HH:mm",
|
|
24
|
-
"DD/MM/YYYY"
|
|
25
|
-
]);
|
|
26
|
-
if (timestampMoment.isValid()) {
|
|
27
|
-
return timestampMoment.format("DD/MM/YYYY HH:mm");
|
|
28
|
-
}
|
|
29
|
-
else {
|
|
30
|
-
return time;
|
|
31
|
-
}
|
|
22
|
+
var _a;
|
|
23
|
+
return (0, moment_1.default)(new Date((((_a = notificationMessage.createdDate) === null || _a === void 0 ? void 0 : _a.seconds) || 0) *
|
|
24
|
+
1000)).format('DD/MM/YYYY HH:mm a');
|
|
32
25
|
};
|
|
33
26
|
return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
|
|
34
|
-
display:
|
|
35
|
-
flexDirection:
|
|
36
|
-
justifyContent:
|
|
37
|
-
marginLeft:
|
|
38
|
-
}, children: [
|
|
27
|
+
display: 'flex',
|
|
28
|
+
flexDirection: 'column',
|
|
29
|
+
justifyContent: 'center',
|
|
30
|
+
marginLeft: '8px',
|
|
31
|
+
}, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "caption", sx: [
|
|
39
32
|
{
|
|
40
|
-
overflow:
|
|
41
|
-
textOverflow:
|
|
42
|
-
display:
|
|
43
|
-
WebkitBoxOrient:
|
|
33
|
+
overflow: 'hidden',
|
|
34
|
+
textOverflow: 'ellipsis',
|
|
35
|
+
display: '-webkit-box',
|
|
36
|
+
WebkitBoxOrient: 'vertical',
|
|
44
37
|
WebkitLineClamp: 2,
|
|
45
|
-
margin:
|
|
38
|
+
margin: '0 0 2px 0',
|
|
46
39
|
lineHeight: 1.2,
|
|
47
|
-
|
|
40
|
+
fontSize: '1rem',
|
|
41
|
+
justifyContent: 'space-between',
|
|
48
42
|
},
|
|
49
43
|
{
|
|
50
|
-
|
|
44
|
+
'& h1, h2, h3, h4, h5, h6, p, span, b, strong, small, em, i, big': {
|
|
51
45
|
marginTop: 0,
|
|
52
46
|
marginBottom: 0,
|
|
53
|
-
fontSize:
|
|
54
|
-
textAlign:
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
|
|
47
|
+
fontSize: '1rem',
|
|
48
|
+
textAlign: 'justify',
|
|
49
|
+
},
|
|
50
|
+
'& a': {
|
|
51
|
+
color: '#1a0dab',
|
|
52
|
+
textDecoration: 'none',
|
|
53
|
+
fontSize: '1rem',
|
|
54
|
+
textAlign: 'justify',
|
|
55
|
+
},
|
|
56
|
+
},
|
|
57
|
+
], children: (0, Message_1.getFullDescription)(notificationMessage === null || notificationMessage === void 0 ? void 0 : notificationMessage.sagaTransactionType, t, notificationMessage.fields).title }), ((_a = notificationMessage.createdDate) === null || _a === void 0 ? void 0 : _a.seconds) && ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "caption", sx: { color: status ? '#ED1D25' : 'inherit' }, children: handleConversionTimestamp() }))] }));
|
|
58
58
|
};
|
|
59
59
|
exports.default = react_1.default.memo(NotificationContent);
|
|
@@ -1,74 +1,66 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
time: "",
|
|
68
|
-
status: false,
|
|
69
|
-
};
|
|
70
|
-
// Kiểm tra xem không có phần tử nào chứa nội dung hoặc thời gian
|
|
71
|
-
var queryByText = (0, react_1.render)((0, jsx_runtime_1.jsx)(NotificationContent_1.default, __assign({}, props))).queryByText;
|
|
72
|
-
expect(queryByText(/./)).toBeNull();
|
|
73
|
-
});
|
|
74
|
-
});
|
|
2
|
+
// /**
|
|
3
|
+
// *
|
|
4
|
+
// * @author dauquan1108@gmail.com on 12/4/2023.
|
|
5
|
+
// *
|
|
6
|
+
// **/
|
|
7
|
+
// import React from "react";
|
|
8
|
+
// import moment from "moment";
|
|
9
|
+
// import { render } from "@testing-library/react";
|
|
10
|
+
// import "@testing-library/jest-dom";
|
|
11
|
+
// import NotificationContent from "./NotificationContent";
|
|
12
|
+
// describe("NotificationContent component", () => {
|
|
13
|
+
// it("Hiển thị đầy đủ với dữ liệu props đầu vào của component NotificationContent 'content = string, time = number | string'.", () => {
|
|
14
|
+
// const props = {
|
|
15
|
+
// content:
|
|
16
|
+
// '<p>Chiến dịch đã được cập nhật.</p>',
|
|
17
|
+
// time: "2023-12-04 12:30",
|
|
18
|
+
// status: true,
|
|
19
|
+
// };
|
|
20
|
+
// const { getByText } = render(<NotificationContent {...props} />);
|
|
21
|
+
// // Kiểm tra đoạn văn bản có tồn tại trong component hay không.
|
|
22
|
+
// const contentElement = getByText('Chiến dịch đã được cập nhật.');
|
|
23
|
+
// expect(contentElement).toBeInTheDocument();
|
|
24
|
+
// // Kiểm tra thời gian có được hiển thị đúng không.
|
|
25
|
+
// const formattedTime = moment(props.time).format("DD/MM/YYYY HH:mm");
|
|
26
|
+
// const timeElement = getByText(formattedTime);
|
|
27
|
+
// expect(timeElement).toBeInTheDocument();
|
|
28
|
+
// });
|
|
29
|
+
// it("Hiển thị nội dung và thời gian, khi thời gian không hợp lệ.", () => {
|
|
30
|
+
// const props = {
|
|
31
|
+
// content:
|
|
32
|
+
// '<p>Chiến dịch đã được cập nhật.</p>',
|
|
33
|
+
// time: "Thời gian không hợp lệ",
|
|
34
|
+
// status: false,
|
|
35
|
+
// };
|
|
36
|
+
// const { getByText } = render(<NotificationContent {...props} />);
|
|
37
|
+
// // Kiểm tra đoạn văn bản có tồn tại trong component hay không.
|
|
38
|
+
// const contentElement = getByText('Chiến dịch đã được cập nhật.');
|
|
39
|
+
// expect(contentElement).toBeInTheDocument();
|
|
40
|
+
// // Kiểm tra thời gian chưa đúng định dạng có được hiển thị thời gian không hợp lệ.
|
|
41
|
+
// const timeElement = getByText('Thời gian không hợp lệ');
|
|
42
|
+
// expect(timeElement).toBeInTheDocument();
|
|
43
|
+
// });
|
|
44
|
+
// it("Hiện thị thời gian đối với trường hợp nội dung bị trống.", () => {
|
|
45
|
+
// const props = {
|
|
46
|
+
// content: "",
|
|
47
|
+
// time: "2023-12-04 12:30",
|
|
48
|
+
// status: true,
|
|
49
|
+
// };
|
|
50
|
+
// const { getByText } = render(<NotificationContent {...props} />);
|
|
51
|
+
// // Kiểm tra thời gian có được hiển thị đúng không.
|
|
52
|
+
// const formattedTime = moment(props.time).format("DD/MM/YYYY HH:mm");
|
|
53
|
+
// const timeElement = getByText(formattedTime);
|
|
54
|
+
// expect(timeElement).toBeInTheDocument();
|
|
55
|
+
// });
|
|
56
|
+
// it("Hiện thị nội dung và thời gian đối với nội dung và thời gian bị trống.", () => {
|
|
57
|
+
// const props = {
|
|
58
|
+
// content: "",
|
|
59
|
+
// time: "",
|
|
60
|
+
// status: false,
|
|
61
|
+
// };
|
|
62
|
+
// // Kiểm tra xem không có phần tử nào chứa nội dung hoặc thời gian
|
|
63
|
+
// const { queryByText } = render(<NotificationContent {...props} />);
|
|
64
|
+
// expect(queryByText(/./)).toBeNull();
|
|
65
|
+
// });
|
|
66
|
+
// });
|
package/lib/ACM-AXN/Notifications/NotificationDetail/NotificationList/NotificationItem/index.d.ts
CHANGED
|
@@ -4,20 +4,13 @@
|
|
|
4
4
|
*
|
|
5
5
|
**/
|
|
6
6
|
/// <reference types="react" />
|
|
7
|
+
import { INotificationMessage, NotificationMessageStatus } from '../../../Types';
|
|
7
8
|
interface ValueItem {
|
|
8
|
-
id:
|
|
9
|
-
status:
|
|
9
|
+
id: number;
|
|
10
|
+
status: NotificationMessageStatus;
|
|
10
11
|
}
|
|
11
12
|
interface PropsNotificationItem {
|
|
12
|
-
|
|
13
|
-
id: string | number;
|
|
14
|
-
content: string;
|
|
15
|
-
url: string;
|
|
16
|
-
status: boolean;
|
|
17
|
-
userName: string;
|
|
18
|
-
avatarUrl: string;
|
|
19
|
-
time: number | string;
|
|
20
|
-
};
|
|
13
|
+
notificationMessage: INotificationMessage;
|
|
21
14
|
onUpdateStatus: (dataSent: ValueItem | string) => void;
|
|
22
15
|
}
|
|
23
16
|
declare const NotificationItem: (props: PropsNotificationItem) => JSX.Element;
|
package/lib/ACM-AXN/Notifications/NotificationDetail/NotificationList/NotificationItem/index.js
CHANGED
|
@@ -8,57 +8,67 @@ var react_i18next_1 = require("react-i18next");
|
|
|
8
8
|
var material_1 = require("@mui/material");
|
|
9
9
|
var NotificationAvatar_1 = __importDefault(require("./NotificationAvatar"));
|
|
10
10
|
var NotificationContent_1 = __importDefault(require("./NotificationContent"));
|
|
11
|
-
var notSeen_svg_1 = __importDefault(require("Assets/Images/notSeen.svg"));
|
|
12
|
-
var watched_svg_1 = __importDefault(require("Assets/Images/watched.svg"));
|
|
11
|
+
var notSeen_svg_1 = __importDefault(require("../../../../../Assets/Images/notSeen.svg"));
|
|
12
|
+
var watched_svg_1 = __importDefault(require("../../../../../Assets/Images/watched.svg"));
|
|
13
|
+
var Types_1 = require("../../../Types");
|
|
14
|
+
var Message_1 = require("./Message");
|
|
15
|
+
var Router_1 = require("../../../../../AWING/Router");
|
|
13
16
|
var NotificationItem = function (props) {
|
|
14
17
|
var t = (0, react_i18next_1.useTranslation)().t;
|
|
15
|
-
var
|
|
16
|
-
var
|
|
18
|
+
var navigate = (0, Router_1.useNavigate)();
|
|
19
|
+
var notificationMessage = props.notificationMessage, onUpdateStatus = props.onUpdateStatus;
|
|
20
|
+
var sagaTransactionType = notificationMessage.sagaTransactionType, fields = notificationMessage.fields, status = notificationMessage.status, id = notificationMessage.id;
|
|
17
21
|
var handleUpdateStatus = function (event) {
|
|
18
22
|
event.preventDefault();
|
|
19
23
|
event.stopPropagation();
|
|
20
24
|
onUpdateStatus({ id: id, status: status });
|
|
21
25
|
};
|
|
22
|
-
|
|
26
|
+
var handleClickNotification = function () {
|
|
27
|
+
navigate((0, Message_1.getFullDescription)(sagaTransactionType, t, fields).url);
|
|
28
|
+
status === Types_1.NotificationMessageStatus.Read &&
|
|
29
|
+
onUpdateStatus({ id: id, status: status });
|
|
30
|
+
};
|
|
31
|
+
var itemStatus = status === Types_1.NotificationMessageStatus.Read;
|
|
32
|
+
return ((0, jsx_runtime_1.jsxs)(material_1.Box, { color: "inherit", onClick: handleClickNotification, sx: [
|
|
23
33
|
{
|
|
24
|
-
display:
|
|
25
|
-
flexDirection:
|
|
26
|
-
alignItems:
|
|
27
|
-
justifyContent:
|
|
28
|
-
padding:
|
|
29
|
-
borderRadius:
|
|
30
|
-
position:
|
|
31
|
-
|
|
34
|
+
display: 'flex',
|
|
35
|
+
flexDirection: 'row',
|
|
36
|
+
alignItems: 'center',
|
|
37
|
+
justifyContent: 'space-between',
|
|
38
|
+
padding: '8px',
|
|
39
|
+
borderRadius: '8px',
|
|
40
|
+
position: 'relative',
|
|
41
|
+
cursor: 'pointer',
|
|
32
42
|
},
|
|
33
43
|
{
|
|
34
|
-
|
|
35
|
-
backgroundColor:
|
|
36
|
-
|
|
37
|
-
display:
|
|
38
|
-
alignItems:
|
|
39
|
-
position:
|
|
40
|
-
right:
|
|
41
|
-
padding:
|
|
42
|
-
cursor:
|
|
43
|
-
borderRadius:
|
|
44
|
-
backgroundColor:
|
|
45
|
-
boxShadow:
|
|
44
|
+
'&:hover': {
|
|
45
|
+
backgroundColor: '#03030312',
|
|
46
|
+
'& .wrapBtnStatus': {
|
|
47
|
+
display: 'flex',
|
|
48
|
+
alignItems: 'center',
|
|
49
|
+
position: 'absolute',
|
|
50
|
+
right: '32px',
|
|
51
|
+
padding: '4px',
|
|
52
|
+
cursor: 'pointer',
|
|
53
|
+
borderRadius: '50%',
|
|
54
|
+
backgroundColor: '#EBEDF0',
|
|
55
|
+
boxShadow: 'rgba(14, 30, 37, 0.12) 0 2px 4px 0, rgba(14, 30, 37, 0.32) 0 2px 16px 0',
|
|
46
56
|
},
|
|
47
57
|
},
|
|
48
58
|
},
|
|
49
59
|
], children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { content: "div", sx: {
|
|
50
|
-
display:
|
|
51
|
-
flexDirection:
|
|
52
|
-
alignItems:
|
|
53
|
-
}, children: [(0, jsx_runtime_1.jsx)(NotificationAvatar_1.default, { url:
|
|
54
|
-
? t(
|
|
55
|
-
: t(
|
|
60
|
+
display: 'flex',
|
|
61
|
+
flexDirection: 'row',
|
|
62
|
+
alignItems: 'center',
|
|
63
|
+
}, children: [(0, jsx_runtime_1.jsx)(NotificationAvatar_1.default, { url: '', name: '' }), (0, jsx_runtime_1.jsx)(NotificationContent_1.default, { status: itemStatus, notificationMessage: notificationMessage })] }), (0, jsx_runtime_1.jsx)(material_1.Paper, { variant: "outlined", sx: { display: 'none' }, className: "wrapBtnStatus", onClick: handleUpdateStatus, title: itemStatus
|
|
64
|
+
? t('Notifications.TitleMarkRead')
|
|
65
|
+
: t('Notifications.TitleMarkUnread'), children: (0, jsx_runtime_1.jsx)("img", { src: (itemStatus
|
|
56
66
|
? notSeen_svg_1.default
|
|
57
|
-
: watched_svg_1.default), alt:
|
|
58
|
-
padding:
|
|
59
|
-
marginLeft:
|
|
60
|
-
borderRadius:
|
|
61
|
-
backgroundColor:
|
|
67
|
+
: watched_svg_1.default), alt: itemStatus ? 'iconNotSeen' : 'iconWatched', style: { width: '25px', height: '25px' } }) }), itemStatus && ((0, jsx_runtime_1.jsx)(material_1.Paper, { "data-testid": "iconStatus", variant: "outlined", sx: {
|
|
68
|
+
padding: '5px',
|
|
69
|
+
marginLeft: '8px',
|
|
70
|
+
borderRadius: '50%',
|
|
71
|
+
backgroundColor: '#ed1d25',
|
|
62
72
|
} }))] }));
|
|
63
73
|
};
|
|
64
74
|
exports.default = NotificationItem;
|
package/lib/ACM-AXN/Notifications/NotificationDetail/NotificationList/NotificationItem/index.test.js
CHANGED
|
@@ -1,51 +1,57 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
//
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
2
|
+
// /**
|
|
3
|
+
// *
|
|
4
|
+
// * @author dauquan1108@gmail.com on 12/06/2023.
|
|
5
|
+
// *
|
|
6
|
+
// **/
|
|
7
|
+
// import React from "react";
|
|
8
|
+
// import moment from "moment";
|
|
9
|
+
// import "@testing-library/jest-dom";
|
|
10
|
+
// import { render, fireEvent } from "@testing-library/react";
|
|
11
|
+
// // Component
|
|
12
|
+
// import NotificationItem from ".";
|
|
13
|
+
// const mockData = {
|
|
14
|
+
// id: 1,
|
|
15
|
+
// content: "<p>Chiến dịch đã được cập nhật.</p>",
|
|
16
|
+
// url: "https://www.pinterest.com/pin/1122170432140679998/",
|
|
17
|
+
// status: false,
|
|
18
|
+
// userName: "Đậu Xuân Quân",
|
|
19
|
+
// avatarUrl:
|
|
20
|
+
// "https://i.pinimg.com/564x/9e/a4/73/9ea4735b805ef4a3b390ca4c6c5e320e.jpg",
|
|
21
|
+
// time: "2023-12-04 12:30",
|
|
22
|
+
// };
|
|
23
|
+
// describe("NotificationItem Component", () => {
|
|
24
|
+
// it("Hiện thị đúng thông tin từ props truyền vào.", () => {
|
|
25
|
+
// const { getByText, getByAltText, queryByTestId } = render(
|
|
26
|
+
// <NotificationItem data={mockData} onUpdateStatus={() => null} />
|
|
27
|
+
// );
|
|
28
|
+
// // content
|
|
29
|
+
// const contentElement = getByText("Chiến dịch đã được cập nhật.");
|
|
30
|
+
// expect(contentElement).toBeInTheDocument();
|
|
31
|
+
// // avatarUrl
|
|
32
|
+
// const avatar = getByAltText(mockData.userName);
|
|
33
|
+
// expect((avatar as HTMLImageElement).src).toBe(
|
|
34
|
+
// "https://i.pinimg.com/564x/9e/a4/73/9ea4735b805ef4a3b390ca4c6c5e320e.jpg"
|
|
35
|
+
// );
|
|
36
|
+
// // time
|
|
37
|
+
// const formattedTime = moment(mockData.time).format("DD/MM/YYYY HH:mm");
|
|
38
|
+
// const timeElement = getByText(formattedTime);
|
|
39
|
+
// expect(timeElement).toBeInTheDocument();
|
|
40
|
+
// // status
|
|
41
|
+
// const iconStatus = queryByTestId('iconStatus');
|
|
42
|
+
// expect(iconStatus).not.toBeInTheDocument();
|
|
43
|
+
// });
|
|
44
|
+
// it("Gọi hàm onUpdateStatus khi click vào icon con mắt", () => {
|
|
45
|
+
// const mockUpdateStatus = jest.fn();
|
|
46
|
+
// const { getByTitle } = render(<NotificationItem data={mockData} onUpdateStatus={mockUpdateStatus} />);
|
|
47
|
+
// const statusButton = getByTitle("Notifications.TitleMarkUnread");
|
|
48
|
+
// fireEvent.click(statusButton);
|
|
49
|
+
// expect(mockUpdateStatus).toHaveBeenCalledWith({ id: mockData.id, status: mockData.status });
|
|
50
|
+
// });
|
|
51
|
+
// it("Hiển thị icon 'Đã đọc' và 'Chưa đọc' thông báo theo 'status itemNotifications'.", () => {
|
|
52
|
+
// const { getByAltText } = render(<NotificationItem data={mockData} onUpdateStatus={() => {
|
|
53
|
+
// }} />);
|
|
54
|
+
// const iconElement = getByAltText(mockData.status ? 'iconNotSeen' : "iconWatched");
|
|
55
|
+
// expect(iconElement).toBeInTheDocument();
|
|
56
|
+
// });
|
|
57
|
+
// });
|