Updates

resources/views/app/patient/primary-coverage-manual-determination-commercial-modal.blade.php

@@ -32,7 +32,7 @@
 							<td>
 								<div class="form-group mb-0">
 									<label for="" class="control-label">Manual Determination Category</label>
-									<select name="manualDeterminationCategory" class="form-control input-sm">
+									<select name="manualDeterminationCategory" class="form-control input-sm" @change="onInputChange">
 										<option value="">--select--</option>
 										<option value="COVERED">Covered</option>
 										<option value="NOT_COVERED">Not Covered</option>
@@ -65,10 +65,10 @@
 							<td>
 								<div class="form-group mb-0">
 									<div class="form-check form-check-inline">
-										<label class="form-check-label"><input class="form-check-input" type="radio" :checked="cpc.auto_medicare_is_partbprimary == 'YES'" name="manualMedicareIsPartBActive" value="YES">Yes</label>
+										<label class="form-check-label"><input class="form-check-input" type="radio" name="manualMedicareIsPartBActive" @click="onInputChange" value="YES">Yes</label>
 									</div>
 									<div class="form-check form-check-inline">
-										<label class="form-check-label"><input class="form-check-input" type="radio" name="manualMedicareIsPartBActive" value="NO">No</label>
+										<label class="form-check-label"><input class="form-check-input" type="radio" name="manualMedicareIsPartBActive" @click="onInputChange" value="NO">No</label>
 									</div>
 								</div>
 							</td>
@@ -79,10 +79,10 @@
 							<td>
 								<div class="form-group mb-0">
 									<div class="form-check form-check-inline">
-										<label class="form-check-label"><input class="form-check-input" type="radio" name="manualMedicareIsPartBPrimary" v-model="uiState.manualMedicareIsPartBPrimary" value="YES">Yes</label>
+										<label class="form-check-label"><input class="form-check-input" type="radio" name="manualMedicareIsPartBPrimary" @click="onInputChange" value="YES">Yes</label>
 									</div>
 									<div class="form-check form-check-inline">
-										<label class="form-check-label"><input class="form-check-input" type="radio" name="manualMedicareIsPartBPrimary" v-model="uiState.manualMedicareIsPartBPrimary" value="NO">No</label>
+										<label class="form-check-label"><input class="form-check-input" type="radio" name="manualMedicareIsPartBPrimary" @click="onInputChange" value="NO">No</label>
 									</div>
 								</div>
 							</td>
@@ -96,10 +96,10 @@
 								</div>
 								<div class="form-group mb-0">
 									<div class="form-check form-check-inline">
-										<label class="form-check-label"><input class="form-check-input" type="radio" name="manualMedicareIsPartCActive" v-model="uiState.manualMedicareIsPartCActive" value="YES">Yes</label>
+										<label class="form-check-label"><input class="form-check-input" type="radio" name="manualMedicareIsPartCActive" @click="onInputChange" value="YES">Yes</label>
 									</div>
 									<div class="form-check form-check-inline">
-										<label class="form-check-label"><input class="form-check-input" type="radio" name="manualMedicareIsPartCActive" v-model="uiState.manualMedicareIsPartCActive" value="NO">No</label>
+										<label class="form-check-label"><input class="form-check-input" type="radio" name="manualMedicareIsPartCActive" @click="onInputChange" value="NO">No</label>
 									</div>
 								</div>
 							</td>
@@ -110,13 +110,13 @@
 							<td>
 								<div class="form-group mb-0">
 									<div class="form-check form-check-inline">
-										<label class="form-check-label"><input class="form-check-input" type="radio" name="manualMedicareIsInpatient" value="YES">Yes</label>
+										<label class="form-check-label"><input class="form-check-input" type="radio" name="manualMedicareIsInpatient" @click="onInputChange" value="YES">Yes</label>
 									</div>
 									<div class="form-check form-check-inline">
-										<label class="form-check-label"><input class="form-check-input" type="radio" name="manualMedicareIsInpatient" value="NO">No</label>
+										<label class="form-check-label"><input class="form-check-input" type="radio" name="manualMedicareIsInpatient" @click="onInputChange" value="NO">No</label>
 									</div>
 									<div class="form-check form-check-inline">
-										<label class="form-check-label"><input class="form-check-input" type="radio" name="manualMedicareIsInpatient" value="UNKNOWN">Unknown</label>
+										<label class="form-check-label"><input class="form-check-input" type="radio" name="manualMedicareIsInpatient" @click="onInputChange" value="UNKNOWN">Unknown</label>
 									</div>
 								</div>
 							</td>
@@ -127,13 +127,13 @@
 							<td>
 								<div class="form-group mb-0">
 									<div class="form-check form-check-inline">
-										<label class="form-check-label"><input class="form-check-input" type="radio" name="manualMedicareIsHospice" value="YES">Yes</label>
+										<label class="form-check-label"><input class="form-check-input" type="radio" name="manualMedicareIsHospice" @click="onInputChange" value="YES">Yes</label>
 									</div>
 									<div class="form-check form-check-inline">
-										<label class="form-check-label"><input class="form-check-input" type="radio" name="manualMedicareIsHospice" value="NO">No</label>
+										<label class="form-check-label"><input class="form-check-input" type="radio" name="manualMedicareIsHospice" @click="onInputChange" value="NO">No</label>
 									</div>
 									<div class="form-check form-check-inline">
-										<label class="form-check-label"><input class="form-check-input" type="radio" name="manualMedicareIsHospice" value="UNKNOWN">Unknown</label>
+										<label class="form-check-label"><input class="form-check-input" type="radio" name="manualMedicareIsHospice" @click="onInputChange" value="UNKNOWN">Unknown</label>
 									</div>
 								</div>
 							</td>
@@ -144,13 +144,13 @@
 							<td>
 								<div class="form-group mb-0">
 									<div class="form-check form-check-inline">
-										<label class="form-check-label"><input class="form-check-input" type="radio" name="manualMedicareIsHomeHealth" value="YES">Yes</label>
+										<label class="form-check-label"><input class="form-check-input" type="radio" name="manualMedicareIsHomeHealth" @click="onInputChange" value="YES">Yes</label>
 									</div>
 									<div class="form-check form-check-inline">
-										<label class="form-check-label"><input class="form-check-input" type="radio" name="manualMedicareIsHomeHealth" value="NO">No</label>
+										<label class="form-check-label"><input class="form-check-input" type="radio" name="manualMedicareIsHomeHealth" @click="onInputChange" value="NO">No</label>
 									</div>
 									<div class="form-check form-check-inline">
-										<label class="form-check-label"><input class="form-check-input" type="radio" name="manualMedicareIsHomeHealth" value="UNKNOWN">Unknown</label>
+										<label class="form-check-label"><input class="form-check-input" type="radio" name="manualMedicareIsHomeHealth" @click="onInputChange" value="UNKNOWN">Unknown</label>
 									</div>
 								</div>
 							</td>
@@ -161,13 +161,13 @@
 							<td>
 								<div class="form-group mb-0">
 									<div class="form-check form-check-inline">
-										<label class="form-check-label"><input class="form-check-input" type="radio" name="manualMedicareIsMsp" value="YES">Yes</label>
+										<label class="form-check-label"><input class="form-check-input" type="radio" name="manualMedicareIsMsp" @click="onInputChange" value="YES">Yes</label>
 									</div>
 									<div class="form-check form-check-inline">
-										<label class="form-check-label"><input class="form-check-input" type="radio" name="manualMedicareIsMsp" value="NO">No</label>
+										<label class="form-check-label"><input class="form-check-input" type="radio" name="manualMedicareIsMsp" @click="onInputChange" value="NO">No</label>
 									</div>
 									<div class="form-check form-check-inline">
-										<label class="form-check-label"><input class="form-check-input" type="radio" name="manualMedicareIsMsp" value="UNKNOWN">Unknown</label>
+										<label class="form-check-label"><input class="form-check-input" type="radio" name="manualMedicareIsMsp" @click="onInputChange" value="UNKNOWN">Unknown</label>
 									</div>
 								</div>
 							</td>
@@ -188,7 +188,7 @@
 			</div>
 
 			<div class="form-group text-nowrap mb-0">
-				<button v-if="!processing" class="btn btn-sm btn-primary" type="submit" :disabled="url == ''">Submt</button>
+				<button v-if="!processing" class="btn btn-sm btn-primary" type="submit" :disabled="url == '' || disabled === true">Submt</button>
 				<button v-else class="btn btn-sm btn-primary" type="button"><i class="fas fa-circle-notch fa-spin"></i> Processing...</button>
 			</div>
 		</form>
@@ -203,14 +203,49 @@
 				data: {
 					url: '/api/clientPrimaryCoverage/manualDeterminationForCommercial',
 					uiState: {
-						manualMedicareIsPartBPrimary: '',
-						manualMedicareIsPartCActive: ''
+						manualDeterminationCategory: null,
+						manualMedicareIsPartBActive: null,
+						manualMedicareIsPartBPrimary: null,
+						manualMedicareIsPartCActive: null,
+						manualMedicareIsInpatient: null,
+						manualMedicareIsHospice: null,
+						manualMedicareIsHomeHealth: null,
+						manualMedicareIsMsp: null,
+
 					},
 					cpc: <?= json_encode($cpc); ?>,
 					processing: false,
-					response: null
+					response: null,
+					disabled: false
 				},
 				methods: {
+					onInputChange: function(evt){
+						var input = evt.target;
+						var name = input.name;
+						var value = input.value;
+						this.uiState[name] = value;
+						console.log({name, value});
+						if(name === 'manualMedicareIsPartBPrimary'){
+							if(value === 'YES') this.uiState.manualMedicareIsPartBActive = 'YES';
+						}
+						if(name === 'manualMedicareIsPartCActive'){
+							if(value === 'YES') this.uiState.manualMedicareIsPartBActive = 'NO';
+						}
+						if(name === 'manualDeterminationCategory'){
+							if(value === 'INVALID' || value === 'UNKNOWN'){
+								this.setUiStateDefaultValue('NO');
+								return;
+							}
+						}
+						this.refreshUi();
+					},
+					setUiStateDefaultValue: function(value){
+						var self = this;
+						for(var fieldName in self.uiState){
+							self.uiState[fieldName] = value;	
+						}
+						self.refreshUi();
+					},
 					submitForm: function(evt) {
 						var self = this;
 						if (self.processing) return;
@@ -236,13 +271,28 @@
 							}
 						}, 'json');
 					},
+					refreshUi: function(){
+						var self = this;
+						$("input[type=radio]").prop('checked', false);
+						for(var fieldName in self.uiState){
+							var value = self.uiState[fieldName];
+							if(value){					
+								$("input[name="+ fieldName +"][type=radio][value=" + value + "]").prop('checked', true);
+							}							
+						}
+						self.disabled = (self.cpc.auto_medicare_is_partcactive == 'YES' && self.cpc.auto_medicare_is_partbprimary == 'YES') || (self.uiState.manualMedicareIsPartBPrimary == 'YES' && self.uiState.manualMedicareIsPartCActive == 'YES');
+					},
 				},
 				mounted: function() {
 					if (this.cpc.auto_medicare_is_partbprimary == 'YES') {
 						this.uiState.manualMedicareIsPartBPrimary = 'YES';
 						this.uiState.manualMedicareIsPartCActive = 'NO';
+						this.uiState.manualMedicareIsPartBActive = 'YES';
 					};
-
+					if(this.cpc.auto_commercial_is_match_found === 'NO'){
+						this.uiState.manualDeterminationCategory = 'INVALID';
+					}					
+					this.refreshUi();
 				}
 			});
 		}