Last Made

frontend/components/Domain/Recipe/RecipeLastMade.vue

@@ -30,11 +30,11 @@
                     offset-y
                     max-width="290px"
                   >
-                    <template #activator="{ props }">
+                    <template #activator="{ props: activatorProps }">
                       <v-text-field
                         v-model="newTimelineEventTimestampString"
                         :prepend-icon="$globals.icons.calendar"
-                        v-bind="props"
+                        v-bind="activatorProps"
                         readonly
                       />
                     </template>
@@ -87,12 +87,12 @@
       <div v-if="lastMadeReady" class="d-flex justify-center flex-wrap">
         <v-row no-gutters class="d-flex flex-wrap align-center" style="font-size: larger">
           <v-tooltip location="bottom">
-            <template #activator="{ props }">
+            <template #activator="{ props: tooltipProps }">
               <v-btn
                 rounded
                 variant="outlined"
                 size="x-large"
-                v-bind="props"
+                v-bind="tooltipProps"
                 style="border-color: rgb(var(--v-theme-primary));"
                 @click="madeThisDialog = true"
               >
@@ -117,7 +117,7 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { whenever } from "@vueuse/core";
 import { useUserApi } from "~/composables/api";
 import { alert } from "~/composables/use-toast";
@@ -125,15 +125,11 @@ import { useHouseholdSelf } from "~/composables/use-households";
 import type { Recipe, RecipeTimelineEventIn, RecipeTimelineEventOut } from "~/lib/api/types/recipe";
 import type { VForm } from "~/types/auto-forms";
 
-export default defineNuxtComponent({
-  props: {
-    recipe: {
-      type: Object as () => Recipe,
-      required: true,
-    },
-  },
-  emits: ["eventCreated"],
-  setup(props, context) {
+const props = defineProps<{ recipe: Recipe }>();
+const emit = defineEmits<{
+  eventCreated: [event: RecipeTimelineEventOut];
+}>();
+
 const madeThisDialog = ref(false);
 const userApi = useUserApi();
 const { household } = useHouseholdSelf();
@@ -198,10 +194,11 @@ export default defineNuxtComponent({
   newTimelineEventImagePreviewUrl.value = URL.createObjectURL(fileObject);
 }
 
-    const state = reactive({ datePickerMenu: false, madeThisFormLoading: false });
+const datePickerMenu = ref(false);
+const madeThisFormLoading = ref(false);
 
 function resetMadeThisForm() {
-      state.madeThisFormLoading = false;
+  madeThisFormLoading.value = false;
 
   newTimelineEvent.value.eventMessage = "";
   newTimelineEvent.value.timestamp = undefined;
@@ -215,7 +212,7 @@ export default defineNuxtComponent({
     return;
   }
 
-      state.madeThisFormLoading = true;
+  madeThisFormLoading.value = true;
 
   newTimelineEvent.value.recipeId = props.recipe.id;
   // Note: $auth.user is now a ref
@@ -279,26 +276,6 @@ export default defineNuxtComponent({
   }
 
   resetMadeThisForm();
-      context.emit("eventCreated", newEvent);
+  emit("eventCreated", newEvent);
 }
-
-    return {
-      ...toRefs(state),
-      domMadeThisForm,
-      madeThisDialog,
-      firstDayOfWeek,
-      newTimelineEvent,
-      newTimelineEventImage,
-      newTimelineEventImagePreviewUrl,
-      newTimelineEventTimestamp,
-      newTimelineEventTimestampString,
-      lastMade,
-      lastMadeReady,
-      createTimelineEvent,
-      clearImage,
-      uploadImage,
-      updateUploadedImage,
-    };
-  },
-});
 </script>