Refactor AppealComponent to remove dynamic height logic, integrate FullSizeComponent, and simplify imports.
This commit is contained in:
parent
5876298ae9
commit
20ec3648c4
|
|
@ -6,156 +6,161 @@
|
|||
</div>
|
||||
</app-header>
|
||||
<main>
|
||||
<section class="darkmodeSection appeal-container">
|
||||
<div class="form-container">
|
||||
<div class="pages">
|
||||
@if (currentPageIndex === 0) {
|
||||
@if (history()?.length === 0) {
|
||||
<section class="formPage">
|
||||
<img ngSrc="/public/img/logos/logo.png" alt="Discord" height="319" width="550"/>
|
||||
<h1>Punishment Appeal</h1>
|
||||
<p>You have no punishments to appeal.</p>
|
||||
</section>
|
||||
} @else {
|
||||
<section class="formPage">
|
||||
<img ngSrc="/public/img/logos/logo.png" alt="Discord" height="319" width="550"/>
|
||||
<h1>Punishment Appeal</h1>
|
||||
<p>We aim to respond within 48 hours.</p>
|
||||
<button mat-raised-button (click)="nextPage()" [disabled]="history() == null">
|
||||
@if (history() == null) {
|
||||
<mat-spinner></mat-spinner>
|
||||
} @else {
|
||||
Next
|
||||
}
|
||||
</button>
|
||||
</section>
|
||||
}
|
||||
}
|
||||
|
||||
@if (currentPageIndex === 1) {
|
||||
<section class="formPage">
|
||||
<div class="description">
|
||||
<p>You are logged in as <strong>{{ authService.username() }}</strong>. If this is the correct account
|
||||
please continue</p>
|
||||
<br>
|
||||
<p><strong>Notice: </strong> Submitting an appeal is <strong>not</strong> an instant process.
|
||||
We will investigate the punishment you are appealing and respond within 48 hours.</p>
|
||||
<p style="font-style: italic;">Appeals that seem to have been made with
|
||||
little to no effort will be automatically denied.</p>
|
||||
</div>
|
||||
<button mat-raised-button (click)="nextPage()" [disabled]="authService.username() == null">
|
||||
I, {{ authService.username() }}, understand and agree
|
||||
</button>
|
||||
</section>
|
||||
}
|
||||
|
||||
@if (currentPageIndex === 2) {
|
||||
<section class="formPage">
|
||||
<div class="description">
|
||||
<h2>Please select the punishment you want to appeal</h2>
|
||||
</div>
|
||||
<mat-form-field>
|
||||
<mat-label>Punishment</mat-label>
|
||||
<mat-select (valueChange)="onPunishmentSelected($event)">
|
||||
@for (punishment of history(); track punishment) {
|
||||
<mat-option [value]="punishment">{{ punishment.type }} - {{ punishment.reason }}</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
@if (selectedPunishment() != null) {
|
||||
<button mat-raised-button (click)="nextPage()" [disabled]="selectedPunishment() == null">
|
||||
Appeal {{ selectedPunishment()!.type }}
|
||||
</button>
|
||||
<app-full-size>
|
||||
<section class="darkmodeSection appeal-container">
|
||||
<div class="form-container">
|
||||
<div class="pages">
|
||||
@if (currentPageIndex === 0) {
|
||||
@if (history()?.length === 0) {
|
||||
<section class="formPage">
|
||||
<img ngSrc="/public/img/logos/logo.png" alt="Discord" height="319" width="550"/>
|
||||
<h1>Punishment Appeal</h1>
|
||||
<p>You have no punishments to appeal.</p>
|
||||
</section>
|
||||
} @else {
|
||||
<section class="formPage">
|
||||
<img ngSrc="/public/img/logos/logo.png" alt="Discord" height="319" width="550"/>
|
||||
<h1>Punishment Appeal</h1>
|
||||
<p>We aim to respond within 48 hours.</p>
|
||||
<button mat-raised-button (click)="nextPage()" [disabled]="history() == null">
|
||||
@if (history() == null) {
|
||||
<mat-spinner></mat-spinner>
|
||||
} @else {
|
||||
Next
|
||||
}
|
||||
</button>
|
||||
</section>
|
||||
}
|
||||
</section>
|
||||
}
|
||||
}
|
||||
|
||||
<form [formGroup]="form">
|
||||
@if (currentPageIndex === 3) {
|
||||
@if (currentPageIndex === 1) {
|
||||
<section class="formPage">
|
||||
<div class="description">
|
||||
<h2>Please enter your email.</h2>
|
||||
<p style="font-style: italic">It does not have to be your minecraft email. You will have to verify
|
||||
it</p>
|
||||
<mat-form-field appearance="fill" style="width: 100%;">
|
||||
<mat-label>Email</mat-label>
|
||||
<input matInput
|
||||
formControlName="email"
|
||||
placeholder="Email">
|
||||
@if (form.controls.email.invalid && form.controls.email.touched) {
|
||||
<mat-error>
|
||||
@if (form.controls.email.errors?.['required']) {
|
||||
Email is required
|
||||
} @else if (form.controls.email.errors?.['email']) {
|
||||
Please enter a valid email address
|
||||
}
|
||||
</mat-error>
|
||||
}
|
||||
</mat-form-field>
|
||||
@if (emailIsValid()) {
|
||||
<div class="valid-email">
|
||||
<ng-container matSuffix>
|
||||
<mat-icon>check</mat-icon>
|
||||
<span>You have validated your email previously, and can continue to the next page!</span>
|
||||
</ng-container>
|
||||
</div>
|
||||
}
|
||||
<p>You are logged in as <strong>{{ authService.username() }}</strong>. If this is the correct
|
||||
account
|
||||
please continue</p>
|
||||
<br>
|
||||
<p><strong>Notice: </strong> Submitting an appeal is <strong>not</strong> an instant process.
|
||||
We will investigate the punishment you are appealing and respond within 48 hours.</p>
|
||||
<p style="font-style: italic;">Appeals that seem to have been made with
|
||||
little to no effort will be automatically denied.</p>
|
||||
</div>
|
||||
<button mat-raised-button (click)="validateMailOrNextPage()" [disabled]="form.controls.email.invalid">
|
||||
Next
|
||||
<button mat-raised-button (click)="nextPage()" [disabled]="authService.username() == null">
|
||||
I, {{ authService.username() }}, understand and agree
|
||||
</button>
|
||||
</section>
|
||||
}
|
||||
|
||||
@if (currentPageIndex === 4) {
|
||||
@if (currentPageIndex === 2) {
|
||||
<section class="formPage">
|
||||
<div class="description">
|
||||
<h2>Why should your {{ selectedPunishment()?.type }} be reduced or removed?</h2>
|
||||
<p style="font-style: italic">Please take your time writing this, we're more likely to accept an
|
||||
appeal if effort was put into it.</p>
|
||||
<mat-form-field appearance="fill" style="width: 100%;">
|
||||
<mat-label>Reason</mat-label>
|
||||
<textarea matInput formControlName="appeal" placeholder="Reason" rows="6"></textarea>
|
||||
@if (form.controls.appeal.invalid && form.controls.appeal.touched) {
|
||||
<mat-error>
|
||||
@if (form.controls.appeal.errors?.['required']) {
|
||||
Reason is required
|
||||
} @else if (form.controls.appeal.errors?.['minlength']) {
|
||||
Reason must be at least 10 characters
|
||||
}
|
||||
</mat-error>
|
||||
}
|
||||
</mat-form-field>
|
||||
<h2>Please select the punishment you want to appeal</h2>
|
||||
</div>
|
||||
<button mat-raised-button (click)="onSubmit()" [disabled]="form.invalid">
|
||||
Submit Appeal
|
||||
</button>
|
||||
<mat-form-field>
|
||||
<mat-label>Punishment</mat-label>
|
||||
<mat-select (valueChange)="onPunishmentSelected($event)">
|
||||
@for (punishment of history(); track punishment) {
|
||||
<mat-option [value]="punishment">{{ punishment.type }} - {{ punishment.reason }}</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
@if (selectedPunishment() != null) {
|
||||
<button mat-raised-button (click)="nextPage()" [disabled]="selectedPunishment() == null">
|
||||
Appeal {{ selectedPunishment()!.type }}
|
||||
</button>
|
||||
}
|
||||
</section>
|
||||
}
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Navigation dots -->
|
||||
@if (totalPages.length > 1) {
|
||||
<div class="form-navigation">
|
||||
<button mat-icon-button class="nav-button" (click)="previousPage()" [disabled]="isFirstPage()">
|
||||
<mat-icon>navigate_before</mat-icon>
|
||||
</button>
|
||||
<form [formGroup]="form">
|
||||
@if (currentPageIndex === 3) {
|
||||
<section class="formPage">
|
||||
<div class="description">
|
||||
<h2>Please enter your email.</h2>
|
||||
<p style="font-style: italic">It does not have to be your minecraft email. You will have to verify
|
||||
it</p>
|
||||
<mat-form-field appearance="fill" style="width: 100%;">
|
||||
<mat-label>Email</mat-label>
|
||||
<input matInput
|
||||
formControlName="email"
|
||||
placeholder="Email">
|
||||
@if (form.controls.email.invalid && form.controls.email.touched) {
|
||||
<mat-error>
|
||||
@if (form.controls.email.errors?.['required']) {
|
||||
Email is required
|
||||
} @else if (form.controls.email.errors?.['email']) {
|
||||
Please enter a valid email address
|
||||
}
|
||||
</mat-error>
|
||||
}
|
||||
</mat-form-field>
|
||||
@if (emailIsValid()) {
|
||||
<div class="valid-email">
|
||||
<ng-container matSuffix>
|
||||
<mat-icon>check</mat-icon>
|
||||
<span>You have validated your email previously, and can continue to the next page!</span>
|
||||
</ng-container>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
<button mat-raised-button (click)="validateMailOrNextPage()"
|
||||
[disabled]="form.controls.email.invalid">
|
||||
Next
|
||||
</button>
|
||||
</section>
|
||||
}
|
||||
|
||||
@for (i of totalPages; track i) {
|
||||
<div
|
||||
class="nav-dot"
|
||||
[class.active]="i === currentPageIndex"
|
||||
(click)="goToPage(i)">
|
||||
</div>
|
||||
}
|
||||
|
||||
<button mat-icon-button class="nav-button" (click)="nextPage()" [disabled]="isLastPage()">
|
||||
<mat-icon>navigate_next</mat-icon>
|
||||
</button>
|
||||
@if (currentPageIndex === 4) {
|
||||
<section class="formPage">
|
||||
<div class="description">
|
||||
<h2>Why should your {{ selectedPunishment()?.type }} be reduced or removed?</h2>
|
||||
<p style="font-style: italic">Please take your time writing this, we're more likely to accept an
|
||||
appeal if effort was put into it.</p>
|
||||
<mat-form-field appearance="fill" style="width: 100%;">
|
||||
<mat-label>Reason</mat-label>
|
||||
<textarea matInput formControlName="appeal" placeholder="Reason" rows="6"></textarea>
|
||||
@if (form.controls.appeal.invalid && form.controls.appeal.touched) {
|
||||
<mat-error>
|
||||
@if (form.controls.appeal.errors?.['required']) {
|
||||
Reason is required
|
||||
} @else if (form.controls.appeal.errors?.['minlength']) {
|
||||
Reason must be at least 10 characters
|
||||
}
|
||||
</mat-error>
|
||||
}
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<button mat-raised-button (click)="onSubmit()" [disabled]="form.invalid">
|
||||
Submit Appeal
|
||||
</button>
|
||||
</section>
|
||||
}
|
||||
</form>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Navigation dots -->
|
||||
@if (totalPages.length > 1) {
|
||||
<div class="form-navigation">
|
||||
<button mat-icon-button class="nav-button" (click)="previousPage()" [disabled]="isFirstPage()">
|
||||
<mat-icon>navigate_before</mat-icon>
|
||||
</button>
|
||||
|
||||
@for (i of totalPages; track i) {
|
||||
<div
|
||||
class="nav-dot"
|
||||
[class.active]="i === currentPageIndex"
|
||||
(click)="goToPage(i)">
|
||||
</div>
|
||||
}
|
||||
|
||||
<button mat-icon-button class="nav-button" (click)="nextPage()" [disabled]="isLastPage()">
|
||||
<mat-icon>navigate_next</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</app-full-size>
|
||||
</main>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
.appeal-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 80vh;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
main {
|
||||
|
|
|
|||
|
|
@ -1,14 +1,4 @@
|
|||
import {
|
||||
AfterViewInit,
|
||||
Component,
|
||||
computed,
|
||||
ElementRef,
|
||||
inject,
|
||||
OnDestroy,
|
||||
OnInit,
|
||||
Renderer2,
|
||||
signal
|
||||
} from '@angular/core';
|
||||
import {Component, computed, inject, OnDestroy, OnInit, signal} from '@angular/core';
|
||||
import {FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';
|
||||
import {AppealsService, EmailEntry, HistoryService, MailService, MinecraftAppeal, PunishmentHistory} from '@api';
|
||||
import {HeaderComponent} from '@header/header.component';
|
||||
|
|
@ -24,6 +14,7 @@ import {HistoryFormatService} from '@pages/reference/bans/history-format.service
|
|||
import {MatDialog} from '@angular/material/dialog';
|
||||
import {VerifyMailDialogComponent} from '@pages/forms/verify-mail-dialog/verify-mail-dialog.component';
|
||||
import {Router} from '@angular/router';
|
||||
import {FullSizeComponent} from '@shared-components/full-size/full-size.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-appeal',
|
||||
|
|
@ -37,11 +28,12 @@ import {Router} from '@angular/router';
|
|||
MatSelectModule,
|
||||
MatInputModule,
|
||||
ReactiveFormsModule,
|
||||
FullSizeComponent,
|
||||
],
|
||||
templateUrl: './appeal.component.html',
|
||||
styleUrl: './appeal.component.scss'
|
||||
})
|
||||
export class AppealComponent implements OnInit, OnDestroy, AfterViewInit {
|
||||
export class AppealComponent implements OnInit, OnDestroy {
|
||||
|
||||
private mailService = inject(MailService);
|
||||
private historyFormatService = inject(HistoryFormatService);
|
||||
|
|
@ -61,10 +53,7 @@ export class AppealComponent implements OnInit, OnDestroy, AfterViewInit {
|
|||
protected emailIsValid = signal<boolean>(false);
|
||||
protected dialog = inject(MatDialog);
|
||||
|
||||
constructor(
|
||||
private elementRef: ElementRef,
|
||||
private renderer: Renderer2
|
||||
) {
|
||||
constructor() {
|
||||
this.form = new FormGroup({
|
||||
email: new FormControl('', {nonNullable: true, validators: [Validators.required, Validators.email]}),
|
||||
appeal: new FormControl('', {nonNullable: true, validators: [Validators.required, Validators.minLength(10)]})
|
||||
|
|
@ -97,16 +86,6 @@ export class AppealComponent implements OnInit, OnDestroy, AfterViewInit {
|
|||
})
|
||||
}
|
||||
|
||||
ngAfterViewInit() {
|
||||
this.setupResizeObserver();
|
||||
this.updateContainerHeight();
|
||||
|
||||
this.boundHandleResize = this.handleResize.bind(this);
|
||||
window.addEventListener('resize', this.boundHandleResize);
|
||||
|
||||
setTimeout(() => this.updateContainerHeight(), 0);
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
if (this.resizeObserver) {
|
||||
this.resizeObserver.disconnect();
|
||||
|
|
@ -118,41 +97,6 @@ export class AppealComponent implements OnInit, OnDestroy, AfterViewInit {
|
|||
}
|
||||
}
|
||||
|
||||
private handleResize() {
|
||||
this.updateContainerHeight();
|
||||
}
|
||||
|
||||
private setupResizeObserver() {
|
||||
this.resizeObserver = new ResizeObserver(() => {
|
||||
this.updateContainerHeight();
|
||||
});
|
||||
|
||||
const headerElement = document.querySelector('app-header');
|
||||
if (headerElement) {
|
||||
this.resizeObserver.observe(headerElement);
|
||||
}
|
||||
|
||||
const footerElement = document.querySelector('footer');
|
||||
if (footerElement) {
|
||||
this.resizeObserver.observe(footerElement);
|
||||
}
|
||||
}
|
||||
|
||||
private updateContainerHeight() {
|
||||
const headerElement = document.querySelector('app-header');
|
||||
const footerElement = document.querySelector('footer');
|
||||
|
||||
const container = this.elementRef.nativeElement.querySelector('.appeal-container');
|
||||
|
||||
if (headerElement && footerElement && container) {
|
||||
const headerHeight = headerElement.getBoundingClientRect().height;
|
||||
const footerHeight = footerElement.getBoundingClientRect().height;
|
||||
|
||||
const calculatedHeight = `calc(100vh - ${headerHeight}px - ${footerHeight}px)`;
|
||||
this.renderer.setStyle(container, 'min-height', calculatedHeight);
|
||||
}
|
||||
}
|
||||
|
||||
public onSubmit() {
|
||||
if (this.form === undefined) {
|
||||
console.error('Form is undefined');
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user