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

Partial revert back to original schedule after finding out what the issues really were, faster this way

Browse Source
This commit is contained in:
John Cardinal
2021-10-04 20:58:43 +00:00
parent c7f7c4fef9
commit 3984082b2b
2 changed files with 92 additions and 202 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
ayanova/devdocs/todo.txt
View File

@@ -38,6 +38,12 @@
on event mousedown capture time or mouse coords 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 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 On mouse up or down outside event then it's a new event
Attempt is not saving anything, but does point to solution so modify prior code
don't use event click, use the mouseup event instead
dont' use the timer, port the isitaclick stuff instead
Use dialog for moreinfo
should there be a day view at all in svc sched? should there be a day view at all in svc sched?

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

@@ -70,21 +70,14 @@
@click:more="viewDay" @click:more="viewDay"
@click:date="viewDay" @click:date="viewDay"
@change="fetchEvents" @change="fetchEvents"
@mousedown:event="onMouseDownEvent" @mousedown:event="startDrag"
@mousedown:time="onMouseDownTime" @mousedown:time="startTime"
@mouseup:day="onMouseUpDay" @mousemove:time="mouseMoveDayView"
@mouseup:time="onMouseUpTime" @mousemove:day="mouseMoveMonthView"
@mouseleave.native="onMouseLeave" @mouseup:day="endDragExtend"
@mousemove:time="onMouseMoveTime" @mouseup:time="endDragExtend"
@mousemove:day="onMouseMoveDay" @mouseleave.native="cancelDrag"
> >
<!--
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 }"> <template v-slot:event="{ event, timed, eventSummary }">
<div class="v-event-draggable"> <div class="v-event-draggable">
<v-icon small :color="event.textColor" class="mr-1">{{ <v-icon small :color="event.textColor" class="mr-1">{{
@@ -145,7 +138,7 @@
<template> <template>
<v-row justify="center"> <v-row justify="center">
<v-dialog max-width="600px" v-model="moreInfoDialog"> <v-dialog max-width="600px" v-model="moreInfoDialog">
<v-card color="grey lighten-4" flat> <v-card color="grey lighten-4" min-width="350px" flat>
<v-toolbar> <v-toolbar>
<v-btn icon @click="openScheduledItem()"> <v-btn icon @click="openScheduledItem()">
<v-icon color="primary">{{ iconForSelectedEvent() }}</v-icon> <v-icon color="primary">{{ iconForSelectedEvent() }}</v-icon>
@@ -470,142 +463,10 @@ export default {
hour12: window.$gz.locale.getHour12(), hour12: window.$gz.locale.getHour12(),
formUserOptions: {}, formUserOptions: {},
tempFirstTime: null, tempFirstTime: null,
//new refactor event stuff
activeMouseDownEvent: null,
activeMouseDownNewEvent: null,
lastMouseDownMS: null lastMouseDownMS: null
}; };
}, },
methods: { 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) { openObject: function(type, id) {
window.$gz.eventBus.$emit("openobject", { window.$gz.eventBus.$emit("openobject", {
type: type, type: type,
@@ -665,12 +526,13 @@ export default {
extendBottom(event) { extendBottom(event) {
if (event.editable) { if (event.editable) {
//My work around to disambiguate extending and clicking //My work around to disambiguate extending and clicking
clearTimeout(this.dragTimeout); // clearTimeout(this.dragTimeout);
this.dragged = false; // this.dragged = false;
this.dragTimeout = setTimeout(() => { // this.dragTimeout = setTimeout(() => {
this.dragged = true; // this.dragged = true;
}, CLICK_DETECT_TIMEOUT); // Min delay to be regarded as extend instead of click, also affects click time to display more info, too short needs faster click // }, CLICK_DETECT_TIMEOUT); // Min delay to be regarded as extend instead of click, also affects click time to display more info, too short needs faster click
//capture time to see if it's a click or a drag/extend
this.lastMouseDownMS = new Date().getTime();
this.extendEvent = event; this.extendEvent = event;
this.createStart = event.start; this.createStart = event.start;
this.extendOriginal = event.end; this.extendOriginal = event.end;
@@ -687,11 +549,17 @@ export default {
//NEW, prompt for deets and create or if cancelled then just remove this faux event from events list (it will be the last one in the array) //NEW, prompt for deets and create or if cancelled then just remove this faux event from events list (it will be the last one in the array)
this.newItemDialog = true; this.newItemDialog = true;
} else { } else {
if (!this.dragged) { // if (!this.dragged) {
//we're here due to mouse up but it's not a drag or an extend so it's a More Info mouse up click so bail out now // //we're here due to mouse up but it's not a drag or an extend so it's a More Info mouse up click so bail out now
// this.dragEvent = null; //this needs to be set or it will keep dragging off an editable event even as the moreinfo dialog show
// return;
// }
if (this.itWasAClickNotADrag()) {
await this.showMoreInfo(this.dragEvent);
this.dragEvent = null; //this needs to be set or it will keep dragging off an editable event even as the moreinfo dialog show this.dragEvent = null; //this needs to be set or it will keep dragging off an editable event even as the moreinfo dialog show
return; return;
} }
//MODIFY existing event, drag or extend //MODIFY existing event, drag or extend
if (this.dragEvent || this.extendEvent) { if (this.dragEvent || this.extendEvent) {
const param = { type: null, id: null, start: null, end: null }; const param = { type: null, id: null, start: null, end: null };
@@ -753,20 +621,22 @@ export default {
this.createStart = null; this.createStart = null;
this.dragTime = null; this.dragTime = null;
this.dragEvent = null; this.dragEvent = null;
this.lastMouseDownMS = null;
}, },
startDrag({ event }) { startDrag({ event }) {
//# mouse down on an event triggers this call //# mouse down on an event triggers this call
console.log("StartDrag, event:", JSON.stringify(event)); console.log("StartDrag, event:", JSON.stringify(event));
if (event) { if (event) {
if (event.editable) { if (event.editable) {
this.lastMouseDownMS = new Date().getTime();
//My work around to disambiguate dragging and clicking //My work around to disambiguate dragging and clicking
clearTimeout(this.dragTimeout); //clearTimeout(this.dragTimeout);
console.log("startDrag in editable set dragged false"); console.log("startDrag in editable set dragged false");
this.dragged = false; this.dragged = false;
this.dragTimeout = setTimeout(() => { // this.dragTimeout = setTimeout(() => {
this.dragged = true; // this.dragged = true;
console.log("startDrag event timer fired, dragged set to true"); // console.log("startDrag event timer fired, dragged set to true");
}, CLICK_DETECT_TIMEOUT); // Min delay to be regarded as extend instead of click, also affects click time to display more info, too short needs faster click // }, CLICK_DETECT_TIMEOUT); // Min delay to be regarded as extend instead of click, also affects click time to display more info, too short needs faster click
this.dragEvent = event; this.dragEvent = event;
this.dragTime = null; this.dragTime = null;
@@ -779,6 +649,16 @@ export default {
} }
} }
}, },
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;
},
mouseMoveDayView(tms) { mouseMoveDayView(tms) {
//no event being dragged or exgtended? //no event being dragged or exgtended?
if (!this.dragEvent && !this.extendEvent) { if (!this.dragEvent && !this.extendEvent) {
@@ -924,48 +804,52 @@ export default {
id: this.selectedEvent.id id: this.selectedEvent.id
}); });
}, },
// async showMoreInfo({ nativeEvent, event }) { async showMoreInfo(event) {
// console.log("showMoreInfo click event fired"); console.log("showMoreInfo click event fired");
// //workaround to disambiguate drag click from view more info click //workaround to disambiguate drag click from view more info click
// if (this.dragged) { if (this.dragged) {
// return; return;
// } }
// console.log("showMoreINfo not dragged, popping up"); console.log("showMoreINfo not dragged, popping up");
// let route = null; let route = null;
// this.evInfo = {}; this.evInfo = {};
// switch (event.type) { switch (event.type) {
// case window.$gz.type.WorkOrderItemScheduledUser: case window.$gz.type.WorkOrderItemScheduledUser:
// route = `workorder/items/scheduled-users/sched-info/${event.id}`; route = `workorder/items/scheduled-users/sched-info/${event.id}`;
// break; break;
// case window.$gz.type.Reminder: case window.$gz.type.Reminder:
// route = `reminder/sched-info/${event.id}`; route = `reminder/sched-info/${event.id}`;
// break; break;
// case window.$gz.type.Review: case window.$gz.type.Review:
// route = `review/sched-info/${event.id}`; route = `review/sched-info/${event.id}`;
// break; break;
// } }
// if (route) { if (route) {
// const res = await window.$gz.api.get(route); const res = await window.$gz.api.get(route);
// if (!res.error) { if (!res.error) {
// this.evInfo = res.data; this.evInfo = res.data;
// } this.moreInfoDialog = true;
// } } else {
// const open = () => { this.formState.serverError = res.error;
// this.selectedEvent = event; window.$gz.form.setErrorBoxErrors(this);
// this.selectedElement = nativeEvent.target; }
// requestAnimationFrame(() => }
// requestAnimationFrame(() => (this.moreInfoDialog = true)) // const open = () => {
// ); // this.selectedEvent = event;
// }; // this.selectedElement = nativeEvent.target;
// if (this.moreInfoDialog) { // requestAnimationFrame(() =>
// this.moreInfoDialog = false; // requestAnimationFrame(() => (this.moreInfoDialog = true))
// requestAnimationFrame(() => requestAnimationFrame(() => open())); // );
// } else { // };
// open(); // if (this.moreInfoDialog) {
// } // this.moreInfoDialog = false;
// console.log("show more info stopping propagation"); // requestAnimationFrame(() => requestAnimationFrame(() => open()));
// nativeEvent.stopPropagation(); // } else {
// }, // open();
// }
// console.log("show more info stopping propagation");
// nativeEvent.stopPropagation();
},
async fetchEvents({ start, end }) { async fetchEvents({ start, end }) {
try { try {
window.$gz.form.deleteAllErrorBoxErrors(this); window.$gz.form.deleteAllErrorBoxErrors(this);