Show only available filter options on CommunityLibraryList page

Author: AlexVelezLl

contentcuration/contentcuration/frontend/channelList/views/Channel/CommunityLibraryList/CommunityLibraryFilters.vue

@@ -16,6 +16,7 @@
       v-model="countriesFilter"
       :label="countryLabel$()"
       :options="countryOptions"
+      :disabled="disabled || !countryOptions.length"
       multiple
       clearable
     />
@@ -24,6 +25,7 @@
       v-model="languagesFilter"
       :label="languagesLabel$()"
       :options="languageOptions"
+      :disabled="disabled || !languageOptions.length"
       multiple
       clearable
     />
@@ -32,6 +34,7 @@
       v-model="categoriesFilter"
       :label="categoriesLabel$()"
       :options="categoryOptions"
+      :disabled="disabled || !categoryOptions.length"
       multiple
       clearable
     />

contentcuration/contentcuration/frontend/channelList/views/Channel/CommunityLibraryList/index.vue

@@ -203,7 +203,7 @@
 
 <script>
 
-  import { computed, ref, watch } from 'vue';
+  import { computed, onMounted, ref, watch } from 'vue';
   import { useRoute, useRouter } from 'vue-router/composables';
   import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
   import { themeTokens } from 'kolibri-design-system/lib/styles/theme';
@@ -214,7 +214,7 @@
   import useCommunityChannelsFilters from './useCommunityChannelsFilters';
   import AboutCommunityLibraryModal from './AboutCommunityLibraryModal.vue';
   import ChannelTokenModal from 'shared/views/channel/ChannelTokenModal';
-  import { listPublicChannels } from 'shared/data/public';
+  import { listPublicChannels, getPublicChannelLabels } from 'shared/data/public';
   import useStore from 'shared/composables/useStore';
   import StudioChip from 'shared/views/StudioChip';
   import Pagination from 'shared/views/Pagination';
@@ -277,6 +277,8 @@
       } = communityChannelsStrings;
       const { copyChannelTokenAction$ } = commonStrings;
 
+      const availableLabels = ref(null);
+
       const {
         countriesFilter,
         categoriesFilter,
@@ -285,9 +287,11 @@
         keywordInput,
         clearSearch,
         removeFilterValue,
-      } = useCommunityChannelsFilters();
+      } = useCommunityChannelsFilters({ availableLabels });
 
-      const loading = ref(false);
+      const loadingChannels = ref(false);
+      const loadingLabels = ref(false);
+      const loading = computed(() => loadingChannels.value || loadingLabels.value);
       const loadError = ref(false);
       const channels = ref([]);
       const showFiltersSidePanel = ref(false);
@@ -328,7 +332,7 @@
       });
 
       async function loadCommunityLibrary() {
-        loading.value = true;
+        loadingChannels.value = true;
         loadError.value = false;
         try {
           const response = await listPublicChannels(fetchQueryParams.value);
@@ -343,7 +347,7 @@
           totalPages.value = 0;
           store.dispatch('errors/handleAxiosError', error);
         } finally {
-          loading.value = false;
+          loadingChannels.value = false;
         }
       }
 
@@ -439,6 +443,18 @@
         { immediate: true, deep: true },
       );
 
+      onMounted(async () => {
+        loadingLabels.value = true;
+        try {
+          availableLabels.value = await getPublicChannelLabels({ public: false });
+        } catch {
+          // Silently ignore: filter options will show all values rather than
+          // restricting to those that have channels.
+        } finally {
+          loadingLabels.value = false;
+        }
+      });
+
       return {
         windowIsSmall,
         windowBreakpoint,

contentcuration/contentcuration/frontend/channelList/views/Channel/CommunityLibraryList/useCommunityChannelsFilters.js

@@ -1,4 +1,4 @@
-import { computed, inject, provide } from 'vue';
+import { computed, inject, provide, unref } from 'vue';
 import { useFilter } from 'shared/composables/useFilter';
 import { useKeywordSearch } from 'shared/composables/useKeywordSearch';
 import countriesUtil from 'shared/utils/countries';
@@ -19,43 +19,46 @@ const FILTERS_QUERY_PARAMS = Symbol('filtersQueryParams');
 const REMOVE_FILTER_VALUE = Symbol('removeFilterValue');
 const CLEAR_SEARCH = Symbol('clearSearch');
 
-export default function useCommunityChannelsFilters() {
+export default function useCommunityChannelsFilters({ availableLabels } = {}) {
   const countryFilterMap = computed(() => {
     const [lang] = currentLanguage.split('-');
     const allCountries = countriesUtil.getNames(lang);
+    const _availableLabels = unref(availableLabels);
+    const availableCodes = _availableLabels?.countries
+      ? new Set(_availableLabels.countries.map(c => c.code))
+      : null;
     return Object.fromEntries(
-      Object.entries(allCountries).map(([code, name]) => [
-        code,
-        {
-          label: name,
-          params: { countries: code },
-        },
-      ]),
+      Object.entries(allCountries)
+        .filter(([code]) => !availableCodes || availableCodes.has(code))
+        .map(([code, name]) => [code, { label: name, params: { countries: code } }]),
     );
   });
 
   const languageFilterMap = computed(() => {
+    const _availableLabels = unref(availableLabels);
+    const availableIds = _availableLabels?.languages
+      ? new Set(_availableLabels.languages.map(l => l.id))
+      : null;
     return Object.fromEntries(
-      LanguagesList.map(lang => [
-        lang.id,
-        {
-          label: lang.readable_name,
-          params: { languages: lang.id },
-        },
-      ]),
+      LanguagesList.filter(lang => !availableIds || availableIds.has(lang.id))
+        .sort((a, b) => a.readable_name.localeCompare(b.readable_name))
+        .map(lang => [lang.id, { label: lang.readable_name, params: { languages: lang.id } }]),
     );
   });
 
   const categoryFilterMap = computed(() => {
     const sortedCategories = getSortedCategories();
+    const _availableLabels = unref(availableLabels);
+    const availableCategories = _availableLabels?.categories
+      ? new Set(_availableLabels.categories)
+      : null;
     return Object.fromEntries(
-      Object.entries(sortedCategories).map(([value, name]) => [
-        value,
-        {
-          label: translateMetadataString(name),
-          params: { categories: value },
-        },
-      ]),
+      Object.entries(sortedCategories)
+        .filter(([value]) => !availableCategories || availableCategories.has(value))
+        .map(([value, name]) => [
+          value,
+          { label: translateMetadataString(name), params: { categories: value } },
+        ]),
     );
   });
 
@@ -67,15 +70,10 @@ export default function useCommunityChannelsFilters() {
 
   const {
     filter: languagesFilter,
-    options: _languageOptions,
+    options: languageOptions,
     fetchQueryParams: languagesFetchQueryParams,
   } = useFilter({ name: 'languages', filterMap: languageFilterMap, multi: true });
 
-  const languageOptions = computed(() => {
-    // Sort language options alphabetically by label
-    return _languageOptions.value.sort((a, b) => a.label.localeCompare(b.label));
-  });
-
   const {
     filter: categoriesFilter,
     options: categoryOptions,

contentcuration/contentcuration/frontend/shared/data/public.js

@@ -165,6 +165,22 @@ export function listPublicChannels(params = {}) {
   return client.get(urls.publicchannel_list(), { params }).then(response => response.data);
 }
 
+/**
+ * Get available filter label options for the public channel list.
+ * Returns an object with available values for each filterable field
+ * (categories, languages, countries).
+ *
+ * @param {Object} params
+ * @return {Promise<{
+ *   categories: string[],
+ *   languages: Array<{id: string, lang_name: string}>,
+ *   countries: Array<{code: string, name: string}>
+ * }>}
+ */
+export function getPublicChannelLabels(params = {}) {
+  return client.get(urls.publicchannel_labels(), { params }).then(response => response.data);
+}
+
 /**
  * Get a content node from the public API
  * @param {String} nodeId

contentcuration/kolibri_public/search.py

@@ -101,6 +101,58 @@ def _get_available_channels(base_queryset):
     )
 
 
+def _get_available_channel_languages(base_queryset):
+    from contentcuration.models import Language
+
+    return list(
+        Language.objects.filter(public_channels__in=base_queryset)
+        .values("id", lang_name=F("native_name"))
+        .distinct()
+    )
+
+
+def _get_available_countries(base_queryset):
+    from contentcuration.models import Country
+
+    return list(
+        Country.objects.filter(public_channels__in=base_queryset)
+        .values("code", "name")
+        .distinct()
+    )
+
+
+def get_channel_available_metadata_labels(base_queryset):
+    from kolibri_public.models import ChannelMetadata
+
+    content_cache_key = str(
+        ChannelMetadata.objects.all().aggregate(updated=Max("last_updated"))["updated"]
+    )
+    cache_key = "channel-labels:{}:{}".format(
+        content_cache_key,
+        hashlib.md5(str(base_queryset.query).encode("utf8")).hexdigest(),
+    )
+    if cache_key not in cache:
+        base_queryset = base_queryset.order_by()
+        aggregates = {}
+        for field in channelmetadata_bitmask_fieldnames:
+            field_agg = field + "_agg"
+            aggregates[field_agg] = BitOr(field)
+        output = {}
+        if aggregates:
+            agg = base_queryset.aggregate(**aggregates)
+            for field, values in channelmetadata_bitmask_fieldnames.items():
+                bit_value = agg[field + "_agg"]
+                for value in values:
+                    if value["field_name"] not in output:
+                        output[value["field_name"]] = []
+                    if bit_value is not None and bit_value & value["bits"]:
+                        output[value["field_name"]].append(value["label"])
+        output["languages"] = _get_available_channel_languages(base_queryset)
+        output["countries"] = _get_available_countries(base_queryset)
+        cache.set(cache_key, output, timeout=None)
+    return cache.get(cache_key)
+
+
 # Remove the SQLite Bitwise OR definition as not needed.
 
 

contentcuration/kolibri_public/tests/test_channelmetadata_viewset.py

@@ -1,5 +1,6 @@
 from uuid import UUID
 
+from django.urls import reverse
 from kolibri_public.models import ChannelMetadata
 from kolibri_public.tests.utils.mixer import KolibriPublicMixer
 from le_utils.constants.labels.subjects import SUBJECTSLIST
@@ -293,3 +294,96 @@ def test_filter_languages_combined_with_search(self):
         ids = [UUID(item["id"]) for item in response.data]
         self.assertIn(UUID(self.channel_en.id), ids)
         self.assertNotIn(UUID(self.channel_multi.id), ids)
+
+
+class ChannelMetadataLabelsActionTestCase(StudioAPITestCase):
+    def setUp(self):
+        super().setUp()
+
+        mixer = KolibriPublicMixer()
+        self.user = testdata.user("labels@user.com")
+
+        self.categories = [SUBJECTSLIST[0], SUBJECTSLIST[1]]
+
+        self.lang_en = Language.objects.get_or_create(
+            id="en", defaults={"lang_code": "en", "readable_name": "English"}
+        )[0]
+        self.lang_fr = Language.objects.get_or_create(
+            id="fr", defaults={"lang_code": "fr", "readable_name": "French"}
+        )[0]
+
+        self.country_us = Country.objects.get_or_create(
+            code="US", defaults={"name": "United States"}
+        )[0]
+        self.country_mx = Country.objects.get_or_create(
+            code="MX", defaults={"name": "Mexico"}
+        )[0]
+        # Country not associated with any channel
+        self.country_br = Country.objects.get_or_create(
+            code="BR", defaults={"name": "Brazil"}
+        )[0]
+
+        self.channel1 = mixer.blend(
+            ChannelMetadata,
+            categories_bitmask_0=1 | 2,  # SUBJECTSLIST[0] and [1]
+            public=False,
+        )
+        self.channel1.included_languages.add(self.lang_en)
+        self.channel1.countries.add(self.country_us)
+
+        self.channel2 = mixer.blend(
+            ChannelMetadata,
+            categories_bitmask_0=2,  # SUBJECTSLIST[1] only
+            public=False,
+        )
+        self.channel2.included_languages.add(self.lang_fr)
+        self.channel2.countries.add(self.country_mx)
+
+    def _labels(self, query=None):
+        self.client.force_authenticate(self.user)
+        url = reverse("publicchannel-labels")
+        return self.client.get(url, query or {})
+
+    def test_labels_returns_200(self):
+        response = self._labels({"public": "false"})
+        self.assertEqual(response.status_code, 200, response.content)
+
+    def test_labels_returns_available_languages(self):
+        response = self._labels({"public": "false"})
+        language_ids = [lang["id"] for lang in response.data["languages"]]
+        self.assertIn("en", language_ids)
+        self.assertIn("fr", language_ids)
+
+    def test_labels_returns_available_countries(self):
+        response = self._labels({"public": "false"})
+        country_codes = [c["code"] for c in response.data["countries"]]
+        self.assertIn("US", country_codes)
+        self.assertIn("MX", country_codes)
+        # Country not linked to any channel should not appear
+        self.assertNotIn("BR", country_codes)
+
+    def test_labels_returns_available_categories(self):
+        response = self._labels({"public": "false"})
+        categories = response.data.get("categories", [])
+        self.assertIn(self.categories[0], categories)
+        self.assertIn(self.categories[1], categories)
+
+    def test_labels_respects_filter_params(self):
+        # When filtering to only channel1's language, only channel1's country should appear
+        response = self._labels({"public": "false", "languages": "en"})
+        self.assertEqual(response.status_code, 200, response.content)
+        country_codes = [c["code"] for c in response.data["countries"]]
+        self.assertIn("US", country_codes)
+        self.assertNotIn("MX", country_codes)
+
+    def test_labels_country_objects_have_code_and_name(self):
+        response = self._labels({"public": "false"})
+        for country in response.data["countries"]:
+            self.assertIn("code", country)
+            self.assertIn("name", country)
+
+    def test_labels_language_objects_have_id_and_lang_name(self):
+        response = self._labels({"public": "false"})
+        for lang in response.data["languages"]:
+            self.assertIn("id", lang)
+            self.assertIn("lang_name", lang)