Tickets v1 (wip) - section expand/collapse

public/css/style.css

@@ -1004,7 +1004,6 @@ body .node input[type="number"] {
 
 /* asana style ticket management */
 .pro-initials {
-    font-size: 10px;
     border-radius: 100%;
     height: 24px;
     width: 24px;
@@ -1017,6 +1016,13 @@ body .node input[type="number"] {
     color: #fff;
     font-size: 10px !important;
 }
+.ticket-section {
+
+}
+.ticket-section.ticket-section-collapsed {
+    max-height: 0;
+    overflow: hidden;
+}
 .tickets-table tbody tr {
     transition: background-color 0.2s ease;
 }

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

@@ -52,7 +52,7 @@
     <div id="ticketsApp" v-cloak>
         <div class="d-flex align-items-end pb-3">
             <h4 class="font-weight-bold m-0 font-size-14">Tickets</h4>
-            <select class="ml-auto max-width-300px form-control form-control-sm"
+            <select class="ml-auto max-width-300px form-control form-control-sm pr-2"
                     v-model="statusFilter">
                 <option value="open">Open tickets (@{{ numOpen }})</option>
                 <option value="closed">Closed tickets (@{{ numClosed }})</option>
@@ -60,7 +60,7 @@
             </select>
         </div>
 
-        <div>
+        <div class="my-4">
             <div class="d-flex align-items-center pb-2">
                 <h4 class="font-weight-bold m-0 text-secondary font-size-14">ERx
                     <span v-if="statusFilter === 'open'" class="text-secondary font-weight-normal">(@{{ erxNumOpen }} open)</span>
@@ -69,8 +69,19 @@
                 </h4>
                 <a class="py-0 font-weight-normal c-pointer btn btn-sm btn-info text-white rounded-0 mx-4"
                    v-on:click.prevent="showErxPopup()">Add</a>
+                <a class="py-0 font-weight-normal c-pointer flex-grow-1 text-right pr-2"
+                   v-if="!erxCollapsed"
+                   v-on:click.prevent="erxCollapsed = true">
+                    <i class="text-secondary fa fa-chevron-up"></i>
+                </a>
+                <a class="py-0 font-weight-normal c-pointer flex-grow-1 text-right pr-2"
+                   v-if="erxCollapsed"
+                   v-on:click.prevent="erxCollapsed = false">
+                    <i class="text-secondary fa fa-chevron-down"></i>
+                </a>
             </div>
-            <table class="table table-sm tickets-table mb-0">
+            <div class="ticket-section" :class="erxCollapsed ? 'ticket-section-collapsed' : ''">
+                <table class="table table-sm tickets-table mb-0">
                 <tbody>
                 <tr v-for="(item, index) in ticketsByType.erx"
                     v-if="statusFilter === 'all' || (statusFilter === 'open' && item.is_open) || (statusFilter === 'closed' && !item.is_open)"
@@ -132,6 +143,7 @@
                 </tr>
                 </tbody>
             </table>
+            </div>
             <div class="stag-popup stag-popup-sm stag-slide mcp-theme-1" stag-popup-key="erx-popup">
                 <form method="POST" action="">
                     <h3 class="stag-popup-title mb-2">
@@ -283,6 +295,7 @@
                         statusFilter: 'open',
 
                         // erx
+                        erxCollapsed: false,
                         erxPopupMode: 'add',
                         erxPopupItem: {
                             uid: '',