11import { useEffect } from 'react' ;
2- import { Stack , TextInput as Input } from '@mantine/core' ;
3- import { useForm } from 'react-hook-form' ;
2+ import { Stack , TextInput as Input , Text , SegmentedControl , Box , Group , Flex } from '@mantine/core' ;
3+ import { LockIcon } from '@assets/icons/Lock.icon' ;
4+ import { useForm , Controller } from 'react-hook-form' ;
45import { useFocusTrap } from '@mantine/hooks' ;
56
67import { Button } from '@ui/button' ;
7- import { ITemplate } from '@impler/shared' ;
8+ import { ITemplate , TemplateModeEnum } from '@impler/shared' ;
9+ import { ImportConfigEnum } from '@types' ;
10+ import { SAMPLE_DATE_FORMATS , VARIABLES } from '@config' ;
11+ import { MultiSelect } from '@ui/multi-select' ;
12+ import { validateDateFormatString } from '@shared/utils' ;
813
914interface UpdateImportFormProps {
1015 data : ITemplate ;
1116 onSubmit : ( data : IUpdateTemplateData ) => void ;
17+ isAutoImportAvailable : boolean ;
1218}
1319
14- export function UpdateImportForm ( { onSubmit, data } : UpdateImportFormProps ) {
20+ export function UpdateImportForm ( { onSubmit, data, isAutoImportAvailable } : UpdateImportFormProps ) {
1521 const focusTrapRef = useFocusTrap ( ) ;
1622 const {
1723 reset,
24+ control,
1825 register,
1926 handleSubmit,
2027 formState : { errors } ,
@@ -23,20 +30,114 @@ export function UpdateImportForm({ onSubmit, data }: UpdateImportFormProps) {
2330 useEffect ( ( ) => {
2431 reset ( {
2532 name : data . name ,
33+ mode : data . mode || TemplateModeEnum . MANUAL ,
34+ expectedDateFormat : data . expectedDateFormat ,
2635 } ) ;
2736 } , [ data , reset ] ) ;
2837
38+ const handleFormSubmit = ( formData : IUpdateTemplateData ) => {
39+ onSubmit ( formData ) ;
40+ } ;
41+
2942 return (
30- < form onSubmit = { handleSubmit ( onSubmit ) } ref = { focusTrapRef } >
31- < Stack spacing = "sm " >
43+ < form onSubmit = { handleSubmit ( handleFormSubmit ) } ref = { focusTrapRef } >
44+ < Stack spacing = "lg " >
3245 < Input
3346 autoFocus
3447 required
48+ label = "Import Name"
3549 { ...register ( 'name' ) }
3650 error = { errors . name ?. message }
3751 placeholder = "I want to import..."
52+ description = "A descriptive name for this import"
3853 />
39- < Button type = "submit" fullWidth >
54+
55+ < Box >
56+ < Text size = "sm" weight = { 500 } mb = { 4 } >
57+ Import Mode
58+ </ Text >
59+ < Text size = "xs" color = "dimmed" mb = "xs" >
60+ Choose whether this import is triggered manually or automatically
61+ </ Text >
62+ < Controller
63+ name = "mode"
64+ control = { control }
65+ render = { ( { field } ) => (
66+ < SegmentedControl
67+ fullWidth
68+ value = { field . value || ImportConfigEnum . MANUAL }
69+ onChange = { field . onChange }
70+ data = { [
71+ { label : 'Manual' , value : ImportConfigEnum . MANUAL } ,
72+ {
73+ value : ImportConfigEnum . AUTOMATED ,
74+ disabled : ! isAutoImportAvailable ,
75+ label : (
76+ < Group position = "center" spacing = { 4 } >
77+ { ! isAutoImportAvailable && (
78+ < Flex >
79+ < LockIcon size = "md" />
80+ </ Flex >
81+ ) }
82+ Automatic
83+ </ Group >
84+ ) ,
85+ } ,
86+ ] }
87+ />
88+ ) }
89+ />
90+ </ Box >
91+
92+ < Box >
93+ < Controller
94+ name = "expectedDateFormat"
95+ control = { control }
96+ rules = { {
97+ validate : ( value ) => {
98+ if ( ! value ) return true ;
99+
100+ const result = validateDateFormatString ( value as string ) ;
101+ if ( typeof result === 'object' && 'isValid' in result ) {
102+ return result . isValid ? true : result . error || 'Invalid date format' ;
103+ }
104+
105+ return result === true ? true : ( result as string ) ;
106+ } ,
107+ } }
108+ render = { ( { field, fieldState } ) => (
109+ < MultiSelect
110+ creatable
111+ maxSelectedValues = { VARIABLES . ONE }
112+ clearable
113+ searchable
114+ label = "Date Formats"
115+ placeholder = "Date Formats"
116+ description = "Define the date format you expect in your import data."
117+ data = { [
118+ ...SAMPLE_DATE_FORMATS ,
119+ ...( field . value && ! SAMPLE_DATE_FORMATS . includes ( field . value ) ? [ field . value ] : [ ] ) ,
120+ ] }
121+ getCreateLabel = { ( query ) => `Add "${ query } }
122+ onCreate = { ( newItem ) => {
123+ field . onChange ( newItem ) ;
124+
125+ return newItem ;
126+ } }
127+ onChange = { ( value ) => {
128+ field . onChange ( value [ 0 ] ) ;
129+ } }
130+ error = { fieldState . error ?. message }
131+ value = { field . value ? [ field . value ] : [ ] }
132+ />
133+ ) }
134+ />
135+ < Text size = "xs" color = "dimmed" mt = "xs" >
136+ Example formats: DD/MM/YYYY, MM/DD/YYYY, YYYY-MM-DD, DD-MMM-YYYY
137+ </ Text >
138+ </ Box >
139+
140+ < Button type = "submit" fullWidth mt = "md" >
40141 Update
41142 </ Button >
42143 </ Stack >
0 commit comments