@aures/custom-react-table
Version:
dynamic table based on react table v7
212 lines • 9.95 kB
JavaScript
;
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 prefer-const */
/* eslint-disable react-hooks/exhaustive-deps */
const react_1 = __importDefault(require("react"));
const styles_1 = require("@mui/styles");
const react_i18next_1 = require("react-i18next");
const material_1 = require("@mui/material");
const isMobileView_1 = require("./isMobileView");
// import VerticalDotsIcon from '../components/assets/VerticalDotsIcon';
const utils_1 = require("../utils");
// 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 verifExist(listOfObjects, listCols) {
const ids = listOfObjects.map((item) => item.id);
return ids.every((id) => listCols.includes(id));
}
function FilterPageCustom({ instance, onClose, filterActive, setLocalFilterActive, tableName, customFilterJsx, allFiltersCustom, }) {
const { t } = (0, react_i18next_1.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);
const [filterNameIsUpdated, setFilterNameIsUpdated] = react_1.default.useState(false);
const [canSaveUpdated, setCanSaveUpdated] = react_1.default.useState(true);
const [nameIsUpdated, setNameIsUpdated] = react_1.default.useState('');
// 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(() => {
const found = savedFilters.find((f) => f.label === designationFilter);
if (filterNameIsUpdated || found) {
if ((nameIsUpdated === null ||
nameIsUpdated === undefined ||
nameIsUpdated === '') &&
(designationFilter === null ||
designationFilter === undefined ||
designationFilter === '')) {
(0, ErrorToast_1.default)(t('Please enter a designation for your filter.'));
return;
}
if (Object.keys(instance.state.filters).length === 0) {
(0, ErrorToast_1.default)(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('');
(0, SuccessToast_1.default)(t('Filter successfully updated'));
}
}
}
else {
if (designationFilter === null ||
designationFilter === undefined ||
designationFilter === '') {
(0, ErrorToast_1.default)(t('Please enter a designation for your filter.'));
return;
}
if (Object.keys(instance.state.filters).length === 0) {
(0, ErrorToast_1.default)(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 },
]);
(0, SuccessToast_1.default)(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_1.default.useCallback(() => {
if (designationFilter === '') {
(0, ErrorToast_1.default)(t('Please choose at least one filter'));
}
else {
setNameIsUpdated(designationFilter);
setFilterNameIsUpdated(true);
}
}, [savedFilters, oldFilterName]);
const handleSavedFiltersSelect = react_1.default.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 === '') {
(0, ErrorToast_1.default)(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('');
(0, SuccessToast_1.default)(t('Filter successfully removed'));
}
}
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.jsx)("div", Object.assign({ className: (classes.columnsPopOver, classes.grid, classes.cell), style: { marginLeft: 5, marginRight: 5 } }, { children: customFilterJsx !== undefined ? (customFilterJsx) : ((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