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
|
||||
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
|
||||
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
|
||||
@@ -48,7 +51,10 @@
|
||||
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
|
||||
|
||||
|
||||
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>
|
||||
<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>
|
||||
|
||||
<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 {
|
||||
components: {
|
||||
UnderConstruction
|
||||
},
|
||||
beforeCreate() {
|
||||
window.$gz.eventBus.$emit("menu-change", {
|
||||
isMain: true,
|
||||
@@ -16,7 +108,130 @@ export default {
|
||||
title: "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