@docsvision/management-console 6.2.2 → 6.2.3

package/index.d.ts

@@ -1821,6 +1821,8 @@ declare interface IMetaInformation_2 {
 
 export declare interface INavigationMenuProps {
     menuItems: IMenuItem_2[];
+    activeMenuId?: string;
+    onMenuClick: (menuId: string) => void;
 }
 
 declare interface INavigationMenuService {
@@ -2021,7 +2023,7 @@ export declare interface IPopupNotificationButton {
     text: string;
     className?: string;
     dataTestId?: string;
-    onClick: () => void;
+    onClick: (notification: PopupNotification) => void;
 }
 
 export declare interface IPopupNotificationCallbacks {
@@ -2875,14 +2877,11 @@ export declare const setDashboardPosition: (settings: IWidgetSettings_2, positio
 export declare class SettingsNavigationService implements ISettingsNavigationService {
     private readonly application;
     private readonly serviceNamesCache;
-    private readonly serversNamesCache;
     constructor(application: IApplication);
     ensureServiceName(serviceId?: string): Promise<void>;
     private rememberServiceName;
     private getCachedServiceName;
     private resolveServiceName;
-    private rememberServerName;
-    private getCachedServerName;
     convertPathToUrl(str: string, ...args: any[]): string;
     getServerPageUrl(serverId: string): string;
     getSettingsPageUrl(serverId: string, serviceId: string, layoutId: string, serviceName: string): string;

package/index.js

@@ -61464,10 +61464,9 @@ function ListPanel(props) {
   ] });
 }
 function NavigationMenu(props) {
-  const { menuItems } = props;
-  const [selectedMenuItem, setSelectedMenuItem] = useState();
+  const { menuItems, activeMenuId, onMenuClick } = props;
   const onClick = (menuItem) => {
-    setSelectedMenuItem(menuItem);
+    onMenuClick(menuItem.id);
     menuItem.refElement?.current.scrollIntoView({ behavior: "smooth", block: "start", inline: "nearest" });
   };
   return /* @__PURE__ */ jsx("div", { className: "navigation-menu", children: menuItems?.map((menuItem) => {
@@ -61475,7 +61474,7 @@ function NavigationMenu(props) {
       "div",
       {
         onClick: () => onClick(menuItem),
-        className: classNames("navigation-menu-item", classIf(selectedMenuItem?.id === menuItem.id, "selected")),
+        className: classNames("navigation-menu-item", classIf(activeMenuId === menuItem.id, "selected")),
         children: /* @__PURE__ */ jsx("div", { children: menuItem.name })
       },
       `menu-item_${menuItem.id}`
@@ -62573,7 +62572,10 @@ function NumberComponent(props) {
   }
   function handleBlur(event) {
     if (valueRef.current) {
-      onChange(clampValue(valueRef.current));
+      const clampedValue = clampValue(valueRef.current);
+      if (clampedValue !== valueRef.current.toString()) {
+        onChange(clampValue(valueRef.current));
+      }
     }
     onBlur?.(event);
   }
@@ -66944,9 +66946,9 @@ class WorkerPanelLogic extends ComponentLogic {
       } finally {
         this.setLoading(false);
       }
+      this.openDialog(false);
       this.setDataNewProcess({ ...WORKER_PROCESS_EMPTY_DATA });
       this.setProcessUnchanged(newProcess.id);
-      this.openDialog(false);
       return newProcess;
     });
     this.openDialog.watch((opened) => {
@@ -69320,11 +69322,12 @@ const _PopupNotification = class _PopupNotification {
         e2.stopPropagation();
         toast.dismiss(toastId);
       };
-      return /* @__PURE__ */ jsxs("div", { "data-testid": "noty-bar", className: classes2, onMouseEnter: this.callbacks.onHover, onClick: handleLayoutClick, children: [
-        this.closeWith.includes("button") && /* @__PURE__ */ jsx("div", { "data-testid": "noty-close-button", className: "noty_close_button", onClick: handleCloseButtonClick, children: "×" }),
+      const handleButtonClick = (btn) => () => btn.onClick(this);
+      return /* @__PURE__ */ jsxs("div", { className: classes2, onMouseEnter: this.callbacks.onHover, onClick: handleLayoutClick, children: [
+        this.closeWith.includes("button") && /* @__PURE__ */ jsx("div", { className: "noty_close_button", onClick: handleCloseButtonClick, children: "×" }),
         /* @__PURE__ */ jsx("div", { className: "noty_body", children: this.text }),
-        !!this.options.buttons?.length && /* @__PURE__ */ jsx("div", { className: "noty_buttons", children: this.options.buttons.map((btn) => /* @__PURE__ */ jsx("button", { className: classNames("noty_btn", btn.className), "data-testid": btn.dataTestId, onClick: btn.onClick, children: btn.text }, btn.text)) }),
-        this.showProgress() && /* @__PURE__ */ jsx("div", { className: "noty_progressbar", style: { animationDuration: `${this.timeout}ms` } }, this.timeout.toString())
+        this.options.buttons?.length ? /* @__PURE__ */ jsx("div", { className: "noty_buttons", children: this.options.buttons.map((btn, idx) => /* @__PURE__ */ jsx("button", { className: classNames("noty_btn", btn.className), "data-testid": btn.dataTestId, onClick: handleButtonClick(btn), children: btn.text }, idx)) }) : null,
+        this.showProgress() && /* @__PURE__ */ jsx("div", { className: "noty_progressbar", style: { animationDuration: `${this.timeout}ms` } })
       ] });
     };
     const mergedOptions = {
@@ -69373,7 +69376,6 @@ const _PopupNotification = class _PopupNotification {
     return `noty_layout__${this.options.layout}`;
   }
   show() {
-    if (this.toastId) return;
     this.callbacks.beforeShow?.();
     if (this.options.killer) {
       toast.dismiss();
@@ -69387,12 +69389,10 @@ const _PopupNotification = class _PopupNotification {
       onDismiss: () => {
         this.callbacks.onClose?.();
         this.callbacks.afterClose?.();
-        this.toastId = void 0;
       },
       onAutoClose: () => {
         this.callbacks.onClose?.();
         this.callbacks.afterClose?.();
-        this.toastId = void 0;
       }
     });
     this.callbacks.onShow?.();
@@ -69465,13 +69465,21 @@ class SettingsPageLogic extends ComponentLogic {
     super(...arguments);
     this.domain = y$1("SettingsPageLogic");
     this.submitFx = this.domain.effect("onSubmit");
-    this.loadPage = this.domain.effect("loadPage");
+    this.$loadPageRequestId = this.domain.store(0, { name: "$loadPageRequestId" });
+    this.loadPage = this.domain.event("loadPage");
+    this.loadPageFx = this.domain.effect("loadPageFx");
+    this.validLoadPageFxDone = w$2({
+      clock: this.loadPageFx.done,
+      filter: ({ params }) => params.requestId === this.$loadPageRequestId.getState()
+    });
     this.$pageData = this.domain.store(null, { name: "pageData" });
-    this.setPageData = this.domain.event("setPageData");
     this.$pageDataList = this.domain.store(null, { name: "pageDataList" });
-    this.setPageDataList = this.domain.event("setPageDataList");
     this.$scrollRestored = this.domain.store(!window.sessionStorage.getItem(SESSION_STORAGE_SCROLL_KEY), { name: "$scrollRestored" });
     this.$scrollElement = this.domain.store(null, { name: "$scrollElement" });
+    this.$activeMenuId = this.domain.store(null, { name: "$activeMenuId" });
+    this.activeMenuChanged = this.domain.event("activeMenuChanged");
+    this.menuSelected = this.domain.event("menuSelected");
+    this.activeMenuChangedFx = this.domain.effect("activeMenuChangedFx");
     this.settedScrollElement = this.domain.event("setScrollElement");
     this.saveScrollPositionRequested = this.domain.event("setScrollElement");
     this.saveScrollPositionFx = this.domain.effect("saveScrollPosition");
@@ -69498,14 +69506,6 @@ class SettingsPageLogic extends ComponentLogic {
         cleanUpLeaveHook();
       });
     });
-    v$2({
-      clock: this.setPageData,
-      target: this.$pageData
-    });
-    v$2({
-      clock: this.setPageDataList,
-      target: this.$pageDataList
-    });
     this.submitFx.use(async (params) => {
       const savePageResponse = await layoutService.saveLayout(params.layoutId, params.serviceId, params.data, params.itemId, params.timestamp);
       if (savePageResponse.status === SavePageStatus.Error) {
@@ -69528,15 +69528,42 @@ class SettingsPageLogic extends ComponentLogic {
       fn: (pageData, { timestamp }) => ({ ...pageData, meta: { ...pageData.meta, timestamp } }),
       target: this.$pageData
     });
-    this.loadPage.use(async (params) => {
-      const pageData = await layoutService.getLayout(params.url, params.serviceId, params.itemId);
-      this.setPageData(pageData);
-      const result = [];
-      pageData.elements.length && this.getElementsInList(result, pageData.elements);
-      this.setPageDataList(result);
-      const { readOnly, readonlyReasonMsg } = pageData.meta;
-      if (readOnly) {
-        services.messageWindow.showInfo(readonlyReasonMsg || resources.ReadOnlyReasonMessage);
+    v$2({
+      clock: this.loadPage,
+      source: this.$loadPageRequestId,
+      fn: (requestId) => requestId + 1,
+      target: this.$loadPageRequestId
+    });
+    v$2({
+      clock: this.loadPage,
+      source: this.$loadPageRequestId,
+      fn: (requestId, params) => ({ ...params, requestId }),
+      target: this.loadPageFx
+    });
+    this.loadPageFx.use(async (params) => {
+      return await layoutService.getLayout(params.url, params.serviceId, params.itemId);
+    });
+    v$2({
+      clock: this.validLoadPageFxDone,
+      fn: ({ result }) => result,
+      target: this.$pageData
+    });
+    v$2({
+      clock: this.validLoadPageFxDone,
+      fn: ({ result }) => {
+        const elements = [];
+        result.elements.length && this.getElementsInList(elements, result.elements);
+        return elements;
+      },
+      target: this.$pageDataList
+    });
+    v$2({
+      clock: this.validLoadPageFxDone,
+      fn: ({ result }) => {
+        const { readOnly, readonlyReasonMsg } = result.meta;
+        if (readOnly) {
+          services.messageWindow.showInfo(readonlyReasonMsg || resources.ReadOnlyReasonMessage);
+        }
       }
     });
     v$2({
@@ -69571,6 +69598,40 @@ class SettingsPageLogic extends ComponentLogic {
       filter: ({ scrollElement, restored, pageData }) => Boolean(scrollElement) && !restored && Boolean(pageData),
       target: this.restoreScrollPositionFx
     });
+    this.activeMenuChangedFx.use((scrollElement) => {
+      const HEADER_OFFSET = 127;
+      const clamp2 = (value) => Math.max(0, value);
+      const isBetween2 = (value, floor, ceil) => value >= floor && value <= ceil;
+      const menuItems = services.navigationMenu.$menuItems.getState();
+      if (scrollElement) {
+        const scroll = scrollElement.scrollTop;
+        const position = menuItems?.map((menuItem) => {
+          const element = menuItem.refElement?.current;
+          if (!element) {
+            return { id: menuItem.id, top: -1, bottom: -1 };
+          }
+          const rect = element.getBoundingClientRect();
+          const top2 = clamp2(rect.top + scroll - HEADER_OFFSET);
+          const bottom2 = clamp2(rect.bottom + scroll - HEADER_OFFSET);
+          return { id: menuItem.id, top: top2, bottom: bottom2 };
+        }).find(({ top: top2, bottom: bottom2 }) => isBetween2(scroll, top2, bottom2));
+        return position?.id;
+      }
+      return "";
+    });
+    v$2({
+      clock: this.menuSelected,
+      target: this.$activeMenuId
+    });
+    v$2({
+      clock: this.activeMenuChanged,
+      source: this.$scrollElement,
+      target: this.activeMenuChangedFx
+    });
+    v$2({
+      clock: this.activeMenuChangedFx.doneData,
+      target: this.$activeMenuId
+    });
     v$2({
       clock: this.restoreScrollPositionFx.done,
       fn: () => true,
@@ -69592,12 +69653,14 @@ function SettingsPage(props) {
   const { resources } = services;
   const logic = useLogic(props, SettingsPageLogic);
   const pageData = e(logic.$pageData);
+  const activeMenuId = e(logic.$activeMenuId);
   const methods = useForm({ mode: "onTouched" });
   const menuItems = e(services.navigationMenu.$menuItems);
   const clearMenuItems = c(services.navigationMenu.clearMenuItems);
   const isSubmitButtonLoading = e(logic.submitFx.pending);
-  const isPageLoading = e(logic.loadPage.pending);
+  const isPageLoading = e(logic.loadPageFx.pending);
   const formRef = useRef(null);
+  const scrollElementRef = useRef(null);
   const breadcrumbsItems = services.settingsNavigation.getBreadcrumbsItems();
   const readOnly = pageData?.meta.readOnly || false;
   const {
@@ -69624,6 +69687,20 @@ function SettingsPage(props) {
     window.addEventListener("pagehide", onPageHide);
     return () => window.removeEventListener("pagehide", onPageHide);
   }, [logic]);
+  useLayoutEffect(() => {
+    const onScrollChanged = () => logic.activeMenuChanged();
+    onScrollChanged();
+    window.addEventListener("resize", onScrollChanged);
+    if (scrollElementRef.current) {
+      scrollElementRef.current.addEventListener("scroll", onScrollChanged);
+    }
+    return () => {
+      window.removeEventListener("scroll", onScrollChanged);
+      if (scrollElementRef.current) {
+        scrollElementRef.current.removeEventListener("scroll", onScrollChanged);
+      }
+    };
+  }, [scrollElementRef.current]);
   const onSubmit = async (props2) => {
     const { confirm: confirm2 = true, ...data } = props2;
     const dirtyFields2 = methods.formState.dirtyFields;
@@ -69663,6 +69740,13 @@ function SettingsPage(props) {
     reset(defaultValues);
     services.formControl.canceled();
   };
+  const onMenuClick = (menuId) => {
+    logic.menuSelected(menuId);
+  };
+  const onScrollElementSet = (el2) => {
+    scrollElementRef.current = el2;
+    logic.settedScrollElement(el2);
+  };
   const hasDirtyFields = !!Object.keys(dirtyFields).length;
   return /* @__PURE__ */ jsxs("div", { className: "settings-page__container", children: [
     /* @__PURE__ */ jsxs("div", { className: "settings-page__header", children: [
@@ -69685,12 +69769,12 @@ function SettingsPage(props) {
       ] })
     ] }),
     /* @__PURE__ */ jsx("div", { className: "settings-page__wrapper", children: /* @__PURE__ */ jsxs("div", { className: "settings-page__content-container", children: [
-      /* @__PURE__ */ jsx(NavigationMenu, { menuItems }),
+      /* @__PURE__ */ jsx(NavigationMenu, { menuItems, activeMenuId, onMenuClick }),
       /* @__PURE__ */ jsx("div", { className: "settings-page__scroll-container", children: /* @__PURE__ */ jsx(
         "div",
         {
           className: classNames("setting-page__scroll-element", classIf(readOnly, "setting-page__readonly-layout")),
-          ref: logic.settedScrollElement,
+          ref: onScrollElementSet,
           children: /* @__PURE__ */ jsx(CustomFormProvider, { ...methods, children: /* @__PURE__ */ jsx("form", { className: "settings-page", ref: formRef, children: pageData?.elements?.map((data) => {
             const Component2 = data.error ? ErrorEditor : editorFactory.get(data.editorType);
             return /* @__PURE__ */ jsx(Component2, { ...data, services, formMethods: methods }, data.id);
@@ -70569,8 +70653,9 @@ function ImportSettingsDialog(props) {
   const peers = e(logic.$peers);
   const onSubmitClick = async () => {
     if (selectedPeer.lastUpdated) {
-      const dateFormat = services.applicationSettings.culture.name === "ru-RU" ? DATE_TIME_FORMAT_RUS : DATE_TIME_FORMAT_ENG;
-      const dateStr = hooks(selectedPeer.lastUpdated).format(dateFormat);
+      const cultureName = services.applicationSettings.culture.name;
+      const dateFormat = cultureName === "ru-RU" ? DATE_TIME_FORMAT_RUS : DATE_TIME_FORMAT_ENG;
+      const dateStr = hooks(selectedPeer.lastUpdated).locale(cultureName).format(dateFormat);
       await services.messageWindow.showConfirmation(
         formatString$1(resources.ImportSettingsConfirmationWithDateMessage, dateStr),
         {
@@ -70879,10 +70964,6 @@ function ServersRouteComponent({ services }) {
   const routeServices = useLocalServiceContainer(ServicesContext, (s2) => s2.isPageService);
   return /* @__PURE__ */ jsx(ServicesContext.Provider, { value: routeServices, children: /* @__PURE__ */ jsx(ServersPage, { services }) });
 }
-function ServerPageRouteComponent({ services }) {
-  const routeServices = useLocalServiceContainer(ServicesContext, (s2) => s2.isPageService);
-  return /* @__PURE__ */ jsx(ServicesContext.Provider, { value: routeServices, children: /* @__PURE__ */ jsx(ServersPage, { services }) });
-}
 const serversRouteHandler = async (application) => {
   return /* @__PURE__ */ jsx(ServersRouteComponent, { services: application });
 };
@@ -70890,12 +70971,9 @@ const serversRoute = {
   path: SERVERS_ROUTE_PATH,
   handler: serversRouteHandler
 };
-const serverPageRouteHandler = async (application) => {
-  return /* @__PURE__ */ jsx(ServerPageRouteComponent, { services: application });
-};
 const serverPageRoute = {
   path: SERVER_PAGE_ROUTE_PATH,
-  handler: serverPageRouteHandler
+  handler: serversRouteHandler
 };
 const $ServersController = serviceName((s2) => s2.serverController);
 class ServersController {
@@ -70925,7 +71003,6 @@ class SettingsNavigationService {
   constructor(application) {
     this.application = application;
     this.serviceNamesCache = /* @__PURE__ */ new Map();
-    this.serversNamesCache = /* @__PURE__ */ new Map();
     this.goToConfigurationPage = () => {
       const { params, data } = this.application.routingService.getLastRouteResolvedParams() || {};
       const { serverId, serviceId, layoutId } = data;
@@ -70942,7 +71019,6 @@ class SettingsNavigationService {
       const service = await this.application.serverController.getServiceInfo(serviceId);
       if (!service) return;
       this.rememberServiceName(service.serviceId, service.serviceName);
-      this.rememberServerName(service.serviceId, service.serverName);
     } catch {
     }
   }
@@ -70957,13 +71033,6 @@ class SettingsNavigationService {
     if (!serviceId) return fallback;
     return this.getCachedServiceName(serviceId) ?? fallback;
   }
-  rememberServerName(serviceId, serverName) {
-    if (!serviceId || !serverName) return;
-    this.serversNamesCache.set(serviceId, serverName);
-  }
-  getCachedServerName(serviceId) {
-    return this.serversNamesCache.get(serviceId);
-  }
   convertPathToUrl(str, ...args) {
     const matches = str.match(/(:\w+)/g);
     if (!matches) return str;
@@ -70999,9 +71068,8 @@ class SettingsNavigationService {
     const { serviceName: serviceName2, itemName, extendedLayoutId } = params;
     const breadcrumbsItems = [];
     if (data.serverId) {
-      const serverName = this.getCachedServerName(data.serviceId) ?? data.serverId;
       breadcrumbsItems.push({
-        label: `${this.application.resources.Server}: ${serverName}`,
+        label: `${this.application.resources.Server}: ${data.serverId.toUpperCase()}`,
         path: this.getServerPageUrl(serverId)
       });
     }
@@ -108273,7 +108341,7 @@ class EmailServerConnectionSettingsView {
 }
 function EmailServerConnectionSettings(options) {
   const view = useView(options, EmailServerConnectionSettingsView);
-  const { data, onDataChanged, mode, services, validation, validationFieldsProvider } = options;
+  const { data, onDataChanged, mode, services, validation, validationFieldsProvider, isCurrentlyEditedSetting } = options;
   const testIdPrefix = mode === EditMode.Create ? "new-email-server" : "email-server";
   if (!data) {
     return null;
@@ -108281,9 +108349,10 @@ function EmailServerConnectionSettings(options) {
   const { resources } = services;
   const [serverType, setServerType] = useState(data.serverType);
   useEffect(() => {
+    if (mode === EditMode.Edit && !isCurrentlyEditedSetting) return;
     setServerType(data.serverType);
     updateServerTypeValidationFields(data.serverType);
-  }, [data.serverType]);
+  }, [data.serverType, mode, isCurrentlyEditedSetting]);
   const labelPlacement = mode === EditMode.Create ? LabelPlacement.Top : LabelPlacement.Left;
   const getEmailServer = (type, data2) => {
     switch (type) {
@@ -108841,6 +108910,7 @@ function ConnectionPanel(props) {
   const $changedConnections = e(logic.$changedConnections);
   const $loading = e(logic.$loading);
   const $customValidationModel = e(logic.$customValidationModel);
+  const activeSettingsId = e(logic.$activeId);
   const dataTestIdPrefix = props.connectionType === ConnectionTypes.EmailServer ? "email-server" : "settings-panel";
   const dataTestIdDefault = `${dataTestIdPrefix}__checkbox-default`;
   const dataTestIdAddButton = `${dataTestIdPrefix}__add-button`;
@@ -108931,6 +109001,7 @@ function ConnectionPanel(props) {
                 onDataChanged: logic.updateSettings,
                 services: props.services,
                 validation: $changedValidationModel,
+                isCurrentlyEditedSetting: connection.id === activeSettingsId,
                 customValidationProvider: {
                   model: $customValidationModel,
                   set: logic.changeCustomValidationModel,