update gallery-project

src/actions/projectActions.js

@@ -1,4 +1,4 @@
-import { PROJECT_PROGRESS, GET_PROJECT, GET_PROJECTS, PROJECT_TYPE } from './types';
+import { PROJECT_PROGRESS, GET_PROJECT, GET_PROJECTS, PROJECT_TYPE, PROJECT_DESCRIPTION } from './types';
 
 import axios from 'axios';
 import { workspaceName } from './workspaceActions';
@@ -11,6 +11,13 @@ export const setType = (type) => (dispatch) => {
   });
 };
 
+export const setDescription = (description) => (dispatch) => {
+  dispatch({
+    type: PROJECT_DESCRIPTION,
+    payload: description
+  });
+};
+
 export const getProject = (type, id) => (dispatch) => {
   dispatch({type: PROJECT_PROGRESS});
   dispatch(setType(type));
@@ -23,6 +30,10 @@ export const getProject = (type, id) => (dispatch) => {
           type: GET_PROJECT,
           payload: project
         });
+        dispatch({
+          type: PROJECT_DESCRIPTION,
+          payload: project.description
+        });
         dispatch({type: PROJECT_PROGRESS});
         dispatch(returnSuccess(res.data.message, res.status, 'GET_PROJECT_SUCCESS'));
       }
@@ -66,15 +77,24 @@ export const updateProject = () => (dispatch, getState) => {
     xml: workspace.code.xml,
     title: workspace.name
   }
-  var id = getState().project.projects[0]._id;
+  var project = getState().project;
-  axios.put(`${process.env.REACT_APP_BLOCKLY_API}/project/${id}`, body)
+  var id = project.projects[0]._id;
+  var type = project.type;
+  if(type==='gallery'){
+    body.description = project.description;
+  }
+  axios.put(`${process.env.REACT_APP_BLOCKLY_API}/${type}/${id}`, body)
     .then(res => {
-      var project = res.data.project;
+      var project = res.data[type];
       dispatch({
         type: GET_PROJECT,
         payload: project
       });
-      dispatch(returnSuccess(res.data.message, res.status, 'PROJECT_UPDATE_SUCCESS'));
+      if(type === 'project'){
+        dispatch(returnSuccess(res.data.message, res.status, 'PROJECT_UPDATE_SUCCESS'));
+      } else {
+        dispatch(returnSuccess(res.data.message, res.status, 'GALLERY_UPDATE_SUCCESS'));
+      }
     })
     .catch(err => {
       if(err.response){
@@ -110,4 +130,5 @@ export const resetProject = () => (dispatch) => {
     payload: []
   });
   dispatch(setType(''));
+  dispatch(setDescription(''));
 };

src/actions/types.js

@@ -44,3 +44,4 @@ export const PROJECT_PROGRESS = 'PROJECT_PROGRESS';
 export const GET_PROJECT = 'GET_PROJECT';
 export const GET_PROJECTS = 'GET_PROJECTS';
 export const PROJECT_TYPE = 'PROJECT_TYPE';
+export const PROJECT_DESCRIPTION = 'PROJECT_DESCRIPTION';

src/components/Project/Project.js

@@ -40,9 +40,12 @@ class Project extends Component {
           this.props.returnErrors('', 404, 'GET_SHARE_FAIL');
         }
       }
-      if(this.props.message.id === 'GET_PROJECT_SUCCESS'){
+      else if(this.props.message.id === 'GET_PROJECT_SUCCESS'){
         this.props.workspaceName(this.props.project.title);
       }
+      else if(this.props.message.id === 'PROJECT_DELETE_SUCCESS' || this.props.message.id === 'GALLERY_DELETE_SUCCESS'){
+        this.props.history.push(`/${this.props.type}`);
+      }
     }
   }
 

src/components/WorkspaceFunc.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { clearStats, onChangeCode, workspaceName } from '../actions/workspaceActions';
-import { updateProject, deleteProject } from '../actions/projectActions';
+import { updateProject, deleteProject, setDescription } from '../actions/projectActions';
 
 import * as Blockly from 'blockly/core';
 
@@ -86,6 +86,7 @@ class WorkspaceFunc extends Component {
       saveFile: false,
       share: false,
       name: props.name,
+      description: props.description,
       snackbar: false,
       type: '',
       key: '',
@@ -102,6 +103,9 @@ class WorkspaceFunc extends Component {
       if(this.props.message.id === 'PROJECT_UPDATE_SUCCESS'){
         this.setState({ snackbar: true, key: Date.now(), message: `Das Projekt wurde erfolgreich aktualisiert.`, type: 'success' });
       }
+      if(this.props.message.id === 'GALLERY_UPDATE_SUCCESS'){
+        this.setState({ snackbar: true, key: Date.now(), message: `Das Galerie-Projekt wurde erfolgreich aktualisiert.`, type: 'success' });
+      }
       else if(this.props.message.id === 'PROJECT_DELETE_SUCCESS'){
         this.props.history.push(`/${this.props.projectType}`);
       }
@@ -218,6 +222,10 @@ class WorkspaceFunc extends Component {
     this.setState({ name: e.target.value });
   }
 
+  setDescription = (e) => {
+    this.setState({ description: e.target.value });
+  }
+
   uploadXmlFile = (xmlFile) => {
     if (xmlFile.type !== 'text/xml') {
       this.setState({ open: true, file: false, title: 'Unzulässiger Dateityp', content: 'Die übergebene Datei entsprach nicht dem geforderten Format. Es sind nur XML-Dateien zulässig.' });
@@ -255,7 +263,10 @@ class WorkspaceFunc extends Component {
   renameWorkspace = () => {
     this.props.workspaceName(this.state.name);
     this.toggleDialog();
-    if(this.props.projectType === 'project'){
+    if(this.props.projectType === 'project' || this.props.projectType === 'gallery'){
+      if(this.props.projectType === 'gallery'){
+        this.props.setDescription(this.state.description);
+      }
       this.props.updateProject();
     } else {
       this.setState({ snackbar: true, type: 'success', key: Date.now(), message: `Das Projekt wurde erfolgreich in '${this.state.name}' umbenannt.` });
@@ -285,7 +296,7 @@ class WorkspaceFunc extends Component {
       <div style={{ width: 'max-content', display: 'flex' }}>
         {!this.props.assessment ?
           <Tooltip title={`Titel des Projektes${this.props.name ? `: ${this.props.name}` : ''}`} arrow style={{ marginRight: '5px' }}>
-            <div className={this.props.classes.workspaceName} onClick={() => { this.setState({ file: true, open: true, saveFile: false, title: 'Projekt benennen', content: 'Bitte gib einen Namen für das Projekt ein und bestätige diesen mit einem Klick auf \'Eingabe\'.' }) }}>
+            <div className={this.props.classes.workspaceName} onClick={() => { this.setState({ file: true, open: true, saveFile: false, title: this.props.projectType === 'gallery' ? 'Projektdaten eintragen':'Projekt benennen', content: this.props.projectType === 'gallery' ? 'Bitte gib einen Titel und eine Beschreibung für das Galerie-Projekt ein und bestätige die Angaben mit einem Klick auf \'Eingabe\'.':'Bitte gib einen Namen für das Projekt ein und bestätige diesen mit einem Klick auf \'Eingabe\'.' }) }}>
               {this.props.name && !isWidthDown(this.props.projectType === 'project' || this.props.projectType === 'gallery' ? 'xl':'xs', this.props.width) ? <Typography style={{ margin: 'auto -3px auto 12px' }}>{this.props.name}</Typography> : null}
               <div style={{ width: '40px', display: 'flex' }}>
                 <FontAwesomeIcon icon={faPen} style={{ height: '18px', width: '18px', margin: 'auto' }} />
@@ -381,7 +392,12 @@ class WorkspaceFunc extends Component {
         >
           {this.state.file ?
             <div style={{ marginTop: '10px' }}>
-              <TextField autoFocus placeholder={this.state.saveXml ? 'Dateiname' : 'Projekttitel'} value={this.state.name} onChange={this.setFileName} style={{ marginRight: '10px' }} />
+              {this.props.projectType === 'gallery' ?
+                <div>
+                  <TextField autoFocus placeholder={this.state.saveXml ? 'Dateiname' : 'Projekttitel'} value={this.state.name} onChange={this.setFileName} style={{marginBottom: '10px'}}/>
+                  <TextField fullWidth placeholder={'Projektbeschreibung'} value={this.state.description} onChange={this.setDescription} style={{ marginBottom: '10px' }} />
+                </div>
+              : <TextField autoFocus placeholder={this.state.saveXml ? 'Dateiname' : 'Projekttitel'} value={this.state.name} onChange={this.setFileName} style={{ marginRight: '10px' }} />}
               <Button disabled={!this.state.name} variant='contained' color='primary' onClick={() => { this.state.saveFile ? this.state.file === 'xml' ? this.downloadXmlFile() : this.getSvg() : this.renameWorkspace(); this.toggleDialog(); }}>Eingabe</Button>
             </div>
           : this.state.share ?
@@ -420,9 +436,11 @@ WorkspaceFunc.propTypes = {
   workspaceName: PropTypes.func.isRequired,
   updateProject: PropTypes.func.isRequired,
   deleteProject: PropTypes.func.isRequired,
+  setDescription: PropTypes.func.isRequired,
   arduino: PropTypes.string.isRequired,
   xml: PropTypes.string.isRequired,
-  name: PropTypes.string,
+  name: PropTypes.string.isRequired,
+  description: PropTypes.string.isRequired,
   projectType: PropTypes.string.isRequired,
   message: PropTypes.object.isRequired
 };
@@ -431,8 +449,9 @@ const mapStateToProps = state => ({
   arduino: state.workspace.code.arduino,
   xml: state.workspace.code.xml,
   name: state.workspace.name,
+  description: state.project.description,
   projectType: state.project.type,
   message: state.message
 });
 
-export default connect(mapStateToProps, { clearStats, onChangeCode, workspaceName, updateProject, deleteProject })(withStyles(styles, { withTheme: true })(withWidth()(withRouter(WorkspaceFunc))));
+export default connect(mapStateToProps, { clearStats, onChangeCode, workspaceName, updateProject, deleteProject, setDescription })(withStyles(styles, { withTheme: true })(withWidth()(withRouter(WorkspaceFunc))));

src/reducers/projectReducer.js

@@ -1,8 +1,9 @@
-import { PROJECT_PROGRESS, GET_PROJECT, GET_PROJECTS, PROJECT_TYPE } from '../actions/types';
+import { PROJECT_PROGRESS, GET_PROJECT, GET_PROJECTS, PROJECT_TYPE, PROJECT_DESCRIPTION } from '../actions/types';
 
 const initialState = {
   projects: [],
   type: '',
+  description: '',
   progress: false
 };
 
@@ -28,6 +29,11 @@ export default function (state = initialState, action) {
         ...state,
         type: action.payload
       }
+    case PROJECT_DESCRIPTION:
+      return {
+        ...state,
+        description: action.payload
+      }
     default:
       return state;
   }