Programs - ICD editor + auto-complete feature

resources/views/app/patient/programs.blade.php

@@ -1,5 +1,6 @@
 @extends ('layouts.patient')
 @section('inner-content')
+    <?php // $pro->pro_type = 'INDIVIDUAL'; ?>
     <link href="/select2/select2.min.css" rel="stylesheet" />
     <script src="/select2/select2.min.js"></script>
     <div id="programsComponent">
@@ -48,6 +49,10 @@
             $programCategories = array_filter($programCategories, function($_item) {
                 return !empty($_item);
             });
+            $programICDs = explode('|', $program->icds);
+            $programICDs = array_filter($programICDs, function($_item) {
+                return !empty($_item);
+            });
             $programMonth = null;
             if($filter === '') {
                 $programMonth = $program->getProgramMonth(strtoupper(date('F')), date('Y'));
@@ -236,7 +241,7 @@
                                     ?>
                                     <span class="mr-2">{{ $labels }}</span>
                                     @if($pro->pro_type === 'ADMIN')
-                                    <div moe>
+                                    <div moe large>
                                         <a href="#" show start class="on-hover-opaque"><i class="fa fa-edit"></i></a>
                                         <form url="/api/clientProgram/updateCategories">
                                             <input type="hidden" name="uid" value="{{ $program->uid }}">
@@ -264,15 +269,35 @@
                             <div class="border-bottom py-1 px-3">
                                 <div class="d-flex">
                                     <span class="mr-2 text-secondary">ICDs: </span>
-                                    <span class="mr-2 font-weight-bold">{{ $program->icds }}</span>
+                                    <?php
+                                    $labels = '-';
+                                    if ($programICDs && count($programICDs)) {
+                                        $labels = implode(", ", $programICDs);
+                                    }
+                                    ?>
+                                    <span class="mr-2">{{ $labels }}</span>
                                     @if($pro->pro_type === 'ADMIN')
-                                    <div moe>
+                                    <div moe large>
                                         <a href="#" show start class="on-hover-opaque"><i class="fa fa-edit"></i></a>
                                         <form url="/api/clientProgram/updateIcds">
                                             <input type="hidden" name="uid" value="{{ $program->uid }}">
+                                            <input type="hidden" name="icds" v-model="existingICDsFlattened['{{ $program->uid }}']">
                                             <div class="mb-2">
-                                                <label class="mb-1 text-sm text-secondary">ICDs</label>
-                                                <input type="text" class="form-control form-control-sm" name="icds" value="{{ $program->icds }}" placeholder="ICDs">
+                                                <label class="mb-1 text-sm text-secondary">ICDs
+                                                    <a href="#" class="ml-3"
+                                                       v-on:click.prevent="addICDItem('{{ $program->uid }}')">+ Add</a>
+                                                </label>
+                                                <div v-for="(icd, index) in existingICDs['{{ $program->uid }}']" class="d-flex align-items-center mb-2">
+                                                    <input required type="text"
+                                                           data-field="icd" data-program="{{ $program->uid }}" :data-index="index"
+                                                           v-model="existingICDs['{{ $program->uid }}'][index]"
+                                                           class="form-control form-control-sm flex-grow-1">
+                                                    <a v-if="existingICDs['{{ $program->uid }}'].length > 1"
+                                                       class="on-hover-opaque text-danger ml-2"
+                                                       v-on:click.prevent="existingICDs['{{ $program->uid }}'].splice(index, 1)">
+                                                        <i class="fa fa-trash-alt"></i>
+                                                    </a>
+                                                </div>
                                             </div>
                                             <div class="mb-0">
                                                 <button class="btn btn-primary btn-sm" submit="">Submit</button>
@@ -456,7 +481,7 @@
                                     </div>
                                 @endif
                                 @if(!!$programMonth)
-                                    <span class="ml-auto pr-2 text-secondary">{!!  $minutes ? '<b>' . $minutes . '</b> mins billed' : 'Entry pending' !!} </span>
+                                    <span class="ml-auto pr-2 text-secondary">{!!  $minutes ? '<b>' . $minutes . '</b> mins billed' : '<i class="fa fa-exclamation-triangle"></i>&nbsp;Entry pending' !!} </span>
                                 @elseif($filter === '')
                                     <span class="ml-auto pr-2 text-secondary">Entry pending</span>
                                 @endif
@@ -483,6 +508,14 @@
             foreach($patient->clientPrograms as $program) {
                 $measurementLabels[$program->uid] = $program->measurement_labels;
             }
+            $icds = [];
+            $icdsFlattened = [];
+            foreach($patient->clientPrograms as $program) {
+                $icds[$program->uid] = array_values(array_filter(explode("|", $program->icds), function($_item) {
+                    return !empty($_item);
+                }));
+                $icdsFlattened[$program->uid] = $program->icds;
+            }
         ?>
         (function() {
             function init() {
@@ -492,6 +525,61 @@
                     data: {
                         newMeasurementLabels: '',
                         existingMeasurementLabels: <?= json_encode($measurementLabels) ?>,
+                        existingICDs: <?= json_encode($icds) ?>,
+                        existingICDsFlattened: <?= json_encode($icdsFlattened) ?>,
+                    },
+                    methods: {
+                        combine: function(_array) {
+                            if(!_array || !_array.length) return '';
+                            let valid = _array.filter(function(_x) {
+                                return !!_x;
+                            });
+                            if(!valid || !valid.length) return '';
+                            return '|' + valid.join('|') + '|';
+                        },
+                        addICDItem: function(_programUid) {
+                            this.existingICDs[_programUid].push('');
+                            let self = this;
+                            Vue.nextTick(function() {
+                                self.initICDAutoSuggest();
+                            });
+                        },
+                        initICDAutoSuggest: function() {
+                            let self = this;
+                            $('#programsComponent input[type="text"][data-field="icd"]:not([ac-initialized])').each(function() {
+                                var elem = this,
+                                    dynID = 'icd-' + Math.ceil(Math.random() * 1000000),
+                                    vueIndex = $(this).attr('data-index');
+                                $(elem).attr('id', dynID);
+                                new window.Def.Autocompleter.Search(dynID,
+                                    'https://clinicaltables.nlm.nih.gov/api/icd10cm/v3/search?sf=code,name&ef=name', {
+                                        tableFormat: true,
+                                        valueCols: [0],
+                                        colHeaders: ['Code', 'Name'],
+                                    }
+                                );
+                                window.Def.Autocompleter.Event.observeListSelections(dynID, function() {
+                                    let autocomp = elem.autocomp, acData = autocomp.getSelectedItemData();
+                                    self.existingICDs[$(elem).attr('data-program')][+$(elem).attr('data-index')] = acData[0].code;
+                                    self.existingICDsFlattened[$(elem).attr('data-program')] = self.combine(self.existingICDs[$(elem).attr('data-program')]);
+                                    return false;
+                                });
+                                $(elem).attr('ac-initialized', 1);
+                            });
+                        },
+                    },
+                    watch: {
+                        existingICDs: {
+                            handler: function(val, oldVal) {
+                                let self = this;
+                                for(let x in this.existingICDs) {
+                                    if(this.existingICDs.hasOwnProperty(x)) {
+                                        this.existingICDsFlattened[x] = this.combine(this.existingICDs[x]);
+                                    }
+                                }
+                            },
+                            deep: true
+                        }
                     },
                     mounted: function() {
                         let self = this;
@@ -522,8 +610,21 @@
                                 else {
                                     self.existingMeasurementLabels[$(this).attr('data-uid')] = '';
                                 }
-
                             });
+
+                        // give 1 row min for editing
+                        for(let x in this.existingICDs) {
+                            if(this.existingICDs.hasOwnProperty(x)) {
+                                if(!this.existingICDs[x] || !this.existingICDs[x].length || !Array.isArray(this.existingICDs[x])) {
+                                    this.existingICDs[x] = [''];
+                                }
+                            }
+                        }
+
+                        Vue.nextTick(function() {
+                            self.initICDAutoSuggest();
+                        });
+
                     }
                 });
             }