feat(team-member): Complete Team Member Management capability
Implement full CRUD operations for team members with TDD approach: Backend: - TeamMemberController with REST API endpoints - TeamMemberService for business logic extraction - TeamMemberPolicy for authorization (superuser/manager access) - 14 tests passing (8 API, 6 unit tests) Frontend: - Team member list with search and status filter - Create/Edit modal with form validation - Delete confirmation with constraint checking - Currency formatting for hourly rates - Real API integration with teamMemberService Tests: - E2E tests fixed with seed data helper - All 157 tests passing (backend + frontend + E2E) Closes #22
This commit is contained in:
96
frontend/src/lib/services/teamMemberService.ts
Normal file
96
frontend/src/lib/services/teamMemberService.ts
Normal file
@@ -0,0 +1,96 @@
|
||||
/**
|
||||
* Team Member Service
|
||||
*
|
||||
* API operations for team member management.
|
||||
*/
|
||||
|
||||
import { api } from './api';
|
||||
|
||||
export interface TeamMember {
|
||||
id: string;
|
||||
name: string;
|
||||
role_id: number;
|
||||
role?: {
|
||||
id: number;
|
||||
name: string;
|
||||
};
|
||||
hourly_rate: string;
|
||||
active: boolean;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
export interface CreateTeamMemberRequest {
|
||||
name: string;
|
||||
role_id: number;
|
||||
hourly_rate: number;
|
||||
active?: boolean;
|
||||
}
|
||||
|
||||
export interface UpdateTeamMemberRequest {
|
||||
name?: string;
|
||||
role_id?: number;
|
||||
hourly_rate?: number;
|
||||
active?: boolean;
|
||||
}
|
||||
|
||||
export interface Role {
|
||||
id: number;
|
||||
name: string;
|
||||
description?: string;
|
||||
}
|
||||
|
||||
// Team member API methods
|
||||
export const teamMemberService = {
|
||||
/**
|
||||
* Get all team members with optional active filter
|
||||
*/
|
||||
getAll: (active?: boolean) => {
|
||||
const query = active !== undefined ? `?active=${active}` : '';
|
||||
return api.get<TeamMember[]>(`/team-members${query}`);
|
||||
},
|
||||
|
||||
/**
|
||||
* Get a single team member by ID
|
||||
*/
|
||||
getById: (id: string) =>
|
||||
api.get<TeamMember>(`/team-members/${id}`),
|
||||
|
||||
/**
|
||||
* Create a new team member
|
||||
*/
|
||||
create: (data: CreateTeamMemberRequest) =>
|
||||
api.post<TeamMember>('/team-members', data),
|
||||
|
||||
/**
|
||||
* Update an existing team member
|
||||
*/
|
||||
update: (id: string, data: UpdateTeamMemberRequest) =>
|
||||
api.put<TeamMember>(`/team-members/${id}`, data),
|
||||
|
||||
/**
|
||||
* Delete a team member
|
||||
*/
|
||||
delete: (id: string) =>
|
||||
api.delete<{ message: string }>(`/team-members/${id}`),
|
||||
};
|
||||
|
||||
/**
|
||||
* Format hourly rate as currency
|
||||
*/
|
||||
export function formatHourlyRate(rate: string | number): string {
|
||||
const numRate = typeof rate === 'string' ? parseFloat(rate) : rate;
|
||||
return new Intl.NumberFormat('en-US', {
|
||||
style: 'currency',
|
||||
currency: 'USD',
|
||||
}).format(numRate);
|
||||
}
|
||||
|
||||
/**
|
||||
* Format hourly rate per hour (e.g., "$150.00/hr")
|
||||
*/
|
||||
export function formatHourlyRateWithUnit(rate: string | number): string {
|
||||
return `${formatHourlyRate(rate)}/hr`;
|
||||
}
|
||||
|
||||
export default teamMemberService;
|
||||
@@ -3,47 +3,175 @@
|
||||
import PageHeader from '$lib/components/layout/PageHeader.svelte';
|
||||
import DataTable from '$lib/components/common/DataTable.svelte';
|
||||
import FilterBar from '$lib/components/common/FilterBar.svelte';
|
||||
import { Plus } from 'lucide-svelte';
|
||||
|
||||
interface TeamMember {
|
||||
id: string;
|
||||
name: string;
|
||||
role: string;
|
||||
hourlyRate: number;
|
||||
active: boolean;
|
||||
}
|
||||
import LoadingState from '$lib/components/common/LoadingState.svelte';
|
||||
import EmptyState from '$lib/components/common/EmptyState.svelte';
|
||||
import { Plus, X, AlertCircle } from 'lucide-svelte';
|
||||
import { teamMemberService, formatHourlyRateWithUnit, type TeamMember, type CreateTeamMemberRequest } from '$lib/services/teamMemberService';
|
||||
import { api } from '$lib/services/api';
|
||||
|
||||
// State
|
||||
let data = $state<TeamMember[]>([]);
|
||||
let loading = $state(true);
|
||||
let error = $state<string | null>(null);
|
||||
let search = $state('');
|
||||
let statusFilter = $state('all');
|
||||
let showModal = $state(false);
|
||||
let editingMember = $state<TeamMember | null>(null);
|
||||
let deleteConfirmMember = $state<TeamMember | null>(null);
|
||||
let formLoading = $state(false);
|
||||
let formError = $state<string | null>(null);
|
||||
let roles = $state<{ id: number; name: string }[]>([]);
|
||||
|
||||
const columns = [
|
||||
// Form state
|
||||
let formData = $state<CreateTeamMemberRequest>({
|
||||
name: '',
|
||||
role_id: 0,
|
||||
hourly_rate: 0,
|
||||
active: true
|
||||
});
|
||||
|
||||
import type { ColumnDef } from '@tanstack/table-core';
|
||||
|
||||
const columns: ColumnDef<TeamMember>[] = [
|
||||
{ accessorKey: 'name', header: 'Name' },
|
||||
{
|
||||
accessorKey: 'name',
|
||||
header: 'Name'
|
||||
accessorKey: 'role',
|
||||
header: 'Role',
|
||||
cell: (info) => info.row.original.role?.name || '-'
|
||||
},
|
||||
{ accessorKey: 'role', header: 'Role' },
|
||||
{
|
||||
accessorKey: 'hourlyRate',
|
||||
header: 'Hourly Rate'
|
||||
accessorKey: 'hourly_rate',
|
||||
header: 'Hourly Rate',
|
||||
cell: (info) => formatHourlyRateWithUnit(info.row.original.hourly_rate)
|
||||
},
|
||||
{
|
||||
accessorKey: 'active',
|
||||
header: 'Status'
|
||||
header: 'Status',
|
||||
cell: (info) => getStatusBadge(info.row.original.active)
|
||||
}
|
||||
];
|
||||
|
||||
onMount(async () => {
|
||||
// TODO: Replace with actual API call
|
||||
data = [
|
||||
{ id: '1', name: 'Alice Johnson', role: 'Frontend Dev', hourlyRate: 85, active: true },
|
||||
{ id: '2', name: 'Bob Smith', role: 'Backend Dev', hourlyRate: 90, active: true },
|
||||
{ id: '3', name: 'Carol Williams', role: 'Designer', hourlyRate: 75, active: false },
|
||||
];
|
||||
loading = false;
|
||||
await Promise.all([loadTeamMembers(), loadRoles()]);
|
||||
});
|
||||
|
||||
async function loadTeamMembers() {
|
||||
try {
|
||||
loading = true;
|
||||
error = null;
|
||||
const activeFilter = statusFilter === 'all' ? undefined : statusFilter === 'active';
|
||||
data = await teamMemberService.getAll(activeFilter);
|
||||
} catch (err) {
|
||||
error = err instanceof Error ? err.message : 'Failed to load team members';
|
||||
console.error('Error loading team members:', err);
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function loadRoles() {
|
||||
try {
|
||||
// For now, we'll use hardcoded roles matching the backend seeder
|
||||
// In a real app, you'd fetch this from an API endpoint
|
||||
roles = [
|
||||
{ id: 1, name: 'Frontend Developer' },
|
||||
{ id: 2, name: 'Backend Developer' },
|
||||
{ id: 3, name: 'QA Engineer' },
|
||||
{ id: 4, name: 'DevOps Engineer' },
|
||||
{ id: 5, name: 'UX Designer' },
|
||||
{ id: 6, name: 'Project Manager' },
|
||||
{ id: 7, name: 'Architect' }
|
||||
];
|
||||
} catch (err) {
|
||||
console.error('Error loading roles:', err);
|
||||
}
|
||||
}
|
||||
|
||||
function handleCreate() {
|
||||
editingMember = null;
|
||||
formData = { name: '', role_id: roles[0]?.id || 0, hourly_rate: 0, active: true };
|
||||
formError = null;
|
||||
showModal = true;
|
||||
}
|
||||
|
||||
function handleEdit(row: TeamMember) {
|
||||
editingMember = row;
|
||||
formData = {
|
||||
name: row.name,
|
||||
role_id: row.role_id,
|
||||
hourly_rate: parseFloat(row.hourly_rate),
|
||||
active: row.active
|
||||
};
|
||||
formError = null;
|
||||
showModal = true;
|
||||
}
|
||||
|
||||
function handleDeleteClick(row: TeamMember, event: Event) {
|
||||
event.stopPropagation();
|
||||
deleteConfirmMember = row;
|
||||
}
|
||||
|
||||
async function handleSubmit() {
|
||||
try {
|
||||
formLoading = true;
|
||||
formError = null;
|
||||
|
||||
if (editingMember) {
|
||||
await teamMemberService.update(editingMember.id, formData);
|
||||
} else {
|
||||
await teamMemberService.create(formData);
|
||||
}
|
||||
|
||||
showModal = false;
|
||||
await loadTeamMembers();
|
||||
} catch (err) {
|
||||
const apiError = err as { message?: string; data?: { errors?: Record<string, string[]> } };
|
||||
if (apiError.data?.errors) {
|
||||
const errors = Object.entries(apiError.data.errors)
|
||||
.map(([field, msgs]) => `${field}: ${msgs.join(', ')}`)
|
||||
.join('; ');
|
||||
formError = errors;
|
||||
} else {
|
||||
formError = apiError.message || 'An error occurred';
|
||||
}
|
||||
} finally {
|
||||
formLoading = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function handleConfirmDelete() {
|
||||
if (!deleteConfirmMember) return;
|
||||
|
||||
try {
|
||||
formLoading = true;
|
||||
await teamMemberService.delete(deleteConfirmMember.id);
|
||||
deleteConfirmMember = null;
|
||||
await loadTeamMembers();
|
||||
} catch (err) {
|
||||
const apiError = err as { message?: string; suggestion?: string };
|
||||
alert(apiError.message || 'Failed to delete team member');
|
||||
} finally {
|
||||
formLoading = false;
|
||||
}
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
showModal = false;
|
||||
editingMember = null;
|
||||
formError = null;
|
||||
}
|
||||
|
||||
function closeDeleteModal() {
|
||||
deleteConfirmMember = null;
|
||||
}
|
||||
|
||||
function getStatusBadge(active: boolean) {
|
||||
return active
|
||||
? '<span class="badge badge-success badge-sm">Active</span>'
|
||||
: '<span class="badge badge-ghost badge-sm">Inactive</span>';
|
||||
}
|
||||
|
||||
// Reactive filtered data
|
||||
let filteredData = $derived(data.filter(m => {
|
||||
const matchesSearch = m.name.toLowerCase().includes(search.toLowerCase());
|
||||
const matchesStatus = statusFilter === 'all' ||
|
||||
@@ -52,21 +180,12 @@
|
||||
return matchesSearch && matchesStatus;
|
||||
}));
|
||||
|
||||
function handleCreate() {
|
||||
// TODO: Open create modal
|
||||
console.log('Create team member');
|
||||
}
|
||||
|
||||
function handleRowClick(row: TeamMember) {
|
||||
// TODO: Open edit modal or navigate to detail
|
||||
console.log('Edit team member:', row.id);
|
||||
}
|
||||
|
||||
function getStatusBadge(active: boolean) {
|
||||
return active
|
||||
? '<span class="badge badge-success">Active</span>'
|
||||
: '<span class="badge badge-ghost">Inactive</span>';
|
||||
}
|
||||
// Reload when status filter changes
|
||||
$effect(() => {
|
||||
if (statusFilter !== undefined) {
|
||||
loadTeamMembers();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
@@ -96,11 +215,151 @@
|
||||
{/snippet}
|
||||
</FilterBar>
|
||||
|
||||
<DataTable
|
||||
data={filteredData}
|
||||
{columns}
|
||||
{loading}
|
||||
emptyTitle="No team members"
|
||||
emptyDescription="Add your first team member to get started."
|
||||
onRowClick={handleRowClick}
|
||||
/>
|
||||
{#if loading}
|
||||
<LoadingState />
|
||||
{:else if error}
|
||||
<div class="alert alert-error">
|
||||
<AlertCircle size={20} />
|
||||
<span>{error}</span>
|
||||
</div>
|
||||
{:else if data.length === 0}
|
||||
<EmptyState
|
||||
title="No team members"
|
||||
description="Add your first team member to get started."
|
||||
>
|
||||
{#snippet children()}
|
||||
<button class="btn btn-primary" onclick={handleCreate}>
|
||||
<Plus size={16} />
|
||||
Add Member
|
||||
</button>
|
||||
{/snippet}
|
||||
</EmptyState>
|
||||
{:else}
|
||||
<DataTable
|
||||
data={filteredData}
|
||||
{columns}
|
||||
loading={false}
|
||||
emptyTitle="No matching team members"
|
||||
emptyDescription="Try adjusting your search or filter."
|
||||
onRowClick={handleEdit}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
<!-- Create/Edit Modal -->
|
||||
{#if showModal}
|
||||
<div class="modal modal-open">
|
||||
<div class="modal-box max-w-md">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<h3 class="font-bold text-lg">{editingMember ? 'Edit Team Member' : 'Add Team Member'}</h3>
|
||||
<button class="btn btn-ghost btn-sm btn-circle" onclick={closeModal}>
|
||||
<X size={18} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{#if formError}
|
||||
<div class="alert alert-error mb-4 text-sm">
|
||||
<AlertCircle size={16} />
|
||||
<span>{formError}</span>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<form onsubmit={(e) => { e.preventDefault(); handleSubmit(); }}>
|
||||
<div class="form-control mb-4">
|
||||
<label class="label" for="name">
|
||||
<span class="label-text">Name</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
class="input input-bordered"
|
||||
bind:value={formData.name}
|
||||
placeholder="Enter name"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-control mb-4">
|
||||
<label class="label" for="role">
|
||||
<span class="label-text">Role</span>
|
||||
</label>
|
||||
<select
|
||||
id="role"
|
||||
class="select select-bordered"
|
||||
bind:value={formData.role_id}
|
||||
required
|
||||
>
|
||||
{#each roles as role}
|
||||
<option value={role.id}>{role.name}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-control mb-4">
|
||||
<label class="label" for="hourly_rate">
|
||||
<span class="label-text">Hourly Rate ($)</span>
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
id="hourly_rate"
|
||||
class="input input-bordered"
|
||||
bind:value={formData.hourly_rate}
|
||||
placeholder="0.00"
|
||||
min="0.01"
|
||||
step="0.01"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-control mb-6">
|
||||
<label class="label cursor-pointer justify-start gap-3">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="checkbox"
|
||||
bind:checked={formData.active}
|
||||
/>
|
||||
<span class="label-text">Active</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="modal-action">
|
||||
<button type="button" class="btn btn-ghost" onclick={closeModal}>Cancel</button>
|
||||
<button type="submit" class="btn btn-primary" disabled={formLoading}>
|
||||
{#if formLoading}
|
||||
<span class="loading loading-spinner loading-sm"></span>
|
||||
{/if}
|
||||
{editingMember ? 'Update' : 'Create'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-backdrop" onclick={closeModal}></div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Delete Confirmation Modal -->
|
||||
{#if deleteConfirmMember}
|
||||
<div class="modal modal-open">
|
||||
<div class="modal-box max-w-sm">
|
||||
<h3 class="font-bold text-lg mb-2">Confirm Delete</h3>
|
||||
<p class="text-base-content/70 mb-6">
|
||||
Are you sure you want to delete <strong>{deleteConfirmMember.name}</strong>?
|
||||
This action cannot be undone.
|
||||
</p>
|
||||
|
||||
<div class="modal-action">
|
||||
<button class="btn btn-ghost" onclick={closeDeleteModal}>Cancel</button>
|
||||
<button
|
||||
class="btn btn-error"
|
||||
onclick={handleConfirmDelete}
|
||||
disabled={formLoading}
|
||||
>
|
||||
{#if formLoading}
|
||||
<span class="loading loading-spinner loading-sm"></span>
|
||||
{/if}
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-backdrop" onclick={closeDeleteModal}></div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
Reference in New Issue
Block a user