yellowadmin/pp-tcms
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor CaseEditor's props

Browse Source
This commit is contained in:
Takeshi Kimata
2024-05-05 17:57:39 +09:00
parent b04ff770f8
commit b0f3852bb2
2 changed files with 50 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/[caseId]/CaseEditor.tsx
View File

@@ -37,24 +37,28 @@ const defaultTestCase = {
folderId: 0, folderId: 0,
}; };
export default function CaseEditor({ type Props = {
params,
}: {
params: {
projectId: string; projectId: string;
folderId: string; folderId: string;
caseId: string; caseId: string;
messages: CaseMessages; messages: CaseMessages;
locale: string; locale: string;
}; };
}) {
export default function CaseEditor({
projectId,
folderId,
caseId,
messages,
locale,
}: Props) {
const [testCase, setTestCase] = useState<CaseType>(defaultTestCase); const [testCase, setTestCase] = useState<CaseType>(defaultTestCase);
const [isTitleInvalid, setIsTitleInvalid] = useState<boolean>(false); const [isTitleInvalid, setIsTitleInvalid] = useState<boolean>(false);
const [isUpdating, setIsUpdating] = useState<boolean>(false); const [isUpdating, setIsUpdating] = useState<boolean>(false);
const router = useRouter(); const router = useRouter();
const onPlusClick = async (newStepNo: number) => { const onPlusClick = async (newStepNo: number) => {
const newStep = await fetchCreateStep(newStepNo, params.caseId); const newStep = await fetchCreateStep(newStepNo, caseId);
if (newStep) { if (newStep) {
newStep.caseSteps = { stepNo: newStepNo }; newStep.caseSteps = { stepNo: newStepNo };
const updatedSteps = testCase.Steps.map((step) => { const updatedSteps = testCase.Steps.map((step) => {
@@ -88,7 +92,7 @@ export default function CaseEditor({
const deletedStepNo = deletedStep.caseSteps.stepNo; const deletedStepNo = deletedStep.caseSteps.stepNo;
// delete request // delete request
await fetchDeleteStep(stepId, params.caseId); await fetchDeleteStep(stepId, caseId);
const updatedSteps = testCase.Steps.map((step) => { const updatedSteps = testCase.Steps.map((step) => {
if (step.caseSteps.stepNo > deletedStepNo) { if (step.caseSteps.stepNo > deletedStepNo) {
@@ -111,11 +115,11 @@ export default function CaseEditor({
const handleDrop = async (event) => { const handleDrop = async (event) => {
event.preventDefault(); event.preventDefault();
handleFetchCreateAttachments(params.caseId, event.dataTransfer.files); handleFetchCreateAttachments(caseId, event.dataTransfer.files);
}; };
const handleInput = (event) => { const handleInput = (event) => {
handleFetchCreateAttachments(params.caseId, event.target.files); handleFetchCreateAttachments(caseId, event.target.files);
}; };
const handleFetchCreateAttachments = async ( const handleFetchCreateAttachments = async (
@@ -156,7 +160,7 @@ export default function CaseEditor({
useEffect(() => { useEffect(() => {
async function fetchDataEffect() { async function fetchDataEffect() {
try { try {
const data = await fetchCase(params.caseId); const data = await fetchCase(caseId);
setTestCase(data); setTestCase(data);
} catch (error: any) { } catch (error: any) {
console.error("Error in effect:", error.message); console.error("Error in effect:", error.message);
@@ -170,15 +174,15 @@ export default function CaseEditor({
<> <>
<div className="border-b-1 dark:border-neutral-700 w-full p-3 flex items-center justify-between"> <div className="border-b-1 dark:border-neutral-700 w-full p-3 flex items-center justify-between">
<div className="flex items-center"> <div className="flex items-center">
<Tooltip content={params.messages.backToCases} placement="left"> <Tooltip content={messages.backToCases} placement="left">
<Button <Button
isIconOnly isIconOnly
size="sm" size="sm"
className="rounded-full bg-neutral-50 dark:bg-neutral-600" className="rounded-full bg-neutral-50 dark:bg-neutral-600"
onPress={() => onPress={() =>
router.push( router.push(
`/projects/${params.projectId}/folders/${params.folderId}/cases`, `/projects/${projectId}/folders/${folderId}/cases`,
{ locale: params.locale } { locale: locale }
) )
} }
> >
@@ -198,20 +202,20 @@ export default function CaseEditor({
setIsUpdating(false); setIsUpdating(false);
}} }}
> >
{isUpdating ? params.messages.updating : params.messages.update} {isUpdating ? messages.updating : messages.update}
</Button> </Button>
</div> </div>
<div className="p-5"> <div className="p-5">
<h6 className="font-bold">{params.messages.basic}</h6> <h6 className="font-bold">{messages.basic}</h6>
<Input <Input
size="sm" size="sm"
type="text" type="text"
variant="bordered" variant="bordered"
label={params.messages.title} label={messages.title}
value={testCase.title} value={testCase.title}
isInvalid={isTitleInvalid} isInvalid={isTitleInvalid}
errorMessage={isTitleInvalid ? params.messages.pleaseEnterTitle : ""} errorMessage={isTitleInvalid ? messages.pleaseEnterTitle : ""}
onChange={(e) => { onChange={(e) => {
setTestCase({ ...testCase, title: e.target.value }); setTestCase({ ...testCase, title: e.target.value });
}} }}
@@ -221,8 +225,8 @@ export default function CaseEditor({
<Textarea <Textarea
size="sm" size="sm"
variant="bordered" variant="bordered"
label={params.messages.description} label={messages.description}
placeholder={params.messages.testCaseDescription} placeholder={messages.testCaseDescription}
value={testCase.description} value={testCase.description}
onValueChange={(changeValue) => { onValueChange={(changeValue) => {
setTestCase({ ...testCase, description: changeValue }); setTestCase({ ...testCase, description: changeValue });
@@ -249,12 +253,12 @@ export default function CaseEditor({
fill={priorities[testCase.priority].color} fill={priorities[testCase.priority].color}
/> />
} }
label={params.messages.priority} label={messages.priority}
className="mt-3 max-w-xs" className="mt-3 max-w-xs"
> >
{priorities.map((priority, index) => ( {priorities.map((priority, index) => (
<SelectItem key={priority.uid} value={index}> <SelectItem key={priority.uid} value={index}>
{params.messages[priority.uid]} {messages[priority.uid]}
</SelectItem> </SelectItem>
))} ))}
</Select> </Select>
@@ -272,12 +276,12 @@ export default function CaseEditor({
); );
setTestCase({ ...testCase, type: index }); setTestCase({ ...testCase, type: index });
}} }}
label={params.messages.type} label={messages.type}
className="mt-3 max-w-xs" className="mt-3 max-w-xs"
> >
{testTypes.map((type, index) => ( {testTypes.map((type, index) => (
<SelectItem key={type.uid} value={index}> <SelectItem key={type.uid} value={index}>
{params.messages[type.uid]} {messages[type.uid]}
</SelectItem> </SelectItem>
))} ))}
</Select> </Select>
@@ -295,12 +299,12 @@ export default function CaseEditor({
); );
setTestCase({ ...testCase, template: index }); setTestCase({ ...testCase, template: index });
}} }}
label={params.messages.template} label={messages.template}
className="mt-3 max-w-xs" className="mt-3 max-w-xs"
> >
{templates.map((template, index) => ( {templates.map((template, index) => (
<SelectItem key={template.uid} value={index}> <SelectItem key={template.uid} value={index}>
{params.messages[template.uid]} {messages[template.uid]}
</SelectItem> </SelectItem>
))} ))}
</Select> </Select>
@@ -309,12 +313,12 @@ export default function CaseEditor({
<Divider className="my-6" /> <Divider className="my-6" />
{templates[testCase.template].uid === "text" ? ( {templates[testCase.template].uid === "text" ? (
<div> <div>
<h6 className="font-bold">{params.messages.testDetail}</h6> <h6 className="font-bold">{messages.testDetail}</h6>
<div className="flex"> <div className="flex">
<Textarea <Textarea
size="sm" size="sm"
variant="bordered" variant="bordered"
label={params.messages.preconditions} label={messages.preconditions}
value={testCase.preConditions} value={testCase.preConditions}
onValueChange={(changeValue) => { onValueChange={(changeValue) => {
setTestCase({ ...testCase, preConditions: changeValue }); setTestCase({ ...testCase, preConditions: changeValue });
@@ -325,7 +329,7 @@ export default function CaseEditor({
<Textarea <Textarea
size="sm" size="sm"
variant="bordered" variant="bordered"
label={params.messages.expectedResult} label={messages.expectedResult}
value={testCase.expectedResults} value={testCase.expectedResults}
onValueChange={(changeValue) => { onValueChange={(changeValue) => {
setTestCase({ ...testCase, expectedResults: changeValue }); setTestCase({ ...testCase, expectedResults: changeValue });
@@ -337,7 +341,7 @@ export default function CaseEditor({
) : ( ) : (
<div> <div>
<div className="flex items-center"> <div className="flex items-center">
<h6 className="font-bold">{params.messages.steps}</h6> <h6 className="font-bold">{messages.steps}</h6>
<Button <Button
startContent={<Plus size={16} />} startContent={<Plus size={16} />}
size="sm" size="sm"
@@ -345,7 +349,7 @@ export default function CaseEditor({
className="ms-3" className="ms-3"
onPress={() => onPlusClick(1)} onPress={() => onPlusClick(1)}
> >
{params.messages.newStep} {messages.newStep}
</Button> </Button>
</div> </div>
<CaseStepsEditor <CaseStepsEditor
@@ -364,13 +368,13 @@ export default function CaseEditor({
}} }}
onStepPlus={onPlusClick} onStepPlus={onPlusClick}
onStepDelete={onDeleteClick} onStepDelete={onDeleteClick}
messages={params.messages} messages={messages}
/> />
</div> </div>
)} )}
<Divider className="my-6" /> <Divider className="my-6" />
<h6 className="font-bold">{params.messages.attachments}</h6> <h6 className="font-bold">{messages.attachments}</h6>
<CaseAttachmentsEditor <CaseAttachmentsEditor
attachments={testCase.Attachments} attachments={testCase.Attachments}
onAttachmentDownload={( onAttachmentDownload={(
@@ -378,7 +382,7 @@ export default function CaseEditor({
downloadFileName: string downloadFileName: string
) => fetchDownloadAttachment(attachmentId, downloadFileName)} ) => fetchDownloadAttachment(attachmentId, downloadFileName)}
onAttachmentDelete={onAttachmentDelete} onAttachmentDelete={onAttachmentDelete}
messages={params.messages} messages={messages}
/> />
<div <div
className="flex items-center justify-center w-96 mt-3" className="flex items-center justify-center w-96 mt-3"
@@ -392,13 +396,11 @@ export default function CaseEditor({
<div className="flex flex-col items-center justify-center pt-5 pb-6"> <div className="flex flex-col items-center justify-center pt-5 pb-6">
<ArrowUpFromLine /> <ArrowUpFromLine />
<p className="mb-2 text-sm text-neutral-500 dark:text-neutral-400"> <p className="mb-2 text-sm text-neutral-500 dark:text-neutral-400">
<span className="font-semibold"> <span className="font-semibold">{messages.clickToUpload}</span>
{params.messages.clickToUpload} <span>{messages.orDragAndDrop}</span>
</span>
<span>{params.messages.orDragAndDrop}</span>
</p> </p>
<p className="text-xs text-neutral-500 dark:text-neutral-400"> <p className="text-xs text-neutral-500 dark:text-neutral-400">
{params.messages.maxFileSize}: 50 MB {messages.maxFileSize}: 50 MB
</p> </p>
</div> </div>
<input <input

12
frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/[caseId]/page.tsx
View File

@@ -62,13 +62,11 @@ export default function Page({
return ( return (
<CaseEditor <CaseEditor
params={{ projectId={params.projectId}
projectId: params.projectId, folderId={params.folderId}
folderId: params.folderId, caseId={params.caseId}
caseId: params.caseId, messages={messages}
messages: messages, locale={params.locale}
locale: params.locale,
}}
/> />
); );
} }