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,19 +1,43 @@
|
||||
import { useState } from 'react';
|
||||
import { format } from 'date-fns';
|
||||
import { useState, useEffect } from 'react';
|
||||
import { format, parseISO } from 'date-fns';
|
||||
import type { TimeLog } from '../hooks/useLogs';
|
||||
|
||||
interface Props {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
onSave: (data: { date: string; time: string; description: string }) => Promise<unknown>;
|
||||
editingLog?: TimeLog | null;
|
||||
}
|
||||
|
||||
export function AddLogModal({ isOpen, onClose, onSave }: Props) {
|
||||
function formatTimeForInput(hours: number, mins: number): string {
|
||||
if (mins === 0) {
|
||||
return String(hours);
|
||||
}
|
||||
return `${hours}:${String(mins).padStart(2, '0')}`;
|
||||
}
|
||||
|
||||
export function AddLogModal({ isOpen, onClose, onSave, editingLog }: Props) {
|
||||
const [date, setDate] = useState(format(new Date(), 'yyyy-MM-dd'));
|
||||
const [time, setTime] = useState('8');
|
||||
const [description, setDescription] = useState('');
|
||||
const [error, setError] = useState('');
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
if (editingLog) {
|
||||
setDate(format(parseISO(editingLog.date), 'yyyy-MM-dd'));
|
||||
setTime(formatTimeForInput(editingLog.hours, editingLog.mins));
|
||||
setDescription(editingLog.description);
|
||||
} else {
|
||||
setDate(format(new Date(), 'yyyy-MM-dd'));
|
||||
setTime('8');
|
||||
setDescription('');
|
||||
}
|
||||
setError('');
|
||||
}
|
||||
}, [isOpen, editingLog]);
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
@@ -23,8 +47,6 @@ export function AddLogModal({ isOpen, onClose, onSave }: Props) {
|
||||
|
||||
try {
|
||||
await onSave({ date, time, description });
|
||||
setTime('8');
|
||||
setDescription('');
|
||||
onClose();
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Ошибка');
|
||||
@@ -40,7 +62,9 @@ export function AddLogModal({ isOpen, onClose, onSave }: Props) {
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
||||
<div className="bg-white rounded-lg p-6 w-full max-w-md mx-4">
|
||||
<h2 className="text-xl font-semibold mb-4">Новая запись</h2>
|
||||
<h2 className="text-xl font-semibold mb-4">
|
||||
{editingLog ? 'Редактирование записи' : 'Новая запись'}
|
||||
</h2>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div>
|
||||
|
||||
Reference in New Issue
Block a user