new sched event handling framework in place
This commit is contained in:
@@ -70,15 +70,21 @@
|
||||
@click:more="viewDay"
|
||||
@click:date="viewDay"
|
||||
@change="fetchEvents"
|
||||
@mousedown:event="startDrag"
|
||||
@mousedown:time="startTime"
|
||||
@mousemove:time="mouseMoveDayView"
|
||||
@mousemove:day="mouseMoveMonthView"
|
||||
@mouseup:day="endDragExtend"
|
||||
@mouseup:time="endDragExtend"
|
||||
@mouseleave.native="cancelDrag"
|
||||
@mousedown:event="onMouseDownEvent"
|
||||
@mousedown:time="onMouseDownTime"
|
||||
@mouseup:day="onMouseUpDay"
|
||||
@mouseup:time="onMouseUpTime"
|
||||
@mouseleave.native="onMouseLeave"
|
||||
@mousemove:time="onMouseMoveTime"
|
||||
@mousemove:day="onMouseMoveDay"
|
||||
>
|
||||
<!-- @click:event="showMoreInfo" -->
|
||||
<!--
|
||||
todo: for svc-schedule also mouseup:time-category mouseup:day-category (which is a bit odd needs investigation)
|
||||
@click:event="showMoreInfo"
|
||||
|
||||
|
||||
|
||||
-->
|
||||
<template v-slot:event="{ event, timed, eventSummary }">
|
||||
<div class="v-event-draggable">
|
||||
<v-icon small :color="event.textColor" class="mr-1">{{
|
||||
@@ -140,9 +146,10 @@
|
||||
v-model="moreInfoDialog"
|
||||
:close-on-content-click="false"
|
||||
:activator="selectedElement"
|
||||
offset-x
|
||||
min-width="350px"
|
||||
max-width="600"
|
||||
>
|
||||
<v-card color="grey lighten-4" min-width="350px" flat>
|
||||
<v-card color="grey lighten-4" flat>
|
||||
<v-toolbar>
|
||||
<v-btn icon @click="openScheduledItem()">
|
||||
<v-icon color="primary">{{ iconForSelectedEvent() }}</v-icon>
|
||||
@@ -454,10 +461,143 @@ export default {
|
||||
languageName: window.$gz.locale.getResolvedLanguage(),
|
||||
hour12: window.$gz.locale.getHour12(),
|
||||
formUserOptions: {},
|
||||
tempFirstTime: null
|
||||
tempFirstTime: null,
|
||||
//new refactor event stuff
|
||||
activeMouseDownEvent: null,
|
||||
activeMouseDownNewEvent: null,
|
||||
lastMouseDownMS: null
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onMouseDownEvent(o) {
|
||||
if (!this.activeMouseDownEvent) {
|
||||
//capture time to see if it's a click or a drag/extend
|
||||
this.lastMouseDownMS = new Date().getTime();
|
||||
this.activeMouseDownEvent = o;
|
||||
//this is so the popup dialog is centered around the event clicked on
|
||||
this.selectedElement = o.nativeEvent.target;
|
||||
//console.log("onMouseDownEvent o", o);
|
||||
}
|
||||
},
|
||||
onMouseDownTime(o) {
|
||||
//NOTE: Mouse down DAY is *NOT* supported, new events only in time / day view
|
||||
|
||||
//check if there is an active event, if there is then this has fired after mouse down event and we don't want to mess with it
|
||||
//if there is no active event then this is fired on it's own and user is trying to make a new event
|
||||
if (!this.activeMouseDownEvent) {
|
||||
//capture x,y..actually I don't 5really need to here I think, this is for new events
|
||||
//and they go by actual times and shit so...
|
||||
this.activeMouseDownNewEvent = o;
|
||||
console.log("onMouseDownTime", o);
|
||||
}
|
||||
},
|
||||
async onMouseUpDay(o) {
|
||||
// console.log(
|
||||
// "onMouseUpDay handling active event:",
|
||||
// JSON.stringify({ o: o, activeEvent: this.activeMouseDownEvent })
|
||||
// );
|
||||
//this event contains the day month but no time that I need to modify the event to another day
|
||||
if (this.activeMouseDownEvent) {
|
||||
if (this.itWasAClickNotADrag()) {
|
||||
//console.log("onMouseUpDay STUB: SHOW MORE INFO");
|
||||
await this.showMoreInfo(this.activeMouseDownEvent.event);
|
||||
} else {
|
||||
console.log("onMouseUpDay STUB: HANDLE DRAG");
|
||||
}
|
||||
}
|
||||
this.activeMouseDownEvent = null;
|
||||
},
|
||||
async onMouseUpTime(o) {
|
||||
//we could be here due to three reasons
|
||||
//1. end drag existing event
|
||||
//2. end drag new event
|
||||
//3. click to open more info on existing event
|
||||
|
||||
//Existing event handler either more info or modify
|
||||
if (this.activeMouseDownEvent) {
|
||||
if (this.itWasAClickNotADrag()) {
|
||||
// console.log(
|
||||
// "onMouseUpTime STUB: SHOW EVENT MORE INFO",
|
||||
// this.activeMouseDownEvent
|
||||
// );
|
||||
|
||||
await this.showMoreInfo(this.activeMouseDownEvent.event);
|
||||
} else {
|
||||
console.log("onMouseUpTime STUB: HANDLE EXISTING EVENT DRAG");
|
||||
}
|
||||
//console.log("onMouseUpTime handling active event:", o);
|
||||
this.activeMouseDownEvent = null;
|
||||
return;
|
||||
}
|
||||
//New event handler
|
||||
if (this.activeMouseDownNewEvent) {
|
||||
console.log("onMouseUpTime STUB: HANDLE NEW EVENT CREATE");
|
||||
}
|
||||
},
|
||||
onMouseLeave(o) {
|
||||
//The user dragged or moved off the control so nothing should be actively happening with events
|
||||
// if (this.activeMouseDownEvent) {
|
||||
// // console.log("onMouseLeave", JSON.stringify(o));
|
||||
// console.log(
|
||||
// "onMouseLeave handling active event:",
|
||||
// JSON.stringify(this.activeMouseDownEvent)
|
||||
// );
|
||||
// }
|
||||
this.activeMouseDownEvent = null;
|
||||
this.activeMouseDownNewEvent = null;
|
||||
this.lastMouseDownMS = null;
|
||||
},
|
||||
onMouseMoveTime(o) {
|
||||
//this event is only relevant to painting during drag/extend
|
||||
// if (this.activeMouseDownEvent) {
|
||||
// console.log("onMouseMoveTime", JSON.stringify(o));
|
||||
// }
|
||||
},
|
||||
onMouseMoveDay(o) {
|
||||
//this event is only relevant to painting during drag extend
|
||||
// if (this.activeMouseDownEvent) {
|
||||
// console.log("onMouseMoveDay", JSON.stringify(o));
|
||||
// }
|
||||
},
|
||||
itWasAClickNotADrag() {
|
||||
if (this.lastMouseDownMS == null) {
|
||||
//return;
|
||||
throw new Error("lastMouseMS is null!");
|
||||
}
|
||||
const elapsed = new Date().getTime() - this.lastMouseDownMS;
|
||||
this.lastMouseDownMS = null;
|
||||
console.log("itWasAClickNotADrag elapsed:", elapsed);
|
||||
return elapsed < 200;
|
||||
},
|
||||
async showMoreInfo(ayevent) {
|
||||
this.selectedEvent = ayevent;
|
||||
let route = null;
|
||||
this.evInfo = {};
|
||||
switch (ayevent.type) {
|
||||
case window.$gz.type.WorkOrderItemScheduledUser:
|
||||
route = `workorder/items/scheduled-users/sched-info/${ayevent.id}`;
|
||||
break;
|
||||
case window.$gz.type.Reminder:
|
||||
route = `reminder/sched-info/${ayevent.id}`;
|
||||
break;
|
||||
case window.$gz.type.Review:
|
||||
route = `review/sched-info/${ayevent.id}`;
|
||||
break;
|
||||
}
|
||||
if (route) {
|
||||
const res = await window.$gz.api.get(route);
|
||||
if (!res.error) {
|
||||
this.evInfo = res.data;
|
||||
this.moreInfoDialog = true;
|
||||
} else {
|
||||
this.formState.serverError = res.error;
|
||||
window.$gz.form.setErrorBoxErrors(this);
|
||||
}
|
||||
}
|
||||
},
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
////////////////////////////////////////////////////////////////////////////////
|
||||
openObject: function(type, id) {
|
||||
window.$gz.eventBus.$emit("openobject", {
|
||||
type: type,
|
||||
@@ -776,48 +916,48 @@ export default {
|
||||
id: this.selectedEvent.id
|
||||
});
|
||||
},
|
||||
async showMoreInfo({ nativeEvent, event }) {
|
||||
console.log("showMoreInfo click event fired");
|
||||
//workaround to disambiguate drag click from view more info click
|
||||
if (this.dragged) {
|
||||
return;
|
||||
}
|
||||
console.log("showMoreINfo not dragged, popping up");
|
||||
let route = null;
|
||||
this.evInfo = {};
|
||||
switch (event.type) {
|
||||
case window.$gz.type.WorkOrderItemScheduledUser:
|
||||
route = `workorder/items/scheduled-users/sched-info/${event.id}`;
|
||||
break;
|
||||
case window.$gz.type.Reminder:
|
||||
route = `reminder/sched-info/${event.id}`;
|
||||
break;
|
||||
case window.$gz.type.Review:
|
||||
route = `review/sched-info/${event.id}`;
|
||||
break;
|
||||
}
|
||||
if (route) {
|
||||
const res = await window.$gz.api.get(route);
|
||||
if (!res.error) {
|
||||
this.evInfo = res.data;
|
||||
}
|
||||
}
|
||||
const open = () => {
|
||||
this.selectedEvent = event;
|
||||
this.selectedElement = nativeEvent.target;
|
||||
requestAnimationFrame(() =>
|
||||
requestAnimationFrame(() => (this.moreInfoDialog = true))
|
||||
);
|
||||
};
|
||||
if (this.moreInfoDialog) {
|
||||
this.moreInfoDialog = false;
|
||||
requestAnimationFrame(() => requestAnimationFrame(() => open()));
|
||||
} else {
|
||||
open();
|
||||
}
|
||||
console.log("show more info stopping propagation");
|
||||
nativeEvent.stopPropagation();
|
||||
},
|
||||
// async showMoreInfo({ nativeEvent, event }) {
|
||||
// console.log("showMoreInfo click event fired");
|
||||
// //workaround to disambiguate drag click from view more info click
|
||||
// if (this.dragged) {
|
||||
// return;
|
||||
// }
|
||||
// console.log("showMoreINfo not dragged, popping up");
|
||||
// let route = null;
|
||||
// this.evInfo = {};
|
||||
// switch (event.type) {
|
||||
// case window.$gz.type.WorkOrderItemScheduledUser:
|
||||
// route = `workorder/items/scheduled-users/sched-info/${event.id}`;
|
||||
// break;
|
||||
// case window.$gz.type.Reminder:
|
||||
// route = `reminder/sched-info/${event.id}`;
|
||||
// break;
|
||||
// case window.$gz.type.Review:
|
||||
// route = `review/sched-info/${event.id}`;
|
||||
// break;
|
||||
// }
|
||||
// if (route) {
|
||||
// const res = await window.$gz.api.get(route);
|
||||
// if (!res.error) {
|
||||
// this.evInfo = res.data;
|
||||
// }
|
||||
// }
|
||||
// const open = () => {
|
||||
// this.selectedEvent = event;
|
||||
// this.selectedElement = nativeEvent.target;
|
||||
// requestAnimationFrame(() =>
|
||||
// requestAnimationFrame(() => (this.moreInfoDialog = true))
|
||||
// );
|
||||
// };
|
||||
// if (this.moreInfoDialog) {
|
||||
// this.moreInfoDialog = false;
|
||||
// requestAnimationFrame(() => requestAnimationFrame(() => open()));
|
||||
// } else {
|
||||
// open();
|
||||
// }
|
||||
// console.log("show more info stopping propagation");
|
||||
// nativeEvent.stopPropagation();
|
||||
// },
|
||||
async fetchEvents({ start, end }) {
|
||||
try {
|
||||
window.$gz.form.deleteAllErrorBoxErrors(this);
|
||||
|
||||
Reference in New Issue
Block a user