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

Browse Source
This commit is contained in:
John Cardinal
2021-10-04 23:19:10 +00:00
parent 2c909146ea
commit 23167cf6dc
2 changed files with 223 additions and 314 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -138,7 +138,7 @@
<template>
<v-row justify="center">
<v-dialog max-width="600px" v-model="moreInfoDialog">
<v-card color="grey lighten-4" min-width="350px" flat>
<v-card>
<v-toolbar>
<v-btn icon @click="openScheduledItem()">
<v-icon color="primary">{{ iconForSelectedEvent() }}</v-icon>
@@ -411,7 +411,6 @@
</template>
<script>
const FORM_KEY = "home-schedule";
const CLICK_DETECT_TIMEOUT = 100; //100 is a bit too fast to recognize a click
export default {
async created() {
const vm = this;
@@ -526,12 +525,6 @@ export default {
extendBottom(event) {
//console.log("extend bottom fired");
if (event.editable) {
//My work around to disambiguate extending and clicking
// clearTimeout(this.dragTimeout);
// this.dragged = false;
// this.dragTimeout = setTimeout(() => {
// 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
//capture time to see if it's a click or a drag/extend
this.lastMouseDownMS = new Date().getTime();
this.extendEvent = event;
@@ -540,12 +533,6 @@ export default {
}
},
async endDragExtend() {
// console.log("EndDragExtend", {
// extendEvent: this.extendEvent,
// dragged: this.dragged,
// dragEvent: this.dragEvent,
// lastMS: this.lastMouseDownMS
// });
//On drag then dragged is set to true and dragEvent and dragTime are set
//on extend then dragged is set to true extendEvent (actual event), extendOriginal and createStart are set, dragEvent is null
//on create then dragged is set to false and createStart is only value set, dragEvent is null and extendEvent is null
@@ -555,12 +542,7 @@ 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)
this.newItemDialog = true;
} else {
// 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
// this.dragEvent = null; //this needs to be set or it will keep dragging off an editable event even as the moreinfo dialog show
// return;
// }
//MORE INFO
if (this.lastMouseDownMS != null && 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
@@ -632,34 +614,22 @@ export default {
},
startDrag({ event }) {
//# mouse down on an event triggers this call
//console.log("StartDrag, event:", JSON.stringify(event));
if (event) {
this.lastMouseDownMS = new Date().getTime(); //snapshot time to disambiguate drag vs click
if (event.editable) {
//My work around to disambiguate dragging and clicking
//clearTimeout(this.dragTimeout);
// console.log("startDrag in editable set dragged false");
this.dragged = false;
// this.dragTimeout = setTimeout(() => {
// this.dragged = 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
this.dragEvent = event;
this.dragTime = null;
this.extendOriginal = null;
} else {
this.dragged = false;
this.dragEvent = event;
// this.extendEvent = null;
this.dragTime = null;
}
}
},
itWasAClickNotADrag() {
if (this.lastMouseDownMS == null) {
//console.trace("lastMouseDownMS is null!!");
// return true;
if (this.$ay.dev) {
throw new Error("lastMouseDownMS is null!");
} else {
@@ -672,7 +642,6 @@ export default {
}
const elapsed = new Date().getTime() - this.lastMouseDownMS;
this.lastMouseDownMS = null;
// console.log("itWasAClickNotADrag elapsed:", elapsed);
return elapsed < 200;
},
mouseMoveDayView(tms) {
@@ -727,7 +696,6 @@ export default {
if (this.dragEvent.editable) {
const start = this.dragEvent.start;
this.dragTime = mouse - start;
} else {
}
} else {
//# DAY VIEW CREATE START EVENT
@@ -762,21 +730,6 @@ export default {
tms.minute
).getTime();
},
diagInfo() {
if (this.$refs.calendar) {
return (
"cal" +
JSON.stringify({
start: this.$refs.calendar.start,
end: this.$refs.calendar.end,
focus: this.focus,
firstInterval: this.$refs.calendar.firstInterval
})
);
} else {
return "no calendar";
}
},
typeToLabel() {
switch (this.viewType) {
case "month":
@@ -822,12 +775,6 @@ export default {
});
},
async showMoreInfo(event) {
//console.log("showMoreInfo, event is", event);
//workaround to disambiguate drag click from view more info click
// if (this.dragged) {
// return;
// }
// console.log("showMoreINfo not dragged, popping up");
this.selectedEvent = event;
let route = null;
this.evInfo = {};
@@ -852,21 +799,6 @@ export default {
window.$gz.form.setErrorBoxErrors(this);
}
}
// 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 {

465
ayanova/src/views/svc-schedule.vue
View File

@@ -74,7 +74,6 @@
:locale="languageName"
:event-more-text="$ay.t('More')"
:first-time="formUserOptions.firstTime"
@click:event="showMoreInfo"
@click:more="viewDay"
@click:date="viewDay"
@change="fetchEvents"
@@ -152,193 +151,202 @@
</v-row>
</template>
<!-- MORE INFO DIALOG -->
<v-menu
v-model="moreInfoDialog"
:close-on-content-click="false"
:activator="selectedElement"
offset-x
>
<v-card color="grey lighten-4" min-width="350px" flat>
<v-toolbar>
<v-btn icon @click="openScheduledItem()">
<v-icon color="primary">{{ iconForSelectedEvent() }}</v-icon>
</v-btn>
<v-toolbar-title>{{ selectedEvent.name }}</v-toolbar-title>
</v-toolbar>
<v-card-text>
<!--reminder -->
<template v-if="selectedEvent.type == $ay.ayt().Reminder">
<div>
<span class="text-h6">{{ $ay.t("ReminderName") }}:</span>
<span class="text-body-1 ml-2">{{ evInfo.name }}</span>
</div>
<div>
<span class="text-h6">{{ $ay.t("DashboardScheduled") }}:</span>
<span class="text-body-1 ml-2"
>{{ $ay.dt(evInfo.startDate) }}&nbsp;&mdash;&nbsp;{{
$ay.dt(evInfo.stopDate)
}}</span
>
</div>
<div>
<span class="text-h6">{{ $ay.t("ReminderNotes") }}:</span>
<span class="text-body-1 ml-2">
<v-icon class="mr-3" :color="evInfo.color"
>$ayiSquareFull</v-icon
>{{ evInfo.notes }}</span
>
</div>
</template>
<!--review -->
<template v-if="selectedEvent.type == $ay.ayt().Review">
<div class="mb-1" v-if="evInfo.aType">
<v-icon
large
color="primary"
@click="openObject(evInfo.aType, evInfo.objectId)"
>{{ $ay.util().iconForType(evInfo.aType) }}</v-icon
><span
class="text-h6"
@click="openObject(evInfo.aType, evInfo.objectId)"
>
{{ evInfo.reviewObjectViz }}</span
>
</div>
<div>
<span class="text-h6">{{ $ay.t("ReviewName") }}:</span>
<span class="text-body-1 ml-2">{{ evInfo.name }}</span>
</div>
<div>
<span class="text-h6">{{ $ay.t("ReviewDate") }}:</span>
<span class="text-body-1 ml-2">{{
$ay.dt(evInfo.reviewDate)
}}</span>
</div>
<div>
<span class="text-h6">{{ $ay.t("ReviewNotes") }}:</span>
<span class="text-body-1 ml-2"> {{ evInfo.notes }}</span>
</div>
<template>
<v-row justify="center">
<v-dialog max-width="600px" v-model="moreInfoDialog">
<v-card>
<v-toolbar>
<v-btn icon @click="openScheduledItem()">
<v-icon color="primary">{{ iconForSelectedEvent() }}</v-icon>
</v-btn>
<v-toolbar-title>{{ selectedEvent.name }}</v-toolbar-title>
</v-toolbar>
<v-card-text>
<!--reminder -->
<template v-if="selectedEvent.type == $ay.ayt().Reminder">
<div>
<span class="text-h6">{{ $ay.t("ReminderName") }}:</span>
<span class="text-body-1 ml-2">{{ evInfo.name }}</span>
</div>
<div>
<span class="text-h6"
>{{ $ay.t("DashboardScheduled") }}:</span
>
<span class="text-body-1 ml-2"
>{{ $ay.dt(evInfo.startDate) }}&nbsp;&mdash;&nbsp;{{
$ay.dt(evInfo.stopDate)
}}</span
>
</div>
<div>
<span class="text-h6">{{ $ay.t("ReminderNotes") }}:</span>
<span class="text-body-1 ml-2">
<v-icon class="mr-3" :color="evInfo.color"
>$ayiSquareFull</v-icon
>{{ evInfo.notes }}</span
>
</div>
</template>
<!--review -->
<template v-if="selectedEvent.type == $ay.ayt().Review">
<div class="mb-1" v-if="evInfo.aType">
<v-icon
large
color="primary"
@click="openObject(evInfo.aType, evInfo.objectId)"
>{{ $ay.util().iconForType(evInfo.aType) }}</v-icon
><span
class="text-h6"
@click="openObject(evInfo.aType, evInfo.objectId)"
>
{{ evInfo.reviewObjectViz }}</span
>
</div>
<div>
<span class="text-h6">{{ $ay.t("ReviewName") }}:</span>
<span class="text-body-1 ml-2">{{ evInfo.name }}</span>
</div>
<div>
<span class="text-h6">{{ $ay.t("ReviewDate") }}:</span>
<span class="text-body-1 ml-2">{{
$ay.dt(evInfo.reviewDate)
}}</span>
</div>
<div>
<span class="text-h6">{{ $ay.t("ReviewNotes") }}:</span>
<span class="text-body-1 ml-2"> {{ evInfo.notes }}</span>
</div>
<template v-if="evInfo.completedDate">
<div>
<span class="text-h6"
>{{ $ay.t("ReviewCompletedDate") }}:</span
>
<span class="text-body-1 ml-2">{{
$ay.dt(evInfo.completedDate)
}}</span>
</div>
<div>
<span class="text-h6"
>{{ $ay.t("ReviewCompletionNotes") }}:</span
>
<span class="text-body-1 ml-2">
{{ evInfo.completionNotes }}</span
>
</div>
</template>
</template>
<!--woitemscheduleduser -->
<template
v-if="selectedEvent.type == $ay.ayt().WorkOrderItemScheduledUser"
>
<div>
<span class="text-h6">{{ $ay.t("WorkOrder") }}:</span>
<span class="text-body-1 ml-2"
>{{ evInfo.serial }}&nbsp; {{ evInfo.customerViz }}</span
<template v-if="evInfo.completedDate">
<div>
<span class="text-h6"
>{{ $ay.t("ReviewCompletedDate") }}:</span
>
<span class="text-body-1 ml-2">{{
$ay.dt(evInfo.completedDate)
}}</span>
</div>
<div>
<span class="text-h6"
>{{ $ay.t("ReviewCompletionNotes") }}:</span
>
<span class="text-body-1 ml-2">
{{ evInfo.completionNotes }}</span
>
</div>
</template>
</template>
<!--woitemscheduleduser -->
<template
v-if="
selectedEvent.type == $ay.ayt().WorkOrderItemScheduledUser
"
>
</div>
<div>
<span class="text-h6">{{ $ay.t("Tags") }}:</span>
<span class="text-body-1 ml-2">{{
$ay.util().formatTags(evInfo.wotags)
}}</span>
</div>
<div>
<span class="text-h6">{{ $ay.t("DashboardScheduled") }}:</span>
<span class="text-body-1 ml-2"
>{{ $ay.dt(evInfo.startDate) }}&nbsp;&mdash;&nbsp;{{
$ay.dt(evInfo.stopDate)
}}</span
>
</div>
<div>
<span class="text-h6"
>{{
$ay.t("WorkOrderItemScheduledUserEstimatedQuantity")
}}:</span
>
<span class="text-body-1 ml-2">{{ evInfo.qty }}</span>
</div>
<div>
<span class="text-h6"
>{{ $ay.t("WorkOrderItemScheduledUserServiceRateID") }}:</span
>
<span class="text-body-1 ml-2">{{ evInfo.rate }}</span>
</div>
<div>
<span class="text-h6">{{ $ay.t("WorkOrder") }}:</span>
<span class="text-body-1 ml-2"
>{{ evInfo.serial }}&nbsp; {{ evInfo.customerViz }}</span
>
</div>
<div>
<span class="text-h6">{{ $ay.t("Tags") }}:</span>
<span class="text-body-1 ml-2">{{
$ay.util().formatTags(evInfo.wotags)
}}</span>
</div>
<div>
<span class="text-h6"
>{{ $ay.t("DashboardScheduled") }}:</span
>
<span class="text-body-1 ml-2"
>{{ $ay.dt(evInfo.startDate) }}&nbsp;&mdash;&nbsp;{{
$ay.dt(evInfo.stopDate)
}}</span
>
</div>
<div>
<span class="text-h6"
>{{
$ay.t("WorkOrderItemScheduledUserEstimatedQuantity")
}}:</span
>
<span class="text-body-1 ml-2">{{ evInfo.qty }}</span>
</div>
<div>
<span class="text-h6"
>{{
$ay.t("WorkOrderItemScheduledUserServiceRateID")
}}:</span
>
<span class="text-body-1 ml-2">{{ evInfo.rate }}</span>
</div>
<div v-if="evInfo.haswostatus">
<span class="text-h6">{{ $ay.t("WorkOrderStatus") }}:</span>
<span class="text-body-1 ml-2">{{ evInfo.wostatus }}</span>
<v-icon :color="evInfo.wostatuscolor" class="ml-4"
>$ayiFlag</v-icon
>
<v-icon
color="primary"
v-if="evInfo.wostatuslocked"
class="ml-4"
>$ayiLock</v-icon
>
<v-icon
color="primary"
v-if="evInfo.wostatuscompleted"
class="ml-4"
>$ayiCheckCircle</v-icon
>
</div>
<div v-if="evInfo.haswostatus">
<span class="text-h6">{{ $ay.t("WorkOrderStatus") }}:</span>
<span class="text-body-1 ml-2">{{ evInfo.wostatus }}</span>
<v-icon :color="evInfo.wostatuscolor" class="ml-4"
>$ayiFlag</v-icon
>
<v-icon
color="primary"
v-if="evInfo.wostatuslocked"
class="ml-4"
>$ayiLock</v-icon
>
<v-icon
color="primary"
v-if="evInfo.wostatuscompleted"
class="ml-4"
>$ayiCheckCircle</v-icon
>
</div>
<div>
<span class="text-h6"
>{{ $ay.t("WorkOrderItemSummary") }}:</span
>
<span class="text-body-1 ml-2">
<v-icon class="mr-3" :color="evInfo.woitemstatuscolor"
>$ayiCircle</v-icon
>{{ evInfo.woitemstatus }}</span
>
</div>
<div>
<span class="text-h6"
>{{ $ay.t("WorkOrderItemSummary") }}:</span
>
<span class="text-body-1 ml-2">
<v-icon class="mr-3" :color="evInfo.woitemstatuscolor"
>$ayiCircle</v-icon
>{{ evInfo.woitemstatus }}</span
>
</div>
<div>
<span class="text-h6"
>{{ $ay.t("WorkOrderItemPriorityID") }}:</span
>
<span class="text-body-1 ml-2">
<v-icon class="mr-3" :color="evInfo.woitemprioritycolor"
>$ayiFireAlt</v-icon
>{{ evInfo.woitempriority }}</span
>
</div>
<div>
<span class="text-h6">{{ $ay.t("WorkOrderItemTags") }}:</span>
<span class="text-body-1 ml-2">{{
$ay.util().formatTags(evInfo.woitemtags)
}}</span>
</div>
</template>
</v-card-text>
<v-card-actions>
<v-btn color="primary" text @click="openScheduledItem()">{{
$ay.t("Open")
}}</v-btn>
<div>
<span class="text-h6"
>{{ $ay.t("WorkOrderItemPriorityID") }}:</span
>
<span class="text-body-1 ml-2">
<v-icon class="mr-3" :color="evInfo.woitemprioritycolor"
>$ayiFireAlt</v-icon
>{{ evInfo.woitempriority }}</span
>
</div>
<div>
<span class="text-h6"
>{{ $ay.t("WorkOrderItemTags") }}:</span
>
<span class="text-body-1 ml-2">{{
$ay.util().formatTags(evInfo.woitemtags)
}}</span>
</div>
</template>
</v-card-text>
<v-card-actions>
<v-btn color="primary" text @click="openScheduledItem()">{{
$ay.t("Open")
}}</v-btn>
<v-spacer v-if="!$vuetify.breakpoint.xs"></v-spacer>
<v-spacer v-if="!$vuetify.breakpoint.xs"></v-spacer>
<v-btn color="primary" text @click="moreInfoDialog = false">
{{ $ay.t("Close") }}
</v-btn>
</v-card-actions>
</v-card>
</v-menu>
<v-btn color="primary" text @click="moreInfoDialog = false">
{{ $ay.t("Close") }}
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-row>
</template>
</v-sheet>
<template>
<v-row justify="center">
@@ -399,7 +407,6 @@
</template>
<script>
const FORM_KEY = "svc-schedule";
const CLICK_DETECT_TIMEOUT = 200; //100 is a bit too fast to recognize a click
export default {
async created() {
const vm = this;
@@ -452,7 +459,8 @@ export default {
hour12: window.$gz.locale.getHour12(),
formUserOptions: {},
tempFirstTime: null,
availableUsers: []
availableUsers: [],
lastMouseDownMS: null
};
},
methods: {
@@ -514,13 +522,8 @@ export default {
extendBottom(event) {
if (event.editable) {
//My work around to disambiguate extending and clicking
clearTimeout(this.dragTimeout);
this.dragged = false;
this.dragTimeout = setTimeout(() => {
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
//capture time to see if it's a click or a drag/extend
this.lastMouseDownMS = new Date().getTime();
this.extendEvent = event;
this.createStart = event.start;
this.extendOriginal = event.end;
@@ -538,21 +541,16 @@ export default {
//Handle the event, could be one of three things: changing an event start time, changing an event length or creating a new event
if (this.extendEvent && this.extendEvent.type == 0) {
// console.log(
// "endDragExtend::extendEvent",
// JSON.stringify(this.extendEvent)
// );
//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;
} else {
//console.log("dragged:", 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
//MORE INFO
if (this.lastMouseDownMS != null && 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
return;
}
//MODIFY existing event, drag or extend
//console.log("endDragExtend::dragEvent", JSON.stringify(this.dragEvent));
if (this.dragEvent || this.extendEvent) {
const param = { type: null, id: null, start: null, end: null };
@@ -613,29 +611,40 @@ export default {
this.createStart = null;
this.dragTime = null;
this.dragEvent = null;
this.lastMouseDownMS = null;
},
startDrag({ event }) {
//# mouse down on an event triggers this call
if (event) {
this.lastMouseDownMS = new Date().getTime(); //snapshot time to disambiguate drag vs click
if (event.editable) {
//My work around to disambiguate dragging and clicking
clearTimeout(this.dragTimeout);
this.dragged = false;
this.dragTimeout = setTimeout(() => {
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
this.dragEvent = event;
this.dragTime = null;
this.extendOriginal = null;
} else {
this.dragged = false;
this.dragEvent = event;
// this.extendEvent = null;
this.dragTime = null;
}
}
},
itWasAClickNotADrag() {
if (this.lastMouseDownMS == null) {
if (this.$ay.dev) {
throw new Error("lastMouseDownMS is null!");
} else {
window.$gz.store.commit(
"logItem",
"home-schedule:lastMouseDownMS is unexpectedly null"
);
return true; //least dangerous option in production
}
}
const elapsed = new Date().getTime() - this.lastMouseDownMS;
this.lastMouseDownMS = null;
return elapsed < 200;
},
mouseMoveDayView(tms) {
//no event being dragged or exgtended?
if (!this.dragEvent && !this.extendEvent) {
@@ -684,22 +693,18 @@ export default {
if (!tms.category && this.viewType == "category") {
return;
}
console.log("startTime, tms:", JSON.stringify(tms));
//This is called on the start of dragging an existing schedule item or drag extending a NEW schedule item
const mouse = this.toTime(tms);
if (this.dragEvent && this.dragTime === null) {
console.log("startTime drag path");
//# DAY VIEW *DRAG* EXISTING START EVENT (not extend)
//(also called on simple click to view schedule more info)
if (this.dragEvent.editable) {
const start = this.dragEvent.start;
this.dragTime = mouse - start;
} else {
console.log("startTime NOT EDITABLE!");
}
} else {
//# DAY VIEW CREATE START EVENT
console.log("startTime create start path");
this.createStart = this.roundTime(mouse);
this.extendEvent = {
name: "-",
@@ -731,21 +736,6 @@ export default {
tms.minute
).getTime();
},
diagInfo() {
if (this.$refs.calendar) {
return (
"cal" +
JSON.stringify({
start: this.$refs.calendar.start,
end: this.$refs.calendar.end,
focus: this.focus,
firstInterval: this.$refs.calendar.firstInterval
})
);
} else {
return "no calendar";
}
},
typeToLabel() {
switch (this.viewType) {
case "month":
@@ -791,11 +781,8 @@ export default {
id: this.selectedEvent.id
});
},
async showMoreInfo({ nativeEvent, event }) {
//workaround to disambiguate drag click from view more info click
if (this.dragged) {
return;
}
async showMoreInfo(event) {
this.selectedEvent = event;
let route = null;
this.evInfo = {};
switch (event.type) {
@@ -813,22 +800,12 @@ export default {
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);
}
}
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();
}
nativeEvent.stopPropagation();
},
async fetchEvents({ start, end }) {
try {