Separate form

resources/views/app/patient/module-specific-summary-renderers/sleep_study_intake/subjective.blade.php

@@ -1,5 +1,5 @@
 <?php $keysToSkip = [
-
+    'dropdownOptions'
 ]; 
 ?>
 @if($points && count($points))

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

@@ -1,143 +1,322 @@
 <?php
+
 use App\Models\Client;
 use App\Models\Note;
 use App\Models\Point;
+
 /** @var Client $patient */
 /** @var Note $note */
 /** @var Point $point */
 
-if(!@$sessionKey) {
-    $sessionKey = request()->cookie('sessionKey');
+if (!@$sessionKey) {
+	$sessionKey = request()->cookie('sessionKey');
 }
 
 $point = Point::getOrCreateOnlyTopLevelPointOfCategory($note, 'SLEEP_STUDY_INTAKE', $sessionKey);
 
 // replace content data
 $contentData = [
-    "cheif_complaint" => "",
+	"cheif_complaint" => "",
+	"Dozing" => ""
 ];
 
 if ($point->lastChildReview && $point->lastChildReview->data) {
-    $point->lastChildReview->data = json_decode($point->lastChildReview->data, true);
-    $contentData = $point->lastChildReview->data;
+	$point->lastChildReview->data = json_decode($point->lastChildReview->data, true);
+	$contentData = $point->lastChildReview->data;
 }
 ?>
 <div class="p-3 mcp-theme-1">
+	<style>
+		.select-esc-option {
+			max-width: 100px;
+			min-width: auto !important;
+		}
+	</style>
 
-    <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 ?>">
-            <input type="hidden" name="noteUid" value="<?= $note->uid ?>">
-            <input type="hidden" name="segmentUid" value="<?= $note->coreSegment->uid ?>">
-            <input type="hidden" name="data" value="{{json_encode($contentData)}}">
-
-            <div id="edit-sleep_study_intake-container" class="customized-form">
-
-                @include('app.patient.modules._undo_changes', compact('point'))
-
-                <div class="row mb-1">
-					<div class="col-md-12">
-						<h6 class="my-3"><b><u>Epworth Sleepiness Scale</u></b></h6>
-					</div>
-					<div class="col-md-12 section bg-light pt-2 mb-3">
-						<div class="form-group">
-							<label>When did you first notice that you were gaining weight? </label>
-							<div>
-								<div class="form-check form-check-inline">
-									<input class="form-check-input" type="radio" v-model="data.first_notice_on_weight_gain"
-										id="wg-childhood" value="childhood">
-									<label class="form-check-label" for="wg-childhood">Childhood</label>
-								</div>
-								<div class="form-check form-check-inline">
-									<input class="form-check-input" type="radio" v-model="data.first_notice_on_weight_gain"
-										id="wg-teens" value="teens">
-									<label class="form-check-label" for="wg-teens">Teens</label>
-								</div>
-								<div class="form-check form-check-inline">
-									<input class="form-check-input" type="radio" v-model="data.first_notice_on_weight_gain"
-										id="wg-adulthood" value="adulthood">
-									<label class="form-check-label" for="wg-adulthood">Adulthood</label>
-								</div>
-								<div class="form-check form-check-inline">
-									<input class="form-check-input" type="radio" v-model="data.first_notice_on_weight_gain"
-										id="wg-pregnancy" value="pregnancy">
-									<label class="form-check-label" for="wg-pregnancy">Pregnancy</label>
-								</div>
-								<div class="form-check form-check-inline">
-									<input class="form-check-input" type="radio" v-model="data.first_notice_on_weight_gain"
-										id="wg-menopause" value="menopause">
-									<label class="form-check-label" for="wg-menopause">Menopause</label>
-								</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 ?>">
+			<input type="hidden" name="noteUid" value="<?= $note->uid ?>">
+			<input type="hidden" name="segmentUid" value="<?= $note->coreSegment->uid ?>">
+			<input type="hidden" name="data" value="{{json_encode($contentData)}}">
+			<input type="hidden" name="mainData" value="{{json_encode($contentData)}}">
+
+			<div id="edit-sleep_study_intake-container" class="customized-form">
 
-                <div class="mt-3 pt-3 border-top text-center">
-                    <button type="button" v-on:click.prevent="saveForm()" class="btn btn-sm btn-primary mr-2">Submit</button>
-                    <button type="button" onclick="closeStagPopup()" class="btn btn-sm btn-default border">Cancel</button>
-                </div>
+				@include('app.patient.modules._undo_changes', compact('point'))
+
+				@include('app.patient.modules.sleep_study_intake.partials.epworth_sleepiness_study')
+
+				<div class="mt-3 pt-3 border-top text-center">
+					<button type="button" v-on:click.prevent="saveForm()" class="btn btn-sm btn-primary mr-2">Submit</button>
+					<button type="button" onclick="closeStagPopup()" class="btn btn-sm btn-default border">Cancel</button>
+				</div>
 
-            </div>
+			</div>
 
-            <div class="d-none">
-                <button submit class="btn btn-sm btn-primary mr-2">Submit</button>
-                <button cancel class="btn btn-sm btn-default border">Cancel</button>
-            </div>
-        </form>
-    </div>
+			<div class="d-none">
+				<button submit class="btn btn-sm btn-primary mr-2">Submit</button>
+				<button cancel class="btn btn-sm btn-default border">Cancel</button>
+			</div>
+		</form>
+	</div>
 </div>
 <script>
-    (function() {
-        function init() {
-
-            runMCInitializer('hide-moes');
-            // any JS can come here
-            // will be run on page-load as well as whenever this segment is refreshed
-            new Vue({
-                el: '#edit-sleep_study_intake-container',
-                delimiters: ["@{{","}}"],
-                data: {
-                    data: <?= json_encode($contentData) ?>
-                },
-                watch: {
-                    $data: {
-                        handler: function(val, oldVal) {
-                            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
-                    }
-                },
-                methods: {
-                    saveForm: function() {
-                        let parent = $('#edit-sleep_study_intake-container').closest('form');
-                        parent.find('[name="data"]').val(JSON.stringify(this.data));
-                        autoSaveSegmentAndClose(parent.find('[submit]').first());
-                    },
-                    undoChanges: function() {
-                        $.post('/api/visitPoint/destroyCurrentChildReview', {
-                            uid: '{{$point->uid}}'
-                        }, _data => {
-                            if(!hasResponseError(_data)) {
-                                closeStagPopup();
-                                refreshSegment('omega_subjective_system');
+	(function() {
+		function init() {
+
+			runMCInitializer('hide-moes');
+			// any JS can come here
+			// will be run on page-load as well as whenever this segment is refreshed
+			new Vue({
+				el: '#edit-sleep_study_intake-container',
+				delimiters: ["@{{", "}}"],
+				data: {
+					form: $('#edit-sleep_study_intake-container').closest('form'),
+					data: <?= json_encode($contentData) ?>,
+					defaultDropdownOptions: {
+						Dozing: [{
+								label: 'Never Chance of Doze',
+								value: 0
+							},
+							{
+								label: 'Slight Chance of Dozing',
+								value: 1
+							},
+							{
+								label: 'Moderate Chance of Dozing',
+								value: 2
+							},
+							{
+								label: 'High Chance of Dozing',
+								value: 3
+							},
+						],
+						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
+							},
+						]
+					}
+				},
+				watch: {
+					$data: {
+						handler: function(val, oldVal) {
+							this.autoSaveForm();
+						},
+						deep: true
+					}
+				},
+				methods: {
+					autoSaveForm: function(){
+						var self = this;
+                        var url = self.form.attr('url');
+                        var data = self.data;
+                        var dataInput = self.form.find('[name="mainData"]');
+                        dataInput.val(JSON.stringify(data));
+                        var dataArray = self.form.serializeArray();
+						var newDataArray = [];
+						for(var i = 0; i < dataArray.length; i++){
+							var field = dataArray[i];
+							console.log({field});
+							if(field.name !== 'data'){
+								console.log({name: field.name});
+								newDataArray.push(field);
+							}
+						}
+                        dataArray.push({name: 'data', value: dataInput.val()});
+						console.log({data, dataArray});
+                        // $.post(url, dataArray, function(response) {}, 'json');
+					},
+					_autoSaveForm: function(){
+						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());
+					},
+					saveForm: function() {
+						let parent = $('#edit-sleep_study_intake-container').closest('form');
+						parent.find('[name="data"]').val(JSON.stringify(this.data));
+						autoSaveSegmentAndClose(parent.find('[submit]').first());
+					},
+					undoChanges: function() {
+						$.post('/api/visitPoint/destroyCurrentChildReview', {
+							uid: '{{$point->uid}}'
+						}, _data => {
+							if (!hasResponseError(_data)) {
+								closeStagPopup();
+								refreshSegment('omega_subjective_system');
 								refreshSegment('omega_plan_system');
-                            }
+							}
+						});
+						return false;
+					},
+					calculateScore: function() {
+                        var self = this;
+                        var fields = self.form.find('[score-input]');
+                        var score = 0;
+                        $.each(fields, function(i, field) {
+                            var value = parseInt($(field).val());
+                            value = isNaN(value) ? 0 : value;
+                            score = score + value;
                         });
-                        return false;
-                    }
-                }
-            });
+                        self.data.Score = score;
+                        self.autoSaveForm();
+                    },
+                    initOnSelectChange: function() {
+                        var self = this;
+                        self.form.find('select').on('change', function() {
+                            self.calculateScore();
+                        });
+                    },
+				},
+				mounted: function() {
+					if (!this.data.dropdownOptions) {
+						this.data.dropdownOptions = this.defaultDropdownOptions;
+						this.$forceUpdate();
+					}
+					this.initOnSelectChange();
+					console.log('DATA: ', this.data);
+				}
+			});
 
 			// if in popup (omega template), add provision to toggle relevance
 			@include('app.patient.segment-templates._common_actions.toggle-relevance', ['container' => '#edit-sleep_study_intake-container'])
-        }
+		}
 
-        addMCInitializer('edit-sleep_study_intake-container-{{$note->id}}', init, '#edit-sleep_study_intake-container');
+		addMCInitializer('edit-sleep_study_intake-container-{{$note->id}}', init, '#edit-sleep_study_intake-container');
 
-    })();
+	})();
 </script>

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

@@ -0,0 +1,123 @@
+<div class="row mb-1">
+					<div class="col-md-12">
+						<h6 class="my-3"><b><u>Epworth Sleepiness Scale</u></b></h6>
+					</div>
+					<div class="col-md-12 section bg-light pt-2 mb-3">
+						<div class="mb-2">
+							<label class="text-sm text-secondary 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" score-input v-model="data.Dozing">
+									<option value=""></option>
+									<option v-for="o in data.dropdownOptions.Dozing" :value="o.value">@{{ o.label }}</option>
+								</select>
+								<div>
+									<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="text-sm text-secondary 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">
+								<option value=""></option>
+								<option v-for="o in data.dropdownOptions.Sitting" :value="o.value">@{{ o.label }}</option>
+							</select>
+							<div>
+								<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="text-sm text-secondary 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">
+								<option value=""></option>
+								<option v-for="o in data.dropdownOptions.Sitting" :value="o.value">@{{ o.label }}</option>
+							</select>
+							<div>
+								<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="text-sm text-secondary 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">
+								<option value=""></option>
+								<option v-for="o in data.dropdownOptions.Watching" :value="o.value">@{{ o.label }}</option>
+							</select>
+							<div>
+								<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="text-sm text-secondary 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">
+								<option value=""></option>
+								<option v-for="o in data.dropdownOptions.Sitting_Inactive" :value="o.value">@{{ o.label }}</option>
+							</select>
+							<div>
+								<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="text-sm text-secondary 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">
+								<option value=""></option>
+								<option v-for="o in data.dropdownOptions.Passenger_Car" :value="o.value">@{{ o.label }}</option>
+							</select>
+							<div>
+								<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="text-sm text-secondary 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">
+								<option value=""></option>
+								<option v-for="o in data.dropdownOptions.Sitting_Quietly" :value="o.value">@{{ o.label }}</option>
+							</select>
+							<div>
+								<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="text-sm text-secondary 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">
+								<option value=""></option>
+								<option v-for="o in data.dropdownOptions.LyingDown" :value="o.value">@{{ o.label }}</option>
+							</select>
+							<div>
+								<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="text-sm text-secondary 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">
+								<option value=""></option>
+								<option v-for="o in data.dropdownOptions.SittingandTalking" :value="o.value">@{{ o.label }}</option>
+							</select>
+							<div>
+								<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="text-sm text-secondary 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">
+								<option value=""></option>
+								<option v-for="o in data.dropdownOptions.Traffic" :value="o.value">@{{ o.label }}</option>
+							</select>
+							<div>
+								<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">
+								<span class="font-weight-bold">Score:</span>
+								<div class="border p-2 mx-1" style="width:50px;">
+									<input type="hidden" name="Score" v-model="data.Score">
+									<span id="scoreValue">@{{ data.Score }}</span>
+								</div>
+								<div class="d-none">
+									<span class="mr-1 text-primary c-pointer">Calculate</span>
+									<span class="text-danger c-pointer">Clear</span>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>