Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update SearchFiltersPanel for Coach #12759

Merged
Show file tree
Hide file tree
Changes from 25 commits
Commits
Show all changes
28 commits
Select commit Hold shift + click to select a range
f78ec82
conditionalize SearchFiltersPanel's mode of display: accordion or not
nucleogenesis Oct 23, 2024
9ba200e
DONOTMERGE: make button for testing in resource selection panel; I sk…
nucleogenesis Oct 23, 2024
065cea6
styling fixes/updates to better reflect designs
nucleogenesis Oct 29, 2024
dea67e4
incl activity buttons, fix icon error using existing (but incorrect) …
nucleogenesis Oct 29, 2024
15a8420
tabindex=-1 for KIconButton chevron in AccordionItem
nucleogenesis Oct 29, 2024
f8463be
need to call search if terms preexist
nucleogenesis Oct 31, 2024
3b5c6db
actiivtybuttonsgroup dynamic grid flow styling
nucleogenesis Nov 7, 2024
e576f4f
handle show resources/needs
nucleogenesis Nov 7, 2024
fe02d5e
move conditional positioning rendering from SidePanelsFilter to parents
nucleogenesis Nov 8, 2024
3678ed2
styles fix & add uncategorized button
nucleogenesis Nov 8, 2024
1a7d8f7
pass disabled prop to the button in the new accordionitem
nucleogenesis Nov 8, 2024
a8b18e6
improved logic for disabled/header appearance business
nucleogenesis Nov 8, 2024
4d8d727
remove drop-shadow add fineline 1px border on new accordion container
nucleogenesis Nov 8, 2024
c7d4589
remove unnecessary code
nucleogenesis Nov 8, 2024
5009fc0
conditional KModal / div display for categories selection modal & cle…
nucleogenesis Nov 11, 2024
1121761
toggle uncategorized button
nucleogenesis Nov 11, 2024
2060260
add hacky all_channels option
nucleogenesis Nov 11, 2024
13f4ecd
just emit empty object for all channels selection
nucleogenesis Nov 11, 2024
d2a2b82
remove channels option from searchfilterspanel accordion display
nucleogenesis Nov 12, 2024
8b94f83
remove channels from all SearchFiltersPanel
nucleogenesis Nov 12, 2024
73b85ec
fix tests to accomodate new SearchFiltersPanel usage in LibraryPage
nucleogenesis Nov 12, 2024
dc86215
cannot call coreString in component definition, default placehodler t…
nucleogenesis Nov 12, 2024
c1fc917
side panel conditionals set correctly in LibraryPage
nucleogenesis Nov 13, 2024
b30f7c5
side panel conditionals set correctly in LibraryPage pt2
nucleogenesis Nov 13, 2024
c673a02
ensure we unset the sidepanelisopen var when screensize changes
nucleogenesis Nov 13, 2024
d3ad0f9
remove testing-only search button; hide activities in coach
nucleogenesis Nov 14, 2024
51f196c
pass topic ref as descendant when init'ing useBaseSearch in resources…
nucleogenesis Nov 14, 2024
d16bebf
call search in setup, not created, in LibraryPage
nucleogenesis Nov 14, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<div v-if="loading && !loadingMore">
<KCircularLoader />
</div>
<div v-else>
<div v-else-if="!showSearch">
<h1
v-if="selectPracticeQuiz"
class="select-folder-style"
Expand Down Expand Up @@ -67,7 +67,7 @@
</div>
</div>

<div v-if="!isTopicIdSet && bookmarks.length && !showBookmarks">
<div v-if="!isTopicIdSet && bookmarks.length && !showBookmarks && !showSearch">
<p>{{ coreString('selectFromBookmarks') }}</p>

<div>
Expand Down Expand Up @@ -97,10 +97,10 @@
:topicsLink="topicsLink"
/>

<LessonsSearchBox
<KButton
v-if="!showBookmarks"
@clear="clearSearchTerm"
@searchterm="handleSearchTermChange"
text="👁️SEARCH👁️"
@click="showSearch = true"
/>

<div
Expand All @@ -124,6 +124,7 @@
</div>

<ContentCardList
v-if="!showSearch"
:contentList="contentList"
:showSelectAll="showSelectAll"
:viewMoreButtonState="viewMoreButtonState"
Expand Down Expand Up @@ -176,6 +177,18 @@
/>
</div>
</div>

<SearchFiltersPanel
v-if="showSearch"
ref="sidePanel"
v-model="searchTerms"
data-test="side-panel"
width="100%"
:accordion="true"
:showActivities="true"
@close="showSearch = false"
/>

<KModal
v-if="showCloseConfirmation"
:submitText="coreString('continueAction')"
Expand All @@ -196,6 +209,7 @@
import get from 'lodash/get';
import uniqWith from 'lodash/uniqWith';
import isEqual from 'lodash/isEqual';
import flatMap from 'lodash/flatMap';
import { useMemoize } from '@vueuse/core';
import {
displaySectionTitle,
Expand All @@ -206,6 +220,8 @@
import { ContentNodeResource, ChannelResource } from 'kolibri.resources';
import { ContentNodeKinds, MAX_QUESTIONS_PER_QUIZ_SECTION } from 'kolibri.coreVue.vuex.constants';
import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
import useBaseSearch from 'kolibri-common/composables/useBaseSearch';
import SearchFiltersPanel from 'kolibri-common/components/SearchFiltersPanel';
import { exerciseToQuestionArray } from '../../../utils/selectQuestions';
import { PageNames, ViewMoreButtonStates } from '../../../constants/index';
import BookmarkIcon from '../../lessons/LessonResourceSelectionPage/LessonContentCard/BookmarkIcon.vue';
Expand All @@ -218,13 +234,19 @@
export default {
name: 'ResourceSelection',
components: {
SearchFiltersPanel,
ContentCardList,
BookmarkIcon,
LessonsSearchBox,
ResourceSelectionBreadcrumbs,
},
mixins: [commonCoreStrings],
setup(props, context) {
const { searchTerms, search } = useBaseSearch({});
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We are already defining the topic below, we should pass that in as the descendant option to useBaseSearch to properly hook this up to the descendant restricted searching when applicable.

// Search if we already have search terms when we load up
if (flatMap(searchTerms.value, term => Object.keys(term)).length) {
search();
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should just call search unconditionally, like we do in the library page: https://github.com/learningequality/kolibri/blob/develop/kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue#L515

(although I am not quite sure why we are calling it in the created hook and not the setup function).

}
const store = getCurrentInstance().proxy.$store;
const route = computed(() => store.state.route);
const topicId = computed(() => route.value.params.topic_id);
Expand Down Expand Up @@ -701,6 +723,7 @@
}

return {
showSearch: ref(false),
nodeIsSelectableOrUnselectable,
showCheckbox,
displaySectionTitle,
Expand Down Expand Up @@ -765,6 +788,7 @@
selectPracticeQuizLabel$,
numberOfQuestionsLabel$,
addNumberOfQuestions$,
searchTerms,
};
},
props: {
Expand Down
59 changes: 51 additions & 8 deletions kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -102,14 +102,28 @@
</main>

<!-- Side Panels for filtering and searching -->
<SearchFiltersPanel
v-if="(!isLocalLibraryEmpty || deviceId) && (windowIsLarge || mobileSidePanelIsOpen)"
ref="sidePanel"
v-model="searchTerms"
data-test="side-panel"
:width="`${sidePanelWidth}px`"
@close="toggleSidePanelVisibility"
/>
<div v-if="(!isLocalLibraryEmpty || deviceId) && windowIsLarge">
<SearchFiltersPanel
ref="sidePanel"
v-model="searchTerms"
:class="windowIsLarge ? 'side-panel' : ''"
data-test="side-panel-local"
:width="`${sidePanelWidth}px`"
/>
</div>

<SidePanelModal
v-else-if="mobileSidePanelIsOpen && !windowIsLarge"
alignment="left"
@closePanel="toggleSidePanelVisibility"
>
<SearchFiltersPanel
ref="sidePanel"
v-model="searchTerms"
data-test="side-panel"
:width="`${sidePanelWidth}px`"
/>
</SidePanelModal>

<!-- Side Panel for metadata -->
<SidePanelModal
Expand Down Expand Up @@ -501,6 +515,14 @@
searchTerms() {
this.mobileSidePanelIsOpen = false;
},
windowIsLarge(newVal) {
// Be sure we set the side panel closed if the screen size changes
// otherwise the watcher on mobileSidePanelIsOpen will leave the
// document stuck in `position: fixed;` so we won't see the scrollbar
if (newVal) {
this.mobileSidePanelIsOpen = false;
}
},
mobileSidePanelIsOpen() {
if (this.mobileSidePanelIsOpen) {
document.documentElement.style.position = 'fixed';
Expand Down Expand Up @@ -649,4 +671,25 @@
margin-left: 8px;
}

.side-panel {
@extend %dropshadow-2dp;

position: fixed;
top: 60px;
left: 0;
height: 100%;
padding: 24px 24px 0;
overflow-y: scroll;
font-size: 14px;
}

/*
* Work around for https://bugzilla.mozilla.org/show_bug.cgi?id=1417667
*/
.side-panel::after {
display: block;
padding-bottom: 70px;
content: '';
}

</style>
52 changes: 31 additions & 21 deletions kolibri/plugins/learn/assets/src/views/TopicsPage/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -186,26 +186,24 @@

<!-- The full screen side panel is used on smaller screens, and toggles as an overlay -->
<template v-if="!windowIsLarge && sidePanelIsOpen">
<SearchFiltersPanel
v-if="searchActive"
ref="embeddedPanel"
v-model="searchTerms"
class="full-screen-side-panel"
:showChannels="false"
:style="sidePanelStyleOverrides"
@close="sidePanelIsOpen = false"
/>
<TopicsPanelModal
v-else
ref="embeddedPanel"
class="full-screen-side-panel"
:topics="topics"
:topicMore="Boolean(topicMore)"
:topicsLoading="topicMoreLoading"
:style="sidePanelStyleOverrides"
@loadMoreTopics="handleLoadMoreInTopic"
@close="sidePanelIsOpen = false"
/>
<SidePanelModal @closePanel="sidePanelIsOpen = false">
<SearchFiltersPanel
v-if="searchActive"
ref="embeddedPanel"
v-model="searchTerms"
:showChannels="false"
:style="sidePanelStyleOverrides"
/>
<TopicsPanelModal
v-else
ref="embeddedPanel"
:topics="topics"
:topicMore="Boolean(topicMore)"
:topicsLoading="topicMoreLoading"
:style="sidePanelStyleOverrides"
@loadMoreTopics="handleLoadMoreInTopic"
/>
</SidePanelModal>
</template>
</div>

Expand Down Expand Up @@ -974,8 +972,11 @@
.side-panel {
position: absolute;
top: $total-height;
left: 0;
min-height: calc(100vh - #{$toolbar-height});
padding-top: 16px;
// Padding & scroll to ensure user can scroll all the way down
padding: 1em 1em 6em;
overflow-y: scroll;
}

.main-content-grid {
Expand Down Expand Up @@ -1049,4 +1050,13 @@
margin-bottom: 24px;
}

/deep/ .activities-wrapper {
grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
}

/deep/ .btn-activity {
width: 80px;
height: 80px;
}

</style>
4 changes: 2 additions & 2 deletions kolibri/plugins/learn/assets/test/views/library-page.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -140,7 +140,7 @@ describe('LibraryPage', () => {
options: { stubs: ['SidePanelModal'] },
});
// not displayed by default
expect(wrapper.findComponent({ name: 'SearchFiltersPanel' }).element).toBeUndefined();
expect(wrapper.find('[data-test="side-panel"]').element).toBeUndefined();
wrapper.find('[data-test="filter-button"]').trigger('click');
await wrapper.vm.$nextTick();
expect(wrapper.findComponent({ name: 'SearchFiltersPanel' }).element).toBeTruthy();
Expand Down Expand Up @@ -355,7 +355,7 @@ describe('LibraryPage', () => {
windowIsLarge: true,
}));
const wrapper = await makeWrapper();
expect(wrapper.find('[data-test="side-panel"').element).toBeTruthy();
expect(wrapper.find('[data-test="side-panel-local"').element).toBeTruthy();
});
});

Expand Down
4 changes: 2 additions & 2 deletions packages/kolibri-common/components/SearchBox.vue
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
class="search-input"
:class="$computedClass(searchInputStyle)"
dir="auto"
:placeholder="coreString(placeholder)"
:placeholder="placeholder || coreString('searchLabel')"
>
<div class="search-buttons-wrapper">
<KIconButton
Expand Down Expand Up @@ -80,7 +80,7 @@
},
placeholder: {
type: String,
default: 'searchLabel',
default: null,
},
value: {
type: String,
Expand Down
Loading