Rename TimeBlock to Interva. More Interval functionality.

src/components/scheduling/IntervalTemplateComponent.vue

@@ -3,6 +3,7 @@
     expand-icon-toggle
     draggable="true"
     @dragstart="onDragStart($event, template)"
+    v-model="expanded"
   >
     <template v-slot:header>
       <q-item-section>
@@ -21,7 +22,7 @@
       <q-card-section horizontal>
         <q-card-section class="q-pt-xs">
           <q-list dense>
-            <q-item v-for="item in template.timeTuples" :key="item[0]">
+            <q-item v-for="(item, index) in template.timeTuples" :key="item[0]">
               <q-input
                 class="q-mx-sm"
                 dense
@@ -29,8 +30,7 @@
                 type="time"
                 label="Start"
                 :borderless="!edit"
-                :readonly="!edit"
-              />
+                :readonly="!edit" />
               <q-input
                 class="q-mx-sm"
                 dense
@@ -39,17 +39,26 @@
                 label="End"
                 :borderless="!edit"
                 :readonly="!edit"
-              /> </q-item></q-list
-        ></q-card-section>
-        <q-btn
-          v-if="edit"
-          dense
-          color="primary"
-          size="sm"
-          label="Add interval"
-          @click="template.timeTuples.push(['00:00', '00:00'])"
-        />
-        <q-card-actions align="right" vertical>
+              >
+                <template v-slot:after>
+                  <q-btn
+                    v-if="edit"
+                    round
+                    dense
+                    flat
+                    icon="delete"
+                    @click="template.timeTuples.splice(index, 1)"
+                  /> </template></q-input></q-item
+          ></q-list>
+          <q-btn
+            v-if="edit"
+            dense
+            color="primary"
+            size="sm"
+            label="Add interval"
+            @click="template.timeTuples.push(['00:00', '00:00'])"
+        /></q-card-section>
+        <q-card-actions vertical>
           <q-btn
             v-if="!edit"
             color="primary"
@@ -105,24 +114,24 @@
 
 <script setup lang="ts">
 import {
-  copyTimeBlockTemplate,
+  copyIntervalTemplate,
   timeTuplesOverlapped,
   useScheduleStore,
 } from 'src/stores/schedule';
-import { TimeBlockTemplate } from 'src/stores/schedule.types';
+import { IntervalTemplate } from 'src/stores/schedule.types';
 import { ref } from 'vue';
 const alert = ref(false);
 const overlapped = ref();
 const scheduleStore = useScheduleStore();
-const props = defineProps<{ edit?: boolean; modelValue: TimeBlockTemplate }>();
+const props = defineProps<{ edit?: boolean; modelValue: IntervalTemplate }>();
 const edit = ref(props.edit);
-const template = ref(copyTimeBlockTemplate(props.modelValue));
+const expanded = ref(props.edit);
+const template = ref(copyIntervalTemplate(props.modelValue));
 
-const emit = defineEmits<{ (e: 'cancel'): void }>();
+const emit = defineEmits<{ (e: 'cancel'): void; (e: 'saved'): void }>();
 
 const revert = () => {
-  template.value = copyTimeBlockTemplate(props.modelValue);
-  console.log(template.value, props.modelValue);
+  template.value = copyIntervalTemplate(props.modelValue);
   edit.value = false;
   emit('cancel');
 };
@@ -133,33 +142,33 @@ const toggleEdit = () => {
 
 const deleteTemplate = (
   event: Event,
-  template: TimeBlockTemplate | undefined
+  template: IntervalTemplate | undefined
 ) => {
-  if (template?.$id) scheduleStore.deleteTimeBlockTemplate(template.$id);
+  if (template?.$id) scheduleStore.deleteIntervalTemplate(template.$id);
 };
 
-function onDragStart(e: DragEvent, template: TimeBlockTemplate) {
+function onDragStart(e: DragEvent, template: IntervalTemplate) {
   if (e.dataTransfer) {
-    console.log('Drag start: ', e);
     e.dataTransfer.dropEffect = 'copy';
     e.dataTransfer.effectAllowed = 'move';
     e.dataTransfer.setData('ID', template.$id || '');
   }
 }
-const saveTemplate = (evt: Event, template: TimeBlockTemplate | undefined) => {
+const saveTemplate = (evt: Event, template: IntervalTemplate | undefined) => {
+  console.log(template);
   if (!template) return false;
   overlapped.value = timeTuplesOverlapped(template.timeTuples);
   if (overlapped.value.length > 0) {
     alert.value = true;
   } else {
+    edit.value = false;
     if (template.$id && template.$id !== 'unsaved') {
       console.log(template.$id);
-      scheduleStore.updateTimeBlockTemplate(template, template.$id);
+      scheduleStore.updateIntervalTemplate(template, template.$id);
     } else {
-      scheduleStore.createTimeBlockTemplate(template);
-      template.$id = '';
+      scheduleStore.createIntervalTemplate(template);
+      emit('saved');
     }
-    edit.value = false;
   }
 };
 </script>

src/components/scheduling/boat/BoatScheduleTableComponent.vue

@@ -76,12 +76,12 @@ import CalendarHeaderComponent from './CalendarHeaderComponent.vue';
 import { ref, computed } from 'vue';
 import { useBoatStore } from 'src/stores/boat';
 import { useScheduleStore } from 'src/stores/schedule';
-import { TimeBlock } from 'src/stores/schedule.types';
+import { Interval } from 'src/stores/schedule.types';
 import { storeToRefs } from 'pinia';
 
 const scheduleStore = useScheduleStore();
 const { boats } = storeToRefs(useBoatStore());
-const selectedBlock = defineModel<TimeBlock | null>();
+const selectedBlock = defineModel<Interval | null>();
 const selectedDate = ref(today());
 
 const calendar = ref<QCalendarDay | null>(null);
@@ -103,7 +103,7 @@ function handleSwipe({ ...event }) {
 // }
 
 function blockStyles(
-  block: TimeBlock,
+  block: Interval,
   timeStartPos: (t: string) => string,
   timeDurationHeight: (d: number) => string
 ) {
@@ -154,7 +154,7 @@ interface DayBodyScope {
   timestamp: Timestamp;
 }
 
-function selectBlock(event: MouseEvent, scope: DayBodyScope, block: TimeBlock) {
+function selectBlock(event: MouseEvent, scope: DayBodyScope, block: Interval) {
   // TODO: Disable blocks before today with updateDisabled and/or comparison
   selectedBlock.value === block
     ? (selectedBlock.value = null)
@@ -162,12 +162,12 @@ function selectBlock(event: MouseEvent, scope: DayBodyScope, block: TimeBlock) {
 }
 
 interface BoatBlocks {
-  [key: string]: TimeBlock[];
+  [key: string]: Interval[];
 }
 
 const boatBlocks = computed((): BoatBlocks => {
   return scheduleStore
-    .getTimeBlocksForDate(selectedDate.value)
+    .getIntervalsForDate(selectedDate.value)
     .reduce((result, tb) => {
       if (!result[tb.boatId]) result[tb.boatId] = [];
       result[tb.boatId].push(tb);
@@ -175,14 +175,14 @@ const boatBlocks = computed((): BoatBlocks => {
     }, <BoatBlocks>{});
 });
 
-function getBoatBlocks(scope: DayBodyScope): TimeBlock[] {
+function getBoatBlocks(scope: DayBodyScope): Interval[] {
   return boats.value[scope.columnIndex]
     ? boatBlocks.value[boats.value[scope.columnIndex].$id]
     : [];
 }
 
 // function changeEvent({ start }: { start: string }) {
-// const newBlocks = scheduleStore.getTimeBlocksForDate(start);
+// const newBlocks = scheduleStore.getIntervalsForDate(start);
 // const reservations = scheduleStore.getBoatReservations(
 //   parsed(start) as Timestamp
 // );