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.

Sign up for GitHub

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

Add searchFiltersPanel to Lessons #12871

Merged
merged 4 commits into from
Dec 4, 2024
Merged

Add searchFiltersPanel to Lessons #12871

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
df572e0
add searchFiltersPanel to lessons
ozer550 Nov 21, 2024
b7665ec
add searchLabel from coreStrings
ozer550 Nov 25, 2024
9c2b48d
style the back component
ozer550 Nov 26, 2024
7489f09
remove incorrectly pasted section
ozer550 Nov 26, 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
152 changes: 100 additions & 52 deletions ...s/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,69 +8,96 @@
@shouldFocusFirstEl="() => null"
>
<template #header>
<h1 class="side-panel-title">{{ $tr('manageLessonResourcesTitle') }}</h1>
<div :class="{ 'back-button-class': !showSearch }">
<KIconButton
v-if="!showSearch"
icon="back"
class="back-button-style"
@click="showSearch = true"
/>
<h1 class="side-panel-title">
{{ !showSearch ? searchLabel$() : $tr('manageLessonResourcesTitle') }}
</h1>
</div>
</template>
<div v-if="loading">
<KCircularLoader />

<div v-if="!showSearch">
<SearchFiltersPanel
ref="SearchPanel"
v-model="searchTerms"
:accordion="true"
:showChannels="true"
:showActivities="true"
@close="showSearch = true"
/>
</div>
<div v-else>
<div v-if="bookmarks.length > 0">
<h2 class="side-panel-subtitle">
{{ selectFromBookmarks$() }}
</h2>
<KCardGrid layout="1-1-1">
<KCard
:title="bookmarksLabel$()"
:headingLevel="3"
:to="{}"
orientation="horizontal"
thumbnailDisplay="large"
thumbnailAlign="right"
:style="{
height: '172px',
}"
>
<template #thumbnailPlaceholder>
<KIcon
:style="{
fontSize: '48px',
}"
icon="bookmark"
:color="$themePalette.grey.v_700"
/>
</template>
<template #belowTitle>
<span>
{{ numberOfBookmarks$({ count: bookmarks.length }) }}
</span>
</template>
</KCard>
</KCardGrid>
<div v-if="loading">
<KCircularLoader />
</div>
<div>
<div class="channels-header">
<div v-else>
<div v-if="bookmarks.length > 0">
<h2 class="side-panel-subtitle">
{{ selectFromChannels$() }}
{{ selectFromBookmarks$() }}
</h2>
<KButton
icon="filter"
:text="searchLabel$()"
/>
<KCardGrid layout="1-1-1">
<KCard
:title="bookmarksLabel$()"
:headingLevel="3"
:to="{}"
orientation="horizontal"
thumbnailDisplay="large"
thumbnailAlign="right"
:style="{
height: '172px',
}"
>
<template #thumbnailPlaceholder>
<KIcon
:style="{
fontSize: '48px',
}"
icon="bookmark"
:color="$themePalette.grey.v_700"
/>
</template>
<template #belowTitle>
<span>
{{ numberOfBookmarks$({ count: bookmarks.length }) }}
</span>
</template>
</KCard>
</KCardGrid>
</div>
<div>
<div class="channels-header">
<h2 class="side-panel-subtitle">
{{ selectFromChannels$() }}
</h2>
<KButton
icon="filter"
:text="searchLabel$()"
@click="showSearch = false"
/>
</div>
<KCardGrid layout="1-1-1">
<AccessibleChannelCard
v-for="channel of channels"
:key="channel.id"
:contentNode="channel"
:to="{}"
:headingLevel="3"
/>
</KCardGrid>
</div>
<KCardGrid layout="1-1-1">
<AccessibleChannelCard
v-for="channel of channels"
:key="channel.id"
:contentNode="channel"
:to="{}"
:headingLevel="3"
/>
</KCardGrid>
</div>
</div>

<template #bottomNavigation>
<div class="bottom-nav-container">
<div
v-if="showSearch"
class="bottom-nav-container"
>
<KButton
primary
:text="saveAndFinishAction$()"
Expand All @@ -91,17 +118,24 @@
import ContentNodeResource from 'kolibri-common/apiResources/ContentNodeResource';
import ChannelResource from 'kolibri-common/apiResources/ChannelResource';
import AccessibleChannelCard from 'kolibri-common/components/Cards/AccessibleChannelCard.vue';
import SearchFiltersPanel from 'kolibri-common/components/SearchFiltersPanel/index.vue';
import useBaseSearch from 'kolibri-common/composables/useBaseSearch';
export default {
name: 'LessonResourceSelection',
components: {
SidePanelModal,
AccessibleChannelCard,
SearchFiltersPanel,
},
setup() {
const loading = ref(false);
const bookmarks = ref([]);
const channels = ref([]);
const showSearch = ref(true);
const topic = ref(null);
const { searchTerms } = useBaseSearch(topic);
Copy link
Member Author

Choose a reason for hiding this comment

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

Could refine this further! Any guides on what to change and what not to here?

Copy link
Member

Choose a reason for hiding this comment

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

there will be more to add, which I think you can come back to do the integration for. But for now, this is sufficient :)

const loadBookmarks = async () => {
const data = await ContentNodeResource.fetchBookmarks({
Expand Down Expand Up @@ -141,6 +175,8 @@
loading,
bookmarks,
channels,
showSearch,
searchTerms,
selectFromChannels$,
numberOfBookmarks$,
bookmarksLabel$,
Expand Down Expand Up @@ -191,4 +227,16 @@
width: 100%;
}
.back-button-class {
display: flex;
align-items: center;
justify-content: space-between;
width: 6.5rem;
}
.back-button-style {
position: relative;
top: 3.8px;
}
</style>
Loading