diff --git a/frontend/app/components/admin/sidenav.hbs b/frontend/app/components/admin/sidenav.hbs index 94ba4cc7e..fb2031e52 100644 --- a/frontend/app/components/admin/sidenav.hbs +++ b/frontend/app/components/admin/sidenav.hbs @@ -52,6 +52,11 @@ {{t 'admin.sidenav.manage_badges'}} +
  • + + {{t "admin.sidenav.badge_users"}} + +
    • diff --git a/frontend/app/components/badge/badge-unlocked.hbs b/frontend/app/components/badge/badge-unlocked.hbs new file mode 100644 index 000000000..5cbf54921 --- /dev/null +++ b/frontend/app/components/badge/badge-unlocked.hbs @@ -0,0 +1,48 @@ + + +
    + {{t 'badge.unlocked.title'}} +
    +
    + {{t 'badge.unlocked.points' numOfPoints=this.badge.points}} +
    +
    + {{#if this.badge.iconUrl}} + + {{else}} + {{svg-jar 'badge' width='100' height='100'}} + {{/if}} +
    +
    + {{this.badge.name}} +
    +
    + {{this.badge.description}} +
    +
    + + {{t 'badge.unlocked.publish'}} + + + {{t 'badge.unlocked.share'}} + +
    +     + + + {{t 'badge_popup.ok'}} + + +     + \ No newline at end of file diff --git a/frontend/app/components/badge/badge-unlocked.js b/frontend/app/components/badge/badge-unlocked.js new file mode 100644 index 000000000..b4ebc3d8a --- /dev/null +++ b/frontend/app/components/badge/badge-unlocked.js @@ -0,0 +1,31 @@ +import Component from '@glimmer/component'; +import { tracked } from '@glimmer/tracking'; +import { action } from '@ember/object'; +import { inject as service } from '@ember/service'; +import { events } from '../../utils/socket-events'; + +export default class BadgeUnlockedComponent extends Component { + @service socket; + @service store; + @service router; + + @tracked showBadgeUnlockedModal = false; + @tracked badge; + + @action + hideBadgeUnlockedModal() { + this.showBadgeUnlockedModal = false; + } + + @action + notificationEventIntercept() { + this.socket.socket.on(events.user.badge.unlocked, (notification) => { + setTimeout(async () => { + if (!this.showBadgeUnlockedModal) { + this.badge = await this.store.find('badge', notification.badgeId); + this.showBadgeUnlockedModal = true; + } + }, 3000); + }); + } +} diff --git a/frontend/app/components/leaderboard/top-leader.hbs b/frontend/app/components/leaderboard/top-leader.hbs new file mode 100644 index 000000000..2c0afc4e7 --- /dev/null +++ b/frontend/app/components/leaderboard/top-leader.hbs @@ -0,0 +1,67 @@ +
    +
    +
    +
    + +
    +
    + + Jane Doe + + + Nairobi + +
    +
    +
    + + 3,000 + + + {{t 'leaderboard.earnedPoints'}} + +
    +
    +
    +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + +5 +
    +
    + {{!-- + {{t 'admin.users_and_badges.buttons.view_user'}} + --}} +
    + {{#if (eq @position 'first')}} +
    + {{/if}} +
    \ No newline at end of file diff --git a/frontend/app/components/leaderboard/top-leader.scss b/frontend/app/components/leaderboard/top-leader.scss new file mode 100644 index 000000000..4b7864122 --- /dev/null +++ b/frontend/app/components/leaderboard/top-leader.scss @@ -0,0 +1,175 @@ +$palette: ( + primary: #f57010, + white: #ffff, + darkCharcoal: rgba(87, 92, 88, 1), + teach: #32a583, + eucalyptus: #28a745, +); + +.leader-card { + width: 422px; + height: 155px; + box-shadow: 0px 3px 30px rgba(0, 0, 0, 0.29); + border-radius: 5px; + margin-left: 8px; + padding: 15px; + + .image-container { + max-height: 52px; + max-width: 52px; + + img { + box-shadow: 0px 3px 6px rgb(0 0 0 / 7%); + border: 3px solid rgba(255, 255, 255, 1); + } + } + + .details { + padding-left: 8px; + + .name { + font-size: 19px; + color: map-get($palette, darkCharcoal); + font-weight: 500; + } + + .location { + font-size: 15px; + color: map-get($palette, darkCharcoal); + } + } + + .points { + color: map-get($palette, eucalyptus); + font-weight: 700; + font-size: 19px; + } + + .points-title { + font-size: 15px; + color: map-get($palette, darkCharcoal); + } +} + +.leader-card { + .badges-list { + display: flex; + position: relative; + + .badge-icon-container { + width: 30px; + height: 30px; + position: absolute; + display: flex; + flex-direction: column; + flex-wrap: nowrap; + align-items: center; + justify-content: center; + border-radius: 50%; + background-color: white; + box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.05); + border: 3px solid rgba(255, 255, 255, 1); + font-size: 11px; + font-weight: 700; + + .badge-icon { + width: 100%; + height: 100%; + } + + &:nth-child(2) { + margin-left: 20px; + } + + &:nth-child(3) { + margin-left: 40px; + } + + &:nth-child(4) { + margin-left: 60px; + } + } + } +} + +.leader-card.first { + height: 180px; + background-repeat: no-repeat; + background-position: 0% 0%; + background-origin: padding-box; + background-image: linear-gradient( + 119deg, + rgba(126, 87, 194, 1) 0%, + rgba(171, 71, 188, 1) 100% + ); + background-color: transparent; + background-clip: padding-box; + + .image-container { + max-height: 62px; + max-width: 62px; + } + + .name, + .location, + .points, + .points-title { + color: map-get($palette, white); + } + + .bottom { + padding-bottom: 10px; + padding-top: 10px; + } + + .view-profile-btn { + background-color: map-get($palette, white); + border-color: map-get($palette, white); + color: map-get($palette, darkCharcoal); + } +} + +.first { + position: relative; + + .confetti-one { + position: absolute; + background-image: url('/images/confetti.svg'); + width: 70%; + height: 55px; + background-size: cover; + top: -40px; + left: -30px; + background-repeat: no-repeat; + z-index: -1; + } + + .confetti-two { + position: absolute; + background-image: url('/images/confetti-1.svg'); + width: 70%; + height: 55px; + background-size: cover; + top: -40px; + right: -60px; + background-repeat: no-repeat; + z-index: -1; + } +} + +.image-container { + max-width: 40px; + max-height: 40px; + + .user-profile-image { + width: 100%; + height: 100%; + border-radius: 50%; + } +} + +.view-profile-btn { + font-size: 13px; + padding-bottom: 4px; + padding-top: 4px; +} diff --git a/frontend/app/components/main-header.hbs b/frontend/app/components/main-header.hbs index b846adcbf..612f29cb8 100644 --- a/frontend/app/components/main-header.hbs +++ b/frontend/app/components/main-header.hbs @@ -35,6 +35,11 @@ {{t "buttons.teach"}} +
  • + + {{t "buttons.leaderboard"}} + +
  • {{t "buttons.community"}} diff --git a/frontend/app/components/survey/prompt-popup.js b/frontend/app/components/survey/prompt-popup.js index 5848cbbda..dfaa6eea6 100644 --- a/frontend/app/components/survey/prompt-popup.js +++ b/frontend/app/components/survey/prompt-popup.js @@ -19,14 +19,14 @@ export default class SurveyPromptPopupComponent extends Component { @action notificationEventIntercept() { - this.socket.socket.on(events.user.notification.created, (notification) => { - setTimeout(async () => { - if (!this.showSurveyFillPrompt) { - this.survey = await this.store.find('survey', notification.itemId); - this.showSurveyFillPrompt = true; - } - }, 3000); - }); + // this.socket.socket.on(events.user.notification.created, (notification) => { + // setTimeout(async () => { + // if (!this.showSurveyFillPrompt) { + // this.survey = await this.store.find('survey', notification.itemId); + // this.showSurveyFillPrompt = true; + // } + // }, 3000); + // }); } @action diff --git a/frontend/app/controllers/admin/badges/users.js b/frontend/app/controllers/admin/badges/users.js new file mode 100644 index 000000000..6a3bef77e --- /dev/null +++ b/frontend/app/controllers/admin/badges/users.js @@ -0,0 +1,88 @@ +import Controller from '@ember/controller'; +import { inject as service } from '@ember/service'; +import { action } from '@ember/object'; +import { tracked } from '@glimmer/tracking'; + +export default class AdminBadgesUsersController extends Controller { + @service me; + @service store; + @tracked userSearchTerm; + @tracked showPerPage = 10; + @tracked currentPage = 1; + + perPageOptions = [ + { value: 5, selected: false }, + { value: 10, selected: true }, + { value: 20, selected: false }, + { value: 50, selected: false }, + { value: 100, selected: false }, + ]; + + get badges() { + return this.store.peekAll('badge'); + } + + get badgesUnlockedCount() { + return 0; //TODO + } + + @action + updatePerPage(evt) { + this.currentPage = 1; // It's easier than doing calculations. + this.showPerPage = +evt.target.selectedOptions[0].value; + } + + get pageNumericSummary() { + const recordsCount = this.model.length; + + let firstIndex = 1; + if (this.currentPage > 1) { + firstIndex = this.showPerPage * this.currentPage - (this.showPerPage - 1); + } + + let lastIndex = this.showPerPage * this.currentPage; + if (lastIndex > recordsCount) { + lastIndex = recordsCount; + } + + return { firstIndex, lastIndex, recordsCount }; + } + + get paginationSummary() { + const { + recordsCount, + firstIndex: pageFirstIndex, + lastIndex: pageLastIndex, + } = this.pageNumericSummary; + + if (recordsCount <= this.showPerPage) { + return `Showing All Users`; + } + + return `Showing ${pageFirstIndex} - ${pageLastIndex} of ${recordsCount}`; + } + + @action + goToPrevPage() { + if (this.hasPreviousPage) { + this.currentPage = --this.currentPage; + } + } + + @action + goToNextPage() { + if (this.hasNextPage) { + this.currentPage = ++this.currentPage; + } + } + + get hasNextPage() { + const { recordsCount, lastIndex } = this.pageNumericSummary; + return lastIndex !== recordsCount; + } + + get hasPreviousPage() { + const { recordsCount } = this.pageNumericSummary; + return this.currentPage > 1 && recordsCount > this.showPerPage; + } +} diff --git a/frontend/app/controllers/leaderboard.js b/frontend/app/controllers/leaderboard.js new file mode 100644 index 000000000..41cd6f40a --- /dev/null +++ b/frontend/app/controllers/leaderboard.js @@ -0,0 +1,74 @@ +import Controller from '@ember/controller'; +import { tracked } from '@glimmer/tracking'; +import { action } from '@ember/object'; + +export default class LeaderboardController extends Controller { + @tracked showPerPage = 20; + @tracked currentPage = 1; + + perPageOptions = [ + { value: 20, selected: true }, + { value: 50, selected: false }, + { value: 100, selected: false }, + ]; + + @action + updatePerPage(evt) { + this.currentPage = 1; // It's easier than doing calculations. + this.showPerPage = +evt.target.selectedOptions[0].value; + } + + get pageNumericSummary() { + const recordsCount = this.model.length; + + let firstIndex = 1; + if (this.currentPage > 1) { + firstIndex = this.showPerPage * this.currentPage - (this.showPerPage - 1); + } + + let lastIndex = this.showPerPage * this.currentPage; + if (lastIndex > recordsCount) { + lastIndex = recordsCount; + } + + return { firstIndex, lastIndex, recordsCount }; + } + + get paginationSummary() { + const { + recordsCount, + firstIndex: pageFirstIndex, + lastIndex: pageLastIndex, + } = this.pageNumericSummary; + + if (recordsCount <= this.showPerPage) { + return `Showing All Users`; + } + + return `Showing ${pageFirstIndex} - ${pageLastIndex} of ${recordsCount}`; + } + + @action + goToPrevPage() { + if (this.hasPreviousPage) { + this.currentPage = --this.currentPage; + } + } + + @action + goToNextPage() { + if (this.hasNextPage) { + this.currentPage = ++this.currentPage; + } + } + + get hasNextPage() { + const { recordsCount, lastIndex } = this.pageNumericSummary; + return lastIndex !== recordsCount; + } + + get hasPreviousPage() { + const { recordsCount } = this.pageNumericSummary; + return this.currentPage > 1 && recordsCount > this.showPerPage; + } +} diff --git a/frontend/app/models/notification.js b/frontend/app/models/notification.js index 1609046da..286b1e18f 100644 --- a/frontend/app/models/notification.js +++ b/frontend/app/models/notification.js @@ -32,12 +32,15 @@ export default class NotificationModel extends Model { * Resolve dynamic properties based on the model or/and event type */ get resolveDynamicProps() { + // survey unlocked notification if (this.model === 'survey') { return { url: this.router.urlFor('surveys', this.itemId), svgIcon: 'form', }; } + + // comment created notification if (this.model === 'comment' && notificationTypes.comment.created) { return { url: this.router.urlFor('chapter.index', this.itemId), @@ -45,6 +48,17 @@ export default class NotificationModel extends Model { }; } + // badge unlocked notification + if (this.model === 'badge' && notificationTypes.badge.unlocked) { + return { + url: this.router.urlFor( + 'profile.achievements', + this.recipient.get('id') + ), + iconUrl: '/images/badges-earned.png', + }; + } + return { url: undefined, svgIcon: '', iconUrl: '' }; } } diff --git a/frontend/app/router.js b/frontend/app/router.js index 142333d17..ac2faa98f 100644 --- a/frontend/app/router.js +++ b/frontend/app/router.js @@ -66,6 +66,7 @@ Router.map(function () { this.route('reset_password'); this.route('verify'); + this.route('leaderboard'); this.route('surveys', { path: '/surveys/:id' }); this.route('admin', function () { diff --git a/frontend/app/routes/admin/badges/users.js b/frontend/app/routes/admin/badges/users.js new file mode 100644 index 000000000..081bfb354 --- /dev/null +++ b/frontend/app/routes/admin/badges/users.js @@ -0,0 +1,8 @@ +import Route from '@ember/routing/route'; + +export default class AdminBadgesUsersRoute extends Route { + async afterModel(resolvedModel, transition) { + await this.store.query('badge', { isDeleted: false }); + return super.afterModel(resolvedModel, transition); + } +} diff --git a/frontend/app/routes/leaderboard.js b/frontend/app/routes/leaderboard.js new file mode 100644 index 000000000..67a5bf020 --- /dev/null +++ b/frontend/app/routes/leaderboard.js @@ -0,0 +1,3 @@ +import Route from '@ember/routing/route'; + +export default class LeaderboardRoute extends Route {} diff --git a/frontend/app/styles/_badge-unlocked.scss b/frontend/app/styles/_badge-unlocked.scss new file mode 100644 index 000000000..19d1ee40c --- /dev/null +++ b/frontend/app/styles/_badge-unlocked.scss @@ -0,0 +1,77 @@ +$palette: ( + primary: #f57010, + studio: #5a47ad, + windsor: #4e0b80, + white: #ffff, + teach: #32a583, +); + +.badge-unlocked { + .modal-dialog { + max-width: 400px; + } + + .modal-body { + background-color: map-get($palette, studio); + color: map-get($palette, white); + + .title { + font-size: 24px; + line-height: 15px; + font-weight: 500; + padding-top: 24px; + } + + .name { + font-weight: bold; + font-size: 25px; + padding-bottom: 15px; + padding-top: 30px; + } + + .badge-icon-container { + max-width: 150px; + max-height: 210px; + margin: 0 auto; + padding: 10px; + + .badge-icon { + width: 100%; + height: 100%; + padding: 10px; + padding-top: 50px; + } + } + + .points { + width: max-content; + background-color: map-get($palette, teach); + padding: 2px 10px; + font-size: 20px; + border-radius: 4px; + margin: 25px auto 14px; + font-weight: 500; + } + + .actions { + button { + background-color: map-get($palette, primary); + color: map-get($palette, white); + } + } + } + + .modal-footer { + background-color: map-get($palette, studio); + border: none; + + button { + width: 100%; + background-color: map-get($palette, windsor); + padding-bottom: 10px; + padding-top: 11px; + font-size: 20px; + color: map-get($palette, white); + } + } +} diff --git a/frontend/app/styles/_leaderboard.scss b/frontend/app/styles/_leaderboard.scss new file mode 100644 index 000000000..8405542a0 --- /dev/null +++ b/frontend/app/styles/_leaderboard.scss @@ -0,0 +1,182 @@ +$palette: ( + primary: #f57010, + white: #ffff, + darkCharcoal: rgba(87, 92, 88, 1), + teach: #32a583, + eucalyptus: #28a745, +); +.leaderboard-wrapper { + position: relative; + + .bg-panel { + width: 100%; + height: 135px; + background-color: map-get($palette, primary); + opacity: 0.22; + position: absolute; + z-index: 1; + top: 0; + margin-top: -30px; + } + + .leaderboard-main-container { + position: relative; + z-index: 10; + background-color: map-get($palette, white); + margin-top: 30px; + padding: 20px; + } + + .leaderboard-main-container { + .title { + font-size: 19px; + font-weight: 700; + color: map-get($palette, darkCharcoal); + padding-left: 10px; + padding-bottom: 12px; + } + + .sub-title { + font-size: 19px; + font-weight: 500; + color: map-get($palette, darkCharcoal); + padding-left: 50px; + } + } + + .top-leaders { + padding-bottom: 25px; + } + + .leaderboard-table { + border-collapse: separate; + border-spacing: 0 10px; + + thead td { + font-size: 16px; + font-weight: 500; + border: none; + color: map-get($palette, darkCharcoal); + + &:first-of-type { + padding-right: 0; + } + + &:nth-of-type(2) { + padding-left: 25px; + } + } + + tbody { + tr { + margin-bottom: 10px; + box-shadow: 0px 3px 30px rgba(0, 0, 0, 0.06); + border-radius: 5px; + background-color: map-get($palette, white); + } + + td { + font-size: 14px; + color: map-get($palette, gray30); + vertical-align: middle; + border: none; + + &:first-of-type { + padding-right: 0; + width: 10px; + } + } + + td.position span { + height: 23px; + width: 23px; + background-color: lighten(map-get($palette, teach), 25%); + display: flex; + border-radius: 50%; + align-items: center; + justify-content: center; + } + + .details { + padding-left: 15px; + + .name { + font-size: 16px; + color: map-get($palette, darkCharcoal); + font-weight: 600; + } + + .location { + color: map-get($palette, luckyGrey); + font-size: 16px; + } + } + } + + td.points { + font-size: 16px; + font-weight: 500; + } + + td.badges-container { + .badges { + display: flex; + flex-direction: row; + align-content: center; + justify-content: flex-start; + align-items: center; + + .extra-badges-total { + font-size: 16px; + background-color: #3f484d5c; + width: 34px; + height: 34px; + color: #ffffff; + + display: flex; + border-radius: 100%; + justify-content: center; + align-content: center; + flex-direction: column; + align-items: center; + } + + .mini-badge-container { + width: 50px; + height: 65px; + display: flex; + flex-direction: row; + flex-wrap: nowrap; + align-content: center; + justify-content: center; + box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.08); + border: 0.5px solid rgba(86, 16, 245, 0.11); + margin-right: 9px; + padding: 4px; + + .badge-icon { + width: 100%; + height: 100%; + } + } + } + } + } + + .image-container { + max-width: 40px; + max-height: 40px; + + .user-profile-image { + width: 100%; + height: 100%; + border-radius: 50%; + } + } + + .view-profile-btn { + font-size: 13px; + padding-bottom: 4px; + padding-top: 4px; + } +} diff --git a/frontend/app/styles/app.scss b/frontend/app/styles/app.scss index e6718d583..f27313be1 100644 --- a/frontend/app/styles/app.scss +++ b/frontend/app/styles/app.scss @@ -57,7 +57,13 @@ body { .kkl-jumbo-text { color: white; width: 100%; - -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(252, 113, 0, 0)), to(rgba(0, 0, 0, 1))); + -webkit-mask-image: -webkit-gradient( + linear, + left top, + left bottom, + from(rgba(252, 113, 0, 0)), + to(rgba(0, 0, 0, 1)) + ); } body { @@ -89,11 +95,13 @@ body { } button.like { - filter: invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%); + filter: invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) + brightness(104%) contrast(97%); } button.dislike { - filter: invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%); + filter: invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) + brightness(104%) contrast(97%); } .icon { @@ -101,7 +109,8 @@ button.dislike { width: 70px; height: 40px; background-size: cover; - filter: invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%); + filter: invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) + brightness(104%) contrast(97%); } pre { @@ -177,5 +186,6 @@ footer .row { @import 'survey'; @import 'course'; @import 'popular-cards'; +@import 'leaderboard'; @import 'admin'; diff --git a/frontend/app/templates/admin/badges/users.hbs b/frontend/app/templates/admin/badges/users.hbs new file mode 100644 index 000000000..0f0e27cfa --- /dev/null +++ b/frontend/app/templates/admin/badges/users.hbs @@ -0,0 +1,184 @@ +
    +
    +

    {{t "admin.users_and_badges.title"}}

    +
    +
    +
    +
    +

    + {{t "admin.users_and_badges.labels.badge_create_prompt" name=this.me.name}} +

    + + {{svg-jar "plus-circle" height="21" width="21" stroke="white"}} + {{t "admin.users_and_badges.buttons.create"}} + +
    +
    +
    + +
    +
    +
    +
    + {{svg-jar "target" height="50" width="50" stroke="white"}} +
    +
    {{t "admin.users_and_badges.labels.badges_total"}}
    +
    + {{this.badges.length}} +
    + + {{t "admin.users_and_badges.buttons.view_all"}} + {{svg-jar "chevron-right" height="30"}} + +
    +
    +
    + +
    +
    +
    +
    + {{svg-jar "badge" height="50" width="50" stroke="white"}} +
    +
    {{t "admin.users_and_badges.labels.badges_earned"}}
    +
    + {{this.badgesUnlockedCount}} +
    + + {{t "admin.users_and_badges.buttons.view_all"}} + {{svg-jar "chevron-right" height="30"}} + +
    +
    +
    +
    +
    + +
    + +
    +
    +

    {{this.paginationSummary}}

    +
    + + +
    +
    +
    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + +
    {{t "admin.users_and_badges.table.header.name"}}{{t "admin.users_and_badges.table.header.points"}}{{t "admin.users_and_badges.table.header.badges"}}{{t "admin.users_and_badges.table.header.view"}}
    + 2000 + +
    +
    + +
    +
    + +
    +
    + +
    +
    +     		+ + {{t "admin.users_and_badges.buttons.view_user"}} + +
    + 2000 + +
    +
    + +
    +
    + +
    +
    + +
    +
    + 2+ +
    +
    +     		+ + {{t "admin.users_and_badges.buttons.view_user"}} + +
    +
    +
    + + +
    + +
      +
    • + + {{t "table.pagination.previous"}} +
      • +
    • + + {{t "table.pagination.next"}} + +
      • +
    +
    +
    +
    \ No newline at end of file diff --git a/frontend/app/templates/application.hbs b/frontend/app/templates/application.hbs index f43822044..35b90a23e 100644 --- a/frontend/app/templates/application.hbs +++ b/frontend/app/templates/application.hbs @@ -18,8 +18,8 @@ {{!-- --}} - - + + {{else }} {{outlet}} diff --git a/frontend/app/templates/leaderboard.hbs b/frontend/app/templates/leaderboard.hbs new file mode 100644 index 000000000..32d9ecc89 --- /dev/null +++ b/frontend/app/templates/leaderboard.hbs @@ -0,0 +1,186 @@ +
    +
    +
    +
    + {{t 'leaderboard.title'}} +
    +
    + + + +
    +
    + {{t 'leaderboard.subtitle'}} +
    + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + {{t 'leaderboard.table.header.user'}} + + {{t 'leaderboard.table.header.points'}} + + {{t 'leaderboard.table.header.badges'}} + + {{t 'leaderboard.table.header.action'}} +
    + + 4 + + + 1100 + +
    +
    + {{svg-jar 'badge1'}} +
    +
    + {{svg-jar 'badge2'}} +
    +
    + {{svg-jar 'badge3'}} +
    +
    + 2+ +
    +
    +     		+ {{!-- + {{t 'admin.users_and_badges.buttons.view_user'}} + --}} +
    + + 5 + + + 1000 + +
    +
    +
    + {{svg-jar 'badge1'}} +
    +
    + {{svg-jar 'badge2'}} +
    +
    + {{svg-jar 'badge3'}} +
    +
    +
    +     		+ {{!-- + {{t 'admin.users_and_badges.buttons.view_user'}} + --}} +
    +
    +
    + + +
    +
      +
    • + + {{t 'table.pagination.previous'}} + +
      • +
    • + + {{t 'table.pagination.next'}} + +
      • +
    +
    +
    +
    \ No newline at end of file diff --git a/frontend/public/images/badges/badge1.png b/frontend/public/images/badges/badge1.png new file mode 100644 index 000000000..5d20907fd Binary files /dev/null and b/frontend/public/images/badges/badge1.png differ diff --git a/frontend/public/images/confetti-1.svg b/frontend/public/images/confetti-1.svg new file mode 100644 index 000000000..a84d19ffa --- /dev/null +++ b/frontend/public/images/confetti-1.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/public/images/confetti.svg b/frontend/public/images/confetti.svg new file mode 100644 index 000000000..c260b136b --- /dev/null +++ b/frontend/public/images/confetti.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/public/images/icons/badge1.svg b/frontend/public/images/icons/badge1.svg new file mode 100644 index 000000000..b4063d2a7 --- /dev/null +++ b/frontend/public/images/icons/badge1.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/public/images/icons/badge2.svg b/frontend/public/images/icons/badge2.svg new file mode 100644 index 000000000..4ce086fdb --- /dev/null +++ b/frontend/public/images/icons/badge2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/public/images/icons/badge3.svg b/frontend/public/images/icons/badge3.svg new file mode 100644 index 000000000..af07c9dbc --- /dev/null +++ b/frontend/public/images/icons/badge3.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/public/images/icons/badge4.svg b/frontend/public/images/icons/badge4.svg new file mode 100644 index 000000000..6c0a760d1 --- /dev/null +++ b/frontend/public/images/icons/badge4.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/tests/integration/components/badge/achievement-test.js b/frontend/tests/integration/components/badge/achievement-test.js new file mode 100644 index 000000000..4d00087c7 --- /dev/null +++ b/frontend/tests/integration/components/badge/achievement-test.js @@ -0,0 +1,26 @@ +import { module, test } from 'qunit'; +import { setupRenderingTest } from 'ember-qunit'; +import { render } from '@ember/test-helpers'; +import { hbs } from 'ember-cli-htmlbars'; + +module('Integration | Component | badge/achievement', function(hooks) { + setupRenderingTest(hooks); + + test('it renders', async function(assert) { + // Set any properties with this.set('myProperty', 'value'); + // Handle any actions with this.set('myAction', function(val) { ... }); + + await render(hbs``); + + assert.equal(this.element.textContent.trim(), ''); + + // Template block usage: + await render(hbs` + + template block text + + `); + + assert.equal(this.element.textContent.trim(), 'template block text'); + }); +}); diff --git a/frontend/tests/unit/controllers/admin/badges/users-test.js b/frontend/tests/unit/controllers/admin/badges/users-test.js new file mode 100644 index 000000000..c17e443f8 --- /dev/null +++ b/frontend/tests/unit/controllers/admin/badges/users-test.js @@ -0,0 +1,12 @@ +import { module, test } from 'qunit'; +import { setupTest } from 'ember-qunit'; + +module('Unit | Controller | admin/badges/users', function (hooks) { + setupTest(hooks); + + // TODO: Replace this with your real tests. + test('it exists', function (assert) { + let controller = this.owner.lookup('controller:admin/badges/users'); + assert.ok(controller); + }); +}); diff --git a/frontend/tests/unit/controllers/leaderboard-test.js b/frontend/tests/unit/controllers/leaderboard-test.js new file mode 100644 index 000000000..11b40c308 --- /dev/null +++ b/frontend/tests/unit/controllers/leaderboard-test.js @@ -0,0 +1,12 @@ +import { module, test } from 'qunit'; +import { setupTest } from 'ember-qunit'; + +module('Unit | Controller | leaderboard', function (hooks) { + setupTest(hooks); + + // TODO: Replace this with your real tests. + test('it exists', function (assert) { + let controller = this.owner.lookup('controller:leaderboard'); + assert.ok(controller); + }); +}); diff --git a/frontend/tests/unit/models/badge-test.js b/frontend/tests/unit/models/badge-test.js new file mode 100644 index 000000000..0a90168b0 --- /dev/null +++ b/frontend/tests/unit/models/badge-test.js @@ -0,0 +1,13 @@ +import { module, test } from 'qunit'; +import { setupTest } from 'ember-qunit'; + +module('Unit | Model | badge', function (hooks) { + setupTest(hooks); + + // Replace this with your real tests. + test('it exists', function (assert) { + let store = this.owner.lookup('service:store'); + let model = store.createRecord('badge', {}); + assert.ok(model); + }); +}); diff --git a/frontend/tests/unit/routes/admin/badges/users-test.js b/frontend/tests/unit/routes/admin/badges/users-test.js new file mode 100644 index 000000000..83d32327b --- /dev/null +++ b/frontend/tests/unit/routes/admin/badges/users-test.js @@ -0,0 +1,11 @@ +import { module, test } from 'qunit'; +import { setupTest } from 'ember-qunit'; + +module('Unit | Route | admin/badges/users', function (hooks) { + setupTest(hooks); + + test('it exists', function (assert) { + let route = this.owner.lookup('route:admin/badges/users'); + assert.ok(route); + }); +}); diff --git a/frontend/tests/unit/routes/leaderboard-test.js b/frontend/tests/unit/routes/leaderboard-test.js new file mode 100644 index 000000000..56203f6eb --- /dev/null +++ b/frontend/tests/unit/routes/leaderboard-test.js @@ -0,0 +1,11 @@ +import { module, test } from 'qunit'; +import { setupTest } from 'ember-qunit'; + +module('Unit | Route | leaderboard', function (hooks) { + setupTest(hooks); + + test('it exists', function (assert) { + let route = this.owner.lookup('route:leaderboard'); + assert.ok(route); + }); +}); diff --git a/frontend/translations/badge/en-us.yaml b/frontend/translations/badge/en-us.yaml new file mode 100644 index 000000000..16ee19425 --- /dev/null +++ b/frontend/translations/badge/en-us.yaml @@ -0,0 +1,5 @@ +unlocked: + title: Yeey! you earned a badge! + points: "{numOfPoints} points earned" + publish: Publish + share: Share \ No newline at end of file diff --git a/frontend/translations/badge/sw-ke.yaml b/frontend/translations/badge/sw-ke.yaml new file mode 100644 index 000000000..a0665b421 --- /dev/null +++ b/frontend/translations/badge/sw-ke.yaml @@ -0,0 +1,3 @@ +unlocked: + title: Yeey! you earned a badge! + points: "{numOfPoints} points earned" \ No newline at end of file diff --git a/frontend/translations/en-us.yaml b/frontend/translations/en-us.yaml index 1374e7993..4d5875093 100644 --- a/frontend/translations/en-us.yaml +++ b/frontend/translations/en-us.yaml @@ -1,6 +1,7 @@ buttons: teach: Teach learn: Learn + leaderboard: Leaderboard login: Login logout: Logout signup: Sign Up diff --git a/frontend/translations/leaderboard/en-us.yaml b/frontend/translations/leaderboard/en-us.yaml new file mode 100644 index 000000000..cb0017c2d --- /dev/null +++ b/frontend/translations/leaderboard/en-us.yaml @@ -0,0 +1,13 @@ +title: Leaderboard +subtitle: Top gainers +earnedPoints: Points earned +table: + header: + user: People + points: Points earned + badges: Badges earned + action: view + +buttons: + view_profile: View profile + diff --git a/frontend/translations/leaderboard/sw-ke.yaml b/frontend/translations/leaderboard/sw-ke.yaml new file mode 100644 index 000000000..e69de29bb diff --git a/frontend/translations/sw-ke.yaml b/frontend/translations/sw-ke.yaml index f2f177af5..d9209ce32 100644 --- a/frontend/translations/sw-ke.yaml +++ b/frontend/translations/sw-ke.yaml @@ -1,6 +1,7 @@ buttons: teach: Fundisha learn: Soma + leaderboard: Ubao Wa Wanaoongoza login: Ingia logout: Toka signup: Jisajili diff --git a/frontend/yarn.lock b/frontend/yarn.lock index 31e197ad3..4310eb56b 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -278,7 +278,7 @@ dependencies: "@babel/types" "^7.16.0" -"@babel/helper-validator-identifier@^7.15.7": +"@babel/helper-validator-identifier@^7.14.9", "@babel/helper-validator-identifier@^7.15.7": version "7.15.7" resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.15.7.tgz#220df993bfe904a4a6b02ab4f3385a5ebf6e2389" integrity sha512-K4JvCtQqad9OY2+yTU8w+E82ywk/fe+ELNlt1G8z3bVGlZfn/hOcQQsUhGhW/N+tb3fxK800wLtKOE/aM0m72w== @@ -1055,7 +1055,7 @@ debug "^4.1.0" globals "^11.1.0" -"@babel/types@^7.1.6", "@babel/types@^7.12.1", "@babel/types@^7.15.4", "@babel/types@^7.16.0", "@babel/types@^7.4.4", "@babel/types@^7.7.0", "@babel/types@^7.7.2": +"@babel/types@^7.1.6", "@babel/types@^7.12.1", "@babel/types@^7.16.0", "@babel/types@^7.4.4", "@babel/types@^7.7.0", "@babel/types@^7.7.2": version "7.16.0" resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.16.0.tgz#db3b313804f96aadd0b776c4823e127ad67289ba" integrity sha512-PJgg/k3SdLsGb3hhisFvtLOw5ts113klrpLuIPtCJIU+BB24fqq6lf8RWqKJEjzqXR9AEH1rIb5XTqwBHB+kQg== @@ -1063,6 +1063,14 @@ "@babel/helper-validator-identifier" "^7.15.7" to-fast-properties "^2.0.0" +"@babel/types@^7.15.4": + version "7.15.6" + resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.15.6.tgz#99abdc48218b2881c058dd0a7ab05b99c9be758f" + integrity sha512-BPU+7QhqNjmWyDO0/vitH/CuhpV8ZmK1wpKva8nuyNF5MJfuRNWMc+hc14+u9xT93kvykMdncrJT19h74uB1Ig== + dependencies: + "@babel/helper-validator-identifier" "^7.14.9" + to-fast-properties "^2.0.0" + "@cnakazawa/watch@^1.0.3": version "1.0.4" resolved "https://registry.yarnpkg.com/@cnakazawa/watch/-/watch-1.0.4.tgz#f864ae85004d0fcab6f50be9141c4da368d1656a" @@ -4390,7 +4398,7 @@ browserslist@^3.2.6: caniuse-lite "^1.0.30000844" electron-to-chromium "^1.3.47" -browserslist@^4.0.0, browserslist@^4.12.0, browserslist@^4.17.5, browserslist@^4.17.6: +browserslist@^4.0.0, browserslist@^4.17.5, browserslist@^4.17.6: version "4.18.1" resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.18.1.tgz#60d3920f25b6860eb917c6c7b185576f4d8b017f" integrity sha512-8ScCzdpPwR2wQh8IT82CA2VgDwjHyqMovPBZSNH54+tm4Jk2pCuv90gmAdH6J84OCRWi0b4gMe6O6XPXuJnjgQ== @@ -4401,6 +4409,17 @@ browserslist@^4.0.0, browserslist@^4.12.0, browserslist@^4.17.5, browserslist@^4 node-releases "^2.0.1" picocolors "^1.0.0" +browserslist@^4.12.0: + version "4.17.1" + resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.17.1.tgz#a98d104f54af441290b7d592626dd541fa642eb9" + integrity sha512-aLD0ZMDSnF4lUt4ZDNgqi5BUn9BZ7YdQdI/cYlILrhdSSZJLU9aNZoD5/NBmM4SK34APB2e83MOsRt1EnkuyaQ== + dependencies: + caniuse-lite "^1.0.30001259" + electron-to-chromium "^1.3.846" + escalade "^3.1.1" + nanocolors "^0.1.5" + node-releases "^1.1.76" + bser@2.1.1: version "2.1.1" resolved "https://registry.yarnpkg.com/bser/-/bser-2.1.1.tgz#e6787da20ece9d07998533cfd9de6f5c38f4bc05" @@ -4559,11 +4578,18 @@ caniuse-api@^3.0.0: lodash.memoize "^4.1.2" lodash.uniq "^4.5.0" -caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000844, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001280: +caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000844, caniuse-lite@^1.0.30001280: version "1.0.30001282" resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001282.tgz#38c781ee0a90ccfe1fe7fefd00e43f5ffdcb96fd" integrity sha512-YhF/hG6nqBEllymSIjLtR2iWDDnChvhnVJqp+vloyt2tEHFG1yBR+ac2B/rOw0qOK0m0lEXU2dv4E/sMk5P9Kg== +caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001259: + version "1.0.30001260" + resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001260.tgz#e3be3f34ddad735ca4a2736fa9e768ef34316270" + integrity sha512-Fhjc/k8725ItmrvW5QomzxLeojewxvqiYCKeFcfFEhut28IVLdpHU19dneOmltZQIE5HNbawj1HYD+1f2bM1Dg== + dependencies: + nanocolors "^0.1.0" + capture-exit@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/capture-exit/-/capture-exit-2.0.0.tgz#fb953bfaebeb781f62898239dabb426d08a509a4" @@ -5657,6 +5683,11 @@ electron-to-chromium@^1.3.47, electron-to-chromium@^1.3.896: resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.906.tgz#144e212691e35fa8c294431e2ecb51e4b03f7577" integrity sha512-UjoECdcOYIVzWmrbtNnYpPrDuu+RtiO5W08Vdbid9ydGQMSdnqtJUtvOqQEAVQqpoXN9kSW9YnQufvzLQMYQOw== +electron-to-chromium@^1.3.846: + version "1.3.848" + resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.848.tgz#94cc196e496f33c0d71cd98561448f10018584cc" + integrity sha512-wchRyBcdcmibioggdO7CbMT5QQ4lXlN/g7Mkpf1K2zINidnqij6EVu94UIZ+h5nB2S9XD4bykqFv9LonAWLFyw== + elliptic@^6.5.3: version "6.5.4" resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.5.4.tgz#da37cebd31e79a1367e941b592ed1fbebd58abbb" @@ -9147,13 +9178,20 @@ is-callable@^1.1.4, is-callable@^1.2.4: resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.4.tgz#47301d58dd0259407865547853df6d61fe471945" integrity sha512-nsuwtxZfMX67Oryl9LCQ+upnC0Z0BgpwntpS89m1H/TLF0zNfzfLMV/9Wa/6MZsj0acpEjAO0KF1xT6ZdLl95w== -is-core-module@^2.2.0, is-core-module@^2.5.0: +is-core-module@^2.2.0: version "2.8.0" resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.8.0.tgz#0321336c3d0925e497fd97f5d95cb114a5ccd548" integrity sha512-vd15qHsaqrRL7dtH6QNuy0ndJmRDrS9HAM1CAiSifNUFv4x1a0CCVsj18hJ1mShxIG6T2i1sO78MkP56r0nYRw== dependencies: has "^1.0.3" +is-core-module@^2.5.0: + version "2.6.0" + resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.6.0.tgz#d7553b2526fe59b92ba3e40c8df757ec8a709e19" + integrity sha512-wShG8vs60jKfPWpF2KZRaAtvt3a20OAn7+IJ6hLPECpSABLcKtFKTTI4ZtH5QcBruBHlq+WsdHWyz0BCZW7svQ== + dependencies: + has "^1.0.3" + is-data-descriptor@^0.1.4: version "0.1.4" resolved "https://registry.yarnpkg.com/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz#0b5ee648388e2c860282e793f1856fec3f301b56" @@ -10646,6 +10684,11 @@ nan@^2.12.1: resolved "https://registry.yarnpkg.com/nan/-/nan-2.15.0.tgz#3f34a473ff18e15c1b5626b62903b5ad6e665fee" integrity sha512-8ZtvEnA2c5aYCZYd1cvgdnU6cqwixRoYg70xPLWUws5ORTa/lnw+u4amixRS/Ac5U5mQVgp9pnlSUnbNWFaWZQ== +nanocolors@^0.1.0, nanocolors@^0.1.5: + version "0.1.12" + resolved "https://registry.yarnpkg.com/nanocolors/-/nanocolors-0.1.12.tgz#8577482c58cbd7b5bb1681db4cf48f11a87fd5f6" + integrity sha512-2nMHqg1x5PU+unxX7PGY7AuYxl2qDx7PSrTRjizr8sxdd3l/3hBuWWaki62qmtYm2U5i4Z5E7GbjlyDFhs9/EQ== + nanoid@^3.1.30: version "3.2.0" resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.2.0.tgz#62667522da6673971cca916a6d3eff3f415ff80c" @@ -10761,6 +10804,11 @@ node-notifier@^9.0.1: uuid "^8.3.0" which "^2.0.2" +node-releases@^1.1.76: + version "1.1.76" + resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.76.tgz#df245b062b0cafbd5282ab6792f7dccc2d97f36e" + integrity sha512-9/IECtNr8dXNmPWmFXepT0/7o5eolGesHUa3mtr0KlgnCvnZxwh2qensKL42JJY2vQKC3nIBXetFAqR+PW1CmA== + node-releases@^2.0.1: version "2.0.1" resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.1.tgz#3d1d395f204f1f2f29a54358b9fb678765ad2fc5" diff --git a/server/db/migrations/20210918171859_user_badges_table.js b/server/db/migrations/20210918171859_user_badges_table.js new file mode 100644 index 000000000..ffea9d2f5 --- /dev/null +++ b/server/db/migrations/20210918171859_user_badges_table.js @@ -0,0 +1,19 @@ +const { idGenerator } = require('../id_generator'); + +exports.up = (knex) => { + return knex.schema + .raw(idGenerator) + .createTable('user_badges', table => { + table.text('id').primary().notNullable().defaultTo(knex.raw('next_id()')); + table.text('badge_id').references('badges.id').onDelete('CASCADE'); + table.text('user_id').references('users.id').onDelete('CASCADE'); + table.timestamps(); // date created == date awarded + }); + + +}; + +exports.down = (knex) => { + return knex.schema + .dropTableIfExists('user_badges'); +}; diff --git a/server/db/seeds/dev/badges.js b/server/db/seeds/dev/21_badges.js similarity index 100% rename from server/db/seeds/dev/badges.js rename to server/db/seeds/dev/21_badges.js diff --git a/server/db/seeds/dev/22_user_badges.js b/server/db/seeds/dev/22_user_badges.js new file mode 100644 index 000000000..c663768a4 --- /dev/null +++ b/server/db/seeds/dev/22_user_badges.js @@ -0,0 +1,30 @@ +const { faker, seed_number } = require('../_seeds'); +const BadgeModel = require('../../../models/badges'); +const UserBadgeModel = require('../../../models/user-badge'); +const UserModel = require('../../../models/user'); + +exports.seed = async (knex) => { + // Deletes ALL existing entries + await knex(UserBadgeModel.tableName).del(); + + const userIds = await knex(UserModel.tableName).pluck('id'); + const badgesIds = await knex(BadgeModel.tableName).pluck('id'); + + const userAwardedBadges = []; + + for (let index = 0; index < seed_number; index++) { + const dateUnlocked = faker.date.past(); + + userAwardedBadges.push({ + badge_id: faker.random.arrayElement(badgesIds), + user_id: faker.random.arrayElement(userIds), + created_at: dateUnlocked, + updated_at: faker.datatype.boolean() ? dateUnlocked : faker.date.recent(), + }); + } + + // Inserts seed entries + return knex(UserBadgeModel.tableName).insert(userAwardedBadges); +}; + + diff --git a/server/event-handlers/badge-awarding.js b/server/event-handlers/badge-awarding.js new file mode 100644 index 000000000..c8a5a7ae8 --- /dev/null +++ b/server/event-handlers/badge-awarding.js @@ -0,0 +1,358 @@ +const { raw } = require('objection'); + +const NotificationModel = require('../models/notification'); +const BadgeModel = require('../models/badges'); +const UserBadgeModel = require('../models/user-badge'); +const { notificationTypes } = require('../utils/notification-constants'); +const { events } = require('../utils/storage-hooks-events'); +const { SHooksEventEmitter } = require('../utils/event-emitter'); + +module.exports = () => { + + const triggers = { + learner: { + chapter: { + approved: 'chapter_approved', + published: 'chapter_publish', + completed: 'chapter_completed', + attempted: 'chapter_attempted', + }, + comment: { + create: 'comment_create', + reply: 'comment_reply', + }, + reaction: { + create: 'reaction_create', + }, + rating: { + create: 'rating_create' + } + } + }; + + /** + * On Chapter Approved + */ + SHooksEventEmitter.on(events.user.chapter.countOnApproved, async (payload) => { + /** 1) query all badges that user might have unlocked * */ + const badges = await BadgeModel.query() + .where('frequency', payload.total) + .where('published', true) // paying attention to published badges only + .where('expiry', '>=', raw('now()')) // only query non expired badges (ignores time region difference challenge_) + .withGraphJoined('badge_triggers') + .where('badge_triggers.name', triggers.learner.chapter.approved) + .withGraphJoined('badge_awardees') + .where((builder) => { + builder.where('badge_awardees.userId', '<>', payload.creatorId) + .orWhereNull('badge_awardees.userId'); + }); + + + /** 2) for all badges the user have unlocked **/ + for (let i = 0; i < badges.length; i++) { + + /** 3) Create a notification for the chapter author **/ + await NotificationModel.query() + .insert({ + title: 'You have earned a new badge', + body: badges[i].name, + itemId: badges[i].id, + eventType: notificationTypes.badge.unlocked, + model: 'badge', + recipientId: payload.creatorId, + read: false, + }); + + + /** 4) Add activity record (badge that user has unlocked) **/ + await UserBadgeModel.query() + .insert({ + badgeId: badges[i].id, + userId: payload.creatorId + }); + } + + }); + + /** + * On chapter published + */ + SHooksEventEmitter.on(events.user.chapter.countOnPublished, async (payload) => { + const badges = await BadgeModel.query() + .where('frequency', payload.total) + .where('published', true) // paying attention to published badges only + .where('is_deleted', false) // badges deleted through the api are partially deleted + .where('expiry', '>=', raw('now()')) + .withGraphJoined('badge_triggers') + .where('badge_triggers.name', triggers.learner.chapter.published) + .withGraphJoined('badge_awardees') + .where((builder) => { + builder.where('badge_awardees.userId', '<>', payload.creatorId) + .orWhereNull('badge_awardees.userId'); + }); + + + for (let i = 0; i < badges.length; i++) { + //add a notification + await NotificationModel.query() + .insert({ + title: 'You have earned a new badge', + body: badges[i].name, + itemId: badges[i].id, + eventType: notificationTypes.badge.unlocked, + model: 'badge', + recipientId: payload.creatorId, + read: false, + }); + + await UserBadgeModel.query() + .insert({ + badgeId: badges[i].id, + userId: payload.creatorId + }); + } + + }); + /** + * On Comment create + */ + + SHooksEventEmitter.on(events.user.comment.countOnCreate, async (payload) => { + const badges = await BadgeModel.query() + .where('frequency', payload.total) + .where('published', true) + .where('is_deleted', false) + .where('expiry', '>=', raw('now()')) + .withGraphJoined('badge_triggers') + .where('badge_triggers.name', triggers.learner.comment.create) + .withGraphJoined('badge_awardees') + .where((builder) => { + builder.where('badge_awardees.userId', '<>', payload.creatorId) + .orWhereNull('badge_awardees.userId'); + }); + + for (let i = 0; i < badges.length; i++) { + //add a notification + await NotificationModel.query() + .insert({ + title: 'You have earned a new badge', + body: badges[i].name, + itemId: badges[i].id, + eventType: notificationTypes.badge.unlocked, + model: 'badge', + recipientId: payload.creatorId, + read: false, + }); + + await UserBadgeModel.query() + .insert({ + badgeId: badges[i].id, + userId: payload.creatorId + }); + } + + + }); + + /** + * On Reply create + */ + SHooksEventEmitter.on(events.user.reply.countOnCreate, async (payload) => { + + const badges = await BadgeModel.query() + .where('frequency', payload.total) + .where('published', true) + .where('is_deleted', false) + .where('expiry', '>=', raw('now()')) + .withGraphJoined('badge_triggers') + .where('badge_triggers.name', triggers.learner.comment.reply) + .withGraphJoined('badge_awardees') + .where((builder) => { + builder.where('badge_awardees.userId', '<>', payload.creatorId) + .orWhereNull('badge_awardees.userId'); + }); + + for (let i = 0; i < badges.length; i++) { + //add a notification + await NotificationModel.query() + .insert({ + title: 'You have earned a new badge', + body: badges[i].name, + itemId: badges[i].id, + eventType: notificationTypes.badge.unlocked, + model: 'badge', + recipientId: payload.creatorId, + read: false, + }); + + await UserBadgeModel.query() + .insert({ + badgeId: badges[i].id, + userId: payload.creatorId + }); + } + + }); + + /** + * On reaction created + */ + SHooksEventEmitter.on(events.user.reaction.countOnCreate, async (payload) => { + + const badges = await BadgeModel.query() + .where('frequency', payload.totalReactions) + .where('published', true) + .where('is_deleted', false) + .where('expiry', '>=', raw('now()')) + .withGraphJoined('badge_triggers') + .where('badge_triggers.name', triggers.learner.reaction.create) + .withGraphJoined('badge_awardees') + .where((builder) => { + builder.where('badge_awardees.userId', '<>', payload.creatorId) + .orWhereNull('badge_awardees.userId'); + }); + + for (let i = 0; i < badges.length; i++) { + //add a notification + await NotificationModel.query() + .insert({ + title: 'You have earned a new badge', + body: badges[i].name, + itemId: badges[i].id, + eventType: notificationTypes.badge.unlocked, + model: 'badge', + recipientId: payload.creatorId, + read: false, + }); + + await UserBadgeModel.query() + .insert({ + badgeId: badges[i].id, + userId: payload.creatorId + }); + } + }); + + /** + * On ratings created + */ + SHooksEventEmitter.on(events.user.rating.countOnCreate, async (payload) => { + const badges = await BadgeModel.query() + .where('frequency', payload.totalRatings) + .where('published', true) + .where('is_deleted', false) + .where('expiry', '>=', raw('now()')) + .withGraphJoined('badge_triggers') + .where('badge_triggers.name', triggers.learner.rating.create) + .withGraphJoined('badge_awardees') + .where((builder) => { + builder.where('badge_awardees.userId', '<>', payload.creatorId) + .orWhereNull('badge_awardees.userId'); + }); + + for (let i = 0; i < badges.length; i++) { + await NotificationModel.query() + .insert({ + title: 'You have earned a new badge', + body: badges[i].name, + itemId: badges[i].id, + eventType: notificationTypes.badge.unlocked, + model: 'badge', + recipientId: payload.creatorId, + read: false, + }); + + await UserBadgeModel.query() + .insert({ + badgeId: badges[i].id, + userId: payload.creatorId + }); + } + + }); + + + /** + * On chapter attempted + */ + SHooksEventEmitter.on(events.user.chapter.countOnInteractionAttempt, async (payload) => { + + const badges = await BadgeModel.query() + .where('frequency', payload.total) + .where('published', true) + .where('is_deleted', false) + .where('expiry', '>=', raw('now()')) + .withGraphJoined('badge_triggers') + .where('badge_triggers.name', triggers.learner.chapter.attempted) + .withGraphJoined('badge_awardees') + .where((builder) => { + builder.where('badge_awardees.userId', '<>', payload.creatorId) + .orWhereNull('badge_awardees.userId'); + }); + + for (let i = 0; i < badges.length; i++) { + //add a notification + await NotificationModel.query() + .insert({ + title: 'You have earned a new badge', + body: badges[i].name, + itemId: badges[i].id, + eventType: notificationTypes.badge.unlocked, + model: 'badge', + recipientId: payload.creatorId, + read: false, + metadata: { sendEmail: false }, + }); + + await UserBadgeModel.query() + .insert({ + badgeId: badges[i].id, + userId: payload.creatorId + }); + } + + }); + + /** + * On chapter completed + */ + SHooksEventEmitter.on(events.user.chapter.countOnInteractionComplete, async (payload) => { + + const badges = await BadgeModel.query() + .where('frequency', payload.total) + .where('published', true) + .where('is_deleted', false) + .where('expiry', '>=', raw('now()')) + .withGraphJoined('badge_triggers') + .where('badge_triggers.name', triggers.learner.chapter.completed) + .withGraphJoined('badge_awardees') + .where((builder) => { + builder.where('badge_awardees.userId', '<>', payload.creatorId) + .orWhereNull('badge_awardees.userId'); + }); + + for (let i = 0; i < badges.length; i++) { + //add a notification + await NotificationModel.query() + .insert({ + title: 'You have earned a new badge', + body: badges[i].name, + itemId: badges[i].id, + eventType: notificationTypes.badge.unlocked, + model: 'badge', + recipientId: payload.creatorId, + read: false, + metadata: { sendEmail: false }, + }); + + await UserBadgeModel.query() + .insert({ + badgeId: badges[i].id, + userId: payload.creatorId + }); + } + + }); + + +}; \ No newline at end of file diff --git a/server/event-handlers/socket-events.js b/server/event-handlers/socket-events.js index da9862069..95c6bc25f 100644 --- a/server/event-handlers/socket-events.js +++ b/server/event-handlers/socket-events.js @@ -123,5 +123,9 @@ module.exports = (io) => { socketEventEmitter.on(events.user.comment.created, (payload) => { io.to(socketChannel.learners).emit(events.user.comment.created, payload); }); + + socketEventEmitter.on(events.user.badge.unlocked, (payload) => { + io.to(socketChannel.learners).emit(events.user.badge.unlocked, payload); + }); return io; }; \ No newline at end of file diff --git a/server/index.js b/server/index.js index 07158a74c..a6a30fde0 100644 --- a/server/index.js +++ b/server/index.js @@ -38,6 +38,7 @@ const io = socketIO(server); require('./event-handlers/socket-events')(io); require('./event-handlers/mne-surveys')(); +require('./event-handlers/badge-awarding')(); diff --git a/server/models/badges.js b/server/models/badges.js index 7c872d43c..52ef08b91 100644 --- a/server/models/badges.js +++ b/server/models/badges.js @@ -32,10 +32,18 @@ class Badge extends softDelete({ columnName: 'is_deleted' })(Model) { relation: Model.BelongsToOneRelation, modelClass: `${__dirname}/badge_triggers`, join: { - from: 'badges.trigger', - to: 'badge_triggers.id' + from: 'badge_triggers.id', + to: 'badges.trigger_id' } - } + }, + badge_awardees: { + relation: Model.HasManyRelation, + modelClass: `${__dirname}/user-badge`, + join: { + from: 'badges.id', + to: 'user_badges.badge_id' + } + }, }; } } diff --git a/server/models/user-badge.js b/server/models/user-badge.js new file mode 100644 index 000000000..25d298ae9 --- /dev/null +++ b/server/models/user-badge.js @@ -0,0 +1,51 @@ +const Model = require('./_model'); +const knex = require('../db/db'); +const {socketEventEmitter} = require('../utils/event-emitter'); +const {events} = require('../utils/socket-events'); + +class UserBadge extends Model { + static get tableName() { + return 'user_badges'; + } + + + static get jsonSchema() { + return { + type: 'object', + required: ['badgeId', 'userId'], + properties: { + badgeId: {type: 'string'}, + userId: {type: 'string'}, + }, + }; + } + + static get relationMappings() { + return { + badge: { + relation: Model.BelongsToOneRelation, + modelClass: `${__dirname}/badges`, + join: { + from: 'user_badges.badge_id', + to: 'badges.id' + } + }, + user: { + relation: Model.BelongsToOneRelation, + modelClass: `${__dirname}/users`, + join: { + from: 'user_badges.user_id', + to: 'users.id' + } + }, + }; + } + + async $afterInsert(){ + await super.$afterInsert(); + socketEventEmitter.emit(events.user.badge.unlocked, this); + } +} + +UserBadge.knex(knex); +module.exports = UserBadge; diff --git a/server/models/user-survey.js b/server/models/user-survey.js index 25dc0c0f7..5c11bae51 100644 --- a/server/models/user-survey.js +++ b/server/models/user-survey.js @@ -6,6 +6,17 @@ class UserSurvey extends Model { return 'user_surveys'; } + static get jsonSchema() { + return { + type: 'object', + required: ['surveyId', 'userId'], + properties: { + surveyId: {type: 'string'}, + userId: {type: 'string'}, + }, + }; + } + static get relationMappings() { return { survey: { @@ -20,7 +31,7 @@ class UserSurvey extends Model { relation: Model.BelongsToOneRelation, modelClass: `${__dirname}/users`, join: { - from: 'user_surveys.creator_id', + from: 'user_surveys.user_id', to: 'users.id' } }, diff --git a/server/models/user.js b/server/models/user.js index 94d767202..cff759cc9 100644 --- a/server/models/user.js +++ b/server/models/user.js @@ -169,21 +169,34 @@ class User extends Model { to: 'courses.creatorId' } }, - - + badgesAwarded: { + relation: Model.ManyToManyRelation, + modelClass: __dirname + '/badges', + join: { + from: 'users.id', + through: { + from: 'user_badges.user_id', + to: 'user_badges.badge_id', + extra: { + user_badge_id: 'id' + } + }, + to: 'badges.id' + } + } }; } static get modifiers() { return { selectNameAndId: (builder) => { - builder.select('users.id', 'name'); + builder.select('users.id', 'users.name'); }, selectNameAndProfile: (builder) => { - builder.select('username', 'profileUri'); + builder.select('users.username', 'users.profileUri'); }, - selectBasicInfo: (query) => { - query.select('users.id', 'username', 'metadata', 'profileUri','email'); + selectBasicInfo: (query) => { // metadata is required to build correct user's name + query.select('users.id', 'users.username', 'users.metadata', 'users.profileUri','users.email'); }, }; } diff --git a/server/routes/leaderboard.js b/server/routes/leaderboard.js new file mode 100644 index 000000000..3b5db205d --- /dev/null +++ b/server/routes/leaderboard.js @@ -0,0 +1,32 @@ +const Router = require('koa-router'); +const {requireAuth, grantAccess} = require('../middleware/permController'); +const User = require('../models/user'); + +const router = new Router({ + prefix: '/leaderboard' +}); + + +/** + * @api {get} /api/v1/groups GET all user groups + * @apiName Get user groups + * @apiGroup Group + * @apiPermission authenticated user[moderator/admin/superadmin] + * @apiVersion 0.4.0 + * + * @apiHeader {String} Authorization Bearer << JWT here>> + * + */ + +router.get('/', requireAuth, async ctx => { + const users = await User.query() + .withGraphJoined('badgesAwarded', {joinOperation: 'rightJoin'}) + .modify('selectBasicInfo'); //select only user basic info + + + ctx.status = 200; + ctx.body = {users}; +}); + + +module.exports = router.routes(); diff --git a/server/server.js b/server/server.js index f80e4ddda..1f89cf4ca 100644 --- a/server/server.js +++ b/server/server.js @@ -93,6 +93,8 @@ router.use(jwt.authenticate, require('./routes/tag-followers')); router.use(jwt.authenticate, require('./routes/course-enrollments')); +router.use(jwt.authenticate, require('./routes/leaderboard')); + router.use(require('./routes/search')); diff --git a/server/test/badge-awarding.js b/server/test/badge-awarding.js new file mode 100644 index 000000000..080732bab --- /dev/null +++ b/server/test/badge-awarding.js @@ -0,0 +1,215 @@ +const chai = require('chai'); +const chaiHttp = require('chai-http'); +const chaiJSON = require('chai-json-schema'); + +const knex = require('../db/db'); +const triggerModel = require('../models/triggers'); +const userModel = require('../models/user'); +const badgeModel = require('../models/badges'); +const chapterModel = require('../models/chapter'); +const commentModel = require('../models/comment'); +const reactionModel = require('../models/reaction'); +const ratingModel = require('../models/rating'); +const { socketEventEmitter } = require('../utils/event-emitter'); +const { events } = require('../utils/socket-events'); +const { notificationTypes } = require('../utils/notification-constants'); + + +chai.use(chaiHttp); +chai.use(chaiJSON); +chai.should(); + + +describe('User badges awarding', () => { + + before(async () => { + + await knex.migrate.rollback(); //reset tables + await knex.migrate.latest(); // rerun the migrations + //seed users only + await knex.seed.run({ + specific: '01_users.js' + }); + const triggers = await knex(triggerModel.tableName).select('id'); + const userIds = await knex(userModel.tableName).select('id'); + + // seed badges with static data + const badges = []; + for (let i = 0; i < triggers.length; i++) { + badges.push({ + name: `Test Badge ${i}`, + slug: `test-badge-${i}`, + published: true, + expiry: new Date(new Date().setFullYear(new Date().getFullYear() + 1)), + frequency: 1, // we will test with one X + trigger_id: triggers[i].id, + creator_id: userIds[0].id, + description: 'Test description', + is_deleted: false, + reminder: 10, + reminder_message: 'This is a sample reminder message', + }); + } + await knex(badgeModel.tableName).insert(badges); + }); + + + async function createChapter() { + await knex(chapterModel.tableName).delete(); + const userIds = await knex(userModel.tableName).select('id'); + + const chapter = { + name: 'This is a test chapter', + description: 'test', + approved: false, + status: 'draft', + creatorId: userIds[0].id + }; + return await chapterModel.query().insertAndFetch(chapter); + } + + it('Should unlock a badge on publishing a chapter', async () => { + + const chapter = await createChapter(); + + await chapterModel.query() + .patchAndFetchById(chapter.id, { + status: 'published' + }); + + return new Promise(((resolve, reject) => { + socketEventEmitter.on(events.user.notification.created, (model) => { + if (model.eventType === notificationTypes.badge.unlocked) { + resolve(true); + } else { + reject('Invalid notification type'); + } + }); + })); + + }); + + it('Should unlock a badge on chapter approval', async () => { + + const chapter = await createChapter(); + + await chapterModel.query() + .patchAndFetchById(chapter.id, { + approved: true, + status: 'published' + }); + + return new Promise(((resolve, reject) => { + socketEventEmitter.on(events.user.notification.created, (model) => { + if (model.eventType === notificationTypes.badge.unlocked) { + resolve(true); + } else { + reject('Invalid notification type'); + } + }); + })); + + }); + + it('Should unlock a badge on chapter comment creation', async () => { + + const chapter = await createChapter(); + const userIds = await knex(userModel.tableName).select('id'); + + await commentModel.query() + .insert({ + chapterId: chapter.id, + comment: 'Test comment', + creatorId: userIds[0].id, + }); + + return new Promise(((resolve, reject) => { + socketEventEmitter.on(events.user.notification.created, (model) => { + if (model.eventType === notificationTypes.badge.unlocked) { + resolve(true); + } else { + reject('Invalid notification type'); + } + }); + })); + + }); + + it('Should unlock a badge on comment reply creation', async () => { + + const chapter = await createChapter(); + const userIds = await knex(userModel.tableName).select('id'); + const commentIds = await knex(commentModel.tableName).select('id') + .where('parent_id', 'false'); + + await commentModel.query() + .insert({ + chapterId: chapter.id, + comment: 'Test reply', + parentId: commentIds[0] ? commentIds[0].id : 'follow', + creatorId: userIds[0].id, + }); + + return new Promise(((resolve, reject) => { + socketEventEmitter.on(events.user.notification.created, (model) => { + if (model.eventType === notificationTypes.badge.unlocked) { + resolve(true); + } else { + reject('Invalid notification type'); + } + }); + })); + + }); + + it('Should unlock a badge on chapter reaction creation', async () => { + + const chapter = await createChapter(); + const userIds = await knex(userModel.tableName).select('id'); + + await reactionModel.query() + .insert({ + chapterId: chapter.id, + reaction: 'like', + userId: userIds[0].id, + }); + + return new Promise(((resolve, reject) => { + socketEventEmitter.on(events.user.notification.created, (model) => { + if (model.eventType === notificationTypes.badge.unlocked) { + resolve(true); + } else { + reject('Invalid notification type'); + } + }); + })); + + }); + + it('Should unlock a badge on chapter rating creation', async () => { + + const chapter = await createChapter(); + const userIds = await knex(userModel.tableName).select('id'); + + await ratingModel.query() + .insert({ + chapterId: chapter.id, + userId: userIds[0].id, + averageRating: 10, + reaction: 'like', + isDeleted: false, + }); + + return new Promise((resolve => { + socketEventEmitter.on(events.user.notification.created, () => { + resolve(false); + }); + })); + + }); + + after(async () => { + await knex.migrate.latest(); + return await knex.seed.run(); + }); +}); \ No newline at end of file