Skip to content

Commit

Permalink
Merge pull request #12711 from LianaHarris360/reports-learnerlist
Browse files Browse the repository at this point in the history
Update UI and add additional info to Learner Reports pages
  • Loading branch information
LianaHarris360 authored Oct 17, 2024
2 parents aa97a15 + 0e08b02 commit e1514b0
Show file tree
Hide file tree
Showing 6 changed files with 303 additions and 120 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -141,6 +141,11 @@ const coachStrings = createTranslator('CommonCoachStrings', {
context:
'Exercises are marked as completed when the learner has answered the required number of questions correctly in that specific exercise.',
},
lessonsCompletedLabel: {
message: 'Lessons completed',
context:
'Lessons are marked as completed when the learner has answered the required number of questions correctly in that specific lesson.',
},
filterLessonAll: {
message: 'All',
context:
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,10 @@
/>
</p>
<h1>{{ reportTitle }}</h1>
<p v-show="!$isPrint">
{{ $tr('description') }}
</p>
<slot name="header"></slot>
<div v-if="!$slots.header && !$isPrint">
<p>{{ $tr('description') }}</p>
</div>
<HeaderTabs :style="{ marginTop: '28px' }">
<KTabsList
ref="tabsList"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,20 @@

<CoachAppBarPage>
<KPageContainer>
<ReportsLearnerHeader
:enablePrint="true"
:activeTabId="ReportsLearnersTabs.ACTIVITY"
/>
<ReportsLearnerHeader />
</KPageContainer>

<KPageContainer>
<HeaderTabs :enablePrint="true">
<KTabsList
ref="tabList"
:tabsId="REPORTS_LEARNERS_TABS_ID"
:ariaLabel="$tr('reportLearners')"
:activeTabId="ReportsLearnersTabs.ACTIVITY"
:tabs="tabs"
@click="() => saveTabsClick(REPORTS_LEARNERS_TABS_ID)"
/>
</HeaderTabs>
<KTabsPanel
:tabsId="REPORTS_LEARNERS_TABS_ID"
:activeTabId="ReportsLearnersTabs.ACTIVITY"
Expand All @@ -27,6 +37,7 @@
import CoachAppBarPage from '../CoachAppBarPage';
import ActivityList from '../common/notifications/ActivityList';
import { REPORTS_LEARNERS_TABS_ID, ReportsLearnersTabs } from '../../constants/tabsConstants';
import { useCoachTabs } from '../../composables/useCoachTabs';
import ReportsLearnerHeader from './ReportsLearnerHeader';
export default {
Expand All @@ -37,12 +48,53 @@
ReportsLearnerHeader,
},
mixins: [commonCoach],
setup() {
const { saveTabsClick, wereTabsClickedRecently } = useCoachTabs();
return {
saveTabsClick,
wereTabsClickedRecently,
};
},
data() {
return {
REPORTS_LEARNERS_TABS_ID,
ReportsLearnersTabs,
};
},
computed: {
tabs() {
return [
{
id: ReportsLearnersTabs.REPORTS,
label: this.coachString('reportsLabel'),
to: this.classRoute('ReportsLearnerReportPage', {}),
},
{
id: ReportsLearnersTabs.ACTIVITY,
label: this.coachString('activityLabel'),
to: this.classRoute('ReportsLearnerActivityPage', {}),
},
];
},
},
mounted() {
// focus the active tab but only when it's likely
// that this header was re-mounted as a result
// of navigation after clicking a tab (focus shouldn't
// be manipulated programatically in other cases, e.g.
// when visiting the page for the first time)
if (this.wereTabsClickedRecently(this.REPORTS_LEARNERS_TABS_ID)) {
this.$nextTick(() => {
this.$refs.tabList.focusActiveTab();
});
}
},
$trs: {
reportLearners: {
message: 'Report learners',
context: 'Labels the Reports > Learners tab for screen reader users',
},
},
};
</script>
Expand Down
Loading

0 comments on commit e1514b0

Please sign in to comment.