Browse Source

✨ fix(channels-table): preserve group filter when switching type or status tabs

Refactors `ChannelsTable.js` to ensure that the selected group filter is **never lost** when:

1. Cycling between channel-type tabs.
2. Changing the status dropdown (all / enabled / disabled).

Key points:

• `loadChannels` now detects active search filters (keyword / group / model) and transparently delegates to `searchChannels`, guaranteeing all parameters are sent in every request.
• `searchChannels` accepts optional `typeKey` and `statusF` arguments, enabling reuse without code duplication.
• Loading state handling is unified; no extra renders or side effects were introduced, keeping UI performance intact.
• Duplicate logic removed and responsibilities clearly separated for easier future maintenance.
t0ng7u 8 months ago
parent
commit
db1b11deaf
1 changed files with 13 additions and 4 deletions
  1. 13 4
      web/src/components/table/ChannelsTable.js

+ 13 - 4
web/src/components/table/ChannelsTable.js

@@ -882,6 +882,15 @@ const ChannelsTable = () => {
     statusF,
   ) => {
     if (statusF === undefined) statusF = statusFilter;
+
+    const { searchKeyword, searchGroup, searchModel } = getFormValues();
+    if (searchKeyword !== '' || searchGroup !== '' || searchModel !== '') {
+      setLoading(true);
+      await searchChannels(enableTagMode, typeKey, statusF);
+      setLoading(false);
+      return;
+    }
+
     const reqId = ++requestCounter.current; // 记录当前请求序号
     setLoading(true);
     const typeParam = (typeKey !== 'all') ? `&type=${typeKey}` : '';
@@ -1054,18 +1063,18 @@ const ChannelsTable = () => {
     };
   };
 
-  const searchChannels = async (enableTagMode) => {
+  const searchChannels = async (enableTagMode, typeKey = activeTypeKey, statusF = statusFilter) => {
     const { searchKeyword, searchGroup, searchModel } = getFormValues();
 
     setSearching(true);
     try {
       if (searchKeyword === '' && searchGroup === '' && searchModel === '') {
-        await loadChannels(activePage - 1, pageSize, idSort, enableTagMode);
+        await loadChannels(activePage - 1, pageSize, idSort, enableTagMode, typeKey, statusF);
         return;
       }
 
-      const typeParam = (activeTypeKey !== 'all') ? `&type=${activeTypeKey}` : '';
-      const statusParam = statusFilter !== 'all' ? `&status=${statusFilter}` : '';
+      const typeParam = (typeKey !== 'all') ? `&type=${typeKey}` : '';
+      const statusParam = statusF !== 'all' ? `&status=${statusF}` : '';
       const res = await API.get(
         `/api/channel/search?keyword=${searchKeyword}&group=${searchGroup}&model=${searchModel}&id_sort=${idSort}&tag_mode=${enableTagMode}${typeParam}${statusParam}`,
       );