|
@@ -109,7 +109,7 @@
|
|
|
<div>
|
|
|
Status: <b class="text-secondary">@{{ event.status }}</b>
|
|
|
/
|
|
|
- <a target="_top" :href="'/patients/view/' + event.clientUid + '/manage-appointment/' + event.uid">
|
|
|
+ <a target="_top" :href="'/patients/view/' + event.clientUid + '/calendar/' + event.uid">
|
|
|
<i class="fa fa-edit"></i>
|
|
|
Edit Appointment
|
|
|
</a>
|
|
@@ -201,21 +201,42 @@
|
|
|
data: {
|
|
|
selectedDate: '{{ date('Y-m-d') }}',
|
|
|
selectedStatus: 'CREATED',
|
|
|
- events: {!! json_encode($appointments) !!},
|
|
|
+ events: [],
|
|
|
numEventsForDate: 0,
|
|
|
filterStatus: '',
|
|
|
+ calendarElem: null,
|
|
|
+ currentMonth: null,
|
|
|
+ currentYear: null,
|
|
|
},
|
|
|
methods: {
|
|
|
+ formatDate: function (date) {
|
|
|
+ let d = new Date(date),
|
|
|
+ month = '' + (d.getMonth() + 1),
|
|
|
+ day = '' + d.getDate(),
|
|
|
+ year = d.getFullYear();
|
|
|
+
|
|
|
+ if (month.length < 2)
|
|
|
+ month = '0' + month;
|
|
|
+ if (day.length < 2)
|
|
|
+ day = '0' + day;
|
|
|
+
|
|
|
+ return [year, month, day].join('-');
|
|
|
+ },
|
|
|
onDateChange: function (_newDate) {
|
|
|
- this.highlightDatesWithEvents();
|
|
|
- this.selectedDate = _newDate;
|
|
|
- this.updateNumEventsForDate();
|
|
|
+ // this.loadEvents();
|
|
|
+
|
|
|
+ let self = this;
|
|
|
+ self.selectedDate = _newDate;
|
|
|
+ this.loadEvents(function() {
|
|
|
+ self.highlightDatesWithEvents();
|
|
|
+ self.updateNumEventsForDate();
|
|
|
+ });
|
|
|
},
|
|
|
selectToday: function () {
|
|
|
$('.pro-dashboard-inline-calendar table td[data-date]').removeClass('active');
|
|
|
$('.pro-dashboard-inline-calendar table td[data-date="{{ $milliseconds }}"]')
|
|
|
.addClass('active');
|
|
|
- this.onDateChange('{{ date('Y-m-d') }}');
|
|
|
+ // this.onDateChange('{{ date('Y-m-d') }}');
|
|
|
},
|
|
|
highlightDatesWithEvents: function () {
|
|
|
$('.pro-dashboard-inline-calendar table td[data-date]').removeAttr('has-events');
|
|
@@ -285,18 +306,40 @@
|
|
|
hideMoeFormMask();
|
|
|
form.hide();
|
|
|
},
|
|
|
+ loadEvents: function(_callback) {
|
|
|
+ let today = this.calendarElem.datepicker('getDate'),
|
|
|
+ firstOfMonth = new Date(today.getFullYear(), today.getMonth(), 1),
|
|
|
+ lastOfMonth = new Date(today.getFullYear(), today.getMonth() + 1, 0),
|
|
|
+ self = this;
|
|
|
+ if(this.currentMonth === today.getMonth() && this.currentYear === today.getFullYear()) {
|
|
|
+ _callback.call(self);
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ $.get('/pro-dashboard-events/' +
|
|
|
+ this.formatDate(firstOfMonth) + '/' +
|
|
|
+ this.formatDate(lastOfMonth), function(_data) {
|
|
|
+ self.events = _data;
|
|
|
+ self.currentMonth = firstOfMonth.getMonth();
|
|
|
+ self.currentYear = firstOfMonth.getFullYear();
|
|
|
+ _callback.call(self);
|
|
|
+ }, 'json');
|
|
|
+ }
|
|
|
+ }
|
|
|
},
|
|
|
mounted: function () {
|
|
|
- var calendarElem = $('.pro-dashboard-inline-calendar'), self = this;
|
|
|
- calendarElem.datepicker({
|
|
|
+ let self = this;
|
|
|
+ this.calendarElem = $('.pro-dashboard-inline-calendar');
|
|
|
+ this.calendarElem.datepicker({
|
|
|
format: 'yyyy-mm-dd'
|
|
|
});
|
|
|
- calendarElem.on('changeDate', function () {
|
|
|
- self.onDateChange(calendarElem.datepicker('getFormattedDate'));
|
|
|
+ this.calendarElem.on('changeDate', function () {
|
|
|
+ self.onDateChange(self.calendarElem.datepicker('getFormattedDate'));
|
|
|
});
|
|
|
- self.selectToday();
|
|
|
- self.updateNumEventsForDate();
|
|
|
- console.log(this.events)
|
|
|
+ this.selectToday();
|
|
|
+ this.updateNumEventsForDate();
|
|
|
+
|
|
|
+ // this.loadEvents();
|
|
|
+ $('.datepicker-days .day.active').trigger('click');
|
|
|
}
|
|
|
});
|
|
|
});
|