From 506566884324a11e5aabe924d71522c001718814 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Wed, 28 Aug 2024 12:27:36 +0200
Subject: [PATCH] make favorites button reusable

---
 .../Panels/Buttons/FavoritesButton.vue        | 31 ++++++++++++-------
 client/src/components/Panels/ToolPanel.vue    | 10 +++++-
 2 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/client/src/components/Panels/Buttons/FavoritesButton.vue b/client/src/components/Panels/Buttons/FavoritesButton.vue
index c7d285bb4253..190e8d23fdb3 100644
--- a/client/src/components/Panels/Buttons/FavoritesButton.vue
+++ b/client/src/components/Panels/Buttons/FavoritesButton.vue
@@ -3,6 +3,7 @@ import { library } from "@fortawesome/fontawesome-svg-core";
 import { faStar } from "@fortawesome/free-regular-svg-icons";
 import { faStar as faRegStar } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { watchImmediate } from "@vueuse/core";
 import { BButton } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { computed, ref, watch } from "vue";
@@ -12,18 +13,29 @@ import { useUserStore } from "@/stores/userStore";
 library.add(faStar, faRegStar);
 
 interface Props {
-    query: string;
+    value?: boolean;
+    modelValue?: boolean;
+    query?: string;
 }
+
 const props = defineProps<Props>();
 
+const currentValue = computed(() => props.value ?? props.modelValue ?? false);
+const toggle = ref(false);
+
+watchImmediate(
+    () => currentValue.value,
+    (val) => (toggle.value = val)
+);
+
 const emit = defineEmits<{
-    (e: "onFavorites", filter: string): void;
+    (e: "change", toggled: boolean): void;
+    (e: "update:modelValue", toggled: boolean): void;
 }>();
 
 const { isAnonymous } = storeToRefs(useUserStore());
 
 const FAVORITES = ["#favorites", "#favs", "#favourites"];
-const toggle = ref(false);
 
 const tooltipText = computed(() => {
     if (isAnonymous.value) {
@@ -40,17 +52,14 @@ const tooltipText = computed(() => {
 watch(
     () => props.query,
     () => {
-        toggle.value = FAVORITES.includes(props.query);
+        toggle.value = FAVORITES.includes(props.query ?? "");
     }
 );
 
-function onFavorites() {
+function toggleFavorites() {
     toggle.value = !toggle.value;
-    if (toggle.value) {
-        emit("onFavorites", "#favorites");
-    } else {
-        emit("onFavorites", "");
-    }
+    emit("update:modelValue", toggle.value);
+    emit("change", toggle.value);
 }
 </script>
 
@@ -63,7 +72,7 @@ function onFavorites() {
         aria-label="Show favorite tools"
         :disabled="isAnonymous"
         :title="tooltipText"
-        @click="onFavorites">
+        @click="toggleFavorites">
         <FontAwesomeIcon :icon="toggle ? faRegStar : faStar" />
     </BButton>
 </template>
diff --git a/client/src/components/Panels/ToolPanel.vue b/client/src/components/Panels/ToolPanel.vue
index a478b08f7c7a..e69f51d37591 100644
--- a/client/src/components/Panels/ToolPanel.vue
+++ b/client/src/components/Panels/ToolPanel.vue
@@ -130,6 +130,14 @@ function onInsertWorkflow(workflowId: string | undefined, workflowName: string)
 function onInsertWorkflowSteps(workflowId: string, workflowStepCount: number | undefined) {
     emit("onInsertWorkflowSteps", workflowId, workflowStepCount);
 }
+
+function onFavorites(favorites: boolean) {
+    if (favorites) {
+        query.value = "#favorites";
+    } else {
+        query.value = "";
+    }
+}
 </script>
 
 <template>
@@ -169,7 +177,7 @@ function onInsertWorkflowSteps(workflowId: string, workflowStepCount: number | u
                     </template>
                 </PanelViewMenu>
                 <div v-if="!showAdvanced" class="panel-header-buttons">
-                    <FavoritesButton :query="query" @onFavorites="(q) => (query = q)" />
+                    <FavoritesButton :query="query" @toggleFavorites="onFavorites" />
                 </div>
             </div>
         </div>