Skip to content

Commit

Permalink
fix(page-create-modal): prepare to add dashboard table as step2
Browse files Browse the repository at this point in the history
  • Loading branch information
@hanpuliu-charles
hanpuliu-charles committed Jul 1, 2024
1 parent 393d165 commit e57c5cd
Showing 1 changed file with 106 additions and 100 deletions.
206 changes: 106 additions & 100 deletions apps/studio/src/features/editing-experience/components/PageCreateModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,120 +71,126 @@ export const PageCreateModal = ({
const onSubmit: SubmitHandler<PageCreateFormFields> = (data) =>
console.log(data)

return (
<Modal isOpen={isOpen} onClose={onClose}>
const [submitted, setSubmitted] = useState(false)

let content = (
<>
<ModalHeader color="base.content.strong">
Tell us about your new page
</ModalHeader>
<ModalCloseButton />
<ModalOverlay />
<ModalContent>
<ModalHeader color="base.content.strong">
Tell us about your new page
</ModalHeader>
<ModalCloseButton />
<form onSubmit={handleSubmit(onSubmit)}>
<ModalBody>
<Stack gap={'1.5em'}>
<Text fontSize="md" color="base.content.default">
You can change these later.
</Text>
{/* Section 1: Page Title */}
<FormControl isInvalid={!!errors.title}>
<FormLabel color="base.content.strong">
Page title
<FormHelperText color="base.content.default">
Title should be descriptive
</FormHelperText>
</FormLabel>
<form onSubmit={handleSubmit(onSubmit)}>
<ModalBody>
<Stack gap={'1.5em'}>
<Text fontSize="md" color="base.content.default">
You can change these later.
</Text>
{/* Section 1: Page Title */}
<FormControl isInvalid={!!errors.title}>
<FormLabel color="base.content.strong">
Page title
<FormHelperText color="base.content.default">
Title should be descriptive
</FormHelperText>
</FormLabel>

<Input
type="text"
placeholder="This is a title for your new page"
id="title"
{...register('title', {
required: ERROR_MESSAGES.TITLE.REQUIRED,
validate: (value) =>
value.trim().length !== 0 || ERROR_MESSAGES.TITLE.REQUIRED,
minLength: {
value: 1,
message: ERROR_MESSAGES.MIN_LENGTH,
},
maxLength: {
value: MAX_TITLE_LENGTH,
message: ERROR_MESSAGES.MAX_LENGTH(MAX_TITLE_LENGTH),
},
})}
isInvalid={!!errors.title}
/>
{errors.title && errors.title.message ? (
<FormErrorMessage>{errors.title.message}</FormErrorMessage>
) : (
<FormHelperText mt={'0.5em'} color="base.content.medium">
{MAX_TITLE_LENGTH - titleLen} characters left
</FormHelperText>
)}
</FormControl>

{/* Section 2: Page URL */}
<FormControl isInvalid={!!errors.url}>
<FormLabel>
Page URL
<FormHelperText>URL should be short and simple</FormHelperText>
</FormLabel>
<InputGroup>
<InputLeftAddon
bgColor="interaction.support.disabled"
color="base.divider.strong"
>
your-site.gov.sg/
</InputLeftAddon>
<Input
type="text"
placeholder="This is a title for your new page"
id="title"
{...register('title', {
required: ERROR_MESSAGES.TITLE.REQUIRED,
validate: (value) =>
value.trim().length !== 0 ||
ERROR_MESSAGES.TITLE.REQUIRED,
type="tel"
defaultValue={'hello-world'}
color="base.content.default"
{...register('url', {
required: ERROR_MESSAGES.URL.REQUIRED,
minLength: {
value: 1,
message: ERROR_MESSAGES.MIN_LENGTH,
},
maxLength: {
value: MAX_TITLE_LENGTH,
message: ERROR_MESSAGES.MAX_LENGTH(MAX_TITLE_LENGTH),
value: MAX_PAGE_URL_LENGTH,
message: ERROR_MESSAGES.MAX_LENGTH(MAX_PAGE_URL_LENGTH),
},
})}
isInvalid={!!errors.title}
isInvalid={!!errors.url}
/>
{errors.title && errors.title.message ? (
<FormErrorMessage>{errors.title.message}</FormErrorMessage>
) : (
<FormHelperText mt={'0.5em'} color="base.content.medium">
{MAX_TITLE_LENGTH - titleLen} characters left
</FormHelperText>
)}
</FormControl>
</InputGroup>

{/* Section 2: Page URL */}
<FormControl isInvalid={!!errors.url}>
<FormLabel>
Page URL
<FormHelperText>
URL should be short and simple
</FormHelperText>
</FormLabel>
<InputGroup>
<InputLeftAddon
bgColor="interaction.support.disabled"
color="base.divider.strong"
>
your-site.gov.sg/
</InputLeftAddon>
<Input
type="tel"
defaultValue={'hello-world'}
color="base.content.default"
{...register('url', {
required: ERROR_MESSAGES.URL.REQUIRED,
minLength: {
value: 1,
message: ERROR_MESSAGES.MIN_LENGTH,
},
maxLength: {
value: MAX_PAGE_URL_LENGTH,
message: ERROR_MESSAGES.MAX_LENGTH(MAX_PAGE_URL_LENGTH),
},
})}
isInvalid={!!errors.url}
/>
</InputGroup>
{errors.url && errors.url.message ? (
<FormErrorMessage>{errors.url.message}</FormErrorMessage>
) : (
<FormHelperText mt={'0.5em'} color="base.content.medium">
{MAX_PAGE_URL_LENGTH - pageUrlLen} characters left
</FormHelperText>
)}
</FormControl>
</Stack>
</ModalBody>

{errors.url && errors.url.message ? (
<FormErrorMessage>{errors.url.message}</FormErrorMessage>
) : (
<FormHelperText mt={'0.5em'} color="base.content.medium">
{MAX_PAGE_URL_LENGTH - pageUrlLen} characters left
</FormHelperText>
)}
</FormControl>
</Stack>
</ModalBody>
<ModalFooter>
<Button
variant="link"
mr={5}
onClick={onClose}
fontWeight={500}
color={'base.content.strong'}
>
Cancel
</Button>
<Button bgColor="interaction.main.default" type="submit">
Create page
</Button>
</ModalFooter>
</form>
</>
)

<ModalFooter>
<Button
variant="link"
mr={5}
onClick={onClose}
fontWeight={500}
color={'base.content.strong'}
>
Cancel
</Button>
<Button bgColor="interaction.main.default" type="submit">
Create page
</Button>
</ModalFooter>
</form>
</ModalContent>
if (submitted) {
// TODO: set content to layout selector
}
return (
<Modal isOpen={isOpen} onClose={onClose}>
<ModalCloseButton />
<ModalOverlay />
<ModalContent>{content}</ModalContent>
</Modal>
)
}
Expand Down

0 comments on commit e57c5cd

Please sign in to comment.