luisgulo/focalboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Cleanup

Browse source
This commit is contained in:
Harshil Sharma 2023-01-27 14:07:02 +05:30
parent b32757ff6f
commit cd6db61930
3 changed files with 115 additions and 81 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

102
webapp/src/components/centerPanel.tsx
View file

@ -41,6 +41,14 @@ import {UserConfigPatch} from '../user'
import octoClient from '../octoClient'
import CheckIcon from '../widgets/icons/checkIcon'
import ClockOutline from '../widgets/icons/clockOutline'
import BlackCheckboxOutline from '../widgets/icons/blackCheckboxOutline'
import {Constants} from '../constants'
import ShareBoardButton from './shareBoard/shareBoardButton'
import ShareBoardLoginButton from './shareBoard/shareBoardLoginButton'
@ -61,6 +69,65 @@ import Gallery from './gallery/gallery'
import {BoardTourSteps, FINISHED, TOUR_BOARD, TOUR_CARD} from './onboardingTour'
import ShareBoardTourStep from './onboardingTour/shareBoard/shareBoard'
import EditStatusPropertyDialog, {StatusCategory} from './standardProperties/statusProperty/editStatusDialog'
// this is the sample data for a dummy status property configration dialog
// and will be removed after the PR is tested and merged
const initialValueCategoryValue: StatusCategory[] = [
{
id: 'category_id_1',
title: 'Not Started',
options: [
{id: 'status_id_1', value: 'Pending Design', color: 'propColorPurple'},
{id: 'status_id_2', value: 'TODO', color: 'propColorYellow'},
{id: 'status_id_3', value: 'Pending Specs', color: 'propColorGray'},
],
emptyState: {
icon: (<BlackCheckboxOutline/>),
color: '--sys-dnd-indicator-rgb',
text: {
id: 'statusProperty.configDialog.todo.emptyText',
defaultMessage: 'Drag statuses here to consider tasks with these statuses “Not Started”',
},
},
},
{
id: 'category_id_2',
title: 'In progress',
options: [
{id: 'status_id_4', value: 'In Progress', color: 'propColorBrown'},
{id: 'status_id_5', value: 'In Review', color: 'propColorRed'},
{id: 'status_id_6', value: 'In QA', color: 'propColorPink'},
{id: 'status_id_7', value: 'Awaiting Cherrypick', color: 'propColorOrange'},
],
emptyState: {
icon: (<ClockOutline/>),
color: '--away-indicator-rgb',
text: {
id: 'statusProperty.configDialog.inProgress.emptyText',
defaultMessage: 'Drag statuses here to consider tasks with these statuses “in progress”',
},
},
},
{
id: 'category_id_3',
title: 'Completed',
options: [
{id: 'status_id_20', value: 'Done', color: 'propColorPink'},
{id: 'status_id_21', value: 'Branch Cut', color: 'propColorGreen'},
{id: 'status_id_22', value: 'Released', color: 'propColorDefault'},
],
emptyState: {
icon: (<CheckIcon/>),
color: '--online-indicator-rgb',
text: {
id: 'statusProperty.configDialog.complete.emptyText',
defaultMessage: 'Drag statuses here to consider tasks with these statuses ”Done”',
},
},
},
]
type Props = {
clientConfig?: ClientConfig
board: Board
@ -90,6 +157,32 @@ const CenterPanel = (props: Props) => {
const boardUsers = useAppSelector(getBoardUsers)
const dispatch = useAppDispatch()
// STATUS PROPOERTY EDIT DIALOG TEST CODE STARTS HERE
// SHOULD BE REMOVED AFTER MERGE
const [valueCategories, setValueCategories] = useState<StatusCategory[]>(initialValueCategoryValue)
const [showEditStatusPropertyDialog, setShowEditStatusPropertyDialog] = useState(false)
const handleStatusPropertyShortcut = (e: KeyboardEvent) => {
if (Utils.cmdOrCtrlPressed(e) && e.shiftKey && Utils.isKeyPressed(e, Constants.keyCodes.I)) {
if (!e.altKey) {
e.preventDefault()
setShowEditStatusPropertyDialog((show) => !show)
}
}
}
useEffect(() => {
document.addEventListener('keydown', handleStatusPropertyShortcut)
// cleanup function
return () => {
document.removeEventListener('keydown', handleStatusPropertyShortcut)
}
}, [])
// STATUS PROPOERTY EDIT DIALOG TEST CODE ENDS HERE
const clientConfig = useAppSelector<ClientConfig>(getClientConfig)
// empty dependency array yields behavior like `componentDidMount`, it only runs _once_
@ -514,6 +607,15 @@ const CenterPanel = (props: Props) => {
showHiddenCardNotification={showHiddenCardCountNotification}
hiddenCardCountNotificationHandler={hiddenCardCountNotifyHandler}
/>
{
showEditStatusPropertyDialog &&
<EditStatusPropertyDialog
valueCategories={valueCategories}
onClose={() => setShowEditStatusPropertyDialog(false)}
onUpdate={(updatedValue) => setValueCategories(updatedValue)}
/>
}
</div>
)
}

80
webapp/src/components/shareBoard/shareBoardButton.tsx
View file

@ -2,9 +2,7 @@
// See LICENSE.txt for license information.
import React, {useState} from 'react'
import {FormattedMessage, IntlShape, useIntl} from 'react-intl'
import EditStatusPropertyDialog, {StatusCategory} from '../standardProperties/statusProperty/editStatusDialog'
import {FormattedMessage} from 'react-intl'
import Button from '../../widgets/buttons/button'
import TelemetryClient, {TelemetryActions, TelemetryCategory} from '../../telemetry/telemetryClient'
@ -16,77 +14,14 @@ import {BoardTypeOpen} from '../../blocks/board'
import './shareBoardButton.scss'
import ClockOutline from '../../widgets/icons/clockOutline'
import CheckIcon from '../../widgets/icons/check'
import BlackCheckboxOutline from '../../widgets/icons/blackCheckboxOutline'
import ShareBoardDialog from './shareBoard'
const getInitialValueCategoryValue: StatusCategory[] = [
{
id: 'category_id_1',
title: 'Not Started',
options: [
{id: 'status_id_1', value: 'Pending Design', color: 'propColorPurple'},
{id: 'status_id_2', value: 'TODO', color: 'propColorYellow'},
{id: 'status_id_3', value: 'Pending Specs', color: 'propColorGray'},
],
emptyState: {
icon: (<BlackCheckboxOutline/>),
color: '--sys-dnd-indicator-rgb',
text: {
id: 'statusProperty.configDialog.todo.emptyText',
defaultMessage: 'Drag statuses here to consider tasks with these statuses “Not Started”',
},
},
},
{
id: 'category_id_2',
title: 'In progress',
options: [
{id: 'status_id_4', value: 'In Progress', color: 'propColorBrown'},
{id: 'status_id_5', value: 'In Review', color: 'propColorRed'},
{id: 'status_id_6', value: 'In QA', color: 'propColorPink'},
{id: 'status_id_7', value: 'Awaiting Cherrypick', color: 'propColorOrange'},
],
emptyState: {
icon: (<ClockOutline/>),
color: '--away-indicator-rgb',
text: {
id: 'statusProperty.configDialog.inProgress.emptyText',
defaultMessage: 'Drag statuses here to consider tasks with these statuses “in progress”',
},
},
},
{
id: 'category_id_3',
title: 'Completed',
options: [
{id: 'status_id_20', value: 'Done', color: 'propColorPink'},
{id: 'status_id_21', value: 'Branch Cut', color: 'propColorGreen'},
{id: 'status_id_22', value: 'Released', color: 'propColorDefault'},
],
emptyState: {
icon: (<CheckIcon/>),
color: '--online-indicator-rgb',
text: {
id: 'statusProperty.configDialog.complete.emptyText',
defaultMessage: 'Drag statuses here to consider tasks with these statuses ”Done”',
},
},
},
]
type Props = {
enableSharedBoards: boolean
}
const ShareBoardButton = (props: Props) => {
const [showShareDialog, setShowShareDialog] = useState(false)
const board = useAppSelector(getCurrentBoard)
const intl = useIntl()
const [valueCategories, setValueCategories] = useState<StatusCategory[]>(getInitialValueCategoryValue)
const iconForBoardType = () => {
if (board.type === BoardTypeOpen) {
@ -112,20 +47,11 @@ const ShareBoardButton = (props: Props) => {
defaultMessage='Share'
/>
</Button>
{/* {showShareDialog &&
{showShareDialog &&
<ShareBoardDialog
onClose={() => setShowShareDialog(false)}
enableSharedBoards={props.enableSharedBoards}
/>} */}
{
showShareDialog &&
<EditStatusPropertyDialog
valueCategories={valueCategories}
onClose={() => setShowShareDialog(false)}
onUpdate={(updatedValue) => setValueCategories(updatedValue)}
/>
}
/>}
</div>
)
}

14
webapp/src/components/standardProperties/statusProperty/editStatusDialog.tsx
View file

@ -52,13 +52,18 @@ type Props = {
const EditStatusPropertyDialog = (props: Props): JSX.Element => {
const [valueCategories, setValueCategories] = useState<StatusCategory[]>([])
const [focusedValueID, setFocusedValueID] = useState<string>()
const intl = useIntl()
useEffect(() => {
// we save a deel copy of props as user actions like
// DND and adding, editing, changing coloror deleting the values
// affect this local copy first and only if the user clicks the
// "Save" button, are the changes propogated to the prop change callback function/
// Direcxtly modifying the props value can cause the value of variable
// from the parent component to be affected as well in some cases
setValueCategories(cloneDeep(props.valueCategories))
}, [props.valueCategories])
const intl = useIntl()
const title = (
<FormattedMessage
id='statusProperty.configDialog.title'
@ -85,6 +90,9 @@ const EditStatusPropertyDialog = (props: Props): JSX.Element => {
const oldOptionvalue = updatedValueCategories[categoryIndex].options[valueIndex]
if (oldOptionvalue.value === newOptionValue.value && newOptionValue.value === '') {
// if used add a new value, but then leaves it empty by, for example,
// clicking outside, we delete that value as its the fasted way for the user
// to remove an accidently added value
updatedValueCategories[categoryIndex].options.splice(valueIndex, 1)
} else {
updatedValueCategories[categoryIndex].options[valueIndex] = newOptionValue
@ -142,12 +150,10 @@ const EditStatusPropertyDialog = (props: Props): JSX.Element => {
const sourceCategoryIndex = updatedValues.findIndex((valueCategory) => valueCategory.id === source.droppableId)
const destinationCategoryIndex = updatedValues.findIndex((valueCategory) => valueCategory.id === destination.droppableId)
const draggedObject = valueCategories[sourceCategoryIndex].options[source.index]
updatedValues[sourceCategoryIndex].options.splice(source.index, 1)
updatedValues[destinationCategoryIndex].options.splice(destination.index, 0, draggedObject)
setValueCategories(updatedValues)
}