Community channels page

contentcuration/contentcuration/frontend/channelList/constants.js

@@ -25,6 +25,8 @@ export const RouteNames = {
   CATALOG_ITEMS: 'CATALOG_ITEMS',
   CATALOG_DETAILS: 'CATALOG_DETAILS',
   CATALOG_FAQ: 'CATALOG_FAQ',
+  COMMUNITY_LIBRARY_ITEMS: 'COMMUNITY_LIBRARY_ITEMS',
+  COMMUNITY_LIBRARY_DETAILS: 'COMMUNITY_LIBRARY_DETAILS',
   NEW_CHANNEL: 'NEW_CHANNEL',
   COMMUNITY_LIBRARY_SUBMISSION: 'COMMUNITY_LIBRARY_SUBMISSION',
 };

contentcuration/contentcuration/frontend/channelList/router.js

@@ -1,10 +1,12 @@
 import VueRouter from 'vue-router';
+import CommunityChannelDetailsModal from './views/Channel/CommunityLibraryList/CommunityChannelDetailsModal.vue';
 import StudioMyChannels from './views/Channel/StudioMyChannels';
 import StudioStarredChannels from './views/Channel/StudioStarredChannels';
 import StudioViewOnlyChannels from './views/Channel/StudioViewOnlyChannels';
 import StudioCollectionsTable from './views/ChannelSet/StudioCollectionsTable';
 import ChannelSetModal from './views/ChannelSet/ChannelSetModal';
 import CatalogList from './views/Channel/CatalogList';
+import CommunityLibraryList from './views/Channel/CommunityLibraryList';
 import { RouteNames } from './constants';
 import CatalogFAQ from './views/Channel/CatalogFAQ';
 import SubmissionDetailsModal from 'shared/views/communityLibrary/SubmissionDetailsModal/index.vue';
@@ -75,6 +77,17 @@ const router = new VueRouter({
       component: ChannelDetailsModal,
       props: true,
     },
+    {
+      name: RouteNames.COMMUNITY_LIBRARY_ITEMS,
+      path: '/community-library',
+      component: CommunityLibraryList,
+    },
+    {
+      name: RouteNames.COMMUNITY_LIBRARY_DETAILS,
+      path: '/community-library/:channelId/details',
+      component: CommunityChannelDetailsModal,
+      props: true,
+    },
     {
       name: RouteNames.CATALOG_FAQ,
       path: '/faq',

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

@@ -0,0 +1,43 @@
+<template>
+
+  <KModal
+    :title="aboutCommunityLibraryTitle$()"
+    :cancelText="gotItLabel$()"
+    @cancel="$emit('close')"
+  >
+    <p>{{ aboutCommunityLibraryDescription$() }}</p>
+    <strong>{{ whatCanYouDoHere$() }}</strong>
+    <ul>
+      <li>{{ whatCanYouDoHereItem1$() }}</li>
+      <li>{{ whatCanYouDoHereItem2$() }}</li>
+      <li>{{ whatCanYouDoHereItem3$() }}</li>
+    </ul>
+    <p
+      :style="{
+        color: $themeTokens.error,
+        marginTop: '16px',
+      }"
+    >
+      {{ needKolibriVersionToImport$() }}
+    </p>
+  </KModal>
+
+</template>
+
+
+<script setup>
+
+  import { communityChannelsStrings } from 'shared/strings/communityChannelsStrings';
+
+  const {
+    aboutCommunityLibraryTitle$,
+    aboutCommunityLibraryDescription$,
+    whatCanYouDoHere$,
+    whatCanYouDoHereItem1$,
+    whatCanYouDoHereItem2$,
+    whatCanYouDoHereItem3$,
+    gotItLabel$,
+    needKolibriVersionToImport$,
+  } = communityChannelsStrings;
+
+</script>

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

@@ -0,0 +1,178 @@
+<template>
+
+  <StudioImmersiveModal v-model="isModalOpen">
+    <template #header>
+      <span class="notranslate">{{ channel ? channel.name : '' }}</span>
+    </template>
+    <StudioLargeLoader
+      v-if="show('channelDetails', isLoading, 500)"
+      :style="{ marginTop: '160px' }"
+    />
+    <div
+      v-else-if="channel"
+      :style="{
+        marginTop: '16px',
+      }"
+    >
+      <StudioDetailsPanel
+        v-if="channel"
+        class="channel-details-wrapper"
+        :details="channel"
+        :loading="isLoading"
+        :tokenDefinition="needKolibriVersionToImport$()"
+      />
+    </div>
+  </StudioImmersiveModal>
+
+</template>
+
+
+<script>
+
+  import Vue, { computed, onMounted, watch } from 'vue';
+  import useKShow from 'kolibri-design-system/lib/composables/useKShow';
+  import { useRouter } from 'vue-router/composables';
+  import StudioDetailsPanel from 'shared/views/details/StudioDetailsPanel.vue';
+  import StudioLargeLoader from 'shared/views/StudioLargeLoader';
+  import StudioImmersiveModal from 'shared/views/StudioImmersiveModal';
+  import useStore from 'shared/composables/useStore';
+  import { getChannel } from 'shared/data/public';
+  import { useFetch } from 'shared/composables/useFetch';
+  import { ChannelVersion } from 'shared/data/resources';
+  import LanguagesMap from 'shared/leUtils/Languages';
+  import LicensesMap from 'shared/leUtils/Licenses';
+  import { communityChannelsStrings } from 'shared/strings/communityChannelsStrings';
+
+  /**
+   * This function maps the channel info that comes from the public models, to a format that the
+   * current studio components expect (they are used to receive channel info from the
+   * contentcuration models)
+   */
+  function mapResponseChannel(channel) {
+    const language = channel.lang_code || channel.included_languages?.[0] || null;
+    return {
+      ...channel,
+      published: true,
+      count: channel.total_resource_count || 0,
+      resource_count: channel.total_resource_count || 0,
+      language,
+      thumbnail_url: channel.thumbnail,
+      modified: channel.last_updated,
+      resource_size: channel.published_size || 0,
+      last_published: channel.last_published || channel.last_updated,
+      primary_token: channel.token,
+      languages:
+        channel.included_languages?.map(
+          langCode => LanguagesMap.get(langCode)?.native_name || langCode,
+        ) || [],
+      licenses:
+        channel.included_licenses
+          ?.map(licenseId => LicensesMap.get(licenseId)?.license_name)
+          .filter(Boolean) || [],
+
+      // We don't have this data available for public channels,
+      // so we null it out to avoid confusion
+      levels: null,
+      includes: null,
+      accessible_languages: null,
+      sample_nodes: null,
+      tags: null,
+      authors: null,
+      copyright_holders: null,
+      aggregators: null,
+      providers: null,
+    };
+  }
+  export default {
+    name: 'ChannelDetailsModal',
+    components: {
+      StudioDetailsPanel,
+      StudioLargeLoader,
+      StudioImmersiveModal,
+    },
+    setup(props) {
+      const router = useRouter();
+      const store = useStore();
+      const isModalOpen = computed({
+        get: () => true,
+        set: value => {
+          if (!value) {
+            // When the modal is closed, navigate back to the previous page
+            router.back();
+          }
+        },
+      });
+      const { show } = useKShow();
+
+      const loadChannelDetails = async () => {
+        try {
+          const channelResponse = await getChannel(props.channelId, { public: false });
+          const [channelVersion] = await ChannelVersion.fetchCollection({
+            channel: channelResponse.id,
+            version: channelResponse.version,
+          });
+          return mapResponseChannel({
+            ...channelResponse,
+            ...channelVersion,
+          });
+        } catch (error) {
+          store.dispatch('errors/handleAxiosError', error);
+          return null;
+        }
+      };
+
+      const {
+        isLoading,
+        data: channel,
+        fetchData: fetchChannelDetails,
+      } = useFetch({
+        asyncFetchFunc: loadChannelDetails,
+      });
+
+      watch(
+        () => props.channelId,
+        channelId => {
+          if (channelId) {
+            fetchChannelDetails();
+          }
+        },
+        { immediate: true },
+      );
+
+      onMounted(() => {
+        Vue.$analytics.trackAction('community_channel_details', 'View', {
+          id: props.channelId,
+        });
+      });
+
+      const { needKolibriVersionToImport$ } = communityChannelsStrings;
+
+      return {
+        show,
+        isLoading,
+        channel,
+        isModalOpen,
+
+        needKolibriVersionToImport$,
+      };
+    },
+    props: {
+      channelId: {
+        type: String,
+        default: null,
+      },
+    },
+  };
+
+</script>
+
+
+<style lang="scss" scoped>
+
+  .channel-details-wrapper {
+    max-width: 900px;
+    padding-bottom: 100px;
+    margin: 0 auto;
+  }
+
+</style>

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

@@ -0,0 +1,92 @@
+<template>
+
+  <div
+    class="filters-container"
+    :class="{ disabled }"
+  >
+    <KTextbox
+      v-model="keywordInput"
+      clearable
+      :label="searchLabel$()"
+      :appearanceOverrides="{ maxWidth: '100%' }"
+      @input="setKeywords"
+    />
+
+    <KSelect
+      v-model="countriesFilter"
+      :label="countryLabel$()"
+      :options="countryOptions"
+      multiple
+      clearable
+    />
+
+    <KSelect
+      v-model="languagesFilter"
+      :label="languagesLabel$()"
+      :options="languageOptions"
+      multiple
+      clearable
+    />
+
+    <KSelect
+      v-model="categoriesFilter"
+      :label="categoriesLabel$()"
+      :options="categoryOptions"
+      multiple
+      clearable
+    />
+  </div>
+
+</template>
+
+
+<script setup>
+
+  import { injectCommunityChannelsFilters } from './useCommunityChannelsFilters';
+  import { communityChannelsStrings } from 'shared/strings/communityChannelsStrings';
+
+  defineProps({
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  });
+
+  const { searchLabel$, countryLabel$, languagesLabel$, categoriesLabel$ } =
+    communityChannelsStrings;
+
+  const {
+    keywordInput,
+    setKeywords,
+    countriesFilter,
+    countryOptions,
+    languagesFilter,
+    languageOptions,
+    categoriesFilter,
+    categoryOptions,
+  } = injectCommunityChannelsFilters();
+
+</script>
+
+
+<style lang="scss" scoped>
+
+  .filters-container {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    height: 100%;
+    min-height: 0;
+    overflow-y: auto;
+
+    &.disabled {
+      pointer-events: none;
+      opacity: 0.7;
+    }
+
+    ::v-deep .ui-textbox-feedback {
+      display: none;
+    }
+  }
+
+</style>