Skip to content

Commit

Permalink
Merge pull request #48 from smagara/dialogcssdesign
Browse files Browse the repository at this point in the history 
Improve web styling for NHL Roster detail popup
  • Loading branch information
@smagara
smagara authored Aug 24, 2024
2 parents ac57c44 + 5be48dd commit e8c704c
Show file tree
Hide file tree
Showing 3 changed files with 108 additions and 29 deletions.
52 changes: 30 additions & 22 deletions src/app/nhl/components/roster/roster.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,34 +49,40 @@ <h2 class="NHL">National Hockey League - Team Rosters</h2>
</ng-template>
</p-table>

<p-dialog header="NHL Player Detail" [(visible)]="display" [modal]="true" [style]="{width: '50vw'}"
[responsive]="true" (onHide)="onDialogHide()">
<form [formGroup]="nhlForm" (ngSubmit)="isAdding ? add() : save()">
<p-dialog id="detailPopup" header="NHL Player Detail" [(visible)]="display" [modal]="true" [style]="{width: '30vw'}"
[responsive]="true" class="custom-dialog" (onHide)="onDialogHide()">
<form [formGroup]="nhlForm" (ngSubmit)="isAdding ? add() : save(); isSubmitted = true">
<div class="p-fluid">
<div class="p-field">
<hr class="divider" />
<div class="detailField">
<label for="team">Team</label>
<input id="team" pInputText formControlName="team" maxlength="50" />
</div>
<div class="p-field">
<div class="detailField">
<label for="name">Name</label>
<input id="name" pInputText formControlName="name" maxlength="50" />
<input id="name" pInputText formControlName="name" maxlength="50" placeholder="First Last..."/>
</div>
<div class="p-field">
<div class="detailField">
<label for="position">Position</label>
<input id="position" pInputText formControlName="position" />
</div>
<div class="p-field">
<div class="detailField">
<label for="number">Number</label>
<input id="number" pInputText formControlName="number" />
</div>
<div class="p-field">
<div class="detailField">
<label for="handed">Handed</label>
<input id="handed" pInputText formControlName="handed" />
<select id="handed" formControlName="handed" class="handed" title="handed" placeholder="Select Right, Left, Both...">
<option *ngFor="let theHand of handedList" [value]="theHand.hand">{{ theHand.label }}</option>
</select>
<div *ngIf="nhlForm.get('handed')?.invalid && (nhlForm.get('handed')?.touched || isSubmitted)">
<div class="field-error" *ngIf="nhlForm.get('handed')?.errors?.['required']">Handed is required.</div>
</div>
</div>
<div class="p-field">
<div class="detailField">
<label for="drafted">Drafted Year</label>
<input id="drafted" pInputText formControlName="drafted" maxlength="4" />
<div *ngIf="nhlForm.get('drafted')?.invalid && nhlForm.get('drafted')?.touched">
<input id="drafted" pInputText formControlName="drafted" maxlength="4" placeholder="YYYY..." />
<div *ngIf="nhlForm.get('drafted')?.invalid && (nhlForm.get('drafted')?.touched || isSubmitted)">
<div class="field-error" *ngIf="nhlForm.get('drafted')?.errors?.['required']">Drafted Year is required.
</div>
<div class="field-error" *ngIf="nhlForm.get('drafted')?.errors?.['pattern']">Drafted Year must be a 4-digit
Expand All @@ -85,33 +91,35 @@ <h2 class="NHL">National Hockey League - Team Rosters</h2>
1900 - Current Year.</div>
</div>
</div>
<div class="p-field">
<div class="detailField">
<label for="birthCountry">Birth Country</label>
<input id="birthCountry" pInputText formControlName="birthCountry" maxlength="50" />
</div>
<div class="p-field">
<div class="detailField">
<label for="birthPlace">Birth Place</label>
<input id="birthPlace" pInputText formControlName="birthPlace" maxlength="50" />
</div>
<div class="p-field">
<div class="detailField">
<label for="age">Age</label>
<input id="age" pInputText formControlName="age" maxlength="3" />
<div *ngIf="nhlForm.get('age')?.invalid && nhlForm.get('age')?.touched">
<div *ngIf="nhlForm.get('age')?.invalid && (nhlForm.get('age')?.touched || isSubmitted)">
<div class="field-error" *ngIf="nhlForm.get('age')?.errors?.['required']">Age is required.</div>
<div class="field-error" *ngIf="nhlForm.get('age')?.errors?.['min']">Age must be at least 18.</div>
<div class="field-error" *ngIf="nhlForm.get('age')?.errors?.['max']">Age can be up to 55.</div>
<div class="field-error" *ngIf="nhlForm.get('age')?.errors?.['pattern']">Age must a number.</div>
</div>
</div>
<div class="p-field">
<div class="detailField">
<label for="playerID">PlayerID</label>
<input id="playerID" readonly pInputText formControlName="playerID" />
</div>

<button *ngIf="isAdding" title="Add" pButton type="submit" icon="pi pi-add" label="Add">Add</button>
<button *ngIf="!isAdding" title="Save" pButton type="submit" icon="pi pi-save" label="Save">Save</button>
<button title="Cancel" pButton type="button" icon="pi pi-cancel" (click)="hideDialog()"
label="Cancel">Cancel</button>
<div class="detailButton">
<button *ngIf="isAdding" title="Add" pButton type="submit" icon="pi pi-add" label="Add">Add</button>
<button *ngIf="!isAdding" title="Save" pButton type="submit" icon="pi pi-save" label="Save">Save</button>
<button title="Cancel" pButton type="button" icon="pi pi-cancel" (click)="hideDialog()"
label="Cancel">Cancel</button>
</div>
</div>
<div *ngIf="errMessage.length" class="errMessage">
{{errMessage}}
Expand Down
37 changes: 30 additions & 7 deletions src/app/nhl/components/roster/roster.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { FormGroup, FormControl, Validators } from '@angular/forms';
import { NhlService } from '../../services/nhl.service';
import { NHLRosterDto } from '../../services/nhl';
import { yearRangeValidator } from 'src/app/common/validators/year-range';
import { delay } from 'rxjs';
import { delay, switchMap, timer } from 'rxjs';

@Component({
selector: 'sports-roster',
Expand All @@ -19,6 +19,12 @@ export class RosterComponent implements OnInit {
display: boolean = false;
selectedRow: any = {};
isAdding: boolean = false;
isSubmitted: boolean = false;
handedList: { label: string, hand: string }[] = [
{ label: '*** Please Select ***', hand: '' },
{ label: 'Left', hand: 'L' },
{ label: 'Right', hand: 'R' },
{ label: 'Both', hand: 'B' }];

constructor(
private nhlService: NhlService
Expand All @@ -31,7 +37,7 @@ export class RosterComponent implements OnInit {
name: new FormControl(''),
position: new FormControl(''),
number: new FormControl(''),
handed: new FormControl(''),
handed: new FormControl(null, [Validators.required]),
drafted: new FormControl(null,
[Validators.required,
yearRangeValidator(1900, currentYear), // Use the custom validator
Expand All @@ -54,6 +60,7 @@ export class RosterComponent implements OnInit {
resetAction() {
this.errMessage = "";
this.isAdding = false;
this.isSubmitted = false;
this.nhlForm.reset();
}

Expand Down Expand Up @@ -97,9 +104,16 @@ export class RosterComponent implements OnInit {

this.nhlService.SaveRoster(this.selectedRow).subscribe({
next: data => {
console.log('Player saved successfully', data);
this.loadRoster(); // reload the grid
this.display = false;
console.log('Player updated successfully', data);
this.errMessage = "Player updated successfully!";

timer(2000).pipe(
switchMap(() => {
this.loadRoster(); // reload the grid
this.display = false;
return [];
})
).subscribe();
},
error: error => {
console.error('There was an error saving the player!', error);
Expand All @@ -116,9 +130,17 @@ export class RosterComponent implements OnInit {

this.nhlService.AddRoster(this.nhlForm.value).subscribe({
next: data => {

console.log('Player added successfully', data);
this.loadRoster(); // reload the grid
this.display = false;
this.errMessage = "Player added successfully!";

timer(2000).pipe(
switchMap(() => {
this.loadRoster(); // reload the grid
this.display = false;
return [];
})
).subscribe();
},
error: error => {
console.error('There was an error adding the player!', error);
Expand Down Expand Up @@ -181,6 +203,7 @@ export class RosterComponent implements OnInit {
playerID: this.selectedRow.playerID
};
}

}


48 changes: 48 additions & 0 deletions src/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,14 @@ ui-dropdown-panel .ui-dropdown-items-wrapper {
margin: 3px 0 0 3px;
}

.handed {
max-width: 15em;
min-width: 8em;
padding: 1px 0 0 1px;
max-height: 3em;
margin: 3px 0 0 3px;
}

.divider {
width: 98%;
color: lightgrey;
Expand Down Expand Up @@ -148,3 +156,43 @@ td.actions {
font-size: 0.875rem;
margin-top: 0.25rem;
}

.divider {
margin-top: 0;
margin-bottom: 0;
padding: 0;
border-top: darkblue 4px solid;
}

.detailField label, .detailField input, .detailField select {
display: inline-block;
}

.detailField input, .detailField select {
width: 40%;
text-align: left;
min-width: 140px;
margin:0;
}

.detailField label {
width: 10%;
min-width: 140px;
text-align: left;
padding-right: 2em;
padding-top: 1em;
font-weight: bold;
}

.detailButton {
display: flex;
justify-content: center;
gap: 1em;
margin-top: 2em;
}

.detailButton button {
width: 5em;
min-width: 5em;
text-align: center;
}

0 comments on commit e8c704c

Please sign in to comment.