advanced filtering for hiding disabled channels and viewing only empty channels

(cherry picked from commit ea38c0b4b8)
Closes #182

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+
+- Advanced filtering for Channels table: Filter menu now allows toggling disabled channels visibility (when a profile is selected) and filtering to show only empty channels without streams (Closes #182)
+
 ### Changed
 
 - Fixed event viewer arrow direction (previously inverted) — UI behavior corrected. Thanks [@drnikcuk](https://github.com/drnikcuk) (Closes #772)

apps/channels/api_views.py

@@ -8,6 +8,7 @@ from drf_yasg.utils import swagger_auto_schema
 from drf_yasg import openapi
 from django.shortcuts import get_object_or_404, get_list_or_404
 from django.db import transaction
+from django.db.models import Q
 import os, json, requests, logging
 from urllib.parse import unquote
 from apps.accounts.permissions import (
@@ -420,10 +421,36 @@ class ChannelViewSet(viewsets.ModelViewSet):
             group_names = channel_group.split(",")
             qs = qs.filter(channel_group__name__in=group_names)
 
-        if self.request.user.user_level < 10:
-            qs = qs.filter(user_level__lte=self.request.user.user_level)
+        filters = {}
+        q_filters = Q()
 
-        return qs
+        channel_profile_id = self.request.query_params.get("channel_profile_id")
+        show_disabled_param = self.request.query_params.get("show_disabled", None)
+        only_streamless = self.request.query_params.get("only_streamless", None)
+
+        if channel_profile_id:
+            try:
+                profile_id_int = int(channel_profile_id)
+                filters["channelprofilemembership__channel_profile_id"] = profile_id_int
+
+                if show_disabled_param is None:
+                    filters["channelprofilemembership__enabled"] = True
+            except (ValueError, TypeError):
+                # Ignore invalid profile id values
+                pass
+
+        if only_streamless:
+            q_filters &= Q(streams__isnull=True)
+
+        if self.request.user.user_level < 10:
+            filters["user_level__lte"] = self.request.user.user_level
+
+        if filters:
+            qs = qs.filter(**filters)
+        if q_filters:
+            qs = qs.filter(q_filters)
+
+        return qs.distinct()
 
     def get_serializer_context(self):
         context = super().get_serializer_context()

frontend/src/components/tables/ChannelsTable.jsx

@@ -289,6 +289,9 @@ const ChannelsTable = ({}) => {
   const [selectedProfile, setSelectedProfile] = useState(
     profiles[selectedProfileId]
   );
+  const [showDisabled, setShowDisabled] = useState(true);
+  const [showOnlyStreamlessChannels, setShowOnlyStreamlessChannels] =
+    useState(false);
 
   const [paginationString, setPaginationString] = useState('');
   const [filters, setFilters] = useState({
@@ -369,6 +372,15 @@ const ChannelsTable = ({}) => {
     params.append('page', pagination.pageIndex + 1);
     params.append('page_size', pagination.pageSize);
     params.append('include_streams', 'true');
+    if (selectedProfileId !== '0') {
+      params.append('channel_profile_id', selectedProfileId);
+    }
+    if (showDisabled === true) {
+      params.append('show_disabled', true);
+    }
+    if (showOnlyStreamlessChannels === true) {
+      params.append('only_streamless', true);
+    }
 
     // Apply sorting
     if (sorting.length > 0) {
@@ -401,7 +413,14 @@ const ChannelsTable = ({}) => {
       pageSize: pagination.pageSize,
     });
     setAllRowIds(ids);
-  }, [pagination, sorting, debouncedFilters]);
+  }, [
+    pagination,
+    sorting,
+    debouncedFilters,
+    showDisabled,
+    selectedProfileId,
+    showOnlyStreamlessChannels,
+  ]);
 
   const stopPropagation = useCallback((e) => {
     e.stopPropagation();
@@ -1326,6 +1345,10 @@ const ChannelsTable = ({}) => {
             deleteChannels={deleteChannels}
             selectedTableIds={table.selectedTableIds}
             table={table}
+            showDisabled={showDisabled}
+            setShowDisabled={setShowDisabled}
+            showOnlyStreamlessChannels={showOnlyStreamlessChannels}
+            setShowOnlyStreamlessChannels={setShowOnlyStreamlessChannels}
           />
 
           {/* Table or ghost empty state inside Paper */}

frontend/src/components/tables/ChannelsTable/ChannelTableHeader.jsx

@@ -12,20 +12,22 @@ import {
   Text,
   TextInput,
   Tooltip,
-  UnstyledButton,
   useMantineTheme,
 } from '@mantine/core';
 import {
   ArrowDown01,
   Binary,
-  Check,
   CircleCheck,
-  Ellipsis,
   EllipsisVertical,
   SquareMinus,
   SquarePen,
   SquarePlus,
   Settings,
+  Eye,
+  EyeOff,
+  Filter,
+  Square,
+  SquareCheck,
 } from 'lucide-react';
 import API from '../../../api';
 import { notifications } from '@mantine/notifications';
@@ -102,6 +104,10 @@ const ChannelTableHeader = ({
   editChannel,
   deleteChannels,
   selectedTableIds,
+  showDisabled,
+  setShowDisabled,
+  showOnlyStreamlessChannels,
+  setShowOnlyStreamlessChannels,
 }) => {
   const theme = useMantineTheme();
 
@@ -208,6 +214,14 @@ const ChannelTableHeader = ({
     );
   };
 
+  const toggleShowDisabled = () => {
+    setShowDisabled(!showDisabled);
+  };
+
+  const toggleShowOnlyStreamlessChannels = () => {
+    setShowOnlyStreamlessChannels(!showOnlyStreamlessChannels);
+  };
+
   return (
     <Group justify="space-between">
       <Group gap={5} style={{ paddingLeft: 10 }}>
@@ -236,6 +250,41 @@ const ChannelTableHeader = ({
         }}
       >
         <Flex gap={6}>
+          <Menu shadow="md" width={200}>
+            <Menu.Target>
+              <Button size="xs" variant="default" onClick={() => {}}>
+                <Filter size={18} />
+              </Button>
+            </Menu.Target>
+
+            <Menu.Dropdown>
+              <Menu.Item
+                onClick={toggleShowDisabled}
+                leftSection={
+                  showDisabled ? <Eye size={18} /> : <EyeOff size={18} />
+                }
+                disabled={selectedProfileId === '0'}
+              >
+                <Text size="xs">
+                  {showDisabled ? 'Hide Disabled' : 'Show Disabled'}
+                </Text>
+              </Menu.Item>
+
+              <Menu.Item
+                onClick={toggleShowOnlyStreamlessChannels}
+                leftSection={
+                  showOnlyStreamlessChannels ? (
+                    <SquareCheck size={18} />
+                  ) : (
+                    <Square size={18} />
+                  )
+                }
+              >
+                <Text size="xs">Only Empty Channels</Text>
+              </Menu.Item>
+            </Menu.Dropdown>
+          </Menu>
+
           <Button
             leftSection={<SquarePen size={18} />}
             variant="default"