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) => (
+
+ ))}
+
+ >
+ );
+ },
+ 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;