Merge pull request #503 from uw-it-aca/task/calculator-rows

calculator progress

course_grader_vue/components/convert/calculator-row.vue

@@ -1,13 +1,14 @@
 <template>
   <fieldset>
     <legend class="visually-hidden">{{ gettext("calculator_legend") }}</legend>
-    <span class="col-xs-4 gp-calc-percentage">
+    <span class="col-xs-4">
       <input
         type="text"
         :id="`calculator-percentage-${index}`"
         name="calculator-percentage"
         :value="percentage"
-        class="form-control gp-calc-input-percentage"
+        class="form-control"
+        @change="percentageChanged($event.target.value)"
         required />
       <label for="`calculator-percentage-${index}`">
         <span v-if="last" class="visually-hidden">
@@ -19,18 +20,19 @@
          <span v-else class="visually-hidden">
           {{ gettext("calculator_perc_label") }}
          </span>
-        <span class="pull-left gp-calc-err"></span>
+        <span class="pull-left">{{ percentageError }}</span>
       </label>
     </span>
     <span aria-hidden="true">&percnt;</span>
     <span aria-hidden="true">&equals;</span>
-    <span class="col-xs-4 gp-calc-grade">
+    <span class="col-xs-4">
       <input
         type="text"
         :id="`calculator-grade-${index}`"
         name="calculator-grade"
         :value="grade"
-        class="form-control gp-calc-input"
+        class="form-control"
+        @change="gradeChanged($event.target.value)"
         required />
        <label for="`calculator-grade-${index}`">
         <span v-if="last" class="visually-hidden">
@@ -42,20 +44,22 @@
         <span v-else class="visually-hidden">
           {{ gettext("calculator_grade_label") }}
         </span>
-        <span class="pull-right gp-calc-err"></span>
+        <span class="pull-right">{{ gradeError }}</span>
       </label>
     </span>
   </fieldset>
 </template>
 
 <script>
+import { useCalculatorStore } from "@/stores/calculator";
+
 export default {
   props: {
-    percentage: {
+    defaultPercentage: {
       type: String,
       default: "",
     },
-    grade: {
+    defaultGrade: {
       type: String,
       required: true,
     },
@@ -72,5 +76,32 @@ export default {
       required: true,
     },
   },
+  setup() {
+    const calculatorStore = useCalculatorStore();
+    return {
+      calculatorStore,
+    };
+  },
+  data() {
+    return {
+      percentage: "",
+      grade: "",
+      percentageError: "",
+      gradeError: "",
+    };
+  },
+  methods: {
+    percentageChanged: function (percentage) {
+    },
+    gradeChanged: function (grade) {
+    },
+    initialize: function () {
+      this.percentage = this.defaultPercentage;
+      this.grade = this.defaultGrade;
+    },
+  },
+  created() {
+    this.initialize();
+  }
 };
 </script>

course_grader_vue/components/convert/calculator.vue

@@ -4,22 +4,29 @@
     <label for="import_scale_selector" class="visually-hidden">
       {{ gettext("conversion_scale_chooser_label") }}
     </label>
-    <select v-model="selectedScale" id="import_scale_selector">
-      <option v-for="scale in availableScales" :value="scale">
+    <select
+      id="import_scale_selector"
+      @change="updateGradingScale($event.target.value)"
+    >
+      <option
+        v-for="scale in availableScales"
+        :value="scale"
+        :selected="scale === selectedScale"
+      >
         {{ gettext("conversion_scale_" + scale) }}
       </option>
     </select>
   </div>
 
-  <div v-if="!fixedScale">
+  <div v-if="!isFixedScale">
     <div class="clearfix">
        <h4 class="visually-hidden" id="grade_conversion_header">{{ gettext("calculator_header") }}</h4>
        <span class="visually-hidden">{{ gettext("calculator_instructions") }}</span>
        <strong class="pull-left" aria-hidden="true">{{ gettext("calculator_perc_label_vis") }}</strong>
        <strong class="pull-right" aria-hidden="true">{{ gettext("calculator_grade_label") }}</strong>
     </div>
     <ol>
-      <li v-for="(grade, index) in calculatorValues">
+      <li v-for="(data, index) in calculatorValues">
         <div v-if="index === calculatorValues.length - 1">
           <BLink
             @click.prevent="addCalculatorRow"
@@ -33,8 +40,8 @@
           </span>
         </div>
         <CalculatorRow
-          percentage=""
-          :grade="grade"
+          :default-percentage="data.percentage"
+          :default-grade="data.grade"
           :first="index === 0"
           :last="index === calculatorValues.length - 1"
           :index="index"
@@ -45,7 +52,7 @@
       <span>
         <BButton
           :title="gettext('calculator_reset_title')"
-          @click="resetCalculator"
+          @click.prevent="resetCalculator()"
         >{{ gettext("reset") }}</BButton>
       </span>
       <span>
@@ -59,34 +66,36 @@
     </div>
   </div>
 
-  <div v-if="fixedScale">
+  <div v-if="isFixedScale">
     <span>{{ gettext("calculator_min_" + selectedScale) }}</span>
   </div>
+
   <div id="conversion_grade_scale_container" aria-labelledby="grade_scale_header">
     <h4 class="visually-hidden" id="grade_scale_header">{{ gettext("grade_scale_header") }}</h4>
     <div class="clearfix">
       <strong class="pull-left" aria-hidden="true">{{ gettext("grade_scale_grade_label_vis") }}</strong>
       <strong class="pull-right" aria-hidden="true">{{ gettext("calculator_grade_label") }}</strong>
     </div>
     <ol :aria-label="gettext('grade_scale_list_label_sr')">
-      <li v-for="(grade, index) in scales[selectedScale]">
+      <li v-for="(data, index) in scaleValues">
         <GradeScaleRow
-          min-percentage=""
-          :grade="grade"
-          :last="index === scales[selectedScale].length - 1"
+          :default-percentage="data.minPercentage"
+          :grade="data.grade"
+          :last="index === scaleValues.length - 1"
           :index="index"
         />
       </li>
     </ol>
     <span>
       <BButton
-        @click="resetGradeScale"
+        @click.prevent="resetGradeScale"
       >{{ gettext("grade_scale_clear") }}</BButton>
     </span>
   </div>
 </template>
 
 <script>
+import { useCalculatorStore } from "@/stores/calculator";
 import CalculatorRow from "@/components/convert/calculator-row.vue";
 import GradeScaleRow from "@/components/convert/grade-scale-row.vue";
 import { BButton } from "bootstrap-vue-next";
@@ -97,91 +106,45 @@ export default {
     GradeScaleRow,
     BButton,
   },
-  props: {
-    defaultScale: {
-      type: String,
-      required: true,
-    },
-    defaultScaleValues: {
-      type: Array,
-      default: [],
-    },
-    defaultCalculatorValues: {
-      type: Array,
-      default: [],
-    },
-  },
-  data() {
+  setup() {
+    const calculatorStore = useCalculatorStore();
     return {
-      availableScales: ["ug", "gr", "cnc", "pf", "hpf"],
-      scales: {
-        "ug": [],
-        "gr": [],
-        "cnc": ["CR", "NC"],
-        "pf": ["P", "F"],
-        "hpf": ["H", "HP", "P", "F"],
-      },
-      defaultScales: {
-        "ug": ["4.0", "0.7"],
-        "gr": ["4.0", "1.7"],
-      },
-      selectedScale: this.defaultScale,
-      calculatorValues: [],
-      scaleValues: [],
+      calculatorStore,
     };
   },
   computed: {
-    fixedScale() {
-      return (this.selectedScale === "cnc" ||
-              this.selectedScale === "hpf" ||
-              this.selectedScale === "pf") ? true : false;
+    selectedScale() {
+      return this.calculatorStore.selectedScale;
+    },
+    availableScales() {
+      return this.calculatorStore.availableScales;
+    },
+    calculatorValues() {
+      return this.calculatorStore.calculatorValues;
+    },
+    scaleValues() {
+      return this.calculatorStore.scaleValues;
+    },
+    isFixedScale() {
+      return this.calculatorStore.isFixedScale;
     },
   },
   methods: {
-    changeGradingScale: function () {
-      this.scaleValues = this.scales[this.selectedScale];
-    },
     addCalculatorRow: function () {
-      this.calculatorValues.splice(-1, 0, "");
+      this.calculatorStore.addCalculatorRow();
     },
     resetCalculator: function () {
+      this.calculatorStore.resetCalculatorValues();
     },
     resetGradeScale: function () {
+      this.calculatorStore.resetScaleValues();
     },
-    applyConversion: function () {
-    },
-    initScales: function () {
-      var i, value;
-
-      this.scales.ug = [];
-      this.scales.gr = [];
-
-      for (i = 40; i >= 7; i--) {
-        value = i / 10;
-        if (value === parseInt(value, 10)) {
-          value = value + ".0";
-        }
-        this.scales.ug.push(value.toString());
-        if (value >= 1.7) {
-          this.scales.gr.push(value.toString());
-        }
-      }
-      this.scales.ug.push("0.0");
-      this.scales.gr.push("0.0");
+    updateGradingScale: function (scale) {
+      this.calculatorStore.setScale(scale);
     },
-    initCalculator: function () {
-      this.initScales();
-      this.scaleValues = this.defaultScaleValues || this.scales[this.selectedScale];
-      if (!this.fixedScale) {
-        this.calculatorValues = this.defaultCalculatorValues.length
-          ? this.defaultCalculatorValues
-          : this.defaultScales[this.selectedScale];
-      }
+    applyConversion: function () {
     },
   },
-  created() {
-    this.initCalculator();
-  },
 };
 </script>