admin/raven-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

new sched event handling framework in place

Browse Source
This commit is contained in:
John Cardinal
2021-10-04 19:34:04 +00:00
parent 87f8dabf4a
commit eacee2af6d
2 changed files with 199 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
ayanova/devdocs/todo.txt
View File

@@ -32,8 +32,12 @@
this can check and then do moreinfo as it's already handling dragging
see if it detects non vs drag and do accordingly?
Start drag and end drag should handle it all
on start capture time or mouse coords
on stop check if too little time or too short distance occured to be a drag and process as showmore else it's a drag
TODO:
Layer on the functionality, start with drag and move to extend, new and more info
the fewer events used the easier can cleaner it will be
on event mousedown capture time or mouse coords
on event mouseup check if too little time or too short distance occured to be a drag and process as showmore else it's a drag
On mouse up or down outside event then it's a new event
should there be a day view at all in svc sched?

246
ayanova/src/views/home-schedule.vue
View File

@@ -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);