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,39 +125,35 @@ 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({
+const props = defineProps<{ recipe: Recipe }>();
-  props: {
+const emit = defineEmits<{
-    recipe: {
+  eventCreated: [event: RecipeTimelineEventOut];
-      type: Object as () => Recipe,
+}>();
-      required: true,
+
-    },
+const madeThisDialog = ref(false);
-  },
+const userApi = useUserApi();
-  emits: ["eventCreated"],
+const { household } = useHouseholdSelf();
-  setup(props, context) {
+const i18n = useI18n();
-    const madeThisDialog = ref(false);
+const $auth = useMealieAuth();
-    const userApi = useUserApi();
+const domMadeThisForm = ref<VForm>();
-    const { household } = useHouseholdSelf();
+const newTimelineEvent = ref<RecipeTimelineEventIn>({
-    const i18n = useI18n();
-    const $auth = useMealieAuth();
-    const domMadeThisForm = ref<VForm>();
-    const newTimelineEvent = ref<RecipeTimelineEventIn>({
   subject: "",
   eventType: "comment",
   eventMessage: "",
   timestamp: undefined,
   recipeId: props.recipe?.id || "",
-    });
+});
-    const newTimelineEventImage = ref<Blob | File>();
+const newTimelineEventImage = ref<Blob | File>();
-    const newTimelineEventImageName = ref<string>("");
+const newTimelineEventImageName = ref<string>("");
-    const newTimelineEventImagePreviewUrl = ref<string>();
+const newTimelineEventImagePreviewUrl = ref<string>();
-    const newTimelineEventTimestamp = ref<Date>(new Date());
+const newTimelineEventTimestamp = ref<Date>(new Date());
-    const newTimelineEventTimestampString = computed(() => {
+const newTimelineEventTimestampString = computed(() => {
   return newTimelineEventTimestamp.value.toISOString().substring(0, 10);
-    });
+});
 
-    const lastMade = ref(props.recipe.lastMade);
+const lastMade = ref(props.recipe.lastMade);
-    const lastMadeReady = ref(false);
+const lastMadeReady = ref(false);
-    onMounted(async () => {
+onMounted(async () => {
   if (!$auth.user?.value?.householdSlug) {
     lastMade.value = props.recipe.lastMade;
   }
@@ -167,55 +163,56 @@ export default defineNuxtComponent({
   }
 
   lastMadeReady.value = true;
-    });
+});
 
-    whenever(
+whenever(
   () => madeThisDialog.value,
   () => {
     // Set timestamp to now
     newTimelineEventTimestamp.value = new Date(Date.now() - new Date().getTimezoneOffset() * 60000);
   },
-    );
+);
 
-    const firstDayOfWeek = computed(() => {
+const firstDayOfWeek = computed(() => {
   return household.value?.preferences?.firstDayOfWeek || 0;
-    });
+});
 
-    function clearImage() {
+function clearImage() {
   newTimelineEventImage.value = undefined;
   newTimelineEventImageName.value = "";
   newTimelineEventImagePreviewUrl.value = undefined;
-    }
+}
 
-    function uploadImage(fileObject: File) {
+function uploadImage(fileObject: File) {
   newTimelineEventImage.value = fileObject;
   newTimelineEventImageName.value = fileObject.name;
   newTimelineEventImagePreviewUrl.value = URL.createObjectURL(fileObject);
-    }
+}
 
-    function updateUploadedImage(fileObject: Blob) {
+function updateUploadedImage(fileObject: Blob) {
   newTimelineEventImage.value = fileObject;
   newTimelineEventImagePreviewUrl.value = URL.createObjectURL(fileObject);
-    }
+}
 
-    const state = reactive({ datePickerMenu: false, madeThisFormLoading: false });
+const datePickerMenu = ref(false);
+const madeThisFormLoading = ref(false);
 
-    function resetMadeThisForm() {
+function resetMadeThisForm() {
-      state.madeThisFormLoading = false;
+  madeThisFormLoading.value = false;
 
   newTimelineEvent.value.eventMessage = "";
   newTimelineEvent.value.timestamp = undefined;
   clearImage();
   madeThisDialog.value = false;
   domMadeThisForm.value?.reset();
-    }
+}
 
-    async function createTimelineEvent() {
+async function createTimelineEvent() {
   if (!(newTimelineEventTimestampString.value && props.recipe?.id && props.recipe?.slug)) {
     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>