awing-library 2.1.214-dev → 2.1.216-dev

package/lib/ACM-AXN/Campaign/CreateOrEdit/TabApprove/RowTable.d.ts

@@ -0,0 +1,7 @@
+import { IDetail } from '.';
+interface RowTableProps {
+    row: IDetail;
+    updateRow?: any;
+}
+export declare function RowTable(props: RowTableProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/ACM-AXN/Campaign/CreateOrEdit/TabApprove/RowTable.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RowTable = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var material_1 = require("@mui/material");
+var react_1 = require("react");
+function RowTable(props) {
+    var _a;
+    var row = props.row;
+    var optionsState = [
+        {
+            id: '1',
+            name: 'Chờ duyệt',
+        },
+        {
+            id: '2',
+            name: 'Duyệt',
+        },
+        {
+            id: '3',
+            name: 'Hủy',
+        },
+    ];
+    var _b = (0, react_1.useState)([
+        optionsState[0].name,
+    ]), personName = _b[0], setPersonName = _b[1];
+    var _c = (0, react_1.useState)((_a = row === null || row === void 0 ? void 0 : row.ghichu) !== null && _a !== void 0 ? _a : ''), valueInput = _c[0], setValueInput = _c[1];
+    var handleChange = function (event) {
+        var value = event.target.value;
+        setPersonName(typeof value === 'string' ? value.split(',') : value);
+    };
+    var ITEM_HEIGHT = 48;
+    var ITEM_PADDING_TOP = 8;
+    var MenuProps = {
+        PaperProps: {
+            style: {
+                maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
+                width: 250,
+            },
+        },
+    };
+    return ((0, jsx_runtime_1.jsxs)(material_1.TableRow, { children: [(0, jsx_runtime_1.jsx)(material_1.TableCell, { style: { maxWidth: 400 }, children: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                        display: '-webkit-box',
+                        WebkitLineClamp: 2,
+                        WebkitBoxOrient: 'vertical',
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                    }, children: (0, jsx_runtime_1.jsx)(material_1.Link, { href: row === null || row === void 0 ? void 0 : row.link, sx: {
+                            wordWrap: 'break-word',
+                            wordBreak: 'break-all',
+                            color: 'blue',
+                            textDecorationColor: 'unset',
+                        }, target: "_blank", children: row === null || row === void 0 ? void 0 : row.link }) }) }), (0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                        display: 'flex',
+                        flexWrap: 'wrap',
+                        gap: '8px',
+                    }, children: row.subCampaigns.map(function (subCampaign, index) { return ((0, jsx_runtime_1.jsx)(material_1.Chip, { label: subCampaign.name }, index)); }) }) }), (0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(material_1.FormControl, { sx: { m: 1, width: 300 }, children: (0, jsx_runtime_1.jsx)(material_1.Select, { value: personName, onChange: handleChange, MenuProps: MenuProps, children: optionsState.map(function (item) { return ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: item.name, children: item.name }, item.id)); }) }) }) }), (0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { value: valueInput, onChange: function (e) {
+                        setValueInput(e.target.value);
+                    } }) })] }));
+}
+exports.RowTable = RowTable;

package/lib/ACM-AXN/Campaign/CreateOrEdit/TabApprove/RowTable.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/ACM-AXN/Campaign/CreateOrEdit/TabApprove/RowTable.test.js

@@ -0,0 +1,89 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("@testing-library/react");
+var RowTable_1 = require("./RowTable");
+// Mock the MUI components
+jest.mock('@mui/material', function () { return (__assign(__assign({}, jest.requireActual('@mui/material')), { TableRow: function (_a) {
+        var children = _a.children;
+        return (0, jsx_runtime_1.jsx)("tr", { children: children });
+    }, TableCell: function (_a) {
+        var children = _a.children;
+        return (0, jsx_runtime_1.jsx)("td", { children: children });
+    }, Box: function (_a) {
+        var children = _a.children;
+        return (0, jsx_runtime_1.jsx)("div", { children: children });
+    }, Link: function (_a) {
+        var children = _a.children, href = _a.href;
+        return (0, jsx_runtime_1.jsx)("a", { href: href, children: children });
+    }, Chip: function (_a) {
+        var label = _a.label;
+        return (0, jsx_runtime_1.jsx)("span", { children: label });
+    }, FormControl: function (_a) {
+        var children = _a.children;
+        return (0, jsx_runtime_1.jsx)("div", { children: children });
+    }, Select: function (_a) {
+        var children = _a.children, value = _a.value, onChange = _a.onChange;
+        return ((0, jsx_runtime_1.jsx)("select", { value: value, onChange: onChange, children: children }));
+    }, MenuItem: function (_a) {
+        var children = _a.children, value = _a.value;
+        return (0, jsx_runtime_1.jsx)("option", { value: value, children: children });
+    }, TextField: function (_a) {
+        var value = _a.value, onChange = _a.onChange;
+        return ((0, jsx_runtime_1.jsx)("input", { type: "text", value: value, onChange: onChange }));
+    } })); });
+describe('RowTable', function () {
+    var mockRow = {
+        link: 'https://example.com',
+        subCampaigns: [
+            { id: '1', name: 'Campaign 1' },
+            { id: '2', name: 'Campaign 2' },
+        ],
+        ghichu: 'Initial note',
+        status: 'Chờ duyệt',
+    };
+    it('renders the link correctly', function () {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(RowTable_1.RowTable, { row: mockRow }));
+        var link = react_1.screen.getByRole('link', { name: 'https://example.com' });
+        expect(link).toBeInTheDocument();
+        expect(link).toHaveAttribute('href', 'https://example.com');
+    });
+    it('renders sub-campaigns as chips', function () {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(RowTable_1.RowTable, { row: mockRow }));
+        expect(react_1.screen.getByText('Campaign 1')).toBeInTheDocument();
+        expect(react_1.screen.getByText('Campaign 2')).toBeInTheDocument();
+    });
+    it('renders the select with correct initial value', function () {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(RowTable_1.RowTable, { row: mockRow }));
+        var select = react_1.screen.getByRole('combobox');
+        expect(select).toHaveValue('Chờ duyệt');
+    });
+    it('changes the select value when a new option is chosen', function () {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(RowTable_1.RowTable, { row: mockRow }));
+        var select = react_1.screen.getByRole('combobox');
+        react_1.fireEvent.change(select, { target: { value: 'Duyệt' } });
+        expect(select).toHaveValue('Duyệt');
+    });
+    it('renders the text field with the initial note', function () {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(RowTable_1.RowTable, { row: mockRow }));
+        var textField = react_1.screen.getByRole('textbox');
+        expect(textField).toHaveValue('Initial note');
+    });
+    it('updates the text field value when typed into', function () {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(RowTable_1.RowTable, { row: mockRow }));
+        var textField = react_1.screen.getByRole('textbox');
+        react_1.fireEvent.change(textField, { target: { value: 'New note' } });
+        expect(textField).toHaveValue('New note');
+    });
+});

package/lib/ACM-AXN/Campaign/CreateOrEdit/TabApprove/index.d.ts

@@ -0,0 +1,12 @@
+interface ISubCampaign {
+    id: number | string;
+    name: string;
+}
+export interface IDetail {
+    status: string;
+    link: string;
+    subCampaigns: ISubCampaign[];
+    ghichu: string;
+}
+export default function TabApprove(): import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/ACM-AXN/Campaign/CreateOrEdit/TabApprove/index.js

@@ -0,0 +1,158 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var material_1 = require("@mui/material");
+var Hooks_1 = __importDefault(require("../../../../ACM-AXN/Campaign/Hooks"));
+var Constant_1 = require("../../../../ACM-AXN/Common/Constant");
+var lodash_1 = __importDefault(require("lodash"));
+var react_1 = __importStar(require("react"));
+var react_i18next_1 = require("react-i18next");
+var recoil_1 = require("recoil");
+var Recoils_1 = require("../Recoils");
+var atoms_1 = require("../TabSubCampaign/atoms");
+var RowTable_1 = require("./RowTable");
+var Utils_1 = require("../../../../AWING/Form/Utils");
+function TabApprove() {
+    var t = (0, react_i18next_1.useTranslation)().t;
+    var _a = (0, react_1.useState)([]), rowSelected = _a[0], setRowSelected = _a[1];
+    var _b = (0, react_1.useState)([]), domains = _b[0], setDomains = _b[1];
+    var ads = (0, recoil_1.useRecoilValue)(atoms_1.adListState);
+    var subCampaigns = (0, recoil_1.useRecoilValue)(Recoils_1.campaignGroupsState);
+    var _c = (0, Hooks_1.default)(), service = _c.service, defaultDomainId = _c.domainId;
+    var domainIds = (0, react_1.useMemo)(function () {
+        return lodash_1.default.uniq(ads
+            .filter(function (ad) { return ad.places; })
+            .map(function (ad) { return ad.places.map(function (x) { return x.domainId; }); })
+            .flat()
+            .filter(Boolean));
+    }, [ads]);
+    var renderLinkPreview = function (ad, domainId) {
+        if (domainId === void 0) { domainId = defaultDomainId; }
+        var url = "".concat(Constant_1.Constants.CAPTIVE_DOMAIN, "/").concat(Constant_1.Constants.PAGE_LOGIN_PREVIEW, "?loginId=").concat(ad.loginId, "&isNetworkCampaign=").concat(Boolean(service.domainsGetAll).toString());
+        if (ad.welcomeId)
+            url += "&welcomeId=".concat(ad.welcomeId);
+        if (domainId)
+            url += "&domainId=".concat(domainId);
+        return url;
+    };
+    var mergedData = function (data) {
+        return data.reduce(function (acc, curr) {
+            var found = acc.find(function (item) { return item.link === curr.link; });
+            if (found) {
+                // Nếu link đã tồn tại, gộp subCampaign
+                found.subCampaigns.push(curr.subCampaigns[0]);
+            }
+            else {
+                // Nếu link chưa tồn tại, thêm vào acc với subCampaign là mảng
+                acc.push({
+                    link: curr.link,
+                    ghichu: curr.ghichu,
+                    status: curr.status,
+                    subCampaigns: [curr.subCampaigns[0]],
+                });
+            }
+            return acc;
+        }, []);
+    };
+    var renderDataDetail = function (domainId) {
+        return mergedData(subCampaigns
+            .map(function (subCampaign) {
+            return subCampaign.ads
+                .map(function (ad) {
+                var _a;
+                var isDomain = (_a = ad === null || ad === void 0 ? void 0 : ad.places) === null || _a === void 0 ? void 0 : _a.find(function (place) {
+                    return place.domainId === domainId;
+                });
+                if (isDomain) {
+                    return {
+                        subCampaigns: [
+                            {
+                                id: subCampaign.campaignGroup.id,
+                                name: subCampaign.campaignGroup
+                                    .name,
+                            },
+                        ],
+                        link: renderLinkPreview(ad, domainId),
+                        ghichu: 'ghichu',
+                        status: 'status',
+                    };
+                }
+            })
+                .filter(Boolean);
+        })
+            .flat()
+            .filter(Boolean));
+    };
+    var dataTable = (0, react_1.useMemo)(function () {
+        if (!domains.length)
+            return [];
+        return domains.map(function (domain) {
+            return {
+                id: (0, Utils_1.generateId)(),
+                domainName: domain.name,
+                detail: renderDataDetail(domain.domainId),
+            };
+        });
+    }, [domains]);
+    var handleSelectAll = (0, react_1.useCallback)(function () {
+        setRowSelected(function (pre) {
+            return pre.length < dataTable.length
+                ? dataTable.map(function (item) { return item.id; })
+                : [];
+        });
+    }, [dataTable]);
+    var handleRowSelect = (0, react_1.useCallback)(function (id) {
+        setRowSelected(function (pre) {
+            return pre.includes(id) ? pre.filter(function (x) { return x !== id; }) : __spreadArray(__spreadArray([], pre, true), [id], false);
+        });
+    }, []);
+    (0, react_1.useEffect)(function () {
+        if (domainIds.length > 0) {
+            service.domainsGetByIds &&
+                service.domainsGetByIds(domainIds).then(setDomains);
+        }
+    }, [domainIds]);
+    return ((0, jsx_runtime_1.jsxs)(material_1.TableContainer, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { variant: "outlined", sx: {
+                    margin: '1rem',
+                }, children: t('Campaign.Approval.GetApprovalInformation') }), (0, jsx_runtime_1.jsxs)(material_1.Table, { children: [(0, jsx_runtime_1.jsx)(material_1.TableHead, { children: (0, jsx_runtime_1.jsxs)(material_1.TableRow, { style: { height: 57 }, children: [(0, jsx_runtime_1.jsx)(material_1.TableCell, { style: { width: 60, padding: '0 0 0 4px' }, children: (0, jsx_runtime_1.jsx)(material_1.Checkbox, { indeterminate: rowSelected.length > 0 &&
+                                            rowSelected.length < dataTable.length, checked: rowSelected.length > 0 &&
+                                            rowSelected.length === dataTable.length, onChange: handleSelectAll, inputProps: { 'aria-label': 'select all ad' }, color: "primary" }) }), rowSelected.length ? ((0, jsx_runtime_1.jsx)(material_1.TableCell, { colSpan: 5, style: { padding: 0 }, children: (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "outlined", color: "primary", children: t('Campaign.Approval.SendEmail') }) })) : ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.TableCell, { children: t('Campaign.Approval.Domain') }), (0, jsx_runtime_1.jsx)(material_1.TableCell, { style: { maxWidth: 400 }, children: t('Campaign.Approval.LinkPreview') }), (0, jsx_runtime_1.jsx)(material_1.TableCell, { children: t('Campaign.Approval.SubCampaign') }), (0, jsx_runtime_1.jsx)(material_1.TableCell, { children: t('Campaign.Approval.Status') }), (0, jsx_runtime_1.jsx)(material_1.TableCell, { children: t('Campaign.Approval.Note') })] }))] }) }), (0, jsx_runtime_1.jsx)(material_1.TableBody, { children: dataTable.map(function (item, index) { return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.TableRow, { children: [(0, jsx_runtime_1.jsx)(material_1.TableCell, { rowSpan: item.detail.length + 1, style: { width: 60, padding: '0 0 0 4px' }, children: (0, jsx_runtime_1.jsx)(material_1.Box, { display: 'flex', children: (0, jsx_runtime_1.jsx)(material_1.Checkbox, { checked: rowSelected.some(function (x) { return x === item.id; }), color: "primary", onChange: function () {
+                                                        return handleRowSelect(item.id);
+                                                    } }) }) }), (0, jsx_runtime_1.jsx)(material_1.TableCell, { rowSpan: item.detail.length + 1, children: item.domainName })] }), item.detail.map(function (detail, index2) { return ((0, jsx_runtime_1.jsx)(RowTable_1.RowTable, { row: detail }, index2)); })] }, index)); }) })] })] }));
+}
+exports.default = TabApprove;

package/lib/ACM-AXN/Campaign/CreateOrEdit/TabApprove/index.test.d.ts

@@ -0,0 +1 @@
+export {};