resources page fixes
parent
f96fe1164b
commit
0814d09533
|
@ -1,2 +1,5 @@
|
|||
- schimbare limba din setari
|
||||
- salvare configurari - pozitie toast
|
||||
|
||||
# Resources list
|
||||
- comenzi pe fiecare rand: - creion edit + ... care deschide meniu cu alte comenzi (copy - copiaza link-ul, open - deschide link-ul public in tab nou)
|
|
@ -4,7 +4,8 @@ import { get } from "../utils/axios";
|
|||
|
||||
const cdn = process.env.REACT_APP_CDN_URL;
|
||||
const endpoints = {
|
||||
mimeTypes: `${cdn}/admin/mime-types`
|
||||
mimeTypes: `${cdn}/admin/mime-types`,
|
||||
resourceCategories: `${cdn}/admin/resource-categories`
|
||||
};
|
||||
|
||||
const useDictionariesApi = () => {
|
||||
|
@ -18,8 +19,17 @@ const useDictionariesApi = () => {
|
|||
[exec]
|
||||
);
|
||||
|
||||
const getResourceCategories = useCallback(
|
||||
(options) => {
|
||||
const promise = exec(() => get(endpoints.resourceCategories), options);
|
||||
return promise;
|
||||
},
|
||||
[exec]
|
||||
);
|
||||
|
||||
return {
|
||||
getMimeTypes
|
||||
getMimeTypes,
|
||||
getResourceCategories
|
||||
};
|
||||
};
|
||||
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
const defaultResourcesFilters = Object.freeze({
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
loadedPages: null,
|
||||
sortBy: null,
|
||||
sortDirection: null,
|
||||
fullTextSearch: null,
|
||||
|
|
|
@ -1,34 +1,56 @@
|
|||
import React, { useState, useEffect, useMemo, useCallback } from "react";
|
||||
import { Grid, Checkbox, CircularProgress, FormLabel } from "@material-ui/core";
|
||||
import { Checkbox, FormLabel } from "@material-ui/core";
|
||||
import MUIDataTable, { debounceSearchRender } from "mui-datatables";
|
||||
import Skeleton from "@material-ui/lab/Skeleton";
|
||||
import PageTitle from "../../../components/PageTitle";
|
||||
import { useResourcesApi } from "../../../api";
|
||||
import { useResourcesApi, useDictionariesApi } from "../../../api";
|
||||
import { defaultResourcesFilters } from "../../../constants/resourcesConstants";
|
||||
|
||||
const __ROWS_PER_PAGE_OPTIONS = [10, 20, 50, 100];
|
||||
|
||||
const ResourcesContainer = () => {
|
||||
const [state, setState] = useState({ loaded: false, loadedPages: null });
|
||||
const [state, setState] = useState({
|
||||
pageSize: 10,
|
||||
totalCount: 0,
|
||||
values: []
|
||||
});
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [filters, setFilters] = useState({ ...defaultResourcesFilters });
|
||||
const [resourceCategories, setResourceCategories] = useState([]);
|
||||
|
||||
const { getResources } = useResourcesApi();
|
||||
const { getResourceCategories } = useDictionariesApi();
|
||||
|
||||
useEffect(() => {
|
||||
if (state.loadedPages && state.loadedPages.includes(filters.page)) return;
|
||||
getResourceCategories().then((r) => setResourceCategories(r));
|
||||
}, [getResourceCategories]);
|
||||
|
||||
useEffect(() => {
|
||||
if (filters.loadedPages && filters.loadedPages.includes(filters.page))
|
||||
return;
|
||||
|
||||
setLoading(true);
|
||||
getResources(filters, {
|
||||
onCompleted: (resources) => {
|
||||
const data = { ...resources, loaded: true };
|
||||
setState((prev) => ({
|
||||
...prev,
|
||||
...data,
|
||||
values: prev?.values ? [...prev.values, ...data.values] : data.values,
|
||||
loadedPages: prev?.loadedPages
|
||||
? [...prev.loadedPages, data.page]
|
||||
: [data.page]
|
||||
...resources,
|
||||
values: filters.loadedPages
|
||||
? [...prev.values, ...resources.values]
|
||||
: resources.values
|
||||
}));
|
||||
|
||||
setFilters((prev) => ({
|
||||
...prev,
|
||||
loadedPages: prev?.loadedPages
|
||||
? [...prev.loadedPages, resources.page]
|
||||
: [resources.page]
|
||||
}));
|
||||
|
||||
setLoading(false);
|
||||
}
|
||||
});
|
||||
}, [getResources, filters, state.loadedPages]);
|
||||
}, [getResources, filters]);
|
||||
|
||||
const columns = useMemo(
|
||||
() => [
|
||||
|
@ -38,7 +60,7 @@ const ResourcesContainer = () => {
|
|||
options: {
|
||||
display: true,
|
||||
draggable: true,
|
||||
download: false,
|
||||
download: true,
|
||||
print: false,
|
||||
searchable: true,
|
||||
sort: true,
|
||||
|
@ -60,7 +82,7 @@ const ResourcesContainer = () => {
|
|||
options: {
|
||||
display: true,
|
||||
draggable: true,
|
||||
download: false,
|
||||
download: true,
|
||||
print: false,
|
||||
searchable: true,
|
||||
sort: true,
|
||||
|
@ -78,11 +100,11 @@ const ResourcesContainer = () => {
|
|||
},
|
||||
{
|
||||
label: "Category",
|
||||
name: "categoryId",
|
||||
name: "categoryName",
|
||||
options: {
|
||||
display: true,
|
||||
draggable: true,
|
||||
download: false,
|
||||
download: true,
|
||||
print: false,
|
||||
searchable: true,
|
||||
sort: true,
|
||||
|
@ -101,7 +123,7 @@ const ResourcesContainer = () => {
|
|||
options: {
|
||||
display: true,
|
||||
draggable: true,
|
||||
download: false,
|
||||
download: true,
|
||||
print: false,
|
||||
searchable: true,
|
||||
sort: true,
|
||||
|
@ -149,70 +171,76 @@ const ResourcesContainer = () => {
|
|||
[]
|
||||
);
|
||||
|
||||
const handleResetFilters = useCallback(() => {
|
||||
setFilters((prev) => ({ ...prev, ...defaultResourcesFilters }));
|
||||
}, [setFilters]);
|
||||
const changeFilters = useCallback((obj) => {
|
||||
const keys = Object.keys(obj);
|
||||
const isPageChange = keys.length === 1 && keys[0] === "page";
|
||||
if (!isPageChange) {
|
||||
const { page, loadedPages } = defaultResourcesFilters;
|
||||
obj = { ...obj, page, loadedPages };
|
||||
}
|
||||
|
||||
setFilters((prev) => ({ ...prev, ...obj }));
|
||||
}, []);
|
||||
|
||||
const handleFilterChange = useCallback(
|
||||
(changedColumn, filterList, type, changedColumnIndex, displayData) => {
|
||||
if (type === "reset") {
|
||||
handleResetFilters();
|
||||
changeFilters(defaultResourcesFilters);
|
||||
return;
|
||||
}
|
||||
const filterValue = filterList[changedColumnIndex][0];
|
||||
setFilters((prev) => ({
|
||||
...prev,
|
||||
[changedColumn]: filterValue
|
||||
}));
|
||||
changeFilters({ [changedColumn]: filterValue });
|
||||
},
|
||||
[handleResetFilters]
|
||||
[changeFilters]
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageTitle title="ResourcesX" />
|
||||
{state.loaded === false ? (
|
||||
<CircularProgress size={26} />
|
||||
) : (
|
||||
<MUIDataTable
|
||||
title="Resources"
|
||||
columns={columns}
|
||||
data={state.values ?? []}
|
||||
options={{
|
||||
filterType: "textField",
|
||||
expandableRows: false,
|
||||
print: false,
|
||||
selectableRows: "none",
|
||||
rowsPerPage: state.pageSize,
|
||||
rowsPerPageOptions: __ROWS_PER_PAGE_OPTIONS,
|
||||
count: state.totalCount,
|
||||
customSearchRender: debounceSearchRender(500),
|
||||
onChangePage: (currentPage) => {
|
||||
setFilters((prev) => ({ ...prev, page: currentPage + 1 }));
|
||||
},
|
||||
onChangeRowsPerPage: (numberOfRows) => {
|
||||
setFilters((prev) => ({ ...prev, pageSize: numberOfRows }));
|
||||
},
|
||||
onColumnSortChange: (changedColumn, direction) =>
|
||||
setFilters((prev) => ({
|
||||
...prev,
|
||||
sortBy: changedColumn,
|
||||
sortDirection: direction
|
||||
})),
|
||||
onFilterChange: handleFilterChange,
|
||||
onSearchChange: (text) =>
|
||||
setFilters((prev) => ({ ...prev, fullTextSearch: text })),
|
||||
customSort: (data) => data,
|
||||
customSearch: () => true,
|
||||
setFilterChipProps: (_colIndex, _colName, _data) => {
|
||||
return {
|
||||
color: "primary",
|
||||
variant: "outlined"
|
||||
};
|
||||
<PageTitle title="Resources adminstration" />
|
||||
|
||||
<MUIDataTable
|
||||
title="Resources"
|
||||
columns={columns}
|
||||
data={state.values}
|
||||
options={{
|
||||
filterType: "textField",
|
||||
expandableRows: false,
|
||||
print: false,
|
||||
selectableRows: "none",
|
||||
rowsPerPage: state.pageSize,
|
||||
rowsPerPageOptions: __ROWS_PER_PAGE_OPTIONS,
|
||||
count: state.totalCount,
|
||||
customSearchRender: debounceSearchRender(500),
|
||||
onChangePage: (currentPage) =>
|
||||
changeFilters({ page: currentPage + 1 }),
|
||||
onChangeRowsPerPage: (numberOfRows) =>
|
||||
changeFilters({ pageSize: numberOfRows }),
|
||||
onColumnSortChange: (changedColumn, direction) =>
|
||||
changeFilters({
|
||||
sortBy: changedColumn,
|
||||
sortDirection: direction
|
||||
}),
|
||||
onFilterChange: handleFilterChange,
|
||||
onSearchChange: (text) => changeFilters({ fullTextSearch: text }),
|
||||
customSort: (data) => data,
|
||||
customSearch: () => true,
|
||||
setFilterChipProps: (_colIndex, _colName, _data) => {
|
||||
return {
|
||||
color: "primary",
|
||||
variant: "outlined"
|
||||
};
|
||||
},
|
||||
textLabels: {
|
||||
body: {
|
||||
noMatch: loading ? (
|
||||
<Skeleton variant="text" />
|
||||
) : (
|
||||
"Sorry, there is no matching data to display"
|
||||
)
|
||||
}
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
Loading…
Reference in New Issue