+
+ {{ $tr('results', { results: results.length }) }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -108,18 +222,20 @@
import { mapState } from 'vuex';
import uniq from 'lodash/uniq';
- import FullScreenSidePanel from 'kolibri.coreVue.components.FullScreenSidePanel';
import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
import { ContentNodeProgressResource, ContentNodeResource } from 'kolibri.resources';
import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
import { AllCategories, NoCategories } from 'kolibri.coreVue.vuex.constants';
+ import FullScreenSidePanel from 'kolibri.coreVue.components.FullScreenSidePanel';
+ import genContentLink from '../utils/genContentLink';
import { PageNames } from '../constants';
+ import { normalizeContentNode } from '../modules/coreLearn/utils';
import BrowseResourceMetadata from './BrowseResourceMetadata';
import commonLearnStrings from './commonLearnStrings';
import ChannelCardGroupGrid from './ChannelCardGroupGrid';
- import ContentCardGroupGrid from './ContentCardGroupGrid';
+ import HybridLearningCardGrid from './HybridLearningCardGrid';
import EmbeddedSidePanel from './EmbeddedSidePanel';
- import CategorySearchModal from './CategorySearchModal';
+ import CategorySearchModal from './CategorySearchModal/index';
const mobileCarouselLimit = 3;
const desktopCarouselLimit = 15;
@@ -142,12 +258,12 @@
};
},
components: {
- BrowseResourceMetadata,
- CategorySearchModal,
+ HybridLearningCardGrid,
ChannelCardGroupGrid,
- ContentCardGroupGrid,
EmbeddedSidePanel,
FullScreenSidePanel,
+ CategorySearchModal,
+ BrowseResourceMetadata,
},
mixins: [commonLearnStrings, commonCoreStrings, responsiveWindowMixin],
data: function() {
@@ -159,25 +275,14 @@
results: [],
more: null,
labels: null,
+ showSearchModal: false,
+ sidePanelIsOpen: false,
sidePanelContent: null,
};
},
computed: {
...mapState('recommended', ['nextSteps', 'popular', 'resume']),
...mapState('topicsRoot', { channels: 'rootNodes' }),
- // screenLevel() {
- // if (window.innerWidth < 480) {
- // return 0;
- // } else if (window.innerWidth > 480 && window.innerWidth < 600) {
- // return 2;
- // } else if (window.innerWidth > 600 && window.innerWidth < 840) {
- // return 2;
- // } else if (window.innerWidth > 840 && window.innerWidth < 960) {
- // return 3;
- // } else {
- // return 4;
- // }
- // },
carouselLimit() {
return this.windowIsSmall ? mobileCarouselLimit : desktopCarouselLimit;
},
@@ -190,6 +295,9 @@
trimmedResume() {
return this.resume.slice(0, this.carouselLimit);
},
+ currentPage() {
+ return PageNames.LIBRARY;
+ },
searchTerms: {
get() {
const searchTerms = {};
@@ -230,6 +338,30 @@
displayingSearchResults() {
return Object.values(this.searchTerms).some(v => Object.keys(v).length);
},
+ searchTermChipList() {
+ return this.$route.query;
+ },
+ sidePanelWidth() {
+ if (this.windowIsSmall || this.windowIsMedium) {
+ return 0;
+ } else if (this.windowBreakpoint < 4) {
+ return 234;
+ } else {
+ return 346;
+ }
+ },
+ sidePanelOverlayWidth() {
+ return 300;
+ },
+ numCols() {
+ if (this.currentViewStyle === 'list' || this.windowBreakpoint < 1) {
+ return 1;
+ } else if (this.windowBreakpoint < 2) {
+ return 2;
+ } else {
+ return 3;
+ }
+ },
},
watch: {
searchTerms() {
@@ -257,26 +389,32 @@
methods: {
/* eslint-disable kolibri/vue-no-unused-methods */
// TODO: Remove this if we're close to release and haven't used it
- genChannelLink(channel_id) {
- return {
- name: PageNames.TOPICS_CHANNEL,
- params: { channel_id },
- };
+ genContentLink,
+ handleShowSearchModal(value) {
+ this.currentCategory = value;
+ this.showSearchModal = true;
+ !this.windowIsSmall ? (this.sidePanelIsOpen = false) : '';
},
toggleCardView(value) {
this.currentViewStyle = value;
},
- handleShowSearchModal(currentCategory) {
- this.currentCategory = currentCategory;
+ toggleSidePanelVisibility() {
+ this.sidePanelIsOpen = !this.sidePanelIsOpen;
+ },
+ toggleInfoPanel(content) {
+ this.sidePanelContent = content;
+ },
+ closeCategoryModal() {
+ this.currentCategory = null;
},
handleCategory(category) {
this.searchTerms = { ...this.searchTerms, categories: { [category]: true } };
this.currentCategory = null;
},
search() {
+ const getParams = { max_results: 25 };
if (this.displayingSearchResults) {
this.searchLoading = true;
- const getParams = { max_results: 25 };
for (let key of searchKeys) {
if (key === 'categories') {
if (this.searchTerms[key][AllCategories]) {
@@ -296,7 +434,7 @@
getParams.keywords = this.searchTerms.keywords;
}
ContentNodeResource.fetchCollection({ getParams }).then(data => {
- this.results = data.results;
+ this.results = data.results.map(normalizeContentNode);
this.more = data.more;
this.labels = data.labels;
this.searchLoading = false;
@@ -307,15 +445,23 @@
if (this.displayingSearchResults && this.more && !this.moreLoading) {
this.moreLoading = true;
ContentNodeResource.fetchCollection({ getParams: this.more }).then(data => {
- this.results.push(...data.results);
+ this.results.push(...data.results.map(normalizeContentNode));
this.more = data.more;
this.labels = data.labels;
this.moreLoading = false;
});
}
},
- toggleInfoPanel(content) {
- this.sidePanelContent = content;
+ removeFilterTag(value, key) {
+ const keyObject = this.searchTerms[key];
+ delete keyObject[value];
+ this.searchTerms = {
+ ...this.searchTerms,
+ [key]: keyObject,
+ };
+ },
+ clearSearch() {
+ this.searchTerms = {};
},
},
$trs: {
@@ -354,12 +500,9 @@
diff --git a/kolibri/plugins/learn/assets/src/views/TopicsPage.vue b/kolibri/plugins/learn/assets/src/views/TopicsPage.vue
index 0c73d4f4769..88d68935a5c 100644
--- a/kolibri/plugins/learn/assets/src/views/TopicsPage.vue
+++ b/kolibri/plugins/learn/assets/src/views/TopicsPage.vue
@@ -5,11 +5,9 @@