refactor: everything to nuxt.js
This commit is contained in:
238
app/pages/schedule/manage.vue
Normal file
238
app/pages/schedule/manage.vue
Normal file
@@ -0,0 +1,238 @@
|
||||
<script setup lang="ts">
|
||||
import type { Timestamp } from '@quasar/quasar-ui-qcalendar';
|
||||
import {
|
||||
QCalendarScheduler,
|
||||
today,
|
||||
} from '@quasar/quasar-ui-qcalendar';
|
||||
import type { Boat } from '~/utils/boat.types';
|
||||
import { useIntervalStore } from '~/stores/interval';
|
||||
import { computed, onMounted, ref } from 'vue';
|
||||
import type { Interval, IntervalTemplate, TimeTuple } from '~/utils/schedule.types';
|
||||
import { date } from 'quasar';
|
||||
import IntervalTemplateComponent from '~/components/scheduling/IntervalTemplateComponent.vue';
|
||||
import NavigationBar from '~/components/scheduling/NavigationBar.vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { buildInterval, intervalsOverlapped } from '~/utils/schedule';
|
||||
import { useIntervalTemplateStore } from '~/stores/intervalTemplate';
|
||||
|
||||
definePageMeta({ requiredRoles: ['Schedule Admins'] });
|
||||
|
||||
const selectedDate = ref(today());
|
||||
const { fetchBoats } = useBoatStore();
|
||||
const intervalStore = useIntervalStore();
|
||||
const intervalTemplateStore = useIntervalTemplateStore();
|
||||
const { boats } = storeToRefs(useBoatStore());
|
||||
const intervalTemplates = intervalTemplateStore.getIntervalTemplates();
|
||||
const calendar = ref();
|
||||
const overlapped = ref();
|
||||
const alert = ref(false);
|
||||
const newTemplate = ref<IntervalTemplate>({
|
||||
$id: '',
|
||||
name: 'NewTemplate',
|
||||
timeTuples: [['09:00', '12:00']],
|
||||
});
|
||||
|
||||
onMounted(async () => {
|
||||
await fetchBoats();
|
||||
await intervalTemplateStore.fetchIntervalTemplates();
|
||||
});
|
||||
|
||||
const filteredIntervals = (ts: Timestamp, boat: Boat) => {
|
||||
return intervalStore.getIntervals(ts, boat);
|
||||
};
|
||||
|
||||
const sortedIntervals = (ts: Timestamp, boat: Boat) => {
|
||||
return computed(() =>
|
||||
filteredIntervals(ts, boat).value.sort(
|
||||
(a, b) => Date.parse(a.start) - Date.parse(b.start)
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
function resetNewTemplate() {
|
||||
newTemplate.value = {
|
||||
$id: 'unsaved',
|
||||
name: 'NewTemplate',
|
||||
timeTuples: [['09:00', '12:00']],
|
||||
};
|
||||
}
|
||||
function createTemplate() {
|
||||
newTemplate.value.$id = 'unsaved';
|
||||
}
|
||||
function createIntervals(boat: Boat, templateId: string, dateStr: string) {
|
||||
const intervals = intervalsFromTemplate(boat, templateId, dateStr);
|
||||
intervals.forEach((interval) => intervalStore.createInterval(interval));
|
||||
}
|
||||
|
||||
function getIntervals(ts: Timestamp, boat: Boat) {
|
||||
return intervalStore.getIntervals(ts, boat);
|
||||
}
|
||||
|
||||
function intervalsFromTemplate(
|
||||
boat: Boat,
|
||||
templateId: string,
|
||||
dateStr: string
|
||||
): Interval[] {
|
||||
const template = intervalTemplateStore
|
||||
.getIntervalTemplates()
|
||||
.value.find((t) => t.$id === templateId);
|
||||
return template
|
||||
? template.timeTuples.map((timeTuple: TimeTuple) =>
|
||||
buildInterval(boat, timeTuple, dateStr)
|
||||
)
|
||||
: [];
|
||||
}
|
||||
|
||||
function deleteBlock(block: Interval) {
|
||||
if (block.$id) {
|
||||
intervalStore.deleteInterval(block.$id);
|
||||
}
|
||||
}
|
||||
|
||||
function onDragEnter(e: DragEvent, type: string) {
|
||||
if (type === 'day' || type === 'head-day') {
|
||||
e.preventDefault();
|
||||
if (e.target instanceof HTMLDivElement)
|
||||
e.target.classList.add('bg-secondary');
|
||||
}
|
||||
}
|
||||
|
||||
function onDragOver(e: DragEvent, type: string) {
|
||||
if (type === 'day' || type === 'head-day') {
|
||||
e.preventDefault();
|
||||
}
|
||||
}
|
||||
|
||||
function onDragLeave(e: DragEvent, type: string) {
|
||||
if (type === 'day' || type === 'head-day') {
|
||||
e.preventDefault();
|
||||
if (e.target instanceof HTMLDivElement)
|
||||
e.target.classList.remove('bg-secondary');
|
||||
}
|
||||
}
|
||||
|
||||
function onDrop(
|
||||
e: DragEvent,
|
||||
type: string,
|
||||
scope: { resource: Boat; timestamp: Timestamp }
|
||||
) {
|
||||
if (e.target instanceof HTMLDivElement)
|
||||
e.target.classList.remove('bg-secondary');
|
||||
|
||||
if ((type === 'day' || type === 'head-day') && e.dataTransfer) {
|
||||
const templateId = e.dataTransfer.getData('ID');
|
||||
const dateStr = scope.timestamp.date;
|
||||
const resource = scope.resource;
|
||||
const existingIntervals = getIntervals(scope.timestamp, resource);
|
||||
const boatsToApply = type === 'head-day' ? boats.value : [resource];
|
||||
overlapped.value = boatsToApply
|
||||
.map((boat) =>
|
||||
intervalsOverlapped(
|
||||
existingIntervals.value.concat(
|
||||
intervalsFromTemplate(boat, templateId, dateStr)
|
||||
)
|
||||
)
|
||||
)
|
||||
.flat(1);
|
||||
if (overlapped.value.length === 0) {
|
||||
boatsToApply.map((b) => createIntervals(b, templateId, dateStr));
|
||||
} else {
|
||||
alert.value = true;
|
||||
}
|
||||
}
|
||||
if (e.target instanceof HTMLDivElement)
|
||||
e.target.classList.remove('bg-secondary');
|
||||
return false;
|
||||
}
|
||||
|
||||
function onToday() { calendar.value.moveToToday(); }
|
||||
function onPrev() { calendar.value.prev(); }
|
||||
function onNext() { calendar.value.next(); }
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="fit row">
|
||||
<div class="q-pa-md">
|
||||
<div class="scheduler col-12">
|
||||
<NavigationBar @next="onNext" @today="onToday" @prev="onPrev" />
|
||||
<q-calendar-scheduler
|
||||
ref="calendar"
|
||||
v-model="selectedDate"
|
||||
v-model:model-resources="boats"
|
||||
resource-key="$id"
|
||||
resource-label="name"
|
||||
view="week"
|
||||
:weekdays="[1, 2, 3, 4, 5, 6, 0]"
|
||||
animated
|
||||
bordered
|
||||
:drag-enter-func="onDragEnter"
|
||||
:drag-over-func="onDragOver"
|
||||
:drag-leave-func="onDragLeave"
|
||||
:drop-func="onDrop"
|
||||
day-min-height="50px"
|
||||
cell-width="150px">
|
||||
<template #day="{ scope }">
|
||||
<div
|
||||
v-if="filteredIntervals(scope.timestamp, scope.resource).value.length"
|
||||
style="display: flex; flex-wrap: wrap; justify-content: space-evenly; align-items: center; font-size: 12px;">
|
||||
<template
|
||||
v-for="block in sortedIntervals(scope.timestamp, scope.resource).value"
|
||||
:key="block.$id">
|
||||
<q-chip class="cursor-pointer">
|
||||
{{ date.formatDate(block.start, 'HH:mm') }} -
|
||||
{{ date.formatDate(block.end, 'HH:mm') }}
|
||||
</q-chip>
|
||||
<q-btn size="xs" icon="delete" round @click="deleteBlock(block)" />
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
</q-calendar-scheduler>
|
||||
</div>
|
||||
</div>
|
||||
<div class="q-pa-md" style="width: 400px">
|
||||
<q-list padding bordered class="rounded-borders">
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label overline>Availability Templates</q-item-label>
|
||||
<q-item-label caption>
|
||||
Drag and drop a template to a boat / date to create booking availability
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-card-actions align="right">
|
||||
<q-btn label="Add Template" color="primary" @click="createTemplate" />
|
||||
</q-card-actions>
|
||||
<q-item v-if="newTemplate.$id === 'unsaved'">
|
||||
<IntervalTemplateComponent
|
||||
:model-value="newTemplate"
|
||||
:edit="true"
|
||||
@cancel="resetNewTemplate"
|
||||
@saved="resetNewTemplate" />
|
||||
</q-item>
|
||||
<q-separator spaced />
|
||||
<IntervalTemplateComponent
|
||||
v-for="template in intervalTemplates"
|
||||
:key="template.$id"
|
||||
:model-value="template" />
|
||||
</q-list>
|
||||
</div>
|
||||
<q-dialog v-model="alert">
|
||||
<q-card>
|
||||
<q-card-section>
|
||||
<div class="text-h6">Warning!</div>
|
||||
</q-card-section>
|
||||
<q-card-section class="q-pt-none">
|
||||
Conflicting times! Please delete overlapped items!
|
||||
<q-chip v-for="item in overlapped" :key="item.index">
|
||||
{{ boats.find((b) => b.$id === item.boatId)?.name }}:
|
||||
{{ date.formatDate(item.start, 'hh:mm') }} -
|
||||
{{ date.formatDate(item.end, 'hh:mm') }}
|
||||
</q-chip>
|
||||
</q-card-section>
|
||||
<q-card-actions align="right">
|
||||
<q-btn flat label="OK" color="primary" v-close-popup />
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user