chore: filter templates jump from catalog list

src/views/application-management/projects/pages/detail.vue

@@ -134,7 +134,7 @@
   import { Resources, Actions } from '@/permissions/config';
   import { PROJECT } from '@/router/config';
   import { ProjectTabs } from '@/views/config';
-  import { ref, onMounted, reactive } from 'vue';
+  import { ref, onMounted, onBeforeUnmount, reactive } from 'vue';
   import _ from 'lodash';
   import useTabActive, { TabPage } from '@/hooks/use-tab-active';
   import useCallCommon from '@/hooks/use-call-common';
@@ -147,6 +147,11 @@
   import TemplateList from '@/views/application-management/templates/pages/list.vue';
   import CatalogList from '@/views/application-management/catalogs/pages/list.vue';
   import WorkflowList from '@/views/application-management/workflows/pages/list.vue';
+  import {
+    listenFilterCatalogAction,
+    removeFilterCatalogActionListener,
+    emitFilterTemplateAction
+  } from '@/views/operation-hub/hooks/filter-catalog-listener';
   import { queryItemProject } from '../api';
   import { projectDetailTabs } from '../config';
   import userProjectBreadcrumbData from '../hooks/use-project-breadcrumb-data';
@@ -238,6 +243,13 @@
     initActiveTab();
     breadCrumbList.value = await initBreadValues([]);
   };
+  listenFilterCatalogAction((data) => {
+    handleTabChange(ProjectTabs.TEMPLATES);
+    setTimeout(() => {
+      emitFilterTemplateAction(data);
+    }, 100);
+  });
+
   onMounted(() => {
     initBread();
     projectStore.setEnterProjectDefault({
@@ -246,6 +258,11 @@
       list: false
     });
   });
+
+  onBeforeUnmount(() => {
+    removeFilterCatalogActionListener();
+  });
+
   init();
 </script>
 

src/views/operation-hub/catalogs/components/list-view.vue

@@ -8,6 +8,7 @@
       :pagination="false"
       row-key="id"
       :row-selection="rowSelectionRef"
+      @cell-click="handleCellClick"
       @sorter-change="handleSortChange"
       @selection-change="handleSelectChange"
     >
@@ -28,7 +29,7 @@
           }"
         >
           <template #cell="{ record }">
-            <span>{{ record.name }}</span>
+            <a-link :hoverable="false">{{ record.name }}</a-link>
           </template>
         </a-table-column>
 
@@ -154,6 +155,7 @@
   import StatusLabel from '../../connectors/components/status-label.vue';
   import { queryCatalogs, refreshCatalog, deleteCatalogs } from '../api';
   import { actionList } from '../config';
+  import { emitFilterCatalogAction } from '../../hooks/filter-catalog-listener';
 
   const props = defineProps({
     list: {
@@ -214,6 +216,12 @@
       : null;
   });
 
+  const handleCellClick = (row, col) => {
+    if (col.dataIndex === 'name') {
+      emitFilterCatalogAction(row);
+    }
+  };
+
   const setActionList = (row) => {
     const list = _.filter(actionList, (item) => {
       return item.filterFun ? item.filterFun(row) : true;

src/views/operation-hub/hooks/filter-catalog-listener.ts

@@ -0,0 +1,35 @@
+import mitt, { Handler } from 'mitt';
+
+const emitter = mitt();
+
+const key = Symbol('FILTER_CATALOG_LIST_KEY');
+
+const key2 = Symbol('FILTER_TEMPLATE_LIST_KEY');
+
+// trigger the event
+export function emitFilterCatalogAction(data: any) {
+  emitter.emit(key, data);
+}
+
+export function listenFilterCatalogAction(handler: (data) => void) {
+  emitter.on(key, handler as Handler);
+}
+
+export function removeFilterCatalogActionListener() {
+  emitter.off(key);
+}
+
+// filter template
+export function emitFilterTemplateAction(data: any) {
+  emitter.emit(key2, data);
+}
+
+export function listenFilterTemplateAction(handler: (data) => void) {
+  emitter.on(key2, handler as Handler);
+}
+
+export function removeFilterTemplateActionListener() {
+  emitter.off(key2);
+}
+
+export default {};

src/views/operation-hub/pages/main.vue

@@ -53,14 +53,6 @@
           >
             <Connectors></Connectors>
           </a-tab-pane>
-
-          <!-- <template #extra>
-            <IconBtnGroup
-              v-if="activeKey === OperatorHubTabs.TEMPLATES"
-              v-model:active="dataView[activeKey]"
-              :icon-list="iconList"
-            ></IconBtnGroup>
-          </template> -->
         </a-tabs>
       </ComCard>
     </ComCard>
@@ -69,7 +61,7 @@
 
 <script lang="ts" setup>
   import { OPERATIONHUB } from '@/router/config';
-  import { ref, reactive } from 'vue';
+  import { ref, nextTick, reactive, onBeforeUnmount } from 'vue';
   import useTabActive, { TabPage } from '@/hooks/use-tab-active';
   import { OperatorHubTabs } from '@/views/config';
   import HeaderInfo from '@/components/header-info/index.vue';
@@ -79,6 +71,11 @@
   import Catalogs from '../catalogs/pages/list.vue';
   import GlobalVariables from '../variables/pages/list.vue';
   import ResourceDefinition from '../resource-definitions/pages/list.vue';
+  import {
+    listenFilterCatalogAction,
+    removeFilterCatalogActionListener,
+    emitFilterTemplateAction
+  } from '../hooks/filter-catalog-listener';
 
   const iconList = [
     {
@@ -105,6 +102,15 @@
   const handleTabChange = (val) => {
     setPageTabActive(val);
   };
+  listenFilterCatalogAction((data) => {
+    handleTabChange(OperatorHubTabs.TEMPLATES);
+    setTimeout(() => {
+      emitFilterTemplateAction(data);
+    }, 100);
+  });
+  onBeforeUnmount(() => {
+    removeFilterCatalogActionListener();
+  });
 </script>
 
 <script lang="ts">

src/views/operation-hub/templates/components/table-list.vue

@@ -178,7 +178,15 @@
   import { Resources, Actions } from '@/permissions/config';
   import { useUserStore, useAppStore } from '@/store';
   import _, { map, pickBy, remove } from 'lodash';
-  import { ref, reactive, onMounted, nextTick, computed, PropType } from 'vue';
+  import {
+    ref,
+    reactive,
+    onMounted,
+    onBeforeUnmount,
+    nextTick,
+    computed,
+    PropType
+  } from 'vue';
   import useCallCommon from '@/hooks/use-call-common';
   import { UseSortDirection } from '@/utils/common';
   import FilterBox from '@/components/filter-box/index.vue';
@@ -196,6 +204,10 @@
     TEMPLATE_API,
     PROJECT_API_PREFIX
   } from '../api';
+  import {
+    listenFilterTemplateAction,
+    removeFilterTemplateActionListener
+  } from '../../hooks/filter-catalog-listener';
 
   const props = defineProps({
     currentView: {
@@ -512,6 +524,15 @@
       // ignore
     }
   };
+
+  listenFilterTemplateAction((data) => {
+    setTimeout(() => {
+      queryParams.catalogID = data.id;
+      handleSearch();
+    }, 100);
+    console.log('template list listenFilterCatalogAction', data);
+  });
+
   onMounted(() => {
     fetchData();
     getCatalogList();
@@ -520,6 +541,9 @@
       createCatalogChunkRequest();
     });
   });
+  onBeforeUnmount(() => {
+    removeFilterTemplateActionListener();
+  });
 </script>
 
 <style lang="less" scoped>