feat: add inline time edit and log editing modal
- Add inline time editing in log list (click on time to edit) - Add edit button with pencil icon for each log entry - Modify AddLogModal to support both create and edit modes - Wire up updateLog from useLogs hook in Dashboard Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
import { useState } from 'react';
|
||||
import { format, startOfMonth, endOfMonth, addMonths, subMonths } from 'date-fns';
|
||||
import { ru } from 'date-fns/locale';
|
||||
import { useLogs } from '../hooks/useLogs';
|
||||
import { useLogs, type TimeLog } from '../hooks/useLogs';
|
||||
import { LogList } from './LogList';
|
||||
import { AddLogModal } from './AddLogModal';
|
||||
import { ReportModal } from './ReportModal';
|
||||
@@ -15,11 +15,12 @@ export function Dashboard({ username, onLogout }: Props) {
|
||||
const [currentDate, setCurrentDate] = useState(new Date());
|
||||
const [isAddModalOpen, setIsAddModalOpen] = useState(false);
|
||||
const [isReportModalOpen, setIsReportModalOpen] = useState(false);
|
||||
const [editingLog, setEditingLog] = useState<TimeLog | null>(null);
|
||||
|
||||
const startDate = format(startOfMonth(currentDate), 'yyyy-MM-dd');
|
||||
const endDate = format(endOfMonth(currentDate), 'yyyy-MM-dd');
|
||||
|
||||
const { logs, isLoading, createLog, deleteLog } = useLogs(startDate, endDate);
|
||||
const { logs, isLoading, createLog, updateLog, deleteLog } = useLogs(startDate, endDate);
|
||||
|
||||
const totalMinutes = logs.reduce((sum, log) => sum + log.minutes, 0);
|
||||
const totalHours = Math.floor(totalMinutes / 60);
|
||||
@@ -34,6 +35,28 @@ export function Dashboard({ username, onLogout }: Props) {
|
||||
}
|
||||
};
|
||||
|
||||
const handleEdit = (log: TimeLog) => {
|
||||
setEditingLog(log);
|
||||
setIsAddModalOpen(true);
|
||||
};
|
||||
|
||||
const handleUpdateTime = async (id: string, time: string) => {
|
||||
await updateLog({ id, data: { time } });
|
||||
};
|
||||
|
||||
const handleSave = async (data: { date: string; time: string; description: string }) => {
|
||||
if (editingLog) {
|
||||
await updateLog({ id: editingLog.id, data });
|
||||
} else {
|
||||
await createLog(data);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCloseModal = () => {
|
||||
setIsAddModalOpen(false);
|
||||
setEditingLog(null);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
{/* Header */}
|
||||
@@ -93,7 +116,13 @@ export function Dashboard({ username, onLogout }: Props) {
|
||||
</div>
|
||||
|
||||
{/* Logs */}
|
||||
<LogList logs={logs} onDelete={handleDelete} isLoading={isLoading} />
|
||||
<LogList
|
||||
logs={logs}
|
||||
onDelete={handleDelete}
|
||||
onEdit={handleEdit}
|
||||
onUpdateTime={handleUpdateTime}
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
</main>
|
||||
|
||||
{/* Floating buttons */}
|
||||
@@ -121,8 +150,9 @@ export function Dashboard({ username, onLogout }: Props) {
|
||||
{/* Modals */}
|
||||
<AddLogModal
|
||||
isOpen={isAddModalOpen}
|
||||
onClose={() => setIsAddModalOpen(false)}
|
||||
onSave={createLog}
|
||||
onClose={handleCloseModal}
|
||||
onSave={handleSave}
|
||||
editingLog={editingLog}
|
||||
/>
|
||||
<ReportModal
|
||||
isOpen={isReportModalOpen}
|
||||
|
||||
Reference in New Issue
Block a user