resources page fixes

master
Tudor Stanciu 2022-12-08 02:31:03 +02:00
parent f96fe1164b
commit 0814d09533
4 changed files with 112 additions and 70 deletions

View File

@ -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)

View File

@ -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
};
};

View File

@ -1,6 +1,7 @@
const defaultResourcesFilters = Object.freeze({
page: 1,
pageSize: 10,
loadedPages: null,
sortBy: null,
sortDirection: null,
fullTextSearch: null,

View File

@ -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"
)
}
}}
/>
)}
}
}}
/>
</>
);
};