updated sleep intake

resources/views/app/patient/modules/sleep_study_intake/edit.blade.php

@@ -38,51 +38,24 @@ if ($point->lastChildReview && $point->lastChildReview->data) {
 }
 ?>
 <div class="p-3 mcp-theme-1">
+	<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
+  <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
 	<style>
 		.select-esc-option {
 			max-width: 100px;
 			min-width: auto !important;
 		}
-    .textarea {
-      height: 50px !important;
-      padding: 5px !important;
-      border-color: #aaa !important;
-      border-bottom-color: #333 !important;
+    .textarea .select2-selection{
+      height: 100px !important;
     }
     .modal-backdrop {
       z-index: 90 !important;
       background: #ccc;
+    }
+    .select2-results__message {
+      display: none !important;
     }
 	</style>
-  <!-- Modal -->
-  <div class="modal fade" id="addDropdownOptionModal" tabindex="-1" aria-labelledby="addDropdownOptionModalLabel" aria-hidden="true">
-      <div class="modal-dialog" style="margin-top:200px;">
-          <div class="modal-content">
-              <div class="modal-header bg-light p-2">
-                  <h5 class="modal-title font-weight-bold" id="addDropdownOptionModalLabel">- Enter new List Item</h5>
-                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                      <span aria-hidden="true">&times;</span>
-                  </button>
-              </div>
-              <div class="modal-body">
-                  <form>
-                      <div class="row">
-                          <div class="col-12">
-                              <div class="form-group">
-                                  <label>Field Label</label>
-                                  <input type="text" class="form-control" name="fieldLabel" />
-                              </div>
-                          </div>
-                      </div>
-                  </form>
-                  <div class="d-flex align-items-center ">
-                    <button type="button" class="btn btn-secondary mr-2" data-dismiss="modal">Close</button>
-                    <button type="button" class="btn btn-primary" save-option data-dismiss="modal">Save changes</button>
-                  </div>
-              </div>
-          </div>
-      </div>
-  </div>
 	<div visit-moe close-on-save close-on-cancel class="d-block">
 		<form show url="/api/visitPoint/upsertChildReview" class="mcp-theme-1">
 			<input type="hidden" name="uid" value="<?= $point->uid ?>">
@@ -129,167 +102,16 @@ if ($point->lastChildReview && $point->lastChildReview->data) {
 				data: {
 					form: $('#edit-sleep_study_intake-container').closest('form'),
 					data: <?= json_encode($contentData) ?>,
-					defaultDropdownOptions: {
-						Dozing: [{
-								label: 'Never Chance of Doze',
-								value: 'Never Chance of Doze'
-							},
-							{
-								label: 'Slight Chance of Dozing',
-								value: 'Slight Chance of Dozing'
-							},
-							{
-								label: 'Moderate Chance of Dozing',
-								value: 'Moderate Chance of Dozing'
-							},
-							{
-								label: 'High Chance of Dozing',
-								value: 'High Chance of Dozing'
-							},
-						],
-						Sitting: [{
-								label: 0,
-								value: 0
-							},
-							{
-								label: 1,
-								value: 1
-							},
-							{
-								label: 2,
-								value: 2
-							},
-							{
-								label: 3,
-								value: 3
-							},
-						],
-						Watching: [{
-								label: 0,
-								value: 0
-							},
-							{
-								label: 1,
-								value: 1
-							},
-							{
-								label: 2,
-								value: 2
-							},
-							{
-								label: 3,
-								value: 3
-							},
-						],
-						Sitting_Inactive: [{
-								label: 0,
-								value: 0
-							},
-							{
-								label: 1,
-								value: 1
-							},
-							{
-								label: 2,
-								value: 2
-							},
-							{
-								label: 3,
-								value: 3
-							},
-						],
-						Passenger_Car: [{
-								label: 0,
-								value: 0
-							},
-							{
-								label: 1,
-								value: 1
-							},
-							{
-								label: 2,
-								value: 2
-							},
-							{
-								label: 3,
-								value: 3
-							},
-						],
-						Sitting_Quietly: [{
-								label: 0,
-								value: 0
-							},
-							{
-								label: 1,
-								value: 1
-							},
-							{
-								label: 2,
-								value: 2
-							},
-							{
-								label: 3,
-								value: 3
-							},
-						],
-						LyingDown: [{
-								label: 0,
-								value: 0
-							},
-							{
-								label: 1,
-								value: 1
-							},
-							{
-								label: 2,
-								value: 2
-							},
-							{
-								label: 3,
-								value: 3
-							},
-						],
-						SittingandTalking: [{
-								label: 0,
-								value: 0
-							},
-							{
-								label: 1,
-								value: 1
-							},
-							{
-								label: 2,
-								value: 2
-							},
-							{
-								label: 3,
-								value: 3
-							},
-						],
-						Traffic: [{
-								label: 0,
-								value: 0
-							},
-							{
-								label: 1,
-								value: 1
-							},
-							{
-								label: 2,
-								value: 2
-							},
-							{
-								label: 3,
-								value: 3
-							},
-						]
-					}
+					defaultDropdownOptions: {}
 				},
 				watch: {
 					$data: {
 						handler: function(val, oldVal) {
-							console.log('Changed');
-							this.autoSaveForm();
+							let parent = $('#edit-sleep_study_intake-container').closest('form');
+							parent.find('[name="data"]').val(JSON.stringify(this.data));
+
+							// autosave on change
+							autoSaveSegment(parent.find('[submit]').first());
 						},
 						deep: true
 					}
@@ -361,12 +183,20 @@ if ($point->lastChildReview && $point->lastChildReview->data) {
 						self.data[name] = value;
 						self.autoSaveForm();
 					},
+          initSelect2: function(){
+            $('[select2]').select2({
+              tags: true,
+              allowClear: true,
+              placeholder: 'Press "Enter" to create a new selection',
+            });
+          },
 				},
 				mounted: function() {
 					if (!this.data.dropdownOptions) {
 						this.data.dropdownOptions = this.defaultDropdownOptions;
 						this.$forceUpdate();
 					}
+          this.initSelect2();
 					this.initOnSelectChange();
 					console.log('1: DATA: ', this.data);
 				}

resources/views/app/patient/modules/sleep_study_intake/partials/epworth_sleepiness_study.blade.php

@@ -6,95 +6,70 @@
         <div class="mb-2">
             <label class="mb-1">How likely are you to doze off or fall asleep in the following situations, in contrast to feeling just tired? This refers to your usual way of life in recent times. Use the following scale (0, 1, 2, and 3) to choose the most appropriate number for each situation.</label>
             <div class="d-flex align-items-center">
-                <select v-if="data.dropdownOptions" data-name="Dozing" class="form-control form-control-sm select-esc-option" style="max-width:200px;" v-model="data.Dozing">
+                <select data-name="Dozing" class="form-control form-control-sm select-esc-option" style="max-width:200px;" v-model="data.Dozing">
                     <option value=""></option>
-                    <option v-for="o in data.dropdownOptions.Dozing" :value="o.value">@{{ o.label }}</option>
+                    <option value="Never Chance of Doze">Never Chance of Doze</option>
+                    <option value="Slight Chance of Dozing">Slight Chance of Dozing</option>
+                    <option value="Moderate Chance of Dozing">Moderate Chance of Dozing</option>
+                    <option value="High Chance of Dozing">High Chance of Dozing</option>
                 </select>
-                <div class="d-none">
-                    <span add-dropdown-option data-name="Dozing" data-title="Dozing" class="ml-1 c-pointer" data-toggle="modal" data-target="#addDropdownOptionModal"><i class="fas fa-plus-circle fa-fw text-success"></i></span>
-                </div>
-
             </div>
         </div>
         <div class="d-flex align-items-center flex-wrap mb-2">
             <label class="mb-0 mr-2">Sitting and reading</label>
-            <select v-if="data.dropdownOptions" data-name="Sitting" class="form-control form-control-sm select-esc-option" score-input v-model="data.Sitting">
+            <select data-name="Sitting" class="form-control form-control-sm select-esc-option" score-input v-model="data.Sitting">
                 <option value=""></option>
-                <option v-for="o in data.dropdownOptions.Sitting" :value="o.value">@{{ o.label }}</option>
+                <option v-for="i in 4" :value="i - 1">@{{ i - 1 }}</option>
             </select>
-            <div class="d-none">
-                <span add-dropdown-option data-name="Sitting" data-title="Sitting" class="ml-1 c-pointer" data-toggle="modal" data-target="#addDropdownOptionModal"><i class="fas fa-plus-circle fa-fw text-success"></i></span>
-            </div>
         </div>
         <div class="d-flex align-items-center flex-wrap mb-2">
             <label class="mb-0 mr-2">Watching TV</label>
-            <select v-if="data.dropdownOptions" data-name="Watching" class="form-control form-control-sm select-esc-option" score-input v-model="data.Watching">
+            <select data-name="Watching" class="form-control form-control-sm select-esc-option" score-input v-model="data.Watching">
                 <option value=""></option>
-                <option v-for="o in data.dropdownOptions.Watching" :value="o.value">@{{ o.label }}</option>
+                <option v-for="i in 4" :value="i - 1">@{{ i - 1 }}</option>
             </select>
-            <div class="d-none">
-                <span add-dropdown-option data-name="Watching" data-title="Watching" class="ml-1 c-pointer" data-toggle="modal" data-target="#addDropdownOptionModal"><i class="fas fa-plus-circle fa-fw text-success"></i></span>
-            </div>
         </div>
         <div class="d-flex align-items-center flex-wrap mb-2">
             <label class="mb-0 mr-2">Sitting inactive in a public place (e.g. a theatre or a meeting)</label>
-            <select v-if="data.dropdownOptions" data-name="Sitting_Inactive" class="form-control form-control-sm select-esc-option" score-input v-model="data.Sitting_Inactive">
+            <select data-name="Sitting_Inactive" class="form-control form-control-sm select-esc-option" score-input v-model="data.Sitting_Inactive">
                 <option value=""></option>
-                <option v-for="o in data.dropdownOptions.Sitting_Inactive" :value="o.value">@{{ o.label }}</option>
+                <option v-for="i in 4" :value="i - 1">@{{ i - 1 }}</option>
             </select>
-            <div class="d-none">
-                <span add-dropdown-option data-name="Sitting_Inactive" data-title="Sitting Inactive" class="ml-1 c-pointer" data-toggle="modal" data-target="#addDropdownOptionModal"><i class="fas fa-plus-circle fa-fw text-success"></i></span>
-            </div>
         </div>
         <div class="d-flex align-items-center flex-wrap mb-2">
             <label class="mb-0 mr-2">As a passenger in a car for an hour without a break</label>
-            <select v-if="data.dropdownOptions" data-name="Passenger_Car" class="form-control form-control-sm select-esc-option" score-input v-model="data.Passenger_Car">
+            <select data-name="Passenger_Car" class="form-control form-control-sm select-esc-option" score-input v-model="data.Passenger_Car">
                 <option value=""></option>
-                <option v-for="o in data.dropdownOptions.Passenger_Car" :value="o.value">@{{ o.label }}</option>
+                <option v-for="i in 4" :value="i - 1">@{{ i - 1 }}</option>
             </select>
-            <div class="d-none">
-                <span add-dropdown-option data-name="Passenger_Car" data-title="Passenger Car" class="ml-1 c-pointer" data-toggle="modal" data-target="#addDropdownOptionModal"><i class="fas fa-plus-circle fa-fw text-success"></i></span>
-            </div>
         </div>
         <div class="d-flex align-items-center flex-wrap mb-2">
             <label class="mb-0 mr-2">Sitting quietly after a lunch without alcohol</label>
-            <select v-if="data.dropdownOptions" data-name="Sitting_Quietly" class="form-control form-control-sm select-esc-option" score-input v-model="data.Sitting_Quietly">
+            <select data-name="Sitting_Quietly" class="form-control form-control-sm select-esc-option" score-input v-model="data.Sitting_Quietly">
                 <option value=""></option>
-                <option v-for="o in data.dropdownOptions.Sitting_Quietly" :value="o.value">@{{ o.label }}</option>
+                <option v-for="i in 4" :value="i - 1">@{{ i - 1 }}</option>
             </select>
-            <div class="d-none">
-                <span add-dropdown-option data-name="Sitting_Quietly" data-title="Sitting Quietly" class="ml-1 c-pointer" data-toggle="modal" data-target="#addDropdownOptionModal"><i class="fas fa-plus-circle fa-fw text-success"></i></span>
-            </div>
         </div>
         <div class="d-flex align-items-center flex-wrap mb-2">
             <label class="mb-0 mr-2">Lying down to rest in the afternoon when circumstances permit</label>
-            <select v-if="data.dropdownOptions" data-name="LyingDown" class="form-control form-control-sm select-esc-option" score-input v-model="data.LyingDown">
+            <select data-name="LyingDown" class="form-control form-control-sm select-esc-option" score-input v-model="data.LyingDown">
                 <option value=""></option>
-                <option v-for="o in data.dropdownOptions.LyingDown" :value="o.value">@{{ o.label }}</option>
+                <option v-for="i in 4" :value="i - 1">@{{ i - 1 }}</option>
             </select>
-            <div class="d-none">
-                <span add-dropdown-option data-name="LyingDown" data-title="Lying Down" class="ml-1 c-pointer" data-toggle="modal" data-target="#addDropdownOptionModal"><i class="fas fa-plus-circle fa-fw text-success"></i></span>
-            </div>
         </div>
         <div class="d-flex align-items-center flex-wrap mb-2">
             <label class="mb-0 mr-2">Sitting and talking to someone</label>
-            <select v-if="data.dropdownOptions" data-name="SittingandTalking" class="form-control form-control-sm select-esc-option" score-input v-model="data.SittingandTalking">
+            <select data-name="SittingandTalking" class="form-control form-control-sm select-esc-option" score-input v-model="data.SittingandTalking">
                 <option value=""></option>
-                <option v-for="o in data.dropdownOptions.SittingandTalking" :value="o.value">@{{ o.label }}</option>
+                <option v-for="i in 4" :value="i - 1">@{{ i - 1 }}</option>
             </select>
-            <div class="d-none">
-                <span add-dropdown-option data-name="SittingandTalking" data-title="Sitting and Talking" class="ml-1 c-pointer" data-toggle="modal" data-target="#addDropdownOptionModal"><i class="fas fa-plus-circle fa-fw text-success"></i></span>
-            </div>
         </div>
         <div class="d-flex align-items-center flex-wrap mb-2">
             <label class="mb-0 mr-2">In a car, while stopped for a few minutes in traffic</label>
-            <select v-if="data.dropdownOptions" data-name="Traffic" class="form-control form-control-sm select-esc-option" score-input v-model="data.Traffic">
+            <select data-name="Traffic" class="form-control form-control-sm select-esc-option" score-input v-model="data.Traffic">
                 <option value=""></option>
-                <option v-for="o in data.dropdownOptions.Traffic" :value="o.value">@{{ o.label }}</option>
+                <option v-for="i in 4" :value="i - 1">@{{ i - 1 }}</option>
             </select>
-            <div class="d-none">
-                <span add-dropdown-option data-name="Traffic" data-title="Traffic" class="ml-1 c-pointer" data-toggle="modal" data-target="#addDropdownOptionModal"><i class="fas fa-plus-circle fa-fw text-success"></i></span>
-            </div>
         </div>
         <div class="my-2">
             <div class="d-flex align-items-center">

resources/views/app/patient/modules/sleep_study_intake/partials/obstructive_sleep_apnea.blade.php

@@ -658,11 +658,14 @@ $questionnaire = [
 ];
 ?>
 <div class="row mb-1">
-    <div class="col-md-12 section">
+  <div class="col-md-12">
+      <h6 class="my-3"><b><u>Obstructive Sleep Apnea</u></b></h6>
+  </div>
+    <div class="col-md-12 section bg-light">
         <div>
             @foreach($questionnaire as $qK => $qV)
-            <div class="bg-light border mb-3 p-2">
-                <h3 class="font-weight-bold" style="font-size:16px;">{{ $qV['title'] }}</h3>
+            <div class=" border-bottom border-info mb-3 pt-2">
+                <h6 class="font-weight-bold"><u>{{ $qV['title'] }}</u></h6>
                 <div class="pl-2">
                     @foreach($qV['questions'] as $questionKey => $questionValue)
                     <div class="form-group">
@@ -703,4 +706,4 @@ $questionnaire = [
             @endforeach
         </div>
     </div>
-</div>
+</div>

resources/views/app/patient/modules/sleep_study_intake/partials/physical_exam.blade.php

@@ -8,52 +8,52 @@
 				<input type="checkbox"  data-name="functional_status" v-model="data.functional_status" />
 				<b>Functional Status Assessed</b>
 			</label>
-			<div class="bg-light p-1">
+			<div class="border p-1">
 				<div>
 					<label class="mb-0 mr-3">
-						<input type="radio"  data-name="functional_impairments" value="NO" v-model="data.functional_impairments" />
+						<input type="radio" data-name="functional_impairments" value="NO"  v-model="data.functional_impairments" />
 						<span>No Impairments</span>
 					</label>
 					<label class="mb-0 mr-3">
-						<input type="radio"  data-name="functional_impairments" value="YES" v-model="data.functional_impairments" />
+						<input type="radio" data-name="functional_impairments" value="YES"  v-model="data.functional_impairments" />
 						<span>Functional Impairments Present</span>
 					</label>
 					<label class="mb-0 mr-3">
-						<input type="radio"  data-name="functional_impairments" value="" v-model="data.functional_impairments" />
+						<input type="radio" data-name="functional_impairments" value=""  v-model="data.functional_impairments" />
 						<span>--</span>
 					</label>
 				</div>
-				<b v-if="data.functional_impairments =='YES'" class="mt-1">Insert Impairments Subnote to Document Details</b>
+				<b v-if="data.functional_impairments == 'YES'" class="mt-1">Insert Impairments Subnote to Document Details</b>
 			</div>
 		</div>
 		<div class="mb-4 d-flex align-items-start">
 			<label class="mb-0 mr-3">
-				<input type="checkbox"  data-name="cognitive_status" v-model="data.cognitive_status" />
+				<input type="checkbox"  data-name="cognitive_status"  v-model="data.cognitive_status" />
 				<b>Cognitive Status Assessed</b>
 			</label>
-			<div class="bg-light p-1">
+			<div class="border p-1">
 				<div>
 					<label class="mb-0 mr-3">
-						<input type="radio"  data-name="cognitive_impairments" value="NO" v-model="data.cognitive_impairments" />
+						<input type="radio" data-name="cognitive_impairments" value="NO"  v-model="data.cognitive_impairments" />
 						<span>No Impairments</span>
 					</label>
 					<label class="mb-0 mr-3">
-						<input type="radio"  data-name="cognitive_impairments" value="YES" v-model="data.cognitive_impairments" />
+						<input type="radio" data-name="cognitive_impairments" value="YES"  v-model="data.cognitive_impairments" />
 						<span>Functional Impairments Present</span>
 					</label>
 					<label class="mb-0 mr-3">
-						<input type="radio"  data-name="cognitive_impairments" value="" v-model="data.cognitive_impairments" />
+						<input type="radio" data-name="cognitive_impairments" value=""  v-model="data.cognitive_impairments" />
 						<span>--</span>
 					</label>
 				</div>
-				<b v-if="data.cognitive_impairments =='YES'" class="mt-1">Insert Impairments Subnote to Document Details</b>
+				<b v-if="data.cognitive_impairments == 'YES'" class="mt-1">Insert Impairments Subnote to Document Details</b>
 			</div>
 		</div>
-		<div class="form-group">
+		<div class="form-group textarea">
 			<label class="m-0">History of Present Illness:</label>
 			<div class="d-flex align-items-end">
-				<textarea data-name="HPI_description" v-model="data.HPI_description" class="form-control border textarea" rows="3"></textarea>
-				<span add-dropdown-option data-name="HPI_description" data-title="HPI_description" class="ml-1 c-pointer" data-toggle="modal" data-target="#addDropdownOptionModal"><i class="fas fa-plus-circle fa-fw text-success"></i></span>
+				<select data-name="HPI_description" name="HPI_description[]" select2 multiple="multiple" class="form-control form-control-sm" v-model="data.HPI_description">
+				</select>
 			</div>
 		</div>
 		<div class="form-group">