Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

refactor: replace fxLayout with tailwind equivalent - edit-profile-form component #124

Closed
wants to merge 5 commits into from
Closed

refactor: replace fxLayout with tailwind equivalent - edit-profile-form component #124

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
aa2047c
refactor: replaced several properties
williamalowe Nov 27, 2023
2e792a7
refactor: 12/34 elements upated
williamalowe Nov 27, 2023
a1e39e4
refactor: all elements updated
williamalowe Dec 1, 2023
849dc14
refactor: fix formatting with prettier
williamalowe Dec 1, 2023
f398d6a
refactor: fix commented out line on line 53
williamalowe Dec 3, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
143 changes: 91 additions & 52 deletions src/app/common/edit-profile-form/edit-profile-form.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,33 +1,45 @@
<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">
<form #form="ngForm" (ngSubmit)="submit()" class="p-16 flex flex-col justify-start items-center">
<div class="main-container flex flex-row justify-start items-center" style="width: 100%">
<div class="main flex flex-col items-start place-content-start" style="width: 100%">
<!-- 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">
<div class="flex flex-row place-content-between items-center" style="margin-bottom: 25px">
<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>

<div fxLayout="column" fxLayoutAlign="space-around start">
<div class="flex flex-col place-content-around items-start">
<h1>{{ initialFirstName }}</h1>
Set up your {{ externalName.value }} profile
</div>
</div>

<div fxLayout="row" fxFlexFill>
<mat-form-field fxFlex="48" appearance="outline" fxFlexAlign="start">
<div class="flex flex-row w-full min-w-full h-full min-h-full">
<mat-form-field
class="grow shrink basis-full self-start"
style="max-width: 48%"
appearance="outline"
>
<mat-label>First Name</mat-label>
<input matInput class="outline-none" [(ngModel)]="user.firstName" name="first" required />
</mat-form-field>

<div fxFlex></div>
<div class="flex-1"></div>

<mat-form-field fxFlex="48" appearance="outline" fxFlexAlign="end">
<mat-form-field
class="grow shrink basis-full self-end"
style="max-width: 48%"
appearance="outline"
>
<mat-label>Second Name</mat-label>
<input matInput [(ngModel)]="user.lastName" name="last" required />
</mat-form-field>
</div>

<div fxLayout="row" fxFlexFill>
<div class="flex flex-row w-full h-full">
<!-- <mat-form-field fxFlex="25" fxFlexAlign="start" appearance="outline">
<mat-label>Pronouns</mat-label>
<mat-select [(ngModel)]="formPronouns.pronouns" name="pronouns">
Expand All @@ -37,15 +49,15 @@ <h1>{{ initialFirstName }}</h1>
<mat-option value="They/Them">They/Them</mat-option>
<mat-option value="__customPronouns">Custom</mat-option>
</mat-select>
</mat-form-field>
<div fxFlex="3"></div> -->
<mat-form-field fxFlexFill appearance="outline">
</mat-form-field> -->
<!-- <div fxFlex="3"></div> -->
<mat-form-field class="min-w-full h-full" appearance="outline">
<mat-label>Preferred Name</mat-label>
<input matInput [(ngModel)]="user.nickname" name="preferred_name" />
</mat-form-field>
</div>

<mat-form-field fxFlexFill appearance="outline" [hidden]="!customPronouns">
<mat-form-field class="w-full h-full" appearance="outline" [hidden]="!customPronouns">
<mat-label>Custom Pronouns</mat-label>
<input
matInput
Expand All @@ -58,68 +70,95 @@ <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 class="w-full h-full" appearance="outline">
<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-form-field class="w-full h-full" appearance="outline">
<mat-label>Email</mat-label>
<input type="email" matInput [(ngModel)]="user.email" name="email" required />
</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 class="w-full h-full" 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"
<section class="flex flex-col w-full h-full items-start place-content-center">
<mat-checkbox
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"
<div class="flex-1"></div>
<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"
<div class="flex-1"></div>
<mat-checkbox
class="flex-1"
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 h-full items-center place-content-start">
<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 h-full" style="padding-top: 12px">
<button
class="self-start"
[hidden]="mode === 'edit'"
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 class="flex-1"></div>
@if (mode === 'create') {
<button
class="self-end"
[disabled]="form.invalid"
type="submit"
mat-flat-button
color="primary"
>
Confirm Account
</button>
}
@if (mode === 'edit') {
<button
class="self-end"
type="button"
[disabled]="form.invalid"
(click)="submit()"
mat-flat-button
color="primary"
>
Save Profile
</button>
}
</div>
</div>
Expand Down
Loading