Merge pull request #451 from ImisDevelopers/feature/384-beschwerde-ab…

…haengigkeit #384 dynamically disable speed of symptoms
ImisDevelopers · May 31, 2020 · 3ac09c6 · 3ac09c6
2 parents e6efd6a + 9e00e6e
commit 3ac09c6
Show file tree

Hide file tree

Showing 2 changed files with 94 additions and 49 deletions.
diff --git a/client/src/components/form-groups/SymptomsForm.vue b/client/src/components/form-groups/SymptomsForm.vue
@@ -1,39 +1,71 @@
 <template>
-  <a-form-item
-    class="no-double-colon-form-field"
-    :label="'Welche Symptome weist der Patient/die Patientin auf?'"
-    :labelCol="{ div: 24 }"
-    :wrapperCol="{ div: 24 }"
-  >
-    <a-checkbox-group v-decorator="['symptoms', { initialValue: symptoms }]">
-      <a-row>
-        <a-col
-          :key="symptom.value"
-          :span="symptom.value === 'LOSS_OF_SENSE_OF_SMELL_TASTE' ? 12 : 6"
-          v-for="symptom in SYMPTOMS"
+  <div>
+    <a-form-item
+      class="no-double-colon-form-field"
+      :label="'Welche Symptome weist der Patient/die Patientin auf?'"
+      :labelCol="{ div: 24 }"
+      :wrapperCol="{ div: 24 }"
+    >
+      <a-checkbox-group
+        v-decorator="['symptoms', { initialValue: symptoms }]"
+        @change="symptomsChanged"
+      >
+        <a-row>
+          <a-col
+            :key="symptom.value"
+            :span="symptom.value === 'LOSS_OF_SENSE_OF_SMELL_TASTE' ? 12 : 6"
+            v-for="symptom in SYMPTOMS"
+          >
+            <a-checkbox :value="symptom.value">
+              {{ symptom.label }}
+            </a-checkbox>
+          </a-col>
+        </a-row>
+      </a-checkbox-group>
+      <div style="display: flex; align-items: center; align-self: stretch;">
+        <a-checkbox
+          @change="showOtherSymptomsChanged"
+          v-model="showOtherSymptoms"
+          v-decorator="[
+            'showOtherSymptoms',
+            { initialValue: showOtherSymptoms },
+          ]"
+          style="flex: 0 0 auto;"
+        >
+          Andere:
+        </a-checkbox>
+        <a-form-item
+          style="flex: 1 1 100%; margin-bottom: 0; max-width: 600px;"
         >
-          <a-checkbox :value="symptom.value">
-            {{ symptom.label }}
-          </a-checkbox>
-        </a-col>
-      </a-row>
-    </a-checkbox-group>
-    <div style="display: flex; align-items: center; align-self: stretch;">
-      <a-checkbox
-        v-model="showOtherSymptoms"
-        v-decorator="['showOtherSymptoms', { initialValue: showOtherSymptoms }]"
-        style="flex: 0 0 auto;"
+          <a-input
+            :disabled="!showOtherSymptoms"
+            v-decorator="['symptomsOther', { initialValue: symptomsOther }]"
+          />
+        </a-form-item>
+      </div>
+    </a-form-item>
+    <a-form-item
+      :labelCol="{ div: 24 }"
+      :wrapperCol="{ div: 24 }"
+      class="no-double-colon-form-field"
+      label="Wie schnell sind die Beschwerden aufgetreten?"
+    >
+      <a-radio-group
+        v-decorator="['speedOfSymptomsOutbreak']"
+        :disabled="!showSpeedOfSymptoms"
       >
-        Andere:
-      </a-checkbox>
-      <a-form-item style="flex: 1 1 100%; margin-bottom: 0; max-width: 600px;">
-        <a-input
-          :disabled="!showOtherSymptoms"
-          v-decorator="['symptomsOther', { initialValue: symptomsOther }]"
-        />
-      </a-form-item>
-    </div>
-  </a-form-item>
+        <a-radio value="suddenly">
+          Plötzlich, innerhalb von einem Tag
+        </a-radio>
+        <a-radio value="slow">
+          Langsam, innerhalb von mehreren Tagen
+        </a-radio>
+        <a-radio value="unknown">
+          Nicht bekannt
+        </a-radio>
+      </a-radio-group>
+    </a-form-item>
+  </div>
 </template>
 
 <script lang="ts">
@@ -46,6 +78,7 @@ export interface State {
   symptoms: string[]
   symptomsOther: string
   showOtherSymptoms: boolean
+  showSpeedOfSymptoms: boolean
 }
 
 export default Vue.extend({
@@ -71,8 +104,33 @@ export default Vue.extend({
       symptoms: [],
       symptomsOther: '',
       showOtherSymptoms: false,
+      showSpeedOfSymptoms: false,
     }
   },
+  methods: {
+    symptomsChanged(symptoms: string[]) {
+      this.updateSymptomsForm(
+        symptoms,
+        this.form.getFieldValue('showOtherSymptoms')
+      )
+    },
+    showOtherSymptomsChanged() {
+      this.updateSymptomsForm(
+        this.form.getFieldValue('symptoms'),
+        this.showOtherSymptoms
+      )
+    },
+    updateSymptomsForm(symptoms: string[], hasOtherSymptoms: boolean) {
+      if ((symptoms && symptoms.length > 0) || hasOtherSymptoms) {
+        this.showSpeedOfSymptoms = true
+      } else {
+        this.showSpeedOfSymptoms = false
+        this.form.setFieldsValue({
+          speedOfSymptomsOutbreak: undefined,
+        })
+      }
+    },
+  },
 })
 </script>
 

diff --git a/client/src/views/RegisterPatient.vue b/client/src/views/RegisterPatient.vue
@@ -67,22 +67,6 @@
           <a-collapse-panel header="Symptome" key="3">
             <SymptomsForm :form="form" />
 
-            <a-form-item
-              :labelCol="{ div: 24 }"
-              :wrapperCol="{ div: 24 }"
-              class="no-double-colon-form-field"
-              label="Wie schnell sind die Beschwerden aufgetreten?"
-            >
-              <a-radio-group v-decorator="['speedOfSymptomsOutbreak']">
-                <a-radio value="suddenly">
-                  Plötzlich, innerhalb von einem Tag
-                </a-radio>
-                <a-radio value="slow">
-                  Langsam, innerhalb von mehreren Tagen
-                </a-radio>
-              </a-radio-group>
-            </a-form-item>
-
             <a-form-item
               class="no-double-colon-form-field"
               :label="'Hat der Patient/die Patientin für diese Saison eine Influenza-Impfung erhalten?'"
@@ -92,6 +76,7 @@
               <a-radio-group v-decorator="['fluImmunization']">
                 <a-radio value="true">Ja</a-radio>
                 <a-radio value="false">Nein</a-radio>
+                <a-radio value="">Nicht bekannt</a-radio>
               </a-radio-group>
             </a-form-item>
           </a-collapse-panel>
@@ -140,6 +125,7 @@ import IllnessStatusForm from '@/components/form-groups/IllnessStatusForm.vue'
 interface State {
   form: any
   createdPatient: Patient | null
+  showSpeedOfSymptoms: boolean
 }
 
 export default Vue.extend({
@@ -155,6 +141,7 @@ export default Vue.extend({
     return {
       form: this.$form.createForm(this, { name: 'coordinated' }),
       createdPatient: null,
+      showSpeedOfSymptoms: false,
     }
   },
   methods: {