Skip to content

Commit

Permalink
Order screen overlapping fields on smaller screens
Browse files Browse the repository at this point in the history
  • Loading branch information
@WangLiNaruto
WangLiNaruto committed Aug 16, 2024
1 parent c5e52d6 commit e7090e3
Show file tree
Hide file tree
Showing 11 changed files with 306 additions and 236 deletions.
2 changes: 1 addition & 1 deletion src/components/content/deployedServices/myServices/MyServices.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1420,7 +1420,7 @@ function MyServices(): React.JSX.Element {
destroyOnClose={true}
footer={null}
onCancel={handleCancelMigrateModel}
width={2140}
width={1400}
mask={true}
>
<Migrate currentSelectedService={activeRecord} />
Expand Down
49 changes: 26 additions & 23 deletions src/components/content/order/common/BillingModeSelection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
* SPDX-FileCopyrightText: Huawei Inc.
*/

import { Alert, Flex, Form, Radio } from 'antd';
import { Alert, Col, Flex, Form, Radio, Row } from 'antd';
import React, { Dispatch, SetStateAction } from 'react';
import serviceOrderStyles from '../../../../styles/service-order.module.css';
import { billingMode } from '../../../../xpanse-api/generated';
Expand All @@ -22,26 +22,29 @@ export const BillingModeSelection = ({
}

return (
<div className={serviceOrderStyles.orderFormSelectionFirstInGroup}>
<Form.Item
key={'BillingMode'}
label={
<p
className={`${serviceOrderStyles.orderFormSelectionStyle} ${serviceOrderStyles.orderFormItemName}`}
>
{'Billing Mode'}
</p>
}
labelCol={{ span: 2, style: { textAlign: 'left' } }}
required={true}
rules={[
{
required: true,
message: 'billingMode is required',
},
{ type: 'string' },
]}
>
<Row className={serviceOrderStyles.orderFormSelectionFirstInGroup}>
<Col className={serviceOrderStyles.orderFormLabel}>
<Form.Item
key={'BillingMode'}
label={
<p
className={`${serviceOrderStyles.orderFormSelectionStyle} ${serviceOrderStyles.orderFormItemName}`}
>
{'Billing Mode'}
</p>
}
labelCol={{ style: { textAlign: 'left' } }}
required={true}
rules={[
{
required: true,
message: 'billingMode is required',
},
{ type: 'string' },
]}
></Form.Item>
</Col>
<Col>
{billingModes && billingModes.length > 0 ? (
<Flex vertical gap='middle'>
<Radio.Group
Expand All @@ -66,7 +69,7 @@ export const BillingModeSelection = ({
closable={false}
/>
)}
</Form.Item>
</div>
</Col>
</Row>
);
};
35 changes: 19 additions & 16 deletions src/components/content/order/common/FlavorSelection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@

import { LoadingOutlined } from '@ant-design/icons';
import { UseQueryResult } from '@tanstack/react-query';
import { Flex, Form, Radio, Spin } from 'antd';
import { Col, Flex, Form, Radio, Row, Spin } from 'antd';
import React from 'react';
import flavorStyles from '../../../../styles/flavor.module.css';
import serviceOrderStyles from '../../../../styles/service-order.module.css';
Expand Down Expand Up @@ -33,19 +33,22 @@ export const FlavorSelection = ({
};

return (
<div className={`${serviceOrderStyles.orderFormSelectionFirstInGroup} ${flavorStyles.regionFlavorContent}`}>
<Form.Item
name='selectFlavor'
label={
<p
className={`${serviceOrderStyles.orderFormSelectionStyle} ${serviceOrderStyles.orderFormItemName}`}
>
{'Flavor'}
</p>
}
labelCol={{ span: 2, style: { textAlign: 'left' } }}
rules={[{ required: true, message: 'Flavor is required' }]}
>
<Row className={`${serviceOrderStyles.orderFormSelectionFirstInGroup} ${flavorStyles.regionFlavorContent}`}>
<Col className={serviceOrderStyles.orderFormLabel}>
<Form.Item
name='selectFlavor'
label={
<p
className={`${serviceOrderStyles.orderFormSelectionStyle} ${serviceOrderStyles.orderFormItemName}`}
>
{'Flavor'}
</p>
}
labelCol={{ style: { textAlign: 'left' } }}
rules={[{ required: true, message: 'Flavor is required' }]}
></Form.Item>
</Col>
<Col>
{flavorList && flavorList.length > 0 ? (
<Flex vertical gap='middle'>
<Radio.Group
Expand Down Expand Up @@ -97,7 +100,7 @@ export const FlavorSelection = ({
</Radio.Group>
</Flex>
) : null}
</Form.Item>
</div>
</Col>
</Row>
);
};
69 changes: 37 additions & 32 deletions src/components/content/order/common/MigrateServiceSubmitAvailabilityZoneInfo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
* SPDX-FileCopyrightText: Huawei Inc.
*/

import { Flex, Form, Radio } from 'antd';
import { Col, Flex, Form, Radio, Row } from 'antd';
import React from 'react';
import '../../../../styles/service-order.module.css';
import serviceOrderStyles from '../../../../styles/service-order.module.css';
Expand All @@ -17,41 +17,46 @@ export const MigrateServiceSubmitAvailabilityZoneInfo = ({
availabilityZones: Record<string, string>;
}): React.JSX.Element => {
return (
<div className={serviceOrderStyles.orderFormSelectionFirstInGroup}>
<Row className={serviceOrderStyles.orderFormSelectionFirstInGroup}>
{availabilityZoneConfigs
? availabilityZoneConfigs.map((availabilityZone) => (
<Form.Item
key={availabilityZone.varName}
name={availabilityZone.displayName}
label={
<p
className={`${serviceOrderStyles.orderFormSelectionStyle} ${serviceOrderStyles.orderFormItemName}`}
>
{availabilityZone.displayName}
</p>
}
labelCol={{ span: 2, style: { textAlign: 'left' } }}
>
<Flex vertical gap='middle'>
<Radio.Group buttonStyle='solid' disabled={true}>
<Radio.Button
name={availabilityZone.displayName}
key={availabilityZone.varName}
value={
Object.keys(availabilityZones).length > 0
<>
<Col className={serviceOrderStyles.orderFormLabel}>
<Form.Item
key={availabilityZone.varName}
name={availabilityZone.displayName}
label={
<p
className={`${serviceOrderStyles.orderFormSelectionStyle} ${serviceOrderStyles.orderFormItemName}`}
>
{availabilityZone.displayName}
</p>
}
labelCol={{ style: { textAlign: 'left' } }}
></Form.Item>
</Col>
<Col>
<Flex vertical gap='middle'>
<Radio.Group buttonStyle='solid' disabled={true}>
<Radio.Button
name={availabilityZone.displayName}
key={availabilityZone.varName}
value={
Object.keys(availabilityZones).length > 0
? availabilityZones[availabilityZone.varName]
: {}
}
>
{availabilityZones[availabilityZone.varName]
? availabilityZones[availabilityZone.varName]
: {}
}
>
{availabilityZones[availabilityZone.varName]
? availabilityZones[availabilityZone.varName]
: 'Not Selected'}
</Radio.Button>
</Radio.Group>
</Flex>
</Form.Item>
: 'Not Selected'}
</Radio.Button>
</Radio.Group>
</Flex>
</Col>
</>
))
: undefined}
</div>
</Row>
);
};
35 changes: 19 additions & 16 deletions src/components/content/order/common/MigrateServiceSubmitBillingMode.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,33 +3,36 @@
* SPDX-FileCopyrightText: Huawei Inc.
*/

import { Flex, Form, Radio } from 'antd';
import { Col, Flex, Form, Radio, Row } from 'antd';
import React from 'react';
import serviceOrderStyles from '../../../../styles/service-order.module.css';

export const MigrateServiceSubmitBillingMode = ({ selectBillMode }: { selectBillMode: string }): React.JSX.Element => {
return (
<div className={serviceOrderStyles.orderFormSelectionFirstInGroup}>
<Form.Item
key={'BillingMode'}
label={
<p
className={`${serviceOrderStyles.orderFormSelectionStyle} ${serviceOrderStyles.orderFormItemName}`}
>
{'Billing Mode'}
</p>
}
labelCol={{ span: 2, style: { textAlign: 'left' } }}
required={true}
>
<Row className={serviceOrderStyles.orderFormSelectionFirstInGroup}>
<Col className={serviceOrderStyles.orderFormLabel}>
<Form.Item
key={'BillingMode'}
label={
<p
className={`${serviceOrderStyles.orderFormSelectionStyle} ${serviceOrderStyles.orderFormItemName}`}
>
{'Billing Mode'}
</p>
}
labelCol={{ style: { textAlign: 'left' } }}
required={true}
></Form.Item>
</Col>
<Col>
<Flex vertical gap='middle'>
<Radio.Group disabled={true} buttonStyle='solid'>
<Radio.Button key={selectBillMode} value={selectBillMode}>
{selectBillMode}
</Radio.Button>
</Radio.Group>
</Flex>
</Form.Item>
</div>
</Col>
</Row>
);
};
35 changes: 19 additions & 16 deletions src/components/content/order/common/RegionSelection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
* SPDX-FileCopyrightText: Huawei Inc.
*/

import { Form, Select, Space } from 'antd';
import { Col, Form, Row, Select, Space } from 'antd';
import React from 'react';
import serviceOrderStyles from '../../../../styles/service-order.module.css';
import { RegionDropDownInfo } from '../types/RegionDropDownInfo';
Expand All @@ -20,19 +20,22 @@ export const RegionSelection = ({
disabled?: boolean;
}): React.JSX.Element => {
return (
<div className={serviceOrderStyles.orderFormSelectionFirstInGroup}>
<Form.Item
name='selectRegion'
label={
<p
className={`${serviceOrderStyles.orderFormSelectionStyle} ${serviceOrderStyles.orderFormItemName}`}
>
{'Region'}
</p>
}
labelCol={{ span: 2, style: { textAlign: 'left' } }}
rules={[{ required: true, message: 'Region is required' }]}
>
<Row className={serviceOrderStyles.orderFormSelectionFirstInGroup}>
<Col className={serviceOrderStyles.orderFormLabel}>
<Form.Item
name='selectRegion'
label={
<p
className={`${serviceOrderStyles.orderFormSelectionStyle} ${serviceOrderStyles.orderFormItemName}`}
>
{'Region'}
</p>
}
labelCol={{ style: { textAlign: 'left' } }}
rules={[{ required: true, message: 'Region is required' }]}
></Form.Item>
</Col>
<Col>
<Space wrap>
<Select
className={serviceOrderStyles.selectBoxClass}
Expand All @@ -47,7 +50,7 @@ export const RegionSelection = ({
disabled={disabled !== undefined}
/>
</Space>
</Form.Item>
</div>
</Col>
</Row>
);
};
33 changes: 18 additions & 15 deletions src/components/content/order/common/ServiceHostingSelection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
* SPDX-FileCopyrightText: Huawei Inc.
*/

import { Form, Radio, RadioChangeEvent, Space } from 'antd';
import { Col, Form, Radio, RadioChangeEvent, Row, Space } from 'antd';
import React from 'react';
import serviceOrderStyles from '../../../../styles/service-order.module.css';
import { serviceHostingType } from '../../../../xpanse-api/generated';
Expand Down Expand Up @@ -32,18 +32,21 @@ export function ServiceHostingSelection({
: undefined;

return (
<div className={serviceOrderStyles.orderFormSelectionFirstInGroup}>
<Form.Item
name='Service Hosted By'
label={
<p
className={`${serviceOrderStyles.orderFormSelectionStyle} ${serviceOrderStyles.orderFormItemName}`}
>
{'Service Hosted By'}
</p>
}
labelCol={{ span: 2, style: { textAlign: 'left' } }}
>
<Row className={serviceOrderStyles.orderFormSelectionFirstInGroup}>
<Col className={serviceOrderStyles.orderFormLabel}>
<Form.Item
name='Service Hosted By'
label={
<p
className={`${serviceOrderStyles.orderFormSelectionStyle} ${serviceOrderStyles.orderFormItemName}`}
>
{'Service Hosted By'}
</p>
}
labelCol={{ style: { textAlign: 'left' } }}
></Form.Item>
</Col>
<Col className={serviceOrderStyles.orderFormServiceHost}>
<Space wrap>
<Radio.Group
onChange={onChange}
Expand All @@ -55,7 +58,7 @@ export function ServiceHostingSelection({
<Radio value={serviceHostingType.SERVICE_VENDOR}>service-vendor</Radio>
</Radio.Group>
</Space>
</Form.Item>
</div>
</Col>
</Row>
);
}
Loading

0 comments on commit e7090e3

Please sign in to comment.