Skip to content

Commit

Permalink
Use @if directive and fix bugs
Browse files Browse the repository at this point in the history 
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.
  • Loading branch information
@LimZiJia
LimZiJia committed Nov 1, 2024
1 parent 75d2106 commit fcd5022
Show file tree
Hide file tree
Showing 4 changed files with 102 additions and 76 deletions.
2 changes: 1 addition & 1 deletion frontend/src/app/navigation-bar/navigation-bar.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
</ng-template>
<ng-template pTemplate="end">
@if (user) {
<p-menu #menu [model]="items" [popup]="true"></p-menu>
<p-menu #menu [model]="items" [popup]="true" appendTo="body"></p-menu>
<p-button
[label]="user.username"
(onClick)="menu.toggle($event)"
Expand Down
4 changes: 4 additions & 0 deletions frontend/src/app/questions/questions.component.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,4 +40,8 @@

.panel-content p {
margin-bottom: 1rem; /* Add margin to paragraphs for spacing */
}

tr:hover {
background-color: rgba(0, 0, 0, 0.1);
}
167 changes: 93 additions & 74 deletions frontend/src/app/questions/questions.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,80 +1,99 @@
<div class="card mx-8">
<p-progressSpinner
class="flex align-items-center justify-content-center h-screen"
*ngIf="loading"
styleClass="w-4rem h-4rem"
strokeWidth="8"
animationDuration=".5s" />
<p-toast />
<ng-container *ngIf="!loading">
<p-toolbar *ngIf="isAdmin" styleClass="mt-4 mb-2 gap-2">
<div class="p-justify-end">
<p-button
icon="pi pi-plus"
severity="primary"
[outlined]="true"
label="New"
class="mr-2"
(onClick)="openNewQuestion()" />
<p-button
icon="pi pi-trash"
severity="danger"
label="Delete"
(onClick)="deleteSelectedQuestions()"
[disabled]="!selectedQuestions || !selectedQuestions.length" />
</div>
</p-toolbar>
<div class="table-container" style="max-width: 1000px; margin: 0 auto">
<p-table
sortField="id"
[sortOrder]="1"
[columns]="cols"
[value]="questions"
[(selection)]="selectedQuestions"
datakey="id"
[tableStyle]="{ 'table-layout': 'fixed', width: '100%', 'text-align': 'center' }"
[paginator]="true"
[rows]="10"
[rowsPerPageOptions]="[10, 25, 50]"
styleClass="p-datatable-gridlines-striped">
<ng-template pTemplate="caption">
<div class="flex">
<h3 class="m-0">Questions</h3>
</div>
</ng-template>
<ng-template pTemplate="header" let-columns>
<tr>
<th *ngIf="isAdmin" style="width: 5%"><p-tableHeaderCheckbox /></th>
<th pSortableColumn="id" style="width: 5%">Id <p-sortIcon field="id" /></th>
<th style="width: 20%">Title</th>
<th style="width: 20%">Topics</th>
<th style="width: 7%">Difficulty</th>
<th *ngIf="isAdmin" style="width: 6%"></th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-question>
<tr (click)="onRowSelect(question)">
<td *ngIf="isAdmin">
<p-tableCheckbox [value]="question" />
</td>
<td>{{ question.id }}</td>
<td>{{ question.title }}</td>
<td>{{ question.topics.join(', ') }}</td>
<td>{{ question.difficulty }}</td>
<td *ngIf="isAdmin">
@if (loading) {
<p-progressSpinner
class="flex align-items-center justify-content-center h-screen"
styleClass="w-4rem h-4rem"
strokeWidth="8"
animationDuration=".5s" />
<p-toast />
} @else {
<ng-container>
<div [ngStyle]="isAdmin ? {'max-width': '1150px', 'margin': '0 auto'} : {'max-width': '900px', 'margin': '0 auto'}">
@if (isAdmin) {
<p-toolbar styleClass="mt-4 mb-2 gap-2">
<div class="p-justify-end">
<p-button
label="Edit"
icon="pi pi-plus"
severity="primary"
icon="pi pi-file-edit"
[outlined]="true"
label="New"
class="mr-2"
[text]="true"
(onClick)="editQuestion(question)" />
</td>
</tr>
</ng-template>
</p-table>
</div>
</ng-container>
(onClick)="openNewQuestion()"/>
<p-button
icon="pi pi-trash"
severity="danger"
label="Delete"
(onClick)="deleteSelectedQuestions()"
[disabled]="!selectedQuestions || !selectedQuestions.length" />
</div>
</p-toolbar>
} @else {
<div style="height: 50px;"></div>
}
<div class="table-container">
<p-table
sortField="id"
[sortOrder]="1"
[columns]="cols"
[value]="questions"
[(selection)]="selectedQuestions"
datakey="id"
[tableStyle]="{ 'table-layout': 'fixed', width: '100%', 'text-align': 'center' }"
[paginator]="true"
[rows]="10"
[rowsPerPageOptions]="[10, 25, 50]"
styleClass="p-datatable-gridlines-striped">
<ng-template pTemplate="caption">
<div class="flex">
<h3 class="m-0">Questions</h3>
</div>
</ng-template>
<ng-template pTemplate="header" let-columns>
<tr>
@if (isAdmin) {
<th style="width: 10%"><p-tableHeaderCheckbox /></th>
<th pSortableColumn="id" style="width: 13%">Id<p-sortIcon field="id" /></th>
<th style="width: 27%">Title</th>
<th style="width: 30%">Topics</th>
<th style="width: 10%">Difficulty</th>
<th style="width: 10%"></th>
} @else {
<th style="width: 15%">Id</th>
<th style="width: 35%">Title</th>
<th style="width: 37%">Topics</th>
<th style="width: 13%">Difficulty</th>
}
</tr>
</ng-template>
<ng-template pTemplate="body" let-question>
<tr (click)="onRowSelect(question)">
@ if (isAdmin) {
<td><p-tableCheckbox [value]="question" /></td>
<td>{{ question.id }}</td>
<td>{{ question.title }}</td>
<td>{{ question.topics.join(', ') }}</td>
<td>{{ question.difficulty }}</td>
<td><p-button
label="Edit"
severity="primary"
icon="pi pi-file-edit"
class="mr-2"
[text]="true"
(onClick)="editQuestion(question)" />
</td>
} @else {
<td>{{ question.id }}</td>
<td>{{ question.title }}</td>
<td>{{ question.topics.join(', ') }}</td>
<td>{{ question.difficulty }}</td>
}
</tr>
</ng-template>
</p-table>
</div>
</div>
</ng-container>
}
<app-question-dialog
[isDialogVisible]="isDialogVisible"
[question]="question"
Expand All @@ -99,4 +118,4 @@ <h4>{{ clickedOnQuestion?.title }}</h4>
<p style="white-space: pre-wrap">{{ clickedOnQuestion?.description }}</p>
</div>
</div>
</div>
</div>
5 changes: 4 additions & 1 deletion frontend/src/app/questions/questions.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,7 @@ export class QuestionsComponent implements OnInit {
editQuestion(question: Question) {
this.question = question;
this.isDialogVisible = true;
this.isPanelVisible = false;
}

deleteSelectedQuestions() {
Expand Down Expand Up @@ -135,7 +136,9 @@ export class QuestionsComponent implements OnInit {

onRowSelect(question: Question) {
this.clickedOnQuestion = question;
this.isPanelVisible = true;
if (!this.isDialogVisible) {
this.isPanelVisible = true;
}
}

closePanel() {
Expand Down

0 comments on commit fcd5022

Please sign in to comment.