Improving visualization of passing group points limits.

Author: krulis-martin

src/components/Groups/ResultsTable/ResultsTable.js

@@ -22,7 +22,7 @@ import { createUserNameComparator } from '../../helpers/users.js';
 import { compareAssignments, compareShadowAssignments } from '../../helpers/assignments.js';
 import { downloadString } from '../../../redux/helpers/api/download.js';
 import Button from '../../widgets/TheButton';
-import Icon, { DownloadIcon, LoadingIcon, ReviewRequestIcon } from '../../icons';
+import Icon, { AcceptedIcon, DownloadIcon, LoadingIcon, ReviewRequestIcon } from '../../icons';
 import { safeGet, EMPTY_ARRAY, EMPTY_OBJ, hasPermissions } from '../../../helpers/common.js';
 import withLinks from '../../../helpers/withLinks.js';
 import { storageGetItem, storageSetItem } from '../../../helpers/localStorage.js';
@@ -382,6 +382,21 @@ class ResultsTable extends Component {
         )
       );
 
+      columns.push(
+        new SortableTableColumnDescriptor('passed', '', {
+          className: 'text-center shrink-col',
+          headerSuffixClassName: styles.maxPointsRow,
+          cellRenderer: stats => (
+            <>
+              {stats.hasLimit && stats.passesLimit && <AcceptedIcon className="text-success" />}
+              {stats.hasLimit && !stats.passesLimit && (
+                <Icon icon={['far', 'circle-xmark']} className="text-muted half-opaque" />
+              )}
+            </>
+          ),
+        })
+      );
+
       if (hasPermissions(group, 'update')) {
         columns.push(
           new SortableTableColumnDescriptor('buttons', '', {
@@ -409,6 +424,7 @@ class ResultsTable extends Component {
         selected: !showOnlyMe && user.id === loggedUser.id,
         user,
         total: userStats && userStats.points,
+        passed: userStats,
         buttons: renderActions && hasPermissions(group, 'update') ? renderActions(user.id) : '',
         // actually 'update' is not the right premission, but its sufficiently close :)
       };

src/components/Users/StudentsListItem/StudentsListItem.js

@@ -12,39 +12,55 @@ const StudentsListItem = ({
   stats,
   renderActions,
   links: { GROUP_USER_SOLUTIONS_URI_FACTORY },
-}) => (
-  <tr>
-    <td>
-      <UsersNameContainer userId={id} link={groupId && GROUP_USER_SOLUTIONS_URI_FACTORY(groupId, id)} listItem />
-    </td>
-    <td width={150}>
-      {stats && (
-        <ProgressBar
-          className="progress-xs"
-          now={stats.points.total > 0 ? Math.min(1, stats.points.gained / stats.points.total) * 100 : 0}
-          variant={!stats.hasLimit ? 'info' : stats.passesLimit ? 'success' : 'danger'}
-        />
-      )}
-    </td>
-    <td>
-      {stats && (
-        <FormattedMessage
-          id="app.studentsList.gainedPointsOfWithoutBreakingSpaces"
-          defaultMessage="{gained, number} of {total, number}"
-          values={{ ...stats.points }}
-        />
-      )}
-    </td>
-    {renderActions && <td>{renderActions(id)}</td>}
-  </tr>
-);
+}) => {
+  const totalPoints = (stats && stats && (stats.points.total || stats.points.limit)) || 0;
+  return (
+    <tr>
+      <td>
+        <UsersNameContainer userId={id} link={groupId && GROUP_USER_SOLUTIONS_URI_FACTORY(groupId, id)} listItem />
+      </td>
+      <td className="valign-middle">
+        {stats && (
+          <ProgressBar
+            className="progress-xs"
+            now={totalPoints > 0 ? Math.min(1, stats.points.gained / totalPoints) * 100 : 0}
+            variant={!stats.hasLimit ? 'info' : stats.passesLimit ? 'success' : 'danger'}
+          />
+        )}
+      </td>
+      <td className="text-nowrap shrink-col">
+        {stats && (
+          <>
+            <FormattedMessage
+              id="app.studentsList.gainedPointsOfWithoutBreakingSpaces"
+              defaultMessage="{gained, number} of {total, number}"
+              values={{ gained: stats.points.gained, total: totalPoints }}
+            />
+            {Boolean(stats.points.limit && stats.points.total && stats.points.limit !== stats.points.total) && (
+              <small className="ml-2 text-muted">
+                {' '}
+                <FormattedMessage
+                  id="app.studentsList.statsPointsLimit"
+                  defaultMessage="(required {limit, number})"
+                  values={{ limit: stats.points.limit }}
+                />
+              </small>
+            )}
+          </>
+        )}
+      </td>
+      {renderActions && <td>{renderActions(id)}</td>}
+    </tr>
+  );
+};
 
 StudentsListItem.propTypes = {
   id: PropTypes.string.isRequired,
   groupId: PropTypes.string,
   stats: PropTypes.shape({
     points: PropTypes.shape({
       total: PropTypes.number.isRequired,
+      limit: PropTypes.number,
       gained: PropTypes.number.isRequired,
     }),
     hasLimit: PropTypes.bool,

src/components/Users/UsersStats/UsersStats.js

@@ -1949,6 +1949,7 @@
   "app.sourceCodeViewer.utf8Warning": "Zdrojový soubor není v platném UTF-8 kódování. Některé znaky proto nemusí být zobrazeny správně. Pokud potřebujete soubor v původním kódování, použijte tlačítko k jeho stažení.",
   "app.studentsList.gainedPointsOfWithoutBreakingSpaces": "{gained, number} z {total, number}",
   "app.studentsList.noStudents": "V tomto seznamu nejsou žádní studenti.",
+  "app.studentsList.statsPointsLimit": "(požadováno {limit, number})",
   "app.submission.evaluation.bonusPoints": "Bonusové body:",
   "app.submission.evaluation.title": "Podrobnosti odevzdaného řešení",
   "app.submission.evaluation.title.testResults": "Výsledky testů",
@@ -2090,7 +2091,6 @@
   "app.users.title": "Seznam všech uživatelů",
   "app.users.userCreatedAt": "Uživatel vytvořen",
   "app.usersName.notVerified.title": "Tento účet nemá ověřenou e-mailovou adresu.",
-  "app.usersStats.description": "Body získané ve skupině {name}.",
   "app.usersname.notVerified.description": "Tento uživatel si neověřil svou e-mailovou adresu přes aktivační odkaz, který mu byl na tuto adresu zaslán.",
   "diff": "Sudí binárních dat",
   "generic.accept": "Akceptovat",

src/components/Users/UsersStats/index.js

@@ -1949,6 +1949,7 @@
   "app.sourceCodeViewer.utf8Warning": "The source file is not a valid UTF-8 file. Some characters may be displayed incorrectly. Use the download button to see unaltered source file.",
   "app.studentsList.gainedPointsOfWithoutBreakingSpaces": "{gained, number} of {total, number}",
   "app.studentsList.noStudents": "There are no students in this list.",
+  "app.studentsList.statsPointsLimit": "(required {limit, number})",
   "app.submission.evaluation.bonusPoints": "Bonus points:",
   "app.submission.evaluation.title": "Solution Detail",
   "app.submission.evaluation.title.testResults": "Test Results",
@@ -2090,7 +2091,6 @@
   "app.users.title": "List of All Users",
   "app.users.userCreatedAt": "User created",
   "app.usersName.notVerified.title": "This account does not have a verified email address yet.",
-  "app.usersStats.description": "Points gained from {name}.",
   "app.usersname.notVerified.description": "This user has not verified his/her email address via an activation link he has received to his email address.",
   "diff": "Binary-safe judge",
   "generic.accept": "Accept",