From 08d78fb91f3120452e868e75254497097b179eb8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Roger=20Boixader=20G=C3=BCell?= Date: Thu, 25 Apr 2024 07:57:22 +0200 Subject: [PATCH] feat: Add to registry the possibility to override the default actions in items list. --- CHANGELOG.md | 4 ++ package.json | 2 +- src/guillo-gmi/components/panel/actions.tsx | 8 ++-- .../components/selected_items_actions.tsx | 14 ++++--- src/guillo-gmi/hooks/useRegistry.tsx | 42 +++++++++++++++++++ src/guillo-gmi/lib/helpers.ts | 13 +++--- 6 files changed, 67 insertions(+), 16 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3eee515..1914dc5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,7 @@ +0.32.0 +------ +- feat: Add to registry the possibility to override the default actions in items list. + 0.31.0 ------ - chore: Improve typing in registry diff --git a/package.json b/package.json index f00952b..b2a15ee 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "version": "0.31.0", + "version": "0.32.0", "repository": { "type": "git", "url": "git@github.com:guillotinaweb/guillotina_react.git" diff --git a/src/guillo-gmi/components/panel/actions.tsx b/src/guillo-gmi/components/panel/actions.tsx index d2af61a..81ac05f 100644 --- a/src/guillo-gmi/components/panel/actions.tsx +++ b/src/guillo-gmi/components/panel/actions.tsx @@ -1,12 +1,14 @@ import { useTraversal } from '../../contexts' import { useIntl } from 'react-intl' -import { getActionsObject } from '../../lib/helpers' import { Fragment } from 'react' export function PanelActions() { const traversal = useTraversal() const intl = useIntl() - const ACTIONS_OBJECT = getActionsObject(intl) + const ACTIONS_OBJECT = traversal.registry.getActionsList( + traversal.context['@type'], + false + ) const hasPerm = (perms: string[]) => { return perms.some((perm) => traversal.hasPerm(perm)) @@ -32,7 +34,7 @@ export function PanelActions() { onAction(actionKeyTyped) }} > - {actionObject.text} + {intl.formatMessage(actionObject.text)} ) } diff --git a/src/guillo-gmi/components/selected_items_actions.tsx b/src/guillo-gmi/components/selected_items_actions.tsx index e8d5cc6..c9b56d0 100644 --- a/src/guillo-gmi/components/selected_items_actions.tsx +++ b/src/guillo-gmi/components/selected_items_actions.tsx @@ -3,7 +3,6 @@ import Dropdown from './input/dropdown' import { Checkbox } from './input/checkbox' import { useTraversal } from '../contexts' import { useIntl } from 'react-intl' -import { getActionsObject } from '../lib/helpers' import { SearchItem } from '../types/guillotina' const ItemsActionsCtx = createContext<{ @@ -32,9 +31,11 @@ export function ItemsActionsProvider({ items, children, }: PropsItemsActionsProvider) { - const intl = useIntl() - const actions = getActionsObject(intl, true) const traversal = useTraversal() + const actions = traversal.registry.getActionsList( + traversal.context['@type'], + true + ) const [selected, setSelected] = useState<{ all: boolean [key: string]: boolean @@ -134,12 +135,15 @@ export function ItemCheckbox({ item, dataTest }: PropsItemCheckbox) { */ export function ItemsActionsDropdown() { const intl = useIntl() - const ACTIONS_OBJECT = getActionsObject(intl, true) const traversal = useTraversal() + const ACTIONS_OBJECT = traversal.registry.getActionsList( + traversal.context['@type'], + true + ) const { selected, onAction } = useItemsActions() const disabled = Object.values(selected).every((v) => !v) const options = Object.keys(ACTIONS_OBJECT).map((action) => ({ - text: ACTIONS_OBJECT[action].text, + text: intl.formatMessage(ACTIONS_OBJECT[action].text), value: action, })) diff --git a/src/guillo-gmi/hooks/useRegistry.tsx b/src/guillo-gmi/hooks/useRegistry.tsx index 0a0525e..86a7bd4 100644 --- a/src/guillo-gmi/hooks/useRegistry.tsx +++ b/src/guillo-gmi/hooks/useRegistry.tsx @@ -36,6 +36,8 @@ import { RegistrySchema, } from '../types/guillotina' import { buildQs, parser } from '../lib/search' +import { MessageDescriptor } from 'react-intl' +import { getActionsObject } from '../lib/helpers' export interface RegistrySortValue { direction: 'asc' | 'des' @@ -87,6 +89,17 @@ export interface IRegistry { defaultSortValue: { [key: string]: RegistrySortValue } + actionsList: { + [key: string]: ( + multiple: boolean + ) => { + [key: string]: { + text: MessageDescriptor + perms: string[] + action: string + } + } + } } const registry: IRegistry = { @@ -149,6 +162,7 @@ const registry: IRegistry = { }, parseSearchQueryParamFunction: {}, defaultSortValue: {}, + actionsList: {}, } export interface IManageRegistry { @@ -173,6 +187,16 @@ export interface IManageRegistry { fallback?: RegistrySortValue ) => RegistrySortValue getSearchEngineQueryParamsFunction: (type: string) => string + getActionsList: ( + type: string, + multiple: boolean + ) => { + [key: string]: { + text: MessageDescriptor + perms: string[] + action: string + } + } } const getPathComponent = ( @@ -259,6 +283,23 @@ const getParsedSearchQueryParam = (query: string, type: string) => { return parsedFunction(query, type) } +const getActionsList = ( + type: string, + multiple: boolean +): { + [key: string]: { + text: MessageDescriptor + perms: string[] + action: string + } +} => { + const funcActionsList = registry.actionsList[type] + if (funcActionsList) { + return funcActionsList(multiple) + } + return getActionsObject(multiple) +} + export const defaultComponent = (context: GuillotinaCommonObject) => { return context.is_folderish ? FolderCtx : ItemCtx } @@ -292,6 +333,7 @@ export function useRegistry(data: Partial): IManageRegistry { getSchemas, getView, getSearchEngineQueryParamsFunction, + getActionsList, } } diff --git a/src/guillo-gmi/lib/helpers.ts b/src/guillo-gmi/lib/helpers.ts index f4cd485..6db261a 100644 --- a/src/guillo-gmi/lib/helpers.ts +++ b/src/guillo-gmi/lib/helpers.ts @@ -1,4 +1,4 @@ -import { IntlShape } from 'react-intl' +import { MessageDescriptor } from 'react-intl' import { genericMessages } from '../locales/generic_messages' import { IndexSignature } from '../types/global' @@ -59,27 +59,26 @@ export function sleep(ms: number): Promise { } export const getActionsObject = ( - intl: IntlShape, - multiple = false + multiple: boolean ): { [key: string]: { - text: string + text: MessageDescriptor perms: string[] action: string } } => ({ DELETE: { - text: intl.formatMessage(genericMessages.delete), + text: genericMessages.delete, perms: ['guillotina.DeleteContent'], action: multiple ? 'removeItems' : 'removeItem', }, MOVE: { - text: intl.formatMessage(genericMessages.move_to), + text: genericMessages.move_to, perms: ['guillotina.MoveContent'], action: multiple ? 'moveItems' : 'moveItem', }, COPY: { - text: intl.formatMessage(genericMessages.copy_to), + text: genericMessages.copy_to, perms: ['guillotina.DuplicateContent'], action: multiple ? 'copyItems' : 'copyItem', },