Merge pull request #637 from cboard-org/push-board-description

Ask for board description at the time of publish a board

src/components/Communicator/CommunicatorDialog/CommunicatorDialog.component.js

@@ -42,6 +42,7 @@ const CommunicatorDialog = ({
   addOrRemoveBoard,
   copyBoard,
   deleteMyBoard,
+  updateMyBoard,
   setRootBoard,
   publishBoard,
   showNotification
@@ -124,6 +125,7 @@ const CommunicatorDialog = ({
                     addOrRemoveBoard={addOrRemoveBoard}
                     copyBoard={copyBoard}
                     deleteMyBoard={deleteMyBoard}
+                    updateMyBoard={updateMyBoard}
                     publishBoard={publishBoard}
                     setRootBoard={setRootBoard}
                     selectedIds={communicatorBoardsIds}
@@ -202,6 +204,7 @@ CommunicatorDialog.propTypes = {
   onSearch: PropTypes.func,
   addOrRemoveBoard: PropTypes.func.isRequired,
   deleteMyBoard: PropTypes.func.isRequired,
+  updateMyBoard: PropTypes.func.isRequired,
   copyBoard: PropTypes.func.isRequired,
   setRootBoard: PropTypes.func.isRequired,
   publishBoard: PropTypes.func.isRequired,

src/components/Communicator/CommunicatorDialog/CommunicatorDialog.container.js

@@ -20,7 +20,8 @@ import {
   replaceBoard,
   createBoard,
   updateBoard,
-  updateApiObjectsNoChild
+  updateApiObjectsNoChild,
+  updateApiBoard
 } from '../../Board/Board.actions';
 import messages from './CommunicatorDialog.messages';
 
@@ -476,6 +477,18 @@ class CommunicatorDialogContainer extends React.Component {
     showNotification(intl.formatMessage(messages.boardDeleted));
   }
 
+  async updateMyBoard(board) {
+    const { updateBoard, updateApiBoard, userData } = this.props;
+    updateBoard(board);
+
+    // Loggedin user?
+    if ('name' in userData && 'email' in userData) {
+      try {
+        await updateApiBoard(board);
+      } catch (err) {}
+    }
+  }
+
   render() {
     const limit = this.state.page * BOARDS_PAGE_LIMIT;
     const communicatorBoardsIds = this.props.communicatorBoards.map(b => b.id);
@@ -487,6 +500,7 @@ class CommunicatorDialogContainer extends React.Component {
       communicatorBoardsIds,
       addOrRemoveBoard: this.addOrRemoveBoard.bind(this),
       deleteMyBoard: this.deleteMyBoard.bind(this),
+      updateMyBoard: this.updateMyBoard.bind(this),
       publishBoard: this.publishBoard.bind(this),
       setRootBoard: this.setRootBoard.bind(this),
       copyBoard: this.copyBoard.bind(this),
@@ -541,7 +555,8 @@ const mapDispatchToProps = {
   updateBoard,
   addBoardCommunicator,
   upsertCommunicator,
-  updateApiObjectsNoChild
+  updateApiObjectsNoChild,
+  updateApiBoard
 };
 
 export default connect(

src/components/Communicator/CommunicatorDialog/CommunicatorDialog.messages.js

@@ -109,6 +109,10 @@ export default defineMessages({
     id: 'cboard.components.CommunicatorDialog.boardInfoDate',
     defaultMessage: 'Last edited'
   },
+  boardDescription: {
+    id: 'cboard.components.CommunicatorDialog.boardDescription',
+    defaultMessage: 'Description'
+  },
   boardPublished: {
     id: 'cboard.components.CommunicatorDialog.boardPublished',
     defaultMessage:
@@ -156,6 +160,15 @@ export default defineMessages({
     defaultMessage:
       'This action will delete the board and it cannot be recovered. Do you want to proceed?'
   },
+  publishBoard: {
+    id: 'cboard.components.CommunicatorDialog.publishBoard',
+    defaultMessage: 'Board Description'
+  },
+  publishBoardDescription: {
+    id: 'cboard.components.CommunicatorDialog.publishBoardDescription',
+    defaultMessage:
+      'Please provide a short description about the content of the board and what is the board intended for.'
+  },
   accept: {
     id: 'cboard.components.CommunicatorDialog.accept',
     defaultMessage: 'Accept'

src/components/Communicator/CommunicatorDialog/CommunicatorDialogBoardItem.component.js

@@ -21,13 +21,20 @@ import DialogActions from '@material-ui/core/DialogActions';
 import Button from '@material-ui/core/Button';
 import Typography from '@material-ui/core/Typography';
 import Tooltip from '@material-ui/core/Tooltip';
+import TextField from '@material-ui/core/TextField';
 import CircularProgress from '@material-ui/core/CircularProgress';
+import Slide from '@material-ui/core/Slide';
+import DialogContentText from '@material-ui/core/DialogContentText';
 
 import IconButton from '../../UI/IconButton';
 import { TAB_INDEXES } from './CommunicatorDialog.constants';
 import messages from './CommunicatorDialog.messages';
 import { isCordova } from '../../../cordova-util';
 
+const Transition = React.forwardRef(function Transition(props, ref) {
+  return <Slide direction="up" ref={ref} {...props} />;
+});
+
 class CommunicatorDialogBoardItem extends React.Component {
   constructor(props) {
     super(props);
@@ -37,7 +44,9 @@ class CommunicatorDialogBoardItem extends React.Component {
       loading: false,
       openBoardInfo: false,
       openDeleteBoard: false,
-      openCopyBoard: false
+      openPublishBoard: false,
+      openCopyBoard: false,
+      publishDialogValue: ''
     };
   }
 
@@ -61,6 +70,33 @@ class CommunicatorDialogBoardItem extends React.Component {
     });
   }
 
+  handleBoardDescriptionChange = event => {
+    const { value: publishDialogValue } = event.target;
+    this.setState({ publishDialogValue });
+  };
+
+  async handleBoardPublishOpen(board) {
+    console.log(board);
+    if (!board.isPublic && !board.description) {
+      this.setState({
+        openPublishBoard: true
+      });
+    } else {
+      this.setState({ loading: true });
+      try {
+        if (this.state.publishDialogValue) {
+          board.description = this.state.publishDialogValue;
+        }
+        await this.props.publishBoard(board);
+      } catch (err) {
+      } finally {
+        this.setState({
+          loading: false
+        });
+      }
+    }
+  }
+
   handleBoardCopyOpen() {
     this.setState({
       openCopyBoard: true
@@ -97,11 +133,35 @@ class CommunicatorDialogBoardItem extends React.Component {
     }
   }
 
+  async handleBoardPublish(board) {
+    this.setState({
+      openPublishBoard: false,
+      loading: true
+    });
+
+    try {
+      if (this.state.publishDialogValue) {
+        const newBoard = {
+          ...board,
+          description: this.state.publishDialogValue
+        };
+        this.props.updateMyBoard(newBoard);
+      }
+      await this.props.publishBoard(board);
+    } catch (err) {
+    } finally {
+      this.setState({
+        loading: false
+      });
+    }
+  }
+
   handleDialogClose() {
     this.setState({
       openBoardInfo: false,
       openCopyBoard: false,
-      openDeleteBoard: false
+      openDeleteBoard: false,
+      openPublishBoard: false
     });
   }
 
@@ -118,8 +178,7 @@ class CommunicatorDialogBoardItem extends React.Component {
       userData,
       communicator,
       activeBoardId,
-      addOrRemoveBoard,
-      publishBoard
+      addOrRemoveBoard
     } = this.props;
     const title = board.name || board.id;
     const displayActions =
@@ -135,7 +194,11 @@ class CommunicatorDialogBoardItem extends React.Component {
     return (
       <div className="CommunicatorDialog__boards__item">
         <div className="CommunicatorDialog__boards__item__image">
-          {!!boardCaption && <img src={boardCaption} alt={title} />}
+          {!!boardCaption && (
+            <Tooltip placement="bottom-start" title={board.description}>
+              <img src={boardCaption} alt={title} />
+            </Tooltip>
+          )}
           {!boardCaption && (
             <div className="CommunicatorDialog__boards__item__image__empty">
               <ViewModuleIcon />
@@ -250,6 +313,10 @@ class CommunicatorDialogBoardItem extends React.Component {
                         <b>{intl.formatMessage(messages.boardInfoAuthor)}:</b>{' '}
                         {board.author}
                       </Typography>
+                      <Typography variant="body1" gutterBottom>
+                        <b>{intl.formatMessage(messages.boardDescription)}:</b>{' '}
+                        {board.description}
+                      </Typography>
                       <Typography variant="body1" gutterBottom>
                         <b>{intl.formatMessage(messages.boardInfoDate)}:</b>{' '}
                         {moment(board.lastEdited).format('DD/MM/YYYY')}
@@ -332,11 +399,56 @@ class CommunicatorDialogBoardItem extends React.Component {
                         : intl.formatMessage(messages.menuPublishOption)
                     }
                     onClick={() => {
-                      publishBoard(board);
+                      this.handleBoardPublishOpen(board);
                     }}
                   >
                     {board.isPublic ? <KeyIcon /> : <PublicIcon />}
                   </IconButton>
+                  <Dialog
+                    onClose={this.handleDialogClose.bind(this)}
+                    aria-labelledby="board-publish-dialog"
+                    open={this.state.openPublishBoard}
+                    TransitionComponent={Transition}
+                    aria-describedby="board-publish-desc"
+                  >
+                    <DialogTitle
+                      id="board-publish-title"
+                      onClose={this.handleDialogClose.bind(this)}
+                    >
+                      {intl.formatMessage(messages.publishBoard)}
+                    </DialogTitle>
+                    <DialogContent>
+                      <DialogContentText id="dialog-publish-board-desc">
+                        {intl.formatMessage(messages.publishBoardDescription)}
+                      </DialogContentText>
+                      <TextField
+                        autoFocus
+                        margin="dense"
+                        id="description"
+                        label={intl.formatMessage(messages.publishBoard)}
+                        type="text"
+                        fullWidth
+                        value={this.state.publishDialogValue}
+                        onChange={this.handleBoardDescriptionChange}
+                      />
+                    </DialogContent>
+                    <DialogActions>
+                      <Button
+                        onClick={this.handleDialogClose.bind(this)}
+                        color="primary"
+                      >
+                        {intl.formatMessage(messages.close)}
+                      </Button>
+                      <Button
+                        onClick={() => {
+                          this.handleBoardPublish(board);
+                        }}
+                        color="primary"
+                      >
+                        {intl.formatMessage(messages.accept)}
+                      </Button>
+                    </DialogActions>
+                  </Dialog>
                   <IconButton
                     disabled={
                       communicator.rootBoard === board.id ||
@@ -400,6 +512,7 @@ CommunicatorDialogBoardItem.propTypes = {
   copyBoard: PropTypes.func.isRequired,
   addOrRemoveBoard: PropTypes.func.isRequired,
   deleteMyBoard: PropTypes.func.isRequired,
+  updateMyBoard: PropTypes.func.isRequired,
   publishBoard: PropTypes.func.isRequired,
   setRootBoard: PropTypes.func.isRequired,
   showNotification: PropTypes.func.isRequired,