Apointments UI - edit appointment

app/Http/Controllers/HomeController.php

@@ -291,6 +291,7 @@ class HomeController extends Controller
                 $appointment->inHowManyHours = 'Appt. in ' . substr($appointment->inHowManyHours, 1);
             }
             $appointment->clientUid = $appointment->client->uid;
+            $appointment->proUid = $appointment->pro->uid;
 
         }
 

resources/views/app/dashboard.blade.php

@@ -104,6 +104,47 @@
                         </div>
                         <div>
                             Status: <b class="text-secondary">@{{ event.status }}</b>
+                            &nbsp;/&nbsp;
+                            <span relative class="ml-1" moe>
+                                <a start show v-on:click.prevent="return showEditForm($event.target)">
+                                    <i class="fa fa-edit"></i>
+                                    Edit Appointment
+                                </a>
+                                <form url="/api/appointment/update" right>
+                                    <input type="hidden" name="uid" :value="event.uid">
+                                    <input type="hidden" name="title" value="MCP Appointment">
+                                    <div class="mb-2">
+                                        <label class="text-secondary text-sm">Pro</label>
+                                        <select name="proUid" class="form-control form-control-sm">
+                                            <option value=""> --select-- </option>
+                                            @foreach($pros as $iPro)
+                                                <option :selected="event.proUid === '{{$iPro->uid}}'" value="{{$iPro->uid}}">{{$iPro->displayName()}}</option>
+                                            @endforeach
+                                        </select>
+                                    </div>
+                                    <div class="mb-2">
+                                        <label class="text-secondary text-sm">Date</label>
+                                        <input autofocus type="date" name="date" min="{{ date('Y-m-d') }}"
+                                               :value="event.dateYMD" class="form-control form-control-sm">
+                                    </div>
+                                    <div class="mb-2">
+                                        <label class="text-secondary text-sm">Start Time</label>
+                                        <input type="time" name="startTime" class="form-control form-control-sm"
+                                               :value="event.friendlyStartTime">
+                                    </div>
+                                    <div class="mb-2">
+                                        <label class="text-secondary text-sm">End Time</label>
+                                        <input type="time" name="endTime" class="form-control form-control-sm"
+                                               :value="event.friendlyEndTime">
+                                    </div>
+                                    <div>
+                                        <button submit class="btn btn-sm btn-primary mr-1"
+                                                v-on:click.prevent="return submitEditForm($event.target)">Submit</button>
+                                        <button cancel class="btn btn-sm btn-default border"
+                                                v-on:click.prevent="return cancelEditForm($event.target)">Cancel</button>
+                                    </div>
+                                </form>
+                            </span>
                         </div>
                     </div>
                     <div class="ml-auto">
@@ -189,7 +230,40 @@
                             }
                         }
                     }, 'json')
-                }
+                },
+                showEditForm: function(_trigger) {
+                    let form = $(_trigger).closest('[moe]').find('form').first();
+                    showMoeFormMask();
+                    form.show();
+                    setTimeout(function() {
+                        initPrimaryForm(form);
+                    }, 0);
+                },
+                submitEditForm: function(_trigger) {
+                    let form = $(_trigger).closest('[moe]').find('form').first();
+                    if(!form[0].checkValidity()) {
+                        form[0].reportValidity();
+                        return;
+                    }
+                    $.post(form.attr('url'), form.serialize(), function(_data) {
+                        if(_data && _data.success) {
+                            fastReload();
+                        }
+                        else {
+                            if(_data.message) {
+                                toastr.error(_data.message);
+                            }
+                            else {
+                                toastr.error('Unable to update the appointment');
+                            }
+                        }
+                    });
+                },
+                cancelEditForm: function(_trigger) {
+                    let form = $(_trigger).closest('[moe]').find('form').first();
+                    hideMoeFormMask();
+                    form.hide();
+                },
             },
             mounted: function () {
                 var calendarElem = $('.pro-dashboard-inline-calendar'), self = this;