[events] AgendaView button for current week / day

This commit is contained in:
Ferdinand Thiessen 2021-03-28 03:35:10 +02:00
parent f712bfd4f9
commit a59f778851
1 changed files with 92 additions and 79 deletions

View File

@ -7,7 +7,11 @@
>
<q-card>
<div class="column">
<div class="col" align="right" style="position: sticky; top: 0; z-index: 999">
<div
class="col"
align="right"
style="position: sticky; top: 5px; padding-right: 5px; z-index: 999"
>
<q-btn round color="negative" icon="close" dense rounded @click="editDone(false)" />
</div>
<div class="col" style="margin: 0; padding: 0; margin-top: -2.4em">
@ -16,20 +20,12 @@
</div>
</q-card>
</q-dialog>
<q-page padding>
<q-card>
<div style="max-width: 1800px; width: 100%">
<q-toolbar class="bg-primary text-white q-my-md shadow-2 items-center row justify-center">
<div class="row justify-center items-center">
<q-btn flat dense label="Prev" @click="calendarPrev" />
<q-separator vertical />
<q-btn flat dense
<q-btn flat dense class="row absolute-left q-ml-sm"
>{{ asMonth(selectedDate) }} {{ asYear(selectedDate) }}
<q-popup-proxy
transition-show="scale"
transition-hide="scale"
@before-show="updateProxy"
>
<q-popup-proxy transition-show="scale" transition-hide="scale" @before-show="updateProxy">
<q-date v-model="proxyDate">
<div class="row items-center justify-end q-gutter-sm">
<q-btn v-close-popup label="Cancel" color="primary" flat />
@ -38,14 +34,23 @@
label="OK"
color="primary"
flat
@click="saveNewSelectedDate(proxyDate)"
@click="saveSelectedDate(proxyDate)"
/>
</div>
</q-date>
</q-popup-proxy>
</q-btn>
<div class="row justify-center items-center">
<q-btn flat dense label="Zurück" @click="calendarPrev" />
<q-separator vertical />
<q-btn flat dense label="Next" @click="calendarNext" />
<q-btn
flat
dense
:label="calendarView == 'day' ? 'Heute' : 'Diese Woche'"
@click="calendarNow"
/>
<q-separator vertical />
<q-btn flat dense label="Weiter" @click="calendarNext" />
</div>
<!-- <q-space /> -->
@ -83,15 +88,14 @@
</q-calendar-agenda>
</div>
</q-card>
</q-page>
</template>
<script lang="ts">
import { computed, defineComponent, onBeforeMount, ref } from 'vue';
import { useScheduleStore } from '../../store';
import Eventslot from './slots/EventSlot.vue';
import { date } from 'quasar';
import { startOfWeek } from 'src/utils/datetime';
import { useScheduleStore } from '../../store';
import { date } from 'quasar';
import Eventslot from './slots/EventSlot.vue';
import EditEvent from '../management/EditEvent.vue';
export default defineComponent({
@ -183,10 +187,18 @@ export default defineComponent({
void loadAgendas();
}
function calendarNow() {
const today = date.formatDate(new Date(), 'YYYY-MM-DD');
if (today !== selectedDate.value) {
selectedDate.value = today;
void loadAgendas();
}
}
function updateProxy() {
proxyDate.value = selectedDate.value;
}
function saveNewSelectedDate() {
function saveSelectedDate() {
proxyDate.value = date.formatDate(proxyDate.value, 'YYYY-MM-DD');
selectedDate.value = proxyDate.value;
}
@ -219,20 +231,21 @@ export default defineComponent({
return {
asYear,
asMonth,
selectedDate,
calendarDays,
calendarNext,
calendarNow,
calendarPrev,
calendarRealView,
calendarView,
edit,
editor,
editDone,
events,
calendarNext,
calendarPrev,
updateProxy,
saveNewSelectedDate,
proxyDate,
remove,
calendarDays,
calendarView,
calendarRealView,
saveSelectedDate,
selectedDate,
updateProxy,
};
},
});