resources actions

notes/todo.txt

@@ -1,5 +1,3 @@
 - 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)

src/features/resources/components/ActionButton.js

@@ -0,0 +1,24 @@
+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,11 +1,18 @@
 import React, { useState, useEffect, useMemo, useCallback } from "react";
-import { Checkbox, FormLabel } from "@material-ui/core";
+import { Checkbox, FormLabel, Menu } 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 { defaultResourcesFilters } from "../../../constants/resourcesConstants";
 import { useTranslation } from "react-i18next";
+import ActionButton from "./ActionButton";
+import {
+  EditOutlined,
+  FileCopyOutlined,
+  MoreHorizOutlined,
+  OpenInNewOutlined
+} from "@material-ui/icons";
 
 const __ROWS_PER_PAGE_OPTIONS = [10, 20, 50, 100];
 const __RESOURCE_NAME_MAX_LENGTH = 35;
@@ -19,6 +26,7 @@ const ResourcesContainer = () => {
   const [loading, setLoading] = useState(false);
   const [filters, setFilters] = useState({ ...defaultResourcesFilters });
   const [resourceCategories, setResourceCategories] = useState([]);
+  const [secondaryActionsAnchor, setSecondaryActionsAnchor] = useState(null);
 
   const { t } = useTranslation();
   const { getResources } = useResourcesApi();
@@ -60,6 +68,55 @@ const ResourcesContainer = () => {
     [resourceCategories]
   );
 
+  const actions = useMemo(
+    () => [
+      {
+        code: "edit",
+        effect: () => alert("edit"),
+        icon: EditOutlined,
+        tooltip: t("Resource.Actions.Edit"),
+        top: true
+      },
+      {
+        code: "copy-url",
+        effect: (event, resource) => {
+          window.open(resource.url, "_blank");
+          event.preventDefault();
+        },
+        icon: FileCopyOutlined,
+        tooltip: t("Resource.Actions.CopyUrl"),
+        top: true
+      },
+      {
+        code: "more",
+        effect: (event) => setSecondaryActionsAnchor(event.currentTarget),
+        icon: MoreHorizOutlined,
+        tooltip: t("Resource.Actions.More"),
+        top: true
+      },
+      {
+        code: "open-in-new-tab",
+        effect: (event, resource) => {
+          window.open(resource.url, "_blank");
+          event.preventDefault();
+        },
+        icon: OpenInNewOutlined,
+        tooltip: t("Resource.Actions.OpenInNewTab"),
+        top: false
+      }
+    ],
+    [t]
+  );
+
+  const topActions = useMemo(() => actions.filter((a) => a.top === true), [
+    actions
+  ]);
+
+  const secondaryActions = useMemo(
+    () => actions.filter((a) => a.top === false),
+    [actions]
+  );
+
   const columns = useMemo(
     () => [
       {
@@ -187,9 +244,68 @@ const ResourcesContainer = () => {
           },
           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 (
+              <>
+                {topActions.map((action) => (
+                  <ActionButton
+                    key={`resource-${resource.resourceId}-${action.code}`}
+                    action={action}
+                    resource={resource}
+                  />
+                ))}
+                <Menu
+                  id={`resource-${resource.resourceId}-secondary-actions-menu`}
+                  key={`resource-${resource.resourceId}-secondary-actions-menu`}
+                  anchorEl={secondaryActionsAnchor}
+                  open={Boolean(secondaryActionsAnchor)}
+                  onClose={() => setSecondaryActionsAnchor(null)}
+                >
+                  {secondaryActions.map((action) => (
+                    <ActionButton
+                      key={`resource-${resource.resourceId}-${action.code}`}
+                      action={action}
+                      resource={resource}
+                    />
+                  ))}
+                </Menu>
+              </>
+            );
+          },
+          setCellProps: (_cellValue, _rowIndex, _columnIndex) => ({
+            style: {
+              paddingTop: "0px",
+              paddingBottom: "0px",
+              textAlign: "right"
+            }
+          }),
+          filter: false
+        }
       }
     ],
-    [loading, state.values, categoryFilterOptions, t]
+    [
+      loading,
+      state.values,
+      categoryFilterOptions,
+      t,
+      topActions,
+      secondaryActions,
+      secondaryActionsAnchor
+    ]
   );
 
   const changeFilters = useCallback((obj) => {
@@ -246,6 +362,7 @@ const ResourcesContainer = () => {
           expandableRows: false,
           print: false,
           selectableRows: "none",
+          page: filters.page - 1,
           rowsPerPage: state.pageSize,
           rowsPerPageOptions: __ROWS_PER_PAGE_OPTIONS,
           count: state.totalCount,

src/features/resources/components/SecondaryActionsGroup.js

@@ -0,0 +1,3 @@
+const SecondaryActionsGroup = () => {};
+
+export default SecondaryActionsGroup;