Mission editing slang (#505)

* Removed previous button on first question, added divider

* Yarn format

* Changeded help description

* fix import for firefox

* max width for globals

* symbols aligned

* increase abstraction

removed numberRange from textArea
Reduced save frequency of solutionTemplate

* manage questions give warning

* UI change for deployment tab

* fixed maxGrade and maxXP calculation

* added local/global switch

* adjust mcq options

* split question template tab

added suggested answer editing

* swap answer and solutionTemplate

internal change

* add reading

* add grading deployment

* clone question shift question added

* fixed symbol formating

* changed manage questions ui

* yarn format

* added more overview options

* add editing persist

* Update ManageQuestionTab.tsx

Author: gerhean

src/components/assessment/assessmentShape.ts

@@ -10,6 +10,7 @@ export interface IAssessmentOverview {
   category: AssessmentCategory;
   closeAt: string;
   coverImage: string;
+  fileName?: string;
   grade: number;
   id: number;
   maxGrade: number;

src/components/incubator/EditingOverviewCard.tsx

@@ -1,5 +1,17 @@
-import { Button, Card, Elevation, Icon, IconName, Intent, Text } from '@blueprintjs/core';
+import {
+  Button,
+  Card,
+  Classes,
+  Dialog,
+  Elevation,
+  Icon,
+  IconName,
+  Intent,
+  MenuItem,
+  Text
+} from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
+import { ItemRenderer, Select } from '@blueprintjs/select';
 import * as React from 'react';
 import { NavLink } from 'react-router-dom';
 import Textarea from 'react-textarea-autosize';
@@ -9,7 +21,11 @@ import { getPrettyDate } from '../../utils/dateHelpers';
 import { assessmentCategoryLink } from '../../utils/paramParseHelpers';
 import { exportXml } from '../../utils/xmlParser';
 
-import { IAssessmentOverview } from '../assessment/assessmentShape';
+import {
+  AssessmentCategories,
+  AssessmentCategory,
+  IAssessmentOverview
+} from '../assessment/assessmentShape';
 import { controlButton } from '../commons';
 import Markdown from '../commons/Markdown';
 
@@ -24,19 +40,26 @@ type Props = {
 interface IState {
   editingOverviewField: string;
   fieldValue: any;
+  showOptionsOverlay: boolean;
 }
 
 export class EditingOverviewCard extends React.Component<Props, IState> {
   public constructor(props: Props) {
     super(props);
     this.state = {
       editingOverviewField: '',
-      fieldValue: ''
+      fieldValue: '',
+      showOptionsOverlay: false
     };
   }
 
   public render() {
-    return <div>{this.makeEditingOverviewCard(this.props.overview)}</div>;
+    return (
+      <div>
+        {this.optionsOverlay()}
+        {this.makeEditingOverviewCard(this.props.overview)}
+      </div>
+    );
   }
 
   private saveEditOverview = (field: keyof IAssessmentOverview) => (e: any) => {
@@ -67,7 +90,13 @@ export class EditingOverviewCard extends React.Component<Props, IState> {
     }
   };
 
-  private handleExportXml = () => (e: any) => {
+  private toggleOptionsOverlay = () => {
+    this.setState({
+      showOptionsOverlay: !this.state.showOptionsOverlay
+    });
+  };
+
+  private handleExportXml = (e: any) => {
     exportXml();
   };
 
@@ -127,6 +156,7 @@ export class EditingOverviewCard extends React.Component<Props, IState> {
                   : `${getPrettyDate(overview.closeAt)}`}
               </div>
             </Text>
+            {this.makeOptionsButton()}
             {makeOverviewCardButton(overview, this.props.listingPath)}
           </div>
         </div>
@@ -149,22 +179,66 @@ export class EditingOverviewCard extends React.Component<Props, IState> {
 
   private makeExportButton = (overview: IAssessmentOverview) => (
     <Button
-      // disabled={overview.status !== AssessmentStatuses.attempted}
       icon={IconNames.EXPORT}
       intent={Intent.DANGER}
       minimal={true}
       // intentional: each menu renders own version of onClick
       // tslint:disable-next-line:jsx-no-lambda
-      onClick={this.handleExportXml()}
+      onClick={this.handleExportXml}
     >
       Export XML
     </Button>
   );
+
+  private makeOptionsButton = () => (
+    <Button icon={IconNames.WRENCH} minimal={true} onClick={this.toggleOptionsOverlay}>
+      Other Options
+    </Button>
+  );
+
+  private saveCategory = (i: AssessmentCategory, e: any) => {
+    const overview = {
+      ...this.props.overview,
+      category: i
+    };
+    localStorage.setItem('MissionEditingOverviewSA', JSON.stringify(overview));
+    this.props.updateEditingOverview(overview);
+  };
+
+  private optionsOverlay = () => (
+    <Dialog
+      canOutsideClickClose={false}
+      className="assessment-reset"
+      icon={IconNames.WRENCH}
+      isCloseButtonShown={true}
+      isOpen={this.state.showOptionsOverlay}
+      onClose={this.toggleOptionsOverlay}
+      title="Other options"
+    >
+      <div className={Classes.DIALOG_BODY}>
+        <h3>Category</h3>
+        {categorySelect(this.props.overview.category, this.saveCategory)}
+        <h3>Story</h3>
+        <div onClick={this.toggleEditField('story')}>
+          {this.state.editingOverviewField === 'story'
+            ? this.makeEditingOverviewTextarea('story')
+            : createPlaceholder(this.props.overview.story || '')}
+        </div>
+        <br />
+        <h3>Filename</h3>
+        <div onClick={this.toggleEditField('fileName')}>
+          {this.state.editingOverviewField === 'fileName'
+            ? this.makeEditingOverviewTextarea('fileName')
+            : createPlaceholder(this.props.overview.fileName || '')}
+        </div>
+      </div>
+    </Dialog>
+  );
 }
 
 const createPlaceholder = (str: string): string => {
   if (str.match('^(\n| )*$')) {
-    return 'Enter Value Here.';
+    return 'Enter Value Here (If Applicable)';
   } else {
     return str;
   }
@@ -180,3 +254,32 @@ const makeOverviewCardButton = (overview: IAssessmentOverview, listingPath: stri
     </NavLink>
   );
 };
+
+const assessmentCategoriesArr = [
+  AssessmentCategories.Mission,
+  AssessmentCategories.Path,
+  AssessmentCategories.Sidequest,
+  AssessmentCategories.Contest
+];
+
+const categorySelect = (
+  category: AssessmentCategory,
+  handleSelect = (i: AssessmentCategory, e: React.ChangeEvent<HTMLSelectElement>) => {}
+) => (
+  <CategorySelectComponent
+    className="pt-minimal"
+    items={assessmentCategoriesArr}
+    onItemSelect={handleSelect}
+    itemRenderer={categoryRenderer}
+    filterable={false}
+  >
+    <Button className="pt-minimal" text={category} rightIcon="double-caret-vertical" />
+  </CategorySelectComponent>
+);
+
+const CategorySelectComponent = Select.ofType<AssessmentCategory>();
+
+const categoryRenderer: ItemRenderer<AssessmentCategory> = (
+  category,
+  { handleClick, modifiers, query }
+) => <MenuItem active={false} key={category} onClick={handleClick} text={category} />;

src/components/incubator/EditingWorkspace.tsx

@@ -81,6 +81,7 @@ interface IState {
   assessment: IAssessment | null;
   activeTab: number;
   editingMode: string;
+  editorPersist: boolean;
   hasUnsavedChanges: boolean;
   showResetOverlay: boolean;
   originalMaxGrade: number;
@@ -94,6 +95,7 @@ class AssessmentWorkspace extends React.Component<AssessmentWorkspaceProps, ISta
       assessment: retrieveLocalAssessment(),
       activeTab: 0,
       editingMode: 'question',
+      editorPersist: false,
       hasUnsavedChanges: false,
       showResetOverlay: false,
       originalMaxGrade: 0,
@@ -142,7 +144,8 @@ class AssessmentWorkspace extends React.Component<AssessmentWorkspaceProps, ISta
       editorProps:
         question.type === QuestionTypes.programming
           ? {
-              editorValue: this.props.editorValue || (question.answer as string),
+              editorValue:
+                this.props.editorValue || (question as IProgrammingQuestion).solutionTemplate,
               handleEditorEval: this.props.handleEditorEval,
               handleEditorValueChange: this.props.handleEditorValueChange,
               handleUpdateHasUnsavedChanges: this.props.handleUpdateHasUnsavedChanges
@@ -251,10 +254,10 @@ class AssessmentWorkspace extends React.Component<AssessmentWorkspaceProps, ISta
           ? (question as IProgrammingQuestion).solutionTemplate || ''
           : null;
       this.props.handleUpdateCurrentAssessmentId(assessmentId, questionId);
-      this.props.handleResetWorkspace({ editorValue });
       this.handleRefreshLibrary();
       this.props.handleUpdateHasUnsavedChanges(false);
-      if (editorValue) {
+      if (editorValue && !this.state.editorPersist) {
+        this.props.handleResetWorkspace({ editorValue });
         this.props.handleEditorValueChange(editorValue);
       }
       if (this.state.hasUnsavedChanges) {
@@ -289,12 +292,14 @@ class AssessmentWorkspace extends React.Component<AssessmentWorkspaceProps, ISta
   };
 
   private resetEditorValue = () => {
-    const question: IQuestion = this.state.assessment!.questions[this.formatedQuestionId()];
-    const editorValue =
-      question.type === QuestionTypes.programming
-        ? ((question as IProgrammingQuestion).solutionTemplate as string)
-        : '//If you see this, this is a bug. Please report bug.';
-    this.props.handleEditorValueChange(editorValue);
+    if (!this.state.editorPersist) {
+      const question: IQuestion = this.state.assessment!.questions[this.formatedQuestionId()];
+      const editorValue =
+        question.type === QuestionTypes.programming
+          ? ((question as IProgrammingQuestion).solutionTemplate as string)
+          : '//If you see this, this is a bug. Please report bug.';
+      this.props.handleEditorValueChange(editorValue);
+    }
   };
 
   private handleSave = () => {
@@ -366,6 +371,12 @@ class AssessmentWorkspace extends React.Component<AssessmentWorkspaceProps, ISta
     });
   };
 
+  private toggleEditorPersist = () => {
+    this.setState({
+      editorPersist: !this.state.editorPersist
+    });
+  };
+
   /** Pre-condition: IAssessment has been loaded */
   private sideContentProps: (p: AssessmentWorkspaceProps, q: number) => SideContentProps = (
     props: AssessmentWorkspaceProps,
@@ -550,7 +561,9 @@ class AssessmentWorkspace extends React.Component<AssessmentWorkspaceProps, ISta
       questionProgress: [questionId + 1, this.state.assessment!.questions.length],
       sourceChapter: this.state.assessment!.questions[questionId].library.chapter,
       editingMode: this.state.editingMode,
-      toggleEditMode: this.toggleEditingMode
+      toggleEditMode: this.toggleEditingMode,
+      isEditorPersist: this.state.editorPersist,
+      handleToggleEditorPersist: this.toggleEditorPersist
     };
   };
 }

src/components/incubator/ImportFromFileComponent.tsx

@@ -51,14 +51,15 @@ export class ImportFromFileComponent extends React.Component<Props, State> {
     );
   }
 
-  private handleFileRead = (e: any) => {
+  private handleFileRead = (file: any) => (e: any) => {
     const content = this.fileReader.result;
     if (content) {
       parseString(content, (err: any, result: any) => {
         // tslint:disable-next-line:no-console
-        // console.dir(result);
+        console.dir(file);
         try {
           const entireAssessment: [IAssessmentOverview, IAssessment] = makeEntireAssessment(result);
+          entireAssessment[0].fileName = file.name.slice(0, -4);
           localStorage.setItem('MissionEditingOverviewSA', JSON.stringify(entireAssessment[0]));
           this.props.updateEditingOverview(entireAssessment[0]);
 
@@ -82,15 +83,14 @@ export class ImportFromFileComponent extends React.Component<Props, State> {
     const files = e.target.files;
     if (e.target.files) {
       this.fileReader = new FileReader();
-      this.fileReader.onloadend = this.handleFileRead;
+      this.fileReader.onloadend = this.handleFileRead(files[0]);
       this.fileReader.readAsText(files[0]);
     }
   };
 
   private makeMission = () => {
     localStorage.setItem('MissionEditingOverviewSA', JSON.stringify(overviewTemplate()));
     this.props.updateEditingOverview(overviewTemplate());
-
     localStorage.setItem('MissionEditingAssessmentSA', JSON.stringify(assessmentTemplate()));
     this.props.newAssessment(assessmentTemplate());
   };

src/components/incubator/editingWorkspaceSideContent/DeploymentTab.tsx

@@ -264,6 +264,10 @@ const removeSpaces = (str: string) => {
   return str.replace(/\s+/g, '');
 };
 
+const altEval = (str: string): any => {
+  return Function('"use strict";return (' + str + ')')();
+};
+
 function styliseChapter(chap: number) {
   return `Source \xa7${chap}`;
 }
@@ -289,10 +293,6 @@ const chapterSelect = (
   </ChapterSelectComponent>
 );
 
-const altEval = (str: string): any => {
-  return Function('"use strict";return (' + str + ')')();
-};
-
 const ChapterSelectComponent = Select.ofType<IChapter>();
 
 const chapterRenderer: ItemRenderer<IChapter> = (chap, { handleClick, modifiers, query }) => (