Skip to content

Commit

Permalink
feat(Entire Application): Upgrade to Angular 16 (#1477)
Browse files Browse the repository at this point in the history
Co-authored-by: Jonathan Lim-Breitbart <[email protected]>
  • Loading branch information
hirokiterashima and breity authored Nov 2, 2023
1 parent 7bdce81 commit 4f2a1e0
Show file tree
Hide file tree
Showing 46 changed files with 8,572 additions and 7,362 deletions.
15,467 changes: 8,307 additions & 7,160 deletions package-lock.json

Large diffs are not rendered by default.

50 changes: 25 additions & 25 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,27 +10,27 @@
"not dead"
],
"dependencies": {
"@angular/animations": "^15.2.9",
"@angular/cdk": "^15.2.9",
"@angular/common": "^15.2.9",
"@angular/compiler": "^15.2.9",
"@angular/core": "^15.2.9",
"@angular/elements": "^15.2.9",
"@angular/animations": "^16.2.9",
"@angular/cdk": "^16.2.9",
"@angular/common": "^16.2.9",
"@angular/compiler": "^16.2.9",
"@angular/core": "^16.2.9",
"@angular/elements": "^16.2.9",
"@angular/flex-layout": "^15.0.0-beta.42",
"@angular/forms": "^15.2.9",
"@angular/material": "^15.2.9",
"@angular/platform-browser": "^15.2.9",
"@angular/platform-browser-dynamic": "^15.2.9",
"@angular/router": "^15.2.9",
"@angular/forms": "^16.2.9",
"@angular/material": "^16.2.9",
"@angular/platform-browser": "^16.2.9",
"@angular/platform-browser-dynamic": "^16.2.9",
"@angular/router": "^16.2.9",
"@ng-web-apis/common": "^2.0.1",
"@ng-web-apis/intersection-observer": "^3.0.0",
"@stomp/rx-stomp": "^1.1.4",
"@stomp/stompjs": "^5.4.4",
"@tinymce/tinymce-angular": "^4.2.4",
"@tinymce/tinymce-angular": "^7.0.0",
"@wise-community/drawing-tool": "^2.3.0-pre.1",
"@zxcvbn-ts/core": "^2.2.1",
"@zxcvbn-ts/language-en": "^2.1.0",
"angular-password-strength-meter": "^6.0.0",
"@wise-community/angular-password-strength-meter": "^7.0.1",
"canvg": "^2.0.0",
"compute-covariance": "^1.0.1",
"core-js": "^3.22.0",
Expand All @@ -39,16 +39,16 @@
"fabric": "3.6.3",
"file-saver": "^2.0.5",
"highcharts": "^9.3.3",
"highcharts-angular": "^2.10.0",
"highcharts-angular": "^3.1.2",
"html2canvas": "^0.5.0-beta4",
"iframe-resizer": "^3.6.6",
"jquery": "^3.6.0",
"jwt-decode": "^3.1.2",
"lz-string": "^1.4.4",
"mathjax": "^3.2.2",
"ng-file-upload": "^12.2.13",
"ng-recaptcha": "^11.0.0",
"ng2-file-upload": "^4.0.0",
"ng-recaptcha": "^12.0.2",
"ng2-file-upload": "^5.0.0",
"ngx-filesize": "^3.0.2",
"rxjs": "^7.5.6",
"sockjs-client": "^1.6.0",
Expand All @@ -59,19 +59,19 @@
"tslib": "^2.3.1",
"webfontloader": "^1.6.28",
"xmldom": "^0.1.31",
"zone.js": "^0.11.5"
"zone.js": "^0.13.3"
},
"devDependencies": {
"@angular-builders/custom-webpack": "^15.0.0",
"@angular-devkit/build-angular": "^15.2.8",
"@angular/cli": "^15.2.8",
"@angular/compiler-cli": "^15.2.9",
"@angular/language-service": "^15.2.9",
"@angular/localize": "^15.2.9",
"@angular-builders/custom-webpack": "^16.0.1",
"@angular-devkit/build-angular": "^16.2.6",
"@angular/cli": "^16.2.6",
"@angular/compiler-cli": "^16.2.9",
"@angular/language-service": "^16.2.9",
"@angular/localize": "^16.2.9",
"@babel/cli": "^7.17.6",
"@babel/core": "^7.17.9",
"@babel/preset-env": "^7.16.11",
"@ngtools/webpack": "^15.2.8",
"@ngtools/webpack": "^16.2.6",
"@semantic-release/github": "^8.0.4",
"@types/dom-mediacapture-record": "^1.0.11",
"@types/jasmine": "^4.3.1",
Expand Down Expand Up @@ -114,7 +114,7 @@
"ts-loader": "^6.2.2",
"ts-node": "~8.2.0",
"tslint": "~6.1.0",
"typescript": "^4.8.4",
"typescript": "^4.9.5",
"url-loader": "^4.1.1",
"webpack-bundle-analyzer": "^4.5.0",
"webpack-dev-server": "^4.15.0",
Expand Down
22 changes: 14 additions & 8 deletions src/app/classroom-monitor/milestones/milestones.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,20 +4,28 @@
<mat-card
appearance="outlined"
*ngFor="let milestone of milestones"
class="milestone md-button"
md-ink-ripple
class="milestone"
role="button"
tabindex="0"
aria-label="Show milestone details"
i18-aria-label
(click)="showMilestoneDetails(milestone, $event)"
(keyup.enter)="showMilestoneDetails(milestone, $event)"
>
<mat-card-content fxLayout="column" fxLayoutAlign="center center">
<div class="milestone__title" md-truncate>{{ milestone.name }}</div>
<div class="milestone__progress">
<div class="milestone__progress mat-app-background">
<mat-progress-spinner
diameter="96"
mode="determinate"
[value]="milestone.percentageCompleted"
[ngClass]="{ success: milestone.percentageCompleted === 100 }"
></mat-progress-spinner>
<div class="milestone__progress__percent" fxLayout="row" fxLayoutAlign="center center">
<div
class="milestone__progress__percent mat-subtitle-2"
fxLayout="row"
fxLayoutAlign="center center"
>
<span *ngIf="milestone.percentageCompleted < 100"
>{{ milestone.percentageCompleted }}%</span
>
Expand All @@ -26,13 +34,11 @@
</mat-icon>
</div>
</div>
<p class="md-body-1 text-secondary">
<p class="text-secondary" i18n>
{{ milestone.numberOfStudentsCompleted }}/{{ milestone.numberOfStudentsInRun }} teams
completed
</p>
<p *ngIf="milestone.isReportAvailable" class="md-body-2 info" i18n>
~ Report Available ~
</p>
<p *ngIf="milestone.isReportAvailable" class="info" i18n>~ Report Available ~</p>
</mat-card-content>
</mat-card>
</div>
Expand Down
45 changes: 45 additions & 0 deletions src/app/classroom-monitor/milestones/milestones.component.scss
Original file line number Diff line number Diff line change
@@ -1,3 +1,48 @@
:host ::ng-deep .success circle {
stroke: #00C853;
}

.milestone {
min-width: 196px;
width: 196px;
min-height: 242px;
background-color: #ffffff;
padding: 0;
margin: 4px;
cursor: pointer;
}

.milestone__progress {
border-radius: 50%;
position: relative;
margin-bottom: 12px;
}

.milestone__progress__percent {
position: absolute;
top: 8px;
bottom: 8px;
left: 8px;
right: 8px;
border-radius: 50%;
background-color: #ffffff;
font-weight: 500;
}

.milestone__title {
font-weight: 700;
margin-bottom: 12px;
}

.milestone--add {
&.md-button {
text-transform: uppercase;
}
}

.milestone--add__icon {
height: 96px;
width: 96px;
background-color: color('gray-lighter');
border-radius: 50%;
}
Original file line number Diff line number Diff line change
@@ -1,10 +0,0 @@

.progress-wrapper {
.mat-mdc-progress-bar, .mdc-linear-progress__bar-inner {
height: 14px;
}

.mdc-linear-progress__bar-inner {
border-top-width: 14px;
}
}
2 changes: 1 addition & 1 deletion src/app/password/password.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { NewPasswordAndConfirmComponent } from './new-password-and-confirm/new-password-and-confirm.component';
import { MatIconModule } from '@angular/material/icon';
import { PasswordStrengthMeterModule } from 'angular-password-strength-meter';
import { PasswordStrengthMeterModule } from '@wise-community/angular-password-strength-meter';
import { PasswordRequirementComponent } from './password-requirement/password-requirement.component';
import { MatMenuModule } from '@angular/material/menu';

Expand Down
2 changes: 1 addition & 1 deletion src/app/student/account/edit/edit.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
</header>

<section>
<mat-tab-group>
<mat-tab-group mat-stretch-tabs="false">
<mat-tab i18n-label label="Account Info">
<div class="section__tab">
<student-edit-profile></student-edit-profile>
Expand Down
4 changes: 2 additions & 2 deletions src/app/student/auth.guard.ts
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { UserService } from '../services/user.service';

@Injectable()
export class AuthGuard implements CanActivate {
export class AuthGuard {
constructor(private userService: UserService, private router: Router) {}

canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
Expand Down
2 changes: 1 addition & 1 deletion src/app/teacher/account/edit/edit.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
</header>

<section>
<mat-tab-group>
<mat-tab-group mat-stretch-tabs="false">
<mat-tab i18n-label label="Account Info">
<div class="section__tab">
<teacher-edit-profile></teacher-edit-profile>
Expand Down
4 changes: 2 additions & 2 deletions src/app/teacher/auth.guard.ts
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { UserService } from '../services/user.service';

@Injectable()
export class AuthGuard implements CanActivate {
export class AuthGuard {
constructor(private userService: UserService, private router: Router) {}

canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
[diameter]="24"
>
</mat-spinner>
<span *ngIf="globalMessage.text" class="component__actions__info md-caption global-message">
<span *ngIf="globalMessage.text" class="component__actions__info mat-small global-message">
{{ globalMessage.text }} {{ globalMessage.time | date: 'medium' }}
</span>
</div>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
mat-form-field {
width: 100%;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
mat-form-field {
width: 64px;
}

input {
text-align: center;
}
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,8 @@
<div fxLayout="row" fxLayoutAlign="start center">
<nav-item-progress
[period]="currentPeriod"
[nodeCompletion]="milestone.percentageCompleted"></nav-item-progress>
[nodeCompletion]="milestone.percentageCompleted"
></nav-item-progress>
</div>
</div>
<p *ngIf="milestone.description">
Expand Down Expand Up @@ -49,7 +50,11 @@
</section>
<section class="mat-elevation-z1 app-bg-bg">
<div *ngIf="milestone.generatedRecommendations && milestone.isReportAvailable">
<mat-tab-group (selectedTabChange)="saveTabSelectedEvent($event)" class="notice-bg-bg">
<mat-tab-group
(selectedTabChange)="saveTabSelectedEvent($event)"
mat-stretch-tabs="false"
class="notice-bg-bg"
>
<mat-tab label="Recommendation" i18n-label>
<div class="milestone-details__section" [innerHTML]="recommendations"></div>
</mat-tab>
Expand Down Expand Up @@ -92,7 +97,9 @@
account_circle
</mat-icon>
</span>
<span class="mat-subtitle-2">{{ getDisplayNamesByWorkgroupId(workgroup.workgroupId) }}</span>
<span class="mat-subtitle-2">{{
getDisplayNamesByWorkgroupId(workgroup.workgroupId)
}}</span>
</span>
<span fxFlex></span>
<span class="mat-subtitle-2">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@
fxLayoutAlign="center center"
>
<span
class="md-display-1"
class="mat-headline-5"
[ngClass]="{ success: changeInScore > 0, warn: changeInScore < 0 }"
>
<span *ngIf="changeInScore > 0">+</span>{{ changeInScore }}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,4 +12,8 @@
.mdc-list-item.mdc-list-item--with-one-line {
height: auto;
}

.mat-headline-5 {
margin: 0;
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
}

.mat-mdc-card-actions {
padding: 8px 16px;
padding: 0 16px;
border-top: 1px solid #dddddd;
}

Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<mat-toolbar class="mat-elevation-z1 toolbar">
<div class="md-toolbar-tools toolbar__tools">
<div class="toolbar__tools" fxLayout="row" fxLayoutAlign="start center">
<button
mat-icon-button
aria-label="Main Menu"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,4 +7,5 @@

.toolbar__tools {
padding: 0 4px;
width: 100%;
}
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div layout="row" layout-align="center center" class="layout-align-center-center layout-row">
<span class="md-display-1">{{ score }}</span
>&nbsp;<span class="md-title text-secondary normal">/{{ maxScore }}</span>
<div fxLayout="row" fxLayoutAlign="center center">
<span class="mat-headline-5">{{ score }}</span
>&nbsp;<span class="text-secondary mat-body-2">/{{ maxScore }}</span>
</div>
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.mat-headline-5 {
margin: 0;
}
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,8 @@ import { Input, Component } from '@angular/core';

@Component({
selector: 'workgroup-node-score',
templateUrl: 'workgroup-node-score.component.html'
templateUrl: 'workgroup-node-score.component.html',
styleUrls: ['workgroup-node-score.component.scss']
})
export class WorkgroupNodeScoreComponent {
@Input()
Expand Down
Original file line number Diff line number Diff line change
@@ -1,9 +0,0 @@
.project-progress {
.nav-item__progress {
height: 14px;

.mdc-linear-progress__bar-inner {
border-top-width: 14px;
}
}
}
Loading

0 comments on commit 4f2a1e0

Please sign in to comment.