Hide EXP fields if the course is gamified

Coursemology · Mar 20, 2017 · 4640f22 · 4640f22
1 parent f3dcd03
commit 4640f22
Show file tree

Hide file tree

Showing 8 changed files with 96 additions and 40 deletions.
diff --git a/app/views/course/assessment/assessments/_edit.json.jbuilder b/app/views/course/assessment/assessments/_edit.json.jbuilder
@@ -4,6 +4,8 @@ json.attributes do
 end
 
 json.mode_switching @assessment.allow_mode_switching?
+json.gamified current_course.gamified?
+
 json.folder_attributes do
   json.folder_id @assessment.folder.id
   json.materials @assessment.materials.order(:name) do |material|

diff --git a/app/views/course/assessment/assessments/index.html.slim b/app/views/course/assessment/assessments/index.html.slim
@@ -1,7 +1,7 @@
 = page_header format_inline_text(@category.title) do
   - if can?(:create, Course::Assessment.new(tab: @tab))
     div.pull-right
-      div.new-btn data="#{{ tab_id: @tab.id, category_id: @category.id }.to_json}"
+      div.new-btn data="#{{ gamified: current_course.gamified?, tab_id: @tab.id, category_id: @category.id }.to_json}"
 
 = display_assessment_tabs
 

diff --git a/client/app/bundles/course/assessment/assessments-edit.jsx b/client/app/bundles/course/assessment/assessments-edit.jsx
@@ -15,6 +15,7 @@ $(document).ready(() => {
       <ProviderWrapper store={store}>
         <AssessmentEditPage
           modeSwitching={data.mode_switching}
+          gamified={data.gamified}
           folderAttributes={data.folder_attributes}
           conditionAttributes={data.condition_attributes}
           initialValues={{ ...data.attributes, password_protected: !!data.attributes.password }}

diff --git a/client/app/bundles/course/assessment/assessments-index.jsx b/client/app/bundles/course/assessment/assessments-index.jsx
@@ -14,6 +14,7 @@ $(document).ready(() => {
     const Page = () => (
       <ProviderWrapper store={store}>
         <AssessmentIndexPage
+          gamified={attributes.gamified}
           categoryId={attributes.category_id}
           tabId={attributes.tab_id}
         />

diff --git a/client/app/bundles/course/assessment/containers/AssessmentForm/index.jsx b/client/app/bundles/course/assessment/containers/AssessmentForm/index.jsx
@@ -89,6 +89,8 @@ class AssessmentForm extends React.Component {
     onSubmit: PropTypes.func.isRequired,
     // If the Form is in editing mode, `published` button will be displayed.
     editing: PropTypes.bool,
+    // if the EXP fields should be displayed
+    gamified: PropTypes.bool,
     // If allow to switch between autoraded and manually graded mode.
     modeSwitching: PropTypes.bool,
     folderAttributes: PropTypes.shape({
@@ -103,6 +105,10 @@ class AssessmentForm extends React.Component {
     }),
   };
 
+  static defaultProps = {
+    gamified: true,
+  }
+
   onStartAtChange = (_, newStartAt) => {
     const { start_at: startAt, end_at: endAt, bonus_end_at: bonusEndAt, dispatch } = this.props;
     const newStartTime = newStartAt && newStartAt.getTime();
@@ -196,7 +202,7 @@ class AssessmentForm extends React.Component {
   }
 
   render() {
-    const { handleSubmit, onSubmit, modeSwitching, submitting, editing, folderAttributes,
+    const { handleSubmit, onSubmit, gamified, modeSwitching, submitting, editing, folderAttributes,
       conditionAttributes } = this.props;
 
     return (
@@ -232,35 +238,41 @@ class AssessmentForm extends React.Component {
             style={styles.flexChild}
             disabled={submitting}
           />
-          <Field
-            name="bonus_end_at"
-            component={DateTimePicker}
-            floatingLabelText={<FormattedMessage {...translations.bonusEndAt} />}
-            style={styles.flexChild}
-            disabled={submitting}
-          />
-        </div>
-        <div style={styles.flexGroup}>
-          <Field
-            name="base_exp"
-            component={TextField}
-            floatingLabelText={<FormattedMessage {...translations.baseExp} />}
-            type="number"
-            style={styles.flexChild}
-            disabled={submitting}
-          />
-          <Field
-            name="time_bonus_exp"
-            component={TextField}
-            floatingLabelText={<FormattedMessage {...translations.timeBonusExp} />}
-            type="number"
-            style={styles.flexChild}
-            disabled={submitting}
-          />
+          {
+            gamified &&
+            <Field
+              name="bonus_end_at"
+              component={DateTimePicker}
+              floatingLabelText={<FormattedMessage {...translations.bonusEndAt} />}
+              style={styles.flexChild}
+              disabled={submitting}
+            />
+          }
         </div>
+        {
+          gamified &&
+          <div style={styles.flexGroup}>
+            <Field
+              name="base_exp"
+              component={TextField}
+              floatingLabelText={<FormattedMessage {...translations.baseExp} />}
+              type="number"
+              style={styles.flexChild}
+              disabled={submitting}
+            />
+            <Field
+              name="time_bonus_exp"
+              component={TextField}
+              floatingLabelText={<FormattedMessage {...translations.timeBonusExp} />}
+              type="number"
+              style={styles.flexChild}
+              disabled={submitting}
+            />
+          </div>
+        }
 
         {
-          this.props.editing &&
+          editing &&
           <Field
             name="published"
             component={Toggle}

diff --git a/client/app/bundles/course/assessment/pages/AssessmentEdit/__test__/index.test.js b/client/app/bundles/course/assessment/pages/AssessmentEdit/__test__/index.test.js
@@ -12,18 +12,19 @@ jest.mock('lib/components/redux-form/RichTextField', () => {
 });
 
 describe('<AssessmentEdit />', () => {
+  const store = storeCreator({});
+  const id = 1;
+  const intitialValues = {
+    id,
+    title: 'Assessement',
+    description: 'Awesome assessment',
+    autograded: false,
+    start_at: new Date(),
+    base_exp: 0,
+    time_bonus_exp: 0,
+  };
+
   it('renders the edit page', async () => {
-    const store = storeCreator({});
-    const id = 1;
-    const intitialValues = {
-      id,
-      title: 'Assessement',
-      description: 'Awesome assessment',
-      autograded: false,
-      start_at: new Date(),
-      base_exp: 0,
-      time_bonus_exp: 0,
-    };
     const editPage = mount(
       <ProviderWrapper store={store}>
         <AssessmentEdit
@@ -58,4 +59,37 @@ describe('<AssessmentEdit />', () => {
     expect(spy).toHaveBeenCalledWith(id,
       { assessment: { ...intitialValues, title: newTitle, autograded: true, password: null } });
   });
+
+  it('renders the gamified fields by default', () => {
+    const editPage = mount(
+      <ProviderWrapper store={store}>
+        <AssessmentEdit
+          id={id}
+          modeSwitching
+          initialValues={intitialValues}
+        />
+      </ProviderWrapper>
+    );
+
+    expect(editPage.find('input[name="bonus_end_at"]').length).toBeGreaterThan(0);
+    expect(editPage.find('input[name="base_exp"]').length).toBeGreaterThan(0);
+    expect(editPage.find('input[name="time_bonus_exp"]').length).toBeGreaterThan(0);
+  });
+
+  it('does not render the gamified fields', () => {
+    const editPage = mount(
+      <ProviderWrapper store={store}>
+        <AssessmentEdit
+          id={id}
+          gamified={false}
+          modeSwitching
+          initialValues={intitialValues}
+        />
+      </ProviderWrapper>
+    );
+
+    expect(editPage.find('input[name="bonus_end_at"]')).toHaveLength(0);
+    expect(editPage.find('input[name="base_exp"]')).toHaveLength(0);
+    expect(editPage.find('input[name="time_bonus_exp"]')).toHaveLength(0);
+  });
 });
diff --git a/client/app/bundles/course/assessment/pages/AssessmentEdit/index.jsx b/client/app/bundles/course/assessment/pages/AssessmentEdit/index.jsx
@@ -20,6 +20,8 @@ class EditPage extends React.Component {
   static propTypes = {
     dispatch: PropTypes.func.isRequired,
     intl: intlShape,
+    // If the gamification feature is enabled in the course.
+    gamified: PropTypes.bool,
     // If allow to switch between autoraded and manually graded mode.
     modeSwitching: PropTypes.bool,
     // An array of materials of current assessment.
@@ -53,13 +55,14 @@ class EditPage extends React.Component {
   };
 
   render() {
-    const { modeSwitching, initialValues, folderAttributes,
+    const { gamified, modeSwitching, initialValues, folderAttributes,
       conditionAttributes, dispatch } = this.props;
 
     return (
       <div>
         <AssessmentForm
           editing
+          gamified={gamified}
           onSubmit={this.onFormSubmit}
           modeSwitching={modeSwitching}
           folderAttributes={folderAttributes}

diff --git a/client/app/bundles/course/assessment/pages/AssessmentIndex/index.jsx b/client/app/bundles/course/assessment/pages/AssessmentIndex/index.jsx
@@ -28,6 +28,8 @@ class PopupDialog extends React.Component {
   static propTypes = {
     dispatch: PropTypes.func.isRequired,
     intl: intlShape,
+    // If the gamification feature is enabled in the course.
+    gamified: PropTypes.bool,
     categoryId: PropTypes.number.isRequired,
     tabId: PropTypes.number.isRequired,
     pristine: PropTypes.bool,
@@ -108,6 +110,7 @@ class PopupDialog extends React.Component {
           contentStyle={styles.dialog}
         >
           <AssessmentForm
+            gamified={this.props.gamified}
             modeSwitching
             onSubmit={this.onFormSubmit}
             initialValues={initialValues}