add view icon to ToolPanel header, add Favorites button back

ahmedhamidawan · Nov 14, 2023 · c7670e8 · c7670e8
1 parent 3e5233d
commit c7670e8
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 20 deletions.
diff --git a/client/src/components/Panels/Menus/PanelViewMenu.vue b/client/src/components/Panels/Menus/PanelViewMenu.vue
@@ -9,7 +9,7 @@
         toggle-class="text-decoration-none"
         role="menu"
         aria-label="View all tool panel configurations"
-        class="tool-panel-dropdown"
+        class="tool-panel-dropdown w-100"
         size="sm">
         <template v-slot:button-content>
             <slot name="panel-view-selector"></slot><span class="sr-only">View all tool panel configurations</span>

diff --git a/client/src/components/Panels/Menus/PanelViewMenuItem.vue b/client/src/components/Panels/Menus/PanelViewMenuItem.vue
@@ -6,14 +6,7 @@
 </template>
 
 <script>
-const types_to_icons = {
-    default: "undo",
-    generic: "filter",
-    ontology: "sitemap",
-    activity: "project-diagram",
-    publication: "newspaper",
-    training: "graduation-cap",
-};
+import { types_to_icons } from "../utilities";
 
 export default {
     props: {

diff --git a/client/src/components/Panels/ToolPanel.vue b/client/src/components/Panels/ToolPanel.vue
@@ -10,7 +10,10 @@ import { getAppRoot } from "@/onload";
 import { type PanelView, useToolStore } from "@/stores/toolStore";
 import localize from "@/utils/localization";
 
+import { types_to_icons } from "./utilities";
+
 import LoadingSpan from "../LoadingSpan.vue";
+import FavoritesButton from "./Buttons/FavoritesButton.vue";
 import PanelViewMenu from "./Menus/PanelViewMenu.vue";
 import ToolBox from "./ToolBox.vue";
 import Heading from "@/components/Common/Heading.vue";
@@ -88,6 +91,21 @@ const toolPanelHeader = computed(() => {
     }
 });
 
+const viewIcon = computed(() => {
+    if (showAdvanced.value) {
+        return "search";
+    } else if (
+        currentPanelView.value !== "default" &&
+        panelViews.value &&
+        typeof panelViews.value[currentPanelView.value]?.view_type === "string"
+    ) {
+        const viewType = panelViews.value[currentPanelView.value]?.view_type;
+        return viewType ? types_to_icons[viewType] : null;
+    } else {
+        return null;
+    }
+});
+
 async function initializeTools() {
     try {
         await toolStore.fetchTools();
@@ -121,28 +139,34 @@ function onInsertWorkflowSteps(workflowId: string, workflowStepCount: number | u
 <template>
     <div v-if="arePanelsFetched" class="unified-panel" aria-labelledby="toolbox-heading">
         <div unselectable="on">
-            <div class="unified-panel-header-inner mx-3 my-2">
+            <div class="unified-panel-header-inner mx-3 my-2 d-flex justify-content-between">
                 <PanelViewMenu
                     v-if="panelViews && Object.keys(panelViews).length > 1"
                     :panel-views="panelViews"
                     :current-panel-view="currentPanelView"
                     @updatePanelView="updatePanelView">
                     <template v-slot:panel-view-selector>
                         <div class="d-flex justify-content-between panel-view-selector">
-                            <Heading
-                                id="toolbox-heading"
-                                :class="!showAdvanced && toolPanelHeader !== 'Tools' && 'font-italic'"
-                                h2
-                                inline
-                                size="sm"
-                                >{{ toolPanelHeader }}
-                            </Heading>
+                            <div>
+                                <span v-if="viewIcon" :class="['fas', `fa-${viewIcon}`, 'mr-1']" />
+                                <Heading
+                                    id="toolbox-heading"
+                                    :class="!showAdvanced && toolPanelHeader !== 'Tools' && 'font-italic'"
+                                    h2
+                                    inline
+                                    size="sm"
+                                    >{{ toolPanelHeader }}
+                                </Heading>
+                            </div>
                             <div v-if="!showAdvanced" class="panel-header-buttons">
                                 <FontAwesomeIcon icon="caret-down" />
                             </div>
                         </div>
                     </template>
                 </PanelViewMenu>
+                <div v-if="!showAdvanced" class="panel-header-buttons">
+                    <FavoritesButton :query="query" @onFavorites="(q) => (query = q)" />
+                </div>
             </div>
         </div>
         <ToolBox

diff --git a/client/src/components/Panels/utilities.ts b/client/src/components/Panels/utilities.ts
@@ -49,6 +49,16 @@ interface SearchMatch {
     order: number;
 }
 
+/** Returns icon for tool panel `view_type` */
+export const types_to_icons = {
+    default: "undo",
+    generic: "filter",
+    ontology: "sitemap",
+    activity: "project-diagram",
+    publication: "newspaper",
+    training: "graduation-cap",
+};
+
 // Converts filterSettings { key: value } to query = "key:value"
 export function createWorkflowQuery(filterSettings: Record<string, string | boolean>) {
     let query = "";

diff --git a/client/src/stores/toolStore.ts b/client/src/stores/toolStore.ts
@@ -6,7 +6,7 @@ import axios from "axios";
 import { defineStore } from "pinia";
 import Vue, { computed, Ref, ref } from "vue";
 
-import { createWhooshQuery, filterTools } from "@/components/Panels/utilities";
+import { createWhooshQuery, filterTools, types_to_icons } from "@/components/Panels/utilities";
 import { useUserLocalStorage } from "@/composables/userLocalStorage";
 import { getAppRoot } from "@/onload/loadConfig";
 
@@ -67,7 +67,7 @@ export interface PanelView {
     model_class: string;
     name: string;
     description: string;
-    view_type: string;
+    view_type: keyof typeof types_to_icons;
     searchable: boolean;
 }