Skip to content

Commit fcd5022

Browse files
LimZiJiaLimZiJia
committed
Use @if directive and fix bugs
changed *NgIf to use the newer @if. Bugs fixed include toolbar and table being of different sizes and clicking the "edit" button activates the sliding window.
1 parent 75d2106 commit fcd5022

File tree

4 files changed

+102
-76
lines changed

4 files changed

+102
-76
lines changed

‎frontend/src/app/navigation-bar/navigation-bar.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
</ng-template>
88
<ng-template pTemplate="end">
99
@if (user) {
10-
<p-menu #menu [model]="items" [popup]="true"></p-menu>
10+
<p-menu #menu [model]="items" [popup]="true" appendTo="body"></p-menu>
1111
<p-button
1212
[label]="user.username"
1313
(onClick)="menu.toggle($event)"

‎frontend/src/app/questions/questions.component.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,4 +40,8 @@
4040

4141
.panel-content p {
4242
margin-bottom: 1rem; /* Add margin to paragraphs for spacing */
43+
}
44+
45+
tr:hover {
46+
background-color: rgba(0, 0, 0, 0.1);
4347
}

‎frontend/src/app/questions/questions.component.html‎

Lines changed: 93 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -1,80 +1,99 @@
11
<div class="card mx-8">
2-
<p-progressSpinner
3-
class="flex align-items-center justify-content-center h-screen"
4-
*ngIf="loading"
5-
styleClass="w-4rem h-4rem"
6-
strokeWidth="8"
7-
animationDuration=".5s" />
8-
<p-toast />
9-
<ng-container *ngIf="!loading">
10-
<p-toolbar *ngIf="isAdmin" styleClass="mt-4 mb-2 gap-2">
11-
<div class="p-justify-end">
12-
<p-button
13-
icon="pi pi-plus"
14-
severity="primary"
15-
[outlined]="true"
16-
label="New"
17-
class="mr-2"
18-
(onClick)="openNewQuestion()" />
19-
<p-button
20-
icon="pi pi-trash"
21-
severity="danger"
22-
label="Delete"
23-
(onClick)="deleteSelectedQuestions()"
24-
[disabled]="!selectedQuestions || !selectedQuestions.length" />
25-
</div>
26-
</p-toolbar>
27-
<div class="table-container" style="max-width: 1000px; margin: 0 auto">
28-
<p-table
29-
sortField="id"
30-
[sortOrder]="1"
31-
[columns]="cols"
32-
[value]="questions"
33-
[(selection)]="selectedQuestions"
34-
datakey="id"
35-
[tableStyle]="{ 'table-layout': 'fixed', width: '100%', 'text-align': 'center' }"
36-
[paginator]="true"
37-
[rows]="10"
38-
[rowsPerPageOptions]="[10, 25, 50]"
39-
styleClass="p-datatable-gridlines-striped">
40-
<ng-template pTemplate="caption">
41-
<div class="flex">
42-
<h3 class="m-0">Questions</h3>
43-
</div>
44-
</ng-template>
45-
<ng-template pTemplate="header" let-columns>
46-
<tr>
47-
<th *ngIf="isAdmin" style="width: 5%"><p-tableHeaderCheckbox /></th>
48-
<th pSortableColumn="id" style="width: 5%">Id <p-sortIcon field="id" /></th>
49-
<th style="width: 20%">Title</th>
50-
<th style="width: 20%">Topics</th>
51-
<th style="width: 7%">Difficulty</th>
52-
<th *ngIf="isAdmin" style="width: 6%"></th>
53-
</tr>
54-
</ng-template>
55-
<ng-template pTemplate="body" let-question>
56-
<tr (click)="onRowSelect(question)">
57-
<td *ngIf="isAdmin">
58-
<p-tableCheckbox [value]="question" />
59-
</td>
60-
<td>{{ question.id }}</td>
61-
<td>{{ question.title }}</td>
62-
<td>{{ question.topics.join(', ') }}</td>
63-
<td>{{ question.difficulty }}</td>
64-
<td *ngIf="isAdmin">
2+
@if (loading) {
3+
<p-progressSpinner
4+
class="flex align-items-center justify-content-center h-screen"
5+
styleClass="w-4rem h-4rem"
6+
strokeWidth="8"
7+
animationDuration=".5s" />
8+
<p-toast />
9+
} @else {
10+
<ng-container>
11+
<div [ngStyle]="isAdmin ? {'max-width': '1150px', 'margin': '0 auto'} : {'max-width': '900px', 'margin': '0 auto'}">
12+
@if (isAdmin) {
13+
<p-toolbar styleClass="mt-4 mb-2 gap-2">
14+
<div class="p-justify-end">
6515
<p-button
66-
label="Edit"
16+
icon="pi pi-plus"
6717
severity="primary"
68-
icon="pi pi-file-edit"
18+
[outlined]="true"
19+
label="New"
6920
class="mr-2"
70-
[text]="true"
71-
(onClick)="editQuestion(question)" />
72-
</td>
73-
</tr>
74-
</ng-template>
75-
</p-table>
76-
</div>
77-
</ng-container>
21+
(onClick)="openNewQuestion()"/>
22+
<p-button
23+
icon="pi pi-trash"
24+
severity="danger"
25+
label="Delete"
26+
(onClick)="deleteSelectedQuestions()"
27+
[disabled]="!selectedQuestions || !selectedQuestions.length" />
28+
</div>
29+
</p-toolbar>
30+
} @else {
31+
<div style="height: 50px;"></div>
32+
}
33+
<div class="table-container">
34+
<p-table
35+
sortField="id"
36+
[sortOrder]="1"
37+
[columns]="cols"
38+
[value]="questions"
39+
[(selection)]="selectedQuestions"
40+
datakey="id"
41+
[tableStyle]="{ 'table-layout': 'fixed', width: '100%', 'text-align': 'center' }"
42+
[paginator]="true"
43+
[rows]="10"
44+
[rowsPerPageOptions]="[10, 25, 50]"
45+
styleClass="p-datatable-gridlines-striped">
46+
<ng-template pTemplate="caption">
47+
<div class="flex">
48+
<h3 class="m-0">Questions</h3>
49+
</div>
50+
</ng-template>
51+
<ng-template pTemplate="header" let-columns>
52+
<tr>
53+
@if (isAdmin) {
54+
<th style="width: 10%"><p-tableHeaderCheckbox /></th>
55+
<th pSortableColumn="id" style="width: 13%">Id<p-sortIcon field="id" /></th>
56+
<th style="width: 27%">Title</th>
57+
<th style="width: 30%">Topics</th>
58+
<th style="width: 10%">Difficulty</th>
59+
<th style="width: 10%"></th>
60+
} @else {
61+
<th style="width: 15%">Id</th>
62+
<th style="width: 35%">Title</th>
63+
<th style="width: 37%">Topics</th>
64+
<th style="width: 13%">Difficulty</th>
65+
}
66+
</tr>
67+
</ng-template>
68+
<ng-template pTemplate="body" let-question>
69+
<tr (click)="onRowSelect(question)">
70+
@ if (isAdmin) {
71+
<td><p-tableCheckbox [value]="question" /></td>
72+
<td>{{ question.id }}</td>
73+
<td>{{ question.title }}</td>
74+
<td>{{ question.topics.join(', ') }}</td>
75+
<td>{{ question.difficulty }}</td>
76+
<td><p-button
77+
label="Edit"
78+
severity="primary"
79+
icon="pi pi-file-edit"
80+
class="mr-2"
81+
[text]="true"
82+
(onClick)="editQuestion(question)" />
83+
</td>
84+
} @else {
85+
<td>{{ question.id }}</td>
86+
<td>{{ question.title }}</td>
87+
<td>{{ question.topics.join(', ') }}</td>
88+
<td>{{ question.difficulty }}</td>
89+
}
90+
</tr>
91+
</ng-template>
92+
</p-table>
93+
</div>
94+
</div>
95+
</ng-container>
96+
}
7897
<app-question-dialog
7998
[isDialogVisible]="isDialogVisible"
8099
[question]="question"
@@ -99,4 +118,4 @@ <h4>{{ clickedOnQuestion?.title }}</h4>
99118
<p style="white-space: pre-wrap">{{ clickedOnQuestion?.description }}</p>
100119
</div>
101120
</div>
102-
</div>
121+
</div>

‎frontend/src/app/questions/questions.component.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,7 @@ export class QuestionsComponent implements OnInit {
8181
editQuestion(question: Question) {
8282
this.question = question;
8383
this.isDialogVisible = true;
84+
this.isPanelVisible = false;
8485
}
8586

8687
deleteSelectedQuestions() {
@@ -135,7 +136,9 @@ export class QuestionsComponent implements OnInit {
135136

136137
onRowSelect(question: Question) {
137138
this.clickedOnQuestion = question;
138-
this.isPanelVisible = true;
139+
if (!this.isDialogVisible) {
140+
this.isPanelVisible = true;
141+
}
139142
}
140143

141144
closePanel() {

0 commit comments

Comments
 (0)