Tanner's feedback implementation

jlucaspains · Dec 2, 2024 · 99dfeb6 · 99dfeb6
1 parent a50b97b
commit 99dfeb6
Show file tree

Hide file tree

Showing 8 changed files with 41 additions and 16 deletions.
diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
@@ -140,7 +140,7 @@
                     "changeLanguage": "Change Language",
                     "changeLanguageTitle": "Change recipe language",
                     "category": "Category",
-                    "selectCategory": "Select category"
+                    "selectCategory": "Select category..."
                 },
                 "gallery": {
                     "recipeImage": "Recipe Image"

diff --git a/public/locales/pt/translation.json b/public/locales/pt/translation.json
@@ -139,7 +139,7 @@
                     "changeLanguage": "Alterar idioma",
                     "changeLanguageTitle": "Alterar idioma da receita",
                     "category": "Categoria",
-                    "selectCategory": "Selecione categoria"
+                    "selectCategory": "Selecione categoria..."
                 },
                 "gallery": {
                     "recipeImage": "Imagem de Receita"

diff --git a/src/components/CategoryList.vue b/src/components/CategoryList.vue
@@ -25,7 +25,8 @@ function goToCategory(id: number) {
   <div class="bg-white text-slate-900 dark:bg-theme-gray dark:text-white">
     <div class="grid md:grid-cols-2 lg:grid-cols-3 my-4 gap-5">
       <recipe-card v-for="category in categories" :title="category.name" :image="category.image"
-        :imageAvailable="category.image != undefined" @click="goToCategory(category.id)" :rating="0" />
+        :imageAvailable="category.image != undefined" :recipeCount="category.recipeCount"
+        @click="goToCategory(category.id)" :rating="0" />
     </div>
   </div>
 </template>
diff --git a/src/components/RecipeCard.vue b/src/components/RecipeCard.vue
@@ -4,6 +4,7 @@ const props = defineProps<{
     image: string | undefined;
     imageAvailable: boolean;
     rating: number;
+    recipeCount: number;
 }>();
 
 const emit = defineEmits<{
@@ -23,7 +24,7 @@ const emit = defineEmits<{
           cursor-pointer
         ">
         <div style="height: calc(100% - 0.5rem)" class="-mx-5 -mt-5 overflow-hidden">
-            <img alt="Recipe" v-if="props.imageAvailable" :src="props.image" class="object-contain" />
+            <img alt="Recipe" v-if="props.imageAvailable" :src="props.image" class="object-contain m-auto" />
             <div v-else class="bg-theme-primary h-full grid place-items-center">
                 <svg class="h-16 w-16 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                     stroke-linecap="round" stroke-linejoin="round">
@@ -33,15 +34,19 @@ const emit = defineEmits<{
                 </svg>
             </div>
         </div>
-        <div class="h-full pt-2">
-            <div class="truncate inline-block" style="width: calc(100% - 35px)">
+        <div class="pt-2 flex">
+            <div class="truncate grow pe-2">
                 <span data-testid="recipe-title" class="text-ellipsis text-black dark:text-white text-lg">{{
                     props.title
                 }}</span>
             </div>
-            <div class="truncate inline-block" syle="width: 30px">
-                <span data-testid="recipe-score" class="text-black dark:text-white" v-show="props.rating > 0">{{
-                    props.rating }}⭐</span>
+            <div class="my-auto" v-if="props.rating > 0">
+                <span data-testid="recipe-score" class="text-black dark:text-white">⭐{{
+                    props.rating }}</span>
+            </div>
+            <div class="my-auto" v-if="props.recipeCount > 0">
+                <span data-testid="recipe-count" class="text-black dark:text-white">{{
+                    props.recipeCount }}</span>
             </div>
         </div>
     </div>

diff --git a/src/components/RecipeList.vue b/src/components/RecipeList.vue
@@ -156,7 +156,7 @@ onMounted(async () => {
 });
 
 async function loadCategory() {
-  if (props.categoryId){
+  if (props.categoryId) {
     allRecipes = (await getRecipesByCategory(props.categoryId)) as RecipeViewModel[];
   } else {
     allRecipes = (await getRecipes()) as RecipeViewModel[];
@@ -196,7 +196,11 @@ function goToRecipe(id: number) {
 }
 
 function goToNew() {
-  router.push("/recipe/0/edit");
+  if (props.categoryId && props.categoryId > 0) {
+    router.push(`/recipe/0/edit?categoryId=${props.categoryId}`);
+  } else {
+    router.push(`/recipe/0/edit`);
+  }
 }
 
 function goToImportFromUrl() {
@@ -288,7 +292,8 @@ function simpleSearchInText(a: string, b: string) {
     </TransitionRoot>
     <div class="grid md:grid-cols-2 lg:grid-cols-3 my-4 gap-5">
       <recipe-card v-for="item in items" :key="item.id" :title="item.title" :image="item.image"
-        :imageAvailable="item.imageAvailable" :rating="item.score" @click="goToRecipe(item.id || 0)" />
+        :imageAvailable="item.imageAvailable" :rating="item.score" @click="goToRecipe(item.id || 0)"
+        :recipeCount="0" />
     </div>
     <Menu as="div" class="p-0 w-14 h-14 fixed bottom-6 right-6">
       <div>

diff --git a/src/pages/recipe/[id]/edit.vue b/src/pages/recipe/[id]/edit.vue
@@ -37,8 +37,9 @@ const { t } = useTranslation();
 let isDirty = false;
 let croppingCanvas: HTMLCanvasElement;
 
-const id = computed(() => parseInt(route.params.id as string));
 const query = computed(() => route.query);
+const id = computed(() => parseInt(route.params.id as string));
+const categoryId = computed(() => parseInt(query.value.categoryId as string ?? "0"));
 const item = ref({
   id: 0,
   title: "",
@@ -49,6 +50,7 @@ const item = ref({
   imageAvailable: false,
   multiplier: 1,
   language: i18next.language,
+  categoryId: categoryId.value,
   nutrition: {
     servingSize: 0,
     totalFat: 0,
@@ -332,6 +334,11 @@ async function importRecipeFromUrl() {
     }
 
     item.value.imageAvailable = images.value.length > 0;
+
+    if (editInSingleTextArea.value) {
+      ingredientsText.value = item.value.ingredients.join("\n");
+      stepsText.value = item.value.steps.join("\n");
+    }
   }
   catch {
     isImportFromUrlModalOpen.value = true;
@@ -678,7 +685,7 @@ function changeLanguage() {
       <RatingPicker class="mb-2" v-model="item.score" />
       <label>{{ t("pages.recipe.id.edit.category") }}</label>
       <select v-model="item.categoryId" class="block p-2 w-full rounded text-black shadow-sm">
-        <option value="">{{ t("pages.recipe.id.edit.selectCategory") }}</option>
+        <option value="0" disabled>{{ t('pages.recipe.id.edit.selectCategory') }}</option>
         <option v-for="category in categories" :value="category.id">{{ category.name }}</option>
       </select>
       <label>{{ t("pages.recipe.id.edit.ingredients") }}</label>

diff --git a/src/services/category.ts b/src/services/category.ts
@@ -2,4 +2,5 @@ export class Category {
     id!: number;
     name!: string;
     image!: string | undefined;
+    recipeCount!: number;
 }
diff --git a/src/services/dataService.ts b/src/services/dataService.ts
@@ -243,7 +243,12 @@ export async function getCategories(): Promise<Array<Category>> {
             id: category.id, name: category.name
         } as Category;
 
-        const recipe = await db.recipes.where("categoryId").equals(category.id).first();
+        const recipes = db.recipes.where("categoryId").equals(category.id);
+        const count = await recipes.count();
+        const recipe = await recipes.first();
+
+        resultItem.recipeCount = count;
+
         if (category.image) {
             resultItem.image = category.image;
         } else if (recipe) {
@@ -255,7 +260,8 @@ export async function getCategories(): Promise<Array<Category>> {
             result.push(resultItem);
         }
     }
-    result.push({ id: 0, name: "All", image: undefined });
+    const allRecipesCount = await db.recipes.count();
+    result.push({ id: 0, name: "All", image: undefined, recipeCount: allRecipesCount });
     return result;
 }