Skip to content

Commit

Permalink
Merge pull request #63 from UdL-EPS-SoftArch/fix-room-creation-usabil…
Browse files Browse the repository at this point in the history 
…ity-aberration

Fix room creation usability aberration
  • Loading branch information
@rogargon
rogargon authored Jan 22, 2025
2 parents 7ad8e16 + 407a52d commit ca329b5
Show file tree
Hide file tree
Showing 6 changed files with 59 additions and 78 deletions.
3 changes: 1 addition & 2 deletions src/app/apartment/apartment-create/apartment-create.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,11 @@ import { ErrorMessageService } from '../../error-handler/error-message.service';
import { CommonModule } from '@angular/common';
import { ApartmentService } from '../apartment.service';
import { ApartmentDetails } from '../apartment-details';
import { RoomListComponent } from '../../room/room-list/room-list.component';

@Component({
selector: 'app-apartment-create',
standalone: true,
imports: [FormsModule, CommonModule, RoomListComponent],
imports: [FormsModule, CommonModule],
templateUrl: './apartment-create.component.html',
styleUrls: ['./apartment-create.component.css']
})
Expand Down
92 changes: 36 additions & 56 deletions src/app/room/room-create/room-create.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,63 +1,43 @@
<div *ngIf="canCreateRoom" class="container mt-5 w-50 p-3">
<h1 class="mb-4">Create Apartment</h1>
<h1 class="mb-4">Create Room</h1>

<form (ngSubmit)="onSubmit()" #roomForm="ngForm">
<div class="mb-3">
<label for="name" class="form-label">Select apartment</label>
<select class="form-select" id="apartmentSelect" required [(ngModel)]="this.apartmentId">
<option value="" disabled>Select...</option>
<option *ngFor="let apartment_value of apartments" [value]="apartment_value.id">
{{ apartment_value.name }}
</option>
</select>
</div>
<div class="mb-3">
<label for="name" class="form-label">Is ocuppied ?</label>
<select class="form-select" id="trueFalseSelectOcupied" required [(ngModel)]="this.room.isOccupied">
<form (ngSubmit)="onSubmit()" #roomForm="ngForm">
<div class="mb-3">
<label for="apartmentSelect" class="form-label">Select apartment</label>
<select class="form-select" id="apartmentSelect" required [(ngModel)]="this.apartmentId" name="apartmentId">
<option value="" disabled>Select...</option>
<option [value]="true">True</option>
<option [value]="false">False</option>
</select>
</div>
<div class="mb-3">
<label for="name" class="form-label">Has bed ?</label>
<select class="form-select" id="trueFalseSelectHasBed" required [(ngModel)]="this.room.hasBed">
<option value="" disabled>Select...</option>
<option [value]="true">True</option>
<option [value]="false">False</option>
</select>
</div>
<div class="mb-3">
<label for="name" class="form-label">Has window ?</label>
<select class="form-select" id="trueFalseSelectHasWindow" required [(ngModel)]="this.room.hasWindow">
<option value="" disabled>Select...</option>
<option [value]="true">True</option>
<option [value]="false">False</option>
</select>
</div>
<div class="mb-3">
<label for="name" class="form-label">Has desk ?</label>
<select class="form-select" id="trueFalseSelectHasDesk" required [(ngModel)]="this.room.hasDesk">
<option value="" disabled>Select...</option>
<option [value]="true">True</option>
<option [value]="false">False</option>
</select>
</div>
<div class="mb-3">
<label for="surface" class="form-label">Surface</label>
<input type="number" id="surfaceInput" class="form-control" [(ngModel)]="this.room.surface" />

</div>
<option *ngFor="let apartment_value of apartments" [value]="apartment_value.id">
{{ apartment_value.name }}
</option>
</select>
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="isOccupied" [(ngModel)]="this.room.isOccupied" name="isOccupied">
<label class="form-check-label" for="isOccupied">Is occupied?</label>
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="hasBed" [(ngModel)]="this.room.hasBed" name="hasBed">
<label class="form-check-label" for="hasBed">Has bed?</label>
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="hasWindow" [(ngModel)]="this.room.hasWindow" name="hasWindow">
<label class="form-check-label" for="hasWindow">Has window?</label>
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="hasDesk" [(ngModel)]="this.room.hasDesk" name="hasDesk">
<label class="form-check-label" for="hasDesk">Has desk?</label>
</div>
<div class="mb-3">
<label for="surface" class="form-label">Surface</label>
<input type="number" id="surfaceInput" class="form-control" [(ngModel)]="this.room.surface" name="surface">
</div>




<button type="submit" class="btn btn-primary mt-3">Submit</button>
</form>
<button type="submit" class="btn btn-primary mt-3">Create</button>
</form>
</div>

<div *ngIf="!canCreateRoom" class="container mt-5 w-50 p-3">
<div class="alert alert-danger" role="alert">
You are not authorized to create a Room.
</div>
</div>
<div class="alert alert-danger" role="alert">
You are not authorized to create a Room.
</div>
</div>
13 changes: 7 additions & 6 deletions src/app/room/room-list/room-list.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@ <h4 class="mb-1">List of Rooms</h4>
<th>Desk</th>
<th>Ocuppied</th>
<th>Surface</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
Expand All @@ -23,16 +25,15 @@ <h4 class="mb-1">List of Rooms</h4>
<td>{{ room.hasDesk }}</td>
<td>{{ room.isOccupied }}</td>
<td>{{ room.surface}}</td>
<td><button class="btn btn-danger mt-3" (click)="deleteRoom(room.getRoomIdFromLinks())"><span class="deleteSpan">Delete</span></button></td>
<td><button class="btn btn-secondary" (click)="updateRoom(room.getRoomIdFromLinks())"><span class="updateSpan">Edit</span></button></td>

<td><button class="btn btn-danger mt-3" (click)="deleteRoom(room.getRoomIdFromLinks())">Delete</button></td>
<td><button class="btn btn-secondary" (click)="updateRoom(room.getRoomIdFromLinks())">Edit</button></td>
</tr>
</tbody>
</table>
</div>
<button class="btn btn-primary mt-3 mb-3" (click)="createRoom()">
<span>Create</span>
</button>
<div class="mb-3">
<a href="/room/create"><button type="button" class="btn btn-primary mt-3 mb-3">Create</button></a>
</div>
<div *ngIf="rooms.length === 0" class="alert alert-info" role="alert">
No rooms available for this apartment.
</div>
Expand Down
6 changes: 3 additions & 3 deletions src/app/room/room-list/room-list.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,12 +98,11 @@ export class RoomListComponent implements OnInit {
})
);
}
createRoom(): void {
this.router.navigate(['/room/create']);
}

getAparmentName(Apart: Apartment): string {
return Apart.getName();
}

deleteRoom(roomId: string): void {
if (roomId) {
console.log('Room ID:', roomId);
Expand All @@ -112,6 +111,7 @@ export class RoomListComponent implements OnInit {
console.error('Invalid room ID');
}
}

updateRoom(roomId: string): void {
if (roomId) {
console.log('Room ID:', roomId);
Expand Down
21 changes: 11 additions & 10 deletions src/app/room/room-update/room-update.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,6 @@ <h1 class="mb-4">Update Room</h1>
</div>

<form *ngIf="!isLoading && !errorFetchMsg" (ngSubmit)="onSubmit()" [formGroup]="roomForm">
<div class="mb-3">
<label for="surface" class="form-label">Surface</label>
<input type="number" formControlName="surface" class="form-control" id="surface" required>
<div *ngIf="roomForm.get('surface')?.invalid && roomForm.get('surface')?.touched" class="text-danger">
Surface is required and must be at least 0.
</div>
</div>

<div class="mb-3 form-check">
<input type="checkbox" formControlName="isOccupied" class="form-check-input" id="isOccupied">
<label class="form-check-label" for="isOccupied">Is Occupied</label>
Expand All @@ -39,8 +31,17 @@ <h1 class="mb-4">Update Room</h1>
<input type="checkbox" formControlName="hasBed" class="form-check-input" id="hasBed">
<label class="form-check-label" for="hasBed">Has Bed</label>
</div>
<button type="submit" class="btn btn-primary mt-3">Submit</button>
<button type="button" (click)="onCancel()" class="btn btn-danger mt-3 ms-2">Cancel</button>

<div class="mb-3">
<label for="surface" class="form-label">Surface</label>
<input type="number" formControlName="surface" class="form-control" id="surface" required>
<div *ngIf="roomForm.get('surface')?.invalid && roomForm.get('surface')?.touched" class="text-danger">
Surface is required and must be at least 0.
</div>
</div>

<button type="button" (click)="onCancel()" class="btn btn-danger mt-3">Cancel</button>
<button type="submit" class="btn btn-primary mt-3 ms-2">Update</button>
</form>
</div>

Expand Down
2 changes: 1 addition & 1 deletion src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="utf-8">
<title>Angular Template</title>
<title>MyApartments</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
Expand Down

0 comments on commit ca329b5

Please sign in to comment.