dynamic ICD fields

resources/views/app/patient/partials/put-rm-reasons.blade.php

@@ -41,45 +41,28 @@ if($recordType === 'NOTE'){
 	<a start show onclick="return refreshICDs()"><i class="fas fa-edit on-hover-opaque"></i></a>
 	<form url="{{ $submitUrl }}" class="mcp-theme-1">
 		<input type="hidden" name="uid" value="{{$record->uid}}">
-		<div>
+		<div id="icd{{@$recordType}}Component">
 			<table class="table table-sm table-bordered">
 				<thead class="bg-light">
 					<tr>
 						<th class="border-bottom-0">ICD</th>
 						<th class="border-bottom-0">Description</th>
+						<th class="border-bottom-0" v-if="fields.length > 1"></th>
 					</tr>
 				</thead>
 				<tbody>
-					<tr>
+					<tr v-for="(fl,ind) in fields">
 						<td>
-							<input type="text" class="icd-input" icd-autocomplete-code data-target="input[name=reasonIcd1Description]" name="reasonIcd1" value="{{ $rmDisplayData['icd_1']['reason'] }}" placeholder="ICD 1" />
+							<input type="text" required class="icd-input" @keyup="checkDescription(fl)" icd-autocomplete-code :name="'reasonIcd'+(ind+1)" :data-target="'input[name=reasonIcd'+(ind+1)+'Description]'" v-model="fl.reason" :placeholder="'ICD '+(ind+1)" />
 						</td>
 						<td>
-							<input id="" type="text" class="form-control form-control-sm" icd-autocomplete-description name="reasonIcd1Description" value="{{ $rmDisplayData['icd_1']['description'] }}">
+							<input type="text" class="form-control form-control-sm" icd-autocomplete-description :name="'reasonIcd'+(ind+1)+'Description'" v-model="fl.description">
 						</td>
+						<td v-if="fields.length > 1"><a href="javascript:;" @click.prevent="removeICDCode(fl)" class="text-danger"><i class="fas fa-times-circle"></i></a></td>
 					</tr>
-					<tr>
-						<td>
-							<input type="text" class="icd-input" icd-autocomplete-code name="reasonIcd2" data-target="input[name=reasonIcd2Description]" value="{{ $rmDisplayData['icd_2']['reason'] }}" placeholder="ICD 2" />
-						</td>
-						<td>
-							<input type="text" class="form-control form-control-sm" icd-autocomplete-description name="reasonIcd2Description" value="{{ $rmDisplayData['icd_2']['description'] }}">
-						</td>
-					</tr>
-					<tr>
-						<td>
-							<input type="text" class="icd-input" icd-autocomplete-code name="reasonIcd3" data-target="input[name=reasonIcd3Description]" value="{{ $rmDisplayData['icd_3']['reason'] }}" placeholder="ICD 3" />
-						</td>
-						<td>
-							<input type="text" class="form-control form-control-sm" icd-autocomplete-description name="reasonIcd3Description" value="{{ $rmDisplayData['icd_3']['description'] }}">
-						</td>
-					</tr>
-					<tr>
-						<td>
-							<input type="text" class="icd-input" icd-autocomplete-code name="reasonIcd4" data-target="input[name=reasonIcd4Description]" value="{{ $rmDisplayData['icd_4']['reason'] }}" placeholder="ICD 4" />
-						</td>
-						<td>
-							<input type="text" class="form-control form-control-sm" icd-autocomplete-description name="reasonIcd4Description" value="{{ $rmDisplayData['icd_4']['description'] }}">
+					<tr v-if="fields.length < 4">
+						<td colspan="3">
+							<a href="javascript:;" @click.prevent="addICDCode" class="btn w-100 py-0 btn-sm">+ Add ICD Code</a>
 						</td>
 					</tr>
 				</tbody>
@@ -97,7 +80,7 @@ if($recordType === 'NOTE'){
 </div>
 <script type="text/javascript">
 	function refreshICDs() {
-		if (currentOrder) {
+		if (currentOrder.length) {
 			$('[name=reasonIcd1]').val(currentOrder['reasonIcd1']);
 			$('[name=reasonIcd1Description]').val(currentOrder['reasonIcd1Description']);
 			$('[name=reasonIcd2]').val(currentOrder['reasonIcd2']);
@@ -108,4 +91,43 @@ if($recordType === 'NOTE'){
 			$('[name=reasonIcd4Description]').val(currentOrder['reasonIcd4Description']);
 		}
 	}
+	var icdFieldsComponent = new Vue({
+		el: '#icd{{@$recordType}}Component',
+		delimiters: ["@{{","}}"],
+		data: {
+			fields: [{reason:'', description:''}],
+			params: <?= json_encode($rmDisplayData) ?>
+		},
+		methods: {
+			initFields: function() {
+				var self = this;
+				self.fields = [];
+				for (var x = 1; x <= 4; x++) {
+					if(self.params['icd_'+x].reason) {
+						self.fields.push(self.params['icd_'+x])
+					}
+				}
+				if (self.fields.length == 0) {
+					self.fields.push({reason:'', description:''});
+				}
+			},
+			removeICDCode: function(fl) {
+				var self = this;
+				self.fields.splice(fl, 1);
+			},
+			checkDescription: function(fl) {
+				if (fl.reason == '') {
+					fl.description = '';
+				}
+			},
+			addICDCode: function(){
+				var self = this;
+				self.fields.push({reason:'', description:''});
+			}
+		},
+		mounted: function() {
+			var self = this;
+			self.initFields();
+		}
+	})
 </script>