Tom Butcher
044abf32a8
- Introduced DashboardOverviewPage and DashboardOverviewFlexColumns components to streamline the layout and management of dashboard sections, improving overall organization and usability. - Replaced individual collapsible sections in Finance, Inventory, Production, and Sales overviews with a unified structure, enhancing maintainability and consistency across the dashboard. - Added ActionsButton component for improved action handling and keyboard shortcuts, enhancing user interaction capabilities. - Updated styles in App.css to support new drag-and-drop functionality and layout features, ensuring a cohesive visual experience. - Refactored existing components to utilize the new structure, improving code clarity and reducing redundancy.
102 lines
2.6 KiB
JavaScript
102 lines
2.6 KiB
JavaScript
import { useContext } from 'react'
|
|
import { Button, Space } from 'antd'
|
|
import CheckIcon from '../../Icons/CheckIcon.jsx'
|
|
import XMarkIcon from '../../Icons/XMarkIcon.jsx'
|
|
import EditIcon from '../../Icons/EditIcon.jsx'
|
|
import KeyboardShortcut from './KeyboardShortcut.jsx'
|
|
import PropTypes from 'prop-types'
|
|
import { AuthContext } from '../context/AuthContext'
|
|
import { useActions } from '../context/ActionsContext'
|
|
import { getModelByName } from '../../../database/ObjectModels'
|
|
import { hasActionPermission } from '../../../database/permissions'
|
|
|
|
const EditButtons = ({
|
|
isEditing,
|
|
handleUpdate,
|
|
cancelEditing,
|
|
startEditing,
|
|
formValid,
|
|
disabled,
|
|
loading,
|
|
type,
|
|
requirePermission = true
|
|
}) => {
|
|
const { userProfile } = useContext(AuthContext)
|
|
const { currentObjectType } = useActions()
|
|
const modelType = type || currentObjectType
|
|
const model = modelType ? getModelByName(modelType) : null
|
|
const denied =
|
|
requirePermission && model
|
|
? !hasActionPermission(userProfile, model, 'edit')
|
|
: false
|
|
const editDisabled = disabled || denied
|
|
|
|
return isEditing ? (
|
|
<Space size='small'>
|
|
<KeyboardShortcut
|
|
shortcut='alt+s'
|
|
hint='ALT S'
|
|
onTrigger={() => {
|
|
if (!editDisabled && !loading && formValid) {
|
|
handleUpdate()
|
|
}
|
|
}}
|
|
>
|
|
<Button
|
|
icon={<CheckIcon />}
|
|
type='primary'
|
|
onClick={handleUpdate}
|
|
loading={loading}
|
|
disabled={loading || !formValid || editDisabled}
|
|
/>
|
|
</KeyboardShortcut>
|
|
<KeyboardShortcut
|
|
shortcut='alt+c'
|
|
hint='ALT C'
|
|
onTrigger={() => {
|
|
if (!disabled && !loading) {
|
|
cancelEditing()
|
|
}
|
|
}}
|
|
>
|
|
<Button
|
|
icon={<XMarkIcon />}
|
|
onClick={cancelEditing}
|
|
disabled={loading || disabled}
|
|
/>
|
|
</KeyboardShortcut>
|
|
</Space>
|
|
) : (
|
|
<KeyboardShortcut
|
|
shortcut='alt+e'
|
|
hint='ALT E'
|
|
onTrigger={() => {
|
|
if (!editDisabled && !loading) {
|
|
startEditing()
|
|
}
|
|
}}
|
|
>
|
|
<Button
|
|
icon={<EditIcon />}
|
|
onClick={startEditing}
|
|
loading={loading}
|
|
disabled={editDisabled || loading}
|
|
/>
|
|
</KeyboardShortcut>
|
|
)
|
|
}
|
|
|
|
EditButtons.propTypes = {
|
|
isEditing: PropTypes.bool.isRequired,
|
|
handleUpdate: PropTypes.func.isRequired,
|
|
cancelEditing: PropTypes.func.isRequired,
|
|
startEditing: PropTypes.func.isRequired,
|
|
formValid: PropTypes.bool.isRequired,
|
|
disabled: PropTypes.any,
|
|
loading: PropTypes.bool.isRequired,
|
|
type: PropTypes.string,
|
|
requirePermission: PropTypes.bool
|
|
}
|
|
|
|
export default EditButtons
|