Edits to usability

src/pages/schedule/ManageCalendar.vue

@@ -19,6 +19,7 @@
           :drag-leave-func="onDragLeave"
           :drop-func="onDrop"
           :day-min-height="50"
+          :cell-width="140"
           :day-height="0"
         >
           <template #day="{ scope }">
@@ -59,24 +60,21 @@
           </q-item-section>
         </q-item>
         <q-card-actions align="right">
-          <q-btn label="Add Template" color="primary" @click="addTemplate" />
+          <q-btn label="Add Template" color="primary" @click="createTemplate" />
         </q-card-actions>
+        <q-item v-if="newTemplate.$id === 'unsaved'"
+          ><TimeBlockTemplateComponent
+            :model-value="newTemplate"
+            :edit="true"
+            @cancel="cancelNewTemplate"
+        /></q-item>
         <q-separator spaced />
-        <q-expansion-item
+        <TimeBlockTemplateComponent
           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>
+          :model-value="template"
+        />
+      </q-list>
     </div>
   </div>
 </template>
@@ -103,6 +101,12 @@ const { getTimeBlocks, fetchTimeBlocks, fetchTimeBlockTemplates } =
 const { boats } = storeToRefs(useBoatStore());
 const { timeblockTemplates } = storeToRefs(useScheduleStore());
 const calendar = ref();
+const blankTemplate: TimeBlockTemplate = {
+  $id: '',
+  name: 'NewTemplate',
+  timeTuples: [['00:00', '00:00']],
+};
+const newTemplate = ref<TimeBlockTemplate>({ ...blankTemplate });
 
 onMounted(async () => {
   await fetchBoats();
@@ -110,8 +114,12 @@ onMounted(async () => {
   await fetchTimeBlockTemplates();
 });
 
-function addTemplate() {
-  timeblockTemplates.value.push({ name: 'New Template', timeTuples: [] });
+function cancelNewTemplate() {
+  newTemplate.value = { ...blankTemplate };
+  console.log(newTemplate.value);
+}
+function createTemplate() {
+  newTemplate.value.$id = 'unsaved';
 }
 function createTimeBlock(boat: Boat, templateId: string, date: string) {
   const timeBlock = timeblockTemplates.value.find((t) => t.$id === templateId);
@@ -120,14 +128,6 @@ function createTimeBlock(boat: Boat, templateId: string, date: string) {
   );
 }
 
-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') {