Skip to content

Commit

Permalink
refactored the WorkflowCard component
Browse files Browse the repository at this point in the history
  • Loading branch information
ValeriaMaltseva committed Dec 19, 2024
1 parent d87c13b commit 67ad9b2
Show file tree
Hide file tree
Showing 4 changed files with 101 additions and 64 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
/**
* Pimcore
*
* This source file is available under two different licenses:
* - Pimcore Open Core License (POCL)
* - Pimcore Commercial License (PCL)
* Full copyright and license information is available in
* LICENSE.md which is distributed with this source code.
*
* @copyright Copyright (c) Pimcore GmbH (http://www.pimcore.org)
* @license https://github.com/pimcore/studio-ui-bundle/blob/1.x/LICENSE.md POCL and PCL
*/

import React, { type ReactNode, useState, useEffect } from 'react'
import { useTranslation } from 'react-i18next'
import { Dropdown, type DropdownMenuProps } from '@Pimcore/components/dropdown/dropdown'
import { Button } from '@Pimcore/components/button/button'
import { useSubmitWorkflow } from '@Pimcore/modules/asset/editor/toolbar/workflow-log-modal/hooks/use-submit-workflow'
import { useWorkflow } from '@Pimcore/modules/asset/editor/toolbar/workflow-log-modal/hooks/use-workflow'
import { type IWorkflowCardProps } from '../../types'

export const DropdownButton = ({ workflow }: IWorkflowCardProps): ReactNode => {
const [items, setItems] = useState<DropdownMenuProps['items']>([])
const { t } = useTranslation()

const { submitWorkflowAction, submissionLoading } = useSubmitWorkflow(workflow.workflowName)
const { openModal } = useWorkflow()

const setWorkflowData = (): void => {
const items: DropdownMenuProps['items'] = []

workflow.allowedTransitions?.forEach((status) => {
items.push({
key: Number(items.length + 1).toString(),
label: t(`${status.label}`),
onClick: () => {
submitWorkflowAction(status.name, 'transition', workflow.workflowName, {})
}
})
})

workflow.globalActions?.forEach((status) => {
items.push({
key: Number(items.length + 1).toString(),
label: t(`${status.label}`),
onClick: () => {
openModal({ transition: 'global', action: status.name, workflowName: workflow.workflowName })
}
})
})

setItems(items)
}

useEffect(() => {
setWorkflowData()
}, [])

return (
<Dropdown
menu={ { items } }
placement="bottom"
>
{submissionLoading
? (
<Button
loading
type={ 'link' }
/>
)
: <Button>{t('component.workflow-card.action-btn')}</Button>}
</Dropdown>
)
}
20 changes: 20 additions & 0 deletions assets/js/src/core/components/workflow-card/types.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
/**
* Pimcore
*
* This source file is available under two different licenses:
* - Pimcore Open Core License (POCL)
* - Pimcore Commercial License (PCL)
* Full copyright and license information is available in
* LICENSE.md which is distributed with this source code.
*
* @copyright Copyright (c) Pimcore GmbH (http://www.pimcore.org)
* @license https://github.com/pimcore/studio-ui-bundle/blob/1.x/LICENSE.md POCL and PCL
*/

import type {
WorkflowDetails
} from '@Pimcore/modules/element/editor/shared-tab-manager/tabs/workflow/workflow-api-slice.gen'

export interface IWorkflowCardProps {
workflow: WorkflowDetails
}
67 changes: 4 additions & 63 deletions assets/js/src/core/components/workflow-card/workflow-card.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,78 +11,19 @@
* @license https://github.com/pimcore/studio-ui-bundle/blob/1.x/LICENSE.md POCL and PCL
*/

import React, { type ReactNode, useEffect } from 'react'
import React from 'react'
import { Badge, Card, Tag } from 'antd'
import {
type WorkflowDetails
} from '@Pimcore/modules/element/editor/shared-tab-manager/tabs/workflow/workflow-api-slice-enhanced'
import { useStyles } from '@Pimcore/components/workflow-card/workflow-card.styles'
import { useTranslation } from 'react-i18next'
import { Dropdown, type DropdownMenuProps } from '../dropdown/dropdown'
import { useSubmitWorkflow } from '@Pimcore/modules/asset/editor/toolbar/workflow-log-modal/hooks/use-submit-workflow'
import { useWorkflow } from '@Pimcore/modules/asset/editor/toolbar/workflow-log-modal/hooks/use-workflow'
import { Button } from '@Pimcore/components/button/button'

interface IWorkflowCardProps {
workflow: WorkflowDetails
}
import { DropdownButton } from './components/dropdown-button/dropdown-button'
import { type IWorkflowCardProps } from './types'

export const WorkflowCard = ({ workflow }: IWorkflowCardProps): React.JSX.Element => {
const { styles } = useStyles()
const { t } = useTranslation()
const { openModal } = useWorkflow()
const { submitWorkflowAction, submissionLoading } = useSubmitWorkflow(workflow.workflowName)

const DropdownButton = (): ReactNode => {
const [items, setItems] = React.useState<DropdownMenuProps['items']>([])

useEffect(() => {
const items: DropdownMenuProps['items'] = []

workflow.allowedTransitions?.forEach((status) => {
items.push({
key: Number(items.length + 1).toString(),
label: t(`${status.label}`),
onClick: () => {
submitWorkflowAction(status.name, 'transition', workflow.workflowName, {})
}
})
})

workflow.globalActions?.forEach((status) => {
items.push({
key: Number(items.length + 1).toString(),
label: t(`${status.label}`),
onClick: () => {
openModal({ transition: 'global', action: status.name, workflowName: workflow.workflowName })
}
})
})

setItems(items)
}, [])

return (
<Dropdown
menu={ { items } }
placement="bottom"
>
{submissionLoading
? (
<Button
loading
type={ 'link' }
/>
)
: <Button>{t('component.workflow-card.action-btn')}</Button>}
</Dropdown>
)
}

return (
<Card
className={ styles.workflowCard }
extra={ <DropdownButton /> }
extra={ <DropdownButton workflow={ workflow } /> }
title={ (
<>
<p>{workflow.workflowName}</p>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -1960,5 +1960,7 @@
"build/f349e03c-f9ea-47ba-9720-56541f1de1bf/../../../assets/dist/build/types/js/src/core/app/config/services/index.d.ts.map": "http://localhost:3030/build/f349e03c-f9ea-47ba-9720-56541f1de1bf/../../../assets/dist/build/types/js/src/core/app/config/services/index.d.ts.map",
"build/f349e03c-f9ea-47ba-9720-56541f1de1bf/../../../assets/dist/build/types/js/test-utils/jest-setup.d.ts.map": "http://localhost:3030/build/f349e03c-f9ea-47ba-9720-56541f1de1bf/../../../assets/dist/build/types/js/test-utils/jest-setup.d.ts.map",
"build/f349e03c-f9ea-47ba-9720-56541f1de1bf/../../../assets/dist/build/types/js/src/core/modules/asset/tree/index.d.ts.map": "http://localhost:3030/build/f349e03c-f9ea-47ba-9720-56541f1de1bf/../../../assets/dist/build/types/js/src/core/modules/asset/tree/index.d.ts.map",
"build/f349e03c-f9ea-47ba-9720-56541f1de1bf/../../../assets/dist/build/types/js/src/core/modules/icon-library/index.d.ts.map": "http://localhost:3030/build/f349e03c-f9ea-47ba-9720-56541f1de1bf/../../../assets/dist/build/types/js/src/core/modules/icon-library/index.d.ts.map"
"build/f349e03c-f9ea-47ba-9720-56541f1de1bf/../../../assets/dist/build/types/js/src/core/modules/icon-library/index.d.ts.map": "http://localhost:3030/build/f349e03c-f9ea-47ba-9720-56541f1de1bf/../../../assets/dist/build/types/js/src/core/modules/icon-library/index.d.ts.map",
"build/f349e03c-f9ea-47ba-9720-56541f1de1bf/../../../assets/dist/build/types/js/src/core/components/workflow-card/components/dropdown-button/dropdown-button.d.ts": "http://localhost:3030/build/f349e03c-f9ea-47ba-9720-56541f1de1bf/../../../assets/dist/build/types/js/src/core/components/workflow-card/components/dropdown-button/dropdown-button.d.ts",
"build/f349e03c-f9ea-47ba-9720-56541f1de1bf/../../../assets/dist/build/types/js/src/core/components/workflow-card/components/dropdown-button/dropdown-button.d.ts.map": "http://localhost:3030/build/f349e03c-f9ea-47ba-9720-56541f1de1bf/../../../assets/dist/build/types/js/src/core/components/workflow-card/components/dropdown-button/dropdown-button.d.ts.map"
}

0 comments on commit 67ad9b2

Please sign in to comment.