Disable sum row

frontend/src/views/WorkTable/WorkTable.tsx

@@ -8,7 +8,6 @@ import { useEffect, useMemo, useState } from 'react';
 import { Link, useLocation } from 'react-router-dom';
 
 import { trpc } from '@frontend/client';
-import { NavigationBlocker } from '@frontend/components/Map/NavigationBlocker';
 import { useNotifications } from '@frontend/services/notification';
 import { useTranslations } from '@frontend/stores/lang';
 import { useDebounce } from '@frontend/utils/useDebounce';
@@ -40,7 +39,6 @@ const dataGridStyle = (theme: Theme) => css`
     animation-name: fadeInOut;
     animation-duration: 5000ms;
   }
-
   & .MuiDataGrid-columnHeaders {
     background: ${theme.palette.primary.main};
     color: white;
@@ -57,16 +55,6 @@ const dataGridStyle = (theme: Theme) => css`
   & .modified-cell {
     background-color: lightyellow;
   }
-  & .MuiDataGrid-row--lastVisible.MuiDataGrid-row--lastVisible {
-    border-top: double ${theme.palette.primary.main};
-    position: sticky;
-    bottom: 0;
-    background-color: white;
-    color: ${theme.palette.primary.main};
-  }
-  & .MuiDataGrid-virtualScrollerRenderZone {
-    border-bottom: none;
-  }
 `;
 
 type UpdateableFields = keyof Omit<WorkTableRow, 'id' | 'projectLink'>;
@@ -156,8 +144,6 @@ export default function WorkTable() {
     return getColumns({ modifiedFields, financesRange: searchParams.financesRange });
   }, [modifiedFields]);
 
-  const rows = useMemo(() => getRows(), [workTableData]);
-
   useEffect(() => {
     setEditEvents([]);
     setRedoEvents([]);
@@ -261,84 +247,6 @@ export default function WorkTable() {
     updateObjects.mutateAsync(updateData);
   }
 
-  function calculateRowSum(values: number[]) {
-    return values.reduce((sum, value) => sum + value, 0);
-  }
-
-  function getSumRow(
-    budget: number,
-    actual: number,
-    forecast: number,
-    kayttosuunnitelmanMuutos: number
-  ): WorkTableRow {
-    return {
-      id: 'sum-row',
-      objectName: '',
-      lifecycleState: '',
-      dateRange: { startDate: '', endDate: '' },
-      projectLink: { projectId: '', projectName: '' },
-      objectType: [],
-      objectCategory: [],
-      objectUsage: [],
-      operatives: { suunnitteluttajaUser: '', rakennuttajaUser: '' },
-      budgetYear: NaN,
-      budget: budget,
-      actual: actual,
-      forecast: forecast,
-      kayttosuunnitelmanMuutos: kayttosuunnitelmanMuutos,
-    };
-  }
-
-  function getRows() {
-    if (!workTableData?.data || workTableData.data.length === 0) return [];
-    return [
-      ...workTableData.data,
-      getSumRow(
-        calculateRowSum(
-          workTableData.data
-            .map((data: WorkTableRow) =>
-              Number(
-                editEvents.find((event) => event.rowId === data.id && event.field === 'budget')
-                  ?.newValue ?? data.budget
-              )
-            )
-            .filter((budget) => !isNaN(budget))
-        ),
-        calculateRowSum(
-          workTableData.data
-            .map((data) =>
-              Number(
-                editEvents.find((event) => event.rowId === data.id && event.field === 'actual')
-                  ?.newValue ?? data.actual
-              )
-            )
-            .filter((actual) => !isNaN(actual))
-        ),
-        calculateRowSum(
-          workTableData.data
-            .map((data) =>
-              Number(
-                editEvents.find((event) => event.rowId === data.id && event.field === 'forecast')
-                  ?.newValue ?? data.forecast
-              )
-            )
-            .filter((forecast) => !isNaN(forecast))
-        ),
-        calculateRowSum(
-          workTableData.data
-            .map((data) =>
-              Number(
-                editEvents.find(
-                  (event) => event.rowId === data.id && event.field === 'kayttosuunnitelmanMuutos'
-                )?.newValue ?? data.kayttosuunnitelmanMuutos
-              )
-            )
-            .filter((muutos) => !isNaN(muutos))
-        )
-      ),
-    ];
-  }
-
   return (
     <Box
       css={css`
@@ -388,8 +296,7 @@ export default function WorkTable() {
         css={dataGridStyle}
         density={'standard'}
         columns={columns}
-        rows={rows}
-        isCellEditable={(params) => params.row.id !== 'sum-row'}
+        rows={workTableData.data ?? []}
         rowSelection={false}
         hideFooter
         onCellKeyDown={(_params, event) => {
@@ -407,7 +314,6 @@ export default function WorkTable() {
         }}
         disableColumnMenu
       />
-
       <Box
         css={(theme) => css`
           padding: ${theme.spacing(1)};
@@ -465,7 +371,6 @@ export default function WorkTable() {
           </Button>
         </Box>
       </Box>
-      <NavigationBlocker condition={editEvents.length > 0} />
     </Box>
   );
 }

frontend/src/views/WorkTable/columns.tsx

@@ -1,6 +1,6 @@
 import { css } from '@emotion/react';
 import { Launch } from '@mui/icons-material';
-import { Box, Typography } from '@mui/material';
+import { Box } from '@mui/material';
 import {
   GridColDef,
   GridRenderCellParams,
@@ -9,15 +9,13 @@ import {
 } from '@mui/x-data-grid';
 import dayjs from 'dayjs';
 import { useEffect, useRef } from 'react';
-import React from 'react';
 import { Link } from 'react-router-dom';
 
 import {
   CurrencyInput,
   formatCurrency,
   valueTextColor,
 } from '@frontend/components/forms/CurrencyInput';
-import { useTranslations } from '@frontend/stores/lang';
 import { TableCodeCheckbox } from '@frontend/views/WorkTable/CodeCheckbox';
 import { TableCodeSelect } from '@frontend/views/WorkTable/CodeSelect';
 import { CodeSpanMulti } from '@frontend/views/WorkTable/CodeSpanMulti';
@@ -48,26 +46,20 @@ function isFinanceEditingDisabled(row: WorkTableRow, financesRange: FinancesRang
 
   return financesRange < startYear || financesRange > endYear;
 }
-
-type RenderCellType = (params: GridRenderCellParams, totalLabel?: string) => React.ReactNode;
-
 interface MaybeModifiedCellProps<T extends GridValidRowModel> {
   params: GridRenderCellParams<T>;
+  children: React.ReactNode;
   modifiedFields?: ModifiedFields<T>;
-  column: GridColDef<WorkTableRow> & { __isWrapped?: boolean };
-  renderCell: RenderCellType;
 }
 
 function MaybeModifiedCell({
   params,
+  children,
   modifiedFields,
-  column,
-  renderCell,
 }: Readonly<MaybeModifiedCellProps<WorkTableRow>>) {
   const isModified = modifiedFields?.[params.id]?.[params.field as keyof WorkTableRow];
   // WorkTable.tsx defines style with has selector for .modified-cell
   const containerRef = useRef<HTMLDivElement>(null);
-  const tr = useTranslations();
 
   useEffect(() => {
     if (isModified) {
@@ -76,38 +68,14 @@ function MaybeModifiedCell({
       containerRef.current?.parentElement?.classList.remove('modified-cell');
     }
   }, [isModified, containerRef]);
-
-  if (params.row.id === 'sum-row') {
-    if (
-      ['operatives', 'budget', 'actual', 'forecast', 'kayttosuunnitelmanMuutos'].includes(
-        column.field
-      )
-    ) {
-      return (
-        <div
-          css={css`
-            flex: 1;
-          `}
-          ref={containerRef}
-        >
-          {column.field === 'operatives'
-            ? renderCell?.(params, tr('workTable.total'))
-            : renderCell?.(params)}
-        </div>
-      );
-    } else {
-      return null;
-    }
-  }
-
   return (
     <div
       css={css`
         flex: 1;
       `}
       ref={containerRef}
     >
-      {renderCell?.(params)}
+      {children}
     </div>
   );
 }
@@ -292,29 +260,9 @@ const fieldOperatives = {
   field: 'operatives',
   headerName: 'Rakennuttaja / Suunnitteluttaja',
   width: 144,
-  renderCell: ({ value, id }: GridRenderCellParams, totalLabel?: string) => {
-    if (id === 'sum-row') {
-      return (
-        <div>
-          <Typography
-            css={css`
-              font-size: 12px;
-              font-weight: 700;
-              text-align: right;
-              color: black;
-            `}
-            variant="body2"
-          >
-            {totalLabel}
-          </Typography>
-        </div>
-      );
-    }
-    return <ProjectObjectUsers value={value} />;
-  },
+  renderCell: ({ value }: GridRenderCellParams) => <ProjectObjectUsers value={value} />,
   renderEditCell: (params: GridRenderEditCellParams) => {
     const { id, field, value } = params;
-
     return (
       <ProjectObjectUserEdit
         value={value}
@@ -340,27 +288,6 @@ const financesField = (
     width: 128,
     editable: financesRange !== 'allYears',
     renderCell: ({ row, value }: GridRenderCellParams) => {
-      if (row.id === 'sum-row') {
-        return (
-          <div
-            css={css`
-              flex: 1;
-              text-align: right;
-            `}
-          >
-            <Typography
-              css={css`
-                font-weight: 700;
-                font-size: 12px;
-                color: ${CurrencyInputProps?.valueTextColor?.(value) ?? 'black'};
-              `}
-              variant="body2"
-            >
-              {formatCurrency(value)}
-            </Typography>
-          </div>
-        );
-      }
       const startYear = dayjs(row.dateRange.startDate).year();
       const endYear = dayjs(row.dateRange.endDate).year();
       const notInRange =
@@ -464,12 +391,9 @@ export function getColumns({
     sortable: false,
     cellClassName: 'cell-wrap-text',
     renderCell: (params: GridRenderCellParams) => (
-      <MaybeModifiedCell
-        params={params}
-        modifiedFields={modifiedFields}
-        column={column}
-        renderCell={column.renderCell as RenderCellType}
-      />
+      <MaybeModifiedCell params={params} modifiedFields={modifiedFields}>
+        {column.renderCell?.(params)}
+      </MaybeModifiedCell>
     ),
   }));
 }