From e7126b18352953794166a445c0cc92143bc82ff2 Mon Sep 17 00:00:00 2001 From: Hossein Date: Thu, 3 Jun 2021 16:48:16 -0400 Subject: [PATCH] Implement Multi Select Values (#415) --- webapp/src/blocks/card.ts | 8 +- .../src/components/cardDetail/cardDetail.scss | 1 + .../src/components/properties/multiSelect.tsx | 64 +++++++++++++++ .../src/components/propertyValueElement.tsx | 35 +++++++- webapp/src/components/table/table.scss | 2 +- webapp/src/components/table/table.tsx | 2 +- webapp/src/csvExporter.ts | 2 +- webapp/src/mutator.ts | 35 +++++--- webapp/src/octoUtils.tsx | 6 +- webapp/src/viewModel/boardTree.ts | 6 +- .../__snapshots__/propertyMenu.test.tsx.snap | 15 ++++ webapp/src/widgets/buttons/iconButton.scss | 4 + webapp/src/widgets/buttons/iconButton.tsx | 2 + webapp/src/widgets/label.scss | 2 + webapp/src/widgets/label.tsx | 3 +- webapp/src/widgets/propertyMenu.tsx | 5 ++ webapp/src/widgets/valueSelector.scss | 37 ++++++++- webapp/src/widgets/valueSelector.tsx | 80 +++++++++++++------ 18 files changed, 257 insertions(+), 52 deletions(-) create mode 100644 webapp/src/components/properties/multiSelect.tsx diff --git a/webapp/src/blocks/card.ts b/webapp/src/blocks/card.ts index 02721cbda..622a6d732 100644 --- a/webapp/src/blocks/card.ts +++ b/webapp/src/blocks/card.ts @@ -7,7 +7,7 @@ import {IBlock, MutableBlock} from './block' interface Card extends IBlock { readonly icon: string readonly isTemplate: boolean - readonly properties: Readonly> + readonly properties: Readonly> readonly contentOrder: readonly string[] duplicate(): MutableCard @@ -28,10 +28,10 @@ class MutableCard extends MutableBlock implements Card { this.fields.isTemplate = value } - get properties(): Record { - return this.fields.properties as Record + get properties(): Record { + return this.fields.properties as Record } - set properties(value: Record) { + set properties(value: Record) { this.fields.properties = value } diff --git a/webapp/src/components/cardDetail/cardDetail.scss b/webapp/src/components/cardDetail/cardDetail.scss index 59049a333..ff4bb05a1 100644 --- a/webapp/src/components/cardDetail/cardDetail.scss +++ b/webapp/src/components/cardDetail/cardDetail.scss @@ -23,6 +23,7 @@ width: 100%; .MenuWrapper { position: relative; + align-self: center; } } diff --git a/webapp/src/components/properties/multiSelect.tsx b/webapp/src/components/properties/multiSelect.tsx new file mode 100644 index 000000000..86ab3bef9 --- /dev/null +++ b/webapp/src/components/properties/multiSelect.tsx @@ -0,0 +1,64 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. + +import React from 'react' + +import {IPropertyOption, IPropertyTemplate} from '../../blocks/board' + +import Label from '../../widgets/label' + +import ValueSelector from '../../widgets/valueSelector' + +type Props = { + emptyValue: string; + propertyTemplate: IPropertyTemplate; + propertyValue: string | string[]; + onChange: (value: string | string[]) => void; + onChangeColor: (option: IPropertyOption, color: string) => void; + onDeleteOption: (option: IPropertyOption) => void; + onCreate: (newValue: string, currentValues: IPropertyOption[]) => void; + onDeleteValue: (valueToDelete: IPropertyOption, currentValues: IPropertyOption[]) => void; + isEditable: boolean; +} + +const MultiSelectProperty = (props: Props): JSX.Element => { + const {propertyTemplate, emptyValue, propertyValue, isEditable, onChange, onChangeColor, onDeleteOption, onCreate, onDeleteValue} = props + + const values = Array.isArray(propertyValue) ? + propertyValue.map((v) => propertyTemplate.options.find((o) => o!.id === v)).filter((v): v is IPropertyOption => Boolean(v)) : + [] + + if (!isEditable) { + return ( +
+ {values.map((v) => ( + + ))} +
+ ) + } + + return ( + onDeleteValue(valueToRemove, values)} + onCreate={(newValue) => onCreate(newValue, values)} + /> + ) +} + +export default MultiSelectProperty diff --git a/webapp/src/components/propertyValueElement.tsx b/webapp/src/components/propertyValueElement.tsx index f35813836..26d3cbd98 100644 --- a/webapp/src/components/propertyValueElement.tsx +++ b/webapp/src/components/propertyValueElement.tsx @@ -12,11 +12,13 @@ import {Utils} from '../utils' import {BoardTree} from '../viewModel/boardTree' import Editable from '../widgets/editable' import ValueSelector from '../widgets/valueSelector' + import Label from '../widgets/label' import EditableDayPicker from '../widgets/editableDayPicker' import Switch from '../widgets/switch' +import MultiSelectProperty from './properties/multiSelect' import URLProperty from './properties/link/link' type Props = { @@ -60,6 +62,33 @@ const PropertyValueElement = (props:Props): JSX.Element => { } } + if (propertyTemplate.type === 'multiSelect') { + return ( + mutator.changePropertyValue(card, propertyTemplate.id, newValue)} + onChangeColor={(option: IPropertyOption, colorId: string) => mutator.changePropertyOptionColor(boardTree!.board, propertyTemplate, option, colorId)} + onDeleteOption={(option: IPropertyOption) => mutator.deletePropertyOption(boardTree!, propertyTemplate, option)} + onCreate={ + async (newValue, currentValues) => { + const option: IPropertyOption = { + id: Utils.createGuid(), + value: newValue, + color: 'propColorDefault', + } + currentValues.push(option) + await mutator.insertPropertyOption(boardTree!, propertyTemplate, option, 'add property option') + mutator.changePropertyValue(card, propertyTemplate.id, currentValues.map((v) => v.id)) + } + } + onDeleteValue={(valueToDelete, currentValues) => mutator.changePropertyValue(card, propertyTemplate.id, currentValues.filter((currentValue) => currentValue.id !== valueToDelete.id).map((currentValue) => currentValue.id))} + /> + ) + } + if (propertyTemplate.type === 'select') { let propertyColorCssClassName = '' const cardPropertyValue = propertyTemplate.options.find((o) => o.id === propertyValue) @@ -107,7 +136,7 @@ const PropertyValueElement = (props:Props): JSX.Element => { } else if (propertyTemplate.type === 'url') { return ( mutator.changePropertyValue(card, propertyTemplate.id, value)} onCancel={() => setValue(propertyValue)} @@ -123,7 +152,7 @@ const PropertyValueElement = (props:Props): JSX.Element => { return ( mutator.changePropertyValue(card, propertyTemplate.id, newValue)} /> ) @@ -152,7 +181,7 @@ const PropertyValueElement = (props:Props): JSX.Element => { mutator.changePropertyValue(card, propertyTemplate.id, value)} onCancel={() => setValue(propertyValue)} diff --git a/webapp/src/components/table/table.scss b/webapp/src/components/table/table.scss index 2d7f903cc..a85925d14 100644 --- a/webapp/src/components/table/table.scss +++ b/webapp/src/components/table/table.scss @@ -9,7 +9,7 @@ padding: 8px; min-height: 32px; font-size: 14px; - line-height: 20px; + line-height: 30px; position: relative; text-overflow: ellipsis; diff --git a/webapp/src/components/table/table.tsx b/webapp/src/components/table/table.tsx index b76371519..51c3a7ba1 100644 --- a/webapp/src/components/table/table.tsx +++ b/webapp/src/components/table/table.tsx @@ -82,7 +82,7 @@ const Table = (props: Props) => { return } - displayValue = OctoUtils.propertyDisplayValue(card, card.properties[columnID], template!, props.intl) || '' + displayValue = (OctoUtils.propertyDisplayValue(card, card.properties[columnID], template!, props.intl) || '') as string if (template.type === 'select') { displayValue = displayValue.toUpperCase() } diff --git a/webapp/src/csvExporter.ts b/webapp/src/csvExporter.ts index dcfc766d9..1dae75652 100644 --- a/webapp/src/csvExporter.ts +++ b/webapp/src/csvExporter.ts @@ -67,7 +67,7 @@ class CsvExporter { row.push(`"${this.encodeText(card.title)}"`) visibleProperties.forEach((template) => { const propertyValue = card.properties[template.id] - const displayValue = OctoUtils.propertyDisplayValue(card, propertyValue, template, intl) || '' + const displayValue = (OctoUtils.propertyDisplayValue(card, propertyValue, template, intl) || '') as string if (template.type === 'number') { const numericValue = propertyValue ? Number(propertyValue).toString() : '' row.push(numericValue) diff --git a/webapp/src/mutator.ts b/webapp/src/mutator.ts index e9e666f73..405645561 100644 --- a/webapp/src/mutator.ts +++ b/webapp/src/mutator.ts @@ -372,7 +372,7 @@ class Mutator { await this.updateBlock(newBoard, board, 'change option color') } - async changePropertyValue(card: Card, propertyId: string, value?: string, description = 'change property') { + async changePropertyValue(card: Card, propertyId: string, value?: string | string[], description = 'change property') { const newCard = new MutableCard(card) if (value) { newCard.properties[propertyId] = value @@ -383,6 +383,10 @@ class Mutator { } async changePropertyType(boardTree: BoardTree, propertyTemplate: IPropertyTemplate, type: PropertyType) { + if (propertyTemplate.type === type) { + return + } + const {board} = boardTree const newBoard = new MutableBoard(board) @@ -392,27 +396,40 @@ class Mutator { const oldBlocks: IBlock[] = [board] const newBlocks: IBlock[] = [newBoard] - if (propertyTemplate.type === 'select') { - // Map select to their values + + if (propertyTemplate.type === 'select' || propertyTemplate.type === 'multiSelect') { // If the old type was either select or multiselect + const isNewTypeSelectOrMulti = type === 'select' || type === 'multiSelect' + for (const card of boardTree.allCards) { - const oldValue = card.properties[propertyTemplate.id] + const oldValue = Array.isArray(card.properties[propertyTemplate.id]) ? + (card.properties[propertyTemplate.id].length > 0 && card.properties[propertyTemplate.id][0]) : + card.properties[propertyTemplate.id] + if (oldValue) { - const newValue = propertyTemplate.options.find((o) => o.id === oldValue)?.value + const newValue = isNewTypeSelectOrMulti ? + propertyTemplate.options.find((o) => o.id === oldValue)?.id : + propertyTemplate.options.find((o) => o.id === oldValue)?.value const newCard = new MutableCard(card) + if (newValue) { - newCard.properties[propertyTemplate.id] = newValue + newCard.properties[propertyTemplate.id] = type === 'multiSelect' ? [newValue] : newValue } else { // This was an invalid select option, so delete it delete newCard.properties[propertyTemplate.id] } + newBlocks.push(newCard) oldBlocks.push(card) } + + if (isNewTypeSelectOrMulti) { + newTemplate.options = propertyTemplate.options + } } - } else if (type === 'select') { + } else if (type === 'select' || type === 'multiSelect') { // if the new type is either select or multiselect // Map values to new template option IDs for (const card of boardTree.allCards) { - const oldValue = card.properties[propertyTemplate.id] + const oldValue = card.properties[propertyTemplate.id] as string if (oldValue) { let option = newTemplate.options.find((o) => o.value === oldValue) if (!option) { @@ -425,7 +442,7 @@ class Mutator { } const newCard = new MutableCard(card) - newCard.properties[propertyTemplate.id] = option.id + newCard.properties[propertyTemplate.id] = type === 'multiSelect' ? [option.id] : option.id newBlocks.push(newCard) oldBlocks.push(card) diff --git a/webapp/src/octoUtils.tsx b/webapp/src/octoUtils.tsx index 468387f8a..80013c9a9 100644 --- a/webapp/src/octoUtils.tsx +++ b/webapp/src/octoUtils.tsx @@ -16,8 +16,8 @@ import {FilterCondition} from './blocks/filterClause' import {Utils} from './utils' class OctoUtils { - static propertyDisplayValue(block: IBlock, propertyValue: string | undefined, propertyTemplate: IPropertyTemplate, intl: IntlShape): string | undefined { - let displayValue: string | undefined + static propertyDisplayValue(block: IBlock, propertyValue: string | string[] | undefined, propertyTemplate: IPropertyTemplate, intl: IntlShape): string | string[] | undefined { + let displayValue: string | string[] | undefined switch (propertyTemplate.type) { case 'select': { // The property value is the id of the template @@ -40,7 +40,7 @@ class OctoUtils { } case 'date': { if (propertyValue) { - displayValue = Utils.displayDate(new Date(parseInt(propertyValue, 10)), intl) + displayValue = Utils.displayDate(new Date(parseInt(propertyValue as string, 10)), intl) } break } diff --git a/webapp/src/viewModel/boardTree.ts b/webapp/src/viewModel/boardTree.ts index 1b2eb337d..cc07aa28a 100644 --- a/webapp/src/viewModel/boardTree.ts +++ b/webapp/src/viewModel/boardTree.ts @@ -216,7 +216,9 @@ class MutableBoardTree implements BoardTree { if (option?.value.toLowerCase().includes(searchText)) { return true } - } else if (propertyValue.toLowerCase().includes(searchText)) { + + // TODO: Add search capability for multi-select values BIG BOYY + } else if ((propertyValue as string).toLowerCase().includes(searchText)) { return true } } @@ -425,7 +427,7 @@ class MutableBoardTree implements BoardTree { return this.titleOrCreatedOrder(a, b) } - result = aValue.localeCompare(bValue) + result = (aValue as string).localeCompare(bValue as string) } if (result === 0) { diff --git a/webapp/src/widgets/__snapshots__/propertyMenu.test.tsx.snap b/webapp/src/widgets/__snapshots__/propertyMenu.test.tsx.snap index 00a633829..ffbc142ba 100644 --- a/webapp/src/widgets/__snapshots__/propertyMenu.test.tsx.snap +++ b/webapp/src/widgets/__snapshots__/propertyMenu.test.tsx.snap @@ -157,6 +157,21 @@ exports[`widgets/PropertyMenu should match snapshot 1`] = ` class="noicon" /> +
+
+
+ Multi Select +
+
+
diff --git a/webapp/src/widgets/buttons/iconButton.scss b/webapp/src/widgets/buttons/iconButton.scss index b6e56a48e..0496309ef 100644 --- a/webapp/src/widgets/buttons/iconButton.scss +++ b/webapp/src/widgets/buttons/iconButton.scss @@ -20,4 +20,8 @@ height: 32px; } } + + &.margin-left { + margin-left: 5px; + } } diff --git a/webapp/src/widgets/buttons/iconButton.tsx b/webapp/src/widgets/buttons/iconButton.tsx index d1cb0e8f4..86c12baad 100644 --- a/webapp/src/widgets/buttons/iconButton.tsx +++ b/webapp/src/widgets/buttons/iconButton.tsx @@ -9,6 +9,7 @@ type Props = { title?: string icon?: React.ReactNode className?: string + onMouseDown?: (e: React.MouseEvent) => void } function IconButton(props: Props): JSX.Element { @@ -19,6 +20,7 @@ function IconButton(props: Props): JSX.Element { return (
diff --git a/webapp/src/widgets/label.scss b/webapp/src/widgets/label.scss index 5a511f493..3f4fd6868 100644 --- a/webapp/src/widgets/label.scss +++ b/webapp/src/widgets/label.scss @@ -9,6 +9,8 @@ text-transform: uppercase; font-weight: 600; font-size: 13px; + margin-right: 5px; + margin-bottom: 5px; input { line-height: 20px; diff --git a/webapp/src/widgets/label.tsx b/webapp/src/widgets/label.tsx index b0f4745fd..287c66d36 100644 --- a/webapp/src/widgets/label.tsx +++ b/webapp/src/widgets/label.tsx @@ -8,13 +8,14 @@ type Props = { color?: string title?: string children: React.ReactNode + classNames?: string } // Switch is an on-off style switch / checkbox function Label(props: Props): JSX.Element { return ( {props.children} diff --git a/webapp/src/widgets/propertyMenu.tsx b/webapp/src/widgets/propertyMenu.tsx index ce7adceb3..16780f132 100644 --- a/webapp/src/widgets/propertyMenu.tsx +++ b/webapp/src/widgets/propertyMenu.tsx @@ -119,6 +119,11 @@ const PropertyMenu = React.memo((props: Props) => { name={typeDisplayName(intl, 'select')} onClick={() => props.onTypeChanged('select')} /> + props.onTypeChanged('multiSelect')} + /> .Label { + max-width: 600px; + overflow: hidden; + text-overflow: ellipsis; + display: inline-block; + + +} + +.octo-property-value > .Label { + max-width: 200px; + overflow: hidden; + text-overflow: ellipsis; + display: inline-block; +} diff --git a/webapp/src/widgets/valueSelector.tsx b/webapp/src/widgets/valueSelector.tsx index 932f29b28..7983bad01 100644 --- a/webapp/src/widgets/valueSelector.tsx +++ b/webapp/src/widgets/valueSelector.tsx @@ -1,6 +1,6 @@ // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. // See LICENSE.txt for license information. -import React, {useState} from 'react' +import React from 'react' import {useIntl} from 'react-intl' import {ActionMeta, ValueType, FormatOptionLabelMeta} from 'react-select' import CreatableSelect from 'react-select/creatable' @@ -14,32 +14,52 @@ import MenuWrapper from './menuWrapper' import IconButton from './buttons/iconButton' import OptionsIcon from './icons/options' import DeleteIcon from './icons/delete' +import CloseIcon from './icons/close' import Label from './label' import './valueSelector.scss' type Props = { options: IPropertyOption[] - value?: IPropertyOption + value?: IPropertyOption | IPropertyOption[] emptyValue: string onCreate: (value: string) => void - onChange: (value: string) => void + onChange: (value: string | string[]) => void onChangeColor: (option: IPropertyOption, color: string) => void onDeleteOption: (option: IPropertyOption) => void + isMulti?: boolean + onDeleteValue?: (value: IPropertyOption) => void } type LabelProps = { option: IPropertyOption - meta: FormatOptionLabelMeta + meta: FormatOptionLabelMeta onChangeColor: (option: IPropertyOption, color: string) => void onDeleteOption: (option: IPropertyOption) => void + onDeleteValue?: (value: IPropertyOption) => void } const ValueSelectorLabel = React.memo((props: LabelProps): JSX.Element => { - const {option, meta} = props + const {option, onDeleteValue, meta} = props const intl = useIntl() if (meta.context === 'value') { - return + return ( + + ) } return (
@@ -71,22 +91,9 @@ const ValueSelectorLabel = React.memo((props: LabelProps): JSX.Element => { }) function ValueSelector(props: Props): JSX.Element { - const [activated, setActivated] = useState(false) - - if (!activated) { - return ( -
setActivated(true)} - > - -
- ) - } return ( ({ @@ -102,12 +109,12 @@ function ValueSelector(props: Props): JSX.Element { ...provided, background: state.isFocused ? 'rgba(var(--main-fg), 0.1)' : 'rgb(var(--main-bg))', color: state.isFocused ? 'rgb(var(--main-fg))' : 'rgb(var(--main-fg))', - padding: '2px 8px', + padding: '8px', }), control: (): CSSObject => ({ border: 0, width: '100%', - margin: '4px 0 0 0', + margin: '0', }), valueContainer: (provided: CSSObject): CSSObject => ({ ...provided, @@ -131,22 +138,42 @@ function ValueSelector(props: Props): JSX.Element { ...provided, overflowY: 'unset', }), + multiValue: (provided: CSSObject): CSSObject => ({ + ...provided, + margin: 0, + padding: 0, + backgroundColor: 'transparent', + }), + multiValueLabel: (provided: CSSObject): CSSObject => ({ + ...provided, + display: 'flex', + paddingLeft: 0, + padding: 0, + }), + multiValueRemove: (): CSSObject => ({ + display: 'none', + }), }} - formatOptionLabel={(option: IPropertyOption, meta: FormatOptionLabelMeta) => ( + formatOptionLabel={(option: IPropertyOption, meta: FormatOptionLabelMeta) => ( )} className='ValueSelector' options={props.options} getOptionLabel={(o: IPropertyOption) => o.value} getOptionValue={(o: IPropertyOption) => o.id} - onChange={(value: ValueType, action: ActionMeta): void => { + onChange={(value: ValueType, action: ActionMeta): void => { if (action.action === 'select-option') { - props.onChange((value as IPropertyOption).id) + if (Array.isArray(value)) { + props.onChange((value as IPropertyOption[]).map((option) => option.id)) + } else { + props.onChange((value as IPropertyOption).id) + } } else if (action.action === 'clear') { props.onChange('') } @@ -156,7 +183,8 @@ function ValueSelector(props: Props): JSX.Element { value={props.value} closeMenuOnSelect={true} placeholder={props.emptyValue} - defaultMenuIsOpen={true} + hideSelectedOptions={false} + defaultMenuIsOpen={false} /> ) }