resources page fixes

notes/todo.txt

@@ -1,2 +1,5 @@
 - schimbare limba din setari
-- salvare configurari - pozitie toast
+- 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)

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

src/constants/resourcesConstants.js

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

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