feat(exam-correct): display more info

frontend/src/utils/exam-correct/exam-correct.js

@@ -19,6 +19,7 @@ const EXAM_CORRECT_SEND_BTN_ID = 'exam-correct__send-btn';
 const EXAM_CORRECT_USER_INPUT_ID = 'exam-correct__user';
 const EXAM_CORRECT_USER_INPUT_STATUS_ID = 'exam-correct__user-status';
 const EXAM_CORRECT_USER_INPUT_CANDIDATES_ID = 'exam-correct__user-candidates';
+const EXAM_CORRECT_USER_INPUT_CANDIDATES_MORE_ID = 'exam-correct__user-candidates-more';
 const EXAM_CORRECT_INPUT_BODY_ID = 'exam-correct__new';
 const EXAM_CORRECT_USER_ATTR = 'exam-correct--user-id';
 const EXAM_CORRECT_USER_DNAME_ATTR = 'exam-correct--user-dname';
@@ -45,6 +46,7 @@ export class ExamCorrect {
   _userInput;
   _userInputStatus;
   _userInputCandidates;
+  _userInputCandidatesMore;
   _partInputs;
   _resultSelect;
   _resultGradeSelect;
@@ -77,6 +79,7 @@ export class ExamCorrect {
     this._userInput = document.getElementById(EXAM_CORRECT_USER_INPUT_ID);
     this._userInputStatus = document.getElementById(EXAM_CORRECT_USER_INPUT_STATUS_ID);
     this._userInputCandidates = document.getElementById(EXAM_CORRECT_USER_INPUT_CANDIDATES_ID);
+    this._userInputCandidatesMore = document.getElementById(EXAM_CORRECT_USER_INPUT_CANDIDATES_MORE_ID);
     this._partInputs = [...this._element.querySelectorAll(`input[${EXAM_CORRECT_PART_INPUT_ATTR}]`)];
     const resultCell = document.getElementById('uw-exam-correct__result');
     this._resultSelect = resultCell && resultCell.querySelector('select');
@@ -109,6 +112,10 @@ export class ExamCorrect {
       throw new Error('ExamCorrect utility could not detect user input candidate list!');
     }
 
+    if (!this._userInputCandidatesMore) {
+      throw new Error('ExamCorrect utility could not detect user input candidate more element');
+    }
+
     // TODO get date format by post request
     this._dateFormat = 'DD.MM.YYYY HH:mm:ss';
 
@@ -178,6 +185,7 @@ export class ExamCorrect {
     // do nothing in case of empty or invalid input
     if (!this._userInput.value || this._userInput.reportValidity && !this._userInput.reportValidity()) {
       removeAllChildren(this._userInputCandidates);
+      this._userInputCandidatesMore.hidden = true;
       setStatus(this._userInputStatus, STATUS.NONE);
       return;
     }
@@ -212,6 +220,7 @@ export class ExamCorrect {
     // TODO avoid code duplication
     if (this._userInput.reportValidity && !this._userInput.reportValidity()) {
       removeAllChildren(this._userInputCandidates);
+      this._userInputCandidatesMore.hidden = true;
       setStatus(this._userInput, STATUS.NONE);
       return;
     }
@@ -305,6 +314,7 @@ export class ExamCorrect {
         if (response.users) {
           // delete candidate list entries from previous requests
           removeAllChildren(this._userInputCandidates);
+          this._userInputCandidatesMore.hidden = true;
 
           // show error if there are no matches for this input
           if (response.users.length === 0) {
@@ -335,6 +345,7 @@ export class ExamCorrect {
               
               // remove all candidates on accept
               removeAllChildren(this._userInputCandidates);
+              this._userInputCandidatesMore.hidden = true;
 
               setStatus(this._userInputStatus, STATUS.SUCCESS);
 
@@ -344,6 +355,7 @@ export class ExamCorrect {
 
             this._userInputCandidates.appendChild(candidateItem);
           });
+          this._userInputCandidatesMore.hidden = response['has-more'] !== true;
         } else {
           // TODO what to do in this case?
           setStatus(this._userInputStatus, STATUS.FAILURE);
@@ -388,6 +400,7 @@ export class ExamCorrect {
               // TODO set edit button visibility
               status = STATUS.AMBIGUOUS;
               newEntry.users = response.users;
+              newEntry.hasMore = response['has-more'] === true;
               newEntry.message = response.message || null;
               break;
             case 'failure':
@@ -426,7 +439,7 @@ export class ExamCorrect {
             userElem.innerHTML = userToHTML(user);
             userElem.setAttribute(EXAM_CORRECT_USER_ATTR, user.id || user);
           } else if (userElem && newEntry.users) {
-            row.replaceChild(userElem, this._showUserList(row, newEntry.users, { partResults: request.results, result: request.grade } ));
+            row.replaceChild(userElem, this._showUserList(row, newEntry.users, { partResults: request.results, result: request.grade }, newEntry.hasMore === true));
           }
 
           for (let [k, v] of Object.entries(newEntry.results)) {
@@ -477,7 +490,7 @@ export class ExamCorrect {
   }
 
   // TODO better name
-  _showUserList(row, users, results) {
+  _showUserList(row, users, results, hasMore) {
     let userElem = row.cells.item(this._cIndices.get('user'));
     if (!userElem) {
       userElem = document.createElement('TD');
@@ -499,6 +512,12 @@ export class ExamCorrect {
         list.appendChild(listItem);
       }
       userElem.appendChild(list);
+      if (hasMore === true) {
+        const moreElem = this._userInputCandidatesMore.cloneNode(true);  // TODO I'm lazy
+        moreElem.removeAttribute('id');
+        moreElem.hidden = false;
+        userElem.appendChild(moreElem);
+      }
     } else {
       console.error('Unable to show users from invalid response');
     }
@@ -598,6 +617,7 @@ export class ExamCorrect {
 
   _clearUserInput() {
     removeAllChildren(this._userInputCandidates);
+    this._userInputCandidatesMore.hidden = true;
     clearInput(this._userInput);
     this._userInput.removeAttribute(EXAM_CORRECT_USER_ATTR);
     this._userInput.removeAttribute(EXAM_CORRECT_USER_DNAME_ATTR);

messages/uniworx/de-de-formal.msg

@@ -1577,6 +1577,7 @@ ExamRegistrationInviteExplanation: Sie wurden eingeladen, Prüfungsteilnehmer zu
 ExamCorrectHeading examname@Text: Prüfungsergebnisse für #{examname} eintragen
 ExamCorrectExamResultDelete: Prüfungsergebnis löschen
 ExamCorrectExamResultNone: Keine Änderung
+ExamCorrectUserCandidatesMore: und weitere
 
 ExamCorrectHeadDate: Zeit
 ExamCorrectHeadParticipant: Teilnehmer

messages/uniworx/en-eu.msg

@@ -1590,6 +1590,7 @@ ExamCorrectErrorPartResultOutOfBoundsMax examPartNumber maxPoints: Exam part res
 
 ExamCorrectExamResultDelete: Delete exam result
 ExamCorrectExamResultNone: No change
+ExamCorrectUserCandidatesMore: and more
 
 SubmissionUserInvitationAccepted shn: You now participate in a submission for #{shn}
 SubmissionUserInvitationDeclined shn: You have declined the invitation to participate in a submission for #{shn}

templates/exam-correct.hamlet

@@ -26,6 +26,8 @@ $newline never
             <input #exam-correct__user .uw-exam-correct--user-cell type="text" autofocus minLength=#{minNeedleLength}>
             <i #exam-correct__user-status .fas .fa-fw>
             <ul #exam-correct__user-candidates>
+            <div #exam-correct__user-candidates-more hidden=true>
+              _{MsgExamCorrectUserCandidatesMore}
           $forall ExamPart{examPartNumber} <- examParts
             <td .table__td .uw-exam-correct--part-cell>
               ^{ptsInput examPartNumber}