apps/web: remove elements id's

notification: enable stack globally

apps/web/Components/Calculation/Form/ELT/Components/PolicyTable.tsx

@@ -7,16 +7,16 @@ import { Table } from 'ui/elements';
 
 export const PolicyTable = observer(
   ({
-    storeSelector,
     onSelectRow,
+    storeSelector,
     ...props
   }: {
     columns: typeof columns;
     onSelectRow: (row: Row) => void;
     storeSelector: StoreSelector;
   }) => {
-    const { $tables, $process } = useStore();
-    const { getRows, setSelectedKey, getSelectedRow } = storeSelector($tables.elt);
+    const { $process, $tables } = useStore();
+    const { getRows, getSelectedRow, setSelectedKey } = storeSelector($tables.elt);
 
     return (
       <Table
@@ -37,7 +37,12 @@ export const PolicyTable = observer(
               $process.add('ELT');
               setSelectedKey(record.key);
               onSelectRow(record);
-              message.success({ content: 'Выбранный расчет ЭЛТ применен', key: record.key });
+              message.success({
+                content: 'Выбранный расчет ЭЛТ применен',
+                duration: 1,
+                key: record.key,
+                onClick: () => message.destroy(record.key),
+              });
               $process.delete('ELT');
             }
           },

apps/web/Components/Calculation/Form/index.jsx

@@ -50,7 +50,7 @@ function Form({ prune }) {
       <Tabs type="card" tabBarGutter="5px">
         {formTabs
           .filter((tab) => !prune?.includes(tab.id))
-          .map(({ id, title, Component }) => (
+          .map(({ Component, id, title }) => (
             <Tabs.TabPane tab={title} key={id}>
               <ComponentWrapper>
                 <Component />

apps/web/Components/Common/Notification.tsx

@@ -7,14 +7,17 @@ import { message as antdMessage, notification as antdNotification } from 'ui/ele
 export let message: Readonly<MessageInstance>;
 export let notification: Readonly<NotificationInstance>;
 
-export function Notification({ children }: { children: ReactNode }) {
+export function Notification({ children }: { readonly children: ReactNode }) {
   const [messageApi, messageContextHolder] = antdMessage.useMessage({
+    duration: 1.2,
     maxCount: 3,
     top: 70,
   });
 
   const [notificationApi, notificationContextHolder] = antdNotification.useNotification({
+    maxCount: 3,
     placement: 'bottomRight',
+    stack: { threshold: 1 },
   });
 
   message = messageApi;

apps/web/apollo/link.js

@@ -61,6 +61,8 @@ const httpLink = new HttpLink({
   uri: URL_CRM_GRAPHQL,
 });
 
+const key = 'APOLLO_GRAPHQL';
+
 const errorLink = onError(({ graphQLErrors, networkError, operation, response }) => {
   const scope = getCurrentScope();
   scope.setTag('operationName', operation.operationName);
@@ -68,7 +70,8 @@ const errorLink = onError(({ graphQLErrors, networkError, operation, response })
   if (!isServer()) {
     message.error({
       content: `Ошибка во время загрузки данных из CRM`,
-      key: 'APOLLO_GRAPHQL',
+      key,
+      onClick: () => message.destroy(key),
     });
   }
 

apps/web/process/load-kp/reactions.ts

@@ -26,6 +26,7 @@ export function common({ store, trpcClient, apolloClient }: ProcessContext) {
       message.loading({
         content: `Загружаем КП ${quote?.label}...`,
         key,
+        onClick: () => message.destroy(key),
       });
 
       const eltInitialValues = await initElt();
@@ -90,12 +91,14 @@ export function common({ store, trpcClient, apolloClient }: ProcessContext) {
           message.success({
             content: `КП ${quote.label} загружено`,
             key,
+            onClick: () => message.destroy(key),
           });
         })
         .catch(() => {
           message.error({
             content: `Ошибка во время загрузки КП ${quote.label}`,
             key,
+            onClick: () => message.destroy(key),
           });
           $calculation.element('selectQuote').resetValue();
         })

apps/web/styles/mq.ts

@@ -4,5 +4,5 @@ export function min(breakpoint: keyof typeof screens) {
   return `@media (min-width: calc(${screens[breakpoint]}px + ${threshold}px))`;
 }
 export function max(breakpoint: keyof typeof screens) {
-  return `@media (max-width: calc(${screens[breakpoint]}px))`;
+  return `@media (max-width: calc(${screens[breakpoint]}px - ${threshold}px))`;
 }