167 lines
5.6 KiB
TypeScript
167 lines
5.6 KiB
TypeScript
"use client";
|
|
|
|
import type { UseFormReturn } from "react-hook-form";
|
|
import {
|
|
Input,
|
|
Label,
|
|
RadioGroup,
|
|
RadioGroupItem,
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableHead,
|
|
TableRow,
|
|
} from "@common/components";
|
|
import { FormWrapper } from "@/widgets/form-wrapper";
|
|
import { CodeSelect } from "@/entities/code";
|
|
import { FormControl, FormField, FormItem } from "@/shared/ui/form";
|
|
import type {
|
|
AuthorizationFormData,
|
|
WithRoleAuthorizations,
|
|
} from "../model/authorizations-interface";
|
|
|
|
type BannerFormProps = {
|
|
form: UseFormReturn<AuthorizationFormData>;
|
|
authorizationNo?: number;
|
|
handleSave: (data: AuthorizationFormData) => Promise<WithRoleAuthorizations>;
|
|
handleDelete?: () => Promise<void>;
|
|
};
|
|
|
|
function ModuleForm({ form, authorizationNo, ...props }: BannerFormProps) {
|
|
return (
|
|
<FormWrapper form={form} isModifyMode={!!authorizationNo} {...props}>
|
|
<div className="card">
|
|
<Table variant="secondary">
|
|
<colgroup>
|
|
<col width="15%" />
|
|
<col width="85%" />
|
|
</colgroup>
|
|
<TableBody>
|
|
<TableRow>
|
|
<TableHead>API명</TableHead>
|
|
<TableCell className="border">
|
|
<FormField
|
|
control={form.control}
|
|
name="authorizationName"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormControl>
|
|
<Input
|
|
{...field}
|
|
value={field.value ?? ""}
|
|
className="!text-[1.3rem]"
|
|
placeholder="API명을 입력해주세요"
|
|
/>
|
|
</FormControl>
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
</TableCell>
|
|
</TableRow>
|
|
<TableRow>
|
|
<TableHead>API URL</TableHead>
|
|
<TableCell className="border">
|
|
<FormField
|
|
control={form.control}
|
|
name="urlPatternValue"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormControl>
|
|
<Input
|
|
{...field}
|
|
value={field.value ?? ""}
|
|
className="!text-[1.3rem]"
|
|
placeholder="API URL을 입력해주세요"
|
|
/>
|
|
</FormControl>
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
</TableCell>
|
|
</TableRow>
|
|
<TableRow>
|
|
<TableHead>요청 메소드</TableHead>
|
|
<TableCell className="border">
|
|
<FormField
|
|
control={form.control}
|
|
name="httpMethodCode"
|
|
render={({ field }) => (
|
|
<FormItem className="flex flex-col">
|
|
<FormControl>
|
|
<CodeSelect
|
|
{...field}
|
|
upCd="HTTPMHD"
|
|
onValueChange={field.onChange}
|
|
/>
|
|
</FormControl>
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
</TableCell>
|
|
</TableRow>
|
|
<TableRow>
|
|
<TableHead>정렬순서</TableHead>
|
|
<TableCell className="border">
|
|
<FormField
|
|
control={form.control}
|
|
name="sortSeq"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormControl>
|
|
<Input
|
|
{...field}
|
|
type="number"
|
|
min={0}
|
|
value={field.value ?? ""}
|
|
onChange={(e) => {
|
|
const value = e.target.value;
|
|
if (isNaN(parseInt(value))) return;
|
|
field.onChange(parseInt(value));
|
|
}}
|
|
className="w-[12rem] !text-[1.3rem]"
|
|
placeholder="정렬순서 입력"
|
|
/>
|
|
</FormControl>
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
</TableCell>
|
|
</TableRow>
|
|
<TableRow>
|
|
<TableHead>사용여부</TableHead>
|
|
<TableCell className="border">
|
|
<FormField
|
|
control={form.control}
|
|
name="useYn"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormControl>
|
|
<RadioGroup
|
|
{...field}
|
|
name="useYn"
|
|
onValueChange={field.onChange}
|
|
>
|
|
<div className="flex items-center space-x-2">
|
|
<RadioGroupItem value="Y" id="useY" />
|
|
<Label htmlFor="useY">사용</Label>
|
|
</div>
|
|
<div className="flex items-center space-x-2">
|
|
<RadioGroupItem value="N" id="useN" />
|
|
<Label htmlFor="useN">사용안함</Label>
|
|
</div>
|
|
</RadioGroup>
|
|
</FormControl>
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
</TableCell>
|
|
</TableRow>
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
</FormWrapper>
|
|
);
|
|
}
|
|
|
|
export { ModuleForm };
|