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-09-14 00:03:51 +00:00
parent 96fefb23e1
commit 895b4fc7e0
1 changed files with 95 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,94 +1,96 @@
<template>
<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>$prev</v-icon>
</v-btn>
<v-btn fab text small color="grey darken-2" @click="next">
<v-icon small>$next</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>
<div v-resize="onResize" class="my-n8">
<!-- <v-row dense>
<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>$prev</v-icon>
</v-btn>
<v-btn fab text small color="grey darken-2" @click="next">
<v-icon small>$next</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-sheet>
</v-col>
</v-row>
</v-toolbar>
</v-sheet>
<!-- HEIGHT="600" -->
<v-sheet :height="calendarHeight">
<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> -->
</div>
</template>
<script>
@@ -151,18 +153,16 @@ export default {
serverError: {}
},
rights: window.$gz.role.defaultRightsObject(),
ayaType: window.$gz.type.Memo,
composing: false,
replyMode: false,
pickListSelectedUserId: null,
items: [],
toUsers: []
calendarHeight: 600
};
},
mounted() {
this.$refs.calendar.checkChange();
},
methods: {
onResize() {
this.calendarHeight = window.innerHeight * 0.84;
},
viewDay({ date }) {
this.focus = date;
this.type = "day";