Introduce checkbox property type (#439)

* introduce checkbox property type

* treat false as empty string

* Fixed lint issues

* Fixed webapp tests:

Co-authored-by: Harshil Sharma <harshilsharma63@gmail.com>

Makefile

@@ -143,6 +143,9 @@ watch-server-single-user:
 webapp:
 	cd webapp; npm run pack
 
+watch-webapp:
+	cd webapp; npm run watchdev
+
 mac-app: server-mac webapp
 	rm -rf mac/temp
 	rm -rf mac/dist

webapp/src/components/propertyValueElement.tsx

@@ -15,6 +15,7 @@ import ValueSelector from '../widgets/valueSelector'
 import Label from '../widgets/label'
 
 import EditableDayPicker from '../widgets/editableDayPicker'
+import Switch from '../widgets/switch'
 
 import URLProperty from './properties/link/link'
 
@@ -128,6 +129,19 @@ const PropertyValueElement = (props:Props): JSX.Element => {
         )
     }
 
+    if (propertyTemplate.type === 'checkbox') {
+        return (
+            <Switch
+                isOn={Boolean(propertyValue)}
+                onChanged={(newBool) => {
+                    const newValue = newBool ? 'true' : ''
+                    mutator.changePropertyValue(card, propertyTemplate.id, newValue)
+                }}
+                readOnly={readOnly}
+            />
+        )
+    }
+
     const editableFields: Array<PropertyType> = ['text', 'number', 'email', 'url', 'phone']
 
     if (

webapp/src/widgets/__snapshots__/propertyMenu.test.tsx.snap

@@ -172,6 +172,21 @@ exports[`widgets/PropertyMenu should match snapshot 1`] = `
                     class="noicon"
                   />
                 </div>
+                <div
+                  class="MenuOption TextOption menu-option"
+                >
+                  <div
+                    class="noicon"
+                  />
+                  <div
+                    class="menu-name"
+                  >
+                    Checkbox
+                  </div>
+                  <div
+                    class="noicon"
+                  />
+                </div>
                 <div
                   class="MenuOption TextOption menu-option"
                 >

webapp/src/widgets/propertyMenu.tsx

@@ -124,6 +124,11 @@ const PropertyMenu = React.memo((props: Props) => {
                     name={typeDisplayName(intl, 'date')}
                     onClick={() => props.onTypeChanged('date')}
                 />
+                <Menu.Text
+                    id='checkbox'
+                    name={typeDisplayName(intl, 'checkbox')}
+                    onClick={() => props.onTypeChanged('checkbox')}
+                />
                 <Menu.Text
                     id='createdTime'
                     name={typeDisplayName(intl, 'createdTime')}

webapp/src/widgets/switch.scss

@@ -9,6 +9,7 @@
     padding: 2px;
     background-color: rgba(var(--body-color), 0.24);
     transition: background 200ms ease 0s, box-shadow 200ms ease 0s;
+    cursor: pointer;
 
     &.on {
         background-color: rgb(var(--button-bg));

webapp/src/widgets/switch.tsx

@@ -7,6 +7,7 @@ import './switch.scss'
 type Props = {
     onChanged: (isOn: boolean) => void
     isOn: boolean
+    readOnly?: boolean
 }
 
 // Switch is an on-off style switch / checkbox
@@ -16,7 +17,9 @@ function Switch(props: Props): JSX.Element {
         <div
             className={className}
             onClick={() => {
-                props.onChanged(!props.isOn)
+                if (!props.readOnly) {
+                    props.onChanged(!props.isOn)
+                }
             }}
         >
             <div className='octo-switch-inner'/>

webapp/webpack.dev.js

@@ -16,5 +16,9 @@ const config = merge.merge(commonConfig, {
 
 module.exports = [
     merge.merge(config, {
+        devtool: 'source-map',
+        output: {
+            devtoolNamespace: 'focalboard',
+        },
     }),
 ];