refactor: Update height input validation in App.vue

halbritter-lab · Sep 8, 2024 · 5c28466 · 5c28466
1 parent a4b2a57
commit 5c28466
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 10 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -6,6 +6,13 @@
         <span class="version">v0.1.0</span>
       </v-toolbar-title>
       <v-spacer></v-spacer>
+
+      <!-- Reset Button -->
+      <v-btn icon @click="resetForm">
+        <v-icon>mdi-refresh</v-icon>
+      </v-btn>
+
+      <!-- Theme Toggle Button -->
       <v-btn icon @click="toggleTheme">
         <v-icon>{{ isDark ? 'mdi-weather-night' : 'mdi-white-balance-sunny' }}</v-icon>
       </v-btn>
@@ -34,7 +41,7 @@
                     <v-text-field v-model="age" label="Age" type="number" :min="20" :max="80" required dense outlined density="compact" />
                   </v-col>
                   <v-col cols="12" sm="2" md="2">
-                    <v-text-field v-model="height" label="Height (m)" type="number" :min="1.4" :max="2.4" step="0.01" min="1" required dense outlined density="compact" />
+                    <v-text-field v-model="height" label="Height (m)" type="number" step="0.01" min="1.4" :max="2.4" required dense outlined density="compact" />
                   </v-col>
                   <v-col cols="12" sm="2" md="2">
                     <v-select v-model="sex" :items="['Male', 'Female']" label="Sex" required dense outlined density="compact" />
@@ -258,6 +265,37 @@ export default {
       this.errorMessage = null; // Clear error message if valid
       return true;
     },
+    resetForm() {
+      // Reset all form fields to their initial state
+      this.patientId = null;
+      this.age = null;
+      this.height = null;
+      this.sex = null;
+      this.familyHistory = null;
+      this.ethnicity = null;
+      this.kidneyVolume = null;
+      this.inputMethod = 'Stereology Method';
+      this.kidneyRight = {
+        sagittal: null,
+        coronal: null,
+        width: null,
+        depth: null,
+      };
+      this.kidneyLeft = {
+        sagittal: null,
+        coronal: null,
+        width: null,
+        depth: null,
+      };
+      this.mutationClass = null;
+      this.hypertension = false;
+      this.firstUrologicalEvent = false;
+      this.mayoScore = 1;
+      this.propkdScore = 0;
+      this.chartData.datasets[0].data = [];
+      this.errorMessage = null;
+      this.selectedTab = 'mayoPropkd'; // Reset to the first tab
+    },
     calculateHtTKV() {
       if (!this.validateStep1()) {
         return;

diff --git a/src/components/MayoVsPROPKDChart.vue b/src/components/MayoVsPROPKDChart.vue
@@ -44,7 +44,6 @@ export default {
 
     // Mapping Mayo and PROPKD scores to risk categories
     const mayoToRisk = (mayoScore) => {
-      console.log('Converting Mayo Score:', mayoScore); // Debug
       if (typeof mayoScore !== 'number' || mayoScore < 1 || mayoScore > 5) {
         console.warn('Invalid Mayo Score:', mayoScore);
         mayoScore = 1; // Default to low risk if invalid
@@ -55,7 +54,6 @@ export default {
     };
 
     const propkdToRisk = (propkdScore) => {
-      console.log('Converting PROPKD Score:', propkdScore); // Debug
       if (typeof propkdScore !== 'number' || propkdScore < 0 || propkdScore > 9) {
         console.warn('Invalid PROPKD Score:', propkdScore);
         propkdScore = 0; // Default to low risk if invalid
@@ -73,13 +71,9 @@ export default {
       }
       const ctx = canvas.value.getContext('2d');
 
-      console.log('Mayo Score:', props.mayoScore, 'PROPKD Score:', props.propkdScore); // Debug
-
       const mayoRisk = mayoToRisk(props.mayoScore);
       const propkdRisk = propkdToRisk(props.propkdScore);
 
-      console.log('Mayo Risk:', mayoRisk, 'PROPKD Risk:', propkdRisk); // Debug
-
       const getPatientCoords = (mayoRisk, propkdRisk) => {
         const xMap = { low: 1, intermediate: 2, high: 3 };
         const yMap = { low: 1, intermediate: 2, high: 3 };
@@ -88,8 +82,6 @@ export default {
 
       const patientCoords = getPatientCoords(mayoRisk, propkdRisk);
 
-      console.log('Patient Coordinates:', patientCoords); // Debug
-
       const backgroundPlugin = {
         id: 'backgroundPlugin',
         beforeDraw: (chart) => {
@@ -190,7 +182,6 @@ export default {
     watch(
       () => [props.mayoScore, props.propkdScore],
       () => {
-        console.log('Props changed:', { mayoScore: props.mayoScore, propkdScore: props.propkdScore }); // Debug
         createChart();
       }
     );