From 909f4df42a5945e1297bdf433488d3e21eab3050 Mon Sep 17 00:00:00 2001 From: Tudor Stanciu Date: Mon, 12 Dec 2022 01:24:22 +0200 Subject: [PATCH] resources actions --- notes/todo.txt | 2 - .../resources/components/ActionButton.js | 24 ++++ .../components/ResourcesContainer.js | 121 +++++++++++++++++- .../components/SecondaryActionsGroup.js | 3 + 4 files changed, 146 insertions(+), 4 deletions(-) create mode 100644 src/features/resources/components/ActionButton.js create mode 100644 src/features/resources/components/SecondaryActionsGroup.js diff --git a/notes/todo.txt b/notes/todo.txt index 4d00e5c..657b113 100644 --- a/notes/todo.txt +++ b/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) \ No newline at end of file diff --git a/src/features/resources/components/ActionButton.js b/src/features/resources/components/ActionButton.js new file mode 100644 index 0000000..89d2321 --- /dev/null +++ b/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 ( + + + action.effect(event, resource)} + > + + + + + ); +}); + +export default ActionButton; diff --git a/src/features/resources/components/ResourcesContainer.js b/src/features/resources/components/ResourcesContainer.js index 6cce288..5b9990b 100644 --- a/src/features/resources/components/ResourcesContainer.js +++ b/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) => ( + + ))} + setSecondaryActionsAnchor(null)} + > + {secondaryActions.map((action) => ( + + ))} + + + ); + }, + 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, diff --git a/src/features/resources/components/SecondaryActionsGroup.js b/src/features/resources/components/SecondaryActionsGroup.js new file mode 100644 index 0000000..4b6ffb0 --- /dev/null +++ b/src/features/resources/components/SecondaryActionsGroup.js @@ -0,0 +1,3 @@ +const SecondaryActionsGroup = () => {}; + +export default SecondaryActionsGroup;