Extract snackbar error message implementation to service #43
@ -1,6 +1,6 @@
|
||||
<h2 mat-dialog-title>Delete {{employee.firstName}} {{employee.lastName}}</h2>
|
||||
<mat-dialog-content>Are you sure you want to delete {{employee.firstName}} {{employee.lastName}}? This cant be undone.</mat-dialog-content>
|
||||
<mat-dialog-actions>
|
||||
<button mat-button mat-dialog-close>Cancel</button>
|
||||
<button mat-button [mat-dialog-close]="true" (click)="deleteEmployee(employee.id ?? 0)">Delete</button>
|
||||
<button mat-button [mat-dialog-close]="false">Cancel</button>
|
||||
<button mat-button mat-dialog-close (click)="deleteEmployee(employee.id ?? 0)" cdkFocusInitial>Delete</button>
|
||||
</mat-dialog-actions>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<section class="!space-y-6">
|
||||
<section class="!space-y-6 mb-6">
|
||||
@defer {
|
||||
@if (employees$ | async; as employees) {
|
||||
<div class="!space-y-6">
|
||||
@ -38,7 +38,7 @@
|
||||
<mat-icon>edit</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button color="warn" [matTooltip]="'Delete employee'" (click)="openDeleteDialogue(employee)">
|
||||
🗑️
|
||||
<mat-icon>delete</mat-icon>
|
||||
</button>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
@ -35,9 +35,6 @@ import EmployeeApiService from "../../services/employee-api.service";
|
||||
MatSortModule
|
||||
],
|
||||
templateUrl: './table.component.html',
|
||||
host: {
|
||||
class: 'block w-full p-6'
|
||||
},
|
||||
styleUrl: './table.component.css'
|
||||
})
|
||||
export class TableComponent implements OnInit{
|
||||
|
||||
@ -1,42 +1,86 @@
|
||||
<div class="flex">
|
||||
<h1 class="text-2xl font-semibold">Qualifications</h1>
|
||||
<button mat-flat-button class="ml-auto bg-blue-600" (click)="openCreateModal()">
|
||||
<mat-icon class="mr-2">add</mat-icon>
|
||||
Create qualification
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@if (qualifications$ | async; as qualifications) {
|
||||
@if (qualifications) {
|
||||
<table
|
||||
mat-table
|
||||
[dataSource]="qualifications"
|
||||
class="mat-elevation-z8"
|
||||
>
|
||||
<ng-container matColumnDef="id">
|
||||
<th mat-header-cell *matHeaderCellDef>ID</th>
|
||||
<td mat-cell *matCellDef="let qualification">{{ qualification.id }}</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="skill">
|
||||
<th mat-header-cell *matHeaderCellDef>Skill</th>
|
||||
<td mat-cell *matCellDef="let qualification">{{ qualification.skill }}</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="actions">
|
||||
<th mat-header-cell *matHeaderCellDef>Actions</th>
|
||||
<td mat-cell *matCellDef="let qualification">
|
||||
<button mat-icon-button color="primary" (click)="openEditModal(qualification)">
|
||||
<mat-icon>edit</mat-icon>
|
||||
<section class="!space-y-6 mb-6">
|
||||
@defer {
|
||||
@if (qualifications$ | async; as qualifications) {
|
||||
<div class="!space-y-6">
|
||||
<div class="!flex !justify-between !items-center">
|
||||
<h2 class="!text-2xl !font-semibold !text-gray-900">Qualifications</h2>
|
||||
<button mat-flat-button color="primary" class="!bg-blue-600 !text-white" (click)="openCreateModal()">
|
||||
<mat-icon class="!mr-2">add</mat-icon>
|
||||
Add Qualification
|
||||
</button>
|
||||
<button mat-icon-button color="warn">
|
||||
<mat-icon>delete</mat-icon>
|
||||
</button>
|
||||
</td>
|
||||
</ng-container>
|
||||
</div>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
|
||||
</table>
|
||||
@if (qualifications) {
|
||||
<div class="overflow-x-auto rounded-lg bg-gray-50 p-4">
|
||||
<table mat-table [dataSource]="qualifications" class="mat-elevation-z8">
|
||||
<ng-container matColumnDef="id">
|
||||
<th mat-header-cell *matHeaderCellDef>ID</th>
|
||||
<td mat-cell *matCellDef="let qualification">{{ qualification.id }}</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="skill">
|
||||
<th mat-header-cell *matHeaderCellDef>Skill</th>
|
||||
<td mat-cell *matCellDef="let qualification">{{ qualification.skill }}</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="actions">
|
||||
<th mat-header-cell *matHeaderCellDef>Actions</th>
|
||||
<td mat-cell *matCellDef="let qualification">
|
||||
<button mat-icon-button color="primary" (click)="openEditModal(qualification)">
|
||||
<mat-icon>edit</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button color="warn">
|
||||
<mat-icon>delete</mat-icon>
|
||||
</button>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
|
||||
</table>
|
||||
</div>
|
||||
} @else {
|
||||
<mat-card class="!text-center !py-8">
|
||||
<mat-card-content>
|
||||
<mat-icon class="!w-12 !h-12 !text-gray-400 !mb-4">school</mat-icon>
|
||||
<p class="!text-gray-600">No qualifications found</p>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
} @placeholder {
|
||||
<div class="!space-y-6">
|
||||
<div class="!animate-pulse">
|
||||
<div class="!flex !justify-between !items-center !mb-8">
|
||||
<div class="!h-8 !bg-gray-200 !rounded !w-1/4"></div>
|
||||
<div class="!h-10 !bg-gray-200 !rounded !w-32"></div>
|
||||
</div>
|
||||
<div class="!bg-gray-50 !p-4 !rounded-lg">
|
||||
<div class="!space-y-4">
|
||||
<div class="!h-10 !bg-gray-200 !rounded"></div>
|
||||
@for(i of [1,2,3]; track i) {
|
||||
<div class="!h-16 !bg-white !rounded-lg !shadow-sm"></div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
} @error {
|
||||
<mat-card class="!bg-red-50 !border !border-red-100">
|
||||
<mat-card-content class="!p-4">
|
||||
<div class="!flex !items-center !gap-4 !text-red-800">
|
||||
<mat-icon class="!text-red-500">error_outline</mat-icon>
|
||||
<div>
|
||||
<h3 class="!font-medium !mb-1">Error loading qualifications</h3>
|
||||
<p class="!text-sm !text-red-700">Please try refreshing the page.</p>
|
||||
</div>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
} @loading (minimum 500ms) {
|
||||
<div class="!flex !justify-center !items-center !py-12">
|
||||
<mat-spinner diameter="48" class="!text-blue-600"></mat-spinner>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
</section>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import {Component, inject, OnInit} from '@angular/core';
|
||||
import {Observable} from "rxjs";
|
||||
import {Qualification} from "../Qualification";
|
||||
import {AsyncPipe} from "@angular/common";
|
||||
import {AsyncPipe, NgFor} from "@angular/common";
|
||||
import {
|
||||
MatCell, MatCellDef,
|
||||
MatColumnDef,
|
||||
@ -17,11 +17,14 @@ import {CreateComponent} from "../create/create.component";
|
||||
import {MatIcon} from "@angular/material/icon";
|
||||
import {MatButton, MatIconButton} from "@angular/material/button";
|
||||
import {EditComponent} from "../edit/edit.component";
|
||||
import {MatCard, MatCardContent} from "@angular/material/card";
|
||||
import {MatProgressSpinner} from "@angular/material/progress-spinner";
|
||||
|
||||
@Component({
|
||||
selector: 'app-qualifications',
|
||||
imports: [
|
||||
AsyncPipe,
|
||||
NgFor,
|
||||
MatTable,
|
||||
MatHeaderCell,
|
||||
MatColumnDef,
|
||||
@ -34,7 +37,10 @@ import {EditComponent} from "../edit/edit.component";
|
||||
MatRowDef,
|
||||
MatIcon,
|
||||
MatIconButton,
|
||||
MatButton
|
||||
MatButton,
|
||||
MatCard,
|
||||
MatCardContent,
|
||||
MatProgressSpinner
|
||||
],
|
||||
templateUrl: './table.component.html',
|
||||
styleUrl: './table.component.css'
|
||||
|
||||
Reference in New Issue
Block a user