Recipe Search Dialog

frontend/components/Domain/Recipe/RecipeDialogSearch.vue

@@ -52,10 +52,6 @@
           <div class="mr-auto">
             {{ $t("search.results") }}
           </div>
-          <!-- <router-link
-            :to="advancedSearchUrl"
-            class="text-primary"
-          > {{ $t("search.advanced-search") }} </router-link> -->
         </v-card-actions>
 
         <RecipeCardMobile
@@ -76,7 +72,7 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import RecipeCardMobile from "./RecipeCardMobile.vue";
 import { useLoggedInState } from "~/composables/use-logged-in-state";
 import type { RecipeSummary } from "~/lib/api/types/recipe";
@@ -85,114 +81,104 @@ import { useRecipeSearch } from "~/composables/recipes/use-recipe-search";
 import { usePublicExploreApi } from "~/composables/api/api-client";
 
 const SELECTED_EVENT = "selected";
-export default defineNuxtComponent({
-  components: {
-    RecipeCardMobile,
-  },
 
-  setup(_, context) {
+// Define emits
-    const $auth = useMealieAuth();
+const emit = defineEmits<{
-    const state = reactive({
+  selected: [recipe: RecipeSummary];
-      loading: false,
+}>();
-      selectedIndex: -1,
-    });
 
-    // ===========================================================================
+const $auth = useMealieAuth();
-    // Dialog State Management
+const loading = ref(false);
-    const dialog = ref(false);
+const selectedIndex = ref(-1);
 
-    // Reset or Grab Recipes on Change
+// ===========================================================================
-    watch(dialog, (val) => {
+// Dialog State Management
+const dialog = ref(false);
+
+// Reset or Grab Recipes on Change
+watch(dialog, (val) => {
   if (!val) {
     search.query.value = "";
-        state.selectedIndex = -1;
+    selectedIndex.value = -1;
     search.data.value = [];
   }
-    });
+});
 
-    // ===========================================================================
+// ===========================================================================
-    // Event Handlers
+// Event Handlers
 
-    function selectRecipe() {
+function selectRecipe() {
   const recipeCards = document.getElementsByClassName("arrow-nav");
   if (recipeCards) {
-        if (state.selectedIndex < 0) {
+    if (selectedIndex.value < 0) {
-          state.selectedIndex = -1;
+      selectedIndex.value = -1;
       document.getElementById("arrow-search")?.focus();
       return;
     }
 
-        if (state.selectedIndex >= recipeCards.length) {
+    if (selectedIndex.value >= recipeCards.length) {
-          state.selectedIndex = recipeCards.length - 1;
+      selectedIndex.value = recipeCards.length - 1;
     }
 
-        (recipeCards[state.selectedIndex] as HTMLElement).focus();
+    (recipeCards[selectedIndex.value] as HTMLElement).focus();
-      }
   }
+}
 
-    function onUpDown(e: KeyboardEvent) {
+function onUpDown(e: KeyboardEvent) {
   if (e.key === "Enter") {
     console.log(document.activeElement);
     // (document.activeElement as HTMLElement).click();
   }
   else if (e.key === "ArrowUp") {
     e.preventDefault();
-        state.selectedIndex--;
+    selectedIndex.value--;
   }
   else if (e.key === "ArrowDown") {
     e.preventDefault();
-        state.selectedIndex++;
+    selectedIndex.value++;
   }
   else {
     return;
   }
   selectRecipe();
-    }
+}
 
-    watch(dialog, (val) => {
+watch(dialog, (val) => {
   if (!val) {
     document.removeEventListener("keyup", onUpDown);
   }
   else {
     document.addEventListener("keyup", onUpDown);
   }
-    });
+});
 
-    const groupSlug = computed(() => route.params.groupSlug as string || $auth.user.value?.groupSlug || "");
+const route = useRoute();
-    const route = useRoute();
+const groupSlug = computed(() => route.params.groupSlug as string || $auth.user.value?.groupSlug || "");
-    const advancedSearchUrl = computed(() => `/g/${groupSlug.value}`);
+watch(route, close);
-    watch(route, close);
 
-    function open() {
+function open() {
   dialog.value = true;
-    }
+}
-    function close() {
+function close() {
   dialog.value = false;
-    }
+}
 
-    // ===========================================================================
+// ===========================================================================
-    // Basic Search
+// Basic Search
-    const { isOwnGroup } = useLoggedInState();
+const { isOwnGroup } = useLoggedInState();
-    const api = isOwnGroup.value ? useUserApi() : usePublicExploreApi(groupSlug.value).explore;
+const api = isOwnGroup.value ? useUserApi() : usePublicExploreApi(groupSlug.value).explore;
-    const search = useRecipeSearch(api);
+const search = useRecipeSearch(api);
 
-    // Select Handler
+// Select Handler
-
+function handleSelect(recipe: RecipeSummary) {
-    function handleSelect(recipe: RecipeSummary) {
   close();
-      context.emit(SELECTED_EVENT, recipe);
+  emit(SELECTED_EVENT, recipe);
-    }
+}
 
-    return {
+// Expose functions to parent components
-      ...toRefs(state),
+defineExpose({
-      advancedSearchUrl,
-      dialog,
   open,
   close,
-      handleSelect,
-      search,
-    };
-  },
 });
 </script>