at the end of the day, it was inevitable
This commit is contained in:
Mo Elzubeir
@@ -0,0 +1,16 @@
|
||||
import PropTypes from 'prop-types'
|
||||
import {AlertForm as BaseAlertForm} from '../NotificatoinsSubTab/forms/AlertForm'
|
||||
import {translate} from 'react-i18next'
|
||||
|
||||
export class AlertForm extends BaseAlertForm {
|
||||
|
||||
static propTypes = {
|
||||
t: PropTypes.func.isRequired,
|
||||
state: PropTypes.object.isRequired,
|
||||
actions: PropTypes.object.isRequired,
|
||||
switchShareSubScreen: PropTypes.func.isRequired
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default translate(['tabsContent'], { wait: true })(AlertForm)
|
||||
@@ -0,0 +1,91 @@
|
||||
import React from 'react'
|
||||
import { translate } from 'react-i18next'
|
||||
import PropTypes from 'prop-types'
|
||||
import SortableTh from '../../../../common/Table/SortableTh'
|
||||
import { MyEmailsTable } from '../NotificatoinsSubTab/MyEmailsTable' // default export doesn't work
|
||||
import { ButtonGroup, Button } from 'reactstrap'
|
||||
|
||||
class EmailsTable extends MyEmailsTable {
|
||||
static propTypes = {
|
||||
t: PropTypes.func.isRequired,
|
||||
tableState: PropTypes.object.isRequired,
|
||||
actions: PropTypes.object.isRequired,
|
||||
tableActions: PropTypes.object.isRequired,
|
||||
deleteSingleText: PropTypes.string.isRequired,
|
||||
deleteMultipleText: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
nameClickAction = (item) => {
|
||||
const { actions } = this.props
|
||||
actions.startEditNotification(item, 'emails', 'emails')
|
||||
};
|
||||
|
||||
defineColumns () {
|
||||
return {
|
||||
...super.defineColumns(),
|
||||
owner: {
|
||||
Header: <SortableTh title="manageEmailsTab.owner" />,
|
||||
accessor: (item) => item.owner.email,
|
||||
width: 170
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onRefreshButtonClick = () => {
|
||||
this.props.tableActions.loadTable({})
|
||||
};
|
||||
|
||||
getColumns () {
|
||||
return [
|
||||
'selectCheckbox',
|
||||
'name',
|
||||
'type',
|
||||
'owner',
|
||||
'published',
|
||||
'ScheduledTimes',
|
||||
'sourcesCount',
|
||||
'Recipients',
|
||||
'active',
|
||||
'delete'
|
||||
]
|
||||
}
|
||||
|
||||
getActionsPanel = () => {
|
||||
const { t } = this.props
|
||||
return (
|
||||
<ButtonGroup className="mb-3">
|
||||
<Button
|
||||
onClick={this.onActivateButtonClick}
|
||||
color="secondary"
|
||||
>
|
||||
<i className="fa fa-play fa-1px for-small mr-1"> </i>{" "}
|
||||
{t('notificationsTab.activate')}
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
color="secondary"
|
||||
onClick={this.onPauseButtonClick}
|
||||
>
|
||||
<i className="fa fa-pause fa-1px for-small mr-1"> </i>{" "}
|
||||
{t('notificationsTab.pause')}
|
||||
</Button>
|
||||
<Button
|
||||
color="secondary"
|
||||
onClick={this.onDeleteButtonClick}
|
||||
>
|
||||
<i className="fa fa-trash for-small mr-1"> </i>{" "}
|
||||
{t('notificationsTab.delete')}
|
||||
</Button>
|
||||
<Button
|
||||
color="secondary"
|
||||
onClick={this.onRefreshButtonClick}
|
||||
>
|
||||
<i className="fa fa-refresh fa-1px for-small mr-1"> </i>{" "}
|
||||
{t('manageEmailsTab.refresh')}
|
||||
</Button>
|
||||
</ButtonGroup>
|
||||
)
|
||||
};
|
||||
}
|
||||
|
||||
export default translate(['tabsContent'], { wait: true })(EmailsTable)
|
||||
@@ -0,0 +1,49 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import {translate} from 'react-i18next'
|
||||
import {GenericTable} from '../common/GenericTable'
|
||||
import SortableTh from '../../../../common/Table/SortableTh'
|
||||
import {EMAILS_SUBSCREENS} from '../../../../../redux/modules/appState/share/tabs'
|
||||
|
||||
export class FiltersTable extends GenericTable {
|
||||
static propTypes = {
|
||||
t: PropTypes.func.isRequired,
|
||||
tableState: PropTypes.object.isRequired,
|
||||
actions: PropTypes.object.isRequired,
|
||||
tableActions: PropTypes.object.isRequired
|
||||
};
|
||||
|
||||
defineColumns () {
|
||||
|
||||
return {
|
||||
'name': {
|
||||
Header: <SortableTh title='manageEmailsTab.filter' />,
|
||||
accessor: 'name'
|
||||
},
|
||||
'notifications': {
|
||||
Header: <SortableTh title='manageEmailsTab.notifications' />,
|
||||
width: 270,
|
||||
accessor: 'notifications'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
getColumns () {
|
||||
return ['name', 'notifications']
|
||||
}
|
||||
|
||||
onRowClick = (e, state, rowInfo) => {
|
||||
const { actions } = this.props
|
||||
const filter = {
|
||||
type: rowInfo.original.type,
|
||||
id: rowInfo.original.id,
|
||||
name: rowInfo.original.name
|
||||
}
|
||||
actions.shareTables.emails.setFilter(filter)
|
||||
actions.switchShareSubScreen('emails', EMAILS_SUBSCREENS.EMAILS_TABLE)
|
||||
actions.shareTables.emails.loadTable({})
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
export default translate(['tabsContent'], { wait: true })(FiltersTable)
|
||||
@@ -0,0 +1,74 @@
|
||||
import React, { Fragment } from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { translate } from 'react-i18next'
|
||||
import Select from 'react-select'
|
||||
import { EMAILS_SUBSCREENS } from '../../../../../redux/modules/appState/share/tabs'
|
||||
import { Button } from 'reactstrap'
|
||||
|
||||
export class FiltersTopBar extends React.Component {
|
||||
static propTypes = {
|
||||
actions: PropTypes.object.isRequired,
|
||||
filterType: PropTypes.string.isRequired,
|
||||
t: PropTypes.func.isRequired
|
||||
};
|
||||
|
||||
onSelectFilterType = (filterType) => {
|
||||
const { actions } = this.props
|
||||
actions.shareTables.emailFilters.loadTable({ filterType })
|
||||
};
|
||||
|
||||
clearFilters = () => {
|
||||
const { actions } = this.props
|
||||
actions.shareTables.emails.clearFilter()
|
||||
actions.switchShareSubScreen('emails', EMAILS_SUBSCREENS.EMAILS_TABLE)
|
||||
};
|
||||
|
||||
backToTable = () => {
|
||||
const { actions } = this.props
|
||||
actions.switchShareSubScreen('emails', EMAILS_SUBSCREENS.EMAILS_TABLE)
|
||||
}
|
||||
|
||||
filterTypes = [
|
||||
{ label: 'Owner', value: 'owner' },
|
||||
{ label: 'Recipient', value: 'recipient' },
|
||||
{ label: 'Feed', value: 'feed' }
|
||||
];
|
||||
|
||||
render () {
|
||||
const { t, filterType } = this.props
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<Button className="btn-wide mb-2" size="sm" color="info" onClick={this.backToTable}>
|
||||
<i className="lnr lnr-chevron-left"> </i>
|
||||
</Button>
|
||||
<div className="notifications-topbar align-items-center">
|
||||
<div className="text-muted">{t('manageEmailsTab.emailFilter')}</div>
|
||||
<div className="d-flex align-items-center">
|
||||
<label className="mr-1">{t('manageEmailsTab.filterBy')}</label>
|
||||
<div style={{ minWidth: '150px' }}>
|
||||
<Select
|
||||
value={filterType}
|
||||
onChange={this.onSelectFilterType}
|
||||
options={this.filterTypes}
|
||||
simpleValue
|
||||
searchable={false}
|
||||
clearable={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
color="secondary"
|
||||
className="ml-2"
|
||||
onClick={this.clearFilters}
|
||||
>
|
||||
{t('manageEmailsTab.allEmails')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Fragment>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default translate(['tabsContent'], { wait: true })(FiltersTopBar)
|
||||
+87
@@ -0,0 +1,87 @@
|
||||
import React, { Fragment } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import TopBar from './TopBar';
|
||||
import EmailsTable from './EmailsTable';
|
||||
import reduxConnect from '../../../../../redux/utils/connect';
|
||||
import AlertForm from './AlertForm';
|
||||
import Navigation from './Navigation';
|
||||
import FiltersTable from './FiltersTable';
|
||||
import FiltersTopBar from './FiltersTopBar';
|
||||
import { EMAILS_SUBSCREENS } from '../../../../../redux/modules/appState/share/tabs';
|
||||
import { setDocumentData } from '../../../../../common/helper';
|
||||
|
||||
class ManageEmailsSubTab extends React.Component {
|
||||
static propTypes = {
|
||||
shareState: PropTypes.object.isRequired,
|
||||
actions: PropTypes.object.isRequired
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
setDocumentData('title', 'Manage Recipients | Share')
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
setDocumentData('title')
|
||||
}
|
||||
|
||||
render() {
|
||||
const { shareState, actions } = this.props;
|
||||
const { subScreenVisible } = shareState.tabs.emails;
|
||||
|
||||
return (
|
||||
<div className="notifications-tab">
|
||||
{subScreenVisible === EMAILS_SUBSCREENS.EMAILS_TABLE && (
|
||||
<div>
|
||||
<TopBar tableState={shareState.tables.emails} actions={actions} />
|
||||
<EmailsTable
|
||||
tableState={shareState.tables.emails}
|
||||
actions={actions}
|
||||
tableActions={actions.shareTables.emails}
|
||||
deleteSingleText="email"
|
||||
deleteMultipleText="emails"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{(subScreenVisible === EMAILS_SUBSCREENS.ALERT_FORM ||
|
||||
subScreenVisible === EMAILS_SUBSCREENS.NEWSLETTER_FORM) && (
|
||||
<Navigation actions={actions} />
|
||||
)}
|
||||
|
||||
{subScreenVisible === EMAILS_SUBSCREENS.ALERT_FORM && (
|
||||
<AlertForm
|
||||
state={shareState.forms.alert}
|
||||
switchShareSubScreen={actions.switchShareSubScreen}
|
||||
actions={actions.shareForms.alert}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* {subScreenVisible === EMAILS_SUBSCREENS.NEWSLETTER_FORM &&
|
||||
<NewsletterForm
|
||||
state={shareState.forms.newsletter}
|
||||
switchShareSubScreen={actions.switchShareSubScreen}
|
||||
actions={actions.shareForms.newsletter}
|
||||
/>
|
||||
} */}
|
||||
|
||||
{subScreenVisible === EMAILS_SUBSCREENS.FILTERS_TABLE && (
|
||||
<Fragment>
|
||||
<FiltersTopBar
|
||||
actions={actions}
|
||||
filterType={shareState.tables.emailFilters.filterType}
|
||||
/>
|
||||
<FiltersTable
|
||||
actions={actions}
|
||||
tableState={shareState.tables.emailFilters}
|
||||
tableActions={actions.shareTables.emailFilters}
|
||||
/>
|
||||
</Fragment>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default reduxConnect('shareState', ['appState', 'share'])(
|
||||
ManageEmailsSubTab
|
||||
);
|
||||
@@ -0,0 +1,30 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { translate } from 'react-i18next'
|
||||
import { EMAILS_SUBSCREENS } from '../../../../../redux/modules/appState/share/tabs'
|
||||
import { Button } from 'reactstrap'
|
||||
|
||||
class Navigation extends React.Component {
|
||||
static propTypes = {
|
||||
t: PropTypes.func.isRequired,
|
||||
actions: PropTypes.object.isRequired
|
||||
};
|
||||
|
||||
backToTable = () => {
|
||||
this.props.actions.switchShareSubScreen(
|
||||
'emails',
|
||||
EMAILS_SUBSCREENS.EMAILS_TABLE
|
||||
)
|
||||
};
|
||||
|
||||
render () {
|
||||
|
||||
return (
|
||||
<Button className="btn-wide mb-2" size="sm" color="info" onClick={this.backToTable}>
|
||||
<i className="lnr lnr-chevron-left"> </i>
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default translate(['tabsContent'], { wait: true })(Navigation)
|
||||
@@ -0,0 +1,14 @@
|
||||
import PropTypes from 'prop-types'
|
||||
import {NewsletterForm as BaseNewsletterForm} from '../NotificatoinsSubTab/forms/NewsletterForm'
|
||||
import {translate} from 'react-i18next'
|
||||
|
||||
export class NewsletterForm extends BaseNewsletterForm {
|
||||
static propTypes = {
|
||||
t: PropTypes.func.isRequired,
|
||||
state: PropTypes.object.isRequired,
|
||||
actions: PropTypes.object.isRequired
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
export default translate(['tabsContent'], { wait: true })(NewsletterForm)
|
||||
@@ -0,0 +1,72 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { translate } from 'react-i18next'
|
||||
import { EMAILS_SUBSCREENS } from '../../../../../redux/modules/appState/share/tabs'
|
||||
import { Button } from 'reactstrap'
|
||||
|
||||
export class TopBar extends React.Component {
|
||||
static propTypes = {
|
||||
actions: PropTypes.object.isRequired,
|
||||
tableState: PropTypes.object.isRequired,
|
||||
t: PropTypes.func.isRequired
|
||||
};
|
||||
|
||||
onCreate = (type) => () => {
|
||||
const { actions } = this.props
|
||||
actions.startCreateNotification(type, 'emails', 'emails')
|
||||
};
|
||||
|
||||
goToFiltersTable = () => {
|
||||
const { actions } = this.props
|
||||
actions.switchShareSubScreen('emails', EMAILS_SUBSCREENS.FILTERS_TABLE)
|
||||
};
|
||||
|
||||
render () {
|
||||
const {
|
||||
t,
|
||||
tableState: { filter }
|
||||
} = this.props
|
||||
|
||||
const filterName = filter
|
||||
? `${filter.name} (${t('manageEmailsTab.' + filter.type)})`
|
||||
: t('manageEmailsTab.allEmails')
|
||||
|
||||
return (
|
||||
<div className="notifications-topbar">
|
||||
<p className="text-muted align-self-center">
|
||||
<strong>{t('manageEmailsTab.currentFilter') + ': '}</strong>{" "}
|
||||
{filterName}
|
||||
</p>
|
||||
<div>
|
||||
<Button
|
||||
className="btn-icon mr-2"
|
||||
onClick={this.goToFiltersTable}
|
||||
>
|
||||
<i className="lnr lnr-funnel btn-icon-wrapper" />
|
||||
{t('manageEmailsTab.selectFilter')}
|
||||
</Button>
|
||||
<div className="notifications-buttons">
|
||||
<Button
|
||||
color="primary"
|
||||
className="btn-icon"
|
||||
onClick={this.onCreate(EMAILS_SUBSCREENS.ALERT_FORM)}
|
||||
>
|
||||
<i className="lnr lnr-alarm btn-icon-wrapper" />
|
||||
{t('notificationsTab.newAlert')}
|
||||
</Button>
|
||||
{/* <Button
|
||||
color="primary"
|
||||
className="btn-icon"
|
||||
onClick={this.onCreate(EMAILS_SUBSCREENS.NEWSLETTER_FORM)}
|
||||
>
|
||||
<i className="lnr lnr-file-add btn-icon-wrapper" />
|
||||
{t('notificationsTab.newNewsletter')}
|
||||
</Button> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default translate(['tabsContent'], { wait: true })(TopBar)
|
||||
Reference in New Issue
Block a user