basics of drag and drop

vue3/src/components/display/MealPlanCalendarItem.vue

@@ -1,21 +1,20 @@
 <template>
     <v-card class="card cv-item pa-0" hover
             :style="{'top': itemTop, 'height': itemHeight, 'border-color': mealPlan.mealType.color}"
+            :draggable="true"
             :key="value.id"
-            :class="value.classes"
+            @dragstart="emit('onDragStart', value, $event)"
-    >
+            :class="value.classes">
         <v-card-text class="pa-0">
             <div class="d-flex flex-row align-items-center">
                 <div class="flex-column">
                     <recipe-image :height="itemHeight" :width="itemHeight" :recipe="mealPlan.recipe"></recipe-image>
                 </div>
-                <div class="flex-column flex-grow-0">
+                <div class="flex-column flex-grow-0 pa-1">
-                    <div class="card-body pl-1 pa-1">
-
                     <span class="font-light" :class="{'two-line-text': detailedItems,'one-line-text': !detailedItems,}">
                        <i class="fas fa-shopping-cart fa-xs float-left" v-if="mealPlan.shopping"/>
-                        {{ itemTitle }}</span>
+                        {{ itemTitle }}
-                    </div>
+                    </span>
                 </div>
             </div>
 
@@ -30,6 +29,12 @@ import {computed, PropType} from "vue";
 import {IMealPlanNormalizedCalendarItem} from "@/types/MealPlan";
 import RecipeImage from "@/components/display/RecipeImage.vue";
 
+const emit = defineEmits({
+    onDragStart: (value: IMealPlanNormalizedCalendarItem, event: DragEvent) => {
+        console.log(value, event)
+        return true
+    },
+})
 
 let props = defineProps({
     value: {type: {} as PropType<IMealPlanNormalizedCalendarItem>, required: true},
@@ -52,26 +57,10 @@ const itemTitle = computed(() => {
     }
 })
 
-const itemImage = computed(() => {
-    if (mealPlan.value.recipe != undefined && mealPlan.value.recipe.image != undefined && props.detailedItems){
-        return mealPlan.value.recipe.image
-    } else {
-        return recipeDefaultImage
-    }
-})
 
 </script>
 
 <style scoped>
-.meal-plan-card {
-    background-color: #fff;
-}
-
-@media (max-width: 767.9px) {
-    .meal-plan-card {
-        font-size: 13px;
-    }
-}
 
 .two-line-text {
     display: -webkit-box;

vue3/src/pages/MealPlanPage.vue

@@ -5,7 +5,9 @@
             <CalendarView
                 :items="planItems"
                 class="theme-default"
-            :item-content-height="calendarItemHeight">
+                :item-content-height="calendarItemHeight"
+            :enable-drag-drop="true"
+            @dropOnDate="dropCalendarItemOnDate">
                 <template #item="{ value, weekStartDate, top }">
                     <meal-plan-calendar-item :item-height="calendarItemHeight" :value="value" :item-top="top"></meal-plan-calendar-item>
                 </template>
@@ -24,7 +26,8 @@ import {CalendarView, CalendarViewHeader} from "vue-simple-calendar"
 import "vue-simple-calendar/dist/style.css"
 import "vue-simple-calendar/dist/css/default.css"
 import MealPlanCalendarItem from "@/components/display/MealPlanCalendarItem.vue";
-import {IMealPlanCalendarItem} from "@/types/MealPlan";
+import {IMealPlanCalendarItem, IMealPlanNormalizedCalendarItem} from "@/types/MealPlan";
+import {DateTime} from "luxon";
 
 
 export default defineComponent({
@@ -58,7 +61,28 @@ export default defineComponent({
             this.mealPlans = r
         })
     },
-    methods: {}
+    methods: {
+        dropCalendarItemOnDate(item: IMealPlanNormalizedCalendarItem, targetDate: Date, event: DragEvent){
+            console.log(item, targetDate, event)
+            //TODO item is undefined because we have a custom item that does not set the state correctly
+            this.mealPlans.forEach(mealPlan => {
+                if (mealPlan.id == item.originalItem.mealPlan.id){
+                    let fromToDiff = DateTime.fromJSDate(mealPlan.fromDate).diff(DateTime.fromJSDate(mealPlan.toDate), 'days')
+
+                    if (event.ctrlKey) {
+                        let new_entry = Object.assign({}, mealPlan)
+                        new_entry.fromDate = targetDate
+                        new_entry.toDate = DateTime.fromJSDate(targetDate).plus(fromToDiff).toJSDate()
+                        //this.createEntry(new_entry)
+                    } else {
+                        mealPlan.fromDate = targetDate
+                        mealPlan.toDate = DateTime.fromJSDate(targetDate).plus(fromToDiff).toJSDate()
+                        //this.saveEntry(entry)
+                    }
+                }
+            })
+        }
+    }
 
 })
 </script>