bab-app/src/pages/schedule/ManageCalendar.vue

<template>
  <div class="fit row wrap justify-start items-start content-start">
    <div class="col-9 q-pa-md">
      <div class="scheduler">
        <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]"
          hoverable
          animated
          bordered
          :drag-enter-func="onDragEnter"
          :drag-over-func="onDragOver"
          :drag-leave-func="onDragLeave"
          :drop-func="onDrop"
          :day-min-height="50"
          :day-height="0"
        >
          <template #day="{ scope }">
            <div
              v-if="getTimeBlocks(scope.timestamp, scope.resource)"
              style="
                display: flex;
                flex: 1 0 auto;
                flex-wrap: wrap;
                justify-content: space-evenly;
                align-items: center;
                font-size: 12px;
              "
            >
              <template
                v-for="event in getTimeBlocks(scope.timestamp, scope.resource)"
                :key="event.id"
              >
                <q-chip clickable square icon="schedule">
                  {{ date.formatDate(event.start, 'HH:mm') }} -
                  {{ date.formatDate(event.end, 'HH:mm') }}</q-chip
                >
              </template>
            </div>
          </template>
        </q-calendar-scheduler>
      </div>
    </div>
    <div class="col-3 q-pa-md">
      <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="addTemplate" />
        </q-card-actions>
        <q-separator spaced />
        <q-expansion-item
          v-for="template in timeblockTemplates"
          :key="template.$id"
          dense
          dense-toggle
          expand-separator
          :label="template.name"
          style="font-size: 0.8em"
          draggable="true"
          @dragstart="onDragStart($event, template)"
        >
          <TimeBlockTemplateComponent
            :model-value="template"
          /> </q-expansion-item
      ></q-list>
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  QCalendarScheduler,
  Timestamp,
  today,
} from '@quasar/quasar-ui-qcalendar';
import { Boat, useBoatStore } from 'src/stores/boat';
import { buildTimeBlock, useScheduleStore } from 'src/stores/schedule';
import { onMounted, ref } from 'vue';
import type { TimeBlockTemplate, TimeTuple } from 'src/stores/schedule.types';
import { date } from 'quasar';
import TimeBlockTemplateComponent from 'src/components/scheduling/TimeBlockTemplateComponent.vue';
import NavigationBar from 'src/components/scheduling/NavigationBar.vue';
import { storeToRefs } from 'pinia';

const selectedDate = ref(today());
const { fetchBoats } = useBoatStore();
const { getTimeBlocks, fetchTimeBlocks, fetchTimeBlockTemplates } =
  useScheduleStore();
const { boats } = storeToRefs(useBoatStore());
const { timeblockTemplates } = storeToRefs(useScheduleStore());
const calendar = ref();

onMounted(async () => {
  await fetchBoats();
  await fetchTimeBlocks();
  await fetchTimeBlockTemplates();
});

function addTemplate() {
  timeblockTemplates.value.push({ name: 'New Template', timeTuples: [] });
}
function createTimeBlock(boat: Boat, templateId: string, date: string) {
  const timeBlock = timeblockTemplates.value.find((t) => t.$id === templateId);
  timeBlock?.timeTuples.map((tb: TimeTuple) =>
    useScheduleStore().createTimeBlock(buildTimeBlock(boat, tb, date))
  );
}

function onDragStart(e: DragEvent, template: TimeBlockTemplate) {
  if (e.dataTransfer) {
    console.log('Drag start: ', e);
    e.dataTransfer.dropEffect = 'copy';
    e.dataTransfer.effectAllowed = 'move';
    e.dataTransfer.setData('ID', template.$id || '');
  }
}
function onDragEnter(e: DragEvent, type: string) {
  console.log('onDragEnter', e, type);
  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) {
  console.log('onDragOver');
  if (type === 'day' || type === 'head-day') {
    e.preventDefault();
    return true;
  }
}

function onDragLeave(e: DragEvent, type: string) {
  console.log('onDragLeave');
  if (type === 'day' || type === 'head-day') {
    e.preventDefault();
    if (e.target instanceof HTMLDivElement)
      e.target.classList.remove('bg-secondary');
    console.log(e.target);
    return false;
  }
}

function onDrop(
  e: DragEvent,
  type: string,
  scope: { resource: Boat; timestamp: Timestamp }
) {
  console.log('onDrop', e, type, scope);
  if ((type === 'day' || type === 'head-day') && e.dataTransfer) {
    const templateId = e.dataTransfer.getData('ID');
    const date = scope.timestamp.date;
    if (type === 'head-day') {
      boats.value.map((r) => createTimeBlock(r, templateId, date));
    } else {
      createTimeBlock(scope.resource, templateId, date);
    }
  }
  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>