Fix overflow issue in export dialog (#1737)

This commit is contained in:
Wojciech Mista 2022-01-13 15:03:33 +01:00 committed by GitHub
parent d17bd24419
commit e36da6df28
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -98,6 +98,15 @@ const useStyles = makeStyles(
}, },
warehousesLabel: { warehousesLabel: {
marginBottom: theme.spacing(2) marginBottom: theme.spacing(2)
},
scrollArea: {
maxHeight: "calc(100vh - 350px)",
minHeight: "auto",
"@media (min-height: 800px)": {
minHeight: 440
},
overflowY: "auto",
overflowX: "hidden"
} }
}), }),
{ {
@ -304,303 +313,305 @@ const ProductExportDialogInfo: React.FC<ProductExportDialogInfoProps> = ({
description="select product informations to be exported" description="select product informations to be exported"
/> />
</Typography> </Typography>
<Accordion <div className={classes.scrollArea}>
className={classes.accordion} <Accordion
title={intl.formatMessage(sectionNames.channels)} className={classes.accordion}
quickPeek={ title={intl.formatMessage(sectionNames.channels)}
selectedChannels.length > 0 && ( quickPeek={
<div className={classes.quickPeekContainer}> selectedChannels.length > 0 && (
{selectedChannels.slice(0, maxChips).map(channel => ( <div className={classes.quickPeekContainer}>
<Chip {selectedChannels.slice(0, maxChips).map(channel => (
className={classes.chip}
label={channel.name}
onClose={() => onChannelSelect(channel)}
key={channel.id}
/>
))}
{selectedChannels.length > maxChips && (
<Typography className={classes.moreLabel} variant="caption">
<FormattedMessage
defaultMessage="and {number} more"
description="there are more elements of list that are hidden"
values={{
number: selectedChannels.length - maxChips
}}
/>
</Typography>
)}
</div>
)
}
data-test="channels"
>
<ChannelsAvailabilityDialogContentWrapper
hasAnyChannelsToDisplay={!!channels.length}
hasAllSelected={selectedChannels.length === channels.length}
query={channelsQuery}
onQueryChange={onChannelsQueryChange}
toggleAll={handleSelectAllChannels}
>
<ChannelsAvailabilityDialogChannelsList
channels={filteredChannels}
isChannelSelected={option =>
!!selectedChannels.find(channel => channel.id === option.id)
}
onChange={onChannelSelect}
/>
</ChannelsAvailabilityDialogContentWrapper>
</Accordion>
<FieldAccordion
className={classes.accordion}
title={intl.formatMessage({
defaultMessage: "Product Organization",
description: "informations about product organization, header"
})}
data={data}
fields={[
ProductFieldEnum.CATEGORY,
ProductFieldEnum.COLLECTIONS,
ProductFieldEnum.PRODUCT_TYPE
]}
onChange={handleFieldChange}
onToggleAll={handleToggleAllFields}
data-test="organization"
/>
<Accordion
className={classes.accordion}
title={intl.formatMessage(sectionNames.attributes)}
quickPeek={
selectedAttributes.length > 0 && (
<div className={classes.quickPeekContainer}>
{selectedAttributes.slice(0, maxChips).map(attribute => (
<Chip
className={classes.chip}
label={attribute.label}
onClose={() =>
onAttrtibuteSelect({
target: {
name: attributeNamePrefix + attribute.value,
value: undefined
}
})
}
key={attribute.value}
/>
))}
{selectedAttributes.length > maxChips && (
<Typography className={classes.moreLabel} variant="caption">
<FormattedMessage
defaultMessage="and {number} more"
description="there are more elements of list that are hidden"
values={{
number: selectedAttributes.length - maxChips
}}
/>
</Typography>
)}
</div>
)
}
data-test="attributes"
>
<TextField
name="query"
value={query}
onChange={onQueryChange}
label={intl.formatMessage({
defaultMessage: "Search Atrtibuttes"
})}
placeholder={intl.formatMessage({
defaultMessage: "Search by attribute name",
description: "input helper text, search attributes"
})}
fullWidth
InputProps={{
autoComplete: "off",
endAdornment: loading && <CircularProgress size={16} />
}}
/>
<Hr className={classes.hr} />
{attributes.map(attribute => (
<Option
checked={data.exportInfo.attributes.includes(attribute.value)}
name={attributeNamePrefix + attribute.value}
onChange={onAttrtibuteSelect}
key={attribute.value}
>
{attribute.label}
</Option>
))}
{(hasMore || loading) && (
<div className={classes.loadMoreContainer}>
{hasMore && !loading && (
<Button color="primary" onClick={onFetchMore}>
<FormattedMessage
defaultMessage="Load More"
description="button"
/>
</Button>
)}
{loading && <CircularProgress size={32} />}
</div>
)}
</Accordion>
<FieldAccordion
className={classes.accordion}
title={intl.formatMessage({
defaultMessage: "Financial Information",
description: "informations about product prices etc, header"
})}
data={data}
fields={[ProductFieldEnum.CHARGE_TAXES]}
onChange={handleFieldChange}
onToggleAll={handleToggleAllFields}
data-test="financial"
/>
<Accordion
className={classes.accordion}
title={intl.formatMessage({
defaultMessage: "Inventory Information",
description: "informations about product stock, header"
})}
quickPeek={
(data.exportInfo.warehouses.length > 0 ||
selectedInventoryFields.length > 0) && (
<div className={classes.quickPeekContainer}>
{selectedInventoryFields.slice(0, maxChips).map(field => (
<Chip
className={classes.chip}
label={getFieldLabel(field)}
onClose={() =>
onChange({
target: {
name: field,
value: false
}
})
}
/>
))}
{data.exportInfo.warehouses
.slice(0, maxChips - selectedInventoryFields.length)
.map(warehouseId => (
<Chip <Chip
className={classes.chip} className={classes.chip}
label={ label={channel.name}
warehouses.find( onClose={() => onChannelSelect(channel)}
warehouse => warehouse.value === warehouseId key={channel.id}
).label />
} ))}
{selectedChannels.length > maxChips && (
<Typography className={classes.moreLabel} variant="caption">
<FormattedMessage
defaultMessage="and {number} more"
description="there are more elements of list that are hidden"
values={{
number: selectedChannels.length - maxChips
}}
/>
</Typography>
)}
</div>
)
}
data-test="channels"
>
<ChannelsAvailabilityDialogContentWrapper
hasAnyChannelsToDisplay={!!channels.length}
hasAllSelected={selectedChannels.length === channels.length}
query={channelsQuery}
onQueryChange={onChannelsQueryChange}
toggleAll={handleSelectAllChannels}
>
<ChannelsAvailabilityDialogChannelsList
channels={filteredChannels}
isChannelSelected={option =>
!!selectedChannels.find(channel => channel.id === option.id)
}
onChange={onChannelSelect}
/>
</ChannelsAvailabilityDialogContentWrapper>
</Accordion>
<FieldAccordion
className={classes.accordion}
title={intl.formatMessage({
defaultMessage: "Product Organization",
description: "informations about product organization, header"
})}
data={data}
fields={[
ProductFieldEnum.CATEGORY,
ProductFieldEnum.COLLECTIONS,
ProductFieldEnum.PRODUCT_TYPE
]}
onChange={handleFieldChange}
onToggleAll={handleToggleAllFields}
data-test="organization"
/>
<Accordion
className={classes.accordion}
title={intl.formatMessage(sectionNames.attributes)}
quickPeek={
selectedAttributes.length > 0 && (
<div className={classes.quickPeekContainer}>
{selectedAttributes.slice(0, maxChips).map(attribute => (
<Chip
className={classes.chip}
label={attribute.label}
onClose={() => onClose={() =>
onWarehouseSelect({ onAttrtibuteSelect({
target: { target: {
name: warehouseNamePrefix + warehouseId, name: attributeNamePrefix + attribute.value,
value: undefined value: undefined
} }
}) })
} }
key={attribute.value}
/>
))}
{selectedAttributes.length > maxChips && (
<Typography className={classes.moreLabel} variant="caption">
<FormattedMessage
defaultMessage="and {number} more"
description="there are more elements of list that are hidden"
values={{
number: selectedAttributes.length - maxChips
}}
/>
</Typography>
)}
</div>
)
}
data-test="attributes"
>
<TextField
name="query"
value={query}
onChange={onQueryChange}
label={intl.formatMessage({
defaultMessage: "Search Atrtibuttes"
})}
placeholder={intl.formatMessage({
defaultMessage: "Search by attribute name",
description: "input helper text, search attributes"
})}
fullWidth
InputProps={{
autoComplete: "off",
endAdornment: loading && <CircularProgress size={16} />
}}
/>
<Hr className={classes.hr} />
{attributes.map(attribute => (
<Option
checked={data.exportInfo.attributes.includes(attribute.value)}
name={attributeNamePrefix + attribute.value}
onChange={onAttrtibuteSelect}
key={attribute.value}
>
{attribute.label}
</Option>
))}
{(hasMore || loading) && (
<div className={classes.loadMoreContainer}>
{hasMore && !loading && (
<Button color="primary" onClick={onFetchMore}>
<FormattedMessage
defaultMessage="Load More"
description="button"
/>
</Button>
)}
{loading && <CircularProgress size={32} />}
</div>
)}
</Accordion>
<FieldAccordion
className={classes.accordion}
title={intl.formatMessage({
defaultMessage: "Financial Information",
description: "informations about product prices etc, header"
})}
data={data}
fields={[ProductFieldEnum.CHARGE_TAXES]}
onChange={handleFieldChange}
onToggleAll={handleToggleAllFields}
data-test="financial"
/>
<Accordion
className={classes.accordion}
title={intl.formatMessage({
defaultMessage: "Inventory Information",
description: "informations about product stock, header"
})}
quickPeek={
(data.exportInfo.warehouses.length > 0 ||
selectedInventoryFields.length > 0) && (
<div className={classes.quickPeekContainer}>
{selectedInventoryFields.slice(0, maxChips).map(field => (
<Chip
className={classes.chip}
label={getFieldLabel(field)}
onClose={() =>
onChange({
target: {
name: field,
value: false
}
})
}
/> />
))} ))}
{data.exportInfo.warehouses.length + {data.exportInfo.warehouses
selectedInventoryFields.length > .slice(0, maxChips - selectedInventoryFields.length)
maxChips && ( .map(warehouseId => (
<Typography className={classes.moreLabel} variant="caption"> <Chip
<FormattedMessage className={classes.chip}
defaultMessage="and {number} more" label={
description="there are more elements of list that are hidden" warehouses.find(
values={{ warehouse => warehouse.value === warehouseId
number: ).label
data.exportInfo.warehouses.length + }
selectedInventoryFields.length - onClose={() =>
maxChips onWarehouseSelect({
}} target: {
/> name: warehouseNamePrefix + warehouseId,
</Typography> value: undefined
)} }
</div> })
) }
} />
data-test="inventory" ))}
> {data.exportInfo.warehouses.length +
<div> selectedInventoryFields.length >
<Option maxChips && (
checked={selectedAllInventoryFields} <Typography className={classes.moreLabel} variant="caption">
name="all" <FormattedMessage
onChange={() => defaultMessage="and {number} more"
handleToggleAllFields( description="there are more elements of list that are hidden"
inventoryFields, values={{
!selectedAllInventoryFields number:
) data.exportInfo.warehouses.length +
} selectedInventoryFields.length -
> maxChips
<FormattedMessage }}
defaultMessage="Select All" />
description="selectt all options" </Typography>
/> )}
</Option> </div>
{inventoryFields.map(field => ( )
}
data-test="inventory"
>
<div>
<Option <Option
checked={data.exportInfo.fields.includes(field)} checked={selectedAllInventoryFields}
name={field} name="all"
onChange={handleFieldChange} onChange={() =>
key={field} handleToggleAllFields(
inventoryFields,
!selectedAllInventoryFields
)
}
> >
{getFieldLabel(field)} <FormattedMessage
defaultMessage="Select All"
description="selectt all options"
/>
</Option>
{inventoryFields.map(field => (
<Option
checked={data.exportInfo.fields.includes(field)}
name={field}
onChange={handleFieldChange}
key={field}
>
{getFieldLabel(field)}
</Option>
))}
</div>
<Hr className={classes.hrWarehouses} />
<Typography>
<FormattedMessage defaultMessage="Export Product Stock Quantity to CSV" />
</Typography>
<div>
<Option
checked={warehouses.every(warehouse =>
data.exportInfo.warehouses.includes(warehouse.value)
)}
name="all-warehouses"
onChange={onSelectAllWarehouses}
>
<FormattedMessage
defaultMessage="Export stock for all warehouses"
description="option"
/>
</Option>
</div>
<Hr className={classes.hrWarehouses} />
<Typography className={classes.warehousesLabel} variant="subtitle1">
<FormattedMessage
defaultMessage="Warehouses A to Z"
description="list of warehouses"
/>
</Typography>
{warehouses.map(warehouse => (
<Option
checked={data.exportInfo.warehouses.includes(warehouse.value)}
name={warehouseNamePrefix + warehouse.value}
onChange={onWarehouseSelect}
key={warehouse.value}
>
{warehouse.label}
</Option> </Option>
))} ))}
</div> </Accordion>
<Hr className={classes.hrWarehouses} /> <FieldAccordion
<Typography> title={intl.formatMessage({
<FormattedMessage defaultMessage="Export Product Stock Quantity to CSV" /> defaultMessage: "SEO Information",
</Typography> description: "informations about product seo, header"
<div> })}
<Option data={data}
checked={warehouses.every(warehouse => fields={[
data.exportInfo.warehouses.includes(warehouse.value) ProductFieldEnum.DESCRIPTION,
)} ProductFieldEnum.NAME,
name="all-warehouses" ProductFieldEnum.PRODUCT_MEDIA,
onChange={onSelectAllWarehouses} ProductFieldEnum.VARIANT_MEDIA
> ]}
<FormattedMessage onChange={handleFieldChange}
defaultMessage="Export stock for all warehouses" onToggleAll={handleToggleAllFields}
description="option" data-test="seo"
/> />
</Option> </div>
</div>
<Hr className={classes.hrWarehouses} />
<Typography className={classes.warehousesLabel} variant="subtitle1">
<FormattedMessage
defaultMessage="Warehouses A to Z"
description="list of warehouses"
/>
</Typography>
{warehouses.map(warehouse => (
<Option
checked={data.exportInfo.warehouses.includes(warehouse.value)}
name={warehouseNamePrefix + warehouse.value}
onChange={onWarehouseSelect}
key={warehouse.value}
>
{warehouse.label}
</Option>
))}
</Accordion>
<FieldAccordion
title={intl.formatMessage({
defaultMessage: "SEO Information",
description: "informations about product seo, header"
})}
data={data}
fields={[
ProductFieldEnum.DESCRIPTION,
ProductFieldEnum.NAME,
ProductFieldEnum.PRODUCT_MEDIA,
ProductFieldEnum.VARIANT_MEDIA
]}
onChange={handleFieldChange}
onToggleAll={handleToggleAllFields}
data-test="seo"
/>
</> </>
); );
}; };