стили

This commit is contained in:
PotapovaA 2026-05-21 12:39:42 +03:00
parent b580e38117
commit 499664511a
11 changed files with 61 additions and 42 deletions

View File

@ -1,9 +1,9 @@
import api from './client';
export const FormsSheetApi = {
get(form, sheetName) {
get(formId, sheetName) {
return api
.get(`/form/${4}/sheet/${sheetName}`)
.get(`/form/${formId}/sheet/${sheetName}`)
// .get(`/forms/${form}/sheet/${sheetName}`)
.then((r) => r.data);
},

View File

@ -7,6 +7,9 @@ export const TasksApi = {
getSheets(taskId) {
return api.get(`/form/${taskId}/sheets`).then((r) => r.data);
},
getById(formId){
return api.get(`/form/${formId}`).then((r) => r.data);
},
getTaskStages(taskId) {
return api.get(`/tasks/${taskId}/stages`).then((r) => r.data);
},

View File

@ -50,6 +50,7 @@ export const AppRoutes = () => {
<Route path="/new-table" element={<NewTablePage />} />
<Route path="/tables-new" element={<TablesTest />} />
<Route path="/tables/:form/:sheetName" element={<NewFormTablePage />} />
<Route path="/table/form/:formId/form-type/:formType/:sheetName" element={<NewFormTablePage />} />
</Route>
</Route>
</Routes>

View File

@ -20,8 +20,8 @@ import {
getTablePaperStyles,
} from './constants/tableConfig';
const RealtimeTable = ({ form, sheetName }) => {
const { data, setData } = useRealtimeData(form, sheetName);
const RealtimeTable = ({ formType, formId, sheetName }) => {
const { data, setData } = useRealtimeData(formId, sheetName);
const [isLoading, setIsLoading] = useState(true);
const [globalFilter, setGlobalFilter] = useState('');
const [showColumnFilters, setShowColumnFilters] = useState(false);
@ -51,18 +51,18 @@ const RealtimeTable = ({ form, sheetName }) => {
useEffect(() => {
const loadConfig = async () => {
try {
const { config } = await import(`./constants/${form}/${sheetName}.js`);
const { config } = await import(`./constants/${formType}/${sheetName}.js`);
// Make sure config.configData has the expected structure
setColumnsConfig(config.config);
} catch (error) {
console.error(`Failed to load data for ${form}/${sheetName}:`, error);
console.error(`Failed to load data for ${formType}/${sheetName}:`, error);
setColumnsConfig({ columns: [], colors: {} });
}
};
loadConfig();
}, [form, sheetName]);
}, [formType, sheetName]);
const columns = useMemo(() => {
if (!columnsConfig || !columnsConfig.columns) return [];

View File

@ -1,17 +1,17 @@
export const BASE_TABLE_CONFIG = {
muiTableRowProps: {
sx: { height: '5rem' },
sx: { height: "5rem" },
},
enableExpanding: true,
enableStickyHeader: true,
enableColumnPinning: true,
enableEditing: true,
editDisplayMode: 'cell',
editDisplayMode: "cell",
renderTopToolbar: false,
renderBottomToolbar: false,
layoutMode: 'grid-no-grow',
layoutMode: "grid-no-grow",
enablePagination: false,
memoMode: 'cells',
memoMode: "cells",
autoResetHiddenColumns: false,
autoResetSortBy: false,
autoResetAll: false,
@ -19,12 +19,12 @@ export const BASE_TABLE_CONFIG = {
enableColumnResizing: true,
enableGlobalFilter: true,
enableColumnFilter: true,
globalFilterFn: 'contains',
globalFilterFn: "contains",
filterFromLeafRows: true,
positionGlobalFilter: 'left',
positionGlobalFilter: "left",
positionPinning: { left: 0, right: 0 },
defaultColumn: { filterFn: 'contains' },
columnResizeMode: 'onChange',
defaultColumn: { filterFn: "contains" },
columnResizeMode: "onChange",
localization: {
noRecordsToDisplay: <span>Нет данных для отображения</span>,
},
@ -32,23 +32,25 @@ export const BASE_TABLE_CONFIG = {
export const getTableHeadCellStyles = () => ({
sx: {
whiteSpace: 'auto',
wordBreak: 'normal',
boxSizing: 'border-box',
minHeight: '3rem',
maxHeight: '3rem',
border: '1px solid #E6E6E6',
fontSize: '11px',
fontFamily: 'Calibri, Arial, sans-serif',
whiteSpace: "auto",
wordBreak: "normal",
boxSizing: "border-box",
minHeight: "3rem",
maxHeight: "3rem",
border: "1px solid #E6E6E6",
fontSize: "11px",
fontFamily: "Calibri, Arial, sans-serif",
},
});
export const getTablePaperStyles = () => ({
sx: {
boxShadow: 'none',
border: '1px solid #d1d1d1',
height: '100%',
display: 'flex',
flexDirection: 'column',
boxShadow: "none",
border: "1px solid #d1d1d1",
height: "100%",
display: "flex",
flexDirection: "column",
},
});
export const rowHeight = 32;

View File

@ -11,7 +11,6 @@ export const useTableScale = (tableRef, isLoading) => {
}, [sizeMult]);
const tableScaleStyle = useMemo(
() => ({
transform: `scale(${sizeMult})`,

View File

@ -2,7 +2,7 @@ import { useState, useEffect, useCallback } from "react";
import { dataMock } from "../../mocks/mockTable";
import { FormsSheetApi } from "../../api/form_sheet";
const useRealtimeData = (form, sheetName) => {
const useRealtimeData = (formId, sheetName) => {
const [data, setData] = useState([]);
const formatedToSubRows = useCallback((depth, oldData) => {
@ -26,7 +26,7 @@ const useRealtimeData = (form, sheetName) => {
useEffect(() => {
const loadInitialData = async () => {
const res = await FormsSheetApi.get(form, sheetName);
const res = await FormsSheetApi.get(formId, sheetName);
const mockData = res.result;
const maxDepth = mockData.reduce((prev, current) => {
return prev.depth > current.depth ? prev : current;

View File

@ -17,8 +17,9 @@ const TablesList = ({
};
const renderTableCard = (table) => {
console.log(table)
const path = `${basePath}/${table.id}`;
//пока нет ручки
formInfo = {form_type_code: 'FORM_2', id: 4}
const path = `${basePath}/form/${formInfo.id}/form-type/${formInfo.form_type_code}/${table.sheet}`;
return (
<TableCard

View File

@ -95,7 +95,7 @@ export const TaskCardComponent = ({
onAddForExport,
}) => {
const navigate = useNavigate();
const { id, title, name, start_date, end_date, tables_count, ssp, form_type_code } = taskForm;
const { id, title, name, start_date, end_date, tables_count, org_unit, form_type_code } = taskForm;
const [isEditModalOpen, setEditModalOpen] = useState(false);
const [editedTitle, setEditedTitle] = useState('');
@ -228,14 +228,13 @@ export const TaskCardComponent = ({
{formattedDateRange}
</IconWithContent>
<IconWithContent icon={<UserIcon />}>
{/* <Chip>{ssp.title}</Chip> */}
<Chip>{org_unit.title}</Chip>
</IconWithContent>
<IconWithContent icon={<TableIcon />}>
Таблиц: {tables_count}
</IconWithContent>
</CardBody>
{exportMode && (
<div>
{isChecked ? (

View File

@ -22,13 +22,11 @@ const TableInfo = () => {
};
export default function NewTablePage() {
const { form, sheetName } = useParams()
console.log(form, sheetName)
useEffect(() => {
}, [form, sheetName])
const { formId, formType, sheetName } = useParams()
return (
<>
<RealtimeTable form={form} sheetName={sheetName} />
<RealtimeTable formType={formType} formId={formId} sheetName={sheetName} />
</>
);
}

View File

@ -68,7 +68,6 @@ export default function TaskPage() {
toast.error(
error?.response?.data?.detail || 'Ошибка получения данных задачи',
);
setTask(null);
} finally {
setIsLoading(false);
}
@ -79,6 +78,23 @@ export default function TaskPage() {
}
}, [id]);
useEffect(() => {
const getFormInfo = async () => {
setIsLoading(true);
try {
// TasksApi.
} catch (error) {
} finally {
setIsLoading(false);
}
};
if (Number.isFinite(id)) {
getFormInfo();
}
}, [id]);
const handleCreateProject = (projectData) => {
};