From 89cf1fcd76f0589ef1cd0d3b39907c2d523e2967 Mon Sep 17 00:00:00 2001 From: Tudor Stanciu Date: Mon, 12 Dec 2022 01:57:23 +0200 Subject: [PATCH] SecondaryActionsGroup --- public/locales/en/translations.json | 9 ++- public/locales/ro/translations.json | 9 ++- .../components/ResourcesContainer.js | 70 +++++-------------- .../components/SecondaryActionsGroup.js | 42 ++++++++++- 4 files changed, 76 insertions(+), 54 deletions(-) diff --git a/public/locales/en/translations.json b/public/locales/en/translations.json index cdd4b20..ea13de5 100644 --- a/public/locales/en/translations.json +++ b/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." } } } diff --git a/public/locales/ro/translations.json b/public/locales/ro/translations.json index 50d0a7c..8a3a6b2 100644 --- a/public/locales/ro/translations.json +++ b/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." } } } diff --git a/src/features/resources/components/ResourcesContainer.js b/src/features/resources/components/ResourcesContainer.js index 5b9990b..46e1184 100644 --- a/src/features/resources/components/ResourcesContainer.js +++ b/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) => { - window.open(resource.url, "_blank"); - event.preventDefault(); + effect: (_event, resource) => { + navigator.clipboard.writeText(resource.url); + info(t("Resource.List.Actions.LinkCopiedToClipboard")); }, icon: FileCopyOutlined, - tooltip: t("Resource.Actions.CopyUrl"), - top: true - }, - { - code: "more", - effect: (event) => setSecondaryActionsAnchor(event.currentTarget), - icon: MoreHorizOutlined, - tooltip: t("Resource.Actions.More"), + tooltip: t("Resource.List.Actions.CopyUrl"), top: true }, { @@ -101,20 +95,11 @@ const ResourcesContainer = () => { event.preventDefault(); }, icon: OpenInNewOutlined, - tooltip: t("Resource.Actions.OpenInNewTab"), + tooltip: t("Generic.OpenInNewTab"), top: false } ], - [t] - ); - - const topActions = useMemo(() => actions.filter((a) => a.top === true), [ - actions - ]); - - const secondaryActions = useMemo( - () => actions.filter((a) => a.top === false), - [actions] + [t, info] ); const columns = useMemo( @@ -261,28 +246,19 @@ const ResourcesContainer = () => { const resource = state.values[dataIndex]; return ( <> - {topActions.map((action) => ( - - ))} - setSecondaryActionsAnchor(null)} - > - {secondaryActions.map((action) => ( + {actions + .filter((a) => a.top === true) + .map((action) => ( ))} - + a.top === false)} + /> ); }, @@ -297,15 +273,7 @@ const ResourcesContainer = () => { } } ], - [ - loading, - state.values, - categoryFilterOptions, - t, - topActions, - secondaryActions, - secondaryActionsAnchor - ] + [loading, state.values, categoryFilterOptions, t, actions] ); const changeFilters = useCallback((obj) => { diff --git a/src/features/resources/components/SecondaryActionsGroup.js b/src/features/resources/components/SecondaryActionsGroup.js index 4b6ffb0..57848f2 100644 --- a/src/features/resources/components/SecondaryActionsGroup.js +++ b/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 ( + <> + setMenuAnchor(event.currentTarget), + icon: MoreHorizOutlined, + tooltip: t("Generic.More"), + top: true + }} + resource={resource} + /> + setMenuAnchor(null)} + > + {actions.map((action) => ( + + ))} + + + ); +}; export default SecondaryActionsGroup;