change semantic structure from divs to table - user details
This commit is contained in:
KDSBrowne
parent
406c94c43a
commit
ba97a7368b
@ -205,10 +205,10 @@ const UserDatailsComponent = (props) => {
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="p-6 flex flex-row justify-between items-center">
|
||||
<div className="min-w-[40%] text-ellipsis">{question}</div>
|
||||
<tr className="p-6 flex flex-row justify-between items-center">
|
||||
<td className="min-w-[40%] text-ellipsis">{question}</td>
|
||||
{ isAnonymous ? (
|
||||
<div
|
||||
<td
|
||||
className="min-w-[20%] grow text-center mx-3"
|
||||
>
|
||||
<span
|
||||
@ -232,11 +232,11 @@ const UserDatailsComponent = (props) => {
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
) : (
|
||||
<div className="min-w-[20%] grow text-center mx-3">{answers.map((answer) => <p title={answer} className="overflow-hidden text-ellipsis">{answer}</p>)}</div>
|
||||
<td className="min-w-[20%] grow text-center mx-3">{answers.map((answer) => <p title={answer} className="overflow-hidden text-ellipsis">{answer}</p>)}</td>
|
||||
) }
|
||||
<div
|
||||
<td
|
||||
className="min-w-[40%] text-ellipsis text-center overflow-hidden"
|
||||
title={mostCommonAnswer
|
||||
? capitalizeFirstLetter(mostCommonAnswer)
|
||||
@ -248,8 +248,8 @@ const UserDatailsComponent = (props) => {
|
||||
id: 'app.learningDashboard.usersTable.notAvailable',
|
||||
defaultMessage: 'N/A',
|
||||
}) }
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
|
||||
@ -257,14 +257,14 @@ const UserDatailsComponent = (props) => {
|
||||
category, average, activityPoints, totalOfActivity,
|
||||
) {
|
||||
return (
|
||||
<div className="p-6 flex flex-row justify-between items-end">
|
||||
<div className="min-w-[20%] text-ellipsis overflow-hidden">
|
||||
<tr className="p-6 flex flex-row justify-between items-end">
|
||||
<td className="min-w-[20%] text-ellipsis overflow-hidden">
|
||||
<FormattedMessage
|
||||
id={`app.learningDashboard.userDetails.${toCamelCase(category)}`}
|
||||
defaultMessage={category}
|
||||
/>
|
||||
</div>
|
||||
<div className="min-w-[60%] grow text-center text-sm">
|
||||
</td>
|
||||
<td className="min-w-[60%] grow text-center text-sm">
|
||||
<div className="mb-2">
|
||||
{ (function getAverage() {
|
||||
if (average >= 0 && category === 'Talk Time') return tsToHHmmss(average);
|
||||
@ -284,13 +284,13 @@ const UserDatailsComponent = (props) => {
|
||||
: null }
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="min-w-[20%] text-sm text-ellipsis overflow-hidden text-right rtl:text-left">
|
||||
</td>
|
||||
<td className="min-w-[20%] text-sm text-ellipsis overflow-hidden text-right rtl:text-left">
|
||||
{ activityPoints >= 0
|
||||
? <FormattedNumber value={activityPoints} minimumFractionDigits="0" maximumFractionDigits="1" />
|
||||
: <FormattedMessage id="app.learningDashboard.usersTable.notAvailable" defaultMessage="N/A" /> }
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
|
||||
@ -420,7 +420,7 @@ const UserDatailsComponent = (props) => {
|
||||
</div>
|
||||
{ !user.isModerator && (
|
||||
<>
|
||||
<div className="bg-white shadow rounded mb-4 table w-full">
|
||||
<div className="bg-white shadow rounded mb-4 w-full">
|
||||
<div className="p-6 text-lg flex items-center">
|
||||
<div className="p-2 rounded-full bg-green-100 text-green-700">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
@ -436,40 +436,42 @@ const UserDatailsComponent = (props) => {
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div className="p-6 py-2 m-px bg-gray-200 flex flex-row justify-between text-xs text-gray-700">
|
||||
<div className="min-w-[20%] text-ellipsis"><FormattedMessage id="app.learningDashboard.userDetails.category" defaultMessage="Category" /></div>
|
||||
<div className="grow text-center"><FormattedMessage id="app.learningDashboard.userDetails.average" defaultMessage="Average" /></div>
|
||||
<div className="min-w-[20%] text-ellipsis text-right rtl:text-left"><FormattedMessage id="app.learningDashboard.userDetails.activityPoints" defaultMessage="Activity Points" /></div>
|
||||
</div>
|
||||
{ ['Talk Time', 'Messages', 'Emojis', 'Raise Hands', 'Poll Votes'].map((category) => {
|
||||
let totalOfActivity = 0;
|
||||
<table className="bg-white shadow rounded mb-4 table w-full">
|
||||
<tr className="p-6 py-2 m-px bg-gray-200 flex flex-row justify-between text-xs text-gray-700">
|
||||
<th aria-label="Category" className="min-w-[20%] text-ellipsis font-normal text-left"><FormattedMessage id="app.learningDashboard.userDetails.category" defaultMessage="Category" /></th>
|
||||
<th aria-label="Average" className="grow text-center font-normal"><FormattedMessage id="app.learningDashboard.userDetails.average" defaultMessage="Average" /></th>
|
||||
<th aria-label="Activity Points" className="min-w-[20%] text-ellipsis text-right rtl:text-left font-normal"><FormattedMessage id="app.learningDashboard.userDetails.activityPoints" defaultMessage="Activity Points" /></th>
|
||||
</tr>
|
||||
{ ['Talk Time', 'Messages', 'Emojis', 'Raise Hands', 'Poll Votes'].map((category) => {
|
||||
let totalOfActivity = 0;
|
||||
|
||||
switch (category) {
|
||||
case 'Talk Time':
|
||||
totalOfActivity = user.talk.totalTime;
|
||||
break;
|
||||
case 'Messages':
|
||||
totalOfActivity = user.totalOfMessages;
|
||||
break;
|
||||
case 'Emojis':
|
||||
totalOfActivity = user.emojis.filter((emoji) => emoji.name !== 'raiseHand').length;
|
||||
break;
|
||||
case 'Raise Hands':
|
||||
totalOfActivity = user.emojis.filter((emoji) => emoji.name === 'raiseHand').length;
|
||||
break;
|
||||
case 'Poll Votes':
|
||||
totalOfActivity = Object.values(user.answers).length;
|
||||
break;
|
||||
default:
|
||||
}
|
||||
switch (category) {
|
||||
case 'Talk Time':
|
||||
totalOfActivity = user.talk.totalTime;
|
||||
break;
|
||||
case 'Messages':
|
||||
totalOfActivity = user.totalOfMessages;
|
||||
break;
|
||||
case 'Emojis':
|
||||
totalOfActivity = user.emojis.filter((emoji) => emoji.name !== 'raiseHand').length;
|
||||
break;
|
||||
case 'Raise Hands':
|
||||
totalOfActivity = user.emojis.filter((emoji) => emoji.name === 'raiseHand').length;
|
||||
break;
|
||||
case 'Poll Votes':
|
||||
totalOfActivity = Object.values(user.answers).length;
|
||||
break;
|
||||
default:
|
||||
}
|
||||
|
||||
return renderActivityScoreItem(
|
||||
category,
|
||||
averages[category],
|
||||
activityPointsFunctions[category](user),
|
||||
totalOfActivity,
|
||||
);
|
||||
}) }
|
||||
return renderActivityScoreItem(
|
||||
category,
|
||||
averages[category],
|
||||
activityPointsFunctions[category](user),
|
||||
totalOfActivity,
|
||||
);
|
||||
}) }
|
||||
</table>
|
||||
</div>
|
||||
<div className="bg-white shadow rounded">
|
||||
<div className="p-6 text-lg flex items-center">
|
||||
@ -480,16 +482,18 @@ const UserDatailsComponent = (props) => {
|
||||
</div>
|
||||
<p className="ltr:ml-2 rtl:mr-2"><FormattedMessage id="app.learningDashboard.indicators.polls" defaultMessage="Polls" /></p>
|
||||
</div>
|
||||
<div className="p-6 py-2 m-px bg-gray-200 flex flex-row justify-between text-xs text-gray-700">
|
||||
<div className="min-w-[40%] text-ellipsis"><FormattedMessage id="app.learningDashboard.userDetails.poll" defaultMessage="Poll" /></div>
|
||||
<div className="grow text-center"><FormattedMessage id="app.learningDashboard.userDetails.response" defaultMessage="Response" /></div>
|
||||
<div className="min-w-[40%] text-ellipsis text-center"><FormattedMessage id="app.learningDashboard.userDetails.mostCommonAnswer" defaultMessage="Most Common Answer" /></div>
|
||||
</div>
|
||||
{ Object.values(polls || {})
|
||||
.map((poll) => renderPollItem(
|
||||
poll,
|
||||
getUserAnswer(poll),
|
||||
)) }
|
||||
<table className="w-full">
|
||||
<tr className="p-6 py-2 m-px bg-gray-200 flex flex-row justify-between text-xs text-gray-700">
|
||||
<th aria-label="Poll" className="min-w-[40%] text-ellipsis font-normal text-left"><FormattedMessage id="app.learningDashboard.userDetails.poll" defaultMessage="Poll" /></th>
|
||||
<th aria-label="Response" className="grow text-center font-normal"><FormattedMessage id="app.learningDashboard.userDetails.response" defaultMessage="Response" /></th>
|
||||
<th aria-label="Most Common Answer" className="min-w-[40%] text-ellipsis text-center font-normal"><FormattedMessage id="app.learningDashboard.userDetails.mostCommonAnswer" defaultMessage="Most Common Answer" /></th>
|
||||
</tr>
|
||||
{ Object.values(polls || {})
|
||||
.map((poll) => renderPollItem(
|
||||
poll,
|
||||
getUserAnswer(poll),
|
||||
)) }
|
||||
</table>
|
||||
</div>
|
||||
</>
|
||||
) }
|
||||
@ -500,7 +504,6 @@ const UserDatailsComponent = (props) => {
|
||||
|
||||
const UserDetailsContainer = (props) => {
|
||||
const { isOpen, dispatch, user } = useContext(UserDetailsContext);
|
||||
|
||||
return ReactDOM.createPortal(
|
||||
<UserDatailsComponent
|
||||
{...{
|
||||
|
||||
Loading…
Reference in New Issue
Block a user