frontend_v2/src/app/components/challenge/challengesubmissions/challengesubmissions.component.html
<div class="challenge-card">
<div class="ev-card-panel card-bt-margin">
<div class="ev-md-container bottom-hr-line">
<div (click)="challenge.refreshSubmissionData()" class="pointer update-page" *ngIf="challenge.showUpdate">
<span class="text-white"
>Page is outdated, Click to update <i class="fa fa-refresh text-highlight"></i
></span>
</div>
<div class="row row-lr-margin phase-title">
<div class="col-sm-12">
<h5 class="fw-light">My Submissions</h5>
</div>
<div class="col-sm-12">
<span class="fw-light">My Participated Team: {{ participatedTeamName }}</span>
</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">
<a class="waves-effect waves-dark btn grad-btn ev-btn-dark fw-light fs-16" (click)="downloadSubmission()">Download </a>
</div>
</div>
</div>
<div class="row row-lr-margin" *ngIf="selectedPhase">
<div class="col-sm-6 col-xs-12 col-lg-6 col-lr-pad">
<span class="fw-light">
Total Submissions Done:
</span>
<span class="show-submission-count text-highlight">
{{ submissionCount || 0 }}
</span>
</div>
</div>
<!-- <br> -->
</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 ev-md-container"
>
<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">
<span *ngIf="column === 's_no'" class="{{ element[column] }} fs-12"> {{ element[column] }}</span>
<span *ngIf="column === 'submitted_at'" class="{{ element[column] }} fs-12"> {{ element[column] | date: 'medium' }}</span>
<span *ngIf="element[column] !== 'None' && column === 'execution_time'" class="{{ element[column] }} fs-12"> {{ element[column] }} sec</span>
<span *ngIf="element[column] === 'None' && column === 'execution_time'" class="{{ element[column] }} fs-12"> {{ 'N/A' }}</span>
<a
target="_blank"
class="blue-text"
[href]="element[column]"
*ngIf="element[column] !== null && column !== 'status' && column !== 's_no' && column !== 'execution_time' && column !== 'submitted_at'"
>
<i class="fa fa-external-link"></i>
Link
</a>
<span [ngClass]="element[column]" *ngIf="element[column] !== null && column === 'status'" class="fs-12">{{
element[column] | uppercase
}}</span>
<span *ngIf="element[column] === null">{{ 'None' }}</span>
</td>
</ng-container>
<ng-container matColumnDef="expandedDetail">
<td mat-cell *matCellDef="let element" [attr.colspan]="columnsToDisplay.length">
<div
[class.expanded-row]="element == expandedElement"
[@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'"
class="elements elements-margin"
>
<div class="elements-detail">
<div class="element">
<strong class="element-description-attribution">Submission id :</strong>
<strong class="fw-light fs-14">
{{ element.id }}
</strong>
</div>
<div class="element">
<strong class="element-description-attribution">Submitted at: </strong>
<strong class="fw-light fs-14">
{{ element.submitted_at | date: 'medium' }}
</strong>
</div>
</div>
<div class="elements-status" *ngIf="selectedPhase['leaderboard_public'] || isChallengeHost">
<div class="element" *ngIf="selectedPhase['leaderboard_public']">
<mat-checkbox
class="element-icon fw-light"
[checked]="element.is_public"
[disabled]="element.status === 'failed' || element.status === 'cancelled'"
(change)="changeSubmissionVisibility(element.id, element.is_public)"
>
<strong class="fs-14">Show on leaderboard</strong>
</mat-checkbox>
</div>
<div class="element" *ngIf="isChallengeHost">
<mat-checkbox
class="element-icon fw-light"
[checked]="element.is_baseline"
[disabled]="element.status !== 'finished' && element.status !== 'partially_evaluated'"
(change)="changeBaselineStatus(element.id, element.is_baseline)"
>
<strong class="fs-14">Baseline</strong>
</mat-checkbox>
</div>
</div>
<div class="elements-action">
<div class="element">
<div class="element-icon fw-light">
<a class ="fs-14" (click)="editSubmission(element)"><i class="fa fa-pencil"></i> <strong class="element-description-attribution">Edit submission detail </strong> </a>
</div>
</div>
<div class="element">
<div class="element-icon fw-light">
<a class ="fs-14 w-300" (click)="cancelSubmission(element)"><i class="fa fa-times"></i> <strong class="element-description-attribution">Cancel submission </strong> </a>
</div>
</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="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>