Skip to content
Snippets Groups Projects
Commit 41fad198 authored by Paulina Nogal's avatar Paulina Nogal
Browse files

Load audit data on new metadata-mobile-view component

parent d7dda8bd
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 168 additions and 36 deletions
src/app/dars/dars-view/dars-view.component.html
+ 31
− 28
View file @ 41fad198
......@@ -102,23 +102,25 @@
</mat-sidenav-container>
<div *ngIf="mobileView.matches">
<mat-card>
<mat-card class="mat-card-mobile">
<mat-card-header>
<mat-card-title>Degree Audit (DARS)</mat-card-title>
</mat-card-header>
<mat-card-content>
<mat-tab-group>
<mat-tab label="Degree Audit">
See the progress towards your current program of study.
<button mat-raised-button
aria-label="Run new degree audit"
color="primary"
[disabled]="(metadataStatus$ | async) != 'Loaded'"
(click)="openNewAuditOptionsDialog('degree')">
Run new degree audit
</button>
<div class="run-audit-mobile">
<p>See the progress towards your current program of study.</p>
<button mat-raised-button
aria-label="Run new degree audit"
[disabled]="(metadataStatus$ | async) != 'Loaded'"
color="primary"
(click)="openDegreeAuditDialog()">
Run new degree audit
</button>
</div>
<mat-divider></mat-divider>
<h3>Audits</h3>
<h3>Completed Audits</h3>
<div class="dars-audit-group" [ngSwitch]="metadataStatus$ | async">
<ng-container *ngSwitchCase="'Error'">
<h2 style="color:red">error loading metadata</h2>
......@@ -127,25 +129,27 @@
<mat-spinner></mat-spinner>
</ng-container>
<ng-container *ngSwitchCase="'Loaded'">
<cse-dars-metadata-table
[metadata]="programMetadata$ | async"
(openAudit)="openAudit($event)">
</cse-dars-metadata-table>
<cse-metadata-mobile-view
[metadata]="programMetadata$ | async">
</cse-metadata-mobile-view>
</ng-container>
</div>
</mat-tab>
<mat-tab label="What-if">
See the progress towards a new or current program of study and degree plans.
<button
mat-raised-button
aria-label="Run new degree audit"
[disabled]="(metadataStatus$ | async) != 'Loaded'"
color="primary"
(click)="openNewAuditOptionsDialog('whatif')">
Run new &lsquo;what if&rsquo; audit
</button>
<div class="run-audit-mobile">
<p>See the progress towards a new or current program of study and degree plans.</p>
<button
mat-raised-button
aria-label="Run new degree audit"
[disabled]="(metadataStatus$ | async) != 'Loaded'"
color="primary"
(click)="openDegreeAuditDialog()">
Run new &lsquo;what if&rsquo; audit
</button>
</div>
<mat-divider></mat-divider>
<h3>Audits</h3>
<h3>Completed Audits</h3>
<div class="dars-audit-group" [ngSwitch]="metadataStatus$ | async">
<ng-container *ngSwitchCase="'Error'">
<h2 style="color:red">error loading metadata</h2>
......@@ -154,10 +158,9 @@
<mat-spinner></mat-spinner>
</ng-container>
<ng-container *ngSwitchCase="'Loaded'">
<cse-dars-metadata-table
[metadata]="whatIfMetadata$ | async"
(openAudit)="openAudit($event)">
</cse-dars-metadata-table>
<cse-metadata-mobile-view
[metadata]="programMetadata$ | async">
</cse-metadata-mobile-view>
</ng-container>
</div>
</mat-tab>
......
src/app/dars/dars-view/dars-view.component.scss
+ 35
− 3
View file @ 41fad198
......@@ -83,7 +83,39 @@
align-items: baseline;
}
mat-card-header {
background-color: mat-color($my-app-primary);
color: white;
button {
text-transform: uppercase;
}
// Mobile View Styles
.mat-card-mobile {
padding: 0px !important;
.mat-card-header {
background-color: mat-color($my-app-primary);
color: white;
.mat-card-title {
margin: 16px;
font-weight: normal;
}
}
mat-tab-group {
.mat-tab-label {
text-transform: uppercase;
color: #757575;
}
.run-audit-mobile {
text-align: center;
padding: 1px 20px 16px 20px;
background-color: #f7f7f7;
}
h3 {
background-color: #494949;
color: #fff;
font-weight: normal;
padding: 16px;
margin-top: 0px;
}
}
}
src/app/dars/dars.module.ts
+ 2
− 0
View file @ 41fad198
......@@ -5,6 +5,7 @@ import { SharedModule } from '@app/shared/shared.module';
import { DARSEffects } from './store/effects';
import { DarsAuditComponent } from './audit/audit.component';
import { DarsMetadataTableComponent } from './metadata-table/metadata-table.component';
import { MetadataMobileViewComponent } from './metadata-mobile-view/metadata-mobile-view.component';
import { MatStepperModule } from '@angular/material';
import { AlertContainerComponent } from '../shared/components/alert-container/alert-container.component';
import { StoreModule } from '@ngrx/store';
......@@ -28,6 +29,7 @@ import { NewWhatIfAuditDialogComponent } from './new-what-if-audit-dialog/new-wh
DARSViewComponent,
DarsAuditComponent,
DarsMetadataTableComponent,
MetadataMobileViewComponent,
],
entryComponents: [
NewDegreeAuditDialogComponent,
......
src/app/dars/metadata-mobile-view/metadata-mobile-view.component.html 0 → 100644
+ 39
− 0
View file @ 41fad198
<div id="audits-mobile">
<div>
<mat-card class="audit-card" *ngFor="let audit of metadata" role="group">
<div fxLayout="row" fxLayoutAlign="space-between start">
<div fxLayout="column" fxLayoutAlign="space-between start" fxFlex="80">
<div fxLayout="column" fxLayoutAlign="start start">
<!-- School -->
<mat-card-title>{{ audit.darsInstitutionCodeDescription }} </mat-card-title>
<!-- Program -->
<mat-card-subtitle>{{ audit.darsDegreeProgramCode }}</mat-card-subtitle>
</div>
</div>
<div fxLayout="column" fxLayoutAlign="space-between end" fxFlex="20">
<div *ngIf="!disabled" fxLayout="row" fxLayoutAlign="end center">
<button mat-raised-button>
<mat-icon class="download-audit-icon" aria-label="Download Audit PDF">vertical_align_bottom</mat-icon>
</button>
</div>
</div>
</div>
<mat-card-content>
<!-- Plan -->
Plan: {{ audit.degreePlannerPlanName }} <br />
<!-- Honors -->
Honors: {{ audit.darsHonorsOptionDescription }} <br />
<!-- Courses -->
Courses: {{ audit.whichEnrolledCoursesIncluded }}
</mat-card-content>
<mat-card-footer>
<!-- Status -->
Status: {{ audit.darsStatusOfDegreeAuditRequest }} <br />
Run {{ audit.darsAuditRunDate | date:'short' }} | Exp. xxx
</mat-card-footer>
</mat-card>
</div>
</div>
src/app/dars/metadata-mobile-view/metadata-mobile-view.component.scss 0 → 100644
+ 19
− 0
View file @ 41fad198
@import 'assets/material-theme.scss';
.audit-card {
margin-bottom: 1.2em;
mat-card-title {
font-size: 14px;
font-weight: normal;
}
mat-card-subtitle {
font-weight: bold;
color: #000000;
}
mat-card-footer {
margin: 0px;
}
.download-audit-icon {
color: mat-color($my-app-primary);
}
}
src/app/dars/metadata-mobile-view/metadata-mobile-view.component.ts 0 → 100644
+ 11
− 0
View file @ 41fad198
import { Component, Input } from '@angular/core';
import { AuditMetadata } from '../models/audit-metadata';
@Component({
selector: 'cse-metadata-mobile-view',
templateUrl: './metadata-mobile-view.component.html',
styleUrls: ['./metadata-mobile-view.component.scss'],
})
export class MetadataMobileViewComponent {
@Input() public metadata: AuditMetadata[];
}
src/app/dars/new-degree-audit-dialog/new-degree-audit-dialog.component.scss
+ 5
− 0
View file @ 41fad198
@import 'assets/material-theme.scss';
.mat-radio-group {
display: flex;
flex-direction: column;
......@@ -41,3 +42,7 @@
text-align: right;
}
}
button[type='submit'] {
color: mat-color($my-app-primary);
}
src/app/dars/new-what-if-audit-dialog/new-what-if-audit-dialog.component.scss
+ 6
− 0
View file @ 41fad198
@import 'assets/material-theme.scss';
.mat-radio-group {
display: flex;
flex-direction: column;
......@@ -42,6 +44,10 @@
}
}
button[type='submit'] {
color: mat-color($my-app-primary);
}
#what-if-degree-plan-select {
mat-select-trigger {
height: 24px;
......
src/assets/sass/general.scss
+ 20
− 5
View file @ 41fad198
......@@ -6,6 +6,10 @@ body {
margin: 0px;
}
main {
overflow: visible !important;
}
// Disables the input zoom on iOS
@media screen and (-webkit-min-device-pixel-ratio: 0) {
select,
......@@ -301,6 +305,13 @@ body {
}
// Form fields styles
.mat-card-mobile {
.mat-tab-label-active,
.mat-tab-link {
color: mat-color($my-app-primary) !important;
opacity: 1;
}
}
.audit-radio-button {
.mat-radio-label {
......@@ -344,12 +355,16 @@ body {
border-color: #0479a8 !important;
}
.audit-radio-button.mat-accent .mat-radio-inner-circle,
.audit-radio-button.mat-accent.mat-radio-checked .mat-radio-persistent-ripple {
background-color: #0479a8;
.mat-radio-button.mat-accent .mat-radio-inner-circle,
.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-persistent-ripple {
background-color: mat-color($my-app-primary) !important;
}
.mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {
background-color: mat-color($my-app-primary) !important;
}
.audit-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {
background-color: rgba(4, 121, 168, 0.7) !important;
.mat-form-field .mat-select.mat-select-invalid .mat-select-arrow,
.mat-form-field.mat-form-field-invalid .mat-form-field-label {
color: mat-color($my-app-primary) !important;
}
// Media queries
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment