Merge pull request KelvinTegelaar#40 from KelvinTegelaar/dev

src/components/tables/CellGenericFormat.js

@@ -76,8 +76,14 @@ export const cellGenericFormatter =
       return CellBoolean({ cell, warning, reverse, colourless, noDataIsFalse })
     }
     if (typeof cell === 'string') {
+      if (cell.toLowerCase() === 'failed') {
+        return <CBadge color="danger">{CellTip('Failed to retrieve from API')}</CBadge>
+      }
       return CellTip(cell)
     }
+    if (typeof cell === 'number') {
+      return <CBadge color="info">{CellTip(cell)}</CBadge>
+    }
     if (Array.isArray(cell) || typeof cell === 'object') {
       return CellTip(JSON.stringify(cell))
     }

src/components/tables/CellTable.js

@@ -0,0 +1,46 @@
+import React from 'react'
+import { CButton } from '@coreui/react'
+import { ModalService } from '../utilities'
+import { CBadge } from '@coreui/react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faCheckCircle } from '@fortawesome/free-solid-svg-icons'
+import { cellGenericFormatter } from './CellGenericFormat'
+
+export default function cellTable(row, column, propertyName) {
+  const handleTable = ({ row }) => {
+    const QueryColumns = []
+    const columns = Object.keys(row[propertyName][0]).map((key) => {
+      QueryColumns.push({
+        name: key,
+        selector: (row) => row[key], // Accessing the property using the key
+        sortable: true,
+        exportSelector: key,
+        cell: cellGenericFormatter(),
+      })
+    })
+    ModalService.open({
+      data: row[propertyName],
+      componentType: 'table',
+      componentProps: {
+        columns: QueryColumns,
+        keyField: 'SKU',
+      },
+      title: `Data`,
+      size: 'lg',
+    })
+  }
+
+  if (!row[propertyName] || !Array.isArray(row[propertyName]) || row.length === 0) {
+    return <FontAwesomeIcon icon={faCheckCircle} className="text-success" />
+  }
+
+  return (
+    <CButton className="btn-danger" key={row} size="sm" onClick={() => handleTable({ row })}>
+      {row[propertyName].length} Items
+    </CButton>
+  )
+}
+
+export const cellTableFormatter = (propertyName) => (row, index, column, id) => {
+  return cellTable(row, column, propertyName)
+}

src/components/tables/CippTable.js

@@ -163,9 +163,12 @@ export default function CippTable({
     }
   }
   const [resetPaginationToggle, setResetPaginationToggle] = React.useState(false)
-  const filteredItems = data.filter(
-    (item) => JSON.stringify(item).toLowerCase().indexOf(filterText.toLowerCase()) !== -1,
-  )
+  const filteredItems = Array.isArray(data)
+    ? data.filter(
+        (item) => JSON.stringify(item).toLowerCase().indexOf(filterText.toLowerCase()) !== -1,
+      )
+    : []
+
   const applyFilter = (e) => {
     setFilterText(e.target.value)
   }
@@ -336,32 +339,35 @@ export default function CippTable({
         return null
       })
 
-      const filtered = data.map((obj) =>
-        // eslint-disable-next-line no-sequences
-        /* keys.reduce((acc, curr) => ((acc[curr] = obj[curr]), acc), {}),*/
-        keys.reduce((acc, curr) => {
-          const key = curr.split('/')
-          if (key.length > 1) {
-            var property = obj
-            for (var x = 0; x < key.length; x++) {
-              if (property.hasOwnProperty(key[x]) && property[key[x]] !== null) {
-                property = property[key[x]]
-              } else {
-                property = 'n/a'
-                break
-              }
-            }
-            acc[curr] = property
-          } else {
-            if (typeof exportFormatter[curr] === 'function') {
-              acc[curr] = exportFormatter[curr]({ cell: obj[curr] })
-            } else {
-              acc[curr] = obj[curr]
-            }
-          }
-          return acc
-        }, {}),
-      )
+      const filtered =
+        Array.isArray(data) && data.length > 0
+          ? data.map((obj) =>
+              // eslint-disable-next-line no-sequences
+              /* keys.reduce((acc, curr) => ((acc[curr] = obj[curr]), acc), {}),*/
+              keys.reduce((acc, curr) => {
+                const key = curr.split('/')
+                if (key.length > 1) {
+                  var property = obj
+                  for (var x = 0; x < key.length; x++) {
+                    if (property.hasOwnProperty(key[x]) && property[key[x]] !== null) {
+                      property = property[key[x]]
+                    } else {
+                      property = 'n/a'
+                      break
+                    }
+                  }
+                  acc[curr] = property
+                } else {
+                  if (typeof exportFormatter[curr] === 'function') {
+                    acc[curr] = exportFormatter[curr]({ cell: obj[curr] })
+                  } else {
+                    acc[curr] = obj[curr]
+                  }
+                }
+                return acc
+              }, {}),
+            )
+          : []
 
       if (!disablePDFExport) {
         if (dynamicColumns === true) {
@@ -499,7 +505,16 @@ export default function CippTable({
               {(massResults.length >= 1 || loopRunning) && (
                 <CCallout color="info">
                   {massResults.map((message, idx) => {
-                    return <li key={idx}>{message.data.Results}</li>
+                    return (
+                      <li key={idx}>
+                        {
+                          //if message.data.results is an array, join, else just show the message
+                          message.data?.Results?.length > 1
+                            ? message.data?.Results?.join(', ')
+                            : message.data?.Results
+                        }
+                      </li>
+                    )
                   })}
                   {loopRunning && (
                     <li>