refactor(action): finish some detail

src/hooks/Rule/useDataHandler.ts

@@ -14,6 +14,7 @@ const keysDoNotNeedForAPI = [
   'actions',
   'id',
   'rules',
+  'last_modified_at',
 ]
 
 const keysNeedDel = {

src/hooks/usePaging.ts

@@ -49,6 +49,9 @@ export default (): {
   const checkValue = (filterValue: string | boolean, value: any) => {
     if (typeof filterValue === 'string') {
       const reg = new RegExp(filterValue, 'i')
+      if (Array.isArray(value)) {
+        return value.some((item) => reg.test(item))
+      }
       return reg.test(value)
     }
     return filterValue === value

src/views/RuleEngine/Bridge/BridgeDetail.vue

@@ -1,7 +1,13 @@
 <template>
   <div class="bridge-detail">
     <div class="detail-top">
-      <detail-header v-if="!isFromRule" :item="{ name: bridgeInfo.name, routeName: 'actions' }">
+      <detail-header
+        v-if="!isFromRule"
+        :item="{
+          name: bridgeInfo.name,
+          route: backRoute,
+        }"
+      >
         <template #content>
           <div class="vertical-align-center">
             <img :src="getBridgeIcon(bridgeInfo.type)" />
@@ -145,12 +151,15 @@
 import { BRIDGE_TYPES_NOT_USE_SCHEMA } from '@/common/constants'
 import { customValidate } from '@/common/tools'
 import DetailHeader from '@/components/DetailHeader.vue'
+import PreWithEllipsis from '@/components/PreWithEllipsis.vue'
+import TextEasyCopy from '@/components/TextEasyCopy.vue'
 import useHandleActionItem from '@/hooks/Rule/action/useHandleActionItem'
 import { useBridgeTypeIcon, useBridgeTypeValue } from '@/hooks/Rule/bridge/useBridgeTypeValue'
 import useCheckBeforeSaveAsCopy from '@/hooks/Rule/bridge/useCheckBeforeSaveAsCopy'
 import useDeleteBridge from '@/hooks/Rule/bridge/useDeleteBridge'
 import useWebhookUtils from '@/hooks/Webhook/useWebhookUtils'
 import useI18nTl from '@/hooks/useI18nTl'
+import { useReceiveParams } from '@/hooks/usePaginationRemember'
 import { DetailTab } from '@/types/enum'
 import { BridgeItem } from '@/types/rule'
 import { Delete, Share } from '@element-plus/icons-vue'
@@ -163,8 +172,6 @@ import TargetItemStatus from '../components/TargetItemStatus.vue'
 import BridgeItemOverview from './Components/BridgeItemOverview.vue'
 import DeleteBridgeSecondConfirm from './Components/DeleteBridgeSecondConfirm.vue'
 import UsingSchemaBridgeConfig from './Components/UsingSchemaBridgeConfig.vue'
-import TextEasyCopy from '@/components/TextEasyCopy.vue'
-import PreWithEllipsis from '@/components/PreWithEllipsis.vue'
 
 enum Tab {
   Overview = 'overview',
@@ -173,6 +180,9 @@ enum Tab {
 
 const route = useRoute()
 const router = useRouter()
+const { getBackRoute } = useReceiveParams('actions')
+const backRoute = computed(() => getBackRoute({ name: 'actions' }))
+
 // for compare when update
 let rawBridgeInfo: undefined | BridgeItem = undefined
 const bridgeInfo: Ref<BridgeItem> = ref({} as BridgeItem)

src/views/RuleEngine/Source/SourceDetail.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="bridge-detail">
     <div class="detail-top">
-      <detail-header v-if="!isFromRule" :item="{ name: sourceInfo.name, routeName: 'source' }">
+      <detail-header v-if="!isFromRule" :item="{ name: sourceInfo.name, route: backRoute }">
         <template #content>
           <div class="vertical-align-center">
             <img :src="getBridgeIcon(sourceInfo.type)" />
@@ -114,6 +114,7 @@ import useHandleSourceItem, { useDeleteSource } from '@/hooks/Rule/action/useHan
 import { useBridgeTypeIcon, useBridgeTypeValue } from '@/hooks/Rule/bridge/useBridgeTypeValue'
 import useCheckBeforeSaveAsCopy from '@/hooks/Rule/bridge/useCheckBeforeSaveAsCopy'
 import useI18nTl from '@/hooks/useI18nTl'
+import { useReceiveParams } from '@/hooks/usePaginationRemember'
 import { BridgeDirection } from '@/types/enum'
 import { Source } from '@/types/rule'
 import { Delete, Share } from '@element-plus/icons-vue'
@@ -136,6 +137,9 @@ enum Tab {
 
 const route = useRoute()
 const router = useRouter()
+const { getBackRoute } = useReceiveParams('source')
+const backRoute = computed(() => getBackRoute({ name: 'source' }))
+
 // for compare when update
 let rawSourceInfo: undefined | Source = undefined
 const sourceInfo: Ref<Source> = ref({} as Source)

src/views/RuleEngine/components/ActionAndSourceFilterForm.vue

@@ -66,7 +66,7 @@
           <el-form-item>
             <el-input
               type="text"
-              v-model="filterParams.rule"
+              v-model="filterParams.rules"
               clearable
               :placeholder="`${titleCase(tl('rule'))} ID`"
               @clear="search"
@@ -98,7 +98,7 @@ interface ActionAndSourceFilterParams {
   type?: string
   name?: string
   status?: ConnectionStatus
-  rule?: string
+  rules?: string
   enable?: boolean
 }
 
@@ -114,7 +114,7 @@ const createRawFilterParams = (): ActionAndSourceFilterParams => ({
   type: NOT_SPECIFIC_TYPE,
   name: undefined,
   status: undefined,
-  rule: undefined,
+  rules: undefined,
   enable: undefined,
 })
 const { tl, t } = useI18nTl('RuleEngine')

src/views/RuleEngine/components/ActionAndSourceList.vue

@@ -57,7 +57,13 @@
           {{ dateFormat(row.last_modified_at) }}
         </template>
       </el-table-column>
-      <el-table-column :label="tl('associatedRules')" :min-width="120">
+      <el-table-column
+        sortable
+        prop="rules.length"
+        :min-width="120"
+        :label="tl('associatedRules')"
+        :sort-method="(row:BridgeItem) => row.rules?.length ?? 0"
+      >
         <template #default="{ row }">
           <router-link
             v-for="item in row.rules"
@@ -138,7 +144,7 @@ import useWebhookUtils from '@/hooks/Webhook/useWebhookUtils'
 import { BridgeDirection, ConnectionStatus } from '@/types/enum'
 import { Action, BridgeItem, Source } from '@/types/rule'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import { pick } from 'lodash'
+import { isPlainObject, pick } from 'lodash'
 import { computed, defineProps, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import DeleteBridgeSecondConfirm from '../Bridge/Components/DeleteBridgeSecondConfirm.vue'
@@ -158,7 +164,21 @@ const { t, tl } = useI18nTl('RuleEngine')
 let totalData: Array<BridgeItem> = []
 const tableData = ref<Array<BridgeItem>>([])
 
-const filters = ref<Array<{ key: string; value: string | boolean }>>([])
+let filters = ref<Record<string, string | boolean>>({})
+const getFilterArr = (
+  filterParams: Record<string, string | boolean>,
+): Array<{ key: string; value: string | boolean }> => {
+  if (!isPlainObject(filterParams)) {
+    return []
+  }
+  return Object.entries(filterParams).reduce(
+    (arr: Array<{ key: string; value: string | boolean }>, [currentKey, currentVal]) => {
+      return [...arr, { key: currentKey, value: currentVal }]
+    },
+    [],
+  )
+}
+const filterArr = computed(() => getFilterArr(filters.value))
 
 let sortFrom: { key: string; type: 'asc' | 'desc' } | undefined = undefined
 
@@ -192,10 +212,19 @@ const getList = async () => {
 getList()
 
 const getTableData = () => {
-  const { data, meta } = getAPageData({ page: page.value, limit: limit.value }, [], sortFrom)
+  const { data, meta } = getAPageData(
+    { page: page.value, limit: limit.value },
+    filterArr.value,
+    sortFrom,
+  )
   tableData.value = data
   count.value = meta.count || 0
-  updateParams({ ...pick(meta, ['limit', 'page']), ...sortFrom })
+  updateParams({
+    ...pick(meta, ['limit', 'page']),
+    ...filters.value,
+    sortBy: sortFrom?.key,
+    sortType: sortFrom?.type,
+  })
 }
 
 const refreshTable = (pageData: { page: number; limit: number }) => {
@@ -204,26 +233,15 @@ const refreshTable = (pageData: { page: number; limit: number }) => {
   getTableData()
 }
 
-const getFilterParams = (
-  filterParams: Record<string, string | boolean>,
-): Array<{ key: string; value: string | boolean }> => {
-  return Object.entries(filterParams).reduce(
-    (arr: Array<{ key: string; value: string | boolean }>, [currentKey, currentVal]) => {
-      return [...arr, { key: currentKey, value: currentVal }]
-    },
-    [],
-  )
-}
-
 const search = (filterParams: Record<string, string | boolean>) => {
-  filters.value = getFilterParams(filterParams)
-  const { data } = getAPageData({ page: 1, limit: totalData.length }, filters.value)
-  tableData.value = data
+  filters.value = filterParams
+  refreshTable({ page: 1, limit: limit.value })
 }
 
 const emptyTip = isSource.value ? tl('sourceEmptyTip') : tl('actionsEmptyTip')
 
-const handleSortChange = ({ prop, order }: { column: any; prop: string; order: any }) => {
+const handleSortChange = (p: { column: any; prop: string; order: any }) => {
+  const { prop, order } = p
   sortFrom = prop ? { key: prop, type: order === 'descending' ? 'desc' : 'asc' } : undefined
   refreshTable({ page: 1, limit: limit.value })
 }
@@ -232,12 +250,16 @@ const getParamsFromQuery = async () => {
   const { pageParams, filterParams } = checkParamsInQuery()
   page.value = pageParams.page || page.value
   limit.value = pageParams.limit || limit.value
-  if (filterParams && (filterParams.key || filterParams.type)) {
+  const { sortBy, sortType, ...rest } = filterParams || {}
+  if (sortBy && sortType) {
     sortFrom = {
-      key: filterParams.key ?? sortFrom?.key ?? '',
-      type: filterParams.type ?? sortFrom?.type ?? 'desc',
+      key: sortBy ?? sortFrom?.key ?? '',
+      type: sortType ?? sortFrom?.type ?? 'desc',
     }
   }
+  if (Object.keys(rest).length > 0) {
+    filters.value = rest
+  }
 }
 getParamsFromQuery()