Notes

import React from 'react';
import {observer} from 'mobx-react';
import moment from 'moment-timezone';
import {Link} from 'react-router-dom';
import isEmpty from 'lodash-es/isEmpty';
import Papa from 'papaparse';
import * as SubHeader from '@aosprodsys/brucke-ui-core/dist/es/components/Header';
import FilterTable from '@aosprodsys/brucke-ui-core/dist/es/components/filterTable/FilterTable';
import ActionsMenu from '@aosprodsys/brucke-ui-core/dist/es/components/ActionsMenuV2';
import ConfirmModal from '@aosprodsys/brucke-ui-core/dist/es/components/Modal';
import Position from '@aosprodsys/brucke-ui-core/dist/es/components/Position';
import Header from '../components/Header';
import Checkbox from '@aosprodsys/brucke-ui-core/dist/es/components/Checkbox';
import {ROLES, hasPermissions} from '../utils/hasPermissions';
import {StoreContext} from '../utils/StoreContext';
import downloadFile from '../utils/downloadFile';
import LeftNav from '../components/LeftNav';
import Constants from '../constants/AppConstants';
import styles from '../sass/pages/aggregation-marketing-context.scss';

export class AggregationMarketingContext extends React.Component {
static contextType = StoreContext;
table = React.createRef();
constructor(props) {
super(props);
this.state = {
highlightedRowIdx: null
};
}

componentWillUnmount() {
this.context.aggregationMarketingContext.reset();
this.context.appState.resetState();
}
componentDidMount() {
this.context.aggregationMarketingContext.initialize();
}

isSelectAllChecked = () => {
const {selectedRows} = this.context.aggregationMarketingContext;
const rows = this.table?.table?.table?.props?.rows || [];
return !!(rows.length && Object.keys(selectedRows).length === rows.length);
};

marketingContextsActionrenderer = rowCount => {
const {selectedRows} = this.context.aggregationMarketingContext;
return (
<>
<div className="sub-actions-container">
<Checkbox
{...{
inputProps: {
checked: this.isSelectAllChecked(),
onChange: () => {
const rows = this.table?.table?.table?.props?.rows || [];
console.log(rows, 'rows');
const newMap = {};
if (rows.length !== Object.keys(selectedRows).length) {
rows.map(kit => {
newMap[kit.marketingContextId] = '';
});
}
console.log(newMap, 'newMap');
this.context.aggregationMarketingContext.updateValue({
key: 'selectedRows',
value: newMap
});
}
},
className: `global-header-small select-all-label ${Object.keys(selectedRows).length ? 'selected' : ''}`,

label: this.isSelectAllChecked() ? 'Unselect All' : 'Select All'
}}
/>
<ActionsMenu
align="right"
placement="bottom"
className="global-link-bold"
offsetX={Object.keys(selectedRows).length === 0 ? 54 : 0}
offsetY={8}
tooltipStyles={{borderTopLeftRadius: 0, borderTopRightRadius: 0}}
title={() => (
<>
<span className="menu-action-title">
{`Actions ${!isEmpty(selectedRows) ? `(${Object.keys(selectedRows).length} item(s) selected)` : ''}`}
</span>
<span className="icon icon-chevrondown" />
</>
)}
>
<span
className={`global-menu-link action-item table-action-btn-blk ${
Object.keys(selectedRows).length ? 'disabled' : ''
}`}
onClick={() => {
this.context.appState.updateValue({key: 'isRemoveConfirmModalOpen', value: true});
}}
>
Remove Marketing Context
</span>
</ActionsMenu>
</div>

<div className="row-label-export-container">
<button
className="global-link-bold"
onClick={() => {
const tableRows = this.table?.table?.table?.props?.rows || [];
let exportRows = tableRows.map(row => ({
Segment: row.segment,
Geo: row.geo,
Channel: row.channel,
Language: row.language,
Assortments: row.assortments,
'Last Modified By': row.modifiedBy,
'Last Modified Date': row.modifiedDate
}));
downloadFile(
`aggregation_marketing_context_export_${moment(new Date()).format('YYYY_MM_DD_HHmm')}.csv`,
'text/csv',
`${Papa.unparse({
fields: Object.keys(exportRows[0] || {}),
data: exportRows
})}`
);
}}
>
Export Table
</button>
<span>{`${rowCount} ${rowCount > 1 ? 'Rows' : 'Row'}`}</span>
</div>
</>
);
};

render() {
const {isFetching, toggleLeftNav, isRemoveConfirmModalOpen} = this.context.appState;
const {marketingContexts, selectedRows} = this.context.aggregationMarketingContext;
const localTimeZone = moment.tz.guess();

const tableColumns = [
{
width: 47,
hideFilter: true,
accessor: 'marketingContextId',
minWidth: 47,
Header: () => null,
Cell: ({value}) => {
const {selectedRows} = this.context.aggregationMarketingContext;
const newMap = {...selectedRows};
return (
<Checkbox
{...{
inputProps: {
checked: value in newMap,
onChange: () => {
if (value in newMap) delete newMap[value];
else newMap[value] = '';
this.context.aggregationMarketingContext.updateValue({key: 'selectedRows', value: newMap});
}
}
}}
/>
);
}
},
{
Header: 'Segment',
accessor: 'segment',
filterType: 'lookup-multiselect',
width: 130
},
{
Header: 'Geo',
accessor: 'geo',
filterType: 'lookup-multiselect',
width: 130
},
{
Header: 'Channel',
accessor: 'channel',
filterType: 'lookup-multiselect',
width: 130
},
{
Header: 'Language',
accessor: 'language',
filterType: 'lookup-multiselect',
width: 150
},
{
Header: 'Assortments',
accessor: 'assortments',
filterType: 'lookup-multiselect',
width: 180
},
{
Header: 'Last Modified By',
accessor: 'modifiedBy',
filterType: 'lookup-multiselect',
Cell: ({value}) => {
return <span> {value || '-'}</span>;
},
width: 244
},
{
Header: 'Last Modified Date',
accessor: 'modifiedDate',
filterType: 'date-picker',
width: 324,
Cell: ({value}) => {
return (
<div className="set-cell">
{value
? moment
.utc(value)
.tz(localTimeZone)
.format(Constants.FORMAT_DATE)
: '-'}
</div>
);
}
}
];

return (
<section className="sub-content-body-container">
<Header title="Subscription Management" />
<div className="sub-content-container">
<LeftNav />
<div className="sub-right-content-container">
<section className={`${styles.aggregationMarketingContext}`}>
<SubHeader
title="Aggregation Marketing Contexts"
onNavIconClick={toggleLeftNav}
rightRenderer={() =>
hasPermissions([ROLES.Admin, ROLES.Write]) && (
<div className="link-action-container">
<Link to="" className="button button-block button-elevated">
Create
</Link>
</div>
)
}
/>
{isFetching ? (
<div className="loader" />
) : (
<section className="aggregation-table-container">
<Position>
{({width = window.innerWidth, windowInnerHeight = window.innerHeight}) => (
<FilterTable
ref={ref => {
this.table = ref;
}}
tableProps={{
onRowMouseOver: data => {
this.setState({
highlightedRowIdx: data.index
});
},
onRowMouseOut: data => {
this.setState({
highlightedRowIdx: null
});
},
rowClassName: ({index}) => {
const isSameRowIdx = index === this.state.highlightedRowIdx;
return `brucke-row-decorator ${isSameRowIdx ? 'active-row' : ''}`;
}
}}
height={windowInnerHeight - 350}
width={Math.max(width, 1300)}
columns={tableColumns}
data={marketingContexts}
infiniteScroll={true}
enableGlobalFilter={true}
rowCountRenderer={this.marketingContextsActionrenderer}
/>
)}
</Position>
</section>
)}
<ConfirmModal
className={styles.deleteConfirmModal}
show={isRemoveConfirmModalOpen}
onHide={() => this.context.appState.updateValue({key: 'isRemoveConfirmModalOpen', value: false})}
onCancel={() => this.context.appState.updateValue({key: 'isRemoveConfirmModalOpen', value: false})}
onConfirm={() => this.context.aggregationMarketingContext.deleteRows(Object.keys(selectedRows))}
confirmButtonText="Remove"
modalType="warning"
>
<section>
<span className="info-text">
{`You have marked ${Object.keys(selectedRows).length} row${
Object.keys(selectedRows).length > 1 ? 's' : ''
} to be deleted. Are you sure you want to proceed?`}
</span>
</section>
</ConfirmModal>
</section>
</div>
</div>
</section>
);
}
}

export default observer(AggregationMarketingContext);