bab-app/app/pages/schedule/manage.vue

<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>