Mission editing slang (#500)

* fix import for firefox

* increase abstraction

removed numberRange from textArea
Reduced save frequency of solutionTemplate

Author: gerhean

src/components/incubator/editingWorkspaceSideContent/GradingTab.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 
 import { IAssessment } from '../../assessment/assessmentShape';
+import { limitNumberRange } from './';
 import TextareaContent from './TextareaContent';
 
 interface IProps {
@@ -18,12 +19,13 @@ export class GradingTab extends React.Component<IProps, {}> {
     return this.gradingTab();
   }
 
-  private textareaContent = (path: Array<string | number>, isNumber: boolean = false) => {
+  private textareaContent = (path: Array<string | number>) => {
     return (
       <TextareaContent
         assessment={this.props.assessment}
-        isNumber={isNumber}
+        isNumber={true}
         path={path}
+        processResults={limitNumberRange(0)}
         updateAssessment={this.props.updateAssessment}
       />
     );
@@ -32,10 +34,10 @@ export class GradingTab extends React.Component<IProps, {}> {
   private gradingTab = () => (
     <div>
       Max Grade:
-      {this.textareaContent(this.props.path.concat(['maxGrade']), true)}
+      {this.textareaContent(this.props.path.concat(['maxGrade']))}
       <br />
       Max Xp:
-      {this.textareaContent(this.props.path.concat(['maxXp']), true)}
+      {this.textareaContent(this.props.path.concat(['maxXp']))}
     </div>
   );
 }

src/components/incubator/editingWorkspaceSideContent/QuestionTemplateTab.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import AceEditor from 'react-ace';
 
 import { IAssessment, IMCQQuestion } from '../../assessment/assessmentShape';
-import { assignToPath, getValueFromPath } from './';
+import { assignToPath, getValueFromPath, limitNumberRange } from './';
 import TextareaContent from './TextareaContent';
 
 interface IProps {
@@ -12,9 +12,18 @@ interface IProps {
   updateAssessment: (assessment: IAssessment) => void;
 }
 
-export class QuestionTemplateTab extends React.Component<IProps, {}> {
+interface IState {
+  templateValue: string;
+  templateFocused: boolean;
+}
+
+export class QuestionTemplateTab extends React.Component<IProps, IState> {
   public constructor(props: IProps) {
     super(props);
+    this.state = {
+      templateValue: '',
+      templateFocused: false
+    };
   }
 
   public render() {
@@ -34,30 +43,60 @@ export class QuestionTemplateTab extends React.Component<IProps, {}> {
     const path = ['questions', this.props.questionId, 'answer'];
 
     const handleTemplateChange = (newCode: string) => {
-      const assessmentVal = this.props.assessment;
-      assignToPath(path, newCode, assessmentVal);
-      this.props.updateAssessment(assessmentVal);
+      this.setState({
+        templateValue: newCode
+      });
     };
 
+    const value = this.state.templateFocused
+      ? this.state.templateValue
+      : getValueFromPath(path, this.props.assessment);
+
     const display = (
-      <AceEditor
-        className="react-ace"
-        editorProps={{
-          $blockScrolling: Infinity
-        }}
-        fontSize={14}
-        highlightActiveLine={false}
-        mode="javascript"
-        onChange={handleTemplateChange}
-        theme="cobalt"
-        value={getValueFromPath(path, this.props.assessment)}
-        width="100%"
-      />
+      <div onClick={this.focusEditor(path)} onBlur={this.unFocusEditor(path)}>
+        <AceEditor
+          className="react-ace"
+          editorProps={{
+            $blockScrolling: Infinity
+          }}
+          fontSize={14}
+          highlightActiveLine={false}
+          mode="javascript"
+          onChange={handleTemplateChange}
+          theme="cobalt"
+          value={value}
+          width="100%"
+        />
+      </div>
     );
 
     return display;
   };
 
+  private focusEditor = (path: Array<string | number>) => (e: any): void => {
+    if (!this.state.templateFocused) {
+      this.setState({
+        templateValue: getValueFromPath(path, this.props.assessment),
+        templateFocused: true
+      });
+    }
+  };
+
+  private unFocusEditor = (path: Array<string | number>) => (e: any): void => {
+    if (this.state.templateFocused) {
+      const value = getValueFromPath(path, this.props.assessment);
+      if (value !== this.state.templateValue) {
+        const assessmentVal = this.props.assessment;
+        assignToPath(path, this.state.templateValue, assessmentVal);
+        this.props.updateAssessment(assessmentVal);
+      }
+      this.setState({
+        templateValue: '',
+        templateFocused: false
+      });
+    }
+  };
+
   private mcqTab = () => {
     const questionId = this.props.questionId;
     const question = this.props.assessment!.questions[questionId] as IMCQQuestion;
@@ -87,17 +126,27 @@ export class QuestionTemplateTab extends React.Component<IProps, {}> {
   private textareaContent = (
     path: Array<string | number>,
     isNumber: boolean = false,
-    numberRange: number[] = [0]
+    range: number[] = [0]
   ) => {
-    return (
-      <TextareaContent
-        assessment={this.props.assessment}
-        isNumber={isNumber}
-        numberRange={numberRange}
-        path={path}
-        updateAssessment={this.props.updateAssessment}
-      />
-    );
+    if (isNumber) {
+      return (
+        <TextareaContent
+          assessment={this.props.assessment}
+          isNumber={true}
+          path={path}
+          processResults={limitNumberRange(range[0], range[1])}
+          updateAssessment={this.props.updateAssessment}
+        />
+      );
+    } else {
+      return (
+        <TextareaContent
+          assessment={this.props.assessment}
+          path={path}
+          updateAssessment={this.props.updateAssessment}
+        />
+      );
+    }
   };
 }
 

src/components/incubator/editingWorkspaceSideContent/TextareaContent.tsx

@@ -8,7 +8,6 @@ import { assignToPath, getValueFromPath } from './';
 interface IProps {
   assessment: IAssessment;
   isNumber?: boolean;
-  numberRange?: number[];
   path: Array<string | number>;
   useRawValue?: boolean;
   processResults?: (newVal: string | number) => string | number;
@@ -54,12 +53,9 @@ export class TextareaContent extends React.Component<IProps, IState> {
   private saveEditAssessment = (e: any) => {
     let fieldValue: number | string;
     if (this.state.isNumber) {
-      const range = this.props.numberRange || [0];
       fieldValue = parseInt(this.state.fieldValue, 10);
-      if (isNaN(fieldValue) || fieldValue < range[0]) {
-        fieldValue = range[0];
-      } else if (range.length > 1 && fieldValue > range[1]) {
-        fieldValue = range[1];
+      if (isNaN(fieldValue)) {
+        fieldValue = getValueFromPath(this.props.path, this.props.assessment);
       }
     } else {
       fieldValue = this.state.fieldValue;

src/components/incubator/editingWorkspaceSideContent/index.tsx

@@ -20,3 +20,17 @@ export const assignToPath = (path: Array<string | number>, value: any, obj: any)
   }
   obj[path[i]] = value;
 };
+
+export const limitNumberRange = (min: number | null = 0, max: number | null = null) => (
+  value: number
+): number => {
+  let result;
+  if (min !== null && value < min) {
+    result = min;
+  } else if (max !== null && value > max) {
+    result = max;
+  } else {
+    result = value;
+  }
+  return result;
+};