Skip to content

Commit

Permalink
fix(file-config): change value to request body of api
Browse files Browse the repository at this point in the history
  • Loading branch information
@ngyngcphu
ngyngcphu committed Dec 2, 2023
1 parent 96aa62a commit c368808
Show file tree
Hide file tree
Showing 6 changed files with 185 additions and 126 deletions.
142 changes: 70 additions & 72 deletions src/components/order/common/LayoutSide.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,82 +13,80 @@ import { LAYOUT_INFO, LAYOUT_SIDE } from '@constants';
export const useLayoutSide = () => {
const [openDialog, setOpenDialog] = useState<boolean>(false);

const LayoutSide: Component<{
layout: string;
pageSide: string;
handlePageBothSide: (event: string) => void;
}> = useMemo(
() =>
({ layout, pageSide, handlePageBothSide }) => {
const handleOpen = () => {
setOpenDialog(!openDialog);
};
const LayoutSide: Component<{ layout: string; handlePageBothSide: (event: string) => void }> =
useMemo(
() =>
({ layout, handlePageBothSide }) => {
const handleOpen = () => {
setOpenDialog(!openDialog);
};

return (
<Dialog size='xs' open={openDialog} handler={handleOpen}>
<DialogHeader className='justify-between'>
<div className='font-medium text-gray/4 text-base'>
<span className='mr-2 font-bold'>Both side</span>
<span className='mr-2'>-</span>
<span>{layout}</span>
</div>
<IconButton color='blue-gray' size='sm' variant='text' onClick={handleOpen}>
<svg
xmlns='http://www.w3.org/2000/svg'
fill='none'
viewBox='0 0 24 24'
stroke='currentColor'
strokeWidth={2}
className='h-5 w-5'
>
<path strokeLinecap='round' strokeLinejoin='round' d='M6 18L18 6M6 6l12 12' />
</svg>
</IconButton>
</DialogHeader>
<DialogBody>
<List>
{LAYOUT_INFO.map((item, index) => (
<ListItem
key={index}
className={
`hover:bg-gray-300 ` + (pageSide.includes(item.pos) ? 'bg-gray-300' : '')
}
onClick={() => {
handlePageBothSide(
(layout === LAYOUT_SIDE.portrait ? item.portraitSize : item.landscapeSize) +
' (' +
item.pos +
')'
);
handleOpen();
}}
return (
<Dialog size='xs' open={openDialog} handler={handleOpen}>
<DialogHeader className='justify-between'>
<div className='font-medium text-gray/4 text-base'>
<span className='mr-2 font-bold'>Both side</span>
<span className='mr-2'>-</span>
<span>{layout}</span>
</div>
<IconButton color='blue-gray' size='sm' variant='text' onClick={handleOpen}>
<svg
xmlns='http://www.w3.org/2000/svg'
fill='none'
viewBox='0 0 24 24'
stroke='currentColor'
strokeWidth={2}
className='h-5 w-5'
>
<ListItemPrefix
className={
index > 1 && layout === LAYOUT_SIDE.portrait ? 'px-2 bg-gray-200' : ''
}
<path strokeLinecap='round' strokeLinejoin='round' d='M6 18L18 6M6 6l12 12' />
</svg>
</IconButton>
</DialogHeader>
<DialogBody>
<List>
{LAYOUT_INFO.map((item, index) => (
<ListItem
key={index}
className='hover:bg-gray-300'
onClick={() => {
handlePageBothSide(
layout === LAYOUT_SIDE.portrait
? item.portraitSize.value
: item.landscapeSize.value
);
handleOpen();
}}
>
<img
src={
layout === LAYOUT_SIDE.portrait ? item.portraitImage : item.landscapeImage
<ListItemPrefix
className={
index > 1 && layout === LAYOUT_SIDE.portrait ? 'px-2 bg-gray-200' : ''
}
/>
</ListItemPrefix>
<div className='text-gray/4'>
<p className='text-base md:text-lg font-medium'>
{layout === LAYOUT_SIDE.portrait ? item.portraitSize : item.landscapeSize}
</p>
<p className='text-xs md:text-sm font-bold uppercase'>{item.pos}</p>
</div>
</ListItem>
))}
</List>
</DialogBody>
</Dialog>
);
},
[openDialog]
);
>
<img
src={
layout === LAYOUT_SIDE.portrait
? item.portraitImage
: item.landscapeImage
}
/>
</ListItemPrefix>
<div className='text-gray/4'>
<p className='text-base md:text-lg font-medium'>
{layout === LAYOUT_SIDE.portrait
? item.portraitSize.label
: item.landscapeSize.label}
</p>
<p className='text-xs md:text-sm font-bold uppercase'>{item.pos}</p>
</div>
</ListItem>
))}
</List>
</DialogBody>
</Dialog>
);
},
[openDialog]
);

return {
openLayoutSide: () => setOpenDialog(true),
Expand Down
33 changes: 18 additions & 15 deletions src/components/order/desktop/UploadAndPreviewDesktop.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -154,14 +154,14 @@ export const UploadAndPreviewDesktop: Component<{
const handleLayoutChange = (e: ChangeEvent<HTMLInputElement>) => {
setPageBothSide(
e.target.value === LAYOUT_SIDE.portrait
? PAGE_SIDE.both.portrait[0]!
: PAGE_SIDE.both.landscape[0]!
? PAGE_SIDE.both.portrait[0]!.value
: PAGE_SIDE.both.landscape[0]!.value
);
setFileConfig(
FILE_CONFIG.pageSide,
e.target.value === LAYOUT_SIDE.portrait
? PAGE_SIDE.both.portrait[0]!
: PAGE_SIDE.both.landscape[0]!
? PAGE_SIDE.both.portrait[0]!.value
: PAGE_SIDE.both.landscape[0]!.value
);
setFileConfig(FILE_CONFIG.layout, e.target.value);
};
Expand Down Expand Up @@ -230,7 +230,7 @@ export const UploadAndPreviewDesktop: Component<{
{[LAYOUT_SIDE.portrait, LAYOUT_SIDE.landscape].map((item, index) => (
<Radio
key={index}
label={item}
label={<span className='capitalize'>{item}</span>}
value={item}
onChange={handleLayoutChange}
checked={fileConfig.layout === item}
Expand All @@ -246,7 +246,11 @@ export const UploadAndPreviewDesktop: Component<{
(item, index) => (
<Radio
key={index}
label={item}
label={
<p>
<span className='capitalize'>{item}</span> {index > 0 && ' pages only'}
</p>
}
value={item}
onChange={handlePagesChange}
checked={fileConfig.pages === item}
Expand Down Expand Up @@ -279,15 +283,15 @@ export const UploadAndPreviewDesktop: Component<{
<span className='text-xl font-bold mb-4'>Pages per sheet</span>
<Select
label='Select an option'
value={fileConfig.pagesPerSheet}
value={`${fileConfig.pagesPerSheet}`}
onChange={(event) => {
if (event) {
setFileConfig(FILE_CONFIG.pagesPerSheet, event);
setFileConfig(FILE_CONFIG.pagesPerSheet, parseInt(event));
}
}}
>
{PAGES_PER_SHEET.map((item) => (
<Option key={item} value={item}>
<Option key={item} value={`${item}`}>
{item}
</Option>
))}
Expand All @@ -297,7 +301,7 @@ export const UploadAndPreviewDesktop: Component<{
<span className='font-bold text-xl'>Page Side</span>
<div className='-ml-3'>
<Radio
label={PAGE_SIDE.one}
label={<span className='capitalize'>{PAGE_SIDE.one} side</span>}
value={PAGE_SIDE.one}
onChange={handlePageSideChange}
checked={fileConfig.pageSide === PAGE_SIDE.one}
Expand All @@ -318,8 +322,8 @@ export const UploadAndPreviewDesktop: Component<{
}}
>
{PAGE_SIDE.both.portrait.map((item, index) => (
<Option key={index} value={item}>
{item}
<Option key={index} value={item.value}>
{item.label}
</Option>
))}
</Select>
Expand All @@ -335,8 +339,8 @@ export const UploadAndPreviewDesktop: Component<{
}}
>
{PAGE_SIDE.both.landscape.map((item, index) => (
<Option key={index} value={item}>
{item}
<Option key={index} value={item.value}>
{item.label}
</Option>
))}
</Select>
Expand All @@ -355,7 +359,6 @@ export const UploadAndPreviewDesktop: Component<{
/>
<LayoutSide
layout={fileConfig.layout}
pageSide={fileConfig.pageSide}
handlePageBothSide={handlePageBothSide}
/>
</div>
Expand Down
38 changes: 19 additions & 19 deletions src/components/order/mobile/UploadDocumentForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -148,14 +148,14 @@ export const UploadDocumentForm: Component<{
const handleLayoutChange = (e: ChangeEvent<HTMLInputElement>) => {
setPageBothSide(
e.target.value === LAYOUT_SIDE.portrait
? PAGE_SIDE.both.portrait[0]!
: PAGE_SIDE.both.landscape[0]!
? PAGE_SIDE.both.portrait[0]!.value
: PAGE_SIDE.both.landscape[0]!.value
);
setFileConfig(
FILE_CONFIG.pageSide,
e.target.value === LAYOUT_SIDE.portrait
? PAGE_SIDE.both.portrait[0]!
: PAGE_SIDE.both.landscape[0]!
? PAGE_SIDE.both.portrait[0]!.value
: PAGE_SIDE.both.landscape[0]!.value
);
setFileConfig(FILE_CONFIG.layout, e.target.value);
};
Expand Down Expand Up @@ -194,7 +194,7 @@ export const UploadDocumentForm: Component<{
{[LAYOUT_SIDE.portrait, LAYOUT_SIDE.landscape].map((item, index) => (
<Radio
key={index}
label={item}
label={<span className='capitalize'>{item}</span>}
value={item}
onChange={handleLayoutChange}
checked={fileConfig.layout === item}
Expand All @@ -209,7 +209,11 @@ export const UploadDocumentForm: Component<{
{[PAGES_SPECIFIC.all, PAGES_SPECIFIC.odd, PAGES_SPECIFIC.even].map((item, index) => (
<Radio
key={index}
label={item}
label={
<p>
<span className='capitalize'>{item}</span> {index > 0 && ' pages only'}
</p>
}
value={item}
onChange={handlePagesChange}
checked={fileConfig.pages === item}
Expand Down Expand Up @@ -241,15 +245,15 @@ export const UploadDocumentForm: Component<{
<Typography className='font-bold mb-4'>Pages per sheet</Typography>
<Select
label='Select an option'
value={fileConfig.pagesPerSheet}
value={`${fileConfig.pagesPerSheet}`}
onChange={(event) => {
if (event) {
setFileConfig(FILE_CONFIG.pagesPerSheet, event);
setFileConfig(FILE_CONFIG.pagesPerSheet, parseInt(event));
}
}}
>
{PAGES_PER_SHEET.map((item) => (
<Option key={item} value={item}>
<Option key={item} value={`${item}`}>
{item}
</Option>
))}
Expand All @@ -259,7 +263,7 @@ export const UploadDocumentForm: Component<{
<Typography className='font-bold'>Page Side</Typography>
<div className='-ml-3'>
<Radio
label={PAGE_SIDE.one}
label={<span className='capitalize'>{PAGE_SIDE.one} side</span>}
value={PAGE_SIDE.one}
onChange={handlePageSideChange}
checked={fileConfig.pageSide === PAGE_SIDE.one}
Expand All @@ -280,8 +284,8 @@ export const UploadDocumentForm: Component<{
}}
>
{PAGE_SIDE.both.portrait.map((item, index) => (
<Option key={index} value={item}>
{item}
<Option key={index} value={item.value}>
{item.label}
</Option>
))}
</Select>
Expand All @@ -297,8 +301,8 @@ export const UploadDocumentForm: Component<{
}}
>
{PAGE_SIDE.both.landscape.map((item, index) => (
<Option key={index} value={item}>
{item}
<Option key={index} value={item.value}>
{item.label}
</Option>
))}
</Select>
Expand All @@ -315,11 +319,7 @@ export const UploadDocumentForm: Component<{
className='w-6 h-6 cursor-pointer text-gray-500 hover:text-black'
onClick={openLayoutSide}
/>
<LayoutSide
layout={fileConfig.layout}
pageSide={fileConfig.pageSide}
handlePageBothSide={handlePageBothSide}
/>
<LayoutSide layout={fileConfig.layout} handlePageBothSide={handlePageBothSide} />
</div>
</div>
</div>
Expand Down
Loading

0 comments on commit c368808

Please sign in to comment.