Skip to content
Snippets Groups Projects
dars-view.component.html 3.63 KiB
Newer Older
<mat-sidenav-container id="dars-container">
    <mat-sidenav #auditPane id="dars-report-container" mode="over" position="end">
        <button mat-button aria-label="Return to DARS audit list" color="primary" (click)="auditPane.close()">
            <mat-icon>chevron_left</mat-icon>
            Return to audit list
        </button>
    </mat-sidenav>
    
    <!-- Main DARS Content -->
    <div id="dars-main">
        <h2 class="mat-h1">Completed Audit Requests</h2>

        <div id="dars-header-bar">
            <div>
                <h3 class="mat-h2">Degree Audit</h3>
                <p class="mat-body">See the progress towards your current program of study and degree plans.</p>
            </div>
            <div>
                <button mat-raised-button aria-label="Run new degree audit" color="primary">Run new degree audit</button>
            </div>
        </div>

        <div id="aduits">
                <table class="audit-table" mat-table [dataSource]="dataSource">

                    <!-- View Column -->
                    <ng-container matColumnDef="view">
                        <th mat-header-cell *matHeaderCellDef></th>
                        <td mat-cell *matCellDef="let audit">
                            <button mat-raised-button color="primary" [disabled]="audit.pending" (click)="auditPane.open()">View</button>
                        </td>
                    </ng-container>

                    <!-- School Column -->
                    <ng-container matColumnDef="school">
                        <th mat-header-cell *matHeaderCellDef>School/College</th>
                        <td mat-cell *matCellDef="let audit">{{audit.school}}</td>
                    </ng-container>

                    <!-- Program Column -->
                    <ng-container matColumnDef="program">
                        <th mat-header-cell *matHeaderCellDef>Program of Study</th>
                        <td mat-cell *matCellDef="let audit">{{audit.program}}</td>
                    </ng-container>

                    <!-- Honors Column -->
                    <ng-container matColumnDef="honors">
                        <th mat-header-cell *matHeaderCellDef>Honors Status</th>
                        <td mat-cell *matCellDef="let audit">Keep current status</td>
                    </ng-container>

                    <!-- Plan Column -->
                    <ng-container matColumnDef="plan">
                        <th mat-header-cell *matHeaderCellDef>Degree Plan</th>
                        <td mat-cell *matCellDef="let audit">Plan Title</td>
                    </ng-container>

                    <!-- Status Column -->
                    <ng-container matColumnDef="status">
                        <th mat-header-cell *matHeaderCellDef>Status</th>
                        <td mat-cell *matCellDef="let audit">Status goes here</td>
                    </ng-container>

                    <!-- Status Column -->
                    <ng-container matColumnDef="download">
                        <th mat-header-cell *matHeaderCellDef></th>
                        <td mat-cell *matCellDef="let audit">
                            <button mat-raised-button>
                                <mat-icon>vertical_align_bottom</mat-icon>
                            </button>
                        </td>
                    </ng-container>

                    <!-- Row definition -->
                    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
                    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
                </table>
        </div>

        <div id="what-if-audits"></div>
    </div>
</mat-sidenav-container>