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

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

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