Updated mc dashboard appointments

public/css/style.css

@@ -2324,4 +2324,12 @@ table .stag-filter-hide {
 }
 table .stag-filter-highlight {
     background: rgb(255 215 215);
+}
+
+.event-bg-green {
+    background-color: #f6ffeb;
+}
+
+.event-bg-gray {
+    background-color: #ececec;
 }

resources/views/app/dashboard-mcp.blade.php

@@ -604,7 +604,12 @@
                                 default:
                                     return 'N/A';
                             }
-                        }
+                        },
+                        getEventBgColor: function(status){
+                            if(status === 'COMPLETED') return 'event-bg-green';
+                            if(status === 'CANCELLED') return 'event-bg-gray';
+                            return '';
+                        },
                     },
                     mounted: function () {
                         let self = this;

resources/views/app/mcp/dashboard/appointment-change-status.blade.php

@@ -0,0 +1,17 @@
+<div class="ml-2" moe relative>
+	<a href="#" start show><i class="fa fa-edit"></i></a>
+	<form url="/api/appointment/updateStatus">
+	<input type="hidden" name="uid" :value="event.uid">
+		<p class="text-nowrap">Change appointment status</p>
+		<select name="status" class="form-control input-sm bg-light">
+			<option value="PENDING">PENDING</option>
+			<option value="CONFIRMED">CONFIRMED</option>
+			<option value="CANCELLED">CANCELLED</option>
+			<option value="COMPLETED">COMPLETED</option>
+		</select>
+		<div class="mb-0">
+			<button class="btn btn-primary btn-sm" submit>Submit</button>
+			<button class="btn btn-default border btn-sm" cancel>Cancel</button>
+		</div>
+	</form>
+</div>

resources/views/app/mcp/dashboard/appointments.blade.php

@@ -1,6 +1,6 @@
 <table v-if="events.length > 0"
        class="mb-0 table table-sm table-bordered appointments">
-    <tr v-for="event in events" class="">
+    <tr v-for="event in events" :class="getEventBgColor(event.status)">
         <td>
             <a :href="'/patients/view/' + event.clientUid" class="font-weight-bold">@{{
                 event.clientName }}</a><br/>
@@ -17,32 +17,33 @@
                                                   </span>
         </td>
         <td>
-            <div class="d-flexi align-items-baseline">
-                <!-- <div v-if="event.status === 'CREATED'"
-                     class="text-warning-mellow font-weight-bold">
-                    <i class="fa fa-exclamation-triangle"></i>
-                    Confirmation pending
-                </div>
-                <div v-else-if="event.status === 'CONFIRMED'"
-                     class="text-success font-weight-bold">
-                    <i class="fa fa-check"></i>
-                    Confirmed by the patient
-                </div>
-                <div v-else-if="event.status === 'REJECTED'"
-                     class="text-danger font-weight-bold">
-                    <i class="fa fa-stop"></i>
-                    Rejected by the patient
-                </div> -->
-                <select v-model="event.newStatus"
-                        class="form-control input-sm bg-light"
-                        v-on:change="updateStatus(event)">
-                    <option value="PENDING">PENDING</option>
-                    <option value="CONFIRMED">CONFIRMED</option>
-                    <option value="CANCELLED">CANCELLED</option>
-                    <option value="COMPLETED">COMPLETED</option>
-                </select>
+            <div class="d-flex flex-column">
+                <div class="d-flex align-items-center">
+                    <div v-if="event.status === 'PENDING'"
+                        class="text-warning-mellow font-weight-bold">
+                        <i class="fa fa-exclamation-triangle"></i>
+                        Pending
+                    </div>
+                    <div v-else-if="event.status === 'CONFIRMED'"
+                        class="text-success font-weight-bold">
+                        <i class="fa fa-check"></i>
+                        Confirmed
+                    </div>
+                    <div v-else-if="event.status === 'CANCELLED'"
+                        class="text-danger font-weight-bold">
+                        <i class="fa fa-stop"></i>
+                        Cancelled
+                    </div>
+                    <div v-else-if="event.status === 'COMPLETED'"
+                        class="text-success font-weight-bold">
+                        <i class="far fa-calendar-check"></i>
+                        Completed
+                    </div>
+                    @include('app.mcp.dashboard.appointment-change-status')
+                </div>              
+                
                 <div v-if="selectedDate === '{{ date('Y-m-d') }}'"
-                     class="pt-1 text-right"
+                     class=""
                      :class="event.started ? 'text-danger': 'text-secondary'">
                     @{{ event.inHowManyHours }}
                 </div>