expertiza/expertiza

View on GitHub
app/assets/javascripts/tree_display.jsx

Summary

Maintainability
F
1 wk
Test Coverage
jQuery(document).ready(function() {
  // This preloadedImages function is refered from http://jsfiddle.net/slashingweapon/8jAeu/
  // Actually I am not using the values in preloadedImages, but image loading speed is indeed getting faster
  var preloadedImages = []
  function preloadImages() {
    for (var idx = 0; idx < arguments.length; idx++) {
        var oneImage = new Image()
        oneImage.src = arguments[idx];
        preloadedImages.push(oneImage);
    }
  }

  function formatDate(date) {
    var month = new Array();
    month[0] = "Jan";
    month[1] = "Feb";
    month[2] = "Mar";
    month[3] = "Apr";
    month[4] = "May";
    month[5] = "Jun";
    month[6] = "Jul";
    month[7] = "Aug";
    month[8] = "Sep";
    month[9] = "Oct";
    month[10] = "Nov";
    month[11] = "Dec";

    var hours = date.getHours();
    var minutes = date.getMinutes();
    var ampm = hours >= 12 ? 'PM' : 'AM';
    hours = hours % 12;
    hours = hours ? hours : 12; // the hour '0' should be '12'
    minutes = minutes < 10 ? '0'+minutes : minutes;
    var strTime = hours + ':' + minutes + ' ' + ampm;
    return month[date.getMonth()] + " " + date.getDate() + ", " + date.getFullYear() + " - " + strTime;
  }

  function showIntelligentAssignmentDialog() {
    jQuery( "#intelligent_assignment_dialog" ).dialog({ closeText: "hide", modal: true, resizable: false, width: 500 });
  }

  var RowAction = React.createClass({
    getInitialState: function() {
      return {
        showDetails: true
      }
    },
    handleButtonClick: function(e) {
      e.stopPropagation()
      if (e.target.type === 'button') {
        if (e.target.name === 'more') {
          this.setState({
            showDetails: true
          })
        }
      }
    },
    render: function() {
      var moreContent = []
      var buttonContent = ""
      var moreButtonStyle = {
        "display": "",
        "padding": "0 2px"
      }
      var formStyle = {
        margin: 0,
        padding: 0,
        display: 'inline'
      }
      if (this.props.dataType === 'questionnaire') {
        return (
          <span onClick={this.handleButtonClick}>
            <form
              style={formStyle}
              action={"/questionnaires/new"}
              method="GET">
              <input type="hidden" name="model" value={this.props.parent_name+"Questionnaire"} />
              <input type="hidden" name="private" value={1} />
              <button type="submit"
                      className="btn btn-primary questionnaire-button">
                  <b>+</b>
              </button>
            </form>
          </span>
        )
      }
      if (this.state.showDetails) {
        moreButtonStyle.display = "none"
        var newNodeType = this.props.nodeType
        if (this.props.nodeType === 'assignment' || this.props.nodeType === 'questionnaire') {
          newNodeType = this.props.nodeType + "s"
        }
        if (this.props.is_available || newNodeType == 'questionnaires') {
          moreContent.push(
            <span>
              <a title="Edit" href={"/"+newNodeType+"/"+(parseInt(this.props.id)/2).toString()+"/edit"}><img src="/assets/tree_view/edit-icon-24.png" /></a>
              <a title="Delete" href={"/tree_display/confirm?id="+(parseInt(this.props.id)/2).toString()+"&nodeType="+newNodeType}><img src="/assets/tree_view/delete-icon-24.png" /></a>
            </span>
          )
        }
        moreContent.push(
          <span>
            <a title="Copy" href={"/"+newNodeType+"/copy?assets=course&id="+(parseInt(this.props.id)/2).toString()}><img src="/assets/tree_view/Copy-icon-24.png" /></a>
          </span>
        )
        if (newNodeType === 'course') {
          moreContent.push(
            <br/>
          )
          if (this.props.is_available) {
            moreContent.push(
              <span>
                <a title="Add TA" href={"/course/view_teaching_assistants?id="+(parseInt(this.props.id)/2).toString()+"&model=Course"}>
                  <img src="/assets/tree_view/add-ta-24.png" />
                </a>
                <a title="Create assignment" href={"/assignments/new?parent_id="+(parseInt(this.props.id)/2).toString()}>
                  <img src="/assets/tree_view/add-assignment-24.png" />
                </a>
                <a title="Add participants" href={"/participants/list?id="+(parseInt(this.props.id)/2).toString()+"&model=Course"}>
                  <img src="/assets/tree_view/add-participant-24.png" />
                </a>
                <a title="Create teams" href={"/teams/list?id="+(parseInt(this.props.id)/2).toString()+"&type=Course"}>
                  <img src="/assets/tree_view/create-teams-24.png" />
                </a>
                <a title="View grade summary by student" href={"/assessment360/course_student_grade_summary?course_id="+(parseInt(this.props.id)/2).toString()}>
                  <img src="/assets/tree_view/360-dashboard-24.png" />
                </a>
                <a title="Assign survey" href={"/survey_deployment/new?id="+(parseInt(this.props.id)/2).toString()+"&type=CourseSurveyDeployment"}>
                  <img src="/assets/tree_view/assign-survey-24.png" />
                </a>
                <a title="View aggregated teammate & meta reviews" href={"/assessment360/all_students_all_reviews?course_id="+(parseInt(this.props.id)/2).toString()}>
                  <span style={{"fontSize": "22px", "top": "8px"}} className="glyphicon glyphicon-list-alt"></span>
                </a>
              </span>
            )
          }
        } else if (newNodeType === 'assignments') {
          // Assignment tab starts here
          // Now is_intelligent and Add Manager related buttons have not been added into the new UI
          moreContent.push(
            <br/>
          )
          if (this.props.course_id) {
            moreContent.push(
              <span>
                <a title="Remove from course" href={"/assignments/remove_assignment_from_course?id="+(parseInt(this.props.id)/2).toString()}>
                  <img src="/assets/tree_view/remove-from-course-24.png" />
                </a>
              </span>
            )
          } else {
            moreContent.push(
              <span>
                <a title="Assign to course" href={"/assignments/associate_assignment_with_course?id="+(parseInt(this.props.id)/2).toString()}>
                  <img src="/assets/tree_view/assign-course-blue-24.png" />
                </a>
              </span>
            )
          }
          if (this.props.is_available) {
            moreContent.push(
              <span>
                <a title="Add participants" href={"/participants/list?id="+(parseInt(this.props.id)/2).toString()+"&model=Assignment"}>
                  <img src="/assets/tree_view/add-participant-24.png" />
                </a>
              </span>
            )
            if (parseInt(this.props.max_team_size) > 1) {
              moreContent.push(
                <span>
                  <a title="Create teams" href={"/teams/list?id="+(parseInt(this.props.id)/2).toString()+"&type=Assignment"}>
                    <img src="/assets/tree_view/create-teams-24.png" />
                  </a>
                </span>
              )
            }
            // if ends
            moreContent.push(
              <span>
                <a title="Assign reviewers" href={"/review_mapping/list_mappings?id="+(parseInt(this.props.id)/2).toString()}>
                  <img src="/assets/tree_view/assign-reviewers-24.png" />
                </a>
                <a title="Assign survey" href={"/survey_deployment/new?id="+(parseInt(this.props.id)/2).toString()+"&type=AssignmentSurveyDeployment"}>
                  <img src="/assets/tree_view/assign-survey-24.png" />
                </a>
              </span>
            )
            if (this.props.require_quiz) {
              moreContent.push(
                <span>
                  <a title="View quiz questions" href={"/student_quizzes/review_questions?id="+(parseInt(this.props.id)/2).toString()+"&type=Assignment"}>
                    <img src="/assets/tree_view/view-survey-24.png" />
                  </a>
                </span>
              )
            }
            // if ends
            moreContent.push(
              <br/>
            )
            moreContent.push(
              <span>
                <a title="View submissions" href={"/assignments/list_submissions?id="+(parseInt(this.props.id)/2).toString()}>
                  <img src="/assets/tree_view/List-submisstions-24.png" />
                </a>
                <a title="View scores" href={"/grades/view?id="+(parseInt(this.props.id)/2).toString()}>
                  <img src="/assets/tree_view/view-scores-24.png" />
                </a>
                <a title="View reports" href={"/reports/response_report?id="+(parseInt(this.props.id)/2).toString()}>
                  <img src="/assets/tree_view/view-review-report-24.png" />
                </a>
              <a title="View survey responses" href={"/survey_response/view_responses?id="+(parseInt(this.props.id)/2).toString()}>
                  <img src="/assets/tree_view/view-survey-24.png" />
                </a>
              </span>
            )

            if(this.props.is_intelligent) {
              moreContent.push(
                <a title="Intelligent Assignment" href={"/lottery/run_intelligent_assignment/"+(parseInt(this.props.id)/2).toString()}>
                  <img src="/assets/tree_view/run-lottery.png" />
                </a>
              )
            }

            if (this.props.allow_suggestions) {
              moreContent.push(
                <span>
                  <a title="View suggestions" href={"/suggestion/list?id="+(parseInt(this.props.id)/2).toString()+"&type=Assignment"}>
                    <img src="/assets/tree_view/view-suggestion-24.png" />
                  </a>
                </span>
              )
            }
            // if ends
            
            if (this.props.has_topic) {
                // Moved content out of this to the block outside this containing "if" statement
            }
          }
          // if ends

        } else if (newNodeType === 'questionnaires'){
          moreContent.push(
            <span>
              <a title="View questionnaire" href={"/questionnaires/view?id="+(parseInt(this.props.id)/2).toString()}>
                <img src="/assets/tree_view/view-survey-24.png" />
              </a>
            </span>
          )
        }
        // if ends
      }
      return (
        <span onClick={this.handleButtonClick}>
          <button style={moreButtonStyle} name="more" type="button" className="glyphicon glyphicon-option-horizontal">
          </button>
          {moreContent}
        </span>
      )
    }
  })

  var SimpleTableRow = React.createClass({
    render: function () {
      var creation_date;
      var updated_date;
      var colWidthArray = ["30%", "0%", "0%", "0%", "25%", "25%", "20%"]
      var colDisplayStyle = {
        "display": ""
      }
      if (this.props.dataType === 'questionnaire') {
        colWidthArray = ["30%", "0%", "0%", "0%", "20%", "20%", "30%"]
        colDisplayStyle = {
          "display": "none"
        }
      } else if(this.props.dataType === 'course') {
        colWidthArray = ["20%", "0%", "0%", "20%", "20%", "20%", "20%"]
      }
      if (this.props.creation_date && this.props.updated_date) {
        creation_date = this.props.creation_date.replace("T", "<br/>")
        updated_date = this.props.updated_date.replace("T", "<br/>")
      }
      var nodeTypeRaw = this.props.id.split("_")[0]
      var nodeType = nodeTypeRaw.substring(0, nodeTypeRaw.length-4).toLowerCase()
      var id = this.props.id.split("_")[1]
        if (this.props.dataType == 'course') {
            var institution_name = "-"
            if(typeof this.props.institution !== 'undefined' && this.props.institution.length != 0){
              institution_name = this.props.institution[0].name
            }
            return (
                <tr id={this.props.id}>
                    <td width={colWidthArray[0]}>{this.props.name}</td>
                    <td style={colDisplayStyle} width={colWidthArray[3]}>{institution_name}</td>
                    <td width={colWidthArray[4]} dangerouslySetInnerHTML={{__html: creation_date}}></td>
                    <td width={colWidthArray[5]} dangerouslySetInnerHTML={{__html: updated_date}}></td>
                    <td width={colWidthArray[6]}>
                        <RowAction
                            actions={this.props.actions}
                            key={"simpleTable_"+this.props.id}
                            nodeType={nodeType}
                            parent_name={this.props.name}
                            private={this.props.private}
                            is_available={this.props.is_available}
                            course_id={this.props.course_id}
                            max_team_size={this.props.max_team_size}
                            is_intelligent={this.props.is_intelligent}
                            require_quiz={this.props.require_quiz}
                            allow_suggestions={this.props.allow_suggestions}
                            has_topic={this.props.has_topic}
                            id={id}
                        />
                    </td>
                </tr>
            )
        }
        else{
            return (
                <tr id={this.props.id}>
                    <td width={colWidthArray[0]}>{this.props.name}</td>
                    <td width={colWidthArray[4]} dangerouslySetInnerHTML={{__html: creation_date}}></td>
                    <td width={colWidthArray[5]} dangerouslySetInnerHTML={{__html: updated_date}}></td>
                    <td width={colWidthArray[6]}>
                        <RowAction
                            actions={this.props.actions}
                            key={"simpleTable_"+this.props.id}
                            nodeType={nodeType}
                            parent_name={this.props.name}
                            private={this.props.private}
                            is_available={this.props.is_available}
                            course_id={this.props.course_id}
                            max_team_size={this.props.max_team_size}
                            is_intelligent={this.props.is_intelligent}
                            require_quiz={this.props.require_quiz}
                            allow_suggestions={this.props.allow_suggestions}
                            has_topic={this.props.has_topic}
                            id={id}
                        />
                    </td>
                </tr>
            )
        }
    }
  })

  var SimpleTable = React.createClass({
    render: function() {
      var _rows = []
      var _this = this
      var colWidthArray = ["30%", "0%", "0%", "0%", "25%", "25%", "20%"]
      var colDisplayStyle = {
        "display": ""
      }
      var firstColText = (this.props.dataType === 'questionnaire' ? 'Item' : 'Assignment') + " name"
      if (this.props.dataType === 'questionnaire') {
        colWidthArray = ["30%", "0%", "0%", "0%", "20%", "20%", "30%"]
        colDisplayStyle = {
          "display": "none"
        }
      }  else if(this.props.dataType === 'course') {
        colWidthArray = ["20%", "0%", "0%", "20%", "20%", "20%", "20%"]
      }
      if (this.props.data) {
          if (this.props.dataType == 'course') {
              this.props.data.forEach(function (entry, i) {
                  _rows.push(<SimpleTableRow
                      key={entry.type + '_' + (parseInt(entry.nodeinfo.id) * 2).toString() + '_' + i}
                      id={entry.type + '_' + (parseInt(entry.nodeinfo.node_object_id) * 2).toString() + '_' + i}
                      name={entry.name}
                      institution={entry.institution}
                      creation_date={entry.creation_date}
                      updated_date={entry.updated_date}
                      private={entry.private}
                      actions={entry.actions}
                      is_available={entry.is_available}
                      course_id={entry.course_id}
                      max_team_size={entry.max_team_size}
                      is_intelligent={entry.is_intelligent}
                      allow_suggestions={entry.allow_suggestions}
                      require_quiz={entry.require_quiz}
                      has_topic={entry.has_topic}
                      dataType={_this.props.dataType}
                  />)
              })
          }
          else{
              this.props.data.forEach(function (entry, i) {
                  _rows.push(<SimpleTableRow
                      key={entry.type + '_' + (parseInt(entry.nodeinfo.id) * 2).toString() + '_' + i}
                      id={entry.type + '_' + (parseInt(entry.nodeinfo.node_object_id) * 2).toString() + '_' + i}
                      name={entry.name}
                      creation_date={entry.creation_date}
                      updated_date={entry.updated_date}
                      private={entry.private}
                      actions={entry.actions}
                      is_available={entry.is_available}
                      course_id={entry.course_id}
                      max_team_size={entry.max_team_size}
                      is_intelligent={entry.is_intelligent}
                      allow_suggestions={entry.allow_suggestions}
                      require_quiz={entry.require_quiz}
                      has_topic={entry.has_topic}
                      dataType={_this.props.dataType}
                  />)
              })
          }
      }
      if (this.props.dataType == 'course') {
          return (
              <table className="table table-hover">
                  <thead>
                      <tr>
                          <th width={colWidthArray[0]}>
                {firstColText}
                          </th>
                          <th style={colDisplayStyle} width={colWidthArray[3]}>
                              Institution
                          </th>
                          <th width={colWidthArray[4]}>
                              Creation Date
                          </th>
                          <th width={colWidthArray[5]}>
                              Updated Date
                          </th>
                          <th width={colWidthArray[6]}>Actions</th>
                      </tr>
                  </thead>
                  <tbody>
            {_rows}
                  </tbody>
              </table>
          )
      }
      else{
          return (
              <table className="table table-hover">
                  <thead>
                      <tr>
                          <th width={colWidthArray[0]}>
                {firstColText}
                          </th>
                          <th width={colWidthArray[4]}>
                              Creation Date
                          </th>
                          <th width={colWidthArray[5]}>
                              Updated Date
                          </th>
                          <th width={colWidthArray[6]}>Actions</th>
                      </tr>
                  </thead>
                  <tbody>
            {_rows}
                  </tbody>
              </table>
          )
      }
    }
  })

  var ContentTableRow = React.createClass({
    getInitialState: function() {
      return {
        expanded: false
      }
    },
    handleClick: function(event) {
        //alert('click');

      if (event.target.type != 'button') {
        this.setState({
          expanded: !this.state.expanded
        }, function() {
          this.props.rowClicked(this.props.id, this.state.expanded,this.props.newParams)
        })
      } else {
        event.stopPropagation()
      }
    },
    render: function () {
      var creation_date;
      var updated_date;
      var colWidthArray = ["30%", "0%", "0%", "0%", "25%", "25%", "20%"]
      var colDisplayStyle = {
        "display": "",
        "word-wrap":"break-word"
      }
      if (this.props.dataType === 'questionnaire') {
        colWidthArray = ["70%", "0%", "0%", "0%", "0%", "0%", "30%"]
        colDisplayStyle = {
          "display": "none"
        }
      } else if(this.props.dataType === 'course') {
        colWidthArray = ["20%", "0%", "0%", "20%", "20%", "20%", "20%"]
      }
      if (this.props.creation_date && this.props.updated_date) {
        creation = this.props.creation_date
        updated = this.props.updated_date

        creation_date = formatDate(new Date(creation))
        updated_date = formatDate(new Date(updated))

      }
      var nodeTypeRaw = this.props.id.split("_")[0]
      var nodeType = nodeTypeRaw.substring(0, nodeTypeRaw.length-4).toLowerCase()
      var id = this.props.id.split("_")[1]
      if (this.props.dataType == 'course') {
          var institution_name = "-"
            if(typeof this.props.institution !== 'undefined' && this.props.institution.length != 0){
              institution_name = this.props.institution[0].name
            }
          return (
              <tr onClick={this.handleClick} id={this.props.id}>
                  <td width={colWidthArray[0]}>{this.props.name}</td>
                  <td style={colDisplayStyle} width={colWidthArray[3]}>{institution_name}</td>
                  <td style={colDisplayStyle} width={colWidthArray[4]} dangerouslySetInnerHTML={{__html: creation_date}}></td>
                  <td style={colDisplayStyle} width={colWidthArray[5]} dangerouslySetInnerHTML={{__html: updated_date}}></td>
                  <td width={colWidthArray[6]}>
                      <RowAction
                          actions={this.props.actions}
                          key={this.props.id}
                          nodeType={nodeType}
                          parent_name={this.props.name}
                          private={this.props.private}
                          is_available={this.props.is_available}
                          course_id={this.props.course_id}
                          max_team_size={this.props.max_team_size}
                          is_intelligent={this.props.is_intelligent}
                          require_quiz={this.props.require_quiz}
                          allow_suggestions={this.props.allow_suggestions}
                          has_topic={this.props.has_topic}
                          dataType={this.props.dataType}
                          id={id}
                      />
                  </td>
              </tr>
          )
      }
      else{
          return (
              <tr onClick={this.handleClick} id={this.props.id}>
                  <td width={colWidthArray[0]}>{this.props.name}</td>
                  <td style={colDisplayStyle} width={colWidthArray[4]} dangerouslySetInnerHTML={{__html: creation_date}}></td>
                  <td style={colDisplayStyle} width={colWidthArray[5]} dangerouslySetInnerHTML={{__html: updated_date}}></td>
                  <td width={colWidthArray[6]}>
                      <RowAction
                          actions={this.props.actions}
                          key={this.props.id}
                          nodeType={nodeType}
                          parent_name={this.props.name}
                          private={this.props.private}
                          is_available={this.props.is_available}
                          course_id={this.props.course_id}
                          max_team_size={this.props.max_team_size}
                          is_intelligent={this.props.is_intelligent}
                          require_quiz={this.props.require_quiz}
                          allow_suggestions={this.props.allow_suggestions}
                          has_topic={this.props.has_topic}
                          dataType={this.props.dataType}
                          id={id}
                      />
                  </td>
              </tr>
          )
      }
    }
  })

  var ContentTableDetailsRow = React.createClass({
    render: function() {
      var colSpan = "5"
      var colDisplayStyle = {
        "display": ""
      }
      if (this.props.dataType === 'questionnaire') {
        colSpan = "6"
        colDisplayStyle = {
          "display": "none"
        }
      }
      var style;
      if (this.props.children && this.props.children.length > 0) {
        style = {
          display: this.props.showElement
        }
      } else {
        style = {
          display: "none"
        }
      }
      return (
        <tr style={style} className="active">
          <td style={colDisplayStyle}>
          </td>
          <td colSpan={colSpan}>
            <SimpleTable
             key={"simpletable_"+this.props.id}
             data={this.props.children}
             dataType={this.props.dataType}
            />
          </td>
        </tr>
      )
    }
  })

  var TitleRow = React.createClass({
    render: function() {
        return (
        <tr className="active">
            <td colSpan="6">
                <b>{this.props.title}</b>
            </td>
        </tr>
        )
    }
  })

  var SearchBar = React.createClass({
    handleChange: function() {
        this.props.onUserInput(
            this.refs.filterTextInput.getDOMNode().value
        );
    },
    render: function() {
        return (
          <span style={{"display": (this.props.dataType === 'questionnaire' ? "none" : "")}}>
              <input
                  type="text"
                  placeholder="Search..."
                  value={this.props.filterText}
                  ref="filterTextInput"
                  onChange={this.handleChange}
              />
          </span>
        );
    }
  })

  var FilterButton = React.createClass({
    handleChange: function() {
      this.props.onUserFilter(this.props.filterOption,
                              this.refs.filterCheckbox.getDOMNode().checked)
    },
    render: function() {
      return (
         <span className='show-checkbox' style={{"display": (this.props.dataType === 'questionnaire' ? "none" : "")}}>
           <input type="checkbox"
                  checked={this.props.inputCheckboxValue}
                  ref="filterCheckbox"
                  onChange={this.handleChange}>
             {" Include others' items"}
           </input>
         </span> 
      )
    }
  })

  var NewItemButton = React.createClass({
    render: function() {
      var renderContent = []
      var formStyle = {
        margin: 0,
        padding: 0,
        display: 'inline'
      }
      if (this.props.dataType.length > 0) {
        if (this.props.dataType != 'questionnaire') {
          renderContent.push(
            <form
              style={formStyle}
              action={"/"+(this.props.dataType === 'assignment' ? this.props.dataType+"s" : this.props.dataType)+"/new"}
              method="GET"
              key={this.props.dataType+"_new"+this.props.private.toString()}>
              <input type="hidden" name="private" value={this.props.private ? 1 : 0} />
              <button type="submit"
                      className="btn btn-primary pull-right new-button">
                     <b>+</b>
              </button>
            </form>
          )
        }
      }
      return (
        <span>
          {renderContent}
        </span>
      )
    }
  })

  var SortToggle = React.createClass({
    getInitialState: function() {
      return {
        order: this.props.order
      }
    },
    handleClick: function() {
      if (this.state.order === "normal") {
        this.setState({
          order: "reverse"
        }, function() {
          this.props.handleUserClick(this.props.colName, this.state.order)
        })
      } else {
        this.setState({
          order: "normal"
        }, function() {
          this.props.handleUserClick(this.props.colName, this.state.order)
        })
      }
    },
    render: function() {
      return (
        <span className="glyphicon glyphicon-sort" onClick={this.handleClick}></span>
      )
    }
  })

  var ContentTable = React.createClass({
    getInitialState: function() {
      return {
        expandedRow: []
      }
    },
    handleExpandClick: function(id, expanded,newParams) {
      if (expanded) {
        this.setState({ 
          expandedRow: this.state.expandedRow.concat([id])
        });
        if(this.props.dataType!='assignment') {
            _this = this;
            jQuery.post('/tree_display/children_node_2_ng',
                {
                    reactParams2: newParams
                },
                function (data) {
                    _this.props.data[id.split("_")[2]]['children'] = data;
                    _this.forceUpdate();
                }, 'json');
        }
      } else {
        var index = this.state.expandedRow.indexOf(id)
        if (index > -1) {
            var list = this.state.expandedRow;
            list.splice(index,1);
          this.setState({
            expandedRow: list
          })
        }
      }
    },
    handleSortingClick: function(colName, order) {
      this.props.onUserClick(colName, order)
    },
    render: function() {
      var _rows = []
      var _this = this
      var colWidthArray = ["30%", "0%", "0%", "0%", "25%", "25%", "20%"]
      var colDisplayStyle = {
        "display": ""
      }
      if (this.props) {
          if (this.props.dataType === 'questionnaire') {
              colWidthArray = ["70%", "0%", "0%", "0%", "0%", "0%", "30%"]
              colDisplayStyle = {
                  "display": "none"
              }
          }
          if (this.props.dataType == 'course') {
              colWidthArray = ["20%", "0%", "0%", "20%", "20%", "20%", "20%"]
              _rows.push(<TitleRow
                  title="My Courses"
              />)
          }
          else if(this.props.dataType=='assignment') {
              _rows.push(<TitleRow
                  title="My Assignments"
              />)
          }
          jQuery.each(this.props.data, function (i, entry) {
              if (((entry.name && entry.name.indexOf(_this.props.filterText) !== -1) ||
                  (entry.creation_date && entry.creation_date.indexOf(_this.props.filterText) !== -1) ||
                  (entry.institution && entry.institution.indexOf(_this.props.filterText) !== -1) ||
                  (entry.updated_date && entry.updated_date.indexOf(_this.props.filterText) !== -1)) &&
                  (entry.private == true || entry.type == 'FolderNode')) {
                  _rows.push(<ContentTableRow
                      key={entry.type+'_'+(parseInt(entry.nodeinfo.id)*2).toString()+'_'+i}
                      id={entry.type+'_'+(parseInt(entry.nodeinfo.node_object_id)*2).toString()+'_'+i}
                      name={entry.name}
                      institution={entry.institution}
                      creation_date={entry.creation_date}
                      updated_date={entry.updated_date}
                      actions={entry.actions}
                      is_available={entry.is_available}
                      course_id={entry.course_id}
                      max_team_size={entry.max_team_size}
                      is_intelligent={entry.is_intelligent}
                      require_quiz={entry.require_quiz}
                      dataType={_this.props.dataType}
                      //this is just a hack. All current users courses are marked as private during fetch for display purpose.
                      private={entry.private}
                      allow_suggestions={entry.allow_suggestions}
                      has_topic={entry.has_topic}
                      rowClicked={_this.handleExpandClick}
                      newParams={entry.newParams}
                  />)
                  _rows.push(<ContentTableDetailsRow
                      key={entry.type+'_'+(parseInt(entry.nodeinfo.id)*2+1).toString()+'_'+i}
                      id={entry.type+'_'+(parseInt(entry.nodeinfo.node_object_id)*2+1).toString()+'_'+i}
                      showElement={_this.state.expandedRow.indexOf(entry.type+'_'+(parseInt(entry.nodeinfo.node_object_id)*2).toString()+'_'+i) > -1 ? "" : "none"}
                      dataType={_this.props.dataType}
                      children={entry.children}
                  />)
              } else {
                  return;
              }
          })
          if (this.props.showPublic) {
              if (this.props.dataType == 'course') {
                  _rows.push(<TitleRow
                      title="Others' Public Courses"
                  />)
                  jQuery.each(this.props.data, function (i, entry) {
                      if (((entry.name && entry.name.indexOf(_this.props.filterText) !== -1) ||
                          (entry.creation_date && entry.creation_date.indexOf(_this.props.filterText) !== -1) ||
                          (entry.institution && entry.institution.indexOf(_this.props.filterText) !== -1) ||
                          (entry.updated_date && entry.updated_date.indexOf(_this.props.filterText) !== -1)) &&
                          (entry.private == false)) {
                          _rows.push(<ContentTableRow
                              key={entry.type + '_' + (parseInt(entry.nodeinfo.id) * 2).toString() + '_' + i}
                              id={entry.type + '_' + (parseInt(entry.nodeinfo.node_object_id) * 2).toString() + '_' + i}
                              name={entry.name}
                              institution={entry.institution}
                              creation_date={entry.creation_date}
                              updated_date={entry.updated_date}
                              actions={entry.actions}
                              is_available={entry.is_available}
                              course_id={entry.course_id}
                              max_team_size={entry.max_team_size}
                              is_intelligent={entry.is_intelligent}
                              require_quiz={entry.require_quiz}
                              dataType={_this.props.dataType}
                              private={entry.private}
                              allow_suggestions={entry.allow_suggestions}
                              has_topic={entry.has_topic}
                              rowClicked={_this.handleExpandClick}
                              newParams={entry.newParams}
                          />)
                          _rows.push(<ContentTableDetailsRow
                              key={entry.type + '_' + (parseInt(entry.nodeinfo.id) * 2 + 1).toString() + '_' + i}
                              id={entry.type + '_' + (parseInt(entry.nodeinfo.node_object_id) * 2 + 1).toString() + '_' + i}
                              showElement={_this.state.expandedRow.indexOf(entry.type + '_' + (parseInt(entry.nodeinfo.node_object_id) * 2).toString() + '_' + i) > -1 ? "" : "none"}
                              dataType={_this.props.dataType}
                              children={entry.children}
                          />)
                      } else {
                          return;
                      }
                  })
              }
              else if(this.props.dataType=='assignment') {
                  _rows.push(<TitleRow
                      title="Others' Public Assignments"
                  />)
                  jQuery.each(this.props.data, function (i, entry) {
                      if (((entry.name && entry.name.indexOf(_this.props.filterText) !== -1) ||
                          (entry.creation_date && entry.creation_date.indexOf(_this.props.filterText) !== -1) ||
                          (entry.updated_date && entry.updated_date.indexOf(_this.props.filterText) !== -1)) &&
                          (entry.private == false)) {
                          _rows.push(<ContentTableRow
                              key={entry.type + '_' + (parseInt(entry.nodeinfo.id) * 2).toString() + '_' + i}
                              id={entry.type + '_' + (parseInt(entry.nodeinfo.node_object_id) * 2).toString() + '_' + i}
                              name={entry.name}
                              creation_date={entry.creation_date}
                              updated_date={entry.updated_date}
                              actions={entry.actions}
                              is_available={entry.is_available}
                              course_id={entry.course_id}
                              max_team_size={entry.max_team_size}
                              is_intelligent={entry.is_intelligent}
                              require_quiz={entry.require_quiz}
                              dataType={_this.props.dataType}
                              private={entry.private}
                              allow_suggestions={entry.allow_suggestions}
                              has_topic={entry.has_topic}
                              rowClicked={_this.handleExpandClick}
                              newParams={entry.newParams}
                          />)
                          _rows.push(<ContentTableDetailsRow
                              key={entry.type + '_' + (parseInt(entry.nodeinfo.id) * 2 + 1).toString() + '_' + i}
                              id={entry.type + '_' + (parseInt(entry.nodeinfo.node_object_id) * 2 + 1).toString() + '_' + i}
                              showElement={_this.state.expandedRow.indexOf(entry.type + '_' + (parseInt(entry.nodeinfo.node_object_id) * 2).toString() + '_' + i) > -1 ? "" : "none"}
                              dataType={_this.props.dataType}
                              children={entry.children}
                          />)
                      } else {
                          return;
                      }
                  })
              }

      }

      }
      if (this.props.dataType == 'course') {
          return (
              <table className="table table-hover" style={{"table-layout": "fixed"}}>
                  <thead>
                      <tr>
                          <th width={colWidthArray[0]}>
                              Name
                              <SortToggle
                                  colName="name"
                                  order="normal"
                                  handleUserClick={this.handleSortingClick} />
                          </th>
                          <th style={colDisplayStyle} width={colWidthArray[3]}>
                              Institution
                              <SortToggle
                                  colName="institution"
                                  order="normal"
                                  handleUserClick={this.handleSortingClick} />
                          </th>
                          <th style={colDisplayStyle} width={colWidthArray[4]}>
                              Creation Date
                              <SortToggle
                                  colName="creation_date"
                                  order="normal"
                                  handleUserClick={this.handleSortingClick} />
                          </th>
                          <th style={colDisplayStyle} width={colWidthArray[5]}>
                              Updated Date
                              <SortToggle
                                  colName="updated_date"
                                  order="normal"
                                  handleUserClick={this.handleSortingClick} />
                          </th>
                          <th width={colWidthArray[6]}>Actions</th>
                      </tr>
                  </thead>
                  <tbody>
            {_rows}
                  </tbody>
              </table>
          )
      }
       else{
          return (
              <table className="table table-hover" style={{"table-layout": "fixed"}}>
                  <thead>
                      <tr>
                          <th width={colWidthArray[0]}>
                              Name
                              <SortToggle
                                  colName="name"
                                  order="normal"
                                  handleUserClick={this.handleSortingClick} />
                          </th>
                          <th style={colDisplayStyle} width={colWidthArray[4]}>
                              Creation Date
                              <SortToggle
                                  colName="creation_date"
                                  order="normal"
                                  handleUserClick={this.handleSortingClick} />
                          </th>
                          <th style={colDisplayStyle} width={colWidthArray[5]}>
                              Updated Date
                              <SortToggle
                                  colName="updated_date"
                                  order="normal"
                                  handleUserClick={this.handleSortingClick} />
                          </th>
                          <th width={colWidthArray[6]}>Actions</th>
                      </tr>
                  </thead>
                  <tbody>
            {_rows}
                  </tbody>
              </table>
          )
      }
    }
  })

  var FilterableTable = React.createClass({
    getInitialState: function() {
      return {
        filterText: '',
        privateCheckbox: false,
        publicCheckbox: false,
        tableData: this.props.data
      }
    },
    handleUserInput: function(filterText) {
      this.setState({
        filterText: filterText
      })
    },
    handleUserClick: function(colName, order) {
      var tmpData = this.state.tableData
      tmpData.sort(function(a, b) {
        var a_val = eval("a."+colName)
        var b_val = eval("b."+colName)
        if (order === 'normal') {
          if (!a_val && b_val) {
            return 1;
          }
          if (!b_val && a_val) {
            return -1;
          }
          if (!a_val && !b_val) {
            return 0;
          }
          return -(a_val.localeCompare(b_val))
        } else {
          if (!a_val && b_val) {
            return -1;
          }
          if (!b_val && a_val) {
            return 1;
          }
          if (!a_val && !b_val) {
            return 0;
          }
          return (a_val.localeCompare(b_val))
        }
      })
      this.setState({
        tableData: tmpData
      })
    },
    componentWillReceiveProps: function(nextProps) {
      this.setState({
        tableData: nextProps.data
      })
    },
    handleUserFilter: function(name, checked) {
      var publicCheckboxStatus = this.state.publicCheckbox
        publicCheckboxStatus = checked
      var tmpData = this.props.data.filter(function(element) {
          if(publicCheckboxStatus){
              return true
          }
          else
            return element.private===true
      })
        this.setState({
          tableData: tmpData,
          publicCheckbox: publicCheckboxStatus
        })
    },
    render: function() {
      return (
        <div className="filterable_table">
          <SearchBar
            filterText={this.state.filterText}
            onUserInput={this.handleUserInput}
            dataType={this.props.dataType}
          />
          <FilterButton
            filterOption="public"
            onUserFilter={this.handleUserFilter}
            inputCheckboxValue={this.state.publicCheckbox}
            dataType={this.props.dataType}
          />
          <NewItemButton
            dataType={this.props.dataType}
            private={true}
          />
          <ContentTable
            data={this.state.tableData}
            filterText={this.state.filterText}
            onUserClick={this.handleUserClick}
            dataType={this.props.dataType}
            showPublic={this.state.publicCheckbox}
          />
        </div>
      )
    }
  })

  var TabSystem = React.createClass({
    getInitialState: function() {
      return {
        tableContent: {
          Courses: {},
          Assignments: {},
          Questionnaires: {}
        },
        activeTab: "1"
      }
    },
    componentWillMount: function() {
      var _this = this
      preloadImages('/assets/tree_view/edit-icon-24.png',
                    '/assets/tree_view/delete-icon-24.png',
                    '/assets/tree_view/lock-off-disabled-icon-24.png',
                    '/assets/tree_view/lock-disabled-icon-24.png',
                    '/assets/tree_view/Copy-icon-24.png',
                    '/assets/tree_view/add-public-24.png',
                    '/assets/tree_view/add-private-24.png',
                    '/assets/tree_view/add-ta-24.png',
                    '/assets/tree_view/add-assignment-24.png',
                    '/assets/tree_view/add-participant-24.png',
                    '/assets/tree_view/create-teams-24.png',
                    '/assets/tree_view/360-dashboard-24.png',
                    '/assets/tree_view/remove-from-course-24.png',
                    '/assets/tree_view/assign-course-blue-24.png',
                    '/assets/tree_view/run-lottery.png',
                    '/assets/tree_view/assign-reviewers-24.png',
                    '/assets/tree_view/assign-survey-24.png',
                    '/assets/tree_view/view-survey-24.png',
                    '/assets/tree_view/view-scores-24.png',
                    '/assets/tree_view/view-review-report-24.png',
                    '/assets/tree_view/view-suggestion-24.png',
                    '/assets/tree_view/view-delayed-mailer.png',
                    '/assets/tree_view/view-publish-rights-24.png'
                    )
      jQuery.get("/tree_display/session_last_open_tab", function(data) {
        _this.setState({
          activeTab: data
        })
      })
      jQuery.get("/tree_display/folder_node_ng_getter", function(data) {
        jQuery.post("/tree_display/children_node_ng",
          {
            reactParams: {
              child_nodes: data,
              nodeType: 'FolderNode'
            }
          }, function(data2, status) {
            jQuery.each(data2, function(nodeType, outerNode) {
              jQuery.each(outerNode, function(i, node) {
                var newParams = {
                  key: node.name + "|" + node.directory,
                  nodeType: nodeType,
                  child_nodes: node.nodeinfo
                }
                if (nodeType === 'Assignments') {
                  node["children"] = null;
                  node[newParams]=newParams;
                } else if (nodeType === 'Courses') {
                  newParams["nodeType"] = 'CourseNode'
                  node["newParams"]=newParams;
                } else if (nodeType === 'Questionnaires') {
                  newParams["nodeType"] = 'FolderNode'
                  node["newParams"]=newParams;
                }
              }) 
            })
            if (data2) {
              _this.setState({
                tableContent: data2
              })
            }
          },
          'json')
      })
      
    },
    handleTabChange: function(tabIndex) {
      jQuery.get("/tree_display/set_session_last_open_tab?tab="+tabIndex.toString())
    },
    render: function() {
      return (
        <ReactSimpleTabs
         className="tab-system"
         tabActive={parseInt(this.state.activeTab)}
         onAfterChange={this.handleTabChange}
         >
          <ReactSimpleTabs.Panel title="Courses">
            <FilterableTable key="table1" dataType='course' data={this.state.tableContent.Courses}/>
          </ReactSimpleTabs.Panel>
          <ReactSimpleTabs.Panel title="Assignments">
            <FilterableTable key="table2" dataType='assignment' data={this.state.tableContent.Assignments}/>
          </ReactSimpleTabs.Panel>
          <ReactSimpleTabs.Panel title="Questionnaires">
            <FilterableTable key="table2" dataType='questionnaire' data={this.state.tableContent.Questionnaires}/>
          </ReactSimpleTabs.Panel>
        </ReactSimpleTabs>
      )
    }
  })

  if (document.getElementById("tree_display")) {
    React.render(
      React.createElement(TabSystem),
      document.getElementById("tree_display")
    )
  }

})