convert panel view menu components to composition API + ts

Author: ahmedhamidawan

client/src/components/Panels/Menus/PanelViewMenu.vue

@@ -1,5 +1,66 @@
+<script setup lang="ts">
+import { BDropdown, BDropdownDivider, BDropdownGroup } from "bootstrap-vue";
+import { computed } from "vue";
+
+import type { Panel } from "@/stores/toolStore";
+
+import PanelViewMenuItem from "./PanelViewMenuItem.vue";
+
+const groupsDefinitions = [
+    { type: "ontology", title: "...by Ontology" },
+    { type: "activity", title: "...for Activity" },
+    { type: "publication", title: "...from Publication" },
+    { type: "training", title: "...for Training" },
+];
+
+const props = defineProps<{
+    panelViews: Record<string, Panel>;
+    currentPanelView: string;
+    storeLoading: boolean;
+}>();
+
+const emit = defineEmits<{
+    (e: "updatePanelView", panelViewId: string): void;
+}>();
+
+const defaultPanelView = computed(() => props.panelViews["default"] || Object.values(props.panelViews)[0]);
+
+const groupedPanelViews = computed(() => {
+    const groups = [];
+    for (const group of groupsDefinitions) {
+        const viewType = group.type;
+        const panelViews = panelViewsOfType(viewType);
+        if (panelViews.length > 0) {
+            groups.push({
+                type: viewType,
+                title: group.title,
+                panelViews: panelViews,
+            });
+        }
+    }
+    return groups;
+});
+
+const ungroupedPanelViews = computed(() => panelViewsOfType("generic"));
+
+function panelViewsOfType(panelViewType: string) {
+    const panelViews = [];
+    for (const panelViewId in props.panelViews) {
+        const panelView = props.panelViews[panelViewId];
+        if (panelView?.view_type === panelViewType) {
+            panelViews.push(panelView);
+        }
+    }
+    return panelViews;
+}
+
+function updatePanelView(panelView: Panel) {
+    emit("updatePanelView", panelView.id);
+}
+</script>
+
 <template>
-    <b-dropdown
+    <BDropdown
         v-b-tooltip.hover.top.noninteractive
         right
         block
@@ -16,10 +77,11 @@
             <slot name="panel-view-selector"></slot><span class="sr-only">View all tool panel configurations</span>
         </template>
         <PanelViewMenuItem
+            v-if="defaultPanelView"
             :current-panel-view="currentPanelView"
             :panel-view="defaultPanelView"
             @onSelect="updatePanelView" />
-        <b-dropdown-group v-for="group in groupedPanelViews" :id="group.type" :key="group.type">
+        <BDropdownGroup v-for="group in groupedPanelViews" :id="group.type" :key="group.type">
             <template v-slot:header>
                 <small class="font-weight-bold">{{ group.title }}</small>
             </template>
@@ -29,82 +91,17 @@
                 :current-panel-view="currentPanelView"
                 :panel-view="panelView"
                 @onSelect="updatePanelView" />
-        </b-dropdown-group>
-        <b-dropdown-divider v-if="ungroupedPanelViews.length > 0" />
+        </BDropdownGroup>
+        <BDropdownDivider v-if="ungroupedPanelViews.length > 0" />
         <PanelViewMenuItem
             v-for="(panelView, key) in ungroupedPanelViews"
             :key="key"
             :current-panel-view="currentPanelView"
             :panel-view="panelView"
             @onSelect="updatePanelView" />
-    </b-dropdown>
+    </BDropdown>
 </template>
 
-<script>
-import PanelViewMenuItem from "./PanelViewMenuItem";
-
-const groupsDefinitions = [
-    { type: "ontology", title: "...by Ontology" },
-    { type: "activity", title: "...for Activity" },
-    { type: "publication", title: "...from Publication" },
-    { type: "training", title: "...for Training" },
-];
-
-export default {
-    components: { PanelViewMenuItem },
-    props: {
-        panelViews: {
-            type: Object,
-        },
-        currentPanelView: {
-            type: String,
-        },
-        storeLoading: {
-            type: Boolean,
-            default: false,
-        },
-    },
-    computed: {
-        defaultPanelView() {
-            return this.panelViewsOfType("default")[0];
-        },
-        groupedPanelViews() {
-            const groups = [];
-            for (const group of groupsDefinitions) {
-                const viewType = group.type;
-                const panelViews = this.panelViewsOfType(viewType);
-                if (panelViews.length > 0) {
-                    groups.push({
-                        type: viewType,
-                        title: group.title,
-                        panelViews: panelViews,
-                    });
-                }
-            }
-            return groups;
-        },
-        ungroupedPanelViews() {
-            return this.panelViewsOfType("generic");
-        },
-    },
-    methods: {
-        updatePanelView(panelView) {
-            this.$emit("updatePanelView", panelView.id);
-        },
-        panelViewsOfType(panelViewType) {
-            const panelViews = [];
-            for (const panelViewId in this.panelViews) {
-                const panelView = this.panelViews[panelViewId];
-                if (panelView.view_type == panelViewType) {
-                    panelViews.push(panelView);
-                }
-            }
-            return panelViews;
-        },
-    },
-};
-</script>
-
 <style lang="scss">
 .tool-panel-dropdown .dropdown-menu {
     overflow: auto;

client/src/components/Panels/Menus/PanelViewMenuItem.vue

@@ -1,61 +1,40 @@
-<template>
-    <BDropdownItem class="ml-1" :title="title" :data-panel-id="panelView.id" :active="isSelected" @click="onClick">
-        <FontAwesomeIcon :icon="icon" data-description="panel view item icon" fixed-width />
-        <span v-localize>{{ name }}</span>
-    </BDropdownItem>
-</template>
-
-<script>
+<script setup lang="ts">
 import { faCheck, faEye } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BDropdownItem } from "bootstrap-vue";
+import { computed } from "vue";
+
+import type { Panel } from "@/stores/toolStore";
 
 import { types_to_icons } from "../utilities";
 
-export default {
-    components: {
-        BDropdownItem,
-        FontAwesomeIcon,
-    },
-    props: {
-        currentPanelView: {
-            type: String,
-            required: true,
-        },
-        panelView: {
-            type: Object,
-            required: true,
-        },
-    },
-    data() {
-        return {
-            faCheck,
-            faEye,
-        };
-    },
-    computed: {
-        title() {
-            return this.panelView.description;
-        },
-        icon() {
-            const viewType = this.panelView.view_type;
-            if (this.isSelected) {
-                return this.faCheck;
-            } else {
-                return types_to_icons[viewType] || this.faEye;
-            }
-        },
-        isSelected() {
-            return this.currentPanelView == this.panelView.id;
-        },
-        name() {
-            return this.panelView.name;
-        },
-    },
-    methods: {
-        onClick() {
-            this.$emit("onSelect", this.panelView);
-        },
-    },
-};
+const props = defineProps<{
+    currentPanelView: string;
+    panelView: Panel;
+}>();
+
+const emit = defineEmits<{
+    (e: "onSelect", panelView: Panel): void;
+}>();
+
+const icon = computed(() => {
+    const viewType = props.panelView.view_type;
+    if (props.currentPanelView === props.panelView.id) {
+        return faCheck;
+    } else {
+        return types_to_icons[viewType] || faEye;
+    }
+});
 </script>
+
+<template>
+    <BDropdownItem
+        class="ml-1"
+        :title="props.panelView.description"
+        :data-panel-id="panelView.id"
+        :active="props.currentPanelView === props.panelView.id"
+        @click="emit('onSelect', props.panelView)">
+        <FontAwesomeIcon :icon="icon" data-description="panel view item icon" fixed-width />
+        <span v-localize>{{ props.panelView.name }}</span>
+    </BDropdownItem>
+</template>