Skip to content
Snippets Groups Projects
Commit db778d00 authored by Scott Berg's avatar Scott Berg Committed by Scott Berg
Browse files

Create basic DARS Audit view.

parent d556fdbf
No related branches found
No related tags found
No related merge requests found
<h1>Degree Audit (DARS)</h1>
<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>
\ No newline at end of file
#dars-container {
width: 100%;
height: 100%;
padding: 50px;
}
#dars-report-container {
width: 100%;
padding: 20px;
}
#dars-main {
max-width: 1200px;
margin: auto;
}
#dars-header-bar {
display: flex;
justify-content: space-between;
align-items: baseline;
}
.audit-table {
width: 100%;
background-color: transparent;
.mat-header-row {
box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.25);
border-color: #fafafa;
}
th {
font-size: 1rem;
font-weight: 300;
}
tr:not(.mat-header-row) td {
padding: 15px 10px;
&:first-child {
padding-left: 20px;
}
&:last-child {
padding-right: 20px;
}
}
.mat-column-download {
button {
padding: 0;
width: auto;
}
}
}
import { Component } from '@angular/core';
import { Component, ViewChild, ElementRef } from '@angular/core';
import { MatSidenav } from '@angular/material';
@Component({
selector: 'cse-dars-view',
......@@ -6,5 +7,44 @@ import { Component } from '@angular/core';
styleUrls: ['./dars-view.component.scss'],
})
export class DARSViewComponent {
// TODO
displayedColumns = [
'view',
'school',
'program',
'honors',
'plan',
'status',
'download',
];
dataSource = [
{
pending: true,
school: 'Letters & Science',
program: 'Psychology',
honors: 'keep',
plan: 12345,
},
{
pending: false,
school: 'Letters & Science',
program: 'Psychology',
honors: 'keep',
plan: 12345,
},
{
pending: false,
school: 'Letters & Science',
program: 'Psychology',
honors: 'keep',
plan: 12345,
},
{
pending: false,
school: 'Letters & Science',
program: 'Psychology',
honors: 'keep',
plan: 12345,
},
];
}
import { NgModule } from '@angular/core';
import { DARSViewComponent } from './dars-view/dars-view.component';
import { EffectsModule } from '@ngrx/effects';
import { SharedModule } from '@app/shared/shared.module';
import { DARSEffects } from './store/effects';
@NgModule({
imports: [EffectsModule.forRoot([DARSEffects])],
imports: [EffectsModule.forRoot([DARSEffects]), SharedModule],
exports: [],
declarations: [DARSViewComponent],
entryComponents: [],
......
......@@ -8,6 +8,7 @@ import { MatMenuModule } from '@angular/material/menu';
import { MatIconModule } from '@angular/material/icon';
import { MatTabsModule } from '@angular/material/tabs';
import { MatCardModule } from '@angular/material/card';
import { MatTableModule } from '@angular/material/table';
import { MatSelectModule } from '@angular/material/select';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatSidenavModule } from '@angular/material/sidenav';
......@@ -52,6 +53,7 @@ const modules = [
MatTabsModule,
MatExpansionModule,
MatCardModule,
MatTableModule,
MatSelectModule,
FlexLayoutModule,
MatSidenavModule,
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment