SecondaryActionsGroup

public/locales/en/translations.json

@@ -38,7 +38,10 @@
       "ViewColumns": {
         "Title": "Show columns"
       }
-    }
+    },
+    "Edit": "Edit",
+    "More": "More",
+    "OpenInNewTab": "Open in new tab"
   },
   "Menu": {
     "Dashboard": "Dashboard",
@@ -78,6 +81,10 @@
         "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

@@ -29,7 +29,10 @@
       "ViewColumns": {
         "Title": "Afișați coloanele"
       }
-    }
+    },
+    "Edit": "Editează",
+    "More": "Mai mult",
+    "OpenInNewTab": "Deschide într-un tab nou"
   },
   "Menu": {
     "Dashboard": "Dashboard",
@@ -69,6 +72,10 @@
         "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/features/resources/components/ResourcesContainer.js

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useMemo, useCallback } from "react";
-import { Checkbox, FormLabel, Menu } from "@material-ui/core";
+import { Checkbox, FormLabel } from "@material-ui/core";
 import MUIDataTable, { debounceSearchRender } from "mui-datatables";
 import { LoadingText } from "../../../components";
 import PageTitle from "../../../components/PageTitle";
@@ -7,12 +7,13 @@ import { useResourcesApi, useDictionariesApi } from "../../../api";
 import { defaultResourcesFilters } from "../../../constants/resourcesConstants";
 import { useTranslation } from "react-i18next";
 import ActionButton from "./ActionButton";
+import SecondaryActionsGroup from "./SecondaryActionsGroup";
 import {
   EditOutlined,
   FileCopyOutlined,
-  MoreHorizOutlined,
   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;
@@ -26,9 +27,9 @@ 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 { info } = useToast();
   const { getResources } = useResourcesApi();
   const { getResourceCategories } = useDictionariesApi();
 
@@ -74,24 +75,17 @@ const ResourcesContainer = () => {
         code: "edit",
         effect: () => alert("edit"),
         icon: EditOutlined,
-        tooltip: t("Resource.Actions.Edit"),
+        tooltip: t("Generic.Edit"),
         top: true
       },
       {
         code: "copy-url",
-        effect: (event, resource) => {
+        effect: (_event, resource) => {
-          window.open(resource.url, "_blank");
+          navigator.clipboard.writeText(resource.url);
-          event.preventDefault();
+          info(t("Resource.List.Actions.LinkCopiedToClipboard"));
         },
         icon: FileCopyOutlined,
-        tooltip: t("Resource.Actions.CopyUrl"),
+        tooltip: t("Resource.List.Actions.CopyUrl"),
-        top: true
-      },
-      {
-        code: "more",
-        effect: (event) => setSecondaryActionsAnchor(event.currentTarget),
-        icon: MoreHorizOutlined,
-        tooltip: t("Resource.Actions.More"),
         top: true
       },
       {
@@ -101,20 +95,11 @@ const ResourcesContainer = () => {
           event.preventDefault();
         },
         icon: OpenInNewOutlined,
-        tooltip: t("Resource.Actions.OpenInNewTab"),
+        tooltip: t("Generic.OpenInNewTab"),
         top: false
       }
     ],
-    [t]
+    [t, info]
-  );
-
-  const topActions = useMemo(() => actions.filter((a) => a.top === true), [
-    actions
-  ]);
-
-  const secondaryActions = useMemo(
-    () => actions.filter((a) => a.top === false),
-    [actions]
   );
 
   const columns = useMemo(
@@ -261,28 +246,19 @@ const ResourcesContainer = () => {
             const resource = state.values[dataIndex];
             return (
               <>
-                {topActions.map((action) => (
+                {actions
-                  <ActionButton
+                  .filter((a) => a.top === true)
-                    key={`resource-${resource.resourceId}-${action.code}`}
+                  .map((action) => (
-                    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>
+                <SecondaryActionsGroup
+                  resource={resource}
+                  actions={actions.filter((a) => a.top === false)}
+                />
               </>
             );
           },
@@ -297,15 +273,7 @@ const ResourcesContainer = () => {
         }
       }
     ],
-    [
+    [loading, state.values, categoryFilterOptions, t, actions]
-      loading,
-      state.values,
-      categoryFilterOptions,
-      t,
-      topActions,
-      secondaryActions,
-      secondaryActionsAnchor
-    ]
   );
 
   const changeFilters = useCallback((obj) => {

src/features/resources/components/SecondaryActionsGroup.js

@@ -1,3 +1,43 @@
-const SecondaryActionsGroup = () => {};
+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;