in-=progress add new option

This commit is contained in:
Harshil Sharma 2023-01-23 17:24:46 +05:30
parent 1be39c0ff4
commit 684c1b09a7
4 changed files with 62 additions and 14 deletions

View file

@ -127,6 +127,7 @@ const ShareBoardButton = (props: Props) => {
<EditStatusPropertyDialog
valueCategories={valueCategories}
onClose={() => setShowShareDialog(false)}
onUpdate={(updatedValue) => console.log(updatedValue)}
/>
}
</div>

View file

@ -41,9 +41,17 @@
text-transform: uppercase;
}
.PlusIcon {
.addBtnWrapper {
margin-left: auto;
cursor: pointer;
border-radius: 4px;
width: 24px;
height: 24px;
text-align: center;
&:hover {
background: rgba(var(--center-channel-color-rgb), 0.1);
}
}
}
@ -65,8 +73,8 @@
.Label {
width: max-content;
margin-top: 0;
margin-right: auto;
max-width: 150px;
margin-right: auto;
span {
overflow: hidden;

View file

@ -1,7 +1,7 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React from 'react'
import React, {useEffect, useState} from 'react'
import {FormattedMessage} from 'react-intl'
import {useCallback} from 'preact/hooks'
@ -19,25 +19,39 @@ import {IPropertyOption} from '../../../blocks/board'
import DragHandle from '../../../widgets/icons/dragHandle'
import EditIcon from '../../../widgets/icons/edit'
import EditableLabel from './editableLabel/editableLabel'
export type StatusCategoryEmptyState = {
icon: JSX.Element
color: string
text: JSX.Element
}
export type EditablePropertyOption = IPropertyOption & {
editing?: boolean
}
export type StatusCategory = {
id: string
title: string
options: IPropertyOption[]
options: EditablePropertyOption[]
emptyState: StatusCategoryEmptyState
}
type Props = {
valueCategories: StatusCategory[]
onClose: () => void
onUpdate: (updatedValueCategories: StatusCategory[]) => void
}
const EditStatusPropertyDialog = (props: Props): JSX.Element => {
const [valueCategories, setValueCategories] = useState<StatusCategory[]>([])
useEffect(() => {
console.log('setting: ' + props.valueCategories.length)
setValueCategories(props.valueCategories)
}, [props.valueCategories])
const title = (
<FormattedMessage
id='statusProperty.configDialog.title'
@ -45,7 +59,7 @@ const EditStatusPropertyDialog = (props: Props): JSX.Element => {
/>
)
const generateValueRow = (option: IPropertyOption, index: number): JSX.Element => {
const generateValueRow = (option: EditablePropertyOption, index: number): JSX.Element => {
return (
<Draggable
draggableId={option.id}
@ -64,13 +78,10 @@ const EditStatusPropertyDialog = (props: Props): JSX.Element => {
>
<DragHandle/>
</div>
<Label
key={option.id}
color={option.color}
title={option.value}
>
<span>{option.value}</span>
</Label>
<EditableLabel
option={option}
editing={option.editing}
/>
<div className={`colorEditor ${option.color} withBorder`}/>
<EditIcon/>
</div>
@ -98,8 +109,29 @@ const EditStatusPropertyDialog = (props: Props): JSX.Element => {
)
}
const handleAddCategoryValue = (categoryID: string) => {
console.log('asdasd')
const categoryIndex = valueCategories.findIndex((valueCategory) => valueCategory.id === categoryID)
if (categoryIndex < 0) {
return
}
const newOption: EditablePropertyOption = {
id: '',
value: '',
color: 'propColorOrange',
editing: true,
}
const updatedValueCategories = [...valueCategories]
updatedValueCategories[categoryIndex].options.unshift(newOption)
setValueCategories(updatedValueCategories)
}
const onDragEndHandler = () => {}
console.log(valueCategories)
return (
<ActionDialog
onClose={props.onClose}
@ -115,7 +147,7 @@ const EditStatusPropertyDialog = (props: Props): JSX.Element => {
</div>
<div className='categorySwimlanes'>
<DragDropContext onDragEnd={onDragEndHandler}>
{props.valueCategories.map((valueCategory) => {
{valueCategories.map((valueCategory) => {
return (
<div
key={valueCategory.id}
@ -126,7 +158,12 @@ const EditStatusPropertyDialog = (props: Props): JSX.Element => {
{valueCategory.title}
</div>
<InfoIcon/>
<PlusIcon/>
<div
className='addBtnWrapper'
onClick={() => handleAddCategoryValue(valueCategory.id)}
>
<PlusIcon/>
</div>
</div>
<Droppable droppableId={`categorySwimlane_${valueCategory.id}`}>
{(provided) => (

View file

@ -11,6 +11,7 @@ type Props = {
title?: string
children: React.ReactNode
className?: string
editing?: boolean
}
function Label(props: Props): JSX.Element {
@ -18,6 +19,7 @@ function Label(props: Props): JSX.Element {
if (props.color && props.color in Constants.menuColors) {
color = props.color
}
return (
<span
className={`Label ${color} ${props.className ? props.className : ''}`}