update

src/ts/components/BarChart/index.module.scss

@@ -23,7 +23,7 @@
     -webkit-print-color-adjust: exact;
 
     &:hover {
-      background-color: #ED675F;
+      background-color: var(--color-second);
     }
   }
 

src/ts/components/DataView/index.module.scss

@@ -17,19 +17,6 @@
     margin-left: var(--space-l);
     cursor: pointer;
   }
-
-  &_full_screen {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    z-index: 1;
-
-    padding: var(--space-xxl);
-    margin: 0;
-    border-radius: 0;
-  }
 }
 
 @media print {

src/ts/components/DataView/index.tsx

@@ -6,9 +6,9 @@ import ISort from 'ts/interfaces/Sort';
 import Table from 'ts/components/Table';
 import Cards from 'ts/components/Cards';
 import viewSettings from 'ts/store/ViewSettings';
-import globalScroll from 'ts/helpers/globalScroll';
 import { downloadExcel } from 'ts/helpers/File';
 import isMobile from 'ts/helpers/isMobile';
+import fullScreen from 'ts/store/FullScreen';
 
 import style from './index.module.scss';
 import PageWrapper from '../Page/wrapper';
@@ -41,7 +41,6 @@ function DataView({
   const urlParams = useParams<any>();
   const defaultType = viewSettings.getItem(urlParams, isMobile ? 'cards' : 'table');
   const [localType, setType] = useState<string>(type || defaultType);
-  const [fullSize, setFullSize] = useState<boolean>(false);
 
   if (!rows || !rows.length) return null;
 
@@ -55,8 +54,6 @@ function DataView({
     cards: 'Отобразить таблицой',
   }[localType];
 
-  const fullSizeClass = fullSize ? style.data_view_full_screen : '';
-
   return (
     <>
       <div style={{ position: 'relative' }}>
@@ -72,18 +69,14 @@ function DataView({
               }}
             />
           )}
-          {false && !isMobile && (
+          {!isMobile && (
             <img
-              title={'Развернуть'}
-              src="./assets/icons/OpenFullscreen.svg"
+              src={fullScreen.isOpen
+                ? './assets/icons/CloseFullscreen.svg'
+                : './assets/icons/OpenFullscreen.svg'}
               className={style.data_view_icon}
               onClick={() => {
-                if (fullSize) {
-                  globalScroll.off();
-                } else {
-                  globalScroll.on();
-                }
-                setFullSize(!fullSize);
+                fullScreen.toggle();
               }}
             />
           )}
@@ -103,10 +96,7 @@ function DataView({
       </div>
 
       {localType === 'table' && (
-        <PageWrapper
-          template="table"
-          className={fullSizeClass}
-        >
+        <PageWrapper template="table">
           <Table
             rows={rows}
             sort={sort}

src/ts/helpers/File.ts

@@ -1,10 +1,9 @@
 import React from 'react';
 import { utils, writeFile } from 'xlsx';
 
-import localization from 'ts/helpers/Localization';
+import { t } from 'ts/helpers/Localization';
 import { ColumnTypesEnum, IColumn } from '../components/Table/interfaces/Column';
 import { getDate, getDateForExcel } from './formatter';
-// import localization from './Localization';
 
 export function downloadFile(file: Blob, fileName: string) {
   const link = document.createElement('a');
@@ -34,7 +33,7 @@ function getColumnsFromChildren(children: React.ReactNode) {
 }
 
 function getTitles(columns: IColumn[]) {
-  return columns.map((column: IColumn) => localization.get(column.title || ''));
+  return columns.map((column: IColumn) => t(column.title || ''));
 }
 
 function getFormatter(columns: IColumn[]) {
@@ -58,8 +57,10 @@ function getFormatter(columns: IColumn[]) {
 
       const type = typeof value;
       if (type === 'object') {
+        if (!column.formatter && column.template) return '';
+
         return Object.entries(value)
-          .map((row: any) => row.join(': '))
+          .map((row: any) => `${t(row[0]) || ''}: ${row[1] || ''}`)
           .join(', ');
       }
 
@@ -78,7 +79,6 @@ export function downloadCsv(
   name?: string,
 ) {
   const columns = getColumnsFromChildren(children);
-  console.dir(columns);
   const formatter = getFormatter(columns);
   const csvFile = [
     getTitles(columns).join(';'),

src/ts/pages/PageWrapper/index.tsx

@@ -1,6 +1,8 @@
 import React, { ReactNode } from 'react';
+import { observer } from 'mobx-react-lite';
 
 import Recommendations from 'ts/components/Recommendations/components/ModalDescription';
+import fullScreen from 'ts/store/FullScreen';
 import isMobile from 'ts/helpers/isMobile';
 
 import SideBar from './components/sidebar';
@@ -33,7 +35,18 @@ function MobileView({
   );
 }
 
-function DesktopView({ children }: IPageWrapper) {
+const DesktopView = observer(({ children }: IPageWrapper): React.ReactElement => {
+  if (fullScreen.isOpen) {
+    return (
+      <>
+        <div className={style.page_wrapper_main_fullscreen}>
+          {children}
+        </div>
+        <Recommendations/>
+      </>
+    );
+  }
+
   return (
     <div className={style.page_wrapper}>
       <SideBar/>
@@ -45,7 +58,7 @@ function DesktopView({ children }: IPageWrapper) {
       <Recommendations/>
     </div>
   );
-}
+});
 
 function PageWrapper({ children }: IPageWrapper) {
   return isMobile

src/ts/pages/PageWrapper/styles/index.module.scss

@@ -32,10 +32,21 @@
     break-inside: auto;
   }
 
-  &_main_mobile {
+  &_main {
+    &_mobile {
       width: calc(100vw - 240px);
       padding: 24px 24px 82px;
     }
+
+    &_fullscreen {
+      display: block;
+      padding: 24px;
+      width: calc(100vw - 18px);
+      min-height: 100vh;
+      box-sizing: border-box;
+      background-color: #F5F7F9;
+    }
+  }
 }
 
 @media (max-width: 1000px) {

src/ts/pages/Person/index.tsx

@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next';
 
 import Title from 'ts/components/Title';
 import dataGripStore from 'ts/store/DataGrip';
+import fullScreen from 'ts/store/FullScreen';
 
 import SectionSlider from 'ts/pages/PageWrapper/components/SectionSlider';
 import printStore from 'ts/pages/PageWrapper/store/Print';
@@ -29,7 +30,10 @@ interface IPersonProps {
 
 function getViewByIdByUser(user: any, filters: any) {
   return function getViewById(page?: string) {
-    const mode = printStore.processing ? 'print' : undefined;
+    let mode = undefined;
+    if (fullScreen.isOpen) mode = 'fullscreen';
+    if (printStore.processing) mode = 'print';
+
     if (page === 'total') return <Total user={user}/>;
     if (page === 'money') return <Money user={user}/>;
     if (page === 'week') return (

src/ts/pages/Team/components/Author.tsx

@@ -65,16 +65,17 @@ function AuthorView({ response, updateSort, rowsForExcel, mode }: IAuthorViewPro
         isFixed
         template={ColumnTypesEnum.STRING}
         properties="author"
+        title="page.team.pr.author"
         width={200}
       />
       <Column
         title="page.team.author.status"
-        template={(row: any) => {
-          let value = works;
-          if (row.isDismissed) value = dismissed;
-          if (row.isStaff) value = staff;
-          return <UiKitTags value={value} />;
+        formatter={(row: any) => {
+          if (row.isDismissed) return dismissed;
+          if (row.isStaff) return staff;
+          return works;
         }}
+        template={(value: string) => <UiKitTags value={value} />}
         width={100}
       />
       <Column
@@ -208,10 +209,12 @@ const Author = observer(({
 
   return (
     <>
+      {mode !== 'fullscreen' && (
         <Recommendations
           mode={mode}
           recommendations={recommendations}
         />
+      )}
       <Title title="page.team.author.title"/>
       <DataLoader
         to="response"

src/ts/pages/Team/components/Hours.tsx

@@ -18,10 +18,12 @@ const Hours = observer(({
 
   return (
     <>
+      {mode !== 'fullscreen' && (
         <Recommendations
           mode={mode}
           recommendations={recommendations}
         />
+      )}
       <Title title="page.team.hours.title"/>
       <PageWrapper template="table">
         <HoursChart statistic={statistic} />

src/ts/pages/Team/components/Month.tsx

@@ -20,10 +20,12 @@ const Month = observer(({
 
   return (
     <>
+      {mode !== 'fullscreen' && (
         <Recommendations
           mode={mode}
           recommendations={recommendations}
         />
+      )}
       <Title title="page.team.month.title"/>
       <PageWrapper template="table">
         <YearChart

src/ts/pages/Team/components/Scope.tsx

@@ -123,10 +123,12 @@ const Scope = observer(({
 
   return (
     <>
+      {mode !== 'fullscreen' && (
         <Recommendations
           mode={mode}
           recommendations={recommendations}
         />
+      )}
       <Title title="page.team.scope.title"/>
       <DataLoader
         to="response"

src/ts/pages/Team/components/Type.tsx

@@ -127,10 +127,12 @@ const Type = observer(({
 
   return (
     <>
+      {mode !== 'fullscreen' && (
         <Recommendations
           mode={mode}
           recommendations={recommendations}
         />
+      )}
       <Title title="page.team.type.title"/>
       <DataLoader
         to="response"

src/ts/pages/Team/components/Week.tsx

@@ -163,10 +163,12 @@ const Week = observer(({
 
   return (
     <>
+      {mode !== 'fullscreen' && (
         <Recommendations
           mode={mode}
           recommendations={recommendations}
         />
+      )}
       {mode === 'print' ? (
         <Title title="page.team.week.title"/>
       ) : (

src/ts/pages/Team/index.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
 import { useParams } from 'react-router-dom';
+import { observer } from 'mobx-react-lite';
 
 import SectionSlider from 'ts/pages/PageWrapper/components/SectionSlider';
 import printStore from 'ts/pages/PageWrapper/store/Print';
+import fullScreen from 'ts/store/FullScreen';
 
 import Author from './components/Author';
 import Commits from './components/Commits';
@@ -23,8 +25,15 @@ import Pr from './components/PR';
 import Print from './components/Print';
 import Release from './components/Release';
 
-function getViewById(page?: string) {
-  const mode = printStore.processing ? 'print' : undefined;
+interface ViewProps {
+  page?: string;
+}
+
+const View = observer(({ page }: ViewProps): React.ReactElement => {
+  let mode = undefined;
+  if (fullScreen.isOpen) mode = 'fullscreen';
+  if (printStore.processing) mode = 'print';
+
   if (page === 'total') return <Total/>;
   if (page === 'scope') return <Scope mode={mode}/>;
   if (page === 'author') return <Author mode={mode}/>;
@@ -45,11 +54,11 @@ function getViewById(page?: string) {
   if (page === 'print') return <Print/>;
   if (page === 'tasks') return <Tasks/>;
   return <Total/>;
-}
+});
 
 export default function Team() {
   const { type } = useParams<any>();
   if (type && type !== 'team') return null;
 
-  return <SectionSlider getViewById={getViewById} />;
+  return <SectionSlider getViewById={(page: string) => <View page={page} />} />;
 }

src/ts/store/FullScreen.tsx

@@ -0,0 +1,38 @@
+import { observable, action, makeObservable } from 'mobx';
+
+class FullScreenStore {
+  mode: string = '';
+
+  isOpen: boolean = false;
+
+  constructor() {
+    makeObservable(this, {
+      isOpen: observable,
+      on: action,
+      off: action,
+      toggle: action,
+    });
+  }
+
+  on(mode?: string) {
+    this.isOpen = true;
+    this.mode = mode || '';
+  }
+
+  off() {
+    this.isOpen = false;
+    this.mode = '';
+  }
+
+  toggle(mode?: string) {
+    if (this.isOpen) {
+      this.off();
+    } else {
+      this.on(mode);
+    }
+  }
+}
+
+const fullScreen = new FullScreenStore();
+
+export default fullScreen;