#384 move speed of outbreak to symptoms form component

ImisDevelopers · May 31, 2020 · 9e00e6e · 9e00e6e
1 parent 9ed0880
commit 9e00e6e
Show file tree

Hide file tree

Showing 3 changed files with 88 additions and 88 deletions.
diff --git a/client/src/components/form-groups/SymptomsForm.vue b/client/src/components/form-groups/SymptomsForm.vue
@@ -1,43 +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 }]"
-      @change="symptomsChanged"
+  <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-row>
-        <a-col
-          :key="symptom.value"
-          :span="symptom.value === 'LOSS_OF_SENSE_OF_SMELL_TASTE' ? 12 : 6"
-          v-for="symptom in SYMPTOMS"
+      <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
-        @change="showOtherSymptomsChanged"
-        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">
@@ -50,6 +78,7 @@ export interface State {
   symptoms: string[]
   symptomsOther: string
   showOtherSymptoms: boolean
+  showSpeedOfSymptoms: boolean
 }
 
 export default Vue.extend({
@@ -75,14 +104,31 @@ export default Vue.extend({
       symptoms: [],
       symptomsOther: '',
       showOtherSymptoms: false,
+      showSpeedOfSymptoms: false,
     }
   },
   methods: {
     symptomsChanged(symptoms: string[]) {
-      this.$emit('symptomsChanged', symptoms)
+      this.updateSymptomsForm(
+        symptoms,
+        this.form.getFieldValue('showOtherSymptoms')
+      )
     },
     showOtherSymptomsChanged() {
-      this.$emit('showOtherSymptomsChanged', this.showOtherSymptoms)
+      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,
+        })
+      }
     },
   },
 })

diff --git a/client/src/views/PublicRegister.vue b/client/src/views/PublicRegister.vue
@@ -130,7 +130,9 @@
                       align-self: stretch;
                     "
                   >
-                    <a-checkbox v-model="showOtherPreIllnesses">Andere:</a-checkbox>
+                    <a-checkbox v-model="showOtherPreIllnesses"
+                      >Andere:</a-checkbox
+                    >
                     <a-form-item style="flex: 1 1 100%; margin-bottom: 0;">
                       <a-input
                         :disabled="!showOtherPreIllnesses"

diff --git a/client/src/views/RegisterPatient.vue b/client/src/views/RegisterPatient.vue
@@ -65,33 +65,7 @@
 
           <!-- Symptoms -->
           <a-collapse-panel header="Symptome" key="3">
-            <SymptomsForm
-              :form="form"
-              @symptomsChanged="symptomsChanged"
-              @showOtherSymptomsChanged="showOtherSymptomsChanged"
-            />
-
-            <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"
-              >
-                <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>
+            <SymptomsForm :form="form" />
 
             <a-form-item
               class="no-double-colon-form-field"
@@ -254,28 +228,6 @@ export default Vue.extend({
           })
       })
     },
-    symptomsChanged(symptoms: string[]) {
-      this.updateSymptomsForm(
-        symptoms,
-        this.form.getFieldValue('showOtherSymptoms')
-      )
-    },
-    showOtherSymptomsChanged(hasOtherSymptoms: boolean) {
-      this.updateSymptomsForm(
-        this.form.getFieldValue('symptoms'),
-        hasOtherSymptoms
-      )
-    },
-    updateSymptomsForm(symptoms: string[], hasOtherSymptoms: boolean) {
-      if ((symptoms && symptoms.length > 0) || hasOtherSymptoms) {
-        this.showSpeedOfSymptoms = true
-      } else {
-        this.showSpeedOfSymptoms = false
-        this.form.setFieldsValue({
-          speedOfSymptomsOutbreak: undefined,
-        })
-      }
-    },
   },
 })
 </script>