Merge pull request #1767 from johnduprey/dev

CippTable tweaks and bug fixes

Author: KelvinTegelaar

src/components/tables/CippDatatable.js

@@ -13,30 +13,23 @@ export default function CippDatatable({ path, params, ...rest }) {
     isFetching,
     error,
   } = useListDatatableQuery({ path, params: { refreshGuid, $filter: graphFilter, ...params } })
+
+  var defaultFilterText = ''
+  if (params?.Parameters?.$filter) {
+    defaultFilterText = 'Graph: ' + params?.Parameters?.$filter
+  }
   return (
     <>
-      {data[0]?.Queued ? (
-        <>
-          <CCallout color="info">{data[0]?.QueueMessage}</CCallout>
-          <CippTable
-            {...rest}
-            data={[]}
-            isFetching={isFetching}
-            error={error}
-            refreshFunction={setRefreshGuid}
-            graphFilterFunction={setGraphFilter}
-          />
-        </>
-      ) : (
-        <CippTable
-          {...rest}
-          data={data}
-          isFetching={isFetching}
-          error={error}
-          refreshFunction={setRefreshGuid}
-          graphFilterFunction={setGraphFilter}
-        />
-      )}
+      {data[0]?.Queued && <CCallout color="info">{data[0]?.QueueMessage}</CCallout>}
+      <CippTable
+        {...rest}
+        data={data[0]?.Queued ? [] : data}
+        isFetching={isFetching}
+        error={error}
+        defaultFilterText={defaultFilterText}
+        refreshFunction={setRefreshGuid}
+        graphFilterFunction={setGraphFilter}
+      />
     </>
   )
 }

src/components/tables/CippTable.js

@@ -111,6 +111,8 @@ export default function CippTable({
   graphFilterFunction = null,
   columns = [],
   dynamicColumns = true,
+  defaultFilterText = '',
+  isModal = false,
   filterlist,
   tableProps: {
     keyField = 'id',
@@ -137,7 +139,7 @@ export default function CippTable({
   const inputRef = useRef('')
   const [loopRunning, setLoopRunning] = React.useState(false)
   const [massResults, setMassResults] = React.useState([])
-  const [filterText, setFilterText] = React.useState('')
+  const [filterText, setFilterText] = React.useState(defaultFilterText)
   const [filterviaURL, setFilterviaURL] = React.useState(false)
   const [updatedColumns, setUpdatedColumns] = React.useState(columns)
   const [selectedRows, setSelectedRows] = React.useState(false)
@@ -147,7 +149,7 @@ export default function CippTable({
   const [modalContent, setModalContent] = useState(null)
   //get the search params called "tableFilter" and set the filter to that.
   const [searchParams, setSearchParams] = useSearchParams()
-  if (searchParams.get('tableFilter') && !filterviaURL) {
+  if (searchParams.get('tableFilter') && !filterviaURL && !isModal) {
     setFilterText(searchParams.get('tableFilter'))
     setFilterviaURL(true)
   }
@@ -219,8 +221,10 @@ export default function CippTable({
   }, [filterText])
 
   const filterData = (data, filterText) => {
-    const debouncedSetSearchParams = debounce(debounceSetSearchParams, 1000)
-    debouncedSetSearchParams()
+    if (!isModal) {
+      const debouncedSetSearchParams = debounce(debounceSetSearchParams, 1000)
+      debouncedSetSearchParams()
+    }
     if (filterText.startsWith('Graph:')) {
       var query = filterText.slice(6).trim()
       debounceSetGraphFilter(query)

src/components/utilities/SharedModal.js

@@ -13,7 +13,7 @@ import { CippTable } from 'src/components/tables'
 function mapBodyComponent({ componentType, data, componentProps }) {
   switch (componentType) {
     case 'table':
-      return <CippTable data={data || []} {...componentProps} />
+      return <CippTable data={data || []} isModal={true} {...componentProps} />
     case 'list':
       return <div>{Array.isArray(data) && data.map((el, idx) => <div key={idx}>{el}</div>)}</div>
     case 'text':