Manage Students Table: add multiple students button

apps/i18n/common/en_us.json

@@ -7,6 +7,8 @@
   "addSectionName": "Enter a name for your section that will help you remember which classroom it is for. Your students will also be able to see this name.",
   "addSectionNameHint": "e.g., Intro to CS - Period 2",
   "addStudents": "Add students",
+  "addStudentsMultiple": "Add multiple students",
+  "addStudentsMultipleInstructions": "Type or paste the names of your students, one per line.",
   "addStudentsManageMyOwn": "Create and manage my own list of students",
   "addStudentsSyncThirdParty": "Sync my list of students from an existing classroom section in a third party tool",
   "addStudentsToSectionInstructions": "Choose how you want to add your students:",
@@ -300,6 +302,7 @@
   "disableMaker": "Disable Maker Toolkit",
   "discountCodeSchoolConfirm": "Before you can receive your code, please verify the school at which you teach:",
   "documentation": "Documentation",
+  "done": "Done",
   "dontForget": "Don't forget",
   "dragBlocksToMatch": "Drag the blocks to match",
   "dropletBlock_addOperator_description": "Add two numbers",
@@ -825,6 +828,7 @@
   "runTooltip": "Run the program defined by the blocks in the workspace.",
   "runtimeErrorMsg": "Your program did not run successfully. Please remove line {lineNumber} and try again.",
   "save": "Save",
+  "saveAll": "Save all",
   "saveAndPublish": "Save & Publish",
   "savedToGallery": "Saved",
   "saving": "Saving...",

apps/src/templates/manageStudents/AddMultipleStudents.jsx

@@ -0,0 +1,83 @@
+import React, {Component, PropTypes} from 'react';
+import {connect} from 'react-redux';
+import {addMultipleAddRows} from './manageStudentsRedux';
+import Button from '../Button';
+import i18n from "@cdo/locale";
+import BaseDialog from '../BaseDialog';
+import DialogFooter from "../teacherDashboard/DialogFooter";
+
+const styles = {
+  dialog: {
+    paddingLeft: 20,
+    paddingRight: 20,
+    paddingBottom: 20
+  }
+};
+
+class AddMultipleStudents extends Component {
+  static propTypes = {
+    // Provided by redux
+    addMultipleStudents: PropTypes.func.isRequired,
+  };
+
+  state = {
+    openDialog: false,
+  };
+
+  openDialog = () => {
+    this.setState({openDialog: true});
+  };
+
+  closeDialog = () => {
+    this.setState({openDialog: false});
+  };
+
+  add = () => {
+    const value = this.refs.studentsTextBox.value;
+    this.props.addMultipleStudents(value.split("\n"));
+    this.closeDialog();
+  };
+
+  render() {
+    return (
+      <div>
+        <Button
+          onClick={this.openDialog}
+          color={Button.ButtonColor.gray}
+          text={i18n.addStudentsMultiple()}
+        />
+        <BaseDialog
+          useUpdatedStyles
+          uncloseable
+          isOpen={this.state.openDialog}
+          style={styles.dialog}
+        >
+          <h2>{i18n.addStudentsMultiple()}</h2>
+          <div>
+            {i18n.addStudentsMultipleInstructions()}
+          </div>
+          <textarea name="textarea" rows="15" cols="70" ref="studentsTextBox">
+          </textarea>
+          <DialogFooter>
+            <Button
+              text={i18n.dialogCancel()}
+              onClick={this.closeDialog}
+              color={Button.ButtonColor.gray}
+            />
+            <Button
+              text={i18n.done()}
+              onClick={this.add}
+              color={Button.ButtonColor.orange}
+            />
+          </DialogFooter>
+        </BaseDialog>
+      </div>
+    );
+  }
+}
+
+export default connect(state => ({}), dispatch => ({
+  addMultipleStudents(names) {
+    dispatch(addMultipleAddRows(names));
+  },
+}))(AddMultipleStudents);

apps/src/templates/manageStudents/ManageStudentsActionsCell.jsx

@@ -4,7 +4,7 @@ import PopUpMenu, {MenuBreak} from "@cdo/apps/lib/ui/PopUpMenu";
 import color from "../../util/color";
 import FontAwesome from '../FontAwesome';
 import Button from '../Button';
-import {startEditingStudent, cancelEditingStudent, removeStudent, saveStudent, addStudent} from './manageStudentsRedux';
+import {startEditingStudent, cancelEditingStudent, removeStudent, saveStudent, addStudent, ROW_TYPE} from './manageStudentsRedux';
 import {connect} from 'react-redux';
 import BaseDialog from '../BaseDialog';
 import DialogFooter from "../teacherDashboard/DialogFooter";
@@ -23,7 +23,7 @@ class ManageStudentActionsCell extends Component {
     isEditing: PropTypes.bool,
     isSaving: PropTypes.bool,
     disableSaving: PropTypes.bool,
-    isAddRow: PropTypes.bool,
+    rowType: PropTypes.oneOf(Object.values(ROW_TYPE)),
     // Provided by redux
     startEditingStudent: PropTypes.func,
     cancelEditingStudent: PropTypes.func,
@@ -66,21 +66,30 @@ class ManageStudentActionsCell extends Component {
   };
 
   onCancel = () => {
-    this.props.cancelEditingStudent(this.props.id);
+    if (this.props.rowType === ROW_TYPE.newStudent) {
+      this.props.removeStudent(this.props.id);
+    } else {
+      this.props.cancelEditingStudent(this.props.id);
+    }
   };
 
   onSave = () => {
-    this.props.saveStudent(this.props.id);
+    if (this.props.rowType === ROW_TYPE.newStudent) {
+      this.onAdd();
+    } else {
+      this.props.saveStudent(this.props.id);
+    }
   };
 
   onAdd = () => {
     this.props.addStudent(this.props.id);
   };
 
   render() {
+    const {rowType, isEditing} = this.props;
     return (
       <div>
-        {!this.props.isEditing &&
+        {!isEditing &&
           <QuickActionsCell>
             <PopUpMenu.Item
               onClick={this.onEdit}
@@ -97,26 +106,26 @@ class ManageStudentActionsCell extends Component {
             </PopUpMenu.Item>
           </QuickActionsCell>
         }
-        {(this.props.isEditing && !this.props.isAddRow) &&
+        {(isEditing && (rowType !== ROW_TYPE.add)) &&
           <div>
             <Button
               onClick={this.onSave}
-              color={Button.ButtonColor.white}
+              color={Button.ButtonColor.orange}
               text={i18n.save()}
               disabled={this.props.isSaving || this.props.disableSaving}
             />
             <Button
               onClick={this.onCancel}
-              color={Button.ButtonColor.blue}
+              color={Button.ButtonColor.gray}
               text={i18n.cancel()}
             />
           </div>
         }
-        {this.props.isAddRow &&
+        {(rowType === ROW_TYPE.add) &&
           <div>
             <Button
               onClick={this.onAdd}
-              color={Button.ButtonColor.white}
+              color={Button.ButtonColor.gray}
               text={i18n.add()}
               disabled={this.props.isSaving || this.props.disableSaving}
             />

apps/src/templates/manageStudents/ManageStudentsTable.jsx

@@ -11,9 +11,11 @@ import ManageStudentsNameCell from './ManageStudentsNameCell';
 import ManageStudentsAgeCell from './ManageStudentsAgeCell';
 import ManageStudentsGenderCell from './ManageStudentsGenderCell';
 import ManageStudentsActionsCell from './ManageStudentsActionsCell';
-import {convertStudentDataToArray, ADD_STATUS} from './manageStudentsRedux';
+import {convertStudentDataToArray, ADD_STATUS, ROW_TYPE} from './manageStudentsRedux';
 import { connect } from 'react-redux';
 import Notification, {NotificationType} from '../Notification';
+import AddMultipleStudents from './AddMultipleStudents';
+import Button from '../Button';
 
 export const studentSectionDataPropType = PropTypes.shape({
   id: PropTypes.number.isRequired,
@@ -25,7 +27,7 @@ export const studentSectionDataPropType = PropTypes.shape({
   secretPicturePath: PropTypes.string,
   sectionId: PropTypes.number,
   loginType: PropTypes.string,
-  isAddRow: PropTypes.bool,
+  rowType: PropTypes.oneOf(Object.values(ROW_TYPE)),
 });
 
 /** @enum {number} */
@@ -71,20 +73,25 @@ const passwordFormatter = (loginType, {rowData}) => {
 };
 
 // The "add row" should always be pinned to the top when sorting.
+// The "new student rows" should always be next.
 // This function takes into account having multiple "add rows"
-const sortRows = (data, columnIndexList, orderList) => {
+export const sortRows = (data, columnIndexList, orderList) => {
   let addRows = [];
+  let newStudentRows = [];
   let studentRows = [];
   for (let i = 0; i<data.length; i++) {
-    if (data[i].isAddRow) {
+    if (data[i].rowType === ROW_TYPE.add) {
       addRows.push(data[i]);
+    } else if (data[i].rowType === ROW_TYPE.newStudent) {
+      newStudentRows.push(data[i]);
     } else {
       studentRows.push(data[i]);
     }
   }
   addRows = orderBy(addRows, columnIndexList, orderList);
+  newStudentRows = orderBy(newStudentRows, columnIndexList, orderList);
   studentRows = orderBy(studentRows, columnIndexList, orderList);
-  return addRows.concat(studentRows);
+  return addRows.concat(newStudentRows).concat(studentRows);
 };
 
 class ManageStudentsTable extends Component {
@@ -151,11 +158,29 @@ class ManageStudentsTable extends Component {
         isEditing={rowData.isEditing}
         isSaving={rowData.isSaving}
         disableSaving={disableSaving}
-        isAddRow={rowData.isAddRow}
+        rowType={rowData.rowType}
       />
     );
   };
 
+  actionsHeaderFormatter = () => {
+    const numberOfEditingRows = Object.keys(this.props.editingData).length;
+    return (
+      <div>
+        {numberOfEditingRows > 1 &&
+          <Button
+            onClick={()=>{console.log("save all");}}
+            color={Button.ButtonColor.orange}
+            text={i18n.saveAll()}
+          />
+        }
+        {numberOfEditingRows <= 1 &&
+          i18n.actions()
+        }
+      </div>
+    );
+  };
+
   getSortingColumns = () => {
     return this.state.sortingColumns || {};
   };
@@ -266,6 +291,7 @@ class ManageStudentsTable extends Component {
         property: 'actions',
         header: {
           label: i18n.actions(),
+          format: this.actionsHeaderFormatter,
           props: {
             style: {
             ...tableLayoutStyles.headerCell,
@@ -303,24 +329,29 @@ class ManageStudentsTable extends Component {
       sort: sortRows,
     })(this.props.studentData);
 
+    const {addStatus, loginType} = this.props;
+
     return (
       <div>
-        {this.props.addStatus === ADD_STATUS.success &&
+        {addStatus === ADD_STATUS.success &&
           <Notification
             type={NotificationType.success}
             notice={i18n.manageStudentsNotificationSuccess()}
             details={i18n.manageStudentsNotificationAddSuccess()}
             dismissible={false}
           />
         }
-        {this.props.addStatus === ADD_STATUS.fail &&
+        {addStatus === ADD_STATUS.fail &&
           <Notification
             type={NotificationType.failure}
             notice={i18n.manageStudentsNotificationFailure()}
             details={i18n.manageStudentsNotificationCannotAdd()}
             dismissible={false}
           />
         }
+        {(loginType === SectionLoginType.word || loginType === SectionLoginType.picture) &&
+          <AddMultipleStudents/>
+        }
         <Table.Provider
           columns={columns}
           style={tableLayoutStyles.table}