diff --git a/libs/components/editor-blocks/src/blocks/group/scene-kanban/CardContainer.tsx b/libs/components/editor-blocks/src/blocks/group/scene-kanban/CardContainer.tsx index 3616c0d206..cd71b72666 100644 --- a/libs/components/editor-blocks/src/blocks/group/scene-kanban/CardContainer.tsx +++ b/libs/components/editor-blocks/src/blocks/group/scene-kanban/CardContainer.tsx @@ -41,6 +41,7 @@ const getKanbanColor = ( return DEFAULT_COLOR; } if ( + group.type === PropertyType.Status || group.type === PropertyType.Select || group.type === PropertyType.MultiSelect || group.type === DEFAULT_GROUP_ID diff --git a/libs/components/editor-core/src/block-pendant/pendant-modify-panel/Information.tsx b/libs/components/editor-core/src/block-pendant/pendant-modify-panel/Information.tsx index afd5bc5525..a8929f9e6b 100644 --- a/libs/components/editor-core/src/block-pendant/pendant-modify-panel/Information.tsx +++ b/libs/components/editor-core/src/block-pendant/pendant-modify-panel/Information.tsx @@ -4,7 +4,7 @@ import { ModifyPanelContentProps } from './types'; import { StyledDivider, StyledPopoverSubTitle } from '../StyledComponent'; import { BasicSelect } from './Select'; import { InformationProperty, InformationValue } from '../../recast-block'; -import { genInitialOptions, getPendantIconsConfigByName } from '../utils'; +import { generateInitialOptions, getPendantIconsConfigByName } from '../utils'; export default (props: ModifyPanelContentProps) => { const { onPropertyChange, onValueChange, initialValue, property } = props; @@ -38,7 +38,7 @@ export default (props: ModifyPanelContentProps) => { }} initialOptions={ propProperty?.emailOptions || - genInitialOptions( + generateInitialOptions( property?.type, getPendantIconsConfigByName('Email') ) @@ -66,7 +66,7 @@ export default (props: ModifyPanelContentProps) => { }} initialOptions={ propProperty?.phoneOptions || - genInitialOptions( + generateInitialOptions( property?.type, getPendantIconsConfigByName('Phone') ) @@ -94,7 +94,7 @@ export default (props: ModifyPanelContentProps) => { }} initialOptions={ propProperty?.locationOptions || - genInitialOptions( + generateInitialOptions( property?.type, getPendantIconsConfigByName('Location') ) diff --git a/libs/components/editor-core/src/block-pendant/pendant-modify-panel/Select.tsx b/libs/components/editor-core/src/block-pendant/pendant-modify-panel/Select.tsx index 6d0d1f26f9..b016437ac8 100644 --- a/libs/components/editor-core/src/block-pendant/pendant-modify-panel/Select.tsx +++ b/libs/components/editor-core/src/block-pendant/pendant-modify-panel/Select.tsx @@ -21,7 +21,7 @@ import { } from '@toeverything/components/ui'; import { HighLightIconInput } from './IconInput'; import { PendantConfig, IconNames, OptionIdType, OptionType } from '../types'; -import { genBasicOption } from '../utils'; +import { generateBasicOption } from '../utils'; type OptionItemType = { option: OptionType; @@ -66,7 +66,7 @@ export const BasicSelect = ({ const [selectIds, setSelectIds] = useState(initialValue); const insertOption = (insertId: OptionIdType) => { - const newOption = genBasicOption({ + const newOption = generateBasicOption({ index: options.length + 1, iconConfig, }); diff --git a/libs/components/editor-core/src/block-pendant/pendant-operation-panel/CreatePendantPanel.tsx b/libs/components/editor-core/src/block-pendant/pendant-operation-panel/CreatePendantPanel.tsx index b9d29cebe7..fa7d50bfba 100644 --- a/libs/components/editor-core/src/block-pendant/pendant-operation-panel/CreatePendantPanel.tsx +++ b/libs/components/editor-core/src/block-pendant/pendant-operation-panel/CreatePendantPanel.tsx @@ -1,5 +1,4 @@ import React, { useState, useEffect } from 'react'; -import { nanoid } from 'nanoid'; import { Input, Option, Select, Tooltip } from '@toeverything/components/ui'; import { HelpCenterIcon } from '@toeverything/components/icons'; import { AsyncBlock } from '../../editor'; @@ -15,13 +14,13 @@ import { StyledPopoverSubTitle, StyledPopoverWrapper, } from '../StyledComponent'; -import { genInitialOptions, getPendantConfigByType } from '../utils'; +import { + generateRandomFieldName, + generateInitialOptions, + getPendantConfigByType, +} from '../utils'; import { useOnCreateSure } from './hooks'; -const upperFirst = (str: string) => { - return `${str[0].toUpperCase()}${str.slice(1)}`; -}; - export const CreatePendantPanel = ({ block, onSure, @@ -35,7 +34,7 @@ export const CreatePendantPanel = ({ useEffect(() => { selectedOption && - setFieldName(upperFirst(`${selectedOption.type}#${nanoid(4)}`)); + setFieldName(generateRandomFieldName(selectedOption.type)); }, [selectedOption]); return ( @@ -93,7 +92,7 @@ export const CreatePendantPanel = ({ { return tempOptions.findIndex((o: OptionType) => o.id === id); }) - .filter(index => index != -1); + .filter(index => index !== -1); selectedId = selectedIndex.map((index: number) => { return options[index].id; }); @@ -130,7 +131,7 @@ export const getPendantIconsConfigByName = ( return pendantConfig[pendantName]; }; -export const genBasicOption = ({ +export const generateBasicOption = ({ index, iconConfig, name = '', @@ -159,22 +160,22 @@ export const genBasicOption = ({ /** * Status Pendant is a Select Pendant built-in some options * **/ -export const genInitialOptions = ( +export const generateInitialOptions = ( type: PendantTypes, iconConfig: PendantConfig ) => { if (type === PendantTypes.Status) { return [ - genBasicOption({ index: 0, iconConfig, name: 'No Started' }), - genBasicOption({ + generateBasicOption({ index: 0, iconConfig, name: 'No Started' }), + generateBasicOption({ index: 1, iconConfig, name: 'In Progress', }), - genBasicOption({ index: 2, iconConfig, name: 'Complete' }), + generateBasicOption({ index: 2, iconConfig, name: 'Complete' }), ]; } - return [genBasicOption({ index: 0, iconConfig })]; + return [generateBasicOption({ index: 0, iconConfig })]; }; export const checkPendantForm = ( @@ -222,3 +223,10 @@ export const checkPendantForm = ( return { passed: true, message: 'Check passed !' }; }; + +const upperFirst = (str: string) => { + return `${str[0].toUpperCase()}${str.slice(1)}`; +}; + +export const generateRandomFieldName = (type: PendantTypes) => + upperFirst(`${type}#${nanoid(4)}`); diff --git a/libs/components/editor-core/src/kanban/atom.ts b/libs/components/editor-core/src/kanban/atom.ts index b903e2d92f..238690863c 100644 --- a/libs/components/editor-core/src/kanban/atom.ts +++ b/libs/components/editor-core/src/kanban/atom.ts @@ -10,6 +10,12 @@ import { } from '../recast-block/types'; import type { DefaultGroup, KanbanGroup } from './types'; import { DEFAULT_GROUP_ID } from './types'; +import { + generateInitialOptions, + generateRandomFieldName, + getPendantIconsConfigByName, +} from '../block-pendant/utils'; +import { SelectOption } from '../recast-block'; /** * - If the `groupBy` is `SelectProperty` or `MultiSelectProperty`, return `(Multi)SelectProperty.options`. @@ -23,6 +29,7 @@ export const getGroupOptions = async ( return []; } switch (groupBy.type) { + case PropertyType.Status: case PropertyType.Select: case PropertyType.MultiSelect: { return groupBy.options.map(option => ({ @@ -57,6 +64,9 @@ const isValueBelongOption = ( case PropertyType.MultiSelect: { return propertyValue.value.some(i => i === option.id); } + case PropertyType.Status: { + return propertyValue.value === option.id; + } // case PropertyType.Text: { // TOTODO:DO support this type // } @@ -107,6 +117,7 @@ export const moveCardToGroup = async ( success = await removeValue(groupById); return false; } + switch (group.type) { case PropertyType.Select: { success = await setValue({ @@ -116,6 +127,14 @@ export const moveCardToGroup = async ( }); break; } + case PropertyType.Status: { + success = await setValue({ + id: groupById, + type: group.type, + value: group.id, + }); + break; + } case PropertyType.MultiSelect: { success = await setValue({ id: groupById, @@ -194,14 +213,18 @@ export const genDefaultGroup = (groupBy: RecastMetaProperty): DefaultGroup => ({ items: [], }); -export const DEFAULT_GROUP_BY_PROPERTY = { - name: 'Status', - options: [ - { name: 'No Started', color: '#E53535', background: '#FFCECE' }, - { name: 'In Progress', color: '#A77F1A', background: '#FFF5AB' }, - { name: 'Complete', color: '#3C8867', background: '#C5FBE0' }, - ], -}; +export const generateDefaultGroupByProperty = (): { + name: string; + options: Omit[]; + type: PropertyType.Status; +} => ({ + name: generateRandomFieldName(PropertyType.Status), + type: PropertyType.Status, + options: generateInitialOptions( + PropertyType.Status, + getPendantIconsConfigByName(PropertyType.Status) + ), +}); /** * Unwrap blocks from the grid recursively. diff --git a/libs/components/editor-core/src/kanban/group.ts b/libs/components/editor-core/src/kanban/group.ts index 0297946d89..e857a6865a 100644 --- a/libs/components/editor-core/src/kanban/group.ts +++ b/libs/components/editor-core/src/kanban/group.ts @@ -7,6 +7,7 @@ export const useKanbanGroup = (groupBy: RecastMetaProperty) => { const { updateSelect } = useSelectProperty(); switch (groupBy.type) { + case PropertyType.Status: case PropertyType.MultiSelect: case PropertyType.Select: { const { diff --git a/libs/components/editor-core/src/kanban/kanban.ts b/libs/components/editor-core/src/kanban/kanban.ts index 675e75db3e..21564b6b2e 100644 --- a/libs/components/editor-core/src/kanban/kanban.ts +++ b/libs/components/editor-core/src/kanban/kanban.ts @@ -18,8 +18,8 @@ import { import { supportChildren } from '../utils'; import { calcCardGroup, - DEFAULT_GROUP_BY_PROPERTY, genDefaultGroup, + generateDefaultGroupByProperty, getCardGroup, getGroupOptions, moveCardToAfter, @@ -48,6 +48,7 @@ export const useRecastKanbanGroupBy = () => { // Add other type groupBy support const supportedGroupBy = getProperties().filter( prop => + prop.type === PropertyType.Status || prop.type === PropertyType.Select || prop.type === PropertyType.MultiSelect ); @@ -88,7 +89,8 @@ export const useRecastKanbanGroupBy = () => { // TODO: support other property type if ( groupByProperty.type !== PropertyType.Select && - groupByProperty.type !== PropertyType.MultiSelect + groupByProperty.type !== PropertyType.MultiSelect && + groupByProperty.type !== PropertyType.Status ) { console.warn('Not support groupBy type', groupByProperty); @@ -134,7 +136,7 @@ export const useInitKanbanEffect = (): } // 3. no group by, no properties // create a new property and set it as group by - const prop = await createSelect(DEFAULT_GROUP_BY_PROPERTY); + const prop = await createSelect(generateDefaultGroupByProperty()); await setGroupBy(prop.id); }; diff --git a/libs/components/editor-core/src/kanban/types.ts b/libs/components/editor-core/src/kanban/types.ts index c34371f2d8..926b274c77 100644 --- a/libs/components/editor-core/src/kanban/types.ts +++ b/libs/components/editor-core/src/kanban/types.ts @@ -46,7 +46,10 @@ export type DefaultGroup = KanbanGroupBase & { type SelectGroup = KanbanGroupBase & SelectOption & { - type: PropertyType.Select | PropertyType.MultiSelect; + type: + | PropertyType.Select + | PropertyType.MultiSelect + | PropertyType.Status; }; type TextGroup = KanbanGroupBase & { diff --git a/libs/components/editor-core/src/recast-block/property.ts b/libs/components/editor-core/src/recast-block/property.ts index e8f0104269..1452bba849 100644 --- a/libs/components/editor-core/src/recast-block/property.ts +++ b/libs/components/editor-core/src/recast-block/property.ts @@ -257,14 +257,12 @@ export const getRecastItemValue = (block: RecastItem | AsyncBlock) => { const isSelectLikeProperty = ( metaProperty?: RecastMetaProperty ): metaProperty is SelectProperty | MultiSelectProperty => { - if ( + return !( !metaProperty || - (metaProperty.type !== PropertyType.Select && + (metaProperty.type !== PropertyType.Status && + metaProperty.type !== PropertyType.Select && metaProperty.type !== PropertyType.MultiSelect) - ) { - return false; - } - return true; + ); }; /** @@ -312,7 +310,7 @@ export const useSelectProperty = () => { }; const updateSelect = ( - selectProperty: SelectProperty | MultiSelectProperty + selectProperty: StatusProperty | SelectProperty | MultiSelectProperty ) => { // if (typeof selectProperty === 'string') { // const maybeSelectProperty = getProperty(selectProperty);