Skip to content

Commit

Permalink
refactor: remove flex-layout from home page
Browse files Browse the repository at this point in the history
  • Loading branch information
jakerenzella committed Feb 24, 2024
1 parent 45df636 commit 6884ae5
Show file tree
Hide file tree
Showing 15 changed files with 353 additions and 319 deletions.
15 changes: 0 additions & 15 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 1 addition & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,6 @@
"@angular/common": "^17.2.2",
"@angular/compiler": "^17.2.2",
"@angular/core": "^17.2.2",
"@angular/flex-layout": "^15.0.0-beta.42",
"@angular/forms": "^17.2.2",
"@angular/material": "^17.2.1",
"@angular/material-moment-adapter": "^17.2.1",
Expand Down Expand Up @@ -160,4 +159,4 @@
"typescript": "~5.2",
"underscore": "^1.8.3"
}
}
}
112 changes: 75 additions & 37 deletions src/app/common/edit-profile-form/edit-profile-form.component.html
Original file line number Diff line number Diff line change
@@ -1,9 +1,19 @@
<form #form="ngForm" (ngSubmit)="submit()" fxLayout="column" fxLayoutAlign="center start" class="p-16">
<form
#form="ngForm"
(ngSubmit)="submit()"
fxLayout="column"
fxLayoutAlign="center start"
class="p-16"
>
<div class="main-container" style="width: 100%" fxLayout="row" fxLayoutAlign="center start">
<div class="main" style="width: 100%" fxLayout="column" fxLayoutAlign="start start">
<!-- avatar -->
<div fxLayout="row" fxLayoutAlign="space-between center" style="margin-bottom: 25px">
<a style="margin-left: 20px" href="https://gravatar.com/connect/?source=_signup/" target="_blank">
<a
style="margin-left: 20px"
href="https://gravatar.com/connect/?source=_signup/"
target="_blank"
>
<user-icon [size]="80" [user]="user" style="margin-right: 25px"></user-icon
></a>

Expand All @@ -13,7 +23,7 @@ <h1>{{ initialFirstName }}</h1>
</div>
</div>

<div fxLayout="row" fxFlexFill>
<div class="flex row w-full">
<mat-form-field fxFlex="48" appearance="outline" fxFlexAlign="start">
<mat-label>First Name</mat-label>
<input matInput class="outline-none" [(ngModel)]="user.firstName" name="first" required />
Expand All @@ -27,7 +37,7 @@ <h1>{{ initialFirstName }}</h1>
</mat-form-field>
</div>

<div fxLayout="row" fxFlexFill>
<div class="flex flex-row w-full" >
<!-- <mat-form-field fxFlex="25" fxFlexAlign="start" appearance="outline">
<mat-label>Pronouns</mat-label>
<mat-select [(ngModel)]="formPronouns.pronouns" name="pronouns">
Expand Down Expand Up @@ -58,10 +68,10 @@ <h1>{{ initialFirstName }}</h1>
</mat-form-field>

@if (user.systemRole === 'Student') {
<mat-form-field appearance="outline" fxFlexFill>
<mat-label>Student ID</mat-label>
<input matInput [(ngModel)]="user.studentId" name="student_id" required />
</mat-form-field>
<mat-form-field appearance="outline" fxFlexFill>
<mat-label>Student ID</mat-label>
<input matInput [(ngModel)]="user.studentId" name="student_id" required />
</mat-form-field>
}

<mat-form-field appearance="outline" fxFlexFill>
Expand All @@ -70,56 +80,84 @@ <h1>{{ initialFirstName }}</h1>
</mat-form-field>

@if (canSeeSystemRole) {
<mat-form-field fxFlexFill appearance="outline">
<mat-label>System Role</mat-label>
<mat-select [(ngModel)]="user.systemRole" name="systemRole" [disabled]="!canEditSystemRole">
<mat-option value="Admin">Administrator</mat-option>
<mat-option value="Convenor">Convenor</mat-option>
<mat-option value="Tutor">Tutor</mat-option>
<mat-option value="Student">Student</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field fxFlexFill appearance="outline">
<mat-label>System Role</mat-label>
<mat-select
[(ngModel)]="user.systemRole"
name="systemRole"
[disabled]="!canEditSystemRole"
>
<mat-option value="Admin">Administrator</mat-option>
<mat-option value="Convenor">Convenor</mat-option>
<mat-option value="Tutor">Tutor</mat-option>
<mat-option value="Student">Student</mat-option>
</mat-select>
</mat-form-field>
}

<section fxLayout="column" fxFlexFill fxLayoutAlign="center start">
<mat-checkbox class="" color="primary" [(ngModel)]="user.receiveFeedbackNotifications" name="feedback_n"
<mat-checkbox
class=""
color="primary"
[(ngModel)]="user.receiveFeedbackNotifications"
name="feedback_n"
>Receive notifications for new messages</mat-checkbox
>
<div fxFlex></div>
<mat-checkbox color="primary" [(ngModel)]="user.receivePortfolioNotifications" name="portfolio_n"
<mat-checkbox
color="primary"
[(ngModel)]="user.receivePortfolioNotifications"
name="portfolio_n"
>Receive notifications when your portfolio is ready</mat-checkbox
>
<div fxFlex></div>
<mat-checkbox fxFlex color="primary" [(ngModel)]="user.receiveTaskNotifications" name="task_n"
<mat-checkbox
fxFlex
color="primary"
[(ngModel)]="user.receiveTaskNotifications"
name="task_n"
>Receive notifications when new tasks are available</mat-checkbox
>
</section>
<section fxLayout="row" fxFlexFill fxLayoutAlign="start center">
<section class="flex flex-row w-full" fxLayoutAlign="start center">
<mat-checkbox color="primary" [(ngModel)]="user.optInToResearch" name="optin"
>Send anonymous research statistics
</mat-checkbox>
</section>

<div fxLayout="row" fxFlexFill style="padding-top: 12px">
<button [hidden]="mode === 'edit'" fxFlexAlign="start" type="button" mat-stroked-button (click)="signOut()">
Sign Out
</button>
<div fxFlex></div>
@if (mode === 'create') {
<button [disabled]="form.invalid" fxFlexAlign="end" type="submit" mat-flat-button color="primary">
Confirm Account
</button>
} @if (mode === 'edit') {
<div class="flex flex-row w-full p-top-12[px]">
<button
[hidden]="mode === 'edit'"
fxFlexAlign="start"
type="button"
[disabled]="form.invalid"
fxFlexAlign="end"
(click)="submit()"
mat-flat-button
color="primary"
mat-stroked-button
(click)="signOut()"
>
Save Profile
Sign Out
</button>
<div fxFlex></div>
@if (mode === 'create') {
<button
[disabled]="form.invalid"
fxFlexAlign="end"
type="submit"
mat-flat-button
color="primary"
>
Confirm Account
</button>
}
@if (mode === 'edit') {
<button
type="button"
[disabled]="form.invalid"
fxFlexAlign="end"
(click)="submit()"
mat-flat-button
color="primary"
>
Save Profile
</button>
}
</div>
</div>
Expand Down
146 changes: 70 additions & 76 deletions src/app/common/header/header.component.html
Original file line number Diff line number Diff line change
@@ -1,85 +1,79 @@
@if (showHeader) {
<mat-toolbar
[ngClass]="{ inbox: globalState.isInboxState }"
class="flex items-center justify-start"
style="min-height: 85px"
>
@if (!media.isActive('xs')) {
<a uiSref="home" class="pt-4">
<mat-icon
uiSref="home"
style="margin-right: 20px; margin-left: 20px"
svgIcon="formatif-logo"
class="formatif-icon"
aria-label="Formatif logo"
></mat-icon>
</a>
}
<mat-toolbar class="flex items-center justify-start" style="min-height: 85px">
@if (true) {
<a uiSref="home" class="pt-4">
<mat-icon
uiSref="home"
style="margin-right: 20px; margin-left: 20px"
svgIcon="formatif-logo"
class="formatif-icon"
aria-label="Formatif logo"
></mat-icon>
</a>
}

<unit-dropdown [unit]="currentUnit" [unitRoles]="filteredUnitRoles" [projects]="projects" class="mr-2">
</unit-dropdown>
<unit-dropdown
[unit]="currentUnit"
[unitRoles]="filteredUnitRoles"
[projects]="projects"
class="mr-2"
>
</unit-dropdown>

<task-dropdown
[currentUnit]="currentUnit"
[currentProject]="currentProject"
[currentView]="currentView"
[data]="data"
[unitRole]="currentUnitRole"
></task-dropdown>
<task-dropdown
[currentUnit]="currentUnit"
[currentProject]="currentProject"
[currentView]="currentView"
[data]="data"
[unitRole]="currentUnitRole"
></task-dropdown>

<span class="grow"></span>
<span class="grow"></span>

@if (currentUser.role === 'Admin' || currentUser.role === 'Convenor') {
<button
#menuState="matMenuTrigger"
mat-icon-button
fxShow.lt-sm="false"
fxShow.gt-md="true"
fxShow="true"
[matMenuTriggerFor]="menu"
>
<mat-icon>admin_panel_settings</mat-icon>
</button>
}
<mat-menu #menu="matMenu">
@if (currentUser.role === 'Admin') {
<button mat-menu-item uiSref="institutionsettings">
<mat-icon matListItemIcon>business</mat-icon>
Institution Settings
</button>
}
<button mat-menu-item uiSref="admin/units">
<mat-icon matListItemIcon>school</mat-icon>
Manage Units
</button>
@if (currentUser.role === 'Admin') {
<button mat-menu-item uiSref="admin/users">
<mat-icon matListItemIcon>people</mat-icon>
Manage Users
</button>
@if (currentUser.role === 'Admin' || currentUser.role === 'Convenor') {
<button #menuState="matMenuTrigger" mat-icon-button [matMenuTriggerFor]="menu">
<mat-icon>admin_panel_settings</mat-icon>
</button>
}
</mat-menu>
<mat-menu #menu="matMenu">
@if (currentUser.role === 'Admin') {
<button mat-menu-item uiSref="institutionsettings">
<mat-icon matListItemIcon>business</mat-icon>
Institution Settings
</button>
}
<button mat-menu-item uiSref="admin/units">
<mat-icon matListItemIcon>school</mat-icon>
Manage Units
</button>
@if (currentUser.role === 'Admin') {
<button mat-menu-item uiSref="admin/users">
<mat-icon matListItemIcon>people</mat-icon>
Manage Users
</button>
}
</mat-menu>

<button mat-button [matMenuTriggerFor]="menu2">
<user-icon [size]="32"></user-icon>
</button>
<mat-menu #menu2="matMenu">
<button mat-menu-item uiSref="edit_profile">
<mat-icon matListItemIcon aria-label="Edit profile">person</mat-icon>
Edit Profile
</button>
<button mat-menu-item (click)="openCalendar()">
<mat-icon matListItemIcon aria-label="Edit calendar">calendar_month</mat-icon>
Calendar
</button>
<button mat-menu-item (click)="openAboutModal()">
<mat-icon matListItemIcon aria-label="About">info</mat-icon>
About
</button>
<button mat-menu-item (click)="signOut()">
<mat-icon matListItemIcon aria-label="Sign out">logout</mat-icon>
Sign Out
<button mat-button [matMenuTriggerFor]="menu2">
<user-icon [size]="32"></user-icon>
</button>
</mat-menu>
</mat-toolbar>
<mat-menu #menu2="matMenu">
<button mat-menu-item uiSref="edit_profile">
<mat-icon matListItemIcon aria-label="Edit profile">person</mat-icon>
Edit Profile
</button>
<button mat-menu-item (click)="openCalendar()">
<mat-icon matListItemIcon aria-label="Edit calendar">calendar_month</mat-icon>
Calendar
</button>
<button mat-menu-item (click)="openAboutModal()">
<mat-icon matListItemIcon aria-label="About">info</mat-icon>
About
</button>
<button mat-menu-item (click)="signOut()">
<mat-icon matListItemIcon aria-label="Sign out">logout</mat-icon>
Sign Out
</button>
</mat-menu>
</mat-toolbar>
}
2 changes: 0 additions & 2 deletions src/app/common/header/header.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import { IsActiveUnitRole } from '../pipes/is-active-unit-role.pipe';
import { UserService } from 'src/app/api/services/user.service';
import { AuthenticationService, Project, Task, Unit, UnitRole, User } from 'src/app/api/models/doubtfire-model';
import { Subscription } from 'rxjs';
import { MediaObserver } from '@angular/flex-layout';

@Component({
selector: 'app-header',
Expand Down Expand Up @@ -40,7 +39,6 @@ export class HeaderComponent implements OnInit, OnDestroy {
protected globalState: GlobalStateService,
private userService: UserService,
private authService: AuthenticationService,
protected media: MediaObserver,
) {}

ngOnInit(): void {
Expand Down
Loading

0 comments on commit 6884ae5

Please sign in to comment.