Map value <-> IDs when changing select properties

webapp/src/components/propertyMenu.tsx

@@ -96,27 +96,27 @@ export default class PropertyMenu extends React.Component<Props, State> {
                     <Menu.Text
                         id='text'
                         name='Text'
-                        onClick={() => mutator.changePropertyType(board, property, 'text')}
+                        onClick={() => mutator.changePropertyType(boardTree, property, 'text')}
                     />
                     <Menu.Text
                         id='number'
                         name='Number'
-                        onClick={() => mutator.changePropertyType(board, property, 'number')}
+                        onClick={() => mutator.changePropertyType(boardTree, property, 'number')}
                     />
                     <Menu.Text
                         id='select'
                         name='Select'
-                        onClick={() => mutator.changePropertyType(board, property, 'select')}
+                        onClick={() => mutator.changePropertyType(boardTree, property, 'select')}
                     />
                     <Menu.Text
                         id='createdTime'
                         name='Created Time'
-                        onClick={() => mutator.changePropertyType(board, property, 'createdTime')}
+                        onClick={() => mutator.changePropertyType(boardTree, property, 'createdTime')}
                     />
                     <Menu.Text
                         id='updatedTime'
                         name='Updated Time'
-                        onClick={() => mutator.changePropertyType(board, property, 'updatedTime')}
+                        onClick={() => mutator.changePropertyType(boardTree, property, 'updatedTime')}
                     />
                 </Menu.SubMenu>
                 <Menu.Text

webapp/src/mutator.ts

@@ -319,11 +319,42 @@ class Mutator {
         await this.updateBlock(newCard, card, description)
     }
 
-    async changePropertyType(board: Board, propertyTemplate: IPropertyTemplate, type: PropertyType) {
+    async changePropertyType(boardTree: BoardTree, propertyTemplate: IPropertyTemplate, type: PropertyType) {
+        const { board } = boardTree
+
         const newBoard = new MutableBoard(board)
         const newTemplate = newBoard.cardProperties.find((o) => o.id === propertyTemplate.id)
         newTemplate.type = type
-        await this.updateBlock(newBoard, board, 'change property type')
+
+        const oldBlocks: IBlock[] = [board]
+        const newBlocks: IBlock[] = [newBoard]
+        if (propertyTemplate.type === 'select') {
+            // Map select to their values
+            for (const card of boardTree.allCards) {
+                const oldValue = card.properties[propertyTemplate.id]
+                if (oldValue) {
+                    const newValue = propertyTemplate.options.find(o => o.id === oldValue)?.value
+                    const newCard = new MutableCard(card)
+                    newCard.properties[propertyTemplate.id] = newValue
+                    newBlocks.push(newCard)
+                    oldBlocks.push(card)
+                }
+            }
+        } else if (type === 'select') {
+            // Map values to template option IDs
+            for (const card of boardTree.allCards) {
+                const oldValue = card.properties[propertyTemplate.id]
+                if (oldValue) {
+                    const newValue = propertyTemplate.options.find(o => o.value === oldValue)?.id
+                    const newCard = new MutableCard(card)
+                    newCard.properties[propertyTemplate.id] = newValue
+                    newBlocks.push(newCard)
+                    oldBlocks.push(card)
+                }
+            }
+        }
+
+        await this.updateBlocks(newBlocks, oldBlocks, 'change property type')
     }
 
     // Views

webapp/src/viewModel/boardTree.ts

@@ -19,6 +19,7 @@ interface BoardTree {
     readonly board: Board
     readonly views: readonly BoardView[]
     readonly cards: readonly Card[]
+    readonly allCards: readonly Card[]
     readonly emptyGroupCards: readonly Card[]
     readonly groups: readonly Group[]
     readonly allBlocks: readonly IBlock[]
@@ -40,7 +41,7 @@ class MutableBoardTree implements BoardTree {
     groupByProperty?: IPropertyTemplate
 
     private searchText?: string
-    private allCards: MutableCard[] = []
+    allCards: MutableCard[] = []
     get allBlocks(): IBlock[] {
         return [this.board, ...this.views, ...this.allCards]
     }