forked from CITKParus/P8-Panels
WEB APP: Модификация панелей "Работы проектов" и "Примеры" под новые возможности стилей P8PGantt
This commit is contained in:
Mikhail Chechnev
parent
e81cde166c
commit
3808011652
@ -33,6 +33,7 @@ import { BackEndСtx } from "../../context/backend"; //Контекст взаи
|
||||
import { MessagingСtx } from "../../context/messaging"; //Контекст сообщений
|
||||
import { ApplicationСtx } from "../../context/application"; //Контекст приложения
|
||||
import { formatDateJSONDateOnly } from "../../core/utils"; //Вспомогательные функции
|
||||
import { APP_BAR_HEIGHT } from "../../components/p8p_app_workspace"; //Заголовок страницы
|
||||
import { P8P_GANTT_CONFIG_PROPS } from "../../config_wrapper"; //Подключение компонентов к настройкам приложения
|
||||
import { P8PGantt } from "../../components/p8p_gantt"; //Диаграмма Ганта
|
||||
import { formatDateRF } from "../../core/utils"; //Вспомогательные функции
|
||||
@ -44,12 +45,6 @@ import { taskAttributeRenderer } from "./layouts"; //Дополнительна
|
||||
//Константы
|
||||
//---------
|
||||
|
||||
//Высота диаграммы Ганта
|
||||
const GANTT_HEIGHT = "75vh";
|
||||
|
||||
//Ширина диаграммы Ганта
|
||||
const GANTT_WIDTH = "98vw";
|
||||
|
||||
//Стили
|
||||
const STYLES = {
|
||||
PROJECTS_LIST_ITEM_NOJOBS: { backgroundColor: "#ff000045" },
|
||||
@ -58,11 +53,11 @@ const STYLES = {
|
||||
PROJECTS_LIST_ITEM_SECONDARY_NOJOBS: { color: "red" },
|
||||
PROJECTS_LIST_ITEM_SECONDARY_NOEDIT: { color: "gray" },
|
||||
PROJECTS_LIST_ITEM_SECONDARY_CHANGED: { color: "green" },
|
||||
PROJECTS_BUTTON: { position: "absolute" },
|
||||
PROJECTS_BUTTON: { position: "absolute", top: `calc(${APP_BAR_HEIGHT} + 16px)`, left: "16px" },
|
||||
PROJECTS_DRAWER: { width: "250px", flexShrink: 0, [`& .MuiDrawer-paper`]: { width: "250px", boxSizing: "border-box" } },
|
||||
GANTT_CONTAINER: { height: GANTT_HEIGHT, width: GANTT_WIDTH },
|
||||
GANTT_TITLE: { paddingLeft: "100px", paddingRight: "120px" },
|
||||
PERIODS_BUTTON: { position: "absolute", right: "20px" },
|
||||
GANTT_CONTAINER: { height: `calc(100vh - ${APP_BAR_HEIGHT})`, width: "100vw", paddingTop: "24px" },
|
||||
GANTT_TITLE: { paddingLeft: "150px", paddingRight: "150px" },
|
||||
PERIODS_BUTTON: { position: "absolute", top: `calc(${APP_BAR_HEIGHT} + 16px)`, right: "16px" },
|
||||
PERIODS_DRAWER: { width: "1200px", flexShrink: 0, [`& .MuiDrawer-paper`]: { width: "1200px", boxSizing: "border-box" } }
|
||||
};
|
||||
|
||||
@ -452,7 +447,7 @@ const PrjJobs = () => {
|
||||
|
||||
//Генерация содержимого
|
||||
return (
|
||||
<Box p={2}>
|
||||
<Box>
|
||||
{state.showInitDialog ? (
|
||||
<InitPrmsDialog
|
||||
dateBegin={state.dateBegin}
|
||||
@ -514,23 +509,23 @@ const PrjJobs = () => {
|
||||
{state.ident ? <ResMon ident={state.ident} onPlanJobsDtlProjectClick={handlePlanJobsDtlProjectClick} /> : null}
|
||||
</Drawer>
|
||||
{state.init == true ? (
|
||||
<Grid container spacing={1}>
|
||||
<Grid container>
|
||||
<Grid item xs={12}>
|
||||
{state.selectedProjectJobsLoaded ? (
|
||||
<Box sx={STYLES.GANTT_CONTAINER} p={1}>
|
||||
<P8PGantt
|
||||
{...P8P_GANTT_CONFIG_PROPS}
|
||||
{...state.selectedProjectGanttDef}
|
||||
height={GANTT_HEIGHT}
|
||||
titleStyle={STYLES.GANTT_TITLE}
|
||||
onTitleClick={handleTitleClick}
|
||||
tasks={state.selectedProjectTasks}
|
||||
onTaskDatesChange={handleTaskDatesChange}
|
||||
taskAttributeRenderer={taskAttributeRenderer}
|
||||
/>
|
||||
</Box>
|
||||
<P8PGantt
|
||||
{...P8P_GANTT_CONFIG_PROPS}
|
||||
{...state.selectedProjectGanttDef}
|
||||
containerStyle={STYLES.GANTT_CONTAINER}
|
||||
titleStyle={STYLES.GANTT_TITLE}
|
||||
onTitleClick={handleTitleClick}
|
||||
tasks={state.selectedProjectTasks}
|
||||
onTaskDatesChange={handleTaskDatesChange}
|
||||
taskAttributeRenderer={taskAttributeRenderer}
|
||||
/>
|
||||
) : !state.selectedProject ? (
|
||||
<InlineMsgInfo okBtn={false} text={"Укажите проект для отображения его плана-графика"} />
|
||||
<Box pt={3}>
|
||||
<InlineMsgInfo okBtn={false} text={"Укажите проект для отображения его плана-графика"} />
|
||||
</Box>
|
||||
) : null}
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
@ -9,22 +9,9 @@
|
||||
|
||||
import React, { useState, useContext, useCallback, useEffect } from "react"; //Классы React
|
||||
import PropTypes from "prop-types"; //Контроль свойств компонента
|
||||
import {
|
||||
Typography,
|
||||
Grid,
|
||||
Stack,
|
||||
Icon,
|
||||
Box,
|
||||
FormControlLabel,
|
||||
Checkbox,
|
||||
Card,
|
||||
CardHeader,
|
||||
CardActions,
|
||||
Avatar,
|
||||
CardContent,
|
||||
Button
|
||||
} from "@mui/material"; //Интерфейсные элементы
|
||||
import { Typography, Grid, Stack, Icon, FormControlLabel, Checkbox, Card, CardHeader, CardActions, Avatar, CardContent, Button } from "@mui/material"; //Интерфейсные элементы
|
||||
import { formatDateJSONDateOnly, formatDateRF } from "../../core/utils"; //Вспомогательные функции
|
||||
import { APP_BAR_HEIGHT } from "../../components/p8p_app_workspace"; //Заголовок страницы
|
||||
import { P8PGantt } from "../../components/p8p_gantt"; //Диаграмма Ганта
|
||||
import { P8P_GANTT_CONFIG_PROPS } from "../../config_wrapper"; //Подключение компонентов к настройкам приложения
|
||||
import { BackEndСtx } from "../../context/backend"; //Контекст взаимодействия с сервером
|
||||
@ -33,17 +20,25 @@ import { BackEndСtx } from "../../context/backend"; //Контекст взаи
|
||||
//Константы
|
||||
//---------
|
||||
|
||||
//Высота диаграммы Ганта
|
||||
const GANTT_HEIGHT = "70vh";
|
||||
//Отступ контейнера страницы от заголовка
|
||||
const CONTAINER_PADDING_TOP = "20px";
|
||||
|
||||
//Ширина диаграммы Ганта
|
||||
const GANTT_WIDTH = "98vw";
|
||||
//Высота заголовка страницы
|
||||
const TITLE_HEIGHT = "47px";
|
||||
|
||||
//Высота элементов управления
|
||||
const CONTROL_HEIGHT = "42px";
|
||||
|
||||
//Стили
|
||||
const STYLES = {
|
||||
CONTAINER: { textAlign: "center", paddingTop: "20px" },
|
||||
TITLE: { paddingBottom: "15px" },
|
||||
GANTT_CONTAINER: { height: GANTT_HEIGHT, width: GANTT_WIDTH }
|
||||
CONTAINER: { textAlign: "center", paddingTop: CONTAINER_PADDING_TOP },
|
||||
TITLE: { paddingBottom: "15px", height: TITLE_HEIGHT },
|
||||
CONTROL: { height: CONTROL_HEIGHT },
|
||||
GANTT_CONTAINER: {
|
||||
height: `calc(100vh - ${APP_BAR_HEIGHT} - ${TITLE_HEIGHT} - ${CONTROL_HEIGHT} - ${CONTAINER_PADDING_TOP})`,
|
||||
width: "100vw",
|
||||
paddingTop: "5px"
|
||||
}
|
||||
};
|
||||
|
||||
//---------------------------------------------
|
||||
@ -172,23 +167,22 @@ const Gantt = ({ title }) => {
|
||||
{title}
|
||||
</Typography>
|
||||
<FormControlLabel
|
||||
sx={STYLES.CONTROL}
|
||||
control={<Checkbox onChange={() => setState(pv => ({ ...pv, useCustomTaskDialog: !pv.useCustomTaskDialog }))} />}
|
||||
label="Отображать пользовательский диалог задачи"
|
||||
/>
|
||||
<Grid container spacing={0} direction="column" alignItems="center">
|
||||
<Grid container direction="column" alignItems="center">
|
||||
<Grid item xs={12}>
|
||||
{state.dataLoaded ? (
|
||||
<Box sx={STYLES.GANTT_CONTAINER} p={1}>
|
||||
<P8PGantt
|
||||
{...P8P_GANTT_CONFIG_PROPS}
|
||||
{...state.ganttDef}
|
||||
height={GANTT_HEIGHT}
|
||||
tasks={state.ganttTasks}
|
||||
onTaskDatesChange={handleTaskDatesChange}
|
||||
taskAttributeRenderer={taskAttributeRenderer}
|
||||
taskDialogRenderer={state.useCustomTaskDialog ? taskDialogRenderer : null}
|
||||
/>
|
||||
</Box>
|
||||
<P8PGantt
|
||||
{...P8P_GANTT_CONFIG_PROPS}
|
||||
{...state.ganttDef}
|
||||
containerStyle={STYLES.GANTT_CONTAINER}
|
||||
tasks={state.ganttTasks}
|
||||
onTaskDatesChange={handleTaskDatesChange}
|
||||
taskAttributeRenderer={taskAttributeRenderer}
|
||||
taskDialogRenderer={state.useCustomTaskDialog ? taskDialogRenderer : null}
|
||||
/>
|
||||
) : null}
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user