show filter

libs/remix-ui/grid-view/src/lib/remix-ui-grid-cell.tsx

@@ -54,12 +54,12 @@ export const RemixUIGridCell = (props: RemixUIGridCellProps) => {
   */
 
   return (
-    <div className='mr-2 mt-3' onClick={() => {
+    <div data-values='gridCell' className='' onClick={() => {
       if (props.expandViewEl)
         props.handleExpand(!expand)
       else return
     }}>
-      { anyEnabled && <div className='d-flex flex-column'>
+      { anyEnabled && <div className='mr-2 mt-3 d-flex flex-column'>
         <div className='d-flex flex-grid'>
           <div className={"d-flex mx-0 p-2 bg-light border border-secondary remixui_grid_cell_container " + props.classList || ''} data-id={"remixUIGS" + props.title}>
             <div className="d-flex remixui_grid_cell flex-column">

libs/remix-ui/grid-view/src/lib/remix-ui-grid-section.tsx

@@ -1,6 +1,7 @@
 import React, {useState, useEffect, useContext, useRef, ReactNode} from 'react' // eslint-disable-line
 
 import './remix-ui-grid-section.css'
+import FiltersContext from "./filtersContext"
 
 declare global {
   interface Window {
@@ -19,7 +20,43 @@ interface RemixUIGridSectionProps {
   expandedCell?: any
 }
 
+const hasChildCell = (children: ReactNode): boolean => {
+  let found = false
+
+  const isElement = (child: ReactNode): child is React.ReactElement => {
+    return React.isValidElement(child)
+  }
+
+  const traverse = (child: ReactNode) => {
+    console.log('found ', children)
+
+    if (found) return
+
+    if (isElement(child)) {
+      if (child.props.classList === 'EECellStyle' && child.props.isValidElement) {
+        found = true
+        console.log('found ', child.props.className)
+        return
+      }
+
+      if (child.props.children) {
+        React.Children.forEach(child.props.children, traverse)
+      }
+    }
+  }
+
+  React.Children.forEach(children, traverse)
+  return found
+}
+
 export const RemixUIGridSection = (props: RemixUIGridSectionProps) => {
+  const [children, setChildren] = useState(props.children)
+  const filterCon = useContext(FiltersContext)
+
+  useEffect(() => {
+    setChildren(props.children)
+  }, [props.children])
+
   return (
     <div
       className={`d-flex px-4 py-2 flex-column w-100 remixui_grid_section_container ${props.classList}`}
@@ -29,6 +66,7 @@ export const RemixUIGridSection = (props: RemixUIGridSectionProps) => {
       <div className="d-flex flex-column w-100 remixui_grid_section">
         { props.title && <h6 className='mt-1 mb-0 align-items-left '>{ props.title }</h6> }
         <div className={(props.hScrollable) ? `d-flex flex-row pb-2  overflow-auto` : `d-flex flex-wrap`}>
+          { !hasChildCell(children) && <span> No items found </span>}
           { props.children }
         </div>
         { props.expandedCell && <div>

libs/remix-ui/grid-view/src/lib/remix-ui-grid-view.tsx

@@ -51,7 +51,6 @@ export const RemixUIGridView = (props: RemixUIGridViewProps) => {
       searchInputRef.current.value = ''
     } else {
       setState((prevState) => {
-        console.log("update filter", searchInputRef.current.value)
         return {
           ...prevState,
           searchDisable: searchInputRef.current.value === '',
@@ -120,7 +119,7 @@ export const RemixUIGridView = (props: RemixUIGridViewProps) => {
                     ref={searchInputRef}
                     type="text"
                     style={{ minWidth: '100px' }}
-                    className="border form-control border-right-0 mr-4"
+                    className="border form-control mr-4"
                     id="GVFilterInput"
                     placeholder={"Filter the list"}
                     data-id="RemixGVFilterInput"