SWAMPy

✎ CARVE FLESH

EDITING: EnrollmentTermInput.js

/*
 * Copyright (C) 2016 - present Instructure, Inc.
 *
 * This file is part of Canvas.
 *
 * Canvas is free software: you can redistribute it and/or modify it under
 * the terms of the GNU Affero General Public License as published by the Free
 * Software Foundation, version 3 of the License.
 *
 * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
 * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
 * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
 * details.
 *
 * You should have received a copy of the GNU Affero General Public License along
 * with this program. If not, see <http://www.gnu.org/licenses/>.
 */

import React from 'react'
import PropTypes from 'prop-types'
import _ from 'underscore'
import {useScope as useI18nScope} from '@canvas/i18n'
import TokenInput, {Option as ComboboxOption} from 'react-tokeninput'

const I18n = useI18nScope('EnrollmentTermInput')

const groupByTagType = function (options) {
  const now = new Date()
  return _.groupBy(options, option => {
    const noStartDate = !_.isDate(option.startAt)
    const noEndDate = !_.isDate(option.endAt)
    const started = option.startAt < now
    const ended = option.endAt < now

if ((started && !ended) || (started && noEndDate) || (!ended && noStartDate)) {
      return 'active'
    } else if (!started) {
      return 'future'
    } else if (ended) {
      return 'past'
    }
    return 'undated'
  })
}

class EnrollmentTermInput extends React.Component {
  static propTypes = {
    enrollmentTerms: PropTypes.array.isRequired,
    setSelectedEnrollmentTermIDs: PropTypes.func.isRequired,
    selectedIDs: PropTypes.array.isRequired,
  }

handleChange = termIDs => {
    this.props.setSelectedEnrollmentTermIDs(termIDs)
  }

handleSelect = (value, _combobox) => {
    const termIDs = _.pluck(this.props.enrollmentTerms, 'id')
    if (_.includes(termIDs, value)) {
      const selectedIDs = _.uniq(this.props.selectedIDs.concat([value]))
      this.handleChange(selectedIDs)
    }
  }

handleRemove = termToRemove => {
    const selectedTermIDs = _.reject(this.props.selectedIDs, termID => termToRemove.id === termID)
    this.handleChange(selectedTermIDs)
  }

selectableTerms = () =>
    _.reject(this.props.enrollmentTerms, term => _.includes(this.props.selectedIDs, term.id))

filteredTagsForType = type => {
    const groupedTags = groupByTagType(this.selectableTerms())
    return (groupedTags && groupedTags[type]) || []
  }

selectableOptions = type =>
    _.map(this.filteredTagsForType(type), term => this.selectableOption(term))

selectableOption = term => (
    <ComboboxOption key={term.id} value={term.id}>
      {term.displayName}
    </ComboboxOption>
  )

optionsForAllTypes = () => {
    if (_.isEmpty(this.selectableTerms())) {
      return [this.headerOption('none')]
    } else {
      return _.union(
        this.optionsForType('active'),
        this.optionsForType('undated'),
        this.optionsForType('future'),
        this.optionsForType('past')
      )
    }
  }

optionsForType = optionType => {
    const header = this.headerOption(optionType)
    const options = this.selectableOptions(optionType)
    return _.some(options) ? _.union([header], options) : []
  }

headerOption = heading => {
    const headerText = {
      active: I18n.t('Active'),
      undated: I18n.t('Undated'),
      future: I18n.t('Future'),
      past: I18n.t('Past'),
      none: I18n.t('No unassigned terms'),
    }[heading]
    return (
      <ComboboxOption className="ic-tokeninput-header" value={heading} key={heading}>
        {headerText}
      </ComboboxOption>
    )
  }

suppressKeys = event => {
    const code = event.keyCode || event.which
    if (code === 13) {
      event.preventDefault()
    }
  }

selectedEnrollmentTerms = () =>
    _.map(this.props.selectedIDs, id => {
      const term = _.findWhere(this.props.enrollmentTerms, {id})
      const termForDisplay = {...term}
      termForDisplay.name = term.displayName
      return termForDisplay
    })

render() {
    return (
      // eslint-disable-next-line jsx-a11y/no-static-element-interactions
      <div className="ic-Form-control" onKeyDown={this.suppressKeys}>
        {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
        <label
          className="ic-Label"
          title={I18n.t('Attach terms')}
          aria-label={I18n.t('Attach terms')}
        >
          {I18n.t('Attach terms')}
        </label>
        <div className="ic-Input">
          <TokenInput
            menuContent={this.optionsForAllTypes()}
            selected={this.selectedEnrollmentTerms()}
            onChange={this.handleChange}
            onSelect={this.handleSelect}
            onRemove={this.handleRemove}
            onInput={function () {}}
            value={true}
            showListOnFocus={true}
            ref="input"
          />
        </div>
      </div>
    )
  }
}

export default EnrollmentTermInput

CANCEL

Name	Type	Size	Modified	Actions
↩ ..	DIR	—	—
📄 AccountGradingPeriod.js	JS	5.9 KB	2023-09-24 03:39	EDIT
📄 AccountTabContainer.js	JS	2.6 KB	2023-09-24 03:39	EDIT
📄 EditGradingPeriodSetForm.js	JS	6 KB	2023-09-24 03:39	EDIT
📄 EnrollmentTermInput.js	JS	4.9 KB	2023-09-24 03:39	EDIT
📄 EnrollmentTermsDropdown.js	JS	2.2 KB	2023-09-24 03:39	EDIT
📄 GradingPeriodForm.js	JS	8.2 KB	2023-09-24 03:39	EDIT
📄 GradingPeriodSet.js	JS	14.6 KB	2023-09-24 03:39	EDIT
📄 GradingPeriodSetCollection.js	JS	12.8 KB	2023-09-24 03:39	EDIT
📄 NewGradingPeriodSetForm.js	JS	5.9 KB	2023-09-24 03:39	EDIT
📄 SearchGradingPeriodsField.js	JS	1.5 KB	2023-09-24 03:39	EDIT