280 lines
10 KiB
TypeScript
280 lines
10 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { GroceryCategory } from '../types';
|
|
import { groceryCategoryApi } from '../services/api';
|
|
import AddGroceryCategoryModal from './AddGroceryCategoryModal';
|
|
import ConfirmDeleteModal from './ConfirmDeleteModal';
|
|
|
|
const GroceryCategoryList: React.FC = () => {
|
|
const [categories, setCategories] = useState<GroceryCategory[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [message, setMessage] = useState('');
|
|
const [isModalOpen, setIsModalOpen] = useState(false);
|
|
const [editingCategory, setEditingCategory] = useState<GroceryCategory | null>(null);
|
|
const [deletingCategory, setDeletingCategory] = useState<GroceryCategory | null>(null);
|
|
const [deleteLoading, setDeleteLoading] = useState(false);
|
|
const [sortField, setSortField] = useState<keyof GroceryCategory>('name');
|
|
const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc');
|
|
|
|
useEffect(() => {
|
|
fetchCategories();
|
|
}, []);
|
|
|
|
const fetchCategories = async () => {
|
|
try {
|
|
setLoading(true);
|
|
const response = await groceryCategoryApi.getAll();
|
|
setCategories(response.data);
|
|
} catch (error) {
|
|
console.error('Error fetching categories:', error);
|
|
setMessage('Error loading categories. Please try again.');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleDelete = async (category: GroceryCategory) => {
|
|
setDeletingCategory(category);
|
|
};
|
|
|
|
const confirmDelete = async () => {
|
|
if (!deletingCategory) return;
|
|
|
|
try {
|
|
setDeleteLoading(true);
|
|
await groceryCategoryApi.delete(deletingCategory.id);
|
|
setMessage('Category deleted successfully!');
|
|
setDeletingCategory(null);
|
|
fetchCategories();
|
|
setTimeout(() => setMessage(''), 1500);
|
|
} catch (error: any) {
|
|
console.error('Error deleting category:', error);
|
|
if (error.response?.status === 400) {
|
|
setMessage('Cannot delete category: groceries are still associated with this category.');
|
|
} else {
|
|
setMessage('Error deleting category. Please try again.');
|
|
}
|
|
setTimeout(() => setMessage(''), 3000);
|
|
} finally {
|
|
setDeleteLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleCloseDeleteModal = () => {
|
|
setDeletingCategory(null);
|
|
};
|
|
|
|
const handleEdit = (category: GroceryCategory) => {
|
|
setEditingCategory(category);
|
|
setIsModalOpen(true);
|
|
};
|
|
|
|
const handleModalClose = () => {
|
|
setIsModalOpen(false);
|
|
setEditingCategory(null);
|
|
fetchCategories();
|
|
};
|
|
|
|
const handleSort = (field: keyof GroceryCategory) => {
|
|
if (field === sortField) {
|
|
setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc');
|
|
} else {
|
|
setSortField(field);
|
|
setSortDirection('asc');
|
|
}
|
|
};
|
|
|
|
const sortedCategories = [...categories].sort((a, b) => {
|
|
let aValue = a[sortField];
|
|
let bValue = b[sortField];
|
|
|
|
// Handle null/undefined values
|
|
if (aValue === null || aValue === undefined) aValue = '';
|
|
if (bValue === null || bValue === undefined) bValue = '';
|
|
|
|
// Convert to string for comparison
|
|
const aStr = String(aValue).toLowerCase();
|
|
const bStr = String(bValue).toLowerCase();
|
|
|
|
if (sortDirection === 'asc') {
|
|
return aStr.localeCompare(bStr);
|
|
} else {
|
|
return bStr.localeCompare(aStr);
|
|
}
|
|
});
|
|
|
|
const getSortIcon = (field: keyof GroceryCategory) => {
|
|
if (sortField !== field) {
|
|
return (
|
|
<svg className="w-4 h-4 ml-1 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
if (sortDirection === 'asc') {
|
|
return (
|
|
<svg className="w-4 h-4 ml-1 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 15l7-7 7 7" />
|
|
</svg>
|
|
);
|
|
} else {
|
|
return (
|
|
<svg className="w-4 h-4 ml-1 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
|
</svg>
|
|
);
|
|
}
|
|
};
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="flex justify-center items-center h-64">
|
|
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500"></div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="flex flex-col sm:flex-row sm:justify-between sm:items-center space-y-4 sm:space-y-0">
|
|
<h1 className="text-xl md:text-2xl font-bold text-gray-900">Grocery Categories</h1>
|
|
<button
|
|
onClick={() => setIsModalOpen(true)}
|
|
className="w-full sm:w-auto bg-blue-500 hover:bg-blue-700 text-white font-bold py-3 sm:py-2 px-4 rounded text-base sm:text-sm"
|
|
>
|
|
Add New Category
|
|
</button>
|
|
</div>
|
|
|
|
{message && (
|
|
<div className={`px-4 py-3 rounded ${
|
|
message.includes('Error') || message.includes('Cannot')
|
|
? 'bg-red-50 border border-red-200 text-red-700'
|
|
: 'bg-green-50 border border-green-200 text-green-700'
|
|
}`}>
|
|
{message}
|
|
</div>
|
|
)}
|
|
|
|
<div className="bg-white shadow rounded-lg overflow-hidden">
|
|
{categories.length === 0 ? (
|
|
<div className="text-center py-12">
|
|
<svg className="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 48 48">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a1.994 1.994 0 01-1.414.586H7m0-18v18m0-18h.01" />
|
|
</svg>
|
|
<h3 className="mt-2 text-sm font-medium text-gray-900">No categories</h3>
|
|
<p className="mt-1 text-sm text-gray-500">Get started by adding your first category.</p>
|
|
</div>
|
|
) : (
|
|
<>
|
|
{/* Desktop Table */}
|
|
<div className="hidden md:block">
|
|
<table className="min-w-full divide-y divide-gray-200">
|
|
<thead className="bg-gray-50">
|
|
<tr>
|
|
<th
|
|
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100 select-none"
|
|
onClick={() => handleSort('name')}
|
|
>
|
|
<div className="flex items-center">
|
|
Name
|
|
{getSortIcon('name')}
|
|
</div>
|
|
</th>
|
|
<th
|
|
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100 select-none"
|
|
onClick={() => handleSort('created_at')}
|
|
>
|
|
<div className="flex items-center">
|
|
Created
|
|
{getSortIcon('created_at')}
|
|
</div>
|
|
</th>
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Actions
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="bg-white divide-y divide-gray-200">
|
|
{sortedCategories.map((category) => (
|
|
<tr key={category.id} className="hover:bg-gray-50">
|
|
<td className="px-6 py-4 whitespace-nowrap">
|
|
<div className="text-sm font-medium text-gray-900">
|
|
{category.name}
|
|
</div>
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
|
{new Date(category.created_at).toLocaleDateString()}
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
|
|
<button
|
|
onClick={() => handleEdit(category)}
|
|
className="text-indigo-600 hover:text-indigo-900 mr-3"
|
|
>
|
|
Edit
|
|
</button>
|
|
<button
|
|
onClick={() => handleDelete(category)}
|
|
className="text-red-600 hover:text-red-900"
|
|
>
|
|
Delete
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
{/* Mobile Card Layout */}
|
|
<div className="md:hidden">
|
|
{sortedCategories.map((category) => (
|
|
<div key={category.id} className="border-b border-gray-200 p-4 last:border-b-0">
|
|
<div className="flex justify-between items-start mb-3">
|
|
<div className="flex-1 min-w-0">
|
|
<h3 className="font-medium text-gray-900 truncate">{category.name}</h3>
|
|
<p className="text-sm text-gray-500">Created: {new Date(category.created_at).toLocaleDateString()}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex space-x-4">
|
|
<button
|
|
onClick={() => handleEdit(category)}
|
|
className="flex-1 text-center py-2 px-4 border border-indigo-300 text-indigo-600 hover:bg-indigo-50 rounded-md text-sm font-medium"
|
|
>
|
|
Edit
|
|
</button>
|
|
<button
|
|
onClick={() => handleDelete(category)}
|
|
className="flex-1 text-center py-2 px-4 border border-red-300 text-red-600 hover:bg-red-50 rounded-md text-sm font-medium"
|
|
>
|
|
Delete
|
|
</button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
|
|
{isModalOpen && (
|
|
<AddGroceryCategoryModal
|
|
category={editingCategory}
|
|
onClose={handleModalClose}
|
|
/>
|
|
)}
|
|
|
|
<ConfirmDeleteModal
|
|
isOpen={!!deletingCategory}
|
|
onClose={handleCloseDeleteModal}
|
|
onConfirm={confirmDelete}
|
|
title="Delete Category"
|
|
message={`Are you sure you want to delete "${deletingCategory?.name}"? This action cannot be undone.`}
|
|
isLoading={deleteLoading}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default GroceryCategoryList;
|