Skip to content

Commit

Permalink
feat: updated labels form
Browse files Browse the repository at this point in the history
  • Loading branch information
@SPageot
SPageot committed Mar 7, 2022
1 parent 89c09bf commit d7ebefe
Showing 1 changed file with 77 additions and 71 deletions.
148 changes: 77 additions & 71 deletions src/components/forms/CreateLabelsForm.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,8 @@ import {
StyledLabelContainer,
SelectVariantEnum,
DateVariantEnum,
SpanTwoColumnsContainer,
HrSpanTwoColumnsContainer,
} from '..';

import { labelSchema } from '../../store/validations';
Expand Down Expand Up @@ -122,8 +124,7 @@ const CreateLabelsForm = ({ value, onChange }) => {
id: isUserOnUnitsPage
? 'select-existing-label'
: 'select-existing-label-description',
})}
>
})}>
<DescriptionIcon height="14" width="14" />
</ToolTipContainer>
</Body>
Expand Down Expand Up @@ -157,6 +158,7 @@ const CreateLabelsForm = ({ value, onChange }) => {
</Body>
)}
</StyledFieldContainer>
<div></div>
<StyledFieldContainer>
<StyledLabelContainer>
<Body>
Expand Down Expand Up @@ -238,15 +240,56 @@ const CreateLabelsForm = ({ value, onChange }) => {
</Body>
)}
</StyledFieldContainer>
<SpanTwoColumnsContainer>
<StyledFieldContainer>
<StyledLabelContainer>
<Body>
<LabelContainer>
*<FormattedMessage id="label-link" />
</LabelContainer>
<ToolTipContainer
tooltip={intl.formatMessage({
id: 'labels-label-link-description',
})}>
<DescriptionIcon height="14" width="14" />
</ToolTipContainer>
</Body>
</StyledLabelContainer>
<StandardInput
variant={errorLabelMessage.labelLink && InputVariantEnum.error}
size={InputSizeEnum.large}
placeholderText={intl.formatMessage({
id: 'label-link',
})}
state={
areFieldsDisabled
? InputStateEnum.disabled
: InputStateEnum.default
}
value={value.labelLink}
onChange={event => {
onChange({ ...value, labelLink: event });
}}
/>
{errorLabelMessage?.labelLink && (
<Body size="Small" color="red">
{errorLabelMessage.labelLink}
</Body>
)}
</StyledFieldContainer>
</SpanTwoColumnsContainer>
<HrSpanTwoColumnsContainer>
<hr />
</HrSpanTwoColumnsContainer>
<StyledFieldContainer>
<StyledLabelContainer>
<Body>
<LabelContainer>
*<FormattedMessage id="crediting-period-start-date" />
*<FormattedMessage id="validity-period-start-date" />
</LabelContainer>
<ToolTipContainer
tooltip={intl.formatMessage({
id: 'labels-crediting-period-start-date-description',
id: 'labels-validity-period-start-date-description',
})}>
<DescriptionIcon height="14" width="14" />
</ToolTipContainer>
Expand All @@ -255,32 +298,32 @@ const CreateLabelsForm = ({ value, onChange }) => {
<InputContainer>
<DateSelect
variant={
errorLabelMessage?.creditingPeriodStartDate &&
errorLabelMessage?.validityPeriodStartDate &&
DateVariantEnum.error
}
size="large"
dateValue={value.creditingPeriodStartDate}
dateValue={value.validityPeriodStartDate}
setDateValue={event =>
onChange({ ...value, creditingPeriodStartDate: event })
onChange({ ...value, validityPeriodStartDate: event })
}
disabled={areFieldsDisabled ? true : undefined}
/>
</InputContainer>
{errorLabelMessage?.creditingPeriodStartDate && (
{errorLabelMessage?.validityPeriodStartDate && (
<Body size="Small" color="red">
{errorLabelMessage.creditingPeriodStartDate}
{errorLabelMessage.validityPeriodStartDate}
</Body>
)}
</StyledFieldContainer>
<StyledFieldContainer>
<StyledLabelContainer>
<Body>
<LabelContainer>
*<FormattedMessage id="crediting-period-end-date" />
*<FormattedMessage id="validity-period-end-date" />
</LabelContainer>
<ToolTipContainer
tooltip={intl.formatMessage({
id: 'labels-crediting-period-end-date-description',
id: 'labels-validity-period-end-date-description',
})}>
<DescriptionIcon height="14" width="14" />
</ToolTipContainer>
Expand All @@ -289,34 +332,32 @@ const CreateLabelsForm = ({ value, onChange }) => {
<InputContainer>
<DateSelect
variant={
errorLabelMessage?.creditingPeriodEndDate &&
errorLabelMessage?.validityPeriodEndDate &&
DateVariantEnum.error
}
size="large"
dateValue={value.creditingPeriodEndDate}
dateValue={value.validityPeriodEndDate}
setDateValue={event =>
onChange({ ...value, creditingPeriodEndDate: event })
onChange({ ...value, validityPeriodEndDate: event })
}
disabled={areFieldsDisabled ? true : undefined}
/>
</InputContainer>
{errorLabelMessage?.creditingPeriodEndDate && (
{errorLabelMessage?.validityPeriodEndDate && (
<Body size="Small" color="red">
{errorLabelMessage.creditingPeriodEndDate}
{errorLabelMessage.validityPeriodEndDate}
</Body>
)}
</StyledFieldContainer>
</BodyContainer>
<div style={{ display: 'flex', flexDirection: 'column' }}>
<StyledFieldContainer>
<StyledLabelContainer>
<Body>
<LabelContainer>
*<FormattedMessage id="validity-period-start-date" />
*<FormattedMessage id="crediting-period-start-date" />
</LabelContainer>
<ToolTipContainer
tooltip={intl.formatMessage({
id: 'labels-validity-period-start-date-description',
id: 'labels-crediting-period-start-date-description',
})}>
<DescriptionIcon height="14" width="14" />
</ToolTipContainer>
Expand All @@ -325,32 +366,32 @@ const CreateLabelsForm = ({ value, onChange }) => {
<InputContainer>
<DateSelect
variant={
errorLabelMessage?.validityPeriodStartDate &&
errorLabelMessage?.creditingPeriodStartDate &&
DateVariantEnum.error
}
size="large"
dateValue={value.validityPeriodStartDate}
dateValue={value.creditingPeriodStartDate}
setDateValue={event =>
onChange({ ...value, validityPeriodStartDate: event })
onChange({ ...value, creditingPeriodStartDate: event })
}
disabled={areFieldsDisabled ? true : undefined}
/>
</InputContainer>
{errorLabelMessage?.validityPeriodStartDate && (
{errorLabelMessage?.creditingPeriodStartDate && (
<Body size="Small" color="red">
{errorLabelMessage.validityPeriodStartDate}
{errorLabelMessage.creditingPeriodStartDate}
</Body>
)}
</StyledFieldContainer>
<StyledFieldContainer>
<StyledLabelContainer>
<Body>
<LabelContainer>
*<FormattedMessage id="validity-period-end-date" />
*<FormattedMessage id="crediting-period-end-date" />
</LabelContainer>
<ToolTipContainer
tooltip={intl.formatMessage({
id: 'labels-validity-period-end-date-description',
id: 'labels-crediting-period-end-date-description',
})}>
<DescriptionIcon height="14" width="14" />
</ToolTipContainer>
Expand All @@ -359,23 +400,26 @@ const CreateLabelsForm = ({ value, onChange }) => {
<InputContainer>
<DateSelect
variant={
errorLabelMessage?.validityPeriodEndDate &&
errorLabelMessage?.creditingPeriodEndDate &&
DateVariantEnum.error
}
size="large"
dateValue={value.validityPeriodEndDate}
dateValue={value.creditingPeriodEndDate}
setDateValue={event =>
onChange({ ...value, validityPeriodEndDate: event })
onChange({ ...value, creditingPeriodEndDate: event })
}
disabled={areFieldsDisabled ? true : undefined}
/>
</InputContainer>
{errorLabelMessage?.validityPeriodEndDate && (
{errorLabelMessage?.creditingPeriodEndDate && (
<Body size="Small" color="red">
{errorLabelMessage.validityPeriodEndDate}
{errorLabelMessage.creditingPeriodEndDate}
</Body>
)}
</StyledFieldContainer>
<HrSpanTwoColumnsContainer>
<hr />
</HrSpanTwoColumnsContainer>
<StyledFieldContainer>
<StyledLabelContainer>
<Body>
Expand Down Expand Up @@ -417,45 +461,7 @@ const CreateLabelsForm = ({ value, onChange }) => {
</Body>
)}
</StyledFieldContainer>
<StyledFieldContainer>
<StyledLabelContainer>
<Body>
<LabelContainer>
*<FormattedMessage id="label-link" />
</LabelContainer>
<ToolTipContainer
tooltip={intl.formatMessage({
id: 'labels-label-link-description',
})}>
<DescriptionIcon height="14" width="14" />
</ToolTipContainer>
</Body>
</StyledLabelContainer>
<InputContainer>
<StandardInput
variant={errorLabelMessage.labelLink && InputVariantEnum.error}
size={InputSizeEnum.large}
placeholderText={intl.formatMessage({
id: 'label-link',
})}
state={
areFieldsDisabled
? InputStateEnum.disabled
: InputStateEnum.default
}
value={value.labelLink}
onChange={event => {
onChange({ ...value, labelLink: event });
}}
/>
</InputContainer>
{errorLabelMessage?.labelLink && (
<Body size="Small" color="red">
{errorLabelMessage.labelLink}
</Body>
)}
</StyledFieldContainer>
</div>
</BodyContainer>
</FormContainerStyle>
<Divider />
</ModalFormContainerStyle>
Expand Down

0 comments on commit d7ebefe

Please sign in to comment.