awing-library 2.1.26-beta → 2.1.26

package/lib/ACM-AXN/Notifications/NotificationPopover/Container.js

@@ -0,0 +1,149 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+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");
+/**
+ *
+ * @author dauquan1108@gmail.com on 12/1/2023.
+ *
+ **/
+var react_1 = require("react");
+var material_1 = require("@mui/material");
+var Notifications_1 = __importDefault(require("@mui/icons-material/Notifications"));
+var signalr_1 = require("@microsoft/signalr");
+var Constant_1 = require("../Constant");
+var Hooks_1 = __importDefault(require("../Hooks"));
+var NotificationDetail_1 = __importDefault(require("../NotificationDetail"));
+var Container = function () {
+    var service = (0, Hooks_1.default)().service;
+    var _a = (0, react_1.useState)(null), anchorEl = _a[0], setAnchorEl = _a[1];
+    var _b = (0, react_1.useState)(0), totalNotification = _b[0], setTotalNotification = _b[1];
+    var _c = (0, react_1.useState)(null), signalRConnection = _c[0], setSignalRConnection = _c[1];
+    (0, react_1.useEffect)(function () {
+        service.notificationsCountUnreadMessages().then(setTotalNotification);
+        setUpSignalRConnection().then(function (connection) { return __awaiter(void 0, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                setSignalRConnection(connection);
+                return [2 /*return*/];
+            });
+        }); });
+        return function () {
+            if (signalRConnection)
+                signalRConnection.stop();
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    var setUpSignalRConnection = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var connection, err_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    connection = new signalr_1.HubConnectionBuilder()
+                        .withUrl("".concat(Constant_1.Constants.API_ENDPOINT, "/api/hubs/notification"))
+                        .configureLogging(signalr_1.LogLevel.None)
+                        .withAutomaticReconnect([0, 5000, 10000, 15000])
+                        .build();
+                    connection.on('ReceiveMessage', function (message) {
+                        setTotalNotification(function (prev) { return prev + 1; });
+                    });
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 3, , 4]);
+                    return [4 /*yield*/, connection.start()];
+                case 2:
+                    _a.sent();
+                    return [3 /*break*/, 4];
+                case 3:
+                    err_1 = _a.sent();
+                    console.log(err_1);
+                    return [3 /*break*/, 4];
+                case 4: return [2 /*return*/, connection];
+            }
+        });
+    }); };
+    var handleClick = function (event) {
+        var href = window.location.href;
+        // nếu đang ở notifications thì click vào quả chuông sẽ không mở popover nữa.
+        if (!href.includes(Constant_1.Constants.NOTIFICATIONS_PATH)) {
+            setTotalNotification(0);
+            setAnchorEl(event.currentTarget);
+        }
+    };
+    var handleClose = function () {
+        setAnchorEl(null);
+    };
+    var open = Boolean(anchorEl);
+    var id = open ? 'simple-popover' : undefined;
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { component: "div", children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, { "aria-describedby": id, onClick: handleClick, sx: { backgroundColor: open ? '#F98D9C' : 'inherit' }, children: (0, jsx_runtime_1.jsx)(material_1.Badge, { badgeContent: totalNotification, color: "error", children: (0, jsx_runtime_1.jsx)(Notifications_1.default, { "data-testid": "notification-icon", sx: { color: open ? '#DD040C' : 'inherit' } }) }) }), (0, jsx_runtime_1.jsx)(material_1.Popover, { id: id, open: open, anchorEl: anchorEl, onClose: handleClose, sx: { zIndex: 1100 }, anchorOrigin: {
+                    vertical: 'bottom',
+                    horizontal: 'center',
+                }, transformOrigin: {
+                    vertical: 'top',
+                    horizontal: 'center',
+                }, PaperProps: {
+                    style: {
+                        borderRadius: '8px',
+                    },
+                }, children: (0, jsx_runtime_1.jsx)(material_1.Box, { "data-testid": "popover", component: "div", sx: [
+                        {
+                            width: '400px',
+                            overflowY: 'auto',
+                            maxHeight: 'calc(90vh - 8px)',
+                        },
+                        {
+                            '&::-webkit-scrollbar': {
+                                width: '10px',
+                            },
+                        },
+                        {
+                            '&::-webkit-scrollbar-track': {
+                                backgroundColor: '#f1f1f1',
+                            },
+                        },
+                        {
+                            '&::-webkit-scrollbar-thumb': {
+                                borderRadius: '4px',
+                                backgroundColor: '#c1c1c1',
+                            },
+                        },
+                    ], children: (0, jsx_runtime_1.jsx)(NotificationDetail_1.default, { onClosePopover: handleClose }) }) })] }));
+};
+exports.default = Container;

package/lib/ACM-AXN/Notifications/{NotificationPopover.test.d.ts → NotificationPopover/Container.test.d.ts}

@@ -3,4 +3,4 @@
  * @author dauquan1108@gmail.com on 12/7/2023.
  *
  **/
-import "@testing-library/jest-dom";
+import '@testing-library/jest-dom';

package/lib/ACM-AXN/Notifications/{NotificationPopover.test.js → NotificationPopover/Container.test.js}

@@ -7,11 +7,11 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 require("@testing-library/jest-dom");
 var react_1 = require("@testing-library/react");
 // Component
-var NotificationPopover_1 = __importDefault(require("./NotificationPopover"));
-describe("NotificationPopover", function () {
-    it("renders the component", function () {
-        var getByTestId = (0, react_1.render)((0, jsx_runtime_1.jsx)(NotificationPopover_1.default, {})).getByTestId;
-        var notificationsIcon = getByTestId("notification-icon");
+var Container_1 = __importDefault(require("./Container"));
+describe('NotificationPopover', function () {
+    it('renders the component', function () {
+        var getByTestId = (0, react_1.render)((0, jsx_runtime_1.jsx)(Container_1.default, {})).getByTestId;
+        var notificationsIcon = getByTestId('notification-icon');
         expect(notificationsIcon).toBeInTheDocument();
     });
     // it("Mở dao diện 'NotificationPopover' khi click vào quả chuông.", async () => {

package/lib/ACM-AXN/Notifications/NotificationPopover/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ *
+ * @author dauquan1108@gmail.com on 12/1/2023.
+ *
+ **/
+import React from 'react';
+import { NotificationPropsContext } from '../Types';
+export declare const NotificationPopover: React.FC<NotificationPropsContext>;

package/lib/ACM-AXN/Notifications/NotificationPopover/index.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NotificationPopover = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var Container_1 = __importDefault(require("./Container"));
+var Context_1 = require("../Context");
+var NotificationPopover = function (props) {
+    return ((0, jsx_runtime_1.jsx)(Context_1.NotificationContext.Provider, { value: props, children: (0, jsx_runtime_1.jsx)(Container_1.default, {}) }));
+};
+exports.NotificationPopover = NotificationPopover;

package/lib/ACM-AXN/Notifications/NotificationScreen.d.ts

@@ -3,6 +3,6 @@
  * @author dauquan1108@gmail.com on 11/27/2023.
  *
  **/
-import React from "react";
+import React from 'react';
 declare const NotificationScreen: React.FC;
 export default NotificationScreen;

package/lib/ACM-AXN/Notifications/NotificationScreen.js

@@ -8,11 +8,11 @@ var Box_1 = __importDefault(require("@mui/material/Box"));
 var NotificationDetail_1 = __importDefault(require("./NotificationDetail"));
 var NotificationScreen = function () {
     return ((0, jsx_runtime_1.jsx)(Box_1.default, { component: "div", sx: {
-            borderRadius: "8px",
-            border: "0.1px solid #0000001a",
-            boxShadow: "0 4px 8px rgba(0, 0, 0, 0.1)",
+            borderRadius: '8px',
+            border: '0.1px solid #0000001a',
+            boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)',
         }, "data-testid": "notificationScreen", 
         // width={{xs, sm, md, lg, xl}}
-        width: { xs: "100%", sm: "600px", lg: "680px" }, children: (0, jsx_runtime_1.jsx)(NotificationDetail_1.default, {}) }));
+        width: { xs: '100%', sm: '600px', lg: '680px' }, children: (0, jsx_runtime_1.jsx)(NotificationDetail_1.default, {}) }));
 };
 exports.default = NotificationScreen;

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

@@ -0,0 +1,84 @@
+/**
+ *
+ * @author dauquan1108@gmail.com on 04/15/2024.
+ *
+ **/
+import { Timestamp } from '../../ACM-AXN/Campaign/Types';
+import { SagaTransactionType } from '../../ACM-AXN/TransactionLog/Types';
+export interface IValueFilterState {
+    textSearch: string;
+    tabs: string;
+    status: number | undefined;
+}
+export interface IValueItem {
+    id: number;
+    status: NotificationMessageStatus;
+}
+export interface INotificationItem {
+    id: string | number;
+    content: string;
+    url: string;
+    status: boolean;
+    userName: string;
+    avatarUrl: string;
+    time: number | string;
+}
+export interface Cancel {
+    message: string | undefined;
+}
+export interface CancelToken {
+    promise: Promise<Cancel>;
+    reason?: Cancel;
+    throwIfRequested(): void;
+}
+export interface NotificationPropsContext {
+    service: NotificationService;
+}
+export interface NotificationService {
+    /**
+     *  notificationsPaging: API hiện thị Danh sách Notification.
+     **/
+    notificationsPaging: (pageIndex: number | undefined, pageSize: number | undefined, searchString: string | undefined, status: number | undefined, body: SagaTransactionType[] | undefined, cancelToken?: CancelToken) => Promise<PagedList_1OfNotificationMessage>;
+    /**
+     *  notificationsReadAll: API Chuyển trang Notifications thành đã đọc.
+     **/
+    notificationsReadAll: (cancelToken?: CancelToken) => Promise<void>;
+    /**
+     *  notificationsRead: API Chuyển trang NotificationItem sang đã đọc.
+     **/
+    notificationsRead: (body: number[] | undefined, cancelToken?: CancelToken) => Promise<void>;
+    /**
+     *  notificationsUnread: API Chuyển trang NotificationItem sang chưa đọc.
+     **/
+    notificationsUnread: (body: number[] | undefined, cancelToken?: CancelToken) => Promise<void>;
+    /**
+     *  notificationsCountUnreadMessages: API Hiển thị số lượng thông báo chưa đọc.
+     **/
+    notificationsCountUnreadMessages: (cancelToken?: CancelToken) => Promise<number>;
+}
+export declare enum NotificationMessageStatus {
+    Unread = 0,
+    Read = 1
+}
+export interface NotificationMessage {
+    id?: number;
+    userId?: string;
+    sagaTransactionType?: SagaTransactionType[string];
+    fields?: NotificationMessageField[] | undefined;
+    status?: NotificationMessageStatus;
+    createdDate?: Timestamp;
+}
+export interface NotificationMessageField {
+    name?: string | undefined;
+    value?: string | undefined;
+    text?: string | undefined;
+}
+export interface PagedList_1OfNotificationMessage {
+    items?: NotificationMessage[] | undefined;
+    pageCount?: number;
+    totalItemCount: number;
+    pageNumber?: number;
+    pageSize?: number;
+    hasPreviousPage?: boolean;
+    hasNextPage?: boolean;
+}

package/lib/ACM-AXN/Notifications/Types.js

@@ -0,0 +1,13 @@
+"use strict";
+/**
+ *
+ * @author dauquan1108@gmail.com on 04/15/2024.
+ *
+ **/
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NotificationMessageStatus = void 0;
+var NotificationMessageStatus;
+(function (NotificationMessageStatus) {
+    NotificationMessageStatus[NotificationMessageStatus["Unread"] = 0] = "Unread";
+    NotificationMessageStatus[NotificationMessageStatus["Read"] = 1] = "Read";
+})(NotificationMessageStatus || (exports.NotificationMessageStatus = NotificationMessageStatus = {}));

package/lib/ACM-AXN/Notifications/index.d.ts

@@ -4,5 +4,5 @@
  *
  **/
 import React from 'react';
-declare const Notifications: React.FC;
-export default Notifications;
+import { NotificationPropsContext } from './Types';
+export declare const Notifications: React.FC<NotificationPropsContext>;

package/lib/ACM-AXN/Notifications/index.js

@@ -3,12 +3,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.Notifications = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var Box_1 = __importDefault(require("@mui/material/Box"));
-var i18n_1 = __importDefault(require("../../i18n"));
-var react_i18next_1 = require("react-i18next");
 var NotificationScreen_1 = __importDefault(require("./NotificationScreen"));
-var Notifications = function () {
-    return ((0, jsx_runtime_1.jsx)(react_i18next_1.I18nextProvider, { i18n: i18n_1.default, children: (0, jsx_runtime_1.jsx)(Box_1.default, { component: "div", display: "flex", justifyContent: "center", children: (0, jsx_runtime_1.jsx)(NotificationScreen_1.default, {}) }) }));
+var Context_1 = require("./Context");
+var Notifications = function (props) {
+    return ((0, jsx_runtime_1.jsx)(Context_1.NotificationContext.Provider, { value: props, children: (0, jsx_runtime_1.jsx)(Box_1.default, { component: "div", display: "flex", justifyContent: "center", children: (0, jsx_runtime_1.jsx)(NotificationScreen_1.default, {}) }) }));
 };
-exports.default = Notifications;
+exports.Notifications = Notifications;

package/lib/ACM-AXN/Page/Container.js

@@ -17,6 +17,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var icons_material_1 = require("@mui/icons-material");
 var material_1 = require("@mui/material");
+var DomainPreview_1 = __importDefault(require("../../ACM-AXN/DomainPreview"));
+var PreviewButton_1 = __importDefault(require("../../ACM-AXN/DomainPreview/PreviewButton"));
 var lodash_1 = require("lodash");
 var react_1 = require("react");
 var react_i18next_1 = require("react-i18next");
@@ -29,8 +31,6 @@ var Helpers_1 = require("../../Utils/Helpers");
 var Constant_1 = require("./Constant");
 var Context_2 = __importDefault(require("./Context"));
 var enums_1 = require("./enums");
-var DomainPreview_1 = __importDefault(require("../../ACM-AXN/DomainPreview"));
-var PreviewButton_1 = __importDefault(require("../../ACM-AXN/DomainPreview/PreviewButton"));
 var PageContainer = function () {
     var _a;
     var _b = (0, Context_2.default)(), pageCode = _b.pageCode, service = _b.service, domainId = _b.domainId, CONFIGS = _b.configs;
@@ -38,7 +38,7 @@ var PageContainer = function () {
     var t = (0, react_i18next_1.useTranslation)().t;
     var navigate = (0, react_router_1.useNavigate)();
     var location = (0, react_router_1.useLocation)();
-    var _d = (0, react_1.useState)(false), loading = _d[0], setLoading = _d[1];
+    var _d = (0, react_1.useState)(true), loading = _d[0], setLoading = _d[1];
     var _e = (0, react_1.useState)(true), init = _e[0], setInit = _e[1]; // First time render
     var _f = (0, react_1.useState)([]), directories = _f[0], setDirectories = _f[1];
     var _g = (0, react_1.useState)(true), isLoadDirectory = _g[0], setLoadLoadDirectory = _g[1];
@@ -103,6 +103,7 @@ var PageContainer = function () {
     (0, react_1.useLayoutEffect)(function () {
         setDirectories([]);
         setInit(true);
+        setLoading(true);
         setPage({
             items: [],
             totalItemCount: 0,
@@ -158,7 +159,7 @@ var PageContainer = function () {
         prevQuery.current = (0, lodash_1.cloneDeep)(input);
     }, [directories, handleFetchPaging]);
     var handlePreview = function (id, domainId) {
-        var url = "".concat(CONFIGS.CAPTIVE_DOMAIN, "/").concat(CONFIGS.PAGE_LOGIN_PREVIEW, "?loginId=").concat(id, "&domainId=").concat(domainId, "&isNetworkCampaign=false");
+        var url = "".concat(CONFIGS.CAPTIVE_DOMAIN, "/").concat(CONFIGS.PAGE_LOGIN_PREVIEW, "?loginId=").concat(id, "&domainId=").concat(domainId, "&isNetworkCampaign=").concat(Boolean(service.domainsGetAll).toString());
         window.open(url, '_blank');
     };
     var handlePreviewClick = function (id) {

package/lib/ACM-AXN/Page/CreateOrEdit/Components/useListPageView.js

@@ -30,18 +30,23 @@ var react_1 = __importStar(require("react"));
 var TabInfo_1 = __importDefault(require("../TabInfo"));
 var Tabview_1 = __importDefault(require("../Tabview"));
 var TabFile_1 = __importDefault(require("../TabFile"));
+var Recoil_1 = require("../Recoil");
 var AWING_1 = require("../../../../AWING");
 var react_i18next_1 = require("react-i18next");
 var react_router_dom_1 = require("react-router-dom");
 var recoil_1 = require("recoil");
-var Recoil_1 = require("../Recoil");
+var Recoil_2 = require("../Recoil");
 var Constant_1 = require("../../../Page/Constant");
+var Context_1 = __importDefault(require("../../../../ACM-AXN/Page/Context"));
 var useListPageView = function () {
     var _a;
     var t = (0, react_i18next_1.useTranslation)().t;
     var params = (0, react_router_dom_1.useParams)();
     var setDrawerState = (0, AWING_1.useDrawer)().setDrawerState;
-    var formValid = (0, recoil_1.useRecoilValue)(Recoil_1.validForm);
+    var formValid = (0, recoil_1.useRecoilValue)(Recoil_2.validForm);
+    var _b = (0, Context_1.default)(), configs = _b.configs, service = _b.service, pageCode = _b.pageCode;
+    var pageId = (0, recoil_1.useRecoilValue)((0, Recoil_1.pageState)('page')).page.pageId;
+    var rootDirectory = (0, recoil_1.useRecoilValue)(Recoil_1.pageRootDeirectory);
     var isCreate = !Boolean((_a = params['*']) === null || _a === void 0 ? void 0 : _a.includes(Constant_1.pageConstants.EDIT_PAGE));
     react_1.default.useEffect(function () {
         setDrawerState(AWING_1.DrawerStateEnum[!Object.values(formValid).includes(false) ? 'VALID' : 'INVALID']);
@@ -61,11 +66,11 @@ var useListPageView = function () {
         {
             label: 'File',
             valid: 'tabFileValid',
-            compoent: (0, react_1.createElement)(TabFile_1.default, { isCreate: isCreate }),
+            compoent: (0, react_1.createElement)(TabFile_1.default, { isCreate: isCreate, pageCode: pageCode, service: service, rootDirectory: rootDirectory, pageId: pageId, pathName: configs.FILE_RELATIVE_PATH }),
         },
     ]; }, 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [t]);
+    [isCreate, pageCode, pageId, rootDirectory, service, t]);
     return { tabs: tabs, formValid: formValid };
 };
 exports.default = useListPageView;

package/lib/ACM-AXN/Page/CreateOrEdit/DrawerAction.js

@@ -36,7 +36,12 @@ var DrawerAction = function (_a) {
         setAnchorEl(null);
     };
     var handlePreview = function (domainId) {
-        var url = "".concat(CONFIGS.CAPTIVE_DOMAIN, "/").concat(CONFIGS.PAGE_LOGIN_PREVIEW, "?loginId=").concat(pageId, "&domainId=").concat(domainId, "&isNetworkCampaign=false");
+        var params = new URLSearchParams({
+            loginId: pageId,
+            domainId: domainId,
+            isNetworkCampaign: Boolean(service.domainsGetAll).toString(),
+        });
+        var url = "".concat(CONFIGS.CAPTIVE_DOMAIN, "/").concat(CONFIGS.PAGE_LOGIN_PREVIEW, "?").concat(params.toString());
         window.open(url, '_blank');
     };
     var handlePreviewPage = function (e) {

package/lib/ACM-AXN/Page/CreateOrEdit/Recoil.d.ts

@@ -1,9 +1,10 @@
 import { Directory } from '../../Campaign/Types';
-import { FormValid, PageModel } from '../Types';
+import { FormValid, PageModel, PageViewEvent } from '../Types';
 export declare const pageDirectoriesState: import("recoil").RecoilState<Directory[]>;
 export declare const wiewMounted: import("recoil").RecoilState<boolean>;
 export declare const pageRootDeirectory: import("recoil").RecoilState<string>;
 export declare const pageChangedFormState: import("recoil").RecoilState<Record<keyof PageModel, boolean>>;
 export declare const pageRootState: import("recoil").RecoilState<PageModel>;
+export declare const pageEventState: import("recoil").RecoilState<PageViewEvent[]>;
 export declare const validForm: import("recoil").RecoilState<FormValid>;
 export declare const pageState: (param: keyof PageModel) => import("recoil").RecoilState<PageModel>;

package/lib/ACM-AXN/Page/CreateOrEdit/Recoil.js

@@ -11,7 +11,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.pageState = exports.validForm = exports.pageRootState = exports.pageChangedFormState = exports.pageRootDeirectory = exports.wiewMounted = exports.pageDirectoriesState = void 0;
+exports.pageState = exports.validForm = exports.pageEventState = exports.pageRootState = exports.pageChangedFormState = exports.pageRootDeirectory = exports.wiewMounted = exports.pageDirectoriesState = void 0;
 var lodash_1 = require("lodash");
 var recoil_1 = require("recoil");
 var Constant_1 = require("../Constant");
@@ -48,6 +48,7 @@ exports.pageChangedFormState = (0, recoil_1.atom)({
                 page: false,
                 commonHtml: false,
                 views: pageData.views.some(function (view) { return view.isChanged; }),
+                viewEvents: false,
             };
         },
     }),
@@ -71,6 +72,18 @@ exports.pageRootState = (0, recoil_1.atom)({
         },
         commonHtml: '',
         views: [Constant_1.defaultView],
+        viewEvents: [],
+    },
+});
+exports.pageEventState = (0, recoil_1.selector)({
+    key: 'pageEventState',
+    get: function (_a) {
+        var get = _a.get;
+        return get(exports.pageRootState).viewEvents;
+    },
+    set: function (_a, newValue) {
+        var set = _a.set;
+        set(exports.pageRootState, function (prev) { return (__assign(__assign({}, prev), { viewEvents: newValue })); });
     },
 });
 exports.validForm = (0, recoil_1.atom)({

package/lib/ACM-AXN/Page/CreateOrEdit/TabFile/FileUtils.d.ts

@@ -1,4 +1,6 @@
-export declare const useFileUtils: (parentDirectoryId: string, objectId: string, isCreate: boolean) => {
+import { ITemplateFileService } from '../../../../ACM-AXN/Template';
+import { PageCode } from '../../../../ACM-AXN/Page/enums';
+export declare const useFileUtils: (parentDirectoryId: string, objectId: string, isCreate: boolean, service: ITemplateFileService, pageCode: PageCode) => {
     createFolder: (pathData: string, directoryName: string) => Promise<void>;
     delete: (pathData: string) => Promise<void>;
     upload: (pathData: string, files: File[]) => Promise<void>;

package/lib/ACM-AXN/Page/CreateOrEdit/TabFile/FileUtils.js

@@ -1,14 +1,9 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useFileUtils = void 0;
-var Context_1 = __importDefault(require("../../Context"));
 var Helpers_1 = require("../../../../Utils/Helpers");
 var react_1 = require("react");
-var useFileUtils = function (parentDirectoryId, objectId, isCreate) {
-    var _a = (0, Context_1.default)(), service = _a.service, pageCode = _a.pageCode;
+var useFileUtils = function (parentDirectoryId, objectId, isCreate, service, pageCode) {
     var clientMethod = (0, react_1.useMemo)(function () {
         return {
             createFolder: function (pathData, directoryName) {

package/lib/ACM-AXN/Page/CreateOrEdit/TabFile/index.d.ts

@@ -1,6 +1,13 @@
 import { FC } from 'react';
+import { ITemplateFileService } from '../../../../ACM-AXN/Template';
+import { PageCode } from '../../../../ACM-AXN/Page/enums';
 interface FileTabProps {
     isCreate?: boolean;
+    pathName?: string;
+    service: ITemplateFileService;
+    rootDirectory: string;
+    pageId: string;
+    pageCode: PageCode;
 }
 declare const FileTab: FC<FileTabProps>;
 export default FileTab;

package/lib/ACM-AXN/Page/CreateOrEdit/TabFile/index.js

@@ -20,25 +20,23 @@ var DeprecatedEnhancedDialog_1 = __importDefault(require("../../../../Commons/Co
 var react_1 = require("react");
 var react_i18next_1 = require("react-i18next");
 var FileUtils_1 = require("./FileUtils");
-var Context_1 = __importDefault(require("../../Context"));
-var Recoil_1 = require("../Recoil");
-var recoil_1 = require("recoil");
 var FolderTreeView_1 = __importDefault(require("../../../../Commons/Components/FolderTreeView"));
 var AWING_1 = require("../../../../AWING");
-var Context_2 = require("../../../../Context");
+var Context_1 = require("../../../../Context");
 var FileTab = function (_a) {
-    var isCreate = _a.isCreate;
+    var isCreate = _a.isCreate, pathName = _a.pathName, service = _a.service, rootDirectory = _a.rootDirectory, pageId = _a.pageId, pageCode = _a.pageCode;
     var t = (0, react_i18next_1.useTranslation)().t;
-    var _b = (0, Context_1.default)(), service = _b.service, configs = _b.configs, pageCode = _b.pageCode;
-    var _c = (0, Context_2.useAwing)().appHelper, confirm = _c.confirm, snackbar = _c.snackbar;
-    var pageId = (0, recoil_1.useRecoilValue)((0, Recoil_1.pageState)('page')).page.pageId;
-    var rootDirectory = (0, recoil_1.useRecoilValue)(Recoil_1.pageRootDeirectory);
-    var fileMethod = (0, FileUtils_1.useFileUtils)(rootDirectory, pageId, Boolean(isCreate));
+    var _b = (0, Context_1.useAwing)().appHelper, confirm = _b.confirm, snackbar = _b.snackbar;
+    // const {
+    //     page: { pageId },
+    // } = useRecoilValue(pageState('page'))
+    // const rootDirectory = useRecoilValue(pageRootDeirectory)
+    var fileMethod = (0, FileUtils_1.useFileUtils)(rootDirectory, pageId, Boolean(isCreate), service, pageCode);
     var fileRef = (0, react_1.useRef)();
-    var _d = (0, react_1.useState)({ upload: '', create: '' }), pathData = _d[0], setPathData = _d[1];
-    var _e = (0, react_1.useState)(false), openCreateFolder = _e[0], setOpenCreateFolder = _e[1];
-    var _f = (0, react_1.useState)(true), triggerReload = _f[0], setTrigger = _f[1];
-    var _g = (0, react_1.useState)(), treeFolder = _g[0], setTreeFolder = _g[1];
+    var _c = (0, react_1.useState)({ upload: '', create: '' }), pathData = _c[0], setPathData = _c[1];
+    var _d = (0, react_1.useState)(false), openCreateFolder = _d[0], setOpenCreateFolder = _d[1];
+    var _e = (0, react_1.useState)(true), triggerReload = _e[0], setTrigger = _e[1];
+    var _f = (0, react_1.useState)(), treeFolder = _f[0], setTreeFolder = _f[1];
     (0, react_1.useEffect)(function () {
         getTreeFolder();
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -107,6 +105,6 @@ var FileTab = function (_a) {
                                     pointerEvents: 'unset',
                                     padding: '10px 0',
                                     borderRadius: '4px',
-                                }, children: !treeFolder ? ((0, jsx_runtime_1.jsx)(AWING_1.CircularProgress, {})) : ((0, jsx_runtime_1.jsx)(FolderTreeView_1.default, { rootItem: treeFolder, onUploadFiles: handleUploadFile, onCreateDirectory: handleCreateDirectory, onDownload: handleDownloadFile, onDelete: handleDelete, onDownloadFolder: handleDownLoadFolder })) }), (0, jsx_runtime_1.jsx)(material_1.Grid, { xs: 12, container: true, item: true, justifyContent: "flex-end", children: (0, jsx_runtime_1.jsx)(material_1.Typography, { sx: { padding: '8px' }, children: "".concat(t('Common.StaticUseFormat'), ": <img src=\"").concat(configs.FILE_RELATIVE_PATH, "/a.jpg\" />") }) })] }) }) })] }));
+                                }, children: !treeFolder ? ((0, jsx_runtime_1.jsx)(AWING_1.CircularProgress, {})) : ((0, jsx_runtime_1.jsx)(FolderTreeView_1.default, { rootItem: treeFolder, onUploadFiles: handleUploadFile, onCreateDirectory: handleCreateDirectory, onDownload: handleDownloadFile, onDelete: handleDelete, onDownloadFolder: handleDownLoadFolder })) }), (0, jsx_runtime_1.jsx)(material_1.Grid, { xs: 12, container: true, item: true, justifyContent: "flex-end", children: (0, jsx_runtime_1.jsx)(material_1.Typography, { sx: { padding: '8px' }, children: "".concat(t('Common.StaticUseFormat'), ": <img src=\"").concat(pathName, "/a.jpg\" />") }) })] }) }) })] }));
 };
 exports.default = FileTab;