scaffold: Use checkbox to display boolean value (#732)

Co-authored-by: Rob Cameron <[email protected]>

Author: Tobbe

packages/cli/src/commands/generate/scaffold/__tests__/fixtures/assets/scaffold.css

@@ -297,6 +297,9 @@
 .rw-table tbody tr:nth-child(even) {
   background-color: #fff;
 }
+.rw-table input {
+  margin-left: 0;
+}
 .rw-table-actions {
   display: flex;
   justify-content: flex-end;

packages/cli/src/commands/generate/scaffold/__tests__/fixtures/components/index.js

@@ -27,6 +27,10 @@ const timeTag = (datetime) => {
   )
 }
 
+const checkboxInputTag = (checked) => {
+  return <input type="checkbox" checked={checked} disabled />
+}
+
 const PostsList = ({ posts }) => {
   const { addMessage } = useFlash()
   const [deletePost] = useMutation(DELETE_POST_MUTATION, {
@@ -66,7 +70,7 @@ const PostsList = ({ posts }) => {
               <td>{truncate(post.author)}</td>
               <td>{truncate(post.body)}</td>
               <td>{truncate(post.image)}</td>
-              <td>{truncate(post.isPinned)}</td>
+              <td>{checkboxInputTag(post.isPinned)}</td>
               <td>{timeTag(post.postedAt)}</td>
               <td>
                 <nav className="rw-table-actions">

packages/cli/src/commands/generate/scaffold/scaffold.js

@@ -194,37 +194,45 @@ const componentFiles = async (name, scaffoldPath = '') => {
   const singularName = pascalcase(pluralize.singular(name))
   const model = await getSchema(singularName)
   const idType = getIdType(model)
-  const columns = model.fields.filter((field) => field.kind !== 'object')
   const intForeignKeys = intForeignKeysForModel(model)
   let fileList = {}
-  const fieldComponents = {
+  const componentMetadata = {
     Boolean: {
       name: 'CheckboxField',
       defaultProp: 'defaultChecked',
       validation: false,
+      displayFunction: 'checkboxInputTag',
+    },
+    DateTime: {
+      displayFunction: 'timeTag',
     },
     String: {
       name: 'TextField',
       defaultProp: 'defaultValue',
       validation: '{{ required: true }}',
+      displayFunction: 'truncate',
     },
   }
-  const editableColumns = columns
-    .filter((column) => {
-      return NON_EDITABLE_COLUMNS.indexOf(column.name) === -1
-    })
+  const columns = model.fields
+    .filter((field) => field.kind !== 'object')
     .map((column) => ({
       ...column,
       label: humanize(column.name),
       component:
-        fieldComponents[column.type]?.name || fieldComponents.String.name,
+        componentMetadata[column.type]?.name || componentMetadata.String.name,
       defaultProp:
-        fieldComponents[column.type]?.defaultProp ||
-        fieldComponents.String.defaultProp,
+        componentMetadata[column.type]?.defaultProp ||
+        componentMetadata.String.defaultProp,
       validation:
-        fieldComponents[column.type]?.validation ??
-        fieldComponents.String.validation,
+        componentMetadata[column.type]?.validation ??
+        componentMetadata.String.validation,
+      displayFunction:
+        componentMetadata[column.type]?.displayFunction ||
+        componentMetadata.String.displayFunction,
     }))
+  const editableColumns = columns.filter((column) => {
+    return NON_EDITABLE_COLUMNS.indexOf(column.name) === -1
+  })
   const fieldsToImport = Object.keys(
     editableColumns.reduce((accumulator, column) => {
       accumulator[column.component] = true

packages/cli/src/commands/generate/scaffold/templates/assets/scaffold.css.template

@@ -297,6 +297,9 @@
 .rw-table tbody tr:nth-child(even) {
   background-color: #fff;
 }
+.rw-table input {
+  margin-left: 0;
+}
 .rw-table-actions {
   display: flex;
   justify-content: flex-end;

packages/cli/src/commands/generate/scaffold/templates/components/Names.js.template

@@ -27,6 +27,10 @@ const timeTag = (datetime) => {
   )
 }
 
+const checkboxInputTag = (checked) => {
+  return <input type="checkbox" checked={checked} disabled />
+}
+
 const ${pluralPascalName}List = ({ ${pluralCamelName} }) => {
   const { addMessage } = useFlash()
   const [delete${singularPascalName}] = useMutation(DELETE_${singularConstantName}_MUTATION, {
@@ -53,7 +57,7 @@ const ${pluralPascalName}List = ({ ${pluralCamelName} }) => {
         <tbody>
           {${pluralCamelName}.map((${singularCamelName}) => (
             <tr key={${singularCamelName}.id}><% columns.forEach(column => { %>
-              <td>{<% if (column.type === 'DateTime') { %>timeTag<% } else { %>truncate<% } %>(${singularCamelName}.<%= column.name %>)}</td><% }) %>
+              <td>{${column.displayFunction}(${singularCamelName}.${column.name})}</td><% }) %>
               <td>
                 <nav className="rw-table-actions">
                   <Link