Mo Elzubeir
107 lines
3.3 KiB
JavaScript
107 lines
3.3 KiB
JavaScript
import React from 'react'
|
|
import PropTypes from 'prop-types'
|
|
import { translate, Interpolate } from 'react-i18next'
|
|
import PopupLayout from '../../../../common/Popups/PopupLayout'
|
|
import { CustomInput } from 'reactstrap'
|
|
import { getTitle } from '../../../../../common/helper'
|
|
|
|
export class SourceIndexUpdatePopup extends React.Component {
|
|
static propTypes = {
|
|
type: PropTypes.string.isRequired,
|
|
sourceLists: PropTypes.array.isRequired,
|
|
chosenLists: PropTypes.array.isRequired,
|
|
chosenSourceIndexes: PropTypes.array.isRequired,
|
|
updateItemTitle: PropTypes.string,
|
|
actions: PropTypes.object.isRequired,
|
|
t: PropTypes.func.isRequired
|
|
};
|
|
|
|
componentWillMount = () => {
|
|
const { sourceLists, actions } = this.props
|
|
if (sourceLists.length === 0) {
|
|
actions.getMainSourceLists({page: 1, limit: 50})
|
|
}
|
|
};
|
|
|
|
onChoseList = (e) => {
|
|
const { type, chosenLists, actions } = this.props
|
|
const isChecked = e.target.checked
|
|
const listId = parseInt(e.target.dataset.listId)
|
|
const lists = isChecked ? chosenLists.concat(listId) : chosenLists.filter((id) => listId !== id)
|
|
const action = type === 'add' ? actions.setChosenListsToAddSources : actions.setChosenListsToUpdateSources
|
|
|
|
action(lists)
|
|
};
|
|
|
|
onSubmit = () => {
|
|
const { actions, chosenSourceIndexes, chosenLists, type } = this.props
|
|
|
|
actions.addSourcesToList({
|
|
sources: chosenSourceIndexes,
|
|
sourceLists: chosenLists
|
|
}, type === 'add')
|
|
};
|
|
|
|
getBodyTitle () {
|
|
const { t, type, updateItemTitle } = this.props
|
|
if (type === 'add') {
|
|
return <p className="mb-3">{t('sourceListsTab.popup.addToListDesc')}</p>
|
|
}
|
|
else {
|
|
return (
|
|
<p className="mb-3">
|
|
<Interpolate
|
|
i18nKey='sourceListsTab.popup.updateListDesc'
|
|
name={getTitle(updateItemTitle)}
|
|
/>
|
|
</p>
|
|
)
|
|
}
|
|
}
|
|
|
|
render () {
|
|
const { type, sourceLists, chosenLists, actions } = this.props
|
|
const isAdd = type === 'add'
|
|
const title = isAdd ? 'addToListTitle' : 'updateListTitle'
|
|
const submitText = isAdd ? 'addBtn' : 'saveBtn'
|
|
const hideAction = isAdd ? actions.toggleAddSourceToListPopup : actions.hideUpdateSourcePopup
|
|
|
|
return (
|
|
<PopupLayout
|
|
title={`sourceListsTab.popup.${title}`}
|
|
submitText={`sourceListsTab.popup.${submitText}`}
|
|
onHide={hideAction}
|
|
onSubmit={this.onSubmit}
|
|
>
|
|
<div>
|
|
{this.getBodyTitle()}
|
|
|
|
{sourceLists.length > 0 &&
|
|
<ul className="row">
|
|
{sourceLists.map((list, i) => {
|
|
const isListChosen = chosenLists.includes(list.id)
|
|
return (
|
|
<li key={i} className="col-md-4 col-sm-6 mb-2">
|
|
<CustomInput
|
|
type="checkbox"
|
|
id={'sourceListCheck-' + i}
|
|
className="d-flex"
|
|
data-list-id={list.id}
|
|
checked={isListChosen}
|
|
onChange={this.onChoseList}
|
|
label={list.name}
|
|
/>
|
|
</li>
|
|
)
|
|
})}
|
|
</ul>
|
|
}
|
|
</div>
|
|
</PopupLayout>
|
|
)
|
|
}
|
|
}
|
|
|
|
export default translate(['tabsContent', 'common'], { wait: true })(SourceIndexUpdatePopup)
|
|
|