From 0814d095331eb81f0aa212bca5412df785aeec52 Mon Sep 17 00:00:00 2001 From: Tudor Stanciu Date: Thu, 8 Dec 2022 02:31:03 +0200 Subject: [PATCH] resources page fixes --- notes/todo.txt | 5 +- src/api/useDictionariesApi.js | 14 +- src/constants/resourcesConstants.js | 1 + .../components/ResourcesContainer.js | 162 ++++++++++-------- 4 files changed, 112 insertions(+), 70 deletions(-) diff --git a/notes/todo.txt b/notes/todo.txt index 5bbcaff..4d00e5c 100644 --- a/notes/todo.txt +++ b/notes/todo.txt @@ -1,2 +1,5 @@ - schimbare limba din setari -- salvare configurari - pozitie toast \ No newline at end of file +- 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) \ No newline at end of file diff --git a/src/api/useDictionariesApi.js b/src/api/useDictionariesApi.js index 1e00f5b..361e9f3 100644 --- a/src/api/useDictionariesApi.js +++ b/src/api/useDictionariesApi.js @@ -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 }; }; diff --git a/src/constants/resourcesConstants.js b/src/constants/resourcesConstants.js index e857a64..a14ab16 100644 --- a/src/constants/resourcesConstants.js +++ b/src/constants/resourcesConstants.js @@ -1,6 +1,7 @@ const defaultResourcesFilters = Object.freeze({ page: 1, pageSize: 10, + loadedPages: null, sortBy: null, sortDirection: null, fullTextSearch: null, diff --git a/src/features/resources/components/ResourcesContainer.js b/src/features/resources/components/ResourcesContainer.js index d64c605..a3e1197 100644 --- a/src/features/resources/components/ResourcesContainer.js +++ b/src/features/resources/components/ResourcesContainer.js @@ -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 ( <> - - {state.loaded === false ? ( - - ) : ( - { - 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" - }; + + + + 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 ? ( + + ) : ( + "Sorry, there is no matching data to display" + ) } - }} - /> - )} + } + }} + /> ); };