diff --git a/app/components/user-page/course-progress-list-item/index.hbs b/app/components/user-page/course-progress-list-item/index.hbs index e58bdc186e..a3fa29f944 100644 --- a/app/components/user-page/course-progress-list-item/index.hbs +++ b/app/components/user-page/course-progress-list-item/index.hbs @@ -45,7 +45,7 @@ {{/if}}
- {{#each @courseParticipations as |courseParticipation|}} + {{#each this.languagesToDisplay as |courseParticipation|}} {{#if courseParticipation.isCompleted}} {{else}} diff --git a/app/components/user-page/course-progress-list-item/index.js b/app/components/user-page/course-progress-list-item/index.js index 740c7bcf3a..0df100ae6f 100644 --- a/app/components/user-page/course-progress-list-item/index.js +++ b/app/components/user-page/course-progress-list-item/index.js @@ -3,6 +3,8 @@ import arrayToSentence from 'array-to-sentence'; import { action } from '@ember/object'; import { inject as service } from '@ember/service'; +const MAX_LANGUAGES_TO_DISPLAY = 5; + export default class CourseProgressListItemComponent extends Component { @service router; @@ -34,6 +36,21 @@ export default class CourseProgressListItemComponent extends Component { } } + get languagesToDisplay() { + const completedParticipations = this.completedCourseParticipations.sort( + (a, b) => new Date(b.completedAt).getTime() - new Date(a.completedAt).getTime(), + ); + const incompleteParticipations = this.args.courseParticipations + .filter((p) => !p.isCompleted) + .sort((a, b) => new Date(b.lastSubmissionAt).getTime() - new Date(a.lastSubmissionAt).getTime()); + + if (completedParticipations.length >= MAX_LANGUAGES_TO_DISPLAY) { + return completedParticipations.slice(0, MAX_LANGUAGES_TO_DISPLAY); + } + + return [...completedParticipations, ...incompleteParticipations.slice(0, MAX_LANGUAGES_TO_DISPLAY - completedParticipations.length)]; + } + @action navigateToCourse() { this.router.transitionTo('course-overview', this.course.slug); diff --git a/tests/acceptance/view-user-profile-test.js b/tests/acceptance/view-user-profile-test.js index 3c9e1b988e..1b1e5ef4c9 100644 --- a/tests/acceptance/view-user-profile-test.js +++ b/tests/acceptance/view-user-profile-test.js @@ -250,35 +250,4 @@ module('Acceptance | view-user-profile', function (hooks) { assert.strictEqual(userPage.courseProgressListItems.length, 1, 'only one course progress list item should be shown'); assert.strictEqual(userPage.courseProgressListItems[0].name, 'Build your own grep', 'the course progress list item should be for grep'); }); - - test('it does not show private courses in user profile', async function (assert) { - testScenario(this.server); - - let currentUser = this.server.schema.users.first(); - let go = this.server.schema.languages.findBy({ slug: 'go' }); - let redis = this.server.schema.courses.findBy({ slug: 'redis' }); - let grep = this.server.schema.courses.findBy({ slug: 'grep' }); - redis.update({ visibility: 'private' }); - - this.server.create('course-participation', { - course: grep, - language: go, - user: currentUser, - completedStageSlugs: grep.stages.models.sortBy('position').slice(0, 5).mapBy('slug'), - lastSubmissionAt: new Date('2020-10-10'), - }); - - this.server.create('course-participation', { - course: redis, - language: go, - user: currentUser, - completedAt: new Date('2020-01-01'), - }); - - await userPage.visit({ username: 'rohitpaulk' }); - - assert.strictEqual(userPage.courseProgressListItems.length, 1, 'only one course progress list item should be shown'); - assert.strictEqual(userPage.courseProgressListItems[0].name, 'Build your own grep', 'the course progress list item should be for grep'); - assert.notOk(userPage.courseProgressListItems.mapBy('name').includes('Build your own Redis'), 'private course should not be included'); - }); });