notes/todo.txt

@@ -1,3 +1,2 @@
 - schimbare limba din setari
 - salvare configurari - pozitie toast
-

public/locales/en/translations.json

@@ -12,37 +12,6 @@
     "English": "English",
     "Romanian": "Romanian"
   },
-  "Generic": {
-    "Table": {
-      "Body": {
-        "NoMatch": "Sorry, no matching records found"
-      },
-      "Filter": {
-        "All": "All",
-        "Reset": "Reset",
-        "Title": "FILTERS"
-      },
-      "Pagination": {
-        "DisplayRows": "of",
-        "Next": "Next page",
-        "Previous": "Previous page",
-        "RowsPerPage": "Rows per page"
-      },
-      "Toolbar": {
-        "DownloadCsv": "Download CSV",
-        "FilterTable": "Filter table",
-        "Print": "Print",
-        "Search": "Search",
-        "ViewColumns": "View columns"
-      },
-      "ViewColumns": {
-        "Title": "Show columns"
-      }
-    },
-    "Edit": "Edit",
-    "More": "More",
-    "OpenInNewTab": "Open in new tab"
-  },
   "Menu": {
     "Dashboard": "Dashboard",
     "Resources": "Resources",
@@ -68,24 +37,5 @@
     "IncorrectCredentials": "Incorrect credentials.",
     "Hello": "Hi, {{username}}",
     "AuthenticationDate": "Authentication date"
-  },
-  "Resource": {
-    "Code": "Code",
-    "Name": "Name",
-    "Category": "Category",
-    "Secured": "Secured",
-    "List": {
-      "Title": "Resource management",
-      "SubTitle": "Resources",
-      "Filters": {
-        "Code": "Code contains: {{value}}",
-        "Name": "Name contains: {{value}}",
-        "Category": "Category: {{value}}"
-      },
-      "Actions": {
-        "CopyUrl": "Copy resource URL",
-        "LinkCopiedToClipboard": "The link has been copied to the clipboard."
-      }
-    }
   }
 }

public/locales/ro/translations.json

@@ -3,37 +3,6 @@
     "English": "Engleză",
     "Romanian": "Română"
   },
-  "Generic": {
-    "Table": {
-      "Body": {
-        "NoMatch": "Ne pare rău, nu s-au găsit înregistrări care se potrivesc"
-      },
-      "Filter": {
-        "All": "Toate",
-        "Reset": "Resetați",
-        "Title": "FILTRE"
-      },
-      "Pagination": {
-        "DisplayRows": "din",
-        "Next": "Pagina următoare",
-        "Previous": "Pagina anterioară",
-        "RowsPerPage": "Rânduri pe pagină"
-      },
-      "Toolbar": {
-        "DownloadCsv": "Descărcați CSV",
-        "FilterTable": "Filtrează tabel",
-        "Print": "Imprimare",
-        "Search": "Căutare",
-        "ViewColumns": "Vizualizați coloanele"
-      },
-      "ViewColumns": {
-        "Title": "Afișați coloanele"
-      }
-    },
-    "Edit": "Editează",
-    "More": "Mai mult",
-    "OpenInNewTab": "Deschide într-un tab nou"
-  },
   "Menu": {
     "Dashboard": "Dashboard",
     "Resources": "Resurse",
@@ -59,24 +28,5 @@
     "IncorrectCredentials": "Credențiale incorecte.",
     "Hello": "Salut, {{username}}",
     "AuthenticationDate": "Momentul autentificării"
-  },
-  "Resource": {
-    "Code": "Cod",
-    "Name": "Nume",
-    "Category": "Categorie",
-    "Secured": "Securizat",
-    "List": {
-      "Title": "Managementul resurselor",
-      "SubTitle": "Resurse",
-      "Filters": {
-        "Code": "Codul conține: {{value}}",
-        "Name": "Numele conține: {{value}}",
-        "Category": "Categorie: {{value}}"
-      },
-      "Actions": {
-        "CopyUrl": "Copiați adresa URL a resursei",
-        "LinkCopiedToClipboard": "Linkul a fost copiat în clipboard."
-      }
-    }
   }
 }

src/api/useDictionariesApi.js

@@ -4,8 +4,7 @@ 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 = () => {
@@ -19,17 +18,8 @@ const useDictionariesApi = () => {
     [exec]
   );
 
-  const getResourceCategories = useCallback(
-    (options) => {
-      const promise = exec(() => get(endpoints.resourceCategories), options);
-      return promise;
-    },
-    [exec]
-  );
-
   return {
-    getMimeTypes,
+    getMimeTypes
-    getResourceCategories
   };
 };
 

src/components/LoadingContent/LoadingText.js

@@ -1,48 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import grey from "@material-ui/core/colors/grey";
-import { Paper, makeStyles } from "@material-ui/core";
-
-const styles = {
-  cover: {
-    width: "100%"
-  },
-  bar: {
-    backgroundColor: grey[200],
-    height: 10,
-    margin: 20,
-    "&:nth-child(2n)": {
-      marginRight: "20%"
-    }
-  },
-  paper: {
-    padding: "10px",
-    borderRadius: "6px"
-  }
-};
-
-const useStyles = makeStyles(styles);
-
-const LoadingText = ({ lines = 4, onPaper = false, ...props }) => {
-  const classes = useStyles();
-  const loadingText = (
-    <div className={classes.cover} {...props}>
-      {[...Array(lines)].map((_e, i) => (
-        <div className={classes.bar} key={i}></div>
-      ))}
-    </div>
-  );
-
-  if (onPaper) {
-    return <Paper className={classes.paper}>{loadingText}</Paper>;
-  }
-
-  return loadingText;
-};
-
-LoadingText.propTypes = {
-  lines: PropTypes.number,
-  onPaper: PropTypes.bool
-};
-
-export default LoadingText;

src/components/index.js

@@ -1,3 +0,0 @@
-import LoadingText from "./LoadingContent/LoadingText";
-
-export { LoadingText };

src/constants/resourcesConstants.js

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

src/features/resources/components/ActionButton.js

@@ -1,24 +0,0 @@
-import React, { forwardRef } from "react";
-import { IconButton, Tooltip } from "@material-ui/core";
-
-const ActionButton = forwardRef((props, _ref) => {
-  const { action, resource } = props;
-  return (
-    <Tooltip
-      id={`resource-${resource.resourceId}-${action.code}-tooltip`}
-      title={action.tooltip}
-    >
-      <span id={`resource-${resource.resourceId}-${action.code}`}>
-        <IconButton
-          id={`resource-${resource.resourceId}-${action.code}`}
-          size={"small"}
-          onClick={(event) => action.effect(event, resource)}
-        >
-          <action.icon />
-        </IconButton>
-      </span>
-    </Tooltip>
-  );
-});
-
-export default ActionButton;

src/features/resources/components/ResourcesContainer.js

@@ -1,122 +1,49 @@
 import React, { useState, useEffect, useMemo, useCallback } from "react";
-import { Checkbox, FormLabel } from "@material-ui/core";
+import { Grid, Checkbox, CircularProgress, FormLabel } from "@material-ui/core";
 import MUIDataTable, { debounceSearchRender } from "mui-datatables";
-import { LoadingText } from "../../../components";
 import PageTitle from "../../../components/PageTitle";
-import { useResourcesApi, useDictionariesApi } from "../../../api";
+import { useResourcesApi } from "../../../api";
 import { defaultResourcesFilters } from "../../../constants/resourcesConstants";
-import { useTranslation } from "react-i18next";
-import ActionButton from "./ActionButton";
-import SecondaryActionsGroup from "./SecondaryActionsGroup";
-import {
-  EditOutlined,
-  FileCopyOutlined,
-  OpenInNewOutlined
-} from "@material-ui/icons";
-import { useToast } from "../../../context/ToastContext";
 
 const __ROWS_PER_PAGE_OPTIONS = [10, 20, 50, 100];
-const __RESOURCE_NAME_MAX_LENGTH = 35;
 
 const ResourcesContainer = () => {
-  const [state, setState] = useState({
+  const [state, setState] = useState({ loaded: false, loadedPages: null });
-    pageSize: 10,
-    totalCount: 0,
-    values: []
-  });
-  const [loading, setLoading] = useState(false);
   const [filters, setFilters] = useState({ ...defaultResourcesFilters });
-  const [resourceCategories, setResourceCategories] = useState([]);
-
-  const { t } = useTranslation();
-  const { info } = useToast();
   const { getResources } = useResourcesApi();
-  const { getResourceCategories } = useDictionariesApi();
 
   useEffect(() => {
-    getResourceCategories().then((r) => setResourceCategories(r));
+    if (state.loadedPages && state.loadedPages.includes(filters.page)) return;
-  }, [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,
-          ...resources,
+          ...data,
-          values: filters.loadedPages
+          values: prev?.values ? [...prev.values, ...data.values] : data.values,
-            ? [...prev.values, ...resources.values]
-            : resources.values
-        }));
-
-        setFilters((prev) => ({
-          ...prev,
           loadedPages: prev?.loadedPages
-            ? [...prev.loadedPages, resources.page]
+            ? [...prev.loadedPages, data.page]
-            : [resources.page]
+            : [data.page]
         }));
-
-        setLoading(false);
       }
     });
-  }, [getResources, filters]);
+  }, [getResources, filters, state.loadedPages]);
-
-  const categoryFilterOptions = useMemo(
-    () => resourceCategories.map((z) => z.categoryName),
-    [resourceCategories]
-  );
-
-  const actions = useMemo(
-    () => [
-      {
-        code: "edit",
-        effect: () => alert("edit"),
-        icon: EditOutlined,
-        tooltip: t("Generic.Edit"),
-        top: true
-      },
-      {
-        code: "copy-url",
-        effect: (_event, resource) => {
-          navigator.clipboard.writeText(resource.url);
-          info(t("Resource.List.Actions.LinkCopiedToClipboard"));
-        },
-        icon: FileCopyOutlined,
-        tooltip: t("Resource.List.Actions.CopyUrl"),
-        top: true
-      },
-      {
-        code: "open-in-new-tab",
-        effect: (event, resource) => {
-          window.open(resource.url, "_blank");
-          event.preventDefault();
-        },
-        icon: OpenInNewOutlined,
-        tooltip: t("Generic.OpenInNewTab"),
-        top: false
-      }
-    ],
-    [t, info]
-  );
 
   const columns = useMemo(
     () => [
       {
-        label: t("Resource.Code"),
+        label: "Code",
         name: "resourceCode",
         options: {
           display: true,
           draggable: true,
-          download: true,
+          download: false,
           print: false,
           searchable: true,
           sort: true,
           customFilterListOptions: {
-            render: (v) =>
+            render: (v) => (v ? `Code contains: ${v}` : [])
-              v ? t("Resource.List.Filters.Code", { value: v }) : []
           },
           filter: true,
           filterType: "textField",
@@ -128,27 +55,17 @@ const ResourcesContainer = () => {
         }
       },
       {
-        label: t("Resource.Name"),
+        label: "Name",
         name: "resourceName",
         options: {
           display: true,
           draggable: true,
-          download: true,
+          download: false,
           print: false,
           searchable: true,
           sort: true,
-          customBodyRenderLite: (dataIndex, _rowIndex) => {
-            if (loading) return;
-            const value = state.values[dataIndex].resourceName;
-            const formattedValue =
-              value.length > __RESOURCE_NAME_MAX_LENGTH
-                ? `${value.substring(0, __RESOURCE_NAME_MAX_LENGTH + 1)}[...]`
-                : value;
-            return formattedValue;
-          },
           customFilterListOptions: {
-            render: (v) =>
+            render: (v) => (v ? `Name contains: ${v}` : [])
-              v ? t("Resource.List.Filters.Name", { value: v }) : []
           },
           filter: true,
           filterType: "textField",
@@ -160,34 +77,31 @@ const ResourcesContainer = () => {
         }
       },
       {
-        label: t("Resource.Category"),
+        label: "Category",
-        name: "categoryName",
+        name: "categoryId",
         options: {
           display: true,
           draggable: true,
-          download: true,
+          download: false,
           print: false,
           searchable: true,
           sort: true,
           filter: true,
-          customFilterListOptions: {
-            render: (v) => t("Resource.List.Filters.Category", { value: v })
-          },
           filterType: "dropdown",
           filterOptions: {
-            names: categoryFilterOptions,
             logic: (_prop, _filterValue, _row) => false
           },
+          filterList: [],
           hint: undefined
         }
       },
       {
-        label: t("Resource.Secured"),
+        label: "Secured",
         name: "secured",
         options: {
           display: true,
           draggable: true,
-          download: true,
+          download: false,
           print: false,
           searchable: true,
           sort: true,
@@ -204,7 +118,7 @@ const ResourcesContainer = () => {
           customFilterListOptions: {
             render: (v) => {
               const checked = v[0];
-              return checked ? <span>{t("Resource.Secured")}</span> : [];
+              return checked ? <span>Secured</span> : [];
             }
           },
           filter: true,
@@ -214,7 +128,7 @@ const ResourcesContainer = () => {
             display: (filterList, onChange, index, column) => {
               return (
                 <div>
-                  <FormLabel>{t("Resource.Secured")}</FormLabel>
+                  <FormLabel>Secured</FormLabel>
                   <Checkbox
                     color="primary"
                     checked={filterList[index][0] || false}
@@ -227,165 +141,78 @@ const ResourcesContainer = () => {
               );
             }
           },
+          filterList: undefined,
           hint: undefined
         }
-      },
-      {
-        label: "",
-        name: "actions",
-        options: {
-          customHeadLabelRender: (_options) => "",
-          display: true,
-          draggable: false,
-          download: false,
-          print: false,
-          searchable: false,
-          sort: false,
-          customBodyRenderLite: (dataIndex, _rowIndex) => {
-            if (loading) return;
-            const resource = state.values[dataIndex];
-            return (
-              <>
-                {actions
-                  .filter((a) => a.top === true)
-                  .map((action) => (
-                    <ActionButton
-                      key={`resource-${resource.resourceId}-${action.code}`}
-                      action={action}
-                      resource={resource}
-                    />
-                  ))}
-                <SecondaryActionsGroup
-                  resource={resource}
-                  actions={actions.filter((a) => a.top === false)}
-                />
-              </>
-            );
-          },
-          setCellProps: (_cellValue, _rowIndex, _columnIndex) => ({
-            style: {
-              paddingTop: "0px",
-              paddingBottom: "0px",
-              textAlign: "right"
-            }
-          }),
-          filter: false
-        }
       }
     ],
-    [loading, state.values, categoryFilterOptions, t, actions]
+    []
   );
 
-  const changeFilters = useCallback((obj) => {
+  const handleResetFilters = useCallback(() => {
-    const keys = Object.keys(obj);
+    setFilters((prev) => ({ ...prev, ...defaultResourcesFilters }));
-    const isPageChange = keys.length === 1 && keys[0] === "page";
+  }, [setFilters]);
-    if (!isPageChange) {
-      const { page, loadedPages } = defaultResourcesFilters;
-      obj = { ...obj, page, loadedPages };
-    }
-
-    setFilters((prev) => ({ ...prev, ...obj }));
-  }, []);
-
-  const getCategoryId = useCallback(
-    (name) => {
-      const category = resourceCategories.find((z) => z.categoryName === name);
-      return category?.categoryId;
-    },
-    [resourceCategories]
-  );
 
   const handleFilterChange = useCallback(
-    (changedColumn, filterList, type, changedColumnIndex, _displayData) => {
+    (changedColumn, filterList, type, changedColumnIndex, displayData) => {
       if (type === "reset") {
-        changeFilters(defaultResourcesFilters);
+        handleResetFilters();
         return;
       }
-
       const filterValue = filterList[changedColumnIndex][0];
-
+      setFilters((prev) => ({
-      if (changedColumn === "categoryName") {
+        ...prev,
-        const categoryId = filterValue
+        [changedColumn]: filterValue
-          ? getCategoryId(filterValue)
+      }));
-          : filterValue;
-        changeFilters({ categoryId });
-        return;
-      }
-
-      changeFilters({ [changedColumn]: filterValue });
     },
-    [changeFilters, getCategoryId]
+    [handleResetFilters]
   );
 
   return (
     <>
-      <PageTitle title={t("Resource.List.Title")} />
+      <PageTitle title="ResourcesX" />
-
+      {state.loaded === false ? (
-      <MUIDataTable
+        <CircularProgress size={26} />
-        title={t("Resource.List.SubTitle")}
+      ) : (
-        columns={columns}
+        <MUIDataTable
-        data={state.values}
+          title="Resources"
-        options={{
+          columns={columns}
-          filterType: "textField",
+          data={state.values ?? []}
-          expandableRows: false,
+          options={{
-          print: false,
+            filterType: "textField",
-          selectableRows: "none",
+            expandableRows: false,
-          page: filters.page - 1,
+            print: false,
-          rowsPerPage: state.pageSize,
+            selectableRows: "none",
-          rowsPerPageOptions: __ROWS_PER_PAGE_OPTIONS,
+            rowsPerPage: state.pageSize,
-          count: state.totalCount,
+            rowsPerPageOptions: __ROWS_PER_PAGE_OPTIONS,
-          customSearchRender: debounceSearchRender(500),
+            count: state.totalCount,
-          onChangePage: (currentPage) =>
+            customSearchRender: debounceSearchRender(500),
-            changeFilters({ page: currentPage + 1 }),
+            onChangePage: (currentPage) => {
-          onChangeRowsPerPage: (numberOfRows) =>
+              setFilters((prev) => ({ ...prev, page: currentPage + 1 }));
-            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 ? (
-                <LoadingText lines={15} />
-              ) : (
-                <>{t("Generic.Table.Body.NoMatch")}</>
-              )
             },
-            filter: {
+            onChangeRowsPerPage: (numberOfRows) => {
-              all: t("Generic.Table.Filter.All"),
+              setFilters((prev) => ({ ...prev, pageSize: numberOfRows }));
-              reset: t("Generic.Table.Filter.Reset"),
-              title: t("Generic.Table.Filter.Title")
             },
-            pagination: {
+            onColumnSortChange: (changedColumn, direction) =>
-              displayRows: t("Generic.Table.Pagination.DisplayRows"),
+              setFilters((prev) => ({
-              next: t("Generic.Table.Pagination.Next"),
+                ...prev,
-              previous: t("Generic.Table.Pagination.Previous"),
+                sortBy: changedColumn,
-              rowsPerPage: t("Generic.Table.Pagination.RowsPerPage")
+                sortDirection: direction
-            },
+              })),
-            toolbar: {
+            onFilterChange: handleFilterChange,
-              downloadCsv: t("Generic.Table.Toolbar.DownloadCsv"),
+            onSearchChange: (text) =>
-              filterTable: t("Generic.Table.Toolbar.FilterTable"),
+              setFilters((prev) => ({ ...prev, fullTextSearch: text })),
-              print: t("Generic.Table.Toolbar.Print"),
+            customSort: (data) => data,
-              search: t("Generic.Table.Toolbar.Search"),
+            customSearch: () => true,
-              viewColumns: t("Generic.Table.Toolbar.ViewColumns")
+            setFilterChipProps: (_colIndex, _colName, _data) => {
-            },
+              return {
-            viewColumns: {
+                color: "primary",
-              title: t("Generic.Table.ViewColumns.Title")
+                variant: "outlined"
+              };
             }
-          }
+          }}
-        }}
+        />
-      />
+      )}
     </>
   );
 };

src/features/resources/components/SecondaryActionsGroup.js

@@ -1,43 +0,0 @@
-import React, { useState } from "react";
-import { Menu } from "@material-ui/core";
-import ActionButton from "./ActionButton";
-import { MoreHorizOutlined } from "@material-ui/icons";
-import { useTranslation } from "react-i18next";
-
-const SecondaryActionsGroup = ({ resource, actions }) => {
-  const [menuAnchor, setMenuAnchor] = useState(null);
-  const { t } = useTranslation();
-
-  return (
-    <>
-      <ActionButton
-        key={`resource-${resource.resourceId}-more`}
-        action={{
-          code: "more",
-          effect: (event) => setMenuAnchor(event.currentTarget),
-          icon: MoreHorizOutlined,
-          tooltip: t("Generic.More"),
-          top: true
-        }}
-        resource={resource}
-      />
-      <Menu
-        id={`resource-${resource.resourceId}-secondary-actions-menu`}
-        key={`resource-${resource.resourceId}-secondary-actions-menu`}
-        anchorEl={menuAnchor}
-        open={Boolean(menuAnchor)}
-        onClose={() => setMenuAnchor(null)}
-      >
-        {actions.map((action) => (
-          <ActionButton
-            key={`resource-${resource.resourceId}-${action.code}`}
-            action={action}
-            resource={resource}
-          />
-        ))}
-      </Menu>
-    </>
-  );
-};
-
-export default SecondaryActionsGroup;