Flowsheets UI (wip)

public/css/style.css

@@ -1210,5 +1210,27 @@ button.note-templates-trigger-assessment {
     width: calc(100% - 2rem);
 }
 .flowsheets-table td {
-    padding: 9px 10px;
+    padding: 0 10px;
+    height: 38px;
+    max-height: 38px;
+    min-height: 38px;
+    vertical-align: middle !important;
+}
+.flowsheets-table .expand {
+    display: none;
+}
+.flowsheets-table .collapse {
+    display: block;
+}
+.flowsheets-table .collapsed .expand {
+    display: block;
+}
+.flowsheets-table .collapsed .collapse {
+    display: none;
+}
+.flowsheets-table tr {
+
+}
+.flowsheets-table .collapsed tr:not(:first-child) {
+    display: none;
 }

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

@@ -51,7 +51,6 @@
                     <td class="pl-3">Measurement Type</td>
                 </tr>
                 </thead>
-                <tbody>
                 @foreach($patient->clientPrograms as $program)
                     <?php
                     $programCategories = explode('|', $program->measurement_labels);
@@ -64,16 +63,23 @@
                     });
                     $programMonth = $program->getProgramMonth(strtoupper(date('F')), date('Y'));
                     ?>
+                    <tbody data-program-uid="{{$program->uid}}">
                     <tr>
-                        <td class="px-3 font-weight-bold text-nowrap">{{$program->title}}</td>
+                        <td class="px-3 font-weight-bold text-nowrap">
+                            <div class="d-flex align-items-center">
+                                <span>{{$program->title}}</span>
+                                <a href="#" class="on-hover-opaque expand ml-auto" onclick="return expandProgram('{{$program->uid}}')"><i class="fa fa-plus-circle"></i></a>
+                                <a href="#" class="on-hover-opaque collapse ml-auto" onclick="return collapseProgram('{{$program->uid}}')"><i class="fa fa-minus-circle"></i></a>
+                            </div>
+                        </td>
                     </tr>
                     @foreach($programCategories as $category)
                         <tr>
                             <td class="pl-5 text-nowrap">{{$category}}</td>
                         </tr>
                     @endforeach
+                    </tbody>
                 @endforeach
-                </tbody>
             </table>
         </div>
         <div class="flex-grow-1 overflow-auto border-right">
@@ -85,7 +91,6 @@
                     @endforeach
                 </tr>
                 </thead>
-                <tbody>
                 @foreach($patient->clientPrograms as $program)
                     <?php
                     $programCategories = explode('|', $program->measurement_labels);
@@ -93,9 +98,10 @@
                         return !empty($_item);
                     });
                     ?>
+                    <tbody data-program-uid="{{$program->uid}}">
                     <tr>
                         @foreach($dates as $date)
-                            <td>&nbsp;</td>
+                            <td></td>
                         @endforeach
                     </tr>
                     @foreach($programCategories as $category)
@@ -112,21 +118,31 @@
                                             <span class="d-none text-secondary text-sm">({{date('H:i', strtotime($m['effective_date']))}})</span>
                                         </div>
                                     @else
-                                        -
+                                        <div class="text-nowrap text-center text-secondary-light">
+                                            -
+                                        </div>
                                     @endif
                                 </td>
                             @endforeach
                         </tr>
                     @endforeach
+                    </tbody>
                 @endforeach
-                </tbody>
             </table>
         </div>
     </div>
 
     <script>
         function flowsheetsFilterChanged() {
-            alert(1);
+
+        }
+        function expandProgram(_uid) {
+            $('tbody[data-program-uid="' + _uid + '"]').removeClass('collapsed');
+            return false;
+        }
+        function collapseProgram(_uid) {
+            $('tbody[data-program-uid="' + _uid + '"]').addClass('collapsed');
+            return false;
         }
     </script>
 @endsection