Qlockify/qlockify-frontend-deployment
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix(forms): submit modal actions with enter

Browse Source
This commit is contained in:
Amirhossein Khalili
2026-06-07 15:37:02 +03:30
parent 132c8c44ef
commit 666d04ff26
8 changed files with 87 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/CreateClientModal.tsx
View File

@@ -1,4 +1,4 @@
import { useEffect, useState } from "react";
import { useEffect, useState, type FormEvent } from "react";
import { toast } from "sonner";
import { createClient } from "../api/clients";
import { useTranslation } from "../hooks/useTranslation";
@@ -48,8 +48,9 @@ export default function CreateClientModal({ isOpen, onClose, onSuccess, workspac
setThumbnailFile(file);
};
const handleSubmit = async () => {
if (!name.trim()) return;
const handleSubmit = async (event?: FormEvent<HTMLFormElement>) => {
event?.preventDefault();
if (!name.trim()) return;
setIsLoading(true);
try {
await createClient(workspaceId, { name, notes, thumbnail: thumbnailFile });
@@ -72,15 +73,15 @@ export default function CreateClientModal({ isOpen, onClose, onSuccess, workspac
<Button variant="outline" onClick={onClose} disabled={isLoading}>
{t.actions?.cancel}
</Button>
<Button onClick={handleSubmit} disabled={isLoading || !name.trim()}>
{isLoading ? "..." : t.clients.create}
</Button>
<Button type="submit" form="create-client-form" disabled={isLoading || !name.trim()}>
{isLoading ? "..." : t.clients.create}
</Button>
</>
);
return (
<Modal isOpen={isOpen} onClose={onClose} title={t.clients.modalTitle} footer={footer}>
<div className="space-y-4">
return (
<Modal isOpen={isOpen} onClose={onClose} title={t.clients.modalTitle} footer={footer}>
<form id="create-client-form" onSubmit={handleSubmit} className="space-y-4">
<div>
<label className="block text-sm font-medium mb-1 text-slate-700 dark:text-slate-300">
{t.workspace?.thumbnailLabel || "Thumbnail"}
@@ -117,7 +118,7 @@ export default function CreateClientModal({ isOpen, onClose, onSuccess, workspac
placeholder={t.clients.notesPlaceholder}
/>
</div>
</div>
</Modal>
);
</form>
</Modal>
);
}

34
src/components/DeleteClientModal.tsx
View File

@@ -1,4 +1,4 @@
import { useState } from "react";
import { useState, type FormEvent } from "react";
import { toast } from "sonner";
import { type Client } from "../types/client";
import { deleteClient } from "../api/clients";
@@ -17,8 +17,9 @@ export default function DeleteClientModal({ isOpen, onClose, onSuccess, client }
const { t } = useTranslation();
const [isLoading, setIsLoading] = useState(false);
const handleDelete = async () => {
if (!client) return;
const handleDelete = async (event?: FormEvent<HTMLFormElement>) => {
event?.preventDefault();
if (!client) return;
setIsLoading(true);
try {
await deleteClient(client.id);
@@ -38,11 +39,12 @@ export default function DeleteClientModal({ isOpen, onClose, onSuccess, client }
<Button variant="outline" onClick={onClose} disabled={isLoading}>
{t.actions?.cancel}
</Button>
<Button
variant="destructive"
onClick={handleDelete}
disabled={isLoading}
>
<Button
type="submit"
form="delete-client-form"
variant="destructive"
disabled={isLoading}
>
{isLoading ? "..." : t.clients.delete}
</Button>
</>
@@ -55,10 +57,12 @@ export default function DeleteClientModal({ isOpen, onClose, onSuccess, client }
title={t.clients.deleteConfirmTitle}
footer={footer}
maxWidth="max-w-sm"
>
<p className="text-slate-500 dark:text-slate-400">
{client ? t.clients.deleteConfirmMessage(client.name) : ""}
</p>
</Modal>
);
}
>
<form id="delete-client-form" onSubmit={handleDelete}>
<p className="text-slate-500 dark:text-slate-400">
{client ? t.clients.deleteConfirmMessage(client.name) : ""}
</p>
</form>
</Modal>
);
}

25
src/components/EditClientModal.tsx
View File

@@ -1,4 +1,4 @@
import { useState, useEffect } from "react";
import { useState, useEffect, type FormEvent } from "react";
import { toast } from "sonner";
import { type Client } from "../types/client";
import { updateClient } from "../api/clients";
@@ -59,8 +59,9 @@ export default function EditClientModal({ isOpen, onClose, onSuccess, client }:
setClearThumbnail(false);
};
const handleSubmit = async () => {
if (!client || !name.trim()) return;
const handleSubmit = async (event?: FormEvent<HTMLFormElement>) => {
event?.preventDefault();
if (!client || !name.trim()) return;
setIsLoading(true);
try {
await updateClient(client.id, { name, notes, thumbnail: thumbnailFile, clear_thumbnail: clearThumbnail });
@@ -80,15 +81,15 @@ export default function EditClientModal({ isOpen, onClose, onSuccess, client }:
<Button variant="outline" onClick={onClose} disabled={isLoading}>
{t.actions?.cancel}
</Button>
<Button onClick={handleSubmit} disabled={isLoading || !name.trim()}>
{isLoading ? "..." : t.clients.saveChanges}
</Button>
<Button type="submit" form="edit-client-form" disabled={isLoading || !name.trim()}>
{isLoading ? "..." : t.clients.saveChanges}
</Button>
</>
);
return (
<Modal isOpen={isOpen} onClose={onClose} title={t.clients.editClient} footer={footer}>
<div className="space-y-4">
return (
<Modal isOpen={isOpen} onClose={onClose} title={t.clients.editClient} footer={footer}>
<form id="edit-client-form" onSubmit={handleSubmit} className="space-y-4">
<div>
<label className="block text-sm font-medium mb-1 text-slate-700 dark:text-slate-300">
{t.workspace?.thumbnailLabel || "Thumbnail"}
@@ -138,7 +139,7 @@ export default function EditClientModal({ isOpen, onClose, onSuccess, client }:
placeholder={t.clients.notesPlaceholder}
/>
</div>
</div>
</Modal>
);
</form>
</Modal>
);
}

4
src/components/projects/ProjectCreateModal.tsx
View File

@@ -100,7 +100,7 @@ export const ProjectCreateModal: React.FC<ProjectCreateModalProps> = ({ isOpen,
<button onClick={onClose} type="button" className="px-4 py-2 text-sm font-medium text-slate-700 bg-white border border-slate-300 rounded-lg hover:bg-slate-50 dark:bg-slate-800 dark:text-slate-300 dark:border-slate-600 dark:hover:bg-slate-700">
{t.actions?.cancel || "Cancel"}
</button>
<button onClick={handleSubmit} disabled={loading || !formData.name} type="button" className="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 disabled:opacity-50">
<button form="create-project-form" disabled={loading || !formData.name} type="submit" className="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 disabled:opacity-50">
{loading ? "..." : t.projects?.create}
</button>
</>
@@ -110,7 +110,7 @@ export const ProjectCreateModal: React.FC<ProjectCreateModalProps> = ({ isOpen,
return (
<Modal isOpen={isOpen} onClose={onClose} title={t.projects?.createProject} footer={footer}>
<form onSubmit={handleSubmit} className="space-y-4">
<form id="create-project-form" onSubmit={handleSubmit} className="space-y-4">
{/* ردیف اول: عنوان و انتخاب رنگ */}
<div className="flex items-end gap-3">
<div className="flex-1">

4
src/components/projects/ProjectEditModal.tsx
View File

@@ -154,7 +154,7 @@ export const ProjectEditModal: React.FC<ProjectEditModalProps> = ({ isOpen, onCl
<button onClick={onClose} type="button" className="px-4 py-2 text-sm font-medium text-slate-700 bg-white border border-slate-300 rounded-lg hover:bg-slate-50 dark:bg-slate-800 dark:text-slate-300 dark:border-slate-600">
{t.actions?.cancel || "Cancel"}
</button>
<button onClick={handleSubmit} disabled={loading || !formData.name} type="button" className="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 disabled:opacity-50">
<button form="edit-project-form" disabled={loading || !formData.name} type="submit" className="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 disabled:opacity-50">
{loading ? "..." : t.save || "Save"}
</button>
</div>
@@ -165,7 +165,7 @@ export const ProjectEditModal: React.FC<ProjectEditModalProps> = ({ isOpen, onCl
return (
<Modal isOpen={isOpen} onClose={onClose} title={t.projects.editProject} footer={footer}>
<form onSubmit={handleSubmit} className="space-y-4 mb-6">
<form id="edit-project-form" onSubmit={handleSubmit} className="space-y-4 mb-6">
<div className="flex items-end gap-3">
<div className="flex-1">
<label className="block mb-1 text-sm font-medium text-slate-700 dark:text-slate-300">