Exemplo n.º 1
0
 renderTitle = () => {
   if (this.props.editing) {
     return (
       <div className="pull-left">
         <input
           type="text"
           onChange={this.changeTitle}
           name="grading_standard[title]"
           className="scheme_name"
           title={I18n.t('Grading standard title')}
           value={this.state.editingStandard.title}
           ref="title"
         />
       </div>
     )
   }
   return (
     <div className="pull-left">
       <div className="title" ref="title">
         <span className="screenreader-only">{I18n.t('Grading standard title')}</span>
         {this.props.standard.title}
       </div>
     </div>
   )
 }
export default function DuplicateConfirmationForm (props) {
  const forceSaveTool = () => {
    const data = props.toolData
    data.verifyUniqueness = undefined
    props.store.save(props.configurationType, data, props.onSuccess, props.onError)
  }

  return (
    <div id="duplicate-confirmation-form">
      <div className="ReactModal__Body">
        <p>
          {I18n.t('This tool has already been installed in this context. Would you like to install it anyway?')}
        </p>
      </div>
      <div className="ReactModal__Footer">
        <div className="ReactModal__Footer-Actions">
          <Button id='cancel-install' variant="primary" margin="0 x-small 0 0" onClick={props.onCancel} >
            {I18n.t('No, Cancel Installation')}
          </Button>
          <Button id='continue-install' onClick={forceSaveTool}>
            {I18n.t('Yes, Install Tool')}
          </Button>
        </div>
      </div>
    </div>
  )
}
Exemplo n.º 3
0
  renderEditAndDeleteIcons = () => {
    if (!this.props.editing) {
      const {title} = this.props.standard

      return (
        <div>
          <button
            ref="editButton"
            className={`Button Button--icon-action edit_grading_standard_button ${
              this.assessedAssignment() ? 'read_only' : ''
            }`}
            onClick={this.triggerEditGradingStandard}
            type="button"
          >
            <span className="screenreader-only">
              {I18n.t('Edit Grading Scheme %{title}', {title})}
            </span>
            <i className="icon-edit" />
          </button>
          <button
            ref="deleteButton"
            className="Button Button--icon-action delete_grading_standard_button"
            onClick={this.triggerDeleteGradingStandard}
            type="button"
          >
            <span className="screenreader-only">
              {I18n.t('Delete Grading Scheme %{title}', {title})}
            </span>
            <i className="icon-trash" />
          </button>
        </div>
      )
    }
    return null
  }
Exemplo n.º 4
0
 fields.forEach(function(field) {
   var value = this.refs[field].state.value;
   if (!value) {
     errors[field] = I18n.t('This field is required');
     formErrors.push(I18n.t('This field "%{name}" is required.', { name: field }));
   }
 }.bind(this));
Exemplo n.º 5
0
 render() {
   return (
     <div className="ExternalToolsTable">
       <InfiniteScroll
         pageStart={0}
         loadMore={this.loadMore}
         hasMore={store.getState().hasMore}
         loader={this.loader()}
       >
         <table
           className="ic-Table ic-Table--striped ic-Table--condensed"
           id="external-tools-table"
         >
           <caption className="screenreader-only">{I18n.t('External Apps')}</caption>
           <thead>
             <tr>
               <th scope="col" width="5%">
                 <ScreenReaderContent>{I18n.t('Status')}</ScreenReaderContent>
               </th>
               <th scope="col" width="65%">
                 {I18n.t('Name')}
               </th>
               <th scope="col" width="30%">
                 <ScreenReaderContent>{I18n.t('Actions')}</ScreenReaderContent>
               </th>
             </tr>
           </thead>
           <tbody className="collectionViewItems">
             {this.trs()}
           </tbody>
         </table>
       </InfiniteScroll>
     </div>
   )
 }
 render() {
   return (
     <li role="presentation" className="ConfigureExternalToolButton">
       <a
         href="#"
         tabIndex="-1"
         ref="btnTriggerModal"
         role="menuitem"
         aria-label={I18n.t('Configure %{toolName} App', {toolName: this.props.tool.name})}
         className="icon-settings-2"
         onClick={this.openModal}
       >
         {I18n.t('Configure')}
       </a>
       <Modal
         open={this.state.modalIsOpen}
         onDismiss={this.closeModal}
         onEnter={this.onAfterOpen}
         label={I18n.t('Configure %{tool} App?', {tool: this.props.tool.name})}
         size="large"
       >
         <ModalBody>{this.renderIframe()}</ModalBody>
         <ModalFooter>
           <Button onClick={this.closeModal}>{I18n.t('Close')}</Button>
         </ModalFooter>
       </Modal>
     </li>
   )
 }
Exemplo n.º 7
0
  render() {
    return (
      <div className="Header">
        <h2 className="page-header" ref="pageHeader">
          <span className="externalApps_label_text">{I18n.t('External Apps')}</span>
          <div className="externalApps_buttons_container">{this.props.children}</div>
        </h2>

        <div>
          <p>
            {I18n.t(
              'Apps are an easy way to add new features to Canvas. They can be added to individual courses, or to all courses in an account. Once configured, you can link to them through course modules and create assignments for assessment tools.'
            )}
          </p>
          <p>
            <Link
              icon={IconExternalLink}
              href="https://www.eduappcenter.com/"
              linkRef={this.setLinkRef}
            >
              <ScreenReaderContent>{I18n.t('Link to lti tools.')}</ScreenReaderContent>
            </Link>
            &nbsp;
            {I18n.t('See some LTI tools that work great with Canvas.')}
          </p>
        </div>
      </div>
    )
  }
Exemplo n.º 8
0
 render() {
   return (
     <div>
       <div
         className="grading_standard react_grading_standard pad-box-mini border border-trbl border-round"
         id={this.renderIdNames()}
       >
         {this.renderStandardAlert()}
         <div>
           <table>
             <caption className="screenreader-only">
               {I18n.t(
                 'A table containing the name of the grading scheme and buttons for editing or deleting the scheme.'
               )}
             </caption>
             <thead>
               <tr>
                 <th scope="col" className="insert_row_container" tabIndex="-1" />
                 <th scope="col" colSpan="5" className="standard_title">
                   {this.renderIconsAndTitle()}
                 </th>
               </tr>
               <tr>
                 <th scope="col" className="insert_row_container" />
                 <th scope="col" className="name_header">
                   {I18n.t('Name')}
                 </th>
                 <th scope="col" className="range_container" colSpan="2">
                   <div className="range_label">{I18n.t('Range')}</div>
                   <div className="clear" />
                 </th>
               </tr>
             </thead>
           </table>
           <table className="grading_standard_data">
             <caption className="screenreader-only">
               {I18n.t(
                 'A table that contains the grading scheme data. Each row contains a name, a maximum percentage, and a minimum percentage. In addition, each row contains a button to add a new row below, and a button to delete the current row.'
               )}
             </caption>
             <thead aria-hidden="true">
               <tr>
                 <td />
                 <td />
                 <td />
                 <td />
                 <td />
               </tr>
             </thead>
             <tbody>{this.renderDataRows()}</tbody>
           </table>
           {this.renderSaveAndCancelButtons()}
         </div>
       </div>
     </div>
   )
 }
function errorMessage(error, clientId) {
  const {status} = error.response

  if (status === 404) {
    return I18n.t('Could not find an LTI configuration for client ID %{clientId}', {clientId})
  } else if (status === 401) {
    return I18n.t('The client ID %{clientId} is disabled', {clientId})
  }

  return I18n.t('An error occured while trying to find the LTI configuration')
}
Exemplo n.º 10
0
  render() {
    if (!this.state.app) {
      return <img src="/images/ajax-loader-linear.gif" />
    }

    return (
      <div className="AppDetails">
        <Header>
          <a
            href={`${this.props.baseUrl}/configurations`}
            className="btn view_tools_link lm pull-right"
          >
            {I18n.t('View App Configurations')}
          </a>
          <a href={this.props.baseUrl} className="btn view_tools_link lm pull-right">
            {I18n.t('View App Center')}
          </a>
        </Header>
        <div className="app_full">
          <table className="individual-app">
            <tbody>
              <tr>
                <td className="individual-app-left" valign="top">
                  <div className="app">
                    <img className="img-polaroid" src={this.state.app.banner_image_url} />
                    {this.alreadyInstalled()}
                  </div>
                  <AddApp
                    ref="addAppButton"
                    app={this.state.app}
                    handleToolInstalled={this.handleToolInstalled}
                  />

                  <a href={this.props.baseUrl} className="app_cancel">
                    &laquo; {I18n.t('Back to App Center')}
                  </a>
                </td>
                <td className="individual-app-right" valign="top">
                  <h2 ref="appName">{this.state.app.name}</h2>
                  <p
                    ref="appDescription"
                    dangerouslySetInnerHTML={{__html: this.state.app.description}}
                  />
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    )
  }
Exemplo n.º 11
0
 renderSaveButton: function() {
   if(this.state.saving){
     return (
       <button type="button" ref="saveButton" className="btn btn-primary save_button" disabled="true">
         {I18n.t("Saving...")}
       </button>
     );
   }
   return (
     <button type="button" ref="saveButton" onClick={this.triggerSaveGradingStandard} className="btn btn-primary save_button">
       {I18n.t("Save")}
     </button>
   );
 },
 getModal = () => (
   <Modal
     ref="reactModal"
     open={this.state.modalIsOpen}
     onDismiss={this.closeModal}
     label={I18n.t('App Placements')}
   >
     <ModalBody>
       {this.placements() || I18n.t('No Placements Enabled')}
     </ModalBody>
     <ModalFooter>
       <Button onClick={this.closeModal}>{I18n.t('Close')}</Button>
     </ModalFooter>
   </Modal>
 )
Exemplo n.º 13
0
 renderCannotManageMessage: function() {
   if(this.props.permissions.manage && this.props.othersEditing) return null;
   if(this.props.standard.context_name){
     return (
       <div ref="cannotManageMessage">
         {I18n.t("(%{context}: %{contextName})", { context: this.props.standard.context_type.toLowerCase(), contextName: this.props.standard.context_name })}
       </div>
     );
   }
   return (
     <div ref="cannotManageMessage">
       {I18n.t("(%{context} level)", { context: this.props.standard.context_type.toLowerCase() })}
     </div>
   );
 },
Exemplo n.º 14
0
 renderWeight: function () {
   if (this.props.weighted) {
     return (
       <div className="col-xs-12 col-md-8 col-lg-2">
         <label className="ic-Label" htmlFor={postfixId('period_title_', this)}>
           {I18n.t('Weight')}
         </label>
         <div>
           <span className="screenreader-only">{I18n.t('Grading Period Weight')}</span>
           <span ref="weight">{I18n.n(this.props.weight, {percentage: true})}</span>
         </div>
       </div>
     );
   }
 },
  renderIframe = () => {
    const beforeAlertStyles = `before_external_content_info_alert ${
      this.state.beforeExternalContentAlertClass
    }`
    const afterAlertStyles = `after_external_content_info_alert ${
      this.state.afterExternalContentAlertClass
    }`

    return (
      <div>
        <div
          onFocus={this.handleAlertFocus}
          onBlur={this.handleAlertBlur}
          className={beforeAlertStyles}
          tabIndex="0"
        >
          <div className="ic-flash-info">
            <div className="ic-flash__icon" aria-hidden="true">
              <i className="icon-info" />
            </div>
            {I18n.t('The following content is partner provided')}
          </div>
        </div>
        <iframe
          src={this.getLaunchUrl()}
          title={I18n.t('Tool Configuration')}
          className="tool_launch"
          style={this.state.iframeStyle}
          ref={e => {
            this.iframe = e
          }}
        />
        <div
          onFocus={this.handleAlertFocus}
          onBlur={this.handleAlertBlur}
          className={afterAlertStyles}
          tabIndex="0"
        >
          <div className="ic-flash-info">
            <div className="ic-flash__icon" aria-hidden="true">
              <i className="icon-info" />
            </div>
            {I18n.t('The preceding content is partner provided')}
          </div>
        </div>
      </div>
    )
  }
 renderGradingStandards = () => {
   if (!this.state.standards) {
     return null
   } else if (this.state.standards.length === 0) {
     return <h3 ref="noSchemesMessage">{I18n.t('No grading schemes to display')}</h3>
   }
   return this.state.standards.map(function(s) {
     return (
       <GradingStandard
         ref={`gradingStandard${s.grading_standard.id}`}
         key={s.grading_standard.id}
         uniqueId={s.grading_standard.id}
         standard={s.grading_standard}
         editing={!!s.editing}
         permissions={s.grading_standard.permissions}
         justAdded={!!s.justAdded}
         onSetEditingStatus={this.setEditingStatus}
         round={this.roundToTwoDecimalPlaces}
         onDeleteGradingStandard={this.deleteGradingStandard}
         othersEditing={!s.editing && this.anyStandardBeingEdited()}
         onSaveGradingStandard={this.saveGradingStandard}
       />
     )
   }, this)
 }
 renderSaveButton: function () {
   if (periodsAreLoaded(this.state) && !this.state.readOnly && _.all(this.state.periods, period => period.permissions.update)) {
     return (
       <div className='form-actions'>
         <button
           className='Button btn-primary btn save_button'
           id='update-button'
           disabled={this.state.disabled || this.state.saveDisabled}
           onClick={this.batchUpdatePeriods}
         >
           {this.state.disabled ? I18n.t('Updating') : I18n.t('Save')}
         </button>
       </div>
     );
   }
 },
Exemplo n.º 18
0
 renderDisabledIcons = () => {
   if (
     this.props.permissions.manage &&
     this.props.standard.context_code &&
     this.props.standard.context_code != ENV.context_asset_string
   ) {
     const url = `/${splitAssetString(this.props.standard.context_code).join(
       '/'
     )}/grading_standards`
     const titleText = I18n.t('Manage grading schemes in %{context_name}', {
       context_name:
         this.props.standard.context_name || this.props.standard.context_type.toLowerCase()
     })
     return (
       <a
         className="links cannot-manage-notification"
         href={url}
         title={titleText}
         data-tooltip="left"
       >
         <span className="screenreader-only">{titleText}</span>
         <i className="icon-more standalone-icon" />
       </a>
     )
   } else {
     return (
       <div className="disabled-buttons" ref="disabledButtons">
         <i className="icon-edit" />
         <i className="icon-trash" />
       </div>
     )
   }
 }
Exemplo n.º 19
0
 areNoDatesOverlapping = targetPeriod => {
   if (this.areDatesOverlapping(targetPeriod)) {
     $.flashError(I18n.t('Grading periods must not overlap'))
     return false
   } else {
     return true
   }
 }
Exemplo n.º 20
0
 areDatesValid = period => {
   if (!isNaN(period.startDate) && !isNaN(period.endDate)) {
     return true
   } else {
     $.flashError(I18n.t('All dates fields must be present and formatted correctly'))
     return false
   }
 }
Exemplo n.º 21
0
 isStartDateBeforeEndDate = period => {
   if (period.startDate < period.endDate) {
     return true
   } else {
     $.flashError(I18n.t('All start dates must be before the end date'))
     return false
   }
 }
 success: function () {
   $.flashMessage(I18n.t('The grading period was deleted'));
   if (self.lastRemainingPeriod()) {
     self.getPeriods();
   } else {
     self.removeDeletedGradingPeriod(id);
   }
 },
 isTitleCompleted: function(period) {
   if ((period.title).trim().length > 0) {
     return true;
   } else {
     $.flashError(I18n.t('All grading periods must have a title'));
     return false;
   }
 },
 isStartDateBeforeEndDate: function(period) {
   if (period.startDate < period.endDate) {
     return true;
   } else {
     $.flashError(I18n.t('All start dates must be before the end date'));
     return false;
   }
 },
 areDatesValid: function(period) {
   if (!isNaN(period.startDate) && !isNaN(period.endDate)) {
     return true;
   } else {
     $.flashError(I18n.t('All dates fields must be present and formatted correctly'));
     return false;
   }
 },
 areNoDatesOverlapping: function(targetPeriod) {
   if(this.areDatesOverlapping(targetPeriod)) {
     $.flashError(I18n.t('Grading periods must not overlap'));
     return false;
   } else {
     return true;
   }
 },
Exemplo n.º 27
0
 isTitleCompleted = period => {
   if (period.title.trim().length > 0) {
     return true
   } else {
     $.flashError(I18n.t('All grading periods must have a title'))
     return false
   }
 }
Exemplo n.º 28
0
 renderCloseDate: function() {
   let closeDate = isEditable(this) ? this.props.endDate : this.props.closeDate;
   return (
     <div>
       <span className="screenreader-only">{I18n.t("Close Date")}</span>
       { tabbableDate("closeDate", closeDate || this.props.endDate) }
     </div>
   );
 },
Exemplo n.º 29
0
 handleToolInstalled = () => {
   const app = this.state.app
   app.is_installed = true
   this.setState({app})
   this.props.store.flagAppAsInstalled(app.short_name)
   this.props.store.setState({filter: 'installed', filterText: ''})
   $.flashMessage(I18n.t('The app was added successfully'))
   page('/')
 }
 deleteGradingStandard = (event, uniqueId) => {
   const self = this,
     $standard = $(event.target).parents('.grading_standard')
   $standard.confirmDelete({
     url: `${ENV.GRADING_STANDARDS_URL}/${uniqueId}`,
     message: I18n.t('Are you sure you want to delete this grading scheme?'),
     success() {
       const indexToRemove = self.state.standards.indexOf(self.getStandardById(uniqueId))
       const newStandards = update(self.state.standards, {$splice: [[indexToRemove, 1]]})
       self.setState({standards: newStandards}, () => {
         $.flashMessage(I18n.t('Grading scheme deleted'))
       })
     },
     error() {
       $.flashError(I18n.t('There was a problem deleting the grading scheme'))
     }
   })
 }