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

Standardize ContentCardList Component and Introduce ViewMoreButtonStates #11865

Merged
merged 2 commits into from
Feb 13, 2024
Merged

Standardize ContentCardList Component and Introduce ViewMoreButtonStates #11865

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e9861ab
Refactor ContentCardList component and its dependencies for improved …
GarvitSinghal47 Feb 13, 2024
5a5b538
resolved merge conflict
GarvitSinghal47 Feb 13, 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
7 changes: 7 additions & 0 deletions kolibri/plugins/coach/assets/src/constants/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,13 @@ export const GroupModals = {
DELETE_GROUP: 'DELETE_GROUP',
};

export const ViewMoreButtonStates = {
LOADING: 'LOADING',
HAS_MORE: 'HAS_MORE',
NO_MORE: 'NO_MORE',
ERROR: 'ERROR',
};

export const pageNameToModuleMap = {
[PageNames.EXAMS]: 'examsRoot',
[PageNames.EXAM_REPORT]: 'examReport',
Expand Down
4 changes: 2 additions & 2 deletions kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreatePracticeQuizPage.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@
import { ContentNodeKinds } from 'kolibri.coreVue.vuex.constants';
import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
import ResourceSelectionBreadcrumbs from '../../plan/LessonResourceSelectionPage/SearchTools/ResourceSelectionBreadcrumbs';
import { PageNames } from '../../../constants';
import { PageNames, ViewMoreButtonStates } from '../../../constants/index';
import ContentCardList from '../../plan/LessonResourceSelectionPage/ContentCardList';
import commonCoach from '../../common';
import CoachImmersivePage from '../../CoachImmersivePage';
Expand All @@ -58,7 +58,7 @@
mixins: [commonCoreStrings, commonCoach],
data() {
return {
viewMoreButtonState: 'no_more_results',
viewMoreButtonState: ViewMoreButtonStates.NO_MORE,
contentHasCheckbox: () => false,
contentIsSelected: () => '',
};
Expand Down
20 changes: 10 additions & 10 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 @@ -99,9 +99,9 @@
</div>
</div>

</template>


</template>
<script>

import uniqWith from 'lodash/uniqWith';
Expand All @@ -112,7 +112,7 @@
import { ContentNodeResource, ChannelResource } from 'kolibri.resources';
import { ContentNodeKinds } from 'kolibri.coreVue.vuex.constants';
import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
import { PageNames } from '../../../constants';
import { PageNames, ViewMoreButtonStates } from '../../../constants/index';
import BookmarkIcon from '../LessonResourceSelectionPage/LessonContentCard/BookmarkIcon.vue';
import useQuizResources from '../../../composables/useQuizResources';
import { injectQuizCreation } from '../../../composables/useQuizCreation';
Expand Down Expand Up @@ -150,9 +150,9 @@
// TODO let's not use text for this
const viewMoreButtonState = computed(() => {
if (hasMore.value) {
return 'yes';
return ViewMoreButtonStates.HAS_MORE;
} else {
return 'no_more_results';
return ViewMoreButtonStates.NO_MORE;
}
});

Expand Down Expand Up @@ -450,9 +450,9 @@
},
};

</script>


</script>
<style scoped lang="scss">

@import '~kolibri-design-system/lib/styles/definitions';
Expand Down Expand Up @@ -536,4 +536,4 @@
margin-top: 2em;
}

</style>
</style>
31 changes: 19 additions & 12 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 @@ -45,11 +45,11 @@
@click="$emit('moreresults')"
/>
<KCircularLoader
v-if="viewMoreButtonState === 'waiting' & loadingMoreState"
v-if="viewMoreButtonState === ViewMoreButtonStates.LOADING & loadingMoreState"
:delay="false"
/>
<!-- TODO introduce messages in next version -->
<p v-else-if="viewMoreButtonState === 'error'">
<p v-else-if="viewMoreButtonState === ViewMoreButtonStates.ERROR">
<KIcon icon="error" />
<!-- {{ $tr('moreResultsError') }} -->
</p>
Expand All @@ -59,12 +59,14 @@
</template>
</div>

</template>


</template>
<script>

import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
import { ViewMoreButtonStates } from '../../../constants/index';

import LessonContentCard from './LessonContentCard';

export default {
Expand All @@ -73,6 +75,12 @@
LessonContentCard,
},
mixins: [commonCoreStrings],

setup() {
return {
ViewMoreButtonStates,
};
},
props: {
showSelectAll: {
type: Boolean,
Expand Down Expand Up @@ -125,11 +133,10 @@
default: false,
},
},

computed: {
showButton() {
return (
this.viewMoreButtonState !== 'waiting' && this.viewMoreButtonState !== 'no_more_results'
);
return this.viewMoreButtonState === this.ViewMoreButtonStates.HAS_MORE;
},
needCheckboxes() {
return this.contentList.some(c => this.contentHasCheckbox(c));
Expand All @@ -150,9 +157,9 @@
},
};

</script>


</script>
<style lang="scss" scoped>

@import './LessonContentCard/card';
Expand Down Expand Up @@ -180,4 +187,4 @@
margin-left: $checkbox-offset;
}

</style>
</style>
14 changes: 9 additions & 5 deletions kolibri/plugins/coach/assets/src/views/plan/LessonResourceSelectionPage/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,6 +122,7 @@
import CoachAppBarPage from '../../CoachAppBarPage';
import CoachImmersivePage from '../../CoachImmersivePage';
import { LessonsPageNames } from '../../../constants/lessonsConstants';
import { ViewMoreButtonStates } from '../../../constants/index';
import LessonsSearchBox from './SearchTools/LessonsSearchBox';
import LessonsSearchFilters from './SearchTools/LessonsSearchFilters';
import ResourceSelectionBreadcrumbs from './SearchTools/ResourceSelectionBreadcrumbs';
Expand Down Expand Up @@ -252,13 +253,16 @@
);
},
viewMoreButtonState() {
if (this.moreResultsState === 'waiting' || this.moreResultsState === 'error') {
if (
this.moreResultsState === ViewMoreButtonStates.LOADING ||
this.moreResultsState === ViewMoreButtonStates.ERROR
) {
return this.moreResultsState;
}
if (!this.inSearchMode || this.numRemainingSearchResults === 0) {
return 'no_more_results';
return ViewMoreButtonStates.NO_MORE;
}
return 'visible';
return ViewMoreButtonStates.HAS_MORE;
},
contentIsInLesson() {
return ({ id }) =>
Expand Down Expand Up @@ -519,7 +523,7 @@
});
},
handleMoreResults() {
this.moreResultsState = 'waiting';
this.moreResultsState = ViewMoreButtonStates.LOADING;
this.fetchAdditionalSearchResults({
searchTerm: this.searchTerm,
kind: this.filters.kind,
Expand All @@ -530,7 +534,7 @@
this.moreResultsState = null;
})
.catch(() => {
this.moreResultsState = 'error';
this.moreResultsState = ViewMoreButtonStates.ERROR;
});
},
topicsLink(topicId) {
Expand Down