TonikX · PolinaShneider · Apr 2, 2023
diff --git a/frontend/src/containers/WorkProgram/Prerequisites/Prerequisites.styles.ts b/frontend/src/containers/WorkProgram/Prerequisites/Prerequisites.styles.ts
@@ -8,7 +8,6 @@ export default (theme: Theme) => createStyles({
     },
     addIcon: {
         marginTop: '10px',
-        marginLeft: 'auto',
         flex: 'none',
         marginBottom: '20px',
     },
@@ -38,5 +37,11 @@ export default (theme: Theme) => createStyles({
         color: '#fff',
         display: 'flex',
         padding: '10px'
+    },
+    buttonsWrapper: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'flex-end',
+        gap: '10px'
     }
-});
+});
diff --git a/frontend/src/containers/WorkProgram/Prerequisites/Prerequisites.tsx b/frontend/src/containers/WorkProgram/Prerequisites/Prerequisites.tsx
@@ -17,6 +17,7 @@ import {fields, PrerequisiteFields} from "../enum";
 import {TrainingEntitiesFields} from "../../TrainingEntities/enum";
 
 import CreateModal from "./CreateModal";
+import RecommendationModal from "./RecommendationModal";
 import {PrerequisiteType} from "../types";
 
 import connect from './Prerequisites.connect';
@@ -27,6 +28,10 @@ class Prerequisites extends React.PureComponent<SixthStepProps> {
         this.props.actions.openDialog({dialogType: fields.ADD_NEW_PREREQUISITES, data: {}});
     };
 
+    getRecommendations = () => {
+        this.props.actions.openDialog({dialogType: fields.GET_RECOMMENDATIONS, data: {}});
+    };
+
     handleClickDelete = (id: number) => () => {
         this.props.actions.deletePrerequisite(id);
     };
@@ -37,7 +42,7 @@ class Prerequisites extends React.PureComponent<SixthStepProps> {
 
     render() {
         const {classes, prerequisitesList, isCanEdit} = this.props;
-        
+
         return (
             <div className={classes.root}>
                 <div className={classNames(classes.header, classes.item)}>
@@ -81,15 +86,25 @@ class Prerequisites extends React.PureComponent<SixthStepProps> {
                 </Scrollbars>
 
                 {isCanEdit &&
-                    <Button color="secondary"
-                         className={classes.addIcon}
-                         onClick={this.handleCreateNew}
-                    >
-                        <AddIcon/> Добавить пререквизит
-                    </Button>
+                    <div className={classes.buttonsWrapper}>
+                        <Button color="secondary"
+                                className={classes.addIcon}
+                                onClick={this.handleCreateNew}
+                        >
+                            <AddIcon/> Добавить пререквизит
+                        </Button>
+                        <Button variant="outlined"
+                                color="primary"
+                                className={classes.addIcon}
+                                onClick={this.getRecommendations}
+                        >
+                            Получить рекомендации
+                        </Button>
+                    </div>
                 }
 
                 {isCanEdit && <CreateModal />}
+                {isCanEdit && <RecommendationModal />}
             </div>
         );
     }

diff --git a/...c/containers/WorkProgram/Prerequisites/RecommendationModal/RecommendationModal.connect.ts b/...c/containers/WorkProgram/Prerequisites/RecommendationModal/RecommendationModal.connect.ts
@@ -0,0 +1,28 @@
+import {Dispatch} from "react";
+import {connect} from 'react-redux';
+import {bindActionCreators} from "redux";
+
+import {rootState} from "../../../../store/reducers";
+
+import actions from "../../actions";
+import {isOpenDialog, getRecommendations} from '../../getters';
+import {WorkProgramActions} from "../../types";
+import {fields} from "../../enum";
+
+import {TrainingEntitiesActions} from '../../../TrainingEntities/types';
+import {SubjectAreaActions} from '../../../SubjectArea/types';
+
+const mapStateToProps = (state: rootState) => {
+    return {
+        isOpen: isOpenDialog(state, fields.GET_RECOMMENDATIONS),
+        recommendations: getRecommendations(state),
+    };
+};
+
+const mapDispatchToProps = (dispatch: Dispatch<WorkProgramActions|TrainingEntitiesActions|SubjectAreaActions>) => ({
+    // @ts-ignore
+    actions: bindActionCreators(actions, dispatch),
+});
+
+// @ts-ignore
+export default connect(mapStateToProps, mapDispatchToProps);
diff --git a/...rc/containers/WorkProgram/Prerequisites/RecommendationModal/RecommendationModal.styles.ts b/...rc/containers/WorkProgram/Prerequisites/RecommendationModal/RecommendationModal.styles.ts
@@ -0,0 +1,33 @@
+import {createStyles, Theme} from "@material-ui/core";
+
+export default (theme: Theme) => createStyles({
+    actions: {
+        padding: '15px 24px 20px'
+    },
+    dialog: {
+        padding: 20,
+    },
+    dialogTitle: {
+        display: 'flex',
+        alignItems: 'center'
+    },
+    radioGroup: {
+        display: 'flex',
+        flexDirection: 'row',
+        marginBottom: '30px',
+        width: '550px'
+    },
+    marginBottom30: {
+        marginBottom: '30px'
+    },
+    link: {
+        marginRight: 'auto',
+        textDecoration: 'none',
+        color: theme.palette.primary.main,
+    },
+    recommendations: {
+        display: 'flex',
+        flexWrap: 'wrap',
+        gap: '10px',
+    },
+});
diff --git a/...tend/src/containers/WorkProgram/Prerequisites/RecommendationModal/RecommendationModal.tsx b/...tend/src/containers/WorkProgram/Prerequisites/RecommendationModal/RecommendationModal.tsx
@@ -0,0 +1,133 @@
+import React from 'react';
+import {shallowEqual} from "recompose";
+
+import {RecommendationModalProps} from './types';
+
+import Dialog from '@material-ui/core/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import Button from '@material-ui/core/Button';
+import Tooltip from "@material-ui/core/Tooltip";
+import withStyles from '@material-ui/core/styles/withStyles';
+
+import HelpOutlineIcon from '@material-ui/icons/HelpOutline';
+
+import {fields} from '../../enum';
+
+import connect from './RecommendationModal.connect';
+import styles from './RecommendationModal.styles';
+import {Chip, Typography} from "@material-ui/core";
+
+class RecommendationModal extends React.PureComponent<RecommendationModalProps> {
+    state = {
+        selectedItems: [] as number[]
+    };
+
+    componentDidUpdate(prevProps: Readonly<RecommendationModalProps>, prevState: Readonly<{}>, snapshot?: any) {
+        const {isOpen} = this.props;
+
+        if (!shallowEqual(isOpen, prevProps.isOpen)){
+            this.props.actions.getRecommendedPrerequisites();
+        }
+    }
+
+    handleClose = () => {
+        this.setState(() => ({
+            selectedItems: []
+        }));
+        this.props.actions.closeDialog(fields.GET_RECOMMENDATIONS);
+    };
+
+    handleSave = () => {
+        const {selectedItems} = this.state;
+        selectedItems.forEach((id) => {
+            this.props.actions.addPrerequisite({
+                id: null,
+                masterylevel: '1',
+                item: {
+                    id
+                }
+            })
+        });
+        this.handleClose();
+    };
+
+    selectItem = (item: {id: number}) => {
+        const {selectedItems} = this.state;
+
+        if (selectedItems.includes(item.id)) {
+            this.setState(() => ({
+                selectedItems: this.state.selectedItems.filter((it) => it !== item.id)
+            }));
+        } else {
+            this.setState(() => ({
+                selectedItems: [...this.state.selectedItems, item.id]
+            }));
+        }
+    };
+
+    render() {
+        const {isOpen, classes, recommendations} = this.props;
+        const {selectedItems} = this.state;
+        const disableButton = selectedItems.length === 0;
+
+        const recommendationsContent = recommendations.length === 0 ? <Typography>
+            Для вас пока нет рекомендаций. Они появятся позже на основе созданных вами РПД
+        </Typography> : (
+            <div className={classes.recommendations}>
+                {
+                    recommendations.map(({item}) => <Chip
+                        color={selectedItems.includes(item.id) ? "primary" : "default"}
+                        key={item.id}
+                        onClick={() => this.selectItem(item)}
+                        label={item.name}
+                    />)
+                }
+            </div>
+        );
+
+        return (
+            <Dialog
+                open={isOpen}
+                onClose={this.handleClose}
+                classes={{
+                    paper: classes.dialog
+                }}
+            >
+                <DialogTitle>
+                    <div className={classes.dialogTitle}>
+                        Рекомендации пререквизитов
+                        <Tooltip
+                            title={
+                                <span style={{ fontSize: '13px' }}>
+                                    Пререквизит - объект, отражающий конкретное знание из конкретной области
+                                    (далее "учебная сущность"), которое должно быть у студента перед началом изучения курса.
+                                </span>
+                            }
+                        >
+                            <HelpOutlineIcon color="primary" style={{ marginLeft: '10px', paddingTop: '4px' }} />
+                        </Tooltip>
+                    </div>
+                </DialogTitle>
+                <DialogContent>
+                    {recommendationsContent}
+                </DialogContent>
+                <DialogActions className={classes.actions}>
+                    <Button onClick={this.handleClose}
+                            variant="text">
+                        Отменить
+                    </Button>
+                    <Button onClick={this.handleSave}
+                            variant="contained"
+                            disabled={disableButton}
+                            color="primary">
+                        Применить
+                    </Button>
+                </DialogActions>
+            </Dialog>
+        );
+    }
+}
+
+export default connect(withStyles(styles)(RecommendationModal));
diff --git a/frontend/src/containers/WorkProgram/Prerequisites/RecommendationModal/index.ts b/frontend/src/containers/WorkProgram/Prerequisites/RecommendationModal/index.ts
@@ -0,0 +1 @@
+export {default} from './RecommendationModal';
diff --git a/frontend/src/containers/WorkProgram/Prerequisites/RecommendationModal/types.d.ts b/frontend/src/containers/WorkProgram/Prerequisites/RecommendationModal/types.d.ts
@@ -0,0 +1,24 @@
+import {WithStyles} from "@material-ui/core";
+import {WorkProgramActions} from '../../types';
+
+import styles from "./CreateModal.styles";
+
+type RecommendationItem = {
+    id: number;
+    item: {
+        id: number;
+        name: string;
+        domain: {
+            id: number;
+            name: string;
+        };
+        value: number;
+    }
+}
+
+export interface RecommendationModalProps extends WithStyles<typeof styles> {
+    actions: WorkProgramActions;
+    isOpen: boolean;
+    handleClose: Function;
+    recommendations: RecommendationItem[];
+}
diff --git a/...end/src/containers/WorkProgram/Results/RecommendationModal/RecommendationModal.connect.ts b/...end/src/containers/WorkProgram/Results/RecommendationModal/RecommendationModal.connect.ts
@@ -0,0 +1,28 @@
+import {Dispatch} from "react";
+import {connect} from 'react-redux';
+import {bindActionCreators} from "redux";
+
+import {rootState} from "../../../../store/reducers";
+
+import actions from "../../actions";
+import {isOpenDialog, getRecommendations} from '../../getters';
+import {WorkProgramActions} from "../../types";
+import {fields} from "../../enum";
+
+import {TrainingEntitiesActions} from '../../../TrainingEntities/types';
+import {SubjectAreaActions} from '../../../SubjectArea/types';
+
+const mapStateToProps = (state: rootState) => {
+    return {
+        isOpen: isOpenDialog(state, fields.GET_RECOMMENDATIONS),
+        recommendations: getRecommendations(state),
+    };
+};
+
+const mapDispatchToProps = (dispatch: Dispatch<WorkProgramActions|TrainingEntitiesActions|SubjectAreaActions>) => ({
+    // @ts-ignore
+    actions: bindActionCreators(actions, dispatch),
+});
+
+// @ts-ignore
+export default connect(mapStateToProps, mapDispatchToProps);
diff --git a/...tend/src/containers/WorkProgram/Results/RecommendationModal/RecommendationModal.styles.ts b/...tend/src/containers/WorkProgram/Results/RecommendationModal/RecommendationModal.styles.ts
@@ -0,0 +1,33 @@
+import {createStyles, Theme} from "@material-ui/core";
+
+export default (theme: Theme) => createStyles({
+    actions: {
+        padding: '15px 24px 20px'
+    },
+    dialog: {
+        padding: 20,
+    },
+    dialogTitle: {
+        display: 'flex',
+        alignItems: 'center'
+    },
+    radioGroup: {
+        display: 'flex',
+        flexDirection: 'row',
+        marginBottom: '30px',
+        width: '550px'
+    },
+    marginBottom30: {
+        marginBottom: '30px'
+    },
+    link: {
+        marginRight: 'auto',
+        textDecoration: 'none',
+        color: theme.palette.primary.main,
+    },
+    recommendations: {
+        display: 'flex',
+        flexWrap: 'wrap',
+        gap: '10px',
+    },
+});