Merge pull request #80 from canada-ca/startover

Adding start over button

package.json

@@ -15,7 +15,9 @@
     "deploy": "npm run build; push-dir --dir=dist --branch=gh-pages --cleanup"
   },
   "dependencies": {
+    "@types/lodash.isempty": "^4.4.6",
     "@types/showdown": "^1.9.2",
+    "lodash.isempty": "^4.4.0",
     "push-dir": "^0.4.1",
     "register-service-worker": "^1.6.2",
     "showdown": "^1.9.0",

src/components/SaveLoadFile.vue → src/components/ActionButtonBar.vue

@@ -1,18 +1,33 @@
 <template>
   <div>
+    <ul class="list-inline lst-spaced">
+      <li>
+        <button
+          type="button"
+          class="mrgn-bttm-sm btn btn-success"
+          v-on:click="saveSurvey"
+          v-if="$store.getters.inProgress"
+        >
+          {{ $t("saveButton") }}
+        </button>
+      </li>
+      <li>
+        <input
+          type="file"
+          class="btn btn-default"
+          value="Load"
+          @change="onFileChanged($event)"
+        />
+      </li>
+    </ul>
     <button
       type="button"
-      class="mrgn-bttm-sm btn btn-success"
-      v-on:click="saveSurvey"
+      value="Start Over"
+      class="btn btn-default"
+      v-on:click="$emit('startAgain')"
     >
-      {{ $t("saveButton") }}
+      {{ $t("startAgain") }}
     </button>
-    <input
-      type="file"
-      class="btn btn-default"
-      value="Load"
-      @change="onFileChanged($event)"
-    />
   </div>
 </template>
 
@@ -23,7 +38,7 @@ import i18n from "@/plugins/i18n";
 import SurveyFile from "@/interfaces/SurveyFile";
 
 @Component
-export default class SaveLoadFile extends Vue {
+export default class ActionButtonBar extends Vue {
   saveSurvey() {
     const a = document.createElement("a");
     a.download = "SurveyResults.json";

src/plugins/en.json

@@ -1,4 +1,5 @@
 {
+    "startAgain": "Start Again",
     "swtchLang": "Français",
     "onThisPage": "On this page",
     "htmlCode": "en-CA",

src/plugins/fr.json

@@ -1,4 +1,5 @@
 {
+    "startAgain": "Recommencer",
     "swtchLang": "English",
     "onThisPage": "Sur cette page",
     "htmlCode": "fr-CA",

src/store.ts

@@ -3,6 +3,7 @@ import Vuex, { StoreOptions } from "vuex";
 import VuexPersistence from "vuex-persist";
 import { RootState } from "./types";
 import { IQuestion, QuestionSelectBase, SurveyModel } from "survey-vue";
+import isEmpty from "lodash.isempty";
 
 Vue.use(Vuex);
 
@@ -214,6 +215,9 @@ const store: StoreOptions<RootState> = {
     }
   },
   getters: {
+    inProgress: state => {
+      return !isEmpty(state.toolData);
+    },
     calcscore: state => {
       if (state.result === undefined) return [0, 0, 0];
       return calculateFinalScore(state.result, state.questionNames);

src/views/Home.vue

@@ -7,7 +7,10 @@
       }}</a>
     </p>
     <form>
-      <SaveLoadFile v-on:fileLoaded="fileLoaded($event)" />
+      <ActionButtonBar
+        v-on:fileLoaded="fileLoaded($event)"
+        v-on:startAgain="startAgain"
+      />
     </form>
     <AssessmentTool :survey="Survey" />
     <Score />
@@ -21,7 +24,7 @@ import showdown from "showdown";
 
 import AssessmentTool from "@/components/AssessmentTool.vue"; // @ is an alias to /src
 import Score from "@/components/Score.vue";
-import SaveLoadFile from "@/components/SaveLoadFile.vue";
+import ActionButtonBar from "@/components/ActionButtonBar.vue";
 import SurveyFile from "@/interfaces/SurveyFile";
 import i18n from "@/plugins/i18n";
 import { RootState } from "@/types";
@@ -30,13 +33,17 @@ import surveyJSON from "@/survey-enfr.json";
 @Component({
   components: {
     AssessmentTool,
-    SaveLoadFile,
+    ActionButtonBar,
     Score
   }
 })
 export default class Home extends Vue {
   Survey: Model = new Model(surveyJSON);
 
+  startAgain() {
+    this.Survey.clear(true, true);
+    window.localStorage.clear();
+  }
   fileLoaded($event: SurveyFile) {
     this.Survey.data = $event.data;
     this.Survey.currentPageNo = $event.currentPage;
@@ -102,13 +109,11 @@ export default class Home extends Vue {
       }
     });
 
-    //if answer data was found reload from local storage
-    const obj = this.$store.state.toolData;
-
-    if (!(Object.entries(obj).length === 0 && obj.constructor === Object)) {
+    //if survey is in progress reload from store
+    if (this.$store.getters.inProgress) {
       this.fileLoaded({
         currentPage: this.$store.state.currentPageNo,
-        data: obj
+        data: this.$store.state.toolData
       } as SurveyFile);
     }
   }