Altitude/AltitudeWeb
5
0
Fork 0
Code Issues 12 Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor AppealComponent to remove dynamic height logic, integrate FullSizeComponent, and simplify imports.

Browse Source
This commit is contained in:
akastijn 2025-11-22 01:22:15 +01:00
parent 5876298ae9
commit 20ec3648c4
3 changed files with 145 additions and 196 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/src/app/pages/forms/appeal/appeal.component.html
View File

@ -6,6 +6,7 @@
</div>
</app-header>
<main>
<app-full-size>
<section class="darkmodeSection appeal-container">
<div class="form-container">
<div class="pages">
@ -35,7 +36,8 @@
@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
<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.
@ -101,7 +103,8 @@
</div>
}
</div>
<button mat-raised-button (click)="validateMailOrNextPage()" [disabled]="form.controls.email.invalid">
<button mat-raised-button (click)="validateMailOrNextPage()"
[disabled]="form.controls.email.invalid">
Next
</button>
</section>
@ -157,5 +160,7 @@
}
</div>
</section>
</app-full-size>
</main>
</div>

2
frontend/src/app/pages/forms/appeal/appeal.component.scss
View File

@ -5,7 +5,7 @@
.appeal-container {
display: flex;
flex-direction: column;
min-height: 80vh;
height: 100%;
}
main {

66
frontend/src/app/pages/forms/appeal/appeal.component.ts
View File

@ -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');