Fix channels admin filters

contentcuration/contentcuration/frontend/administration/constants.js

@@ -6,3 +6,10 @@ export const RouteNames = {
 };
 
 export const rowsPerPageItems = [25, 50, 75, 100];
+
+export const ChannelTypeFilter = {
+  ALL: 'all',
+  KOLIBRI_LIBRARY: 'kolibriLibrary',
+  COMMUNITY_LIBRARY: 'communityLibrary',
+  UNLISTED: 'unlisted',
+};

contentcuration/contentcuration/frontend/administration/pages/Channels/ChannelTable.vue

@@ -5,13 +5,13 @@
       {{ `${$formatNumber(count)} ${count === 1 ? 'channel' : 'channels'}` }}
     </h1>
     <VLayout
-      rowwrap
+      wrap
       class="mb-2"
     >
       <VFlex
         xs12
-        sm4
-        xl3
+        sm6
+        md3
         class="px-3"
       >
         <VSelect
@@ -21,14 +21,13 @@
           item-value="key"
           label="Channel Type"
           box
-          clearable
           :menu-props="{ offsetY: true }"
         />
       </VFlex>
       <VFlex
         xs12
-        sm4
-        xl3
+        sm6
+        md3
         clearable
         class="px-3"
       >
@@ -45,8 +44,8 @@
       </VFlex>
       <VFlex
         xs12
-        sm4
-        xl3
+        sm6
+        md3
         class="px-3"
       >
         <LanguageDropdown
@@ -56,8 +55,8 @@
       </VFlex>
       <VFlex
         xs12
-        sm4
-        xl3
+        sm6
+        md3
         class="px-3"
       >
         <VTextField
@@ -144,7 +143,7 @@
   import { mapGetters, mapActions } from 'vuex';
   import { getCurrentInstance, onMounted, ref, computed, watch } from 'vue';
   import transform from 'lodash/transform';
-  import { RouteNames, rowsPerPageItems } from '../../constants';
+  import { ChannelTypeFilter, RouteNames, rowsPerPageItems } from '../../constants';
   import { useTable } from '../../composables/useTable';
   import ChannelItem from './ChannelItem';
   import { useKeywordSearch } from 'shared/composables/useKeywordSearch';
@@ -154,11 +153,22 @@
   import Checkbox from 'shared/views/form/Checkbox';
   import IconButton from 'shared/views/IconButton';
   import LanguageDropdown from 'shared/views/LanguageDropdown';
+  import { CommunityLibraryStatus } from 'shared/constants';
 
   const channelTypeFilterMap = {
-    kolibriStudio: { label: 'Kolibri Studio Library', params: { public: true, deleted: false } },
-    community: { label: 'Community Library', params: { has_community_library_submission: true } },
-    unlisted: {
+    [ChannelTypeFilter.ALL]: {
+      label: 'All Channels',
+      params: {},
+    },
+    [ChannelTypeFilter.KOLIBRI_LIBRARY]: {
+      label: 'Kolibri Studio Library',
+      params: { public: true, deleted: false },
+    },
+    [ChannelTypeFilter.COMMUNITY_LIBRARY]: {
+      label: 'Community Library',
+      params: { has_community_library_submission: true },
+    },
+    [ChannelTypeFilter.UNLISTED]: {
       label: 'Unlisted Channels',
       params: { has_community_library_submission: false, public: false },
     },
@@ -178,30 +188,41 @@
       const store = proxy.$store;
 
       const statusFilterMap = computed(() => {
-        if (channelTypeFilter.value === 'kolibriStudio') {
+        if (channelTypeFilter.value === ChannelTypeFilter.KOLIBRI_LIBRARY) {
           return {
             live: { label: 'Live', params: {} },
             cheffed: { label: 'Sushi chef', params: { cheffed: true } },
           };
-        } else if (channelTypeFilter.value === 'community') {
+        } else if (channelTypeFilter.value === ChannelTypeFilter.COMMUNITY_LIBRARY) {
           return {
             live: { label: 'Live', params: { community_library_live: true } },
             needsReview: {
               label: 'Needs review',
               params: {
-                community_library_live: false,
-                latest_community_library_submission_status: ['PENDING', 'REJECTED'],
+                latest_community_library_submission_status: [
+                  CommunityLibraryStatus.PENDING,
+                  CommunityLibraryStatus.REJECTED,
+                ],
               },
             },
             published: { label: 'Published', params: {} },
             cheffed: { label: 'Sushi chef', params: { cheffed: true } },
           };
-        } else if (channelTypeFilter.value === 'unlisted') {
+        } else if (channelTypeFilter.value === ChannelTypeFilter.UNLISTED) {
           return {
-            live: { label: 'Live', params: {} },
-            draft: { label: 'Draft', params: { published: false } },
-            published: { label: 'Published', params: { published: true } },
-            cheffed: { label: 'Sushi chef', params: { cheffed: true } },
+            live: { label: 'Live', params: { deleted: false } },
+            draft: { label: 'Draft', params: { published: false, deleted: false } },
+            published: { label: 'Published', params: { published: true, deleted: false } },
+            cheffed: { label: 'Sushi chef', params: { cheffed: true, deleted: false } },
+            deleted: { label: 'Deleted', params: { deleted: true } },
+          };
+        } else if (channelTypeFilter.value === ChannelTypeFilter.ALL) {
+          return {
+            live: { label: 'Live', params: { deleted: false } },
+            published: { label: 'Published', params: { published: true, deleted: false } },
+            draft: { label: 'Draft', params: { published: false, deleted: false } },
+            cheffed: { label: 'Sushi chef', params: { cheffed: true, deleted: false } },
+            deleted: { label: 'Deleted', params: { deleted: true } },
           };
         }
         return {};
@@ -230,7 +251,9 @@
       } = useFilter({
         name: 'channelType',
         filterMap: channelTypeFilterMap,
+        defaultValue: ChannelTypeFilter.ALL,
       });
+
       // Temporal wrapper, must be removed after migrating to KSelect
       const channelTypeFilter = computed({
         get: () => _channelTypeFilter.value.value || undefined,
@@ -281,10 +304,14 @@
         fetchQueryParams: keywordSearchFetchQueryParams,
       } = useKeywordSearch();
 
-      watch(channelTypeFilter, () => {
-        const options = channelStatusOptions.value;
-        channelStatusFilter.value = options.length ? options[0].value : null;
-      });
+      watch(
+        channelTypeFilter,
+        () => {
+          const options = channelStatusOptions.value;
+          channelStatusFilter.value = options.length ? options[0].value : null;
+        },
+        { immediate: true },
+      );
 
       const filterFetchQueryParams = computed(() => {
         return {

contentcuration/contentcuration/frontend/administration/pages/Channels/__tests__/channelTable.spec.js

@@ -1,8 +1,8 @@
 import { mount, createLocalVue } from '@vue/test-utils';
 import Vuex, { Store } from 'vuex';
 import router from '../../../router';
-import { RouteNames } from '../../../constants';
-import ChannelTable from '../ChannelTable';
+import { ChannelTypeFilter, RouteNames } from '../../../constants';
+import ChannelTable from '../ChannelTable.vue';
 
 const localVue = createLocalVue();
 
@@ -55,8 +55,8 @@ describe('channelTable', () => {
   });
   describe('filters', () => {
     it('changing channel type filter should set query params', async () => {
-      wrapper.vm.channelTypeFilter = 'community';
-      expect(router.currentRoute.query.channelType).toBe('community');
+      wrapper.vm.channelTypeFilter = ChannelTypeFilter.COMMUNITY_LIBRARY;
+      expect(router.currentRoute.query.channelType).toBe(ChannelTypeFilter.COMMUNITY_LIBRARY);
     });
     it('changing language filter should set query params', () => {
       wrapper.vm.languageFilter = 'en';
@@ -72,10 +72,10 @@ describe('channelTable', () => {
       expect(router.currentRoute.query.keywords).toBe('keyword test');
     });
     it('changing channel type filter should reset channel status filter', async () => {
-      wrapper.vm.channelTypeFilter = 'community';
+      wrapper.vm.channelTypeFilter = ChannelTypeFilter.COMMUNITY_LIBRARY;
       wrapper.vm.channelStatusFilter = 'published';
       await wrapper.vm.$nextTick();
-      wrapper.vm.channelTypeFilter = 'unlisted';
+      wrapper.vm.channelTypeFilter = ChannelTypeFilter.UNLISTED;
       await wrapper.vm.$nextTick();
       expect(wrapper.vm.channelStatusFilter).toBe('live');
     });

contentcuration/contentcuration/frontend/shared/composables/useFilter.js

@@ -34,17 +34,18 @@ import { useQueryParams } from './useQueryParams';
  * @param {Object} params The parameters for the filter.
  * @param {string} params.name The name of the filter used in query params.
  * @param {Object} params.filterMap A map of available filters.
+ * @param {string|null} [params.defaultValue] Optional default value if query param is not set.
  * @returns {UseFilterReturn}
  */
-export function useFilter({ name, filterMap }) {
+export function useFilter({ name, filterMap, defaultValue = null }) {
   const route = useRoute();
   const { updateQueryParams } = useQueryParams();
 
   const filter = computed({
     get: () => {
       const routeFilter = route.query[name];
       const filterOption = options.value.find(option => option.value === routeFilter);
-      return filterOption || {};
+      return filterOption || options.value.find(option => option.value === defaultValue) || {};
     },
     set: value => {
       updateQueryParams({