This commit is contained in:
@@ -37,6 +37,9 @@
|
|||||||
user selects filter, techs to show, what order etc and then it just uses that when they select it as a view
|
user selects filter, techs to show, what order etc and then it just uses that when they select it as a view
|
||||||
Views could also drive schedule type dashboard widgets as well
|
Views could also drive schedule type dashboard widgets as well
|
||||||
Copy the fuck out of google calendar UI layout, it's popular and easy to use https://calendar.google.com/calendar/u/0/r/week?pli=1
|
Copy the fuck out of google calendar UI layout, it's popular and easy to use https://calendar.google.com/calendar/u/0/r/week?pli=1
|
||||||
|
however it is a bit too complex in many areas so just stick to the bare essentials and cleanliness a.m.a.p.
|
||||||
|
This I like about it:
|
||||||
|
One single PLUS button prominently displayed to add an appointment
|
||||||
|
|
||||||
|
|
||||||
CASES
|
CASES
|
||||||
@@ -48,7 +51,10 @@
|
|||||||
1686 - ability to set how much stuff displays / alt schedule / calendar view??? Not sure really, it's a mish mash
|
1686 - ability to set how much stuff displays / alt schedule / calendar view??? Not sure really, it's a mish mash
|
||||||
729 - mass misc omnibus copied to above the useful bits
|
729 - mass misc omnibus copied to above the useful bits
|
||||||
|
|
||||||
|
SCHEDULE TODO:
|
||||||
|
Basically just replicate google calendar UI with our own related objects driving it
|
||||||
|
Day, Week, Month, Year, Schedule (not actually a calendar, but a list, do we need??), 4 days views
|
||||||
|
Data list functionality with filters to drive schedule, however people select them in the UI rather than the way we filter datalists now
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -1,14 +1,106 @@
|
|||||||
<template>
|
<template>
|
||||||
<UnderConstruction data-cy="underconstruction" />
|
<v-row class="fill-height">
|
||||||
|
<v-col>
|
||||||
|
<v-sheet height="64">
|
||||||
|
<v-toolbar flat>
|
||||||
|
<v-btn outlined class="mr-4" color="grey darken-2" @click="setToday">
|
||||||
|
Today
|
||||||
|
</v-btn>
|
||||||
|
<v-btn fab text small color="grey darken-2" @click="prev">
|
||||||
|
<v-icon small>
|
||||||
|
mdi-chevron-left
|
||||||
|
</v-icon>
|
||||||
|
</v-btn>
|
||||||
|
<v-btn fab text small color="grey darken-2" @click="next">
|
||||||
|
<v-icon small>
|
||||||
|
mdi-chevron-right
|
||||||
|
</v-icon>
|
||||||
|
</v-btn>
|
||||||
|
<v-toolbar-title v-if="$refs.calendar">
|
||||||
|
{{ $refs.calendar.title }}
|
||||||
|
</v-toolbar-title>
|
||||||
|
<v-spacer></v-spacer>
|
||||||
|
<v-menu bottom right>
|
||||||
|
<template v-slot:activator="{ on, attrs }">
|
||||||
|
<v-btn outlined color="grey darken-2" v-bind="attrs" v-on="on">
|
||||||
|
<span>{{ typeToLabel[type] }}</span>
|
||||||
|
<v-icon right>
|
||||||
|
mdi-menu-down
|
||||||
|
</v-icon>
|
||||||
|
</v-btn>
|
||||||
|
</template>
|
||||||
|
<v-list>
|
||||||
|
<v-list-item @click="type = 'day'">
|
||||||
|
<v-list-item-title>Day</v-list-item-title>
|
||||||
|
</v-list-item>
|
||||||
|
<v-list-item @click="type = 'week'">
|
||||||
|
<v-list-item-title>Week</v-list-item-title>
|
||||||
|
</v-list-item>
|
||||||
|
<v-list-item @click="type = 'month'">
|
||||||
|
<v-list-item-title>Month</v-list-item-title>
|
||||||
|
</v-list-item>
|
||||||
|
<v-list-item @click="type = '4day'">
|
||||||
|
<v-list-item-title>4 days</v-list-item-title>
|
||||||
|
</v-list-item>
|
||||||
|
</v-list>
|
||||||
|
</v-menu>
|
||||||
|
</v-toolbar>
|
||||||
|
</v-sheet>
|
||||||
|
<!-- HEIGHT="600" -->
|
||||||
|
<v-sheet>
|
||||||
|
<v-calendar
|
||||||
|
ref="calendar"
|
||||||
|
v-model="focus"
|
||||||
|
color="primary"
|
||||||
|
:events="events"
|
||||||
|
:event-color="getEventColor"
|
||||||
|
:type="type"
|
||||||
|
@click:event="showEvent"
|
||||||
|
@click:more="viewDay"
|
||||||
|
@click:date="viewDay"
|
||||||
|
@change="updateRange"
|
||||||
|
></v-calendar>
|
||||||
|
<v-menu
|
||||||
|
v-model="selectedOpen"
|
||||||
|
:close-on-content-click="false"
|
||||||
|
:activator="selectedElement"
|
||||||
|
offset-x
|
||||||
|
>
|
||||||
|
<v-card color="grey lighten-4" min-width="350px" flat>
|
||||||
|
<v-toolbar :color="selectedEvent.color" dark>
|
||||||
|
<v-btn icon>
|
||||||
|
<v-icon>mdi-pencil</v-icon>
|
||||||
|
</v-btn>
|
||||||
|
<v-toolbar-title v-html="selectedEvent.name"></v-toolbar-title>
|
||||||
|
<v-spacer></v-spacer>
|
||||||
|
<v-btn icon>
|
||||||
|
<v-icon>mdi-heart</v-icon>
|
||||||
|
</v-btn>
|
||||||
|
<v-btn icon>
|
||||||
|
<v-icon>mdi-dots-vertical</v-icon>
|
||||||
|
</v-btn>
|
||||||
|
</v-toolbar>
|
||||||
|
<v-card-text>
|
||||||
|
<span v-html="selectedEvent.details"></span>
|
||||||
|
</v-card-text>
|
||||||
|
<v-card-actions>
|
||||||
|
<v-btn text color="secondary" @click="selectedOpen = false">
|
||||||
|
Cancel
|
||||||
|
</v-btn>
|
||||||
|
</v-card-actions>
|
||||||
|
</v-card>
|
||||||
|
</v-menu>
|
||||||
|
</v-sheet>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import UnderConstruction from "../components/underconstruction.vue";
|
const FORM_KEY = "home-schedule";
|
||||||
|
const API_BASE_URL = "schedule/";
|
||||||
|
const FORM_CUSTOM_TEMPLATE_KEY = "home-schedule"; //<-- Should always be CoreBizObject AyaType name here where possible
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
|
||||||
UnderConstruction
|
|
||||||
},
|
|
||||||
beforeCreate() {
|
beforeCreate() {
|
||||||
window.$gz.eventBus.$emit("menu-change", {
|
window.$gz.eventBus.$emit("menu-change", {
|
||||||
isMain: true,
|
isMain: true,
|
||||||
@@ -16,7 +108,130 @@ export default {
|
|||||||
title: "Schedule",
|
title: "Schedule",
|
||||||
helpUrl: "home-schedule"
|
helpUrl: "home-schedule"
|
||||||
});
|
});
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
formCustomTemplateKey: FORM_CUSTOM_TEMPLATE_KEY,
|
||||||
|
focus: "",
|
||||||
|
type: "month",
|
||||||
|
typeToLabel: {
|
||||||
|
month: "Month",
|
||||||
|
week: "Week",
|
||||||
|
day: "Day",
|
||||||
|
"4day": "4 Days"
|
||||||
|
},
|
||||||
|
selectedEvent: {},
|
||||||
|
selectedElement: null,
|
||||||
|
selectedOpen: false,
|
||||||
|
events: [],
|
||||||
|
colors: [
|
||||||
|
"blue",
|
||||||
|
"indigo",
|
||||||
|
"deep-purple",
|
||||||
|
"cyan",
|
||||||
|
"green",
|
||||||
|
"orange",
|
||||||
|
"grey darken-1"
|
||||||
|
],
|
||||||
|
names: [
|
||||||
|
"Meeting",
|
||||||
|
"Holiday",
|
||||||
|
"PTO",
|
||||||
|
"Travel",
|
||||||
|
"Event",
|
||||||
|
"Birthday",
|
||||||
|
"Conference",
|
||||||
|
"Party"
|
||||||
|
],
|
||||||
|
|
||||||
|
formState: {
|
||||||
|
ready: false,
|
||||||
|
dirty: false,
|
||||||
|
valid: true,
|
||||||
|
readOnly: false,
|
||||||
|
loading: true,
|
||||||
|
errorBoxMessage: null,
|
||||||
|
appError: null,
|
||||||
|
serverError: {}
|
||||||
|
},
|
||||||
|
rights: window.$gz.role.defaultRightsObject(),
|
||||||
|
ayaType: window.$gz.type.Memo,
|
||||||
|
composing: false,
|
||||||
|
replyMode: false,
|
||||||
|
pickListSelectedUserId: null,
|
||||||
|
items: [],
|
||||||
|
toUsers: []
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.$refs.calendar.checkChange();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
viewDay({ date }) {
|
||||||
|
this.focus = date;
|
||||||
|
this.type = "day";
|
||||||
|
},
|
||||||
|
getEventColor(event) {
|
||||||
|
return event.color;
|
||||||
|
},
|
||||||
|
setToday() {
|
||||||
|
this.focus = "";
|
||||||
|
},
|
||||||
|
prev() {
|
||||||
|
this.$refs.calendar.prev();
|
||||||
|
},
|
||||||
|
next() {
|
||||||
|
this.$refs.calendar.next();
|
||||||
|
},
|
||||||
|
showEvent({ nativeEvent, event }) {
|
||||||
|
const open = () => {
|
||||||
|
this.selectedEvent = event;
|
||||||
|
this.selectedElement = nativeEvent.target;
|
||||||
|
requestAnimationFrame(() =>
|
||||||
|
requestAnimationFrame(() => (this.selectedOpen = true))
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
if (this.selectedOpen) {
|
||||||
|
this.selectedOpen = false;
|
||||||
|
requestAnimationFrame(() => requestAnimationFrame(() => open()));
|
||||||
|
} else {
|
||||||
|
open();
|
||||||
|
}
|
||||||
|
|
||||||
|
nativeEvent.stopPropagation();
|
||||||
|
},
|
||||||
|
updateRange({ start, end }) {
|
||||||
|
const events = [];
|
||||||
|
|
||||||
|
const min = new Date(`${start.date}T00:00:00`);
|
||||||
|
const max = new Date(`${end.date}T23:59:59`);
|
||||||
|
const days = (max.getTime() - min.getTime()) / 86400000;
|
||||||
|
const eventCount = this.rnd(days, days + 20);
|
||||||
|
|
||||||
|
for (let i = 0; i < eventCount; i++) {
|
||||||
|
const allDay = this.rnd(0, 3) === 0;
|
||||||
|
const firstTimestamp = this.rnd(min.getTime(), max.getTime());
|
||||||
|
const first = new Date(firstTimestamp - (firstTimestamp % 900000));
|
||||||
|
const secondTimestamp = this.rnd(2, allDay ? 288 : 8) * 900000;
|
||||||
|
const second = new Date(first.getTime() + secondTimestamp);
|
||||||
|
|
||||||
|
events.push({
|
||||||
|
name: this.names[this.rnd(0, this.names.length - 1)],
|
||||||
|
start: first,
|
||||||
|
end: second,
|
||||||
|
color: this.colors[this.rnd(0, this.colors.length - 1)],
|
||||||
|
timed: !allDay
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
this.events = events;
|
||||||
|
},
|
||||||
|
rnd(a, b) {
|
||||||
|
return Math.floor((b - a + 1) * Math.random()) + a;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
//eol
|
||||||
};
|
};
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|
|||||||
Reference in New Issue
Block a user