@maherunlocker/custom-react-table
Version:
dynamic table based on react table v7
186 lines • 9.9 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/* 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 { DiskIcon } from '../components/assets/DiskIcon';
import { FilterChipBarCollapsible } from './FilterChipBarCollapsible';
import { IsMobileView } from './isMobileView';
import { StyledButton } from '../components/assets/StyledButton';
import { StyledIconButton } from '../components/assets/StyledIconButton';
import { StyledLabel } from '../components/assets/StyledLabel';
// import VerticalDotsIcon from '../components/assets/VerticalDotsIcon';
import { useLocalStorage } from '../utils';
import { SelectComponent } from './SelectComponent';
import { TrashIcon } from '../components/assets/TrashIcon';
// 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',
},
}));
export function FilterPageCustom({ instance, onClose, filterActive, setLocalFilterActive, tableName, }) {
// 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);
// 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(() => {
if (designationFilter === null ||
designationFilter === undefined ||
designationFilter === '') {
ErrorToast('Merci de saisir une désignation pour votre filtre.');
return;
}
if (Object.keys(instance.state.filters).length === 0) {
ErrorToast('Merci de choisir au moins un filtre');
return;
}
if (Object.keys(instance.state.filters).length > 0) {
const found = savedFilters.find((f) => f.label === designationFilter);
if (found) {
savedFilters[savedFilters.findIndex((f) => f.label === designationFilter)] = {
label: designationFilter,
value: instance.state.filters,
};
setSavedFilters(savedFilters);
SuccessToast('Filtre modifié avec succès');
}
else {
setSavedFilters([
...savedFilters,
{ label: designationFilter, value: instance.state.filters },
]);
SuccessToast('Filtre ajouté avec succès');
}
// found ? SuccessToast(t('Filter successfully added')) : SuccessToast(t('Filter successfully added'));
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [
designationFilter,
instance.state.filters,
setSavedFilters,
savedFilters,
]);
// const handleModifyFilter = React.useCallback(() => {
// const found = savedFilters.find((f: any) => f.label === oldFilterName);
// found &&
// (savedFilters[savedFilters.findIndex((f: any) => f.label === oldFilterName)] = {
// label: oldFilterName,
// value: filters,
// });
// SuccessToast(t('Filter successfully updated'));
// }, [filters, savedFilters, oldFilterName]);
const handleSavedFiltersSelect = React.useCallback((selectedValue) => {
if (selectedValue) {
setDesignationFilter(selectedValue.label);
const indexofSelected = savedFilters.findIndex((f) => f.label === selectedValue.label);
indexofSelected > -1
? (function () {
setAllFilters(savedFilters[indexofSelected].value);
setOldFilterName(selectedValue.label);
})()
: setAllFilters([]);
}
}, [savedFilters, setAllFilters]);
function handleDeleteFilter() {
if (designationFilter === null ||
designationFilter === undefined ||
designationFilter === '') {
ErrorToast('Merci de sélectionner un filtre pour la suppression');
return;
}
const found = savedFilters.find((f) => f.label === designationFilter);
if (found) {
savedFilters.splice(savedFilters.findIndex((f) => f.label === designationFilter), 1);
setSavedFilters(savedFilters);
setAllFilters([]);
setDesignationFilter('');
SuccessToast('Filtre supprimé avec succès');
}
}
React.useEffect(() => {
if (heightRef.current !== null) {
setShowMore(document.getElementById('FilterChipBar').offsetHeight > 120);
setCurrentHeight(document.getElementById('FilterChipBar').offsetHeight);
}
}, [designationFilter, instance.state.filters]);
return (_jsxs("div", Object.assign({ className: (classes.columnsPopOver, classes.grid, classes.cell), style: { marginLeft: 5, marginRight: 5 } }, { children: [_jsx(StyledLabel, Object.assign({ style: {
borderBottom: '2px solid',
marginLeft: 1,
marginRight: 1,
marginTop: 10,
} }, { children: "Filtres enregistr\u00E9s" })), _jsx(Box, Object.assign({ component: "div", sx: { display: 'flex', justifyContent: 'space-between' } }, { children: _jsx("div", Object.assign({ style: { width: ' 100%', marginTop: 10 } }, { children: _jsxs("div", Object.assign({ style: {
display: 'grid',
gridTemplateColumns: '10fr 1fr',
alignItems: 'center',
} }, { children: [_jsx(SelectComponent, { options: savedFilters.length > 0 ? savedFilters : [], setDesignationFilter: setDesignationFilter, handleSavedFiltersSelect: handleSavedFiltersSelect, designationFilter: designationFilter, setAllFilters: setAllFilters }), _jsxs(Box, Object.assign({ component: "div", sx: { display: 'flex', alignItems: 'end' } }, { children: [_jsx(StyledIconButton, Object.assign({ icon: "DiskIcon", style: {
margin: '0px 5px',
border: '1px solid',
borderRadius: '6px',
}, onClick: handleSaveFiltersClick }, { children: _jsx(DiskIcon, { height: 20, width: 20 }) })), _jsx(StyledIconButton, Object.assign({ icon: "DiskIcon", style: {
margin: '0px 5px',
border: '1px solid',
borderRadius: '6px',
}, onClick: handleDeleteFilter }, { children: _jsx(TrashIcon, { style: { cursor: 'pointer' }, height: 20, width: 20, className: "mx-2" }) }))] }))] })) })) })), _jsx(StyledLabel, Object.assign({ style: {
borderBottom: '2px solid',
marginLeft: 1,
marginRight: 1,
marginTop: 10,
} }, { children: "Filtrer" })), Object.keys(instance.state.filters).length > 0 ? (_jsx(Box, Object.assign({ id: "FilterChipBar", component: "div", ref: heightRef }, { children: _jsx(FilterChipBarCollapsible, { instance: instance, showMore: showMore, currentHeight: currentHeight, setDesignationFilter: setDesignationFilter }) }))) : (_jsx(StyledButton, Object.assign({ rounded: true, variant: "light", style: { width: '100%', color: '#000' } }, { children: "Aucun filtre actif" }))), _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