@aures/custom-react-table
Version:
dynamic table based on react table v7
205 lines • 9.18 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
/* eslint-disable prefer-const */
/* eslint-disable react-hooks/exhaustive-deps */
import React from 'react';
import { createStyles, makeStyles } from '@mui/styles';
import { useTranslation } from 'react-i18next';
import { Box } from '@mui/material';
import { IsMobileView } from './isMobileView';
// import VerticalDotsIcon from '../components/assets/VerticalDotsIcon';
import { useLocalStorage } from '../utils';
// import { PencilIcon } from '../components/assets/PencilIcon';
import SuccessToast from '../components/SuccessToast';
import ErrorToast from '../components/ErrorToast';
const useStyles = makeStyles(createStyles({
columnsPopOver: {
padding: 24,
display: 'flex',
},
FiltersCss: {
border: '1px solid rgba(224, 224, 224, 1)',
},
filtersResetButton: {
position: 'absolute',
top: 18,
right: 21,
},
popoverTitle: {
fontWeight: 500,
padding: '0 24px 24px 0',
textTransform: 'uppercase',
},
grid: {
display: 'grid',
gridTemplateColumns: 'repeat(2, 218px)',
'@media (max-width: 600px)': {
gridTemplateColumns: 'repeat(1, 180px)',
},
gridColumnGap: 24,
gridRowGap: 24,
},
cell: {
display: 'flex',
flexDirection: 'column',
},
hidden: {
display: 'none',
},
}));
function verifExist(listOfObjects, listCols) {
const ids = listOfObjects.map((item) => item.id);
return ids.every((id) => listCols.includes(id));
}
export function FilterPageCustom({ instance, onClose, filterActive, setLocalFilterActive, tableName, customFilterJsx, allFiltersCustom, }) {
const { t } = useTranslation();
const classes = useStyles({});
const isMobile = IsMobileView();
const { allColumns, setAllFilters } = instance;
const heightRef = React.useRef(null);
// eslint-disable-next-line
const [showMore, setShowMore] = React.useState(() => false);
const [filterNameIsUpdated, setFilterNameIsUpdated] = React.useState(false);
const [canSaveUpdated, setCanSaveUpdated] = React.useState(true);
const [nameIsUpdated, setNameIsUpdated] = React.useState('');
// eslint-disable-next-line
const [currentHeight, setCurrentHeight] = React.useState(() => 120);
// for adding selected filter
const [savedFilters, setSavedFilters] = useLocalStorage(`${tableName}_SavedFilters`, []);
const [designationFilter, setDesignationFilter] = React.useState('');
// eslint-disable-next-line
const [oldFilterName, setOldFilterName] = React.useState('');
const handleSaveFiltersClick = React.useCallback(() => {
const found = savedFilters.find((f) => f.label === designationFilter);
if (filterNameIsUpdated || found) {
if ((nameIsUpdated === null ||
nameIsUpdated === undefined ||
nameIsUpdated === '') &&
(designationFilter === null ||
designationFilter === undefined ||
designationFilter === '')) {
ErrorToast(t('Please enter a designation for your filter.'));
return;
}
if (Object.keys(instance.state.filters).length === 0) {
ErrorToast(t('Please choose at least one filter'));
return;
}
if (canSaveUpdated === false) {
return;
}
if (Object.keys(instance.state.filters).length > 0) {
const found = savedFilters.find((f) => f.label === designationFilter);
if (found) {
let flt = savedFilters;
flt[flt.findIndex((f) => f.label === designationFilter)] = {
label: ['', null, undefined].indexOf(nameIsUpdated) === -1
? nameIsUpdated
: designationFilter,
value: instance.state.filters,
};
setSavedFilters(allFiltersCustom ? allFiltersCustom : flt);
setNameIsUpdated('');
setDesignationFilter('');
SuccessToast(t('Filter successfully updated'));
}
}
}
else {
if (designationFilter === null ||
designationFilter === undefined ||
designationFilter === '') {
ErrorToast(t('Please enter a designation for your filter.'));
return;
}
if (Object.keys(instance.state.filters).length === 0) {
ErrorToast(t('Please choose at least one filter'));
return;
}
if (Object.keys(instance.state.filters).length > 0) {
setSavedFilters(allFiltersCustom
? allFiltersCustom
: [
...savedFilters,
{ label: designationFilter, value: instance.state.filters },
]);
SuccessToast(t('Filter successfully added'));
setFilterNameIsUpdated(false);
// found ? SuccessToast(t('Filter successfully added')) : SuccessToast(t('Filter successfully added'));
}
}
setFilterNameIsUpdated(false);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [
designationFilter,
instance.state.filters,
setSavedFilters,
savedFilters,
nameIsUpdated,
]);
const handleModifyFilter = React.useCallback(() => {
if (designationFilter === '') {
ErrorToast(t('Please choose at least one filter'));
}
else {
setNameIsUpdated(designationFilter);
setFilterNameIsUpdated(true);
}
}, [savedFilters, oldFilterName]);
const handleSavedFiltersSelect = React.useCallback((selectedValue) => {
if (selectedValue) {
setDesignationFilter(selectedValue.label);
const indexofSelected = savedFilters.findIndex((f) => f.label === selectedValue.label);
let cols = instance.allColumns
.map((x) => {
var _a;
return typeof (x === null || x === void 0 ? void 0 : x.Header) === 'string' && ((_a = x === null || x === void 0 ? void 0 : x.Header) === null || _a === void 0 ? void 0 : _a.length) > 0
? x.Header
: null;
})
.filter((header) => header !== null);
let canFilter = verifExist(indexofSelected > -1 ? savedFilters[indexofSelected].value : [], cols);
indexofSelected > -1 && canFilter === true
? (function () {
setAllFilters(savedFilters[indexofSelected].value);
setOldFilterName(selectedValue.label);
})()
: setAllFilters([]);
}
}, [savedFilters, setAllFilters]);
function handleDeleteFilter() {
if (designationFilter === null ||
designationFilter === undefined ||
designationFilter === '') {
ErrorToast(t('Please select a filter for deletion'));
return;
}
const found = savedFilters.find((f) => f.label === designationFilter);
if (found) {
savedFilters.splice(savedFilters.findIndex((f) => f.label === designationFilter), 1);
setSavedFilters(allFiltersCustom ? allFiltersCustom : savedFilters);
setAllFilters([]);
setDesignationFilter('');
SuccessToast(t('Filter successfully removed'));
}
}
React.useEffect(() => {
if (heightRef.current !== null) {
setShowMore(document.getElementById('FilterChipBar').offsetHeight > 120);
setCurrentHeight(document.getElementById('FilterChipBar').offsetHeight);
}
}, [designationFilter, instance.state.filters]);
return (_jsx("div", Object.assign({ className: (classes.columnsPopOver, classes.grid, classes.cell), style: { marginLeft: 5, marginRight: 5 } }, { children: customFilterJsx !== undefined ? (customFilterJsx) : (_jsx(Box, Object.assign({ component: "div", id: "listfilter", style: {
maxHeight: !isMobile ? 'calc(100vh - 350px)' : 'auto',
overflow: 'auto',
alignItems: 'center',
} }, { children: allColumns
.filter((it) => it.canFilter &&
it.isVisible &&
it.id !== '_selector' &&
it.id !== 'delete' &&
it.id !== '_Actions' &&
it.id !== 'expander' &&
it.id !== 'hidecolumns')
.map((column) => (_jsx("div", Object.assign({ className: "my-2" }, { children: column.render('Filter') }), column.id))) }))) })));
}
//# sourceMappingURL=FilterPageCustom.js.map