Skip to content

Commit

Permalink
Merge pull request #302 from vietredweb/Issue-301
Browse files Browse the repository at this point in the history 
fixes #301, #300 Custom field fix
  • Loading branch information
@lunguyenhat
lunguyenhat authored Jun 21, 2023
2 parents 42b9f87 + 51bce5f commit 08d3f63
Show file tree
Hide file tree
Showing 9 changed files with 100 additions and 58 deletions.
22 changes: 15 additions & 7 deletions src/components/Fields/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,11 +110,13 @@ const FieldsList = observer(
...group.fields?.map((field) => {
let dateFormatConverted = field[PIM_FIELD_DETAIL_FIELD_KEY.PARAMS]?.altFormat;
if (field[PIM_FIELD_DETAIL_FIELD_KEY.TYPE] === FORM_FIELD_TYPE.DATE) {
dateFormatConverted = dateFormatConvert.convert(
field[PIM_FIELD_DETAIL_FIELD_KEY.PARAMS]?.altFormat,
dateFormatConvert.datepicker,
dateFormatConvert.momentJs
);
dateFormatConverted =
field[PIM_FIELD_DETAIL_FIELD_KEY.PARAMS]?.altFormat &&
dateFormatConvert.convert(
field[PIM_FIELD_DETAIL_FIELD_KEY.PARAMS]?.altFormat,
dateFormatConvert.datepicker,
dateFormatConvert.momentJs
);
}
let selectOptions =
field[PIM_FIELD_DETAIL_FIELD_KEY.TYPE] === FORM_FIELD_TYPE.ITEM_RELATED ||
Expand Down Expand Up @@ -228,7 +230,7 @@ const FieldsList = observer(
} else {
this.props.detailViewModal.handleFormPropsData(
[PIM_FIELD_DETAIL_FIELD_KEY.CUSTOM_FIELDS],
{ [field[PIM_FIELD_DETAIL_FIELD_KEY.FIELD_CODE]]: data.target.value }
{ [field[PIM_FIELD_DETAIL_FIELD_KEY.FIELD_CODE]]: data.target?.value ?? '' }
);
}
},
Expand All @@ -248,8 +250,14 @@ const FieldsList = observer(
field[PIM_FIELD_DETAIL_FIELD_KEY.TYPE] === FORM_FIELD_TYPE.SELECTION ||
field[PIM_FIELD_DETAIL_FIELD_KEY.TYPE] === FORM_FIELD_TYPE.CONTENT_TYPE ||
field[PIM_FIELD_DETAIL_FIELD_KEY.TYPE] === FORM_FIELD_TYPE.CATEGORY_RELATED ||
field[PIM_FIELD_DETAIL_FIELD_KEY.TYPE] === FORM_FIELD_TYPE.ITEM_RELATED) &&
field[PIM_FIELD_DETAIL_FIELD_KEY.TYPE] === FORM_FIELD_TYPE.ITEM_RELATED ||
field[PIM_FIELD_DETAIL_FIELD_KEY.TYPE] === FORM_FIELD_TYPE.YOUTUBE ||
field[PIM_FIELD_DETAIL_FIELD_KEY.TYPE] === FORM_FIELD_TYPE.URL ||
field[PIM_FIELD_DETAIL_FIELD_KEY.TYPE] === FORM_FIELD_TYPE.URL_EXTENDED) &&
field[PIM_FIELD_DETAIL_FIELD_KEY.PARAMS]?.multiple === '1',
...(field[PIM_FIELD_DETAIL_FIELD_KEY.TYPE] === FORM_FIELD_TYPE.RADIO && {
isClearable: true,
}),
isVideo:
field[PIM_FIELD_DETAIL_FIELD_KEY.TYPE] === FORM_FIELD_TYPE.IMAGE &&
field[PIM_FIELD_DETAIL_FIELD_KEY.PARAMS]?.webservice?.name ===
Expand Down
16 changes: 12 additions & 4 deletions src/components/Form/FormImage/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,9 +72,13 @@ const FormImage = ({ field, ...props }) => {
<SVGComponent url="/assets/images/delete.svg" className={'bg-danger'} />
</div>
<ComponentImage
src={JSON.parse(item)?.download_url}
src={
typeof item === 'object' && item !== null
? item?.download_url
: JSON.parse(item)?.download_url
}
alt={field.value}
className="h-100"
className="w-100 h-100 object-fit-contain"
wrapperClassName="h-100"
/>
</div>
Expand Down Expand Up @@ -123,9 +127,13 @@ const FormImage = ({ field, ...props }) => {
<SVGComponent url="/assets/images/delete.svg" className={'bg-danger'} />
</div>
<ComponentImage
src={file[0]?.download_url}
src={
typeof file[0] === 'object' && file[0] !== null
? file[0]?.download_url
: JSON.parse(file[0])?.download_url
}
alt={field.value}
className="h-100"
className="w-100 h-100 object-fit-contain"
wrapperClassName="h-100"
/>
</>
Expand Down
19 changes: 16 additions & 3 deletions src/components/Form/FormRadio/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
*/

import React, { useEffect, useState } from 'react';
import { Form } from 'react-bootstrap';
import { Button, Form } from 'react-bootstrap';

const FormRadio = ({ field }) => {
const [selectedValue, setSelectedValue] = useState(field.getValueSelected?.value);
Expand All @@ -15,11 +15,11 @@ const FormRadio = ({ field }) => {
}, [field.getValueSelected?.value]);

const handleChange = (data) => {
setSelectedValue(data.target.value);
setSelectedValue(data.target?.value);
field.handleChange(data);
};
return (
<div className="d-flex align-items-center w-100">
<div className="d-flex align-items-center w-100 flex-wrap">
{field.getDataSelectOptions?.map(
(option, key) =>
option.label && (
Expand All @@ -38,6 +38,19 @@ const FormRadio = ({ field }) => {
/>
)
)}
{field.isClearable && (
<div className="d-flex align-items-center w-100 mt-2">
<Button
variant="danger"
className="mx-1 py-1"
onClick={() => {
handleChange('');
}}
>
Clear All
</Button>
</div>
)}
</div>
);
};
Expand Down
4 changes: 2 additions & 2 deletions src/components/Form/FormSelectionFields/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ class FormSelectionFields extends Component {
this.state.field?.value === FORM_FIELD_TYPE.ITEM_RELATED ||
this.state.field?.value === FORM_FIELD_TYPE.CATEGORY_RELATED;
const isTopCategoryField = this.state.field?.value === FORM_FIELD_TYPE.CATEGORY_RELATED;
if (!fieldListViewModel?.items?.length && isCategoryRelatedField) {
if (!categoryListViewModel?.items?.length && isCategoryRelatedField) {
isTopCategoryField &&
categoryListViewModel.handleFilter({ 'list[limit]': 9999, 'filter[maxlevel]': 2 });
await Promise.all([
Expand Down Expand Up @@ -216,7 +216,7 @@ class FormSelectionFields extends Component {
getValueSelected: selectedValue,
getDataSelectOptions: selectOptions,
isMulti: item?.attributes?.multiple,
isClearable: true,
isClearable: item?.attributes?.type === FORM_FIELD_TYPE.RADIO ? false : true,
...(item?.attributes?.type === FORM_FIELD_TYPE.CALENDAR && {
dateFormat: 'yyyy-MM-dd',
}),
Expand Down
22 changes: 12 additions & 10 deletions src/components/Form/FormUrl/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,16 +71,18 @@ const FormUrl = ({ field, ...props }) => {
</div>
);
})}
<Button
variant={`light`}
className={`px-24 py-10 fw-semibold d-flex align-items-center rounded-1 border border-success border-da-1 mt-16`}
onClick={() => {
setListOptions([...listOptions, { url: '', title: '' }]);
}}
>
<SVGComponent url="/assets/images/plus.svg" className={`me-15`} />
{t('txt_add')}
</Button>
{(field?.isMulti || (!field?.isMulti && listOptions?.length < 1)) && (
<Button
variant={`light`}
className={`px-24 py-10 fw-semibold d-flex align-items-center rounded-1 border border-success border-da-1 mt-16`}
onClick={() => {
setListOptions([...listOptions, { url: '', title: '' }]);
}}
>
<SVGComponent url="/assets/images/plus.svg" className={`me-15`} />
{t('txt_add')}
</Button>
)}
</>
);
};
Expand Down
22 changes: 12 additions & 10 deletions src/components/Form/FormYoutube/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,16 +55,18 @@ const FormYoutube = ({ field, ...props }) => {
</div>
);
})}
<Button
variant={`light`}
className={`px-24 py-10 fw-semibold d-flex align-items-center rounded-1 border border-success border-da-1 mt-16`}
onClick={() => {
setListOptions([...listOptions, '']);
}}
>
<SVGComponent url="/assets/images/plus.svg" className={`me-15`} />
{t('txt_add')}
</Button>
{(field?.isMulti || (!field?.isMulti && listOptions?.length < 1)) && (
<Button
variant={`light`}
className={`px-24 py-10 fw-semibold d-flex align-items-center rounded-1 border border-success border-da-1 mt-16`}
onClick={() => {
setListOptions([...listOptions, '']);
}}
>
<SVGComponent url="/assets/images/plus.svg" className={`me-15`} />
{t('txt_add')}
</Button>
)}
</>
);
};
Expand Down
37 changes: 21 additions & 16 deletions src/containers/FieldsPage/FieldEdit/Component/FieldInformation.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -178,23 +178,27 @@ const FieldInformation = observer(
label: 'txt_group',
key: PIM_FIELD_DETAIL_FIELD_KEY.FIELD_GROUP_ID,
type: FORM_FIELD_TYPE.SELECTION,
getValueSelected: this.viewModel.fieldDetailViewModel?.formPropsData[
PIM_FIELD_DETAIL_FIELD_KEY.FIELD_GROUP_ID
]
? {
label: this.fieldGroupListViewModel.items?.find(
(x) =>
x.id ===
getValueSelected:
this.viewModel.fieldDetailViewModel?.formPropsData[
PIM_FIELD_DETAIL_FIELD_KEY.FIELD_GROUP_ID
] &&
this.viewModel.fieldDetailViewModel?.formPropsData[
PIM_FIELD_DETAIL_FIELD_KEY.FIELD_GROUP_NAME
] !== 'PIM Field Groups'
? {
label: this.fieldGroupListViewModel.items?.find(
(x) =>
x.id ===
this.viewModel.fieldDetailViewModel?.formPropsData[
PIM_FIELD_DETAIL_FIELD_KEY.FIELD_GROUP_ID
]
)?.name,
value:
this.viewModel.fieldDetailViewModel?.formPropsData[
PIM_FIELD_DETAIL_FIELD_KEY.FIELD_GROUP_ID
]
)?.name,
value:
this.viewModel.fieldDetailViewModel?.formPropsData[
PIM_FIELD_DETAIL_FIELD_KEY.FIELD_GROUP_ID
],
}
: [],
],
}
: [],
getDataSelectOptions: this.fieldGroupListViewModel?.items?.length
? this.fieldGroupListViewModel?.items?.map((item) => {
return {
Expand All @@ -206,9 +210,10 @@ const FieldInformation = observer(
handleChange: (data) => {
this.viewModel.handleFormPropsData(
PIM_FIELD_DETAIL_FIELD_KEY.FIELD_GROUP_ID,
data.value
data?.value ? data?.value : ''
);
},
isClearable: true,
placeholder: t('txt_select_group'),
className: 'col-lg-12',
},
Expand Down
6 changes: 4 additions & 2 deletions src/containers/ProductTypePage/ListProductType.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -154,11 +154,13 @@ const ListProductType = observer((props) => {
</div>
<div className="mb-3">
<Tabs
defaultActiveKey={'productTypeList'}
defaultActiveKey={viewModel?.successResponse?.filters['filter[published]'] ?? 'default'}
id="tab-setting"
onSelect={(k) => selectTabHandler(k)}
>
<Tab key="productTypeList" eventKey="productTypeList" title={t('txt_all_product_type')} />
<Tab eventKey="default" title={t('txt_all_product_type')} />
<Tab key={1} eventKey={1} title={t('txt_published')} />
<Tab key={0} eventKey={0} title={t('txt_unpublished')} />
</Tabs>
</div>
<div className="d-flex align-items-center justify-content-between gap-2 my-20">
Expand Down
10 changes: 6 additions & 4 deletions src/containers/ProductTypePage/ProductTypeEdit/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,13 @@ import { observer } from 'mobx-react';
import { withRouter } from 'react-router-dom';
import { Col, Form, Row } from 'react-bootstrap';
import ActionsBar from 'components/ActionsBar';
import PublishOptions from 'components/PublishOptions';
import { PIM_PRODUCT_TYPE_DETAIL_FIELD_KEY } from 'aesirx-lib';
import SimpleReactValidator from 'simple-react-validator';
import _ from 'lodash';
import { withProductTypeViewModel } from '../ProductTypeViewModel/ProductTypeViewModelContextProvider';
import ProductTypeInformation from './Component/ProductTypeInformation';
import EditHeader from 'components/EditHeader';
import { PAGE_STATUS, Spinner } from 'aesirx-uikit';
import { PAGE_STATUS, Spinner, PublishOptions } from 'aesirx-uikit';
import Input from 'components/Form/Input';
import { historyPush } from 'routes/routes';

Expand Down Expand Up @@ -67,7 +66,10 @@ const EditProductType = observer(
render() {
const { t } = this.props;
// eslint-disable-next-line no-console
console.log('rerender ProductType', this.productTypeDetailViewModel);
console.log(
'rerender ProductType',
this.productTypeDetailViewModel.productTypeDetailViewModel.formPropsData
);

return (
<div className="py-4 px-3 h-100 d-flex flex-column">
Expand Down Expand Up @@ -186,8 +188,8 @@ const EditProductType = observer(
this.productTypeDetailViewModel.productTypeDetailViewModel.formPropsData
}
isEdit={this.isEdit}
isPublished={false}
isFeatured={false}
isPublishedSimple={true}
/>
</Col>
</Row>
Expand Down

0 comments on commit 08d3f63

Please sign in to comment.