feat: Move servings form to new component and fix scroll bug

sopelj · Aug 18, 2024 · 46e1658 · 46e1658
1 parent f8e219d
commit 46e1658
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 46 deletions.
diff --git a/src/components/ServingsForm.vue b/src/components/ServingsForm.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { router, useForm } from "@inertiajs/vue3";
+import { useI18n } from "vue-i18n";
+
+const props = defineProps<{ servings: number }>();
+
+const { t } = useI18n();
+const form = useForm({ servings: props.servings });
+
+const updateServings = (multiplier: number) => {
+  console.log(form.servings);
+  if (!form.servings) {
+    form.servings = props.servings;
+    return;
+  }
+  const newValue = form.servings * multiplier;
+  if (newValue > 50 || newValue < 0.125) {
+    form.setError("servings", t('recipe.scale_outside_range'))
+    form.servings = props.servings;
+    return;
+  }
+  form.servings = newValue;
+  form.get(window.location.pathname, { only: ["ingredients", "servings"], preserveScroll: true });
+};
+</script>
+
+<template>
+<div class="grow-0 ml-4">
+  <InputGroup class="grow-0">
+    <Button
+      :disabled="form.servings / 2 <= 0.125"
+      :loading="form.processing"
+      @click="updateServings(0.5)"
+    >
+      {{ t("recipe.scale_halve") }}
+    </Button>
+    <InputNumber
+      v-model="form.servings"
+      placeholder="servings"
+      :min="0.125"
+      :max="100"
+      input-class="text-center pa-0"
+      :fluid="true"
+      :disabled="form.processing"
+      @update:model-value="updateServings(1)"
+    />
+    <Button
+      :disabled="form.servings * 2 >= 50"
+      :loading="form.processing"
+      @click="updateServings(2)"
+    >
+      {{ t("recipe.scale_double") }}
+    </Button>
+  </InputGroup>
+  <Message
+    v-if="form.errors?.servings"
+    severity="error"
+  >
+    {{ form.errors?.servings }}
+  </Message>
+</div>
+</template>
diff --git a/src/locales/en.json b/src/locales/en.json
@@ -46,6 +46,7 @@
     "ratings": "No ratings | {n} rating | {n} ratings",
     "scale_double": "x2",
     "scale_halve": "½",
+    "scale_outside_range": "Serving value must be between 0.125 and 50",
     "servings": "{n} serving | {n} servings",
     "share": "Share recipe",
     "share_title": "Recipe for \"{name}\"",

diff --git a/src/locales/fr.json b/src/locales/fr.json
@@ -46,6 +46,7 @@
     "ratings": "Pas de notes | {n} note | {n} notes",
     "scale_double": "x2",
     "scale_halve": "½",
+    "scale_outside_range": "Nombre de portions doit être entre 0.125 et 50",
     "servings": "{n} portion | {n} portions",
     "share": "Recette pour « {name} »",
     "step_title": "Étape {step}",

diff --git a/src/locales/ja.json b/src/locales/ja.json
@@ -46,6 +46,7 @@
     "ratings": "評価なし | {n}件の評価 | {n}件の評価",
     "scale_double": "2倍",
     "scale_halve": "半分",
+    "scale_outside_range": "サービング数は0.125から50の間でなければなりません。",
     "servings": "{n}食分",
     "share": "レシピを共有する",
     "share_title": "「{name}」のレシピ",

diff --git a/src/pages/RecipeDetail.vue b/src/pages/RecipeDetail.vue
@@ -16,6 +16,7 @@ import RecipeDurations from "@/components/RecipeDurations.vue";
 import RecipeSource from "@/components/RecipeSource.vue";
 import UserAvatar from "@/components/UserAvatar.vue";
 import HeadSection from "@/layouts/HeadSection.vue";
+import ServingsForm from "@/components/ServingsForm.vue";
 
 interface FormErrors {
   servings?: string[];
@@ -43,22 +44,7 @@ const shareRecipe = async () => {
 const servingAmount = ref<number>(props.servings || 1);
 const formError = ref<string | undefined>();
 
-const updateServings = (multiplier: number) => {
-  if (!servingAmount.value) {
-    servingAmount.value = props.servings;
-    return;
-  }
-  const newValue = servingAmount.value * multiplier;
-  if (newValue > 100 || newValue < 0.125) {
-    formError.value = "Serving value must be between 0.125 and 100";
-    servingAmount.value = props.servings;
-    return;
-  }
-  // TODO: use `useForm` when django-inertia supports it.
-  router.visit(`${window.location.pathname}?servings=${newValue}`, {
-    only: ["ingredients", "servings"],
-  });
-};
+
 </script>
 
 <template>
@@ -164,36 +150,7 @@ const updateServings = (multiplier: number) => {
             <template #title>
               <div class="flex flex-row items-center">
                 <h2 class="text-xxl grow w-100 mr-2">{{ t("recipe.ingredients") }}</h2>
-                <div class="grow-0 ml-4">
-                  <InputGroup class="grow-0">
-                    <Button
-                      :disabled="!servingAmount || servingAmount / 2 <= 0.125"
-                      @click="updateServings(0.5)"
-                    >
-                      {{ t("recipe.scale_halve") }}
-                    </Button>
-                    <InputNumber
-                      v-model="servingAmount"
-                      placeholder="servings"
-                      :min="0.125"
-                      :max="100"
-                      input-class="text-center pa-0"
-                      :fluid="true"
-                      @update="updateServings(1)"
-                    />
-                    <Button
-                      :disabled="servingAmount * 2 >= 100"
-                      @click="updateServings(2)"
-                    >
-                      {{ t("recipe.scale_double") }}
-                    </button>
-                  </InputGroup>
-                  <Message
-                    v-if="errors?.servings?.length"
-                    severity="error"
-                  >{{ errors.servings[0] }}</Message
-                  >
-                </div>
+                <ServingsForm :servings="servings || 1" />
               </div>
             </template>
             <template #content>