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

Resource selection UX- Improvement #11815

Merged
merged 6 commits into from
Feb 12, 2024
Merged

Resource selection UX- Improvement #11815

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
39b4434
added back navigation in the sidepanel
AllanOXDi Jan 30, 2024
26c4bb1
KCircularloader replaces the view more button when fetching more reso…
AllanOXDi Jan 30, 2024
5d1b9c9
add scroll position
AllanOXDi Feb 5, 2024
a925a60
removes unused elements
AllanOXDi Feb 9, 2024
db86ef3
fixes backward navigation error
AllanOXDi Feb 9, 2024
b1f09dc
fixes linting error
AllanOXDi Feb 9, 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
10 changes: 8 additions & 2 deletions kolibri/plugins/coach/assets/src/composables/useQuizResources.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import useFetchTree from './useFetchTree';
import { QuizExercise } from './quizCreationSpecs.js';

const logger = logging.getLogger(__filename);

const _loadingMore = ref(false);
/**
* @typedef {Object} QuizResourcesConfig
* @property { computed <string|null|undefined> } topicId - The id of the root node to fetch the
Expand Down Expand Up @@ -115,11 +115,16 @@ export default function useQuizResources({ topicId } = {}) {
*/
async function fetchMoreQuizResources() {
set(_loading, true);
set(_loadingMore, true);
return fetchMore().then(async results => {
set(_resources, [...get(_resources), ...results]);
return annotateTopicsWithDescendantCounts(
results.filter(({ kind }) => kind === ContentNodeKinds.TOPIC).map(topic => topic.id)
).then(() => set(_loading, false));
).then(() =>{
set(_loading, false);
set(_loadingMore, false);
}
);
});
}

Expand All @@ -139,6 +144,7 @@ export default function useQuizResources({ topicId } = {}) {
setResources,
resources: computed(() => get(_resources)),
loading: computed(() => get(_loading) || get(treeLoading)),
loadingMore: computed(() => get(_loadingMore)),
fetchQuizResources,
fetchMoreQuizResources,
hasCheckbox,
Expand Down
42 changes: 34 additions & 8 deletions kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,26 @@
<KCircularLoader />
</div>
<div v-else>
<h5
class="title-style"
>
{{ /* selectFoldersOrExercises$() */ }}
</h5>
<KGrid class="align-select-folder-style">
<KGridItem
:layout12="{ span: 1 }"
:layout8="{ span: 1 }"
>
<KIconButton
icon="back"
@click="goBack()"
/>
</KGridItem>

<KGridItem
:layout12="{ span: 11 }"
:layout8="{ span: 7 }"
>
<h5 class="select-folder-style">
{{ selectFoldersOrExercises$() }}
</h5>
</KGridItem>
</KGrid>

<div v-if="!isTopicIdSet && bookmarks.length && !showBookmarks">

Expand Down Expand Up @@ -41,7 +56,6 @@
:channelsLink="channelsLink"
:topicsLink="topicsLink"
/>

<ContentCardList
:contentList="contentList"
:showSelectAll="true"
Expand All @@ -52,6 +66,7 @@
:contentCardMessage="selectionMetadata"
:contentCardLink="contentLink"
:selectAllIndeterminate="selectAllIndeterminate"
:loadingMoreState="loadingMore"
@changeselectall="toggleTopicInWorkingResources"
@change_content_card="toggleSelected"
@moreresults="fetchMoreQuizResources"
Expand Down Expand Up @@ -126,7 +141,7 @@
sectionSettings$,
selectFromBookmarks$,
numberOfSelectedBookmarks$,
//selectFoldersOrExercises$,
selectFoldersOrExercises$,
numberOfSelectedResources$,
numberOfResources$,
selectedResourcesInformation$,
Expand Down Expand Up @@ -191,6 +206,7 @@
hasMore,
annotateTopicsWithDescendantCounts,
setResources,
loadingMore,
} = useQuizResources({ topicId });

const _loading = ref(true);
Expand Down Expand Up @@ -275,14 +291,15 @@
hasCheckbox,
loading,
hasMore,
loadingMore,
fetchMoreQuizResources,
resetWorkingResourcePool,
contentPresentInWorkingResourcePool,
//contentList,
sectionSettings$,
selectFromBookmarks$,
numberOfSelectedBookmarks$,
//selectFoldersOrExercises$,
selectFoldersOrExercises$,
numberOfSelectedResources$,
numberOfResources$,
windowIsSmall,
Expand Down Expand Up @@ -507,4 +524,13 @@
}
}

.select-folder-style {
margin-top: 0.5em;
font-size: 18px;
}

.align-select-folder-style {
margin-top: 2em;
}

</style>
8 changes: 6 additions & 2 deletions kolibri/plugins/coach/assets/src/views/plan/LessonResourceSelectionPage/ContentCardList.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,13 +39,13 @@

<template>
<KButton
v-if="showButton"
v-if="showButton && !loadingMoreState"
:text="coreString('viewMoreAction')"
:primary="false"
@click="$emit('moreresults')"
/>
<KCircularLoader
v-if="viewMoreButtonState === 'waiting'"
v-if="viewMoreButtonState === 'waiting' & loadingMoreState"
:delay="false"
/>
<!-- TODO introduce messages in next version -->
Expand Down Expand Up @@ -120,6 +120,10 @@
type: Function, // ContentNode => Route
required: true,
},
loadingMoreState:{
type: Boolean,
default: false,
}
},
computed: {
showButton() {
Expand Down
Loading