Rich/structured cm entries [WIP - DO NOT MERGE]

public/css/style.css

@@ -167,6 +167,9 @@ body>nav.navbar {
 .stag-content {
     height: calc(100% - 55px);
 }
+[moe][large] form {
+    width: 450px;
+}
 .moe-disabled[moe] {
     cursor: not-allowed;
 }
@@ -187,6 +190,9 @@ body>nav.navbar {
 .mcp-theme-1 .form-control.form-control-sm {
     min-width: 200px;
 }
+.mcp-theme-1 [large] .form-control.form-control-sm {
+    min-width: unset;
+}
 [wide] .form-control.form-control-sm {
     min-width: 350px;
 }

resources/views/app/entry-templates/cm/default.blade.php

@@ -0,0 +1,74 @@
+<div id="cm-default-{{ $careMonth->uid }}">
+    <input type="hidden" class="w-100 mb-2" name="contentText" v-model="contentText">
+    <input type="hidden" class="w-100 mb-2" name="contentDetail" v-model="contentDetail">
+    <div class="mb-2" style="">
+        <label class="mb-0 d-block d-flex align-items-center">
+            <input type="checkbox" v-model="called_patient" name="called_patient" class="mr-1">
+            <span>Called the patient</span>
+        </label>
+        <div class="pl-4 mt-2" v-if="called_patient">
+            <div class="mb-2">
+                <label class="mb-0 d-block d-flex align-items-center">
+                    <input type="radio" v-model="called_patient_result" name="called_patient_result" class="mr-1" value="no_answer">
+                    <span>No Answer</span>
+                </label>
+                <div class="pl-4 mt-2" v-if="called_patient_result === 'no_answer'">
+                    <div class="mb-2">
+                        <div class="mb-2">
+                            <label class="mb-0 d-block d-flex align-items-center">
+                                <input type="radio" v-model="no_answer_result" name="no_answer_result" value="left_voicemail" class="mr-1">
+                                <span>Left voicemail on machine</span>
+                            </label>
+                        </div>
+                        <div class="mb-2">
+                            <label class="mb-0 d-block d-flex align-items-center">
+                                <input type="radio" v-model="no_answer_result" name="no_answer_result" value="voicemailbox_full" class="mr-1">
+                                <span>Voicemail box was full</span>
+                            </label>
+                        </div>
+                        <div class="mb-2">
+                            <label class="mb-0 d-block d-flex align-items-center">
+                                <input type="radio" v-model="no_answer_result" name="no_answer_result" value="will_try_later" class="mr-1">
+                                <span>Disconnected w/o voicemail, will try again later</span>
+                            </label>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="mb-2">
+                <label class="mb-0 d-block d-flex align-items-center">
+                    <input type="radio" v-model="called_patient_result" name="called_patient_result" class="mr-1" value="spoke_to_patient">
+                    Spoke to patient
+                </label>
+            </div>
+            <div class="mb-2">
+                <label class="mb-0 d-block d-flex align-items-center">
+                    <input type="radio" v-model="called_patient_result" name="called_patient_result" class="mr-1" value="spoke_to_other">
+                    Spoke to someone other than the patient
+                </label>
+                <div class="pl-4 mt-2" v-if="called_patient_result === 'spoke_to_other'">
+                    <div class="mb-2">
+                        <label class="mb-0 d-block d-flex align-items-center">
+                            <span class="mr-1">Who</span>
+                            <input type="text" v-model="spoke_to_whom" name="spoke_to_whom" class="form-control form-control-sm"></label>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<script>
+    (function() {
+        var cmEntryApp = new Vue({
+            el: '#cm-default-{{ $careMonth->uid }}',
+            data: {
+                contentText: '',
+                contentDetail: '',
+                called_patient: '',
+                called_patient_result: '',
+                no_answer_result: '',
+                spoke_to_whom: '',
+            }
+        });
+    })();
+</script>

resources/views/app/patient/care-month/dashboard.blade.php

@@ -219,59 +219,65 @@
                             <h6 class="my-0 text-secondary font-weight-bold text-dark lh-24px">CM Time Entries</h6>
                             <span class="mx-2 text-secondary">|</span>
                             @if(!$activeCMBill)
-                                <div moe>
+                                <div moe large>
                                     <a start show class="py-0 mb-3">Add</a>
                                     <form url="/api/careMonthEntry/createForCm">
                                         <input type="hidden" name="careMonthUid" value="{{ $careMonth->uid }}">
                                         <div class="mb-2">
-                                            <select class="form-control form-control-sm" name="proUid">
-                                                <option value="">-- Select Pro --</option>
-                                                @foreach($pros as $iPro)
-                                                    <option {{ $iPro->uid === $pro->uid ? 'selected' : '' }}
-                                                            value="{{ $iPro->uid }}">{{ $iPro->displayName() }}</option>
-                                                @endforeach
-                                            </select>
-                                        </div>
-                                        <div class="mb-2">
-                                            <?php
-                                            $sD = strtotime($careMonth->start_date);
-                                            $y = date('Y', $sD);
-                                            $m = date('m', $sD);
-                                            $d = date('t', $sD);
-                                            $yCurrent = date('Y');
-                                            $mCurrent = date('m');
-                                            if($y === $yCurrent && $m === $mCurrent) {
-                                                $d = date('d');
-                                            }
-                                            ?>
-                                            <input autofocus type="date" min="{{ date($y . '-' . $m . '-01') }}" max="{{ date($y . '-' . $m . '-' . $d) }}" class="form-control form-control-sm" name="effectiveDate"
-                                                   value="" placeholder="Effective Date">
-                                        </div>
-                                        <div class="mb-2">
-                                            <input type="number" min="0" max="5400" class="form-control form-control-sm cm-time-value" name="timeInSeconds"
-                                                   value="" placeholder="Time in Seconds">
-                                        </div>
-                                        <div class="mb-2 d-flex align-items-center">
-                                            <span>Time Specific:</span>
-                                            <input type="checkbox" name="isTimeSpecific" class="ml-1"
-                                                   onchange="enableTimeSpecificFields(this.checked, 'cm-time-value', 'cm-time-range')">
-                                        </div>
-                                        <div class="mb-2">
-                                            <input type="time" class="form-control form-control-sm cm-time-range" name="startingTime"
-                                                   value="" placeholder="Starting Time" disabled>
-                                        </div>
-                                        <div class="mb-2">
-                                            <input type="time" class="form-control form-control-sm cm-time-range" name="endingTime"
-                                                   value="" placeholder="Ending Time" disabled>
-                                        </div>
-                                        <div class="mb-2">
-                                            <input type="text" class="form-control form-control-sm" name="contentText"
-                                                   value="" placeholder="Content Text">
+                                            <div class="row">
+                                                <div class="col-4 pr-0">
+                                                    <select class="form-control form-control-sm w-100" name="proUid">
+                                                        <option value="">-- Select Pro --</option>
+                                                        @foreach($pros as $iPro)
+                                                            <option {{ $iPro->uid === $pro->uid ? 'selected' : '' }}
+                                                                    value="{{ $iPro->uid }}">{{ $iPro->displayName() }}</option>
+                                                        @endforeach
+                                                    </select>
+                                                </div>
+                                                <div class="col-4 pr-0">
+                                                    <?php
+                                                    $sD = strtotime($careMonth->start_date);
+                                                    $y = date('Y', $sD);
+                                                    $m = date('m', $sD);
+                                                    $d = date('t', $sD);
+                                                    $yCurrent = date('Y');
+                                                    $mCurrent = date('m');
+                                                    if($y === $yCurrent && $m === $mCurrent) {
+                                                        $d = date('d');
+                                                    }
+                                                    ?>
+                                                    <input type="date" min="{{ date($y . '-' . $m . '-01') }}" max="{{ date($y . '-' . $m . '-' . $d) }}"
+                                                           class="form-control form-control-sm w-100" name="effectiveDate"
+                                                           value="{{ date('Y-m-d') }}" placeholder="Effective Date">
+                                                </div>
+                                                <div class="col-4">
+                                                    <input autofocus type="number" min="0" max="5400" class="form-control form-control-sm w-100 cm-time-value" name="timeInSeconds"
+                                                           value="" placeholder="Time in Seconds">
+                                                </div>
+                                            </div>
                                         </div>
                                         <div class="mb-2">
-                                            <input type="text" class="form-control form-control-sm" name="contentDetail"
-                                                   value="" placeholder="Content Detail">
+                                            <div class="row">
+                                                <div class="col-4 pr-0 d-flex align-items-center">
+                                                    <div class="d-flex align-items-center">
+                                                        <span>Time Specific:</span>
+                                                        <input type="checkbox" name="isTimeSpecific" class="ml-1"
+                                                               onchange="enableTimeSpecificFields(this.checked, 'cm-time-value', 'cm-time-range')">
+                                                    </div>
+                                                </div>
+                                                <div class="col-4 pr-0">
+                                                    <input type="time" class="form-control form-control-sm cm-time-range" name="startingTime"
+                                                           value="" placeholder="Starting Time" disabled>
+                                                </div>
+                                                <div class="col-4">
+                                                    <input type="time" class="form-control form-control-sm cm-time-range" name="endingTime"
+                                                           value="" placeholder="Ending Time" disabled>
+                                                </div>
+                                            </div>
                                         </div>
+                                        <hr class="my-2">
+                                        @include('app/entry-templates/cm/default')
+                                        <hr class="my-2">
                                         <div class="d-flex align-items-center">
                                             <button class="btn btn-sm btn-primary mr-2" submit>Save</button>
                                             <button class="btn btn-sm btn-default mr-2 border" cancel>Cancel</button>

resources/views/layouts/template.blade.php

@@ -10,6 +10,9 @@
     <!-- Fonts -->
     <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
 
+    {{-- vue --}}
+    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
+
     {{-- Quill RTE --}}
     <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
     <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>