oys/bab-app
1
0
Fork 0
Code Issues 29 Pull Requests Actions Packages Projects 1 Releases 4 Wiki Activity

Many improvements. Still no reactivity on List

Browse Source
This commit is contained in:
Patrick Toal
2024-06-02 08:48:14 -04:00
parent 387af2e6ce
commit 9104ccab0f
16 changed files with 395 additions and 289 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
src/pages/schedule/ManageCalendar.vue
View File

@@ -1,8 +1,13 @@
<template>
<div class="fit row wrap justify-start items-start content-start">
<div class="q-pa-md">
<div class="scheduler" style="max-width: 1200px">
<NavigationBar @next="onNext" @today="onToday" @prev="onPrev" />
<div
class="scheduler"
style="max-width: 1200px">
<NavigationBar
@next="onNext"
@today="onToday"
@prev="onPrev" />
<q-calendar-scheduler
ref="calendar"
v-model="selectedDate"
@@ -18,8 +23,7 @@
:drag-leave-func="onDragLeave"
:drop-func="onDrop"
day-min-height="50px"
cell-width="150px"
>
cell-width="150px">
<template #day="{ scope }">
<div
v-if="filteredIntervals(scope.timestamp, scope.resource).length"
@@ -29,15 +33,13 @@
justify-content: space-evenly;
align-items: center;
font-size: 12px;
"
>
">
<template
v-for="block in sortedIntervals(
scope.timestamp,
scope.resource
)"
:key="block.id"
>
:key="block.id">
<q-chip class="cursor-pointer">
{{ date.formatDate(block.start, 'HH:mm') }} -
{{ date.formatDate(block.end, 'HH:mm') }}
@@ -77,46 +79,53 @@
).toISOString())
"
/>
</q-popup-edit>--> </q-chip
><q-btn
</q-popup-edit>-->
</q-chip>
<q-btn
size="xs"
icon="delete"
round
@click="deleteBlock(block)"
/>
@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">
<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-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-btn
label="Add Template"
color="primary"
@click="createTemplate" />
</q-card-actions>
<q-item v-if="newTemplate.$id === 'unsaved'"
><IntervalTemplateComponent
<q-item v-if="newTemplate.$id === 'unsaved'">
<IntervalTemplateComponent
:model-value="newTemplate"
:edit="true"
@cancel="resetNewTemplate"
@saved="resetNewTemplate"
/></q-item>
@saved="resetNewTemplate" />
</q-item>
<q-separator spaced />
<IntervalTemplateComponent
v-for="template in intervalTemplates"
:key="template.$id"
:model-value="template"
/>
:model-value="template" />
</q-list>
</div>
</div>
@@ -127,16 +136,23 @@
</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 }}:
<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>
<q-btn
flat
label="OK"
color="primary"
v-close-popup />
</q-card-actions>
</q-card>
</q-dialog>
</template>
<script setup lang="ts">
@@ -146,7 +162,7 @@ import {
today,
} from '@quasar/quasar-ui-qcalendar';
import { Boat, useBoatStore } from 'src/stores/boat';
import { useScheduleStore } from 'src/stores/schedule';
import { useIntervalStore } from 'src/stores/interval';
import { onMounted, ref } from 'vue';
import type {
Interval,
@@ -158,12 +174,14 @@ import IntervalTemplateComponent from 'src/components/scheduling/IntervalTemplat
import NavigationBar from 'src/components/scheduling/NavigationBar.vue';
import { storeToRefs } from 'pinia';
import { buildInterval, intervalsOverlapped } from 'src/utils/schedule';
import { useIntervalTemplateStore } from 'src/stores/intervalTemplate';
const selectedDate = ref(today());
const { fetchBoats } = useBoatStore();
const scheduleStore = useScheduleStore();
const intervalStore = useIntervalStore();
const intervalTemplateStore = useIntervalTemplateStore();
const { boats } = storeToRefs(useBoatStore());
const intervalTemplates = scheduleStore.getIntervalTemplates();
const intervalTemplates = intervalTemplateStore.getIntervalTemplates();
const calendar = ref();
const overlapped = ref();
const alert = ref(false);
@@ -182,11 +200,11 @@ const newTemplate = ref<IntervalTemplate>({
onMounted(async () => {
await fetchBoats();
await scheduleStore.fetchIntervalTemplates();
await intervalTemplateStore.fetchIntervalTemplates();
});
const filteredIntervals = (date: Timestamp, boat: Boat) => {
return scheduleStore.getIntervals(date, boat);
return intervalStore.getIntervals(date, boat);
};
const sortedIntervals = (date: Timestamp, boat: Boat) => {
@@ -207,11 +225,11 @@ function createTemplate() {
}
function createIntervals(boat: Boat, templateId: string, date: string) {
const intervals = intervalsFromTemplate(boat, templateId, date);
intervals.forEach((interval) => scheduleStore.createInterval(interval));
intervals.forEach((interval) => intervalStore.createInterval(interval));
}
function getIntervals(date: Timestamp, boat: Boat) {
return scheduleStore.getIntervals(date, boat);
return intervalStore.getIntervals(date, boat);
}
function intervalsFromTemplate(
@@ -219,7 +237,7 @@ function intervalsFromTemplate(
templateId: string,
date: string
): Interval[] {
const template = scheduleStore
const template = intervalTemplateStore
.getIntervalTemplates()
.value.find((t) => t.$id === templateId);
return template
@@ -231,7 +249,7 @@ function intervalsFromTemplate(
function deleteBlock(block: Interval) {
if (block.$id) {
scheduleStore.deleteInterval(block.$id);
intervalStore.deleteInterval(block.$id);
}
}