diff --git a/client/app/bundles/course/achievement/components/tables/AchievementTable.tsx b/client/app/bundles/course/achievement/components/tables/AchievementTable.tsx index 8f76b328e73..632fb155b6a 100644 --- a/client/app/bundles/course/achievement/components/tables/AchievementTable.tsx +++ b/client/app/bundles/course/achievement/components/tables/AchievementTable.tsx @@ -1,5 +1,5 @@ import { FC, memo } from 'react'; -import { defineMessages, FormattedMessage } from 'react-intl'; +import { defineMessages, FormattedMessage, useIntl } from 'react-intl'; import { DragIndicator } from '@mui/icons-material'; import { Switch, Typography } from '@mui/material'; import equal from 'fast-deep-equal'; @@ -30,6 +30,30 @@ const translations = defineMessages({ id: 'course.achievement.AchievementTable.noAchievement', defaultMessage: 'No achievement', }, + badge: { + id: 'course.achievement.AchievementTable.badge', + defaultMessage: 'Badge', + }, + title: { + id: 'course.achievement.AchievementTable.title', + defaultMessage: 'Title', + }, + description: { + id: 'course.achievement.AchievementTable.description', + defaultMessage: 'Description', + }, + requirements: { + id: 'course.achievement.AchievementTable.requirements', + defaultMessage: 'Requirements', + }, + published: { + id: 'course.achievement.AchievementTable.published', + defaultMessage: 'Published', + }, + actions: { + id: 'course.achievement.AchievementTable.actions', + defaultMessage: 'Actions', + }, }); const styles = { @@ -42,6 +66,7 @@ const styles = { const AchievementTable: FC = (props) => { const { achievements, permissions, onTogglePublished, isReordering } = props; + const { formatMessage: t } = useIntl(); if (achievements && achievements.length === 0) { return ( @@ -104,7 +129,7 @@ const AchievementTable: FC = (props) => { }, { name: 'badge', - label: 'Badge', + label: t(translations.badge), options: { filter: false, sort: false, @@ -128,7 +153,7 @@ const AchievementTable: FC = (props) => { }, { name: 'title', - label: 'Title', + label: t(translations.title), options: { filter: false, sort: false, @@ -149,7 +174,7 @@ const AchievementTable: FC = (props) => { }, { name: 'description', - label: 'Description', + label: t(translations.description), options: { filter: false, sort: false, @@ -170,7 +195,7 @@ const AchievementTable: FC = (props) => { }, { name: 'conditions', - label: 'Requirements', + label: t(translations.requirements), options: { filter: false, sort: false, @@ -194,7 +219,7 @@ const AchievementTable: FC = (props) => { if (permissions?.canManage) { columns.push({ name: 'published', - label: 'Published', + label: t(translations.published), options: { filter: false, sort: false, @@ -218,7 +243,7 @@ const AchievementTable: FC = (props) => { }); columns.push({ name: 'id', - label: 'Actions', + label: t(translations.actions), options: { filter: false, sort: false, diff --git a/client/app/bundles/course/achievement/pages/AchievementAward/AchievementAwardManager.tsx b/client/app/bundles/course/achievement/pages/AchievementAward/AchievementAwardManager.tsx index 13f76f2b1d3..02b7ef44edc 100644 --- a/client/app/bundles/course/achievement/pages/AchievementAward/AchievementAwardManager.tsx +++ b/client/app/bundles/course/achievement/pages/AchievementAward/AchievementAwardManager.tsx @@ -77,7 +77,7 @@ const translations = defineMessages({ id: 'course.achievement.AchievementAward.AchievementAwardManager.note', defaultMessage: 'If an Achievement has conditions associated with it, \ - Coursemology will automatically award achievements when the student meets those conditions. ', + Coursemology will automatically award achievements when the student meets those conditions. ', }, noUser: { id: 'course.achievement.AchievementAward.AchievementAwardManager.noUser', @@ -242,7 +242,7 @@ const AchievementAwardManager: FC = (props) => { }, { name: 'id', - label: 'Obtained Achievement', + label: columnHeadLabelAchievement, options: { filter: false, search: false, diff --git a/client/app/bundles/course/achievement/pages/AchievementAward/AchievementAwardSummary.tsx b/client/app/bundles/course/achievement/pages/AchievementAward/AchievementAwardSummary.tsx index 93b442b8a82..042202cfcec 100644 --- a/client/app/bundles/course/achievement/pages/AchievementAward/AchievementAwardSummary.tsx +++ b/client/app/bundles/course/achievement/pages/AchievementAward/AchievementAwardSummary.tsx @@ -1,4 +1,5 @@ import { FC } from 'react'; +import { defineMessages, useIntl } from 'react-intl'; import { Grid } from '@mui/material'; import { green, red } from '@mui/material/colors'; import { TableColumns, TableOptions } from 'types/components/DataTable'; @@ -12,8 +13,36 @@ interface Props { selectedUserIds: Set; } +const translations = defineMessages({ + name: { + id: 'course.achievement.AchievementAward.AchievementAwardSummary.name', + defaultMessage: 'Name', + }, + userType: { + id: 'course.achievement.AchievementAward.AchievementAwardSummary.userType', + defaultMessage: 'User Type', + }, + awardedStudents: { + id: 'course.achievement.AchievementAward.AchievementAwardSummary.awardedStudents', + defaultMessage: 'Awarded Students', + }, + revokedStudents: { + id: 'course.achievement.AchievementAward.AchievementAwardSummary.revokedStudents', + defaultMessage: 'Revoked Students', + }, + phantomStudent: { + id: 'course.achievement.AchievementAward.AchievementAwardSummary.phantomStudent', + defaultMessage: 'Phantom Student', + }, + normalStudent: { + id: 'course.achievement.AchievementAward.AchievementAwardSummary.normalStudent', + defaultMessage: 'Normal Student', + }, +}); + const AchievementAwardSummary: FC = (props) => { const { achievementUsers, initialObtainedUserIds, selectedUserIds } = props; + const { formatMessage: t } = useIntl(); const removedUserIds = new Set( [...initialObtainedUserIds].filter( @@ -57,22 +86,21 @@ const AchievementAwardSummary: FC = (props) => { const awardedTableColumns: TableColumns[] = [ { name: 'name', - label: 'Name', + label: t(translations.name), options: { filter: false, }, }, { name: 'phantom', - label: 'User Type', + label: t(translations.userType), options: { search: false, customBodyRenderLite: (dataIndex): string => { const isPhantom = awardedUsers[dataIndex].phantom; - if (isPhantom) { - return 'Phantom Student'; - } - return 'Normal Student'; + return isPhantom + ? t(translations.phantomStudent) + : t(translations.normalStudent); }, }, }, @@ -81,22 +109,21 @@ const AchievementAwardSummary: FC = (props) => { const removedTableColumns: TableColumns[] = [ { name: 'name', - label: 'Name', + label: t(translations.name), options: { filter: false, }, }, { name: 'phantom', - label: 'User Type', + label: t(translations.userType), options: { search: false, customBodyRenderLite: (dataIndex): string => { const isPhantom = removedUsers[dataIndex].phantom; - if (isPhantom) { - return 'Phantom Student'; - } - return 'Normal Student'; + return isPhantom + ? t(translations.phantomStudent) + : t(translations.normalStudent); }, }, }, @@ -109,7 +136,7 @@ const AchievementAwardSummary: FC = (props) => { columns={awardedTableColumns} data={awardedUsers} options={awardedTableOptions} - title={`Awarded Students (${awardedUsers.length})`} + title={`${t(translations.awardedStudents)} (${awardedUsers.length})`} /> @@ -117,7 +144,7 @@ const AchievementAwardSummary: FC = (props) => { columns={removedTableColumns} data={removedUsers} options={removedTableOptions} - title={`Revoked Students (${removedUsers.length})`} + title={`${t(translations.revokedStudents)} (${removedUsers.length})`} /> diff --git a/client/app/bundles/course/leaderboard/components/tables/LeaderboardTable.tsx b/client/app/bundles/course/leaderboard/components/tables/LeaderboardTable.tsx index b8f66f6d714..5692a1bef52 100644 --- a/client/app/bundles/course/leaderboard/components/tables/LeaderboardTable.tsx +++ b/client/app/bundles/course/leaderboard/components/tables/LeaderboardTable.tsx @@ -1,5 +1,5 @@ import { FC, memo, useEffect, useState } from 'react'; -import { defineMessages, FormattedMessage } from 'react-intl'; +import { defineMessages, FormattedMessage, useIntl } from 'react-intl'; import { Avatar, AvatarGroup, Box, Tooltip } from '@mui/material'; import { TableColumns } from 'types/components/DataTable'; import { @@ -48,6 +48,30 @@ const translations = defineMessages({ id: 'course.leaderboard.LeaderboardTable.achievements', defaultMessage: 'Achievements', }, + rank: { + id: 'course.leaderboard.LeaderboardTable.rank', + defaultMessage: 'Rank', + }, + name: { + id: 'course.leaderboard.LeaderboardTable.name', + defaultMessage: 'Name', + }, + level: { + id: 'course.leaderboard.LeaderboardTable.level', + defaultMessage: 'Level', + }, + averageExperience: { + id: 'course.leaderboard.LeaderboardTable.averageExperience', + defaultMessage: 'Average Experience', + }, + averageAchievements: { + id: 'course.leaderboard.LeaderboardTable.averageAchievements', + defaultMessage: 'Average Achievements', + }, + members: { + id: 'course.leaderboard.LeaderboardTable.members', + defaultMessage: 'Members', + }, }); const styles = { @@ -78,6 +102,7 @@ const styles = { const LeaderboardTable: FC = (props: Props) => { const { data, id: tableType } = props; + const { formatMessage: t } = useIntl(); const tabletView = useMedia.MinWidth('sm'); const phoneView = useMedia.MinWidth('xs'); const [maxAvatars, setMaxAvatars] = useState(6); @@ -95,7 +120,7 @@ const LeaderboardTable: FC = (props: Props) => { const columns: TableColumns[] = [ { name: 'id', - label: 'Rank', + label: t(translations.rank), options: { filter: false, sort: false, @@ -116,7 +141,7 @@ const LeaderboardTable: FC = (props: Props) => { | LeaderboardAchievement[]; columns.push({ name: 'name', - label: 'Name', + label: t(translations.name), options: { filter: false, sort: false, @@ -157,7 +182,7 @@ const LeaderboardTable: FC = (props: Props) => { columns.push( { name: 'level', - label: 'Level', + label: t(translations.level), options: { filter: false, sort: false, @@ -172,7 +197,7 @@ const LeaderboardTable: FC = (props: Props) => { }, { name: 'experience', - label: 'Experience', + label: t(translations.experience), options: { filter: false, sort: false, @@ -192,7 +217,7 @@ const LeaderboardTable: FC = (props: Props) => { const achievementData = data as LeaderboardAchievement[]; columns.push({ name: 'achievements', - label: 'Achievements', + label: t(translations.achievements), options: { filter: false, sort: false, @@ -249,7 +274,7 @@ const LeaderboardTable: FC = (props: Props) => { columns.push( { name: 'name', - label: 'Name', + label: t(translations.name), options: { filter: false, sort: false, @@ -268,7 +293,7 @@ const LeaderboardTable: FC = (props: Props) => { }, { name: 'members', - label: 'Members', + label: t(translations.members), options: { filter: false, sort: false, @@ -306,7 +331,7 @@ const LeaderboardTable: FC = (props: Props) => { const groupPointData = data as GroupLeaderboardPoints[]; columns.push({ name: 'points', - label: 'Average Experience', + label: t(translations.averageExperience), options: { filter: false, sort: false, @@ -332,7 +357,7 @@ const LeaderboardTable: FC = (props: Props) => { const groupAchievementData = data as GroupLeaderboardAchievement[]; columns.push({ name: 'achievements', - label: 'Average Achievements', + label: t(translations.averageAchievements), options: { filter: false, sort: false, diff --git a/client/app/bundles/course/video/components/tables/VideoTable.tsx b/client/app/bundles/course/video/components/tables/VideoTable.tsx index 738ac0db9d7..52d52a7caee 100644 --- a/client/app/bundles/course/video/components/tables/VideoTable.tsx +++ b/client/app/bundles/course/video/components/tables/VideoTable.tsx @@ -30,14 +30,39 @@ const translations = defineMessages({ id: 'course.video.VideoTable.noVideo', defaultMessage: 'No Video', }, + title: { + id: 'course.video.VideoTable.title', + defaultMessage: 'Title', + }, + startAt: { + id: 'course.video.VideoTable.startAt', + defaultMessage: 'Start At', + }, + watchCount: { + id: 'course.video.VideoTable.watchCount', + defaultMessage: 'Watch Count', + }, + averageWatched: { + id: 'course.video.VideoTable.averageWatched', + defaultMessage: 'Average % Watched', + }, + published: { + id: 'course.video.VideoTable.published', + defaultMessage: 'Published', + }, + actions: { + id: 'course.video.VideoTable.actions', + defaultMessage: 'Actions', + }, }); const VideoTable: FC = (props) => { const { videos, permissions, onTogglePublished, intl } = props; + const { formatMessage: t } = intl; const videoMetadata = useAppSelector(getVideoMetadata); if (videos && videos.length === 0) { - return ; + return ; } const videoSortMethodByDate = ( @@ -92,7 +117,7 @@ const VideoTable: FC = (props) => { const columns: TableColumns[] = [ { name: 'title', - label: 'Title', + label: t(translations.title), options: { filter: false, sort: false, @@ -119,7 +144,7 @@ const VideoTable: FC = (props) => { }, { name: 'startTimeInfo', - label: 'Start At', + label: t(translations.startAt), options: { filter: false, sort: true, @@ -159,7 +184,7 @@ const VideoTable: FC = (props) => { if (permissions?.canAnalyze) { columns.push({ name: 'watchCount', - label: 'Watch Count', + label: t(translations.watchCount), options: { filter: false, sort: false, @@ -185,7 +210,7 @@ const VideoTable: FC = (props) => { }); columns.push({ name: 'percentWatched', - label: 'Average % Watched', + label: t(translations.averageWatched), options: { filter: false, sort: false, @@ -203,7 +228,7 @@ const VideoTable: FC = (props) => { if (permissions?.canManage) { columns.push({ name: 'published', - label: 'Published', + label: t(translations.published), options: { filter: false, sort: false, @@ -227,7 +252,7 @@ const VideoTable: FC = (props) => { }); columns.push({ name: 'id', - label: 'Actions', + label: t(translations.actions), options: { filter: false, sort: false,