Cloud-CV/EvalAI

View on GitHub
frontend_v2/src/app/components/challenge/challengeviewallsubmissions/challengeviewallsubmissions.component.html

Summary

Maintainability
Test Coverage
<div class="challenge-card">

  <!-- Card for submissions greater than 5000 -->
  <div class="ev-md-container ev-card-panel card-bt-margin" *ngIf="submissionCount > 5000">
    <div class="row">
        <div class="col s12 m12 l12">
          <p class="fs-16">
            <strong> Note: </strong> Results are greater than 5k, please use the 
            <a href="https://eval.ai/api/docs/#operation/get_all_submissions_for_a_challenge"><strong class="blue-text"> get_all_submissions </strong></a> API to download results.
            </p>
        </div>
    </div>
</div>

<div class="ev-card-panel card-bt-margin">
    <div class="ev-md-container bottom-hr-line">
      <div class="row row-lr-margin phase-title">
        <div class="col-sm-12">
          <h5 class="fw-light">All Submissions</h5>
        </div>
      </div>      
      <div class="row row-lr-margin">
        <div class="col-sm-6 col-xs-12 col-lg-6 col-lr-pad phase-select-box">
          <app-selectphase
            [phases]="filteredPhases"
            [phaseSelectionListType]="phaseSelectionListType"
            [phaseSelectionType]="phaseSelectionType"
            [phaseSelected]="phaseSelected()"
            #phaseselect
          ></app-selectphase>
        </div>
        <div class="col-sm-6 col-xs-12 col-lg-6 col-lr-pad">
          <div class="col-md-2 col-sm-2 col-xs-6 col-lg-6 col-lr-pad download-submissions">
            <mat-form-field>
              <mat-label>File</mat-label>
              <mat-select [(ngModel)]="fileSelected" class="rm-margin">
                <mat-option *ngFor="let key of fileTypes" value="{{ key.name }}">
                  {{ key.name }}
                </mat-option>
              </mat-select>
            </mat-form-field>
          </div>
          <div class="col-md-2 col-sm-2 col-xs-6 col-lg-6 col-lr-pad download-submissions">
            <button 
            class="btn ev-btn-dark btn-waves-effect waves-dark grad-btn grad-btn-dark fs-14" 
            (click)="downloadSubmission()" 
            [disabled]="submissionCount>5000">Download </button>
          </div>
        </div>
      </div>
      <div class="filter-team">
        <div *ngIf="selectedPhase">
          <div class="row">
            <div class="col-sm-12 col-xs-12">
              <strong class="fw-light content fs-16">Filter Submissions by Team name</strong>
            </div>
          </div>
          <div class="row">
            <div class="col-sm-6 col-xs-12 col-lr-pad phase-select-box">
              <app-input
                [name]="'filterByTeamName'"
                (input)="filterSubmissions($event.target.value)"
                [label]="'Team name'"
                [placeholder]="'Team name'"
                [type]="'text'"
                #formFilter
              >
              </app-input>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="ev-card-body exist-team-card"
      *ngIf="!isPhaseSelected || (paginationDetails.showPagination == false && isPhaseSelected)"
    >
      <div class="row row-lr-margin">
        <div class="col-md-12 col-lr-pad">
          <div *ngIf="!isPhaseSelected" class="result-wrn fw-light">No phase selected.</div>
          <div *ngIf="paginationDetails.showPagination == false && isPhaseSelected" class="result-wrn">
            No results found.
          </div>
        </div>
      </div>
    </div>

    <div class="ev-card-body collapsible-table">
      <table
        mat-table
        *ngIf="paginationDetails.showPagination == true && submissions.length > 0"
        [dataSource]="submissions"
        multiTemplateDataRows
        class="mat-elevation-z0"
      >
        <ng-container matColumnDef="{{ column }}" *ngFor="let column of columnsToDisplay; let i = index">
          <th class="cell-outside table-header fs-16 fw-regular" mat-header-cell *matHeaderCellDef>{{ columnsHeadings[i] }}</th>
          <td class="cell-outside fw-light align-center" mat-cell *matCellDef="let element; let j = index">
            <span *ngIf="column === 'status' && element[column] !== null" class="{{ element[column] }} fs-12">
              {{ element[column] | uppercase }}</span
            >
            <span *ngIf="column === 's_no'" class="{{ element[column] }} fs-12"> {{ element[column] }}</span>
            <span
              *ngIf="
                column !== 'status' &&
                element[column] !== null &&
                column !== 'input_file' &&
                column !== 'submission_result_file' &&
                column !== 's_no'
              "
            >
              {{ element[column] }}</span
            >
            <a
              target="_blank"
              class="blue-text"
              [href]="element[column]"
              *ngIf="element[column] !== null && (column === 'input_file' || column === 'submission_result_file')"
            >
              <i class="fa fa-external-link"></i>
              Link
            </a>
            <span *ngIf="element[column] === null">None</span>
          </td>
        </ng-container>

        <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->
        <ng-container matColumnDef="expandedDetail">
          <td mat-cell class="collapsed-td" *matCellDef="let element" [attr.colspan]="columnsToDisplay.length">
            <div
              class="elements elements-margin"
              [class.detail-row]="element != expandedElement"
              [class.expanded-row]="element == expandedElement"
              [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'"
            >
              <div class="elements-detail">
                <div class="element">
                    <strong class="element-description-attribution">Submission id :</strong> &nbsp;
                    <strong class="fw-light fs-14">
                      {{ element.id }}
                    </strong>
                </div>
                <div class="element">
                    <strong class="element-description-attribution">Submitted at :</strong> &nbsp;
                    <strong class="fw-light fs-14">
                      {{ element.submitted_at | date: 'medium' }}
                    </strong>
                </div>
              </div>
              <div class="elements-status">
                  <div class="element">
                      <strong class="element-description-attribution"
                        >Stdout file :&nbsp;</strong>&nbsp;
                      <a
                        target="_blank"
                        class="blue-text fs-14"
                        [href]="element.stdout_file"
                        *ngIf="element.stdout_file"
                      >
                        <i class="fa fa-external-link"></i> Link
                      </a>
                      <strong *ngIf="!element.stdout_file" class="fw-light fs-14">
                        None
                      </strong>
                  </div>
                  <div class="element">
                      <strong class="element-description-attribution"
                        >Stderr file :&nbsp;</strong>&nbsp;
                      <a
                        target="_blank"
                        class="blue-text fs-14"
                        [href]="element.stderr_file"
                        *ngIf="element.stderr_file"
                      >
                        <i class="fa fa-external-link"></i> Link
                      </a>
                      <strong *ngIf="!element.stderr_file" class="fw-light fs-14">
                        None
                      </strong>
                  </div>
                  <div class="element">
                      <strong class="element-description-attribution"
                        >Metadata file :&nbsp;</strong>&nbsp;
                      <a
                        target="_blank"
                        class="blue-text fs-14"
                        [href]="element.submission_metadata_file"
                        *ngIf="element.submission_metadata_file"
                      >
                        <i class="fa fa-external-link"></i> Link
                      </a>
                      <strong *ngIf="!element.submission_metadata_file" class="fw-light fs-14">
                        None
                      </strong>
                  </div>
              </div>
              <div class="elements-action">
                <div class="element element-description-attribution">
                  <a (click)="reRunSubmission(element.id)">
                    <strong class="fa fa-refresh pointer "> &nbsp;</strong>
                    <strong>Re-run submission</strong>
                  </a>
                </div>
                <div class="element element-description-attribution" *ngIf="isChallengeHost">
                  <a class="pointer" (click)="cancelSubmission(element)">
                    <i class="fa fa-times" aria-hidden="true"> &nbsp;</i>
                    <strong>Cancel Submission</strong>
                  </a>
                </div>
                <div class="element element-description-attribution" *ngIf="isChallengeHost">
                  <a class="pointer delete-submission-label" (click)="deleteChallengeSubmission(element)">
                    <i class="fa fa-trash" aria-hidden="true"> &nbsp;</i>
                    <strong>Delete Submission</strong>
                  </a>
                </div>
              </div>
            </div>
          </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
        <tr
          mat-row
          *matRowDef="let element; columns: columnsToDisplay"
          class="element-row"
          [class.expanded-row]="expandedElement === element"
          (click)="expandedElement = expandedElement === element ? null : element"
        ></tr>
        <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="ev-card-body detail-row"></tr>
      </table>
    </div>

    <div class="pagination" *ngIf="paginationDetails.showPagination && submissions.length > 0">
      <div class="row row-lr-margin">
        <div class="col-sm-12 left-align col-lr-pad">
          <button
            [ngClass]="paginationDetails.isPrev"
            class="btn-floating btn-pagination waves-effect waves-light"
            (click)="loadPaginationData(paginationDetails.previous)"
          >
            <i class="fa fa-chevron-left"></i>
          </button>
          <span class="pagination-title">
            <strong class="text-med-black fw-semibold content">
              Page {{ paginationDetails.currentPage }} of
              {{ paginationDetails.totalPage }}
            </strong></span
          >
          <button
            [ngClass]="paginationDetails.isNext"
            class="btn-floating btn-pagination waves-effect waves-light"
            (click)="loadPaginationData(paginationDetails.next)"
          >
            <i class="fa fa-chevron-right"></i>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>