Pick list for indications 🎉

Signed-off-by: JP Lomas <[email protected]>

frontend/index.html

@@ -35,6 +35,7 @@ <h1>NELA API</h1>
               v-slot="{ field }"
               @keyup="result = null;"
               @keypress="isNumber($event, field.type)"
+              @change="result = null"
               :type="(field.type === 'integer' || field.type === 'number') ? 'number' : field.type"
               :rules="validationRule(field)"
               :name="camelCase(field.name)"
@@ -55,6 +56,7 @@ <h1>NELA API</h1>
               id="button-addon"
               data-bs-target="#setIndications"
               data-bs-toggle="modal"
+              @click="result = null"
             >
               Set
             </button>
@@ -75,15 +77,29 @@ <h5 class="modal-title" id="setIndicationsModalTitle">Set indications</h5>
                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
               </div>
               <div class="modal-body">
-                <p>TODO</p>
+                <div v-for="(indication, key) in indications" :key="key">
+                  <h6 class="mt-3">{{ key }}</h6>
+                  <div class="form-check" v-for="option in indication">
+                    <input
+                      v-model="chosenIndications[key][option]"
+                      class="form-check-input"
+                      type="checkbox"
+                      value=""
+                      :id="camelCase(option)"
+                    />
+                    <label class="form-check-label" :for="camelCase(option)"> {{ option }} </label>
+                  </div>
+                </div>
               </div>
               <div class="modal-footer">
-                <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Done</button>
+                <button type="button" class="btn btn-primary" data-bs-dismiss="modal" @click="changeInd()">Done</button>
               </div>
             </div>
           </div>
         </div>
-        <button class="btn btn-primary" id="submitForm" @click="submitForm" :disabled="Object.keys(errors).length">Submit</button>
+        <button class="btn btn-primary" id="submitForm" @click="submitForm" :disabled="Object.keys(errors).length">
+          Submit
+        </button>
       </v-form>
       <div class="mt-3" v-if="result !== null">
         <h2>Result</h2>
@@ -132,6 +148,45 @@ <h6>Response received:</h6>
             schema: {},
             result: null,
             request: {},
+            chosenIndications: {
+              Bleeding: [],
+              Other: [],
+              Obstruction: [],
+              Sepsis: [],
+              'Iatrogenic injury': [],
+              Ischaemia: [],
+            },
+            indications: {
+              Bleeding: ['Haemorrhage'],
+              Other: ['Abdominal wound dehiscence', 'Abdominal compartment syndrome', 'Planned relook', 'Other'],
+              Obstruction: [
+                'Tender Small bowel obstruction',
+                'Non-Tender Small bowel obstruction',
+                'Tender Large bowel obstruction',
+                'Non-Tender Large bowel obstruction',
+                'Gastric outlet obstruction',
+                'Incarcerated/strangulated hernia',
+                'Hiatus Hernia/para-oesophageal hernia',
+                'Volvulus',
+                'Internal hernia',
+                'Obstructing incisional hernia',
+                'Intussusception',
+                'Pseudo-obstruction',
+                'Foreign body',
+              ],
+              Sepsis: [
+                'Phlegmon',
+                'Pneumoperitoneum',
+                'Sepsis',
+                'Iatrogenic injury',
+                'Anastomotic leak',
+                'Peritonitis',
+                'GI Perforation',
+                'Abdominal abscess',
+                'Intestinal fistula',
+              ],
+              Ischaemia: ['Necrosis', 'Ischaemia/infarction', 'Colitis', 'Acidosis'],
+            },
           };
         },
         components: {
@@ -140,6 +195,27 @@ <h6>Response received:</h6>
           ErrorMessage: VeeValidate.ErrorMessage,
         },
         methods: {
+          changeInd() {
+            const weight = {
+              Bleeding: 1,
+              Other: 2,
+              Obstruction: 2,
+              Sepsis: 3,
+              Ischaemia: 4,
+            };
+            // get highest weight
+            let max = 0;
+            let maxKey = '';
+            for (const key in this.chosenIndications) {
+              for (const option in this.chosenIndications[key]) {
+                if (this.chosenIndications[key][option]) {
+                  max = weight[key];
+                  maxKey = key;
+                }
+              }
+            }
+            this.schema.indicationForSurgery.value = maxKey.toLowerCase();
+          },
           reset() {
             this.result = null;
           },
@@ -222,7 +298,7 @@ <h6>Response received:</h6>
               this.schema = JSON.parse(data).properties;
             })
             .catch((error) => {
-              console.error('Error fetching test data:', error);
+              console.error('Error fetching schema data:', error);
             });
         },
       }).mount('#app');