SecondaryActionsGroup

master
Tudor Stanciu 2022-12-12 01:57:23 +02:00
parent 909f4df42a
commit 89cf1fcd76
4 changed files with 76 additions and 54 deletions

View File

@ -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."
}
}
}

View File

@ -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."
}
}
}

View File

@ -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) => (
{actions
.filter((a) => a.top === true)
.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}
<SecondaryActionsGroup
resource={resource}
actions={actions.filter((a) => a.top === false)}
/>
))}
</Menu>
</>
);
},
@ -297,15 +273,7 @@ const ResourcesContainer = () => {
}
}
],
[
loading,
state.values,
categoryFilterOptions,
t,
topActions,
secondaryActions,
secondaryActionsAnchor
]
[loading, state.values, categoryFilterOptions, t, actions]
);
const changeFilters = useCallback((obj) => {

View File

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