@maherunlocker/custom-react-table
Version:
dynamic table based on react table v7
193 lines • 11 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.FilterPageCustom = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
/* eslint-disable react-hooks/exhaustive-deps */
const react_1 = __importDefault(require("react"));
const styles_1 = require("@mui/styles");
// import { useTranslation } from 'react-i18next';
const material_1 = require("@mui/material");
const DiskIcon_1 = require("../components/assets/DiskIcon");
const FilterChipBarCollapsible_1 = require("./FilterChipBarCollapsible");
const isMobileView_1 = require("./isMobileView");
const StyledButton_1 = require("../components/assets/StyledButton");
const StyledIconButton_1 = require("../components/assets/StyledIconButton");
const StyledLabel_1 = require("../components/assets/StyledLabel");
// import VerticalDotsIcon from '../components/assets/VerticalDotsIcon';
const utils_1 = require("../utils");
const SelectComponent_1 = require("./SelectComponent");
const TrashIcon_1 = require("../components/assets/TrashIcon");
// import { PencilIcon } from '../components/assets/PencilIcon';
const SuccessToast_1 = __importDefault(require("../components/SuccessToast"));
const ErrorToast_1 = __importDefault(require("../components/ErrorToast"));
const useStyles = (0, styles_1.makeStyles)((0, styles_1.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 FilterPageCustom({ instance, onClose, filterActive, setLocalFilterActive, tableName, }) {
// const { t } = useTranslation();
const classes = useStyles({});
const isMobile = (0, isMobileView_1.IsMobileView)();
const { allColumns, setAllFilters } = instance;
const heightRef = react_1.default.useRef(null);
// eslint-disable-next-line
const [showMore, setShowMore] = react_1.default.useState(() => false);
// eslint-disable-next-line
const [currentHeight, setCurrentHeight] = react_1.default.useState(() => 120);
// for adding selected filter
const [savedFilters, setSavedFilters] = (0, utils_1.useLocalStorage)(`${tableName}_SavedFilters`, []);
const [designationFilter, setDesignationFilter] = react_1.default.useState('');
// eslint-disable-next-line
const [oldFilterName, setOldFilterName] = react_1.default.useState('');
const handleSaveFiltersClick = react_1.default.useCallback(() => {
if (designationFilter === null ||
designationFilter === undefined ||
designationFilter === '') {
(0, ErrorToast_1.default)('Merci de saisir une désignation pour votre filtre.');
return;
}
if (Object.keys(instance.state.filters).length === 0) {
(0, ErrorToast_1.default)('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);
(0, SuccessToast_1.default)('Filtre modifié avec succès');
}
else {
setSavedFilters([
...savedFilters,
{ label: designationFilter, value: instance.state.filters },
]);
(0, SuccessToast_1.default)('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_1.default.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 === '') {
(0, ErrorToast_1.default)('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('');
(0, SuccessToast_1.default)('Filtre supprimé avec succès');
}
}
react_1.default.useEffect(() => {
if (heightRef.current !== null) {
setShowMore(document.getElementById('FilterChipBar').offsetHeight > 120);
setCurrentHeight(document.getElementById('FilterChipBar').offsetHeight);
}
}, [designationFilter, instance.state.filters]);
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (classes.columnsPopOver, classes.grid, classes.cell), style: { marginLeft: 5, marginRight: 5 } }, { children: [(0, jsx_runtime_1.jsx)(StyledLabel_1.StyledLabel, Object.assign({ style: {
borderBottom: '2px solid',
marginLeft: 1,
marginRight: 1,
marginTop: 10,
} }, { children: "Filtres enregistr\u00E9s" })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ component: "div", sx: { display: 'flex', justifyContent: 'space-between' } }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ style: { width: ' 100%', marginTop: 10 } }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ style: {
display: 'grid',
gridTemplateColumns: '10fr 1fr',
alignItems: 'center',
} }, { children: [(0, jsx_runtime_1.jsx)(SelectComponent_1.SelectComponent, { options: savedFilters.length > 0 ? savedFilters : [], setDesignationFilter: setDesignationFilter, handleSavedFiltersSelect: handleSavedFiltersSelect, designationFilter: designationFilter, setAllFilters: setAllFilters }), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ component: "div", sx: { display: 'flex', alignItems: 'end' } }, { children: [(0, jsx_runtime_1.jsx)(StyledIconButton_1.StyledIconButton, Object.assign({ icon: "DiskIcon", style: {
margin: '0px 5px',
border: '1px solid',
borderRadius: '6px',
}, onClick: handleSaveFiltersClick }, { children: (0, jsx_runtime_1.jsx)(DiskIcon_1.DiskIcon, { height: 20, width: 20 }) })), (0, jsx_runtime_1.jsx)(StyledIconButton_1.StyledIconButton, Object.assign({ icon: "DiskIcon", style: {
margin: '0px 5px',
border: '1px solid',
borderRadius: '6px',
}, onClick: handleDeleteFilter }, { children: (0, jsx_runtime_1.jsx)(TrashIcon_1.TrashIcon, { style: { cursor: 'pointer' }, height: 20, width: 20, className: "mx-2" }) }))] }))] })) })) })), (0, jsx_runtime_1.jsx)(StyledLabel_1.StyledLabel, Object.assign({ style: {
borderBottom: '2px solid',
marginLeft: 1,
marginRight: 1,
marginTop: 10,
} }, { children: "Filtrer" })), Object.keys(instance.state.filters).length > 0 ? ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ id: "FilterChipBar", component: "div", ref: heightRef }, { children: (0, jsx_runtime_1.jsx)(FilterChipBarCollapsible_1.FilterChipBarCollapsible, { instance: instance, showMore: showMore, currentHeight: currentHeight, setDesignationFilter: setDesignationFilter }) }))) : ((0, jsx_runtime_1.jsx)(StyledButton_1.StyledButton, Object.assign({ rounded: true, variant: "light", style: { width: '100%', color: '#000' } }, { children: "Aucun filtre actif" }))), (0, jsx_runtime_1.jsx)(material_1.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) => ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "my-2" }, { children: column.render('Filter') }), column.id))) }))] })));
}
exports.FilterPageCustom = FilterPageCustom;
//# sourceMappingURL=FilterPageCustom.js.map