Commit c3ddb098 authored by Florent Chehab's avatar Florent Chehab

Editor redesign in progress

parent f6c6583c
Pipeline #35649 canceled with stages
......@@ -2,6 +2,14 @@
* This file contains action types for the custom redux behaviors (that are not REST related)
*/
// handling of full screen dialog and notifications in an original manner,
// ie common fot the entire app
export const OPEN_FULL_SCREEN_DIALOG = "OPEN_FULL_SCREEN_DIALOG";
export const CLOSE_FULL_SCREEN_DIALOG = "CLOSE_UNIVERSITY_BEING_VIEWED";
export const CREATE_NOTIFICATION = "CREATE_NOTIFICATION";
export const DELETE_NOTIFICATION = "DELETE_NOTIFICATION";
// Other redux actions
export const SAVE_MAIN_MAP_STATUS = "SAVE_MAIN_MAP_STATUS";
export const SAVE_SELECTED_UNIVERSITIES = "SAVE_SELECTED_UNIVERSITIES";
export const SAVE_FILTER_CONFIG = "SAVE_FILTER_CONFIG";
......
/*
* This file contains the redux actions related to handling the app fullScreenDialog
*/
import {
OPEN_FULL_SCREEN_DIALOG,
CLOSE_FULL_SCREEN_DIALOG,
} from "./action-types";
/**
* Action: Open the full screen dialog and pass attributes.
*
* @export
* @param {Node} innerNodes
* @returns {object}
*/
export function openFullScreenDialog(innerNodes) {
return {
type: OPEN_FULL_SCREEN_DIALOG,
innerNodes
};
}
/**
* Action: Close the full screen dialog
*
* @export
* @returns {object}
*/
export function closeFullScreenDialog() {
return {
type: CLOSE_FULL_SCREEN_DIALOG,
};
}
/*
* This file contains the redux actions related to the handling of notifications in the app
*/
import {
CREATE_NOTIFICATION,
DELETE_NOTIFICATION,
} from "./action-types";
/**
* Action: Create a notifiacation in the app
*
* @export
* @param {object} attrs
* @returns {object}
*/
export function createNotification(attrs) {
return {
type: CREATE_NOTIFICATION,
attrs
};
}
/**
* Action: Delete a notification
* TODO add support for multiple
*
* @export
* @returns {object}
*/
export function deleteNotification() {
return {
type: DELETE_NOTIFICATION,
};
}
......@@ -16,7 +16,9 @@ import Chip from "@material-ui/core/Chip";
import Avatar from "@material-ui/core/Avatar";
import ChevronLeftIcon from "@material-ui/icons/ChevronLeft";
import SchoolIcon from "@material-ui/icons/School";
import { mainListItems, secondaryListItems, thirdListItems } from "./template/listItems";
import { mainListItems, secondaryListItems, thirdListItems } from "./appRelated/listItems";
import FullScreenDialog from "./appRelated/FullScreenDialog";
import Notifications from "./appRelated/Notifications";
import { connect } from "react-redux";
import CustomComponentForAPI from "./CustomComponentForAPI";
......@@ -111,6 +113,10 @@ class App extends CustomComponentForAPI {
</Drawer>
<Notifications />
<FullScreenDialog />
<main className={classNames(classes.content, classes.noPaddingTop)}>
<div className={classes.paddingTop}>
<Route path="/app/" exact={true} component={PageHome} />
......@@ -126,6 +132,7 @@ class App extends CustomComponentForAPI {
<div >
<Route path="/app/university/:id" component={PageUniversity} />
</div>
</main>
</div>
......
import React, { Component } from "react";
import Dialog from "@material-ui/core/Dialog";
import Slide from "@material-ui/core/Slide";
import PropTypes from "prop-types";
import { connect } from "react-redux";
/**
* Function to enable the FullScreenDialog to have nice transitions
* @returns
*/
function Transition(props) {
return <Slide direction="up" {...props} />;
}
/**
* Class to display a full screen dialog.
* It is connected to the redux state to have only one of such dialog across the app.
*
* @class FullScreenDialog
* @extends {Component}
*/
class FullScreenDialog extends Component {
render() {
return (
<Dialog
fullScreen
open={this.props.open}
TransitionComponent={Transition}
>
{this.props.innerNodes}
</Dialog>
);
}
}
FullScreenDialog.propTypes = {
open: PropTypes.bool.isRequired,
innerNodes: PropTypes.node.isRequired,
};
// Get the props from the redux store.
const mapStateToProps = (state) => ({ ...state.app.fullScreenDialog });
export default connect(mapStateToProps)(FullScreenDialog);
......@@ -65,7 +65,7 @@ class GenericModule extends CustomComponentForAPI {
}
};
handleCloseEditor = (somethingWasSaved = false) => {
handleEditorWasClosed = (somethingWasSaved = false) => {
this.setState({ editorOpen: false, dataToSave: null });
if (somethingWasSaved && this.props.moduleInGroupInfos.isInGroup) {
// this.props.moduleInGroupInfos.invalidateGroup();
......@@ -163,7 +163,7 @@ class GenericModule extends CustomComponentForAPI {
/>
<this.props.editor
open={this.state.editorOpen}
handleCloseEditor={this.handleCloseEditor}
handleEditorWasClosed={this.handleEditorWasClosed}
modelData={this.props.parseRawModelData(this.state.rawModelDataForEditor)}
outsideData={this.props.outsideData}
userData={this.props.userData}
......
import getActions from "../../../../api/getActions";
import { openFullScreenDialog, closeFullScreenDialog } from "../../../../actions/fullScreenDialog";
/**
* Function to create the mapDispatchToProps function for editor in a "generic way"
......@@ -11,6 +12,8 @@ export default function getMapDispatchToPropsForEditor(name) {
return (dispatch) => {
return {
saveData: (data) => dispatch(getActions(name).update(data)),
openFullScreenDialog: (innerNodes) => dispatch(openFullScreenDialog(innerNodes)),
closeFullScreenDialog: () => dispatch(closeFullScreenDialog()),
// clearSaveError: () => dispatch(savingHasErrorAction(false))
};
};
......
/*
* This file contains the redux reducers related to the app fullScreenDialog
*/
import React from "react";
import {
OPEN_FULL_SCREEN_DIALOG,
CLOSE_FULL_SCREEN_DIALOG
} from "../actions/action-types";
/**
* Reducer for the fullScreenDialog
*
* @export
* @param {object} state
* @param {string} action
* @returns
*/
export function fullScreenDialog(state = { open: false, innerNodes: <div></div> }, action) {
switch (action.type) {
case OPEN_FULL_SCREEN_DIALOG:
return {
open: true,
innerNodes: action.innerNodes,
};
case CLOSE_FULL_SCREEN_DIALOG:
return {
open: false,
innerNodes: <div></div>
};
default:
return state;
}
}
import { combineReducers } from "redux";
import { fullScreenDialog } from "./fullScreenDialog";
import { notifications } from "./notifications";
import { saveMainMapStatus } from "./map";
import { saveSelectedUniversities, saveFilterConfig } from "./filter";
import { saveAppTheme, saveAppColorPicker } from "./theme";
......@@ -8,6 +10,8 @@ import { apiReducers } from "../api/buildApiActionsAndReducers";
// Combine the reducers related to the app
const app = combineReducers({
fullScreenDialog,
notifications,
mainMap: saveMainMapStatus,
selectedUniversities: saveSelectedUniversities,
filter: saveFilterConfig,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment