CITKParus/P8-Panels
2
0
Fork 2
Code Issues Pull Requests 1 Projects Releases Wiki Activity

WEB APP: Модификация панелей "Работы проектов" и "Примеры" под новые возможности стилей P8PGantt

Browse Source
This commit is contained in:
Mikhail Chechnev 2024-09-17 21:39:21 +03:00
parent e81cde166c
commit 3808011652
2 changed files with 48 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
app/panels/prj_jobs/prj_jobs.js
View File

@ -33,6 +33,7 @@ import { BackEndСtx } from "../../context/backend"; //Контекст взаи
import { MessagingСtx } from "../../context/messaging"; //Контекст сообщений import { MessagingСtx } from "../../context/messaging"; //Контекст сообщений
import { ApplicationСtx } from "../../context/application"; //Контекст приложения import { ApplicationСtx } from "../../context/application"; //Контекст приложения
import { formatDateJSONDateOnly } from "../../core/utils"; //Вспомогательные функции import { formatDateJSONDateOnly } from "../../core/utils"; //Вспомогательные функции
import { APP_BAR_HEIGHT } from "../../components/p8p_app_workspace"; //Заголовок страницы
import { P8P_GANTT_CONFIG_PROPS } from "../../config_wrapper"; //Подключение компонентов к настройкам приложения import { P8P_GANTT_CONFIG_PROPS } from "../../config_wrapper"; //Подключение компонентов к настройкам приложения
import { P8PGantt } from "../../components/p8p_gantt"; //Диаграмма Ганта import { P8PGantt } from "../../components/p8p_gantt"; //Диаграмма Ганта
import { formatDateRF } from "../../core/utils"; //Вспомогательные функции import { formatDateRF } from "../../core/utils"; //Вспомогательные функции
@ -44,12 +45,6 @@ import { taskAttributeRenderer } from "./layouts"; //Дополнительна
//Константы //Константы
//--------- //---------
//Высота диаграммы Ганта
const GANTT_HEIGHT = "75vh";
//Ширина диаграммы Ганта
const GANTT_WIDTH = "98vw";
//Стили //Стили
const STYLES = { const STYLES = {
PROJECTS_LIST_ITEM_NOJOBS: { backgroundColor: "#ff000045" }, PROJECTS_LIST_ITEM_NOJOBS: { backgroundColor: "#ff000045" },
@ -58,11 +53,11 @@ const STYLES = {
PROJECTS_LIST_ITEM_SECONDARY_NOJOBS: { color: "red" }, PROJECTS_LIST_ITEM_SECONDARY_NOJOBS: { color: "red" },
PROJECTS_LIST_ITEM_SECONDARY_NOEDIT: { color: "gray" }, PROJECTS_LIST_ITEM_SECONDARY_NOEDIT: { color: "gray" },
PROJECTS_LIST_ITEM_SECONDARY_CHANGED: { color: "green" }, 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" } }, PROJECTS_DRAWER: { width: "250px", flexShrink: 0, [`& .MuiDrawer-paper`]: { width: "250px", boxSizing: "border-box" } },
GANTT_CONTAINER: { height: GANTT_HEIGHT, width: GANTT_WIDTH }, GANTT_CONTAINER: { height: `calc(100vh - ${APP_BAR_HEIGHT})`, width: "100vw", paddingTop: "24px" },
GANTT_TITLE: { paddingLeft: "100px", paddingRight: "120px" }, GANTT_TITLE: { paddingLeft: "150px", paddingRight: "150px" },
PERIODS_BUTTON: { position: "absolute", right: "20px" }, 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" } } PERIODS_DRAWER: { width: "1200px", flexShrink: 0, [`& .MuiDrawer-paper`]: { width: "1200px", boxSizing: "border-box" } }
}; };
@ -452,7 +447,7 @@ const PrjJobs = () => {
//Генерация содержимого //Генерация содержимого
return ( return (
<Box p={2}> <Box>
{state.showInitDialog ? ( {state.showInitDialog ? (
<InitPrmsDialog <InitPrmsDialog
dateBegin={state.dateBegin} dateBegin={state.dateBegin}
@ -514,23 +509,23 @@ const PrjJobs = () => {
{state.ident ? <ResMon ident={state.ident} onPlanJobsDtlProjectClick={handlePlanJobsDtlProjectClick} /> : null} {state.ident ? <ResMon ident={state.ident} onPlanJobsDtlProjectClick={handlePlanJobsDtlProjectClick} /> : null}
</Drawer> </Drawer>
{state.init == true ? ( {state.init == true ? (
<Grid container spacing={1}> <Grid container>
<Grid item xs={12}> <Grid item xs={12}>
{state.selectedProjectJobsLoaded ? ( {state.selectedProjectJobsLoaded ? (
<Box sx={STYLES.GANTT_CONTAINER} p={1}> <P8PGantt
<P8PGantt {...P8P_GANTT_CONFIG_PROPS}
{...P8P_GANTT_CONFIG_PROPS} {...state.selectedProjectGanttDef}
{...state.selectedProjectGanttDef} containerStyle={STYLES.GANTT_CONTAINER}
height={GANTT_HEIGHT} titleStyle={STYLES.GANTT_TITLE}
titleStyle={STYLES.GANTT_TITLE} onTitleClick={handleTitleClick}
onTitleClick={handleTitleClick} tasks={state.selectedProjectTasks}
tasks={state.selectedProjectTasks} onTaskDatesChange={handleTaskDatesChange}
onTaskDatesChange={handleTaskDatesChange} taskAttributeRenderer={taskAttributeRenderer}
taskAttributeRenderer={taskAttributeRenderer} />
/>
</Box>
) : !state.selectedProject ? ( ) : !state.selectedProject ? (
<InlineMsgInfo okBtn={false} text={"Укажите проект для отображения его плана-графика"} /> <Box pt={3}>
<InlineMsgInfo okBtn={false} text={"Укажите проект для отображения его плана-графика"} />
</Box>
) : null} ) : null}
</Grid> </Grid>
</Grid> </Grid>

62
app/panels/samples/gantt.js
View File

@ -9,22 +9,9 @@
import React, { useState, useContext, useCallback, useEffect } from "react"; //Классы React import React, { useState, useContext, useCallback, useEffect } from "react"; //Классы React
import PropTypes from "prop-types"; //Контроль свойств компонента import PropTypes from "prop-types"; //Контроль свойств компонента
import { import { Typography, Grid, Stack, Icon, FormControlLabel, Checkbox, Card, CardHeader, CardActions, Avatar, CardContent, Button } from "@mui/material"; //Интерфейсные элементы
Typography,
Grid,
Stack,
Icon,
Box,
FormControlLabel,
Checkbox,
Card,
CardHeader,
CardActions,
Avatar,
CardContent,
Button
} from "@mui/material"; //Интерфейсные элементы
import { formatDateJSONDateOnly, formatDateRF } from "../../core/utils"; //Вспомогательные функции import { formatDateJSONDateOnly, formatDateRF } from "../../core/utils"; //Вспомогательные функции
import { APP_BAR_HEIGHT } from "../../components/p8p_app_workspace"; //Заголовок страницы
import { P8PGantt } from "../../components/p8p_gantt"; //Диаграмма Ганта import { P8PGantt } from "../../components/p8p_gantt"; //Диаграмма Ганта
import { P8P_GANTT_CONFIG_PROPS } from "../../config_wrapper"; //Подключение компонентов к настройкам приложения import { P8P_GANTT_CONFIG_PROPS } from "../../config_wrapper"; //Подключение компонентов к настройкам приложения
import { BackEndСtx } from "../../context/backend"; //Контекст взаимодействия с сервером 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 = { const STYLES = {
CONTAINER: { textAlign: "center", paddingTop: "20px" }, CONTAINER: { textAlign: "center", paddingTop: CONTAINER_PADDING_TOP },
TITLE: { paddingBottom: "15px" }, TITLE: { paddingBottom: "15px", height: TITLE_HEIGHT },
GANTT_CONTAINER: { height: GANTT_HEIGHT, width: GANTT_WIDTH } 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} {title}
</Typography> </Typography>
<FormControlLabel <FormControlLabel
sx={STYLES.CONTROL}
control={<Checkbox onChange={() => setState(pv => ({ ...pv, useCustomTaskDialog: !pv.useCustomTaskDialog }))} />} control={<Checkbox onChange={() => setState(pv => ({ ...pv, useCustomTaskDialog: !pv.useCustomTaskDialog }))} />}
label="Отображать пользовательский диалог задачи" label="Отображать пользовательский диалог задачи"
/> />
<Grid container spacing={0} direction="column" alignItems="center"> <Grid container direction="column" alignItems="center">
<Grid item xs={12}> <Grid item xs={12}>
{state.dataLoaded ? ( {state.dataLoaded ? (
<Box sx={STYLES.GANTT_CONTAINER} p={1}> <P8PGantt
<P8PGantt {...P8P_GANTT_CONFIG_PROPS}
{...P8P_GANTT_CONFIG_PROPS} {...state.ganttDef}
{...state.ganttDef} containerStyle={STYLES.GANTT_CONTAINER}
height={GANTT_HEIGHT} tasks={state.ganttTasks}
tasks={state.ganttTasks} onTaskDatesChange={handleTaskDatesChange}
onTaskDatesChange={handleTaskDatesChange} taskAttributeRenderer={taskAttributeRenderer}
taskAttributeRenderer={taskAttributeRenderer} taskDialogRenderer={state.useCustomTaskDialog ? taskDialogRenderer : null}
taskDialogRenderer={state.useCustomTaskDialog ? taskDialogRenderer : null} />
/>
</Box>
) : null} ) : null}
</Grid> </Grid>
</Grid> </Grid>