awing-library 2.1.226-dev → 2.1.227-dev

package/lib/ACM-AXN/Campaign/CreateOrEdit/Recoils.d.ts

@@ -1,9 +1,10 @@
-import { CampaignModel, Directory, CampaignGroupModel, Attribute } from '../Types';
+import { CampaignModel, Directory, CampaignGroupModel, Attribute, ICampaignApprovalTable } from '../Types';
 import { WeightContainerProps } from './TabSubCampaign/Weight';
 import { MenuOption } from '../../../AWING';
 export declare const directoriesState: import("recoil").RecoilState<Directory[]>;
 export declare const attributesState: import("recoil").RecoilState<Attribute[]>;
 export declare const isCreateState: import("recoil").RecoilState<boolean>;
+export declare const campaignApprovalTableState: import("recoil").RecoilState<ICampaignApprovalTable[]>;
 /**
  * Đánh dấu việc cần xác nhận lại trước khi đóng (set thành true khi có bất kỳ chỉnh sửa campaign nào)
  */

package/lib/ACM-AXN/Campaign/CreateOrEdit/Recoils.js

@@ -11,7 +11,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.cacheSearchPageState = exports.weightState = exports.readyForSubmitState = exports.tabPartnerValidState = exports.tabSubCampaignValidState = exports.tabInfomationValidState = exports.campaignPartnerState = exports.campaignGroupsState = exports.campaignApprovalState = exports.campaignAttributesState = exports.campaignState = exports.campaignModelState = exports.confirmExitState = exports.isCreateState = exports.attributesState = exports.directoriesState = void 0;
+exports.cacheSearchPageState = exports.weightState = exports.readyForSubmitState = exports.tabPartnerValidState = exports.tabSubCampaignValidState = exports.tabInfomationValidState = exports.campaignPartnerState = exports.campaignGroupsState = exports.campaignApprovalState = exports.campaignAttributesState = exports.campaignState = exports.campaignModelState = exports.confirmExitState = exports.campaignApprovalTableState = exports.isCreateState = exports.attributesState = exports.directoriesState = void 0;
 var recoil_1 = require("recoil");
 var Utils_1 = require("../Utils");
 var atoms_1 = require("./TabSubCampaign/atoms");
@@ -28,6 +28,10 @@ exports.isCreateState = (0, recoil_1.atom)({
     key: 'isCreateState',
     default: false,
 });
+exports.campaignApprovalTableState = (0, recoil_1.atom)({
+    key: 'campaignApprovalTableState',
+    default: [],
+});
 /**
  * Đánh dấu việc cần xác nhận lại trước khi đóng (set thành true khi có bất kỳ chỉnh sửa campaign nào)
  */

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

@@ -1,9 +1,9 @@
 import React from 'react';
-import { ICammpaignItem, IDataTable, IDetail } from '.';
+import { ICampaignApprovalSubRow, ICampaignApprovalTable, ICampaignApprovalTableRow } from '../../../../ACM-AXN/Campaign/Types';
 interface TableRowProps {
-    row: IDataTable;
-    link: IDetail;
-    sub: ICammpaignItem;
+    row: ICampaignApprovalTable;
+    link: ICampaignApprovalTableRow;
+    sub: ICampaignApprovalSubRow;
     linkIndex: number;
     subIndex: number;
     rowSelected: string[];

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

@@ -0,0 +1,2 @@
+declare const RunInBackground: () => import("react/jsx-runtime").JSX.Element;
+export default RunInBackground;

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

@@ -0,0 +1,322 @@
+"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);
+};
+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 recoil_1 = require("recoil");
+var Recoils_1 = require("../Recoils");
+var react_1 = require("react");
+var Hooks_1 = __importDefault(require("../../../../ACM-AXN/Campaign/Hooks"));
+var Constant_1 = require("../../../../ACM-AXN/Common/Constant");
+var lodash_1 = __importDefault(require("lodash"));
+var Helpers_1 = require("../../../../Utils/Helpers");
+var Router_1 = require("../../../../AWING/Router");
+var atoms_1 = require("../TabSubCampaign/atoms");
+var icons_material_1 = require("@mui/icons-material");
+var RunInBackground = function () {
+    var campaignId = (0, Router_1.useParams)().campaignId;
+    var subCampaigns = (0, recoil_1.useRecoilValue)(Recoils_1.campaignGroupsState);
+    var subCampaignDetailValid = (0, recoil_1.useRecoilValue)(atoms_1.subCampaignDetailValidState);
+    var subCampaignAdsValid = (0, recoil_1.useRecoilValue)(atoms_1.subCampaignAdsValidState);
+    var _a = (0, Hooks_1.default)(), service = _a.service, defaultDomainId = _a.domainId;
+    var _b = (0, recoil_1.useRecoilState)(Recoils_1.campaignApprovalState), campaignApproval = _b[0], setCampaignApproval = _b[1];
+    var _c = (0, recoil_1.useRecoilState)(Recoils_1.campaignApprovalTableState), campaignApprovalTable = _c[0], setCampaignApprovalTable = _c[1];
+    var _d = (0, react_1.useState)([]), domains = _d[0], setDomains = _d[1];
+    var _e = (0, react_1.useState)(true), isInit = _e[0], setIsInit = _e[1];
+    var oldCampaignApproval = (0, react_1.useRef)([]);
+    var prevDomainIds = (0, react_1.useRef)([]);
+    var domainIds = (0, react_1.useMemo)(function () {
+        var ads = subCampaigns.flatMap(function (sub) { return sub.ads; });
+        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));
+    }, [subCampaigns]);
+    var areAllTrue = function (data) {
+        return Object.values(data).every(function (value) { return value === true; });
+    };
+    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);
+        if (ad.welcomeId)
+            url += "&welcomeId=".concat(ad.welcomeId, "&isNetworkCampaign=").concat(Boolean(service.domainsGetAll).toString());
+        if (domainId)
+            url += "&domainId=".concat(domainId);
+        return url;
+    };
+    var mergedData = function (data) {
+        return data.reduce(function (acc, detail) {
+            var existingLink = acc.find(function (l) { return l.linkPreview === detail.linkPreview; });
+            if (existingLink) {
+                var existingCampaign = existingLink.campaign.find(function (item) {
+                    return item.subCampaigns.find(function (subCampaign) {
+                        return subCampaign.id ===
+                            detail.campaign[0].subCampaigns[0].id;
+                    });
+                });
+                if (existingCampaign) {
+                    existingCampaign.ads.push({
+                        id: detail.campaign[0].ads[0].id,
+                        name: detail.campaign[0].ads[0].name,
+                    });
+                }
+                else {
+                    detail.campaign.forEach(function (item) {
+                        existingLink.campaign.push(item);
+                    });
+                }
+            }
+            else {
+                acc.push({
+                    id: (0, Helpers_1.generateUUID)(),
+                    linkPreview: detail.linkPreview,
+                    campaign: detail.campaign,
+                    status: detail.status,
+                    description: detail.description,
+                    loginId: detail.loginId,
+                    welcomeId: detail.welcomeId,
+                });
+            }
+            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 {
+                        linkPreview: renderLinkPreview(ad, domainId),
+                        campaign: [
+                            {
+                                subCampaigns: [
+                                    {
+                                        id: subCampaign
+                                            .campaignGroup.id,
+                                        name: subCampaign
+                                            .campaignGroup.name,
+                                    },
+                                ],
+                                ads: [
+                                    {
+                                        id: ad.id,
+                                        name: ad.name,
+                                    },
+                                ],
+                            },
+                        ],
+                        loginId: ad.loginId,
+                        welcomeId: ad.welcomeId,
+                        description: '',
+                        status: 0,
+                    };
+                }
+            })
+                .filter(Boolean);
+        })
+            .flat()
+            .filter(Boolean));
+    };
+    var flattenData = function (data) {
+        var flattened = [];
+        var index = 0;
+        data.forEach(function (item) {
+            item.detail.forEach(function (detail) {
+                detail.campaign.forEach(function (campaign) {
+                    campaign.ads.forEach(function (ad) {
+                        var _a;
+                        flattened.push({
+                            id: index++,
+                            campaignId: campaignId,
+                            domainId: item.domain.domainId,
+                            status: detail.status,
+                            loginId: detail.loginId,
+                            welcomeId: detail.welcomeId,
+                            description: detail.description,
+                            campaignGroupId: (_a = campaign.subCampaigns[0]) === null || _a === void 0 ? void 0 : _a.id,
+                            campaignAdId: ad === null || ad === void 0 ? void 0 : ad.id,
+                        });
+                    });
+                });
+            });
+        });
+        return flattened;
+    };
+    var unflattenData = function (inputData) {
+        var subCampaignsFlat = subCampaigns.flatMap(function (item) {
+            var subCampaignId = item.campaignGroup.id;
+            var subCampaignName = item.campaignGroup.name;
+            return item.ads.map(function (ad) { return ({
+                subCampaignId: subCampaignId,
+                subCampaignName: subCampaignName,
+                adId: ad.id,
+                adName: ad.name,
+                loginId: ad.loginId,
+                welcomeId: ad.welcomeId,
+            }); });
+        });
+        var findAd = function (subId, adId) {
+            var ad = subCampaignsFlat.find(function (item) { return item.adId === adId && item.subCampaignId === subId; });
+            return ad;
+        };
+        var groupedData = inputData.reduce(function (acc, item) {
+            var _a, _b, _c;
+            var domainId = item.domainId;
+            if (!acc[domainId]) {
+                var domain = domains.find(function (d) { return d.domainId === domainId; });
+                acc[domainId] = {
+                    id: domainId,
+                    domain: {
+                        domainName: domain === null || domain === void 0 ? void 0 : domain.name,
+                        domainId: domain === null || domain === void 0 ? void 0 : domain.domainId,
+                    },
+                    detail: [],
+                };
+            }
+            // Tạo linkPreview chỉ nếu chưa tồn tại
+            var existingDetail = acc[domainId].detail.find(function (detail) {
+                return detail.loginId === item.loginId &&
+                    detail.welcomeId === item.welcomeId;
+            });
+            if (!existingDetail) {
+                acc[domainId].detail.push({
+                    id: (0, Helpers_1.generateUUID)(),
+                    linkPreview: renderLinkPreview({
+                        loginId: item.loginId,
+                        welcomeId: item.welcomeId,
+                    }, domainId),
+                    campaign: [],
+                    status: item.status,
+                    description: item.description,
+                    loginId: item.loginId,
+                    welcomeId: item.welcomeId,
+                });
+            }
+            var campaign = (_a = acc[domainId].detail.find(function (detail) {
+                return detail.loginId === item.loginId &&
+                    detail.welcomeId === item.welcomeId;
+            })) === null || _a === void 0 ? void 0 : _a.campaign;
+            var subCampaign = campaign.find(function (c) { return c.subCampaigns[0].id === item.campaignGroupId; });
+            if (!subCampaign) {
+                var sub = subCampaigns.find(function (subCampaign) {
+                    return subCampaign.campaignGroup.id ===
+                        item.campaignGroupId;
+                });
+                subCampaign = {
+                    subCampaigns: [
+                        {
+                            id: sub.campaignGroup.id,
+                            name: sub.campaignGroup.name,
+                        },
+                    ],
+                    ads: [],
+                };
+                campaign.push(subCampaign);
+            }
+            subCampaign.ads.push({
+                id: item.campaignAdId,
+                name: (_c = (_b = findAd(subCampaign.subCampaigns[0].id, item.campaignAdId)) === null || _b === void 0 ? void 0 : _b.adName) !== null && _c !== void 0 ? _c : '',
+            });
+            return acc;
+        }, {});
+        return Object.values(groupedData);
+    };
+    var fetchDomains = (0, react_1.useCallback)(function (ids) {
+        if (ids.length > 0 && service.domainsGetByIds) {
+            service.domainsGetByIds(ids).then(setDomains);
+        }
+    }, [service.domainsGetByIds, setDomains]);
+    var dataDiff = function (apiData, currentData) {
+        var mergedData = currentData.map(function (currentItem) {
+            var matchingApiItem = apiData.find(function (apiItem) {
+                return apiItem.domainId === currentItem.domainId &&
+                    apiItem.campaignGroupId === currentItem.campaignGroupId &&
+                    apiItem.campaignAdId === currentItem.campaignAdId;
+            });
+            if (matchingApiItem) {
+                return __assign(__assign({}, currentItem), { status: matchingApiItem.status });
+            }
+            return currentItem;
+        });
+        return mergedData;
+    };
+    var campaignApprovalMerged = function (oldData, newData) {
+        return newData.map(function (newItem) {
+            var newDomainId = newItem.domain.domainId;
+            newItem.detail = newItem.detail.map(function (newDetail) {
+                var oldItem = oldData.find(function (item) { return item.domain.domainId === newDomainId; });
+                if (oldItem) {
+                    var oldDetail = oldItem.detail.find(function (detail) {
+                        return detail.welcomeId === newDetail.welcomeId &&
+                            detail.loginId === newDetail.loginId;
+                    });
+                    if (oldDetail) {
+                        return __assign(__assign({}, newDetail), { status: oldDetail.status });
+                    }
+                }
+                return newDetail;
+            });
+            return newItem;
+        });
+    };
+    (0, react_1.useEffect)(function () {
+        if (!Boolean(service.attributesGetByObjectTypeCode))
+            icons_material_1.KeyboardReturn;
+        if (!domains.length)
+            return setCampaignApprovalTable([]);
+        // if (campaignApproval?.length) {
+        //     return setCampaignApprovalTable(unflattenData(campaignApproval))
+        // }
+        if (areAllTrue(subCampaignDetailValid) &&
+            areAllTrue(subCampaignAdsValid)) {
+            var data = domains.map(function (domain) {
+                return {
+                    id: domain.domainId,
+                    domain: {
+                        domainName: domain.name,
+                        domainId: domain.domainId,
+                    },
+                    detail: renderDataDetail(domain.domainId),
+                };
+            });
+            return setCampaignApprovalTable(campaignApprovalMerged(unflattenData(oldCampaignApproval.current), data));
+        }
+    }, [domains, subCampaigns]);
+    (0, react_1.useEffect)(function () {
+        if (!lodash_1.default.isEqual(prevDomainIds.current, domainIds)) {
+            fetchDomains(domainIds);
+            prevDomainIds.current = domainIds;
+        }
+    }, [domainIds]);
+    (0, react_1.useEffect)(function () {
+        if (campaignApprovalTable.length > 0) {
+            setCampaignApproval(flattenData(campaignApprovalTable));
+        }
+    }, [campaignApprovalTable]);
+    (0, react_1.useEffect)(function () {
+        if (!oldCampaignApproval.current.length && isInit) {
+            oldCampaignApproval.current = campaignApproval !== null && campaignApproval !== void 0 ? campaignApproval : [];
+            setIsInit(true);
+        }
+    }, [campaignApproval]);
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
+};
+exports.default = RunInBackground;

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

@@ -1,28 +1 @@
-interface IItem {
-    id?: number;
-    name?: string;
-}
-export interface ICammpaignItem {
-    subCampaigns: IItem[];
-    ads: IItem[];
-}
-export interface IDetail {
-    id?: string;
-    status: number;
-    linkPreview: string;
-    subCampaigns?: IItem[];
-    loginId?: string;
-    welcomeId?: string;
-    campaign: ICammpaignItem[];
-    description: string;
-}
-export interface IDataTable {
-    id: string;
-    domain: {
-        domainName?: string;
-        domainId?: string;
-    };
-    detail: IDetail[];
-}
 export default function TabApprove(): import("react/jsx-runtime").JSX.Element;
-export {};

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

@@ -25,128 +25,23 @@ var __importDefault = (this && this.__importDefault) || function (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 Router_1 = require("../../../../AWING/Router");
-var lodash_1 = __importDefault(require("lodash"));
 var react_1 = require("react");
 var react_i18next_1 = require("react-i18next");
 var recoil_1 = require("recoil");
 var Recoils_1 = require("../Recoils");
 var RowTable_1 = __importDefault(require("./RowTable"));
-var Helpers_1 = require("../../../../Utils/Helpers");
 function TabApprove() {
     var t = (0, react_i18next_1.useTranslation)().t;
-    var campaignId = (0, Router_1.useParams)().campaignId;
-    var _a = (0, recoil_1.useRecoilState)(Recoils_1.campaignApprovalState), campaignApproval = _a[0], setCampaignApproval = _a[1];
     var setConfirmExit = (0, recoil_1.useSetRecoilState)(Recoils_1.confirmExitState);
-    var _b = (0, react_1.useState)([]), rowSelected = _b[0], setRowSelected = _b[1];
-    var _c = (0, react_1.useState)([]), domains = _c[0], setDomains = _c[1];
-    var subCampaigns = (0, recoil_1.useRecoilValue)(Recoils_1.campaignGroupsState);
-    var _d = (0, Hooks_1.default)(), service = _d.service, defaultDomainId = _d.domainId;
-    var _e = (0, react_1.useState)([]), dataTable = _e[0], setDataTable = _e[1];
-    var domainIds = (0, react_1.useMemo)(function () {
-        var ads = subCampaigns.flatMap(function (sub) { return sub.ads; });
-        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));
-    }, [subCampaigns]);
-    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);
-        if (ad.welcomeId)
-            url += "&welcomeId=".concat(ad.welcomeId, "&isNetworkCampaign=").concat(Boolean(service.domainsGetAll).toString());
-        if (domainId)
-            url += "&domainId=".concat(domainId);
-        return url;
-    };
-    var mergedData = function (data) {
-        return data.reduce(function (acc, detail) {
-            var existingLink = acc.find(function (l) { return l.linkPreview === detail.linkPreview; });
-            if (existingLink) {
-                var existingCampaign = existingLink.campaign.find(function (item) {
-                    return item.subCampaigns.find(function (subCampaign) {
-                        return subCampaign.id ===
-                            detail.campaign[0].subCampaigns[0].id;
-                    });
-                });
-                if (existingCampaign) {
-                    existingCampaign.ads.push({
-                        id: detail.campaign[0].ads[0].id,
-                        name: detail.campaign[0].ads[0].name,
-                    });
-                }
-                else {
-                    detail.campaign.forEach(function (item) {
-                        existingLink.campaign.push(item);
-                    });
-                }
-            }
-            else {
-                acc.push({
-                    id: (0, Helpers_1.generateUUID)(),
-                    linkPreview: detail.linkPreview,
-                    campaign: detail.campaign,
-                    status: detail.status,
-                    description: detail.description,
-                    loginId: detail.loginId,
-                    welcomeId: detail.welcomeId,
-                });
-            }
-            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 {
-                        linkPreview: renderLinkPreview(ad, domainId),
-                        campaign: [
-                            {
-                                subCampaigns: [
-                                    {
-                                        id: subCampaign
-                                            .campaignGroup.id,
-                                        name: subCampaign
-                                            .campaignGroup.name,
-                                    },
-                                ],
-                                ads: [
-                                    {
-                                        id: ad.id,
-                                        name: ad.name,
-                                    },
-                                ],
-                            },
-                        ],
-                        loginId: ad.loginId,
-                        welcomeId: ad.welcomeId,
-                        description: '',
-                        status: 0,
-                    };
-                }
-            })
-                .filter(Boolean);
-        })
-            .flat()
-            .filter(Boolean));
-    };
+    var _a = (0, react_1.useState)([]), rowSelected = _a[0], setRowSelected = _a[1];
+    var _b = (0, recoil_1.useRecoilState)(Recoils_1.campaignApprovalTableState), campaignApprovalTable = _b[0], setCampaignApprovalTable = _b[1];
     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);
         });
     }, []);
     var updateRow = (0, react_1.useCallback)(function (dataUpdate, rowId, linkId) {
-        setDataTable(function (pre) {
+        setCampaignApprovalTable(function (pre) {
             return pre.map(function (item) {
                 if (item.id === rowId) {
                     return __assign(__assign({}, item), { detail: item.detail.map(function (detail) {
@@ -160,148 +55,14 @@ function TabApprove() {
             });
         });
         setConfirmExit(true);
-    }, [setCampaignApproval, dataTable]);
-    function flattenData(data) {
-        var flattened = [];
-        var index = 0;
-        data.forEach(function (item) {
-            item.detail.forEach(function (detail) {
-                detail.campaign.forEach(function (campaign) {
-                    campaign.ads.forEach(function (ad) {
-                        var _a;
-                        flattened.push({
-                            id: index++,
-                            campaignId: campaignId,
-                            domainId: item.domain.domainId,
-                            status: detail.status,
-                            loginId: detail.loginId,
-                            welcomeId: detail.welcomeId,
-                            description: detail.description,
-                            campaignGroupId: (_a = campaign.subCampaigns[0]) === null || _a === void 0 ? void 0 : _a.id,
-                            campaignAdId: ad === null || ad === void 0 ? void 0 : ad.id,
-                        });
-                    });
-                });
-            });
-        });
-        return flattened;
-    }
-    var unflattenData = function (inputData) {
-        var subCampaignsFlat = subCampaigns.flatMap(function (item) {
-            var subCampaignId = item.campaignGroup.id;
-            var subCampaignName = item.campaignGroup.name;
-            return item.ads.map(function (ad) { return ({
-                subCampaignId: subCampaignId,
-                subCampaignName: subCampaignName,
-                adId: ad.id,
-                adName: ad.name,
-                loginId: ad.loginId,
-                welcomeId: ad.welcomeId,
-            }); });
-        });
-        var findAd = function (subId, adId) {
-            var ad = subCampaignsFlat.find(function (item) { return item.adId === adId && item.subCampaignId === subId; });
-            return ad;
-        };
-        var groupedData = inputData.reduce(function (acc, item) {
-            var _a, _b, _c;
-            var domainId = item.domainId;
-            if (!acc[domainId]) {
-                var domain = domains.find(function (d) { return d.domainId === domainId; });
-                acc[domainId] = {
-                    id: domainId,
-                    domain: {
-                        domainName: domain === null || domain === void 0 ? void 0 : domain.name,
-                        domainId: domain === null || domain === void 0 ? void 0 : domain.domainId,
-                    },
-                    detail: [],
-                };
-            }
-            // Tạo linkPreview chỉ nếu chưa tồn tại
-            var existingDetail = acc[domainId].detail.find(function (detail) {
-                return detail.loginId === item.loginId &&
-                    detail.welcomeId === item.welcomeId;
-            });
-            if (!existingDetail) {
-                acc[domainId].detail.push({
-                    id: (0, Helpers_1.generateUUID)(),
-                    linkPreview: renderLinkPreview({
-                        loginId: item.loginId,
-                        welcomeId: item.welcomeId,
-                    }, domainId),
-                    campaign: [],
-                    status: item.status,
-                    description: item.description,
-                    loginId: item.loginId,
-                    welcomeId: item.welcomeId,
-                });
-            }
-            var campaign = (_a = acc[domainId].detail.find(function (detail) {
-                return detail.loginId === item.loginId &&
-                    detail.welcomeId === item.welcomeId;
-            })) === null || _a === void 0 ? void 0 : _a.campaign;
-            var subCampaign = campaign.find(function (c) { return c.subCampaigns[0].id === item.campaignGroupId; });
-            if (!subCampaign) {
-                var sub = subCampaigns.find(function (subCampaign) {
-                    return subCampaign.campaignGroup.id ===
-                        item.campaignGroupId;
-                });
-                subCampaign = {
-                    subCampaigns: [
-                        {
-                            id: sub.campaignGroup.id,
-                            name: sub.campaignGroup.name,
-                        },
-                    ],
-                    ads: [],
-                };
-                campaign.push(subCampaign);
-            }
-            subCampaign.ads.push({
-                id: item.campaignAdId,
-                name: (_c = (_b = findAd(subCampaign.subCampaigns[0].id, item.campaignAdId)) === null || _b === void 0 ? void 0 : _b.adName) !== null && _c !== void 0 ? _c : '',
-            });
-            return acc;
-        }, {});
-        return Object.values(groupedData);
-    };
+    }, [campaignApprovalTable]);
     var handleSelectAll = (0, react_1.useCallback)(function () {
         setRowSelected(function (pre) {
-            return pre.length < dataTable.length
-                ? dataTable.map(function (item) { return item.id; })
+            return pre.length < campaignApprovalTable.length
+                ? campaignApprovalTable.map(function (item) { return item.id; })
                 : [];
         });
-    }, [dataTable]);
-    (0, react_1.useEffect)(function () {
-        if (!domains.length)
-            return setDataTable([]);
-        var data;
-        if (campaignApproval === null || campaignApproval === void 0 ? void 0 : campaignApproval.length) {
-            return setDataTable(unflattenData(campaignApproval));
-        }
-        data = domains.map(function (domain) {
-            return {
-                id: domain.domainId,
-                domain: {
-                    domainName: domain.name,
-                    domainId: domain.domainId,
-                },
-                detail: renderDataDetail(domain.domainId),
-            };
-        });
-        return setDataTable(data);
-    }, [domains]);
-    (0, react_1.useEffect)(function () {
-        if (domainIds.length > 0) {
-            service.domainsGetByIds &&
-                service.domainsGetByIds(domainIds).then(setDomains);
-        }
-    }, [domainIds]);
-    (0, react_1.useEffect)(function () {
-        if (dataTable.length > 0) {
-            setCampaignApproval(flattenData(dataTable));
-        }
-    }, [dataTable]);
+    }, [campaignApprovalTable]);
     return ((0, jsx_runtime_1.jsxs)(material_1.TableContainer, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { variant: "outlined", color: "primary", disabled: !rowSelected.length, sx: {
                     margin: '1rem',
                 }, children: t('Campaign.Approval.SendEmail') }), (0, jsx_runtime_1.jsxs)(material_1.Table, { sx: {
@@ -310,8 +71,10 @@ function TabApprove() {
                         border: 'none !important',
                     },
                 }, 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" }) }), (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.Advertisement') }), (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 (row) {
+                                            rowSelected.length <
+                                                campaignApprovalTable.length, checked: rowSelected.length > 0 &&
+                                            rowSelected.length ===
+                                                campaignApprovalTable.length, onChange: handleSelectAll, inputProps: { 'aria-label': 'select all ad' }, color: "primary" }) }), (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.Advertisement') }), (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: campaignApprovalTable.map(function (row) {
                             return row.detail.map(function (link, linkIndex) {
                                 return link.campaign.map(function (sub, subIndex) { return ((0, jsx_runtime_1.jsx)(RowTable_1.default, { row: row, link: link, sub: sub, linkIndex: linkIndex, subIndex: subIndex, rowSelected: rowSelected, handleRowSelect: handleRowSelect, updateRow: updateRow }, "".concat(row.id, "-").concat(linkIndex, "-").concat(subIndex))); });
                             });

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

@@ -62,6 +62,7 @@ var TabStatistic_1 = __importDefault(require("./TabStatistic"));
 var Enum_2 = require("../../../ACM-AXN/Common/Enum");
 var Context_1 = require("../../../Context");
 var TabApprove_1 = __importDefault(require("./TabApprove"));
+var RunInBackground_1 = __importDefault(require("./TabApprove/RunInBackground"));
 var CreateOrEdit = function (props) {
     var _a;
     var _b = (0, Router_1.useParams)(), campaignId = _b.campaignId, tabName = _b.tabName;
@@ -320,28 +321,28 @@ var CreateOrEdit = function (props) {
                 flexDirection: 'column',
                 flexGrow: 1,
                 padding: function (theme) { return theme.spacing(3); },
-            }, children: loading ? ((0, jsx_runtime_1.jsx)(AWING_1.CircularProgress, {})) : ((0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, component: material_1.Paper, sx: { width: '100%', padding: 0 }, children: (0, jsx_runtime_1.jsxs)(lab_1.TabContext, { value: value, children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: { borderBottom: 1, borderColor: 'divider' }, children: (0, jsx_runtime_1.jsx)(lab_1.TabList, { variant: "scrollable", onChange: handleChangeTab, "aria-label": "lab API tabs example", children: tabsList.map(function (tab, idx) { return ((0, jsx_runtime_1.jsx)(material_1.Tab, { sx: { minWidth: '160px' }, value: String(idx), label: (0, jsx_runtime_1.jsx)(TabLabel_1.default, { content: (0, jsx_runtime_1.jsx)("div", { style: {
-                                                fontWeight: 600,
-                                                fontSize: '0.875rem',
-                                            }, children: tab.label }), error: (tab === null || tab === void 0 ? void 0 : tab.valid)
-                                            ? !tabValid[tab === null || tab === void 0 ? void 0 : tab.valid]
-                                            : undefined, errContent: (0, jsx_runtime_1.jsx)("span", { style: {
-                                                marginLeft: '-5px',
-                                            }, children: "*" }) }) }, idx)); }) }) }), campaignData.campaignWizard && !editModeWizard &&
-                            (props === null || props === void 0 ? void 0 : props.quickWizard) ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [props === null || props === void 0 ? void 0 : props.quickWizard({
-                                    ref: childRefWizard,
-                                    onSubmitWizard: handleSubmit,
-                                    handleValidWizad: setValidWizad,
-                                    handleEditMode: setEditModeWizard,
-                                    sxEdit: {
-                                        display: value === '0'
-                                            ? 'block'
-                                            : 'none',
-                                    },
-                                    type: props.type,
-                                }), tabsList.map(function (tab, idx) {
-                                    return idx !== 0 && ((0, jsx_runtime_1.jsx)(lab_1.TabPanel, { sx: { padding: '0' }, value: String(idx), children: tab.component }, idx));
-                                })] })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: tabsList.map(function (tab, idx) { return ((0, jsx_runtime_1.jsx)(lab_1.TabPanel, { sx: { padding: '0' }, value: String(idx), children: tab.component }, idx)); }) }))] }) })) }) }));
+            }, children: loading ? ((0, jsx_runtime_1.jsx)(AWING_1.CircularProgress, {})) : ((0, jsx_runtime_1.jsxs)(material_1.Grid, { item: true, component: material_1.Paper, sx: { width: '100%', padding: 0 }, children: [(0, jsx_runtime_1.jsxs)(lab_1.TabContext, { value: value, children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: { borderBottom: 1, borderColor: 'divider' }, children: (0, jsx_runtime_1.jsx)(lab_1.TabList, { variant: "scrollable", onChange: handleChangeTab, "aria-label": "lab API tabs example", children: tabsList.map(function (tab, idx) { return ((0, jsx_runtime_1.jsx)(material_1.Tab, { sx: { minWidth: '160px' }, value: String(idx), label: (0, jsx_runtime_1.jsx)(TabLabel_1.default, { content: (0, jsx_runtime_1.jsx)("div", { style: {
+                                                    fontWeight: 600,
+                                                    fontSize: '0.875rem',
+                                                }, children: tab.label }), error: (tab === null || tab === void 0 ? void 0 : tab.valid)
+                                                ? !tabValid[tab === null || tab === void 0 ? void 0 : tab.valid]
+                                                : undefined, errContent: (0, jsx_runtime_1.jsx)("span", { style: {
+                                                    marginLeft: '-5px',
+                                                }, children: "*" }) }) }, idx)); }) }) }), campaignData.campaignWizard && !editModeWizard &&
+                                (props === null || props === void 0 ? void 0 : props.quickWizard) ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [props === null || props === void 0 ? void 0 : props.quickWizard({
+                                        ref: childRefWizard,
+                                        onSubmitWizard: handleSubmit,
+                                        handleValidWizad: setValidWizad,
+                                        handleEditMode: setEditModeWizard,
+                                        sxEdit: {
+                                            display: value === '0'
+                                                ? 'block'
+                                                : 'none',
+                                        },
+                                        type: props.type,
+                                    }), tabsList.map(function (tab, idx) {
+                                        return idx !== 0 && ((0, jsx_runtime_1.jsx)(lab_1.TabPanel, { sx: { padding: '0' }, value: String(idx), children: tab.component }, idx));
+                                    })] })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: tabsList.map(function (tab, idx) { return ((0, jsx_runtime_1.jsx)(lab_1.TabPanel, { sx: { padding: '0' }, value: String(idx), children: tab.component }, idx)); }) }))] }), (0, jsx_runtime_1.jsx)(RunInBackground_1.default, {})] })) }) }));
 };
 // eslint-disable-next-line import/no-anonymous-default-export
 exports.default = (0, Wrapper_1.default)(CreateOrEdit, { component: recoil_1.RecoilRoot });

package/lib/ACM-AXN/Campaign/Types.d.ts

@@ -290,4 +290,30 @@ export interface CampaignFeatureProps {
     isAxn?: boolean;
     quickWizard?: (p?: any) => JSX.Element;
 }
+interface ICampaignApprovalItemSubRow {
+    id?: number;
+    name?: string;
+}
+export interface ICampaignApprovalSubRow {
+    subCampaigns: ICampaignApprovalItemSubRow[];
+    ads: ICampaignApprovalItemSubRow[];
+}
+export interface ICampaignApprovalTableRow {
+    id?: string;
+    status: number;
+    linkPreview: string;
+    subCampaigns?: ICampaignApprovalItemSubRow[];
+    loginId?: string;
+    welcomeId?: string;
+    campaign: ICampaignApprovalSubRow[];
+    description: string;
+}
+export interface ICampaignApprovalTable {
+    id: string;
+    domain: {
+        domainName?: string;
+        domainId?: string;
+    };
+    detail: ICampaignApprovalTableRow[];
+}
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "awing-library",
-    "version": "2.1.226-dev",
+    "version": "2.1.227-dev",
     "description": "",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",