a-mayb3/KanbanCloneAngular
1
1
Fork 0
mirror of https://github.com/a-mayb3/KanbanCloneAngular.git synced 2026-03-21 09:55:37 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

substituted @ifs and @fors with deprecated ngIf and ngFor

Browse source
This commit is contained in:
Marta Borgia Leiva 2026-02-11 11:23:55 +01:00
parent 171400f9ca
commit 7202ed8806
15 changed files with 105 additions and 110 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/app/components/navbar/navbar.component.html
View file

@ -1,9 +1,9 @@
<header class="header">
<h1><a class="logo-link" routerLink="/">Kanban Board</a></h1>
<div class="user-info">
@if (authService.currentUser()) {
<ng-container *ngIf="authService.currentUser()">
<span class="username">{{ authService.currentUser()?.email }}</span>
<button class="btn-logout" (click)="logout()">Logout</button>
}
</ng-container>
</div>
</header>

16
src/app/components/project-item/project-item.component.html
View file

@ -3,14 +3,12 @@
<h3 class="project-title">{{ project.name }}</h3>
</div>
@if (project.description) {
<p class="project-description">{{ project.description }}</p>
}
<p class="project-description" *ngIf="project.description">
{{ project.description }}
</p>
@if (completionPercentage != null) {
<div class="completion-row">
<span class="completion-label">Completion</span>
<span class="completion-value">{{ completionPercentage }}%</span>
</div>
}
<div class="completion-row" *ngIf="completionPercentage != null">
<span class="completion-label">Completion</span>
<span class="completion-value">{{ completionPercentage }}%</span>
</div>
</div>

6
src/app/components/task-item/task-item.component.html
View file

@ -11,9 +11,9 @@
[(ngModel)]="statusValue"
(ngModelChange)="onStatusChange($event)"
>
@for (status of statusOptions; track status) {
<option [value]="status">{{ status.replace('_', ' ').toUpperCase() }}</option>
}
<option *ngFor="let status of statusOptions; trackBy: trackByStatus" [value]="status">
{{ status.replace('_', ' ').toUpperCase() }}
</option>
</select>
<button class="btn-edit" type="button" aria-label="Edit task" (click)="onEdit()">Edit</button>
<button class="btn-remove" type="button" aria-label="Remove task" (click)="onRemove()">

4
src/app/components/task-item/task-item.component.ts
View file

@ -45,6 +45,10 @@ export class TaskItemComponent {
'failed',
];
trackByStatus(_index: number, status: Task['status']): Task['status'] {
return status;
}
onStatusChange(value: Task['status']) {
const previousStatus = this.statusValue;
const nextStatus = value;

11
src/app/pages/collaborator-add/collaborator-add.component.html
View file

@ -2,9 +2,7 @@
<div class="card">
<h1>Add collaborator</h1>
@if (errorMessage()) {
<div class="error">{{ errorMessage() }}</div>
}
<div class="error" *ngIf="errorMessage()">{{ errorMessage() }}</div>
<form (ngSubmit)="onSubmit()" #collaboratorForm="ngForm">
<div class="form-group">
@ -27,11 +25,8 @@
class="btn-primary"
[disabled]="isSaving() || !collaboratorForm.form.valid"
>
@if (isSaving()) {
<span>Adding...</span>
} @else {
<span>Add collaborator</span>
}
<span *ngIf="isSaving(); else addText">Adding...</span>
<ng-template #addText><span>Add collaborator</span></ng-template>
</button>
</div>
</form>

15
src/app/pages/home/home.component.html
View file

@ -8,11 +8,14 @@
</div>
<div class="projects-grid">
@if (projectList.length > 0) {
@for (project of projectList; track project.id) {
<app-project-item [project]="project" />
}
} @else {
<ng-container *ngIf="projectList.length > 0; else noProjects">
<app-project-item
*ngFor="let project of projectList; trackBy: trackByProjectId"
[project]="project"
/>
</ng-container>
<ng-template #noProjects>
<div class="no-projects">
<p>
You have no projects.
@ -21,7 +24,7 @@
</a>
</p>
</div>
}
</ng-template>
</div>
</main>
</div>

6
src/app/pages/home/home.component.ts
View file

@ -10,7 +10,7 @@ import { Project } from '../../models/projects.models';
standalone: true,
imports: [CommonModule, ProjectItemComponent],
templateUrl: './home.component.html',
styleUrl: './home.component.css'
styleUrl: './home.component.css',
})
export class HomeComponent {
protected authService = inject(AuthService);
@ -23,4 +23,8 @@ export class HomeComponent {
onCreateProject() {
this.router.navigate(['/projects/new']);
}
trackByProjectId(_index: number, project: Project): number {
return project.id;
}
}

15
src/app/pages/login/login.component.html
View file

@ -3,11 +3,9 @@
<h1>{{ 'KanbanCloneAngular' }}</h1>
<h2>Sign In</h2>
@if (errorMessage()) {
<div class="error-message">
{{ errorMessage() }}
</div>
}
<div class="error-message" *ngIf="errorMessage()">
{{ errorMessage() }}
</div>
<form (ngSubmit)="onSubmit()" #loginForm="ngForm">
<div class="form-group">
@ -37,11 +35,8 @@
</div>
<button type="submit" class="btn-primary" [disabled]="isLoading() || !loginForm.form.valid">
@if (isLoading()) {
<span>Logging in...</span>
} @else {
<span>Login</span>
}
<span *ngIf="isLoading(); else loginText">Logging in...</span>
<ng-template #loginText><span>Login</span></ng-template>
</button>
</form>

11
src/app/pages/project-create/project-create.component.html
View file

@ -2,9 +2,7 @@
<div class="card">
<h1>Create project</h1>
@if (errorMessage()) {
<div class="error">{{ errorMessage() }}</div>
}
<div class="error" *ngIf="errorMessage()">{{ errorMessage() }}</div>
<form (ngSubmit)="onSubmit()" #projectForm="ngForm">
<div class="form-group">
@ -38,11 +36,8 @@
class="btn-primary"
[disabled]="isSaving() || !projectForm.form.valid"
>
@if (isSaving()) {
<span>Creating...</span>
} @else {
<span>Create project</span>
}
<span *ngIf="isSaving(); else createText">Creating...</span>
<ng-template #createText><span>Create project</span></ng-template>
</button>
</div>
</form>

55
src/app/pages/project-details/project-details.component.html
View file

@ -1,14 +1,20 @@
<div class="details-container">
<main class="content">
@if (isLoading()) {
<ng-container *ngIf="isLoading(); else loadedState">
<div class="loading">
<p>Loading project...</p>
</div>
} @else if (errorMessage()) {
<div class="error-state">
<p>{{ errorMessage() }}</p>
</div>
} @else {
</ng-container>
<ng-template #loadedState>
<ng-container *ngIf="errorMessage(); else contentState">
<div class="error-state">
<p>{{ errorMessage() }}</p>
</div>
</ng-container>
</ng-template>
<ng-template #contentState>
<section class="project-card">
<h2>{{ project()?.name }}</h2>
<h4>Project description:</h4>
@ -26,21 +32,21 @@
</span>
</div>
@if ((project()?.tasks?.length ?? 0) > 0) {
<ng-container *ngIf="(project()?.tasks?.length ?? 0) > 0; else emptyTasks">
<div class="tasks-list">
@for (task of project()?.tasks ?? []; track task.id) {
<app-task-item
[task]="task"
[projectId]="project()?.id"
(statusChange)="onTaskStatusChange($event)"
/>
}
<app-task-item
*ngFor="let task of project()?.tasks ?? []; trackBy: trackByTaskId"
[task]="task"
[projectId]="project()?.id"
(statusChange)="onTaskStatusChange($event)"
/>
</div>
} @else {
</ng-container>
<ng-template #emptyTasks>
<div class="empty-state">
<p>No tasks yet.</p>
</div>
}
</ng-template>
<button class="btn-add-task" type="button" (click)="onAddTask()">Add task</button>
</section>
@ -51,20 +57,23 @@
<span class="collaborators-count"> {{ project()?.users?.length ?? 0 }} total </span>
</div>
@if ((project()?.users?.length ?? 0) > 0) {
<ng-container *ngIf="(project()?.users?.length ?? 0) > 0; else emptyCollaborators">
<div
class="collaborators-grid"
[class.collaborators-grid--single]="(project()?.users?.length ?? 0) === 1"
>
@for (user of project()?.users ?? []; track user.id) {
<app-collaborator-item [user]="user" (remove)="onRemoveCollaborator($event)" />
}
<app-collaborator-item
*ngFor="let user of project()?.users ?? []; trackBy: trackByUserId"
[user]="user"
(remove)="onRemoveCollaborator($event)"
/>
</div>
} @else {
</ng-container>
<ng-template #emptyCollaborators>
<div class="empty-state">
<p>No collaborators yet.</p>
</div>
}
</ng-template>
<button class="btn-add-collaborator" type="button" (click)="onAddCollaborator()">
Add collaborator
@ -98,6 +107,6 @@
</div>
</div>
</section>
}
</ng-template>
</main>
</div>

8
src/app/pages/project-details/project-details.component.ts
View file

@ -186,4 +186,12 @@ export class ProjectDetailsComponent {
this.router.navigate(['/projects', this.projectId, 'edit']);
}
trackByTaskId(_index: number, task: Task): number {
return task.id;
}
trackByUserId(_index: number, user: User): string | number {
return user.id;
}
}

19
src/app/pages/project-edit/project-edit.component.html
View file

@ -2,13 +2,13 @@
<div class="card">
<h1>Edit project</h1>
@if (errorMessage()) {
<div class="error">{{ errorMessage() }}</div>
}
<div class="error" *ngIf="errorMessage()">{{ errorMessage() }}</div>
@if (isLoading()) {
<ng-container *ngIf="isLoading(); else formContent">
<p class="loading">Loading project...</p>
} @else {
</ng-container>
<ng-template #formContent>
<form (ngSubmit)="onSubmit()" #projectForm="ngForm">
<div class="form-group">
<label for="name">Project name</label>
@ -41,14 +41,11 @@
class="btn-primary"
[disabled]="isSaving() || !projectForm.form.valid"
>
@if (isSaving()) {
<span>Saving...</span>
} @else {
<span>Save changes</span>
}
<span *ngIf="isSaving(); else saveText">Saving...</span>
<ng-template #saveText><span>Save changes</span></ng-template>
</button>
</div>
</form>
}
</ng-template>
</div>
</div>

15
src/app/pages/register/register.component.html
View file

@ -3,11 +3,9 @@
<h1>{{ 'KanbanCloneAngular' }}</h1>
<h2>Create account</h2>
@if (errorMessage()) {
<div class="error-message">
{{ errorMessage() }}
</div>
}
<div class="error-message" *ngIf="errorMessage()">
{{ errorMessage() }}
</div>
<form (ngSubmit)="onSubmit()" #registerForm="ngForm">
<div class="form-group">
@ -54,11 +52,8 @@
class="btn-primary"
[disabled]="isLoading() || !registerForm.form.valid"
>
@if (isLoading()) {
<span>Creating...</span>
} @else {
<span>Create account</span>
}
<span *ngIf="isLoading(); else registerText">Creating...</span>
<ng-template #registerText><span>Create account</span></ng-template>
</button>
</form>

11
src/app/pages/task-create/task-create.component.html
View file

@ -2,9 +2,7 @@
<div class="card">
<h1>Create task</h1>
@if (errorMessage()) {
<div class="error">{{ errorMessage() }}</div>
}
<div class="error" *ngIf="errorMessage()">{{ errorMessage() }}</div>
<form (ngSubmit)="onSubmit()" #taskForm="ngForm">
<div class="form-group">
@ -44,11 +42,8 @@
<div class="actions">
<button type="button" class="btn-secondary" (click)="onCancel()">Cancel</button>
<button type="submit" class="btn-primary" [disabled]="isSaving() || !taskForm.form.valid">
@if (isSaving()) {
<span>Creating...</span>
} @else {
<span>Create task</span>
}
<span *ngIf="isSaving(); else createText">Creating...</span>
<ng-template #createText><span>Create task</span></ng-template>
</button>
</div>
</form>

19
src/app/pages/task-edit/task-edit.component.html
View file

@ -2,13 +2,13 @@
<div class="card">
<h1>Edit task</h1>
@if (errorMessage()) {
<div class="error">{{ errorMessage() }}</div>
}
<div class="error" *ngIf="errorMessage()">{{ errorMessage() }}</div>
@if (isLoading()) {
<ng-container *ngIf="isLoading(); else formContent">
<div class="loading">Loading task...</div>
} @else {
</ng-container>
<ng-template #formContent>
<form (ngSubmit)="onSubmit()" #taskForm="ngForm">
<div class="form-group">
<label for="title">Task title</label>
@ -47,14 +47,11 @@
<div class="actions">
<button type="button" class="btn-secondary" (click)="onCancel()">Cancel</button>
<button type="submit" class="btn-primary" [disabled]="isSaving() || !taskForm.form.valid">
@if (isSaving()) {
<span>Saving...</span>
} @else {
<span>Save changes</span>
}
<span *ngIf="isSaving(); else saveText">Saving...</span>
<ng-template #saveText><span>Save changes</span></ng-template>
</button>
</div>
</form>
}
</ng-template>
</div>
</div>