@blaze-cms/plugin-data-ui 0.146.0-node18-core-styles-tooltips.58 → 0.146.0-node18-tooltips.44

package/lib-es/components/InfoBoxes/presentational/InfoBoxLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"InfoBoxLabel.js","names":["InfoBoxLabel","item","suffix","label","showLabel"],"sources":["../../../../src/components/InfoBoxes/presentational/InfoBoxLabel.js"],"sourcesContent":["const InfoBoxLabel = ({ item, suffix = ' ' }) => {\n  const { label, showLabel = true } = item;\n  return showLabel ? `${label}:${suffix}` : null;\n};\n\nexport default InfoBoxLabel;\n"],"mappings":"AAAA,MAAMA,YAAY,GAAGA,CAAC;EAAEC,IAAI;EAAEC,MAAM,GAAG;AAAI,CAAC,KAAK;EAC/C,MAAM;IAAEC,KAAK;IAAEC,SAAS,GAAG;EAAK,CAAC,GAAGH,IAAI;EACxC,OAAOG,SAAS,GAAG,GAAGD,KAAK,IAAID,MAAM,EAAE,GAAG,IAAI;AAChD,CAAC;AAED,eAAeF,YAAY","ignoreList":[]}
+{"version":3,"file":"InfoBoxLabel.js","names":["InfoBoxLabel","item","suffix","label","showLabel"],"sources":["../../../../src/components/InfoBoxes/presentational/InfoBoxLabel.js"],"sourcesContent":["const InfoBoxLabel = ({ item, suffix = ' ' }) => {\n  const { label, showLabel = true } = item;\n  return showLabel ? `${label}:${suffix}` : null;\n};\n\nexport default InfoBoxLabel;\n"],"mappings":"AAAA,MAAMA,YAAY,GAAGA,CAAC;EAAEC,IAAI;EAAEC,MAAM,GAAG;AAAI,CAAC,KAAK;EAC/C,MAAM;IAAEC,KAAK;IAAEC,SAAS,GAAG;EAAK,CAAC,GAAGH,IAAI;EACxC,OAAOG,SAAS,GAAI,GAAED,KAAM,IAAGD,MAAO,EAAC,GAAG,IAAI;AAChD,CAAC;AAED,eAAeF,YAAY","ignoreList":[]}

package/lib-es/components/ListingTable/ListingTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListingTable.js","names":["React","useEffect","useState","Fragment","PropTypes","useApolloClient","withRouter","Link","useLocation","PageHeader","DeleteAction","CardPrompt","useToasts","RenderHook","ListingTableContent","SearchFilter","availableActions","fetchData","populateRows","formatRows","getParsedRowData","getDefaultQueryParams","ListingTable","match","entitySchema","history","tableData","setTableData","modalStatus","setModalStatus","itemToDelete","setItemToDelete","previousSchema","setPreviousSchema","id","totalItems","setTotalItems","queryParamsDefault","queryParams","setQueryParams","listFilters","setListFilters","client","addToast","location","searchParams","URLSearchParams","search","currentPage","Number","get","updatedQueryParams","_objectSpread","offset","limit","doQuery","url","filters","params","listingData","totalRecords","querySettings","populatedTable","toggleModal","rows","handleOnPageChange","pageNumber","_offset","push","document","getElementsByClassName","scrollTo","updateListingFilters","onCloseCardPrompt","item","deleteAction","delete","submit","parsedFormValues","updatedTableData","filter","handleSort","event","property","direction","Object","entries","sortQueryParams","sort","columns","isEnquiry","firstColumn","appliedSort","displayProperties","adminCrudActions","create","createAction","active","_deleteAction","showAddButton","length","createElement","className","onClose","itemName","name","title","displayName","subtitle","to","hookKey","schema","onSort","propTypes","object","isRequired"],"sources":["../../../src/components/ListingTable/ListingTable.js"],"sourcesContent":["import React, { useEffect, useState, Fragment } from 'react';\nimport PropTypes from 'prop-types';\nimport { useApolloClient } from '@apollo/client';\nimport { withRouter, Link, useLocation } from 'react-router-dom';\nimport { PageHeader, DeleteAction, CardPrompt } from '@blaze-cms/admin';\nimport { useToasts } from '@blaze-react/toaster';\nimport { RenderHook } from '@blaze-cms/plugin-render-hooks-ui';\nimport ListingTableContent from './ListingTableContent';\nimport SearchFilter from './SearchFilter/SearchFilter';\nimport availableActions from '../EntityManager/Entity/actions-handlers';\nimport { fetchData } from './service';\nimport { populateRows, formatRows, getParsedRowData } from './mappers/populate-rows';\nimport { getDefaultQueryParams } from '../../utils/get-default-query-params';\n\nconst ListingTable = ({ match, entitySchema, history }) => {\n  const [tableData, setTableData] = useState({});\n  const [modalStatus, setModalStatus] = useState(false);\n  const [itemToDelete, setItemToDelete] = useState({});\n  const [previousSchema, setPreviousSchema] = useState({ id: null });\n  const [totalItems, setTotalItems] = useState(0);\n  const queryParamsDefault = getDefaultQueryParams(entitySchema);\n  const [queryParams, setQueryParams] = useState(queryParamsDefault);\n  const [listFilters, setListFilters] = useState([]);\n  const client = useApolloClient();\n  const { addToast } = useToasts();\n  const location = useLocation();\n  const searchParams = new URLSearchParams(location.search);\n  const currentPage = Number(searchParams.get('page')) || 1;\n\n  useEffect(\n    () => {\n      (async () => {\n        if (\n          entitySchema.id !== previousSchema.id ||\n          (previousSchema.id === null && entitySchema.id)\n        ) {\n          const updatedQueryParams = {\n            ...queryParams,\n            offset: currentPage * queryParamsDefault.limit - queryParamsDefault.limit\n          };\n          await doQuery([], updatedQueryParams);\n          setPreviousSchema({ id: entitySchema.id });\n        }\n      })();\n    },\n    [client, entitySchema, match.url, previousSchema.id, queryParams] // eslint-disable-line react-hooks/exhaustive-deps\n  );\n\n  const doQuery = async (filters = listFilters, params = queryParamsDefault) => {\n    const { listingData, totalRecords } = await fetchData({\n      client,\n      querySettings: {\n        entitySchema,\n        queryParams: params\n      },\n      listFilters: filters\n    });\n\n    const populatedTable = populateRows({\n      toggleModal,\n      url: match.url,\n      entitySchema,\n      rows: listingData\n    });\n\n    setTableData(populatedTable);\n    setTotalItems(totalRecords);\n  };\n\n  const handleOnPageChange = async ({ pageNumber, offset: _offset }) => {\n    const updatedQueryParams = {\n      ...queryParams,\n      offset: _offset\n    };\n\n    await doQuery(listFilters, updatedQueryParams);\n\n    history.push(`?page=${pageNumber}`);\n    document.getElementsByClassName('page')[0].scrollTo(0, 0);\n  };\n\n  const updateListingFilters = async filters => {\n    await doQuery(filters);\n    setListFilters(filters);\n  };\n\n  const onCloseCardPrompt = () => null;\n\n  const toggleModal = item => {\n    setModalStatus(!!item);\n    setItemToDelete(item || {});\n  };\n\n  const deleteAction = async () => {\n    await availableActions.delete.submit(\n      {\n        entitySchema,\n        parsedFormValues: { id: itemToDelete.id },\n        client\n      },\n      addToast\n    );\n\n    toggleModal();\n\n    const updatedTableData = {\n      ...tableData,\n      rows: tableData.rows.filter(({ id }) => id !== itemToDelete.id)\n    };\n\n    setTableData(updatedTableData);\n  };\n\n  const handleSort = async event => {\n    const [[property, direction]] = Object.entries(event);\n    const sortQueryParams = {\n      ...queryParamsDefault,\n      sort: [{ property, direction }]\n    };\n    setQueryParams(sortQueryParams);\n\n    const { listingData } = await fetchData({\n      client,\n      querySettings: {\n        entitySchema,\n        queryParams: sortQueryParams\n      },\n      listFilters\n    });\n    const { columns, isEnquiry } = tableData;\n    const [firstColumn] = columns;\n\n    setTableData({\n      ...tableData,\n      appliedSort: { [property]: direction },\n      rows: formatRows({\n        rows: getParsedRowData(listingData),\n        url: match.url,\n        toggleModal,\n        firstColumn,\n        isEnquiry,\n        entitySchema\n      })\n    });\n    history.push('?page=1');\n  };\n  if (!tableData || !tableData.rows) return 'loading';\n\n  const {\n    displayProperties: {\n      adminCrudActions: {\n        create: createAction = { active: true },\n        delete: _deleteAction = { active: true }\n      } = {}\n    } = {}\n  } = entitySchema;\n\n  const showAddButton = !tableData.rows.length && listFilters.length === 0;\n\n  return (\n    <div className=\"page\">\n      {modalStatus && _deleteAction.active && (\n        <DeleteAction\n          data-testid=\"deleteEntity\"\n          onClose={toggleModal}\n          deleteAction={deleteAction}\n          itemName={itemToDelete.name}\n        />\n      )}\n      <PageHeader title={entitySchema.displayName} subtitle=\"\">\n        {createAction.active && !showAddButton && (\n          <Link data-testid=\"addEntity\" className=\"button button--small\" to={`${match.url}/create`}>\n            Add\n          </Link>\n        )}\n      </PageHeader>\n      {showAddButton ? (\n        <CardPrompt>\n          <Link\n            className=\"button button--rounded button--cta\"\n            to={`${match.url}/create`}\n            data-testid=\"add-button\">\n            Add\n          </Link>\n        </CardPrompt>\n      ) : (\n        <>\n          <RenderHook\n            hookKey=\"entity:listing:main:top\"\n            schema={entitySchema}\n            listFilters={listFilters}\n            setListFilters={updateListingFilters}\n          />\n          <SearchFilter\n            schema={entitySchema}\n            listFilters={listFilters}\n            setListFilters={updateListingFilters}\n          />\n          <ListingTableContent\n            totalItems={totalItems}\n            currentPage={currentPage}\n            onSort={handleSort}\n            handleOnPageChange={handleOnPageChange}\n            tableData={tableData}\n            onCloseCardPrompt={onCloseCardPrompt}\n            schema={entitySchema}\n            listFilters={listFilters}\n            setListFilters={updateListingFilters}\n          />\n        </>\n      )}\n    </div>\n  );\n};\nListingTable.propTypes = {\n  entitySchema: PropTypes.object.isRequired,\n  match: PropTypes.object.isRequired,\n  history: PropTypes.object.isRequired\n};\n\nexport default withRouter(ListingTable);\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ListingTable.js","names":["React","useEffect","useState","Fragment","PropTypes","useApolloClient","withRouter","Link","useLocation","PageHeader","DeleteAction","CardPrompt","useToasts","RenderHook","ListingTableContent","SearchFilter","availableActions","fetchData","populateRows","formatRows","getParsedRowData","getDefaultQueryParams","ListingTable","match","entitySchema","history","tableData","setTableData","modalStatus","setModalStatus","itemToDelete","setItemToDelete","previousSchema","setPreviousSchema","id","totalItems","setTotalItems","queryParamsDefault","queryParams","setQueryParams","listFilters","setListFilters","client","addToast","location","searchParams","URLSearchParams","search","currentPage","Number","get","updatedQueryParams","_objectSpread","offset","limit","doQuery","url","filters","params","listingData","totalRecords","querySettings","populatedTable","toggleModal","rows","handleOnPageChange","pageNumber","_offset","push","document","getElementsByClassName","scrollTo","updateListingFilters","onCloseCardPrompt","item","deleteAction","delete","submit","parsedFormValues","updatedTableData","filter","handleSort","event","property","direction","Object","entries","sortQueryParams","sort","columns","isEnquiry","firstColumn","appliedSort","displayProperties","adminCrudActions","create","createAction","active","_deleteAction","showAddButton","length","createElement","className","onClose","itemName","name","title","displayName","subtitle","to","hookKey","schema","onSort","propTypes","object","isRequired"],"sources":["../../../src/components/ListingTable/ListingTable.js"],"sourcesContent":["import React, { useEffect, useState, Fragment } from 'react';\nimport PropTypes from 'prop-types';\nimport { useApolloClient } from '@apollo/client';\nimport { withRouter, Link, useLocation } from 'react-router-dom';\nimport { PageHeader, DeleteAction, CardPrompt } from '@blaze-cms/admin';\nimport { useToasts } from '@blaze-react/toaster';\nimport { RenderHook } from '@blaze-cms/plugin-render-hooks-ui';\nimport ListingTableContent from './ListingTableContent';\nimport SearchFilter from './SearchFilter/SearchFilter';\nimport availableActions from '../EntityManager/Entity/actions-handlers';\nimport { fetchData } from './service';\nimport { populateRows, formatRows, getParsedRowData } from './mappers/populate-rows';\nimport { getDefaultQueryParams } from '../../utils/get-default-query-params';\n\nconst ListingTable = ({ match, entitySchema, history }) => {\n  const [tableData, setTableData] = useState({});\n  const [modalStatus, setModalStatus] = useState(false);\n  const [itemToDelete, setItemToDelete] = useState({});\n  const [previousSchema, setPreviousSchema] = useState({ id: null });\n  const [totalItems, setTotalItems] = useState(0);\n  const queryParamsDefault = getDefaultQueryParams(entitySchema);\n  const [queryParams, setQueryParams] = useState(queryParamsDefault);\n  const [listFilters, setListFilters] = useState([]);\n  const client = useApolloClient();\n  const { addToast } = useToasts();\n  const location = useLocation();\n  const searchParams = new URLSearchParams(location.search);\n  const currentPage = Number(searchParams.get('page')) || 1;\n\n  useEffect(\n    () => {\n      (async () => {\n        if (\n          entitySchema.id !== previousSchema.id ||\n          (previousSchema.id === null && entitySchema.id)\n        ) {\n          const updatedQueryParams = {\n            ...queryParams,\n            offset: currentPage * queryParamsDefault.limit - queryParamsDefault.limit\n          };\n          await doQuery([], updatedQueryParams);\n          setPreviousSchema({ id: entitySchema.id });\n        }\n      })();\n    },\n    [client, entitySchema, match.url, previousSchema.id, queryParams] // eslint-disable-line react-hooks/exhaustive-deps\n  );\n\n  const doQuery = async (filters = listFilters, params = queryParamsDefault) => {\n    const { listingData, totalRecords } = await fetchData({\n      client,\n      querySettings: {\n        entitySchema,\n        queryParams: params\n      },\n      listFilters: filters\n    });\n\n    const populatedTable = populateRows({\n      toggleModal,\n      url: match.url,\n      entitySchema,\n      rows: listingData\n    });\n\n    setTableData(populatedTable);\n    setTotalItems(totalRecords);\n  };\n\n  const handleOnPageChange = async ({ pageNumber, offset: _offset }) => {\n    const updatedQueryParams = {\n      ...queryParams,\n      offset: _offset\n    };\n\n    await doQuery(listFilters, updatedQueryParams);\n\n    history.push(`?page=${pageNumber}`);\n    document.getElementsByClassName('page')[0].scrollTo(0, 0);\n  };\n\n  const updateListingFilters = async filters => {\n    await doQuery(filters);\n    setListFilters(filters);\n  };\n\n  const onCloseCardPrompt = () => null;\n\n  const toggleModal = item => {\n    setModalStatus(!!item);\n    setItemToDelete(item || {});\n  };\n\n  const deleteAction = async () => {\n    await availableActions.delete.submit(\n      {\n        entitySchema,\n        parsedFormValues: { id: itemToDelete.id },\n        client\n      },\n      addToast\n    );\n\n    toggleModal();\n\n    const updatedTableData = {\n      ...tableData,\n      rows: tableData.rows.filter(({ id }) => id !== itemToDelete.id)\n    };\n\n    setTableData(updatedTableData);\n  };\n\n  const handleSort = async event => {\n    const [[property, direction]] = Object.entries(event);\n    const sortQueryParams = {\n      ...queryParamsDefault,\n      sort: [{ property, direction }]\n    };\n    setQueryParams(sortQueryParams);\n\n    const { listingData } = await fetchData({\n      client,\n      querySettings: {\n        entitySchema,\n        queryParams: sortQueryParams\n      },\n      listFilters\n    });\n    const { columns, isEnquiry } = tableData;\n    const [firstColumn] = columns;\n\n    setTableData({\n      ...tableData,\n      appliedSort: { [property]: direction },\n      rows: formatRows({\n        rows: getParsedRowData(listingData),\n        url: match.url,\n        toggleModal,\n        firstColumn,\n        isEnquiry,\n        entitySchema\n      })\n    });\n    history.push('?page=1');\n  };\n  if (!tableData || !tableData.rows) return 'loading';\n\n  const {\n    displayProperties: {\n      adminCrudActions: {\n        create: createAction = { active: true },\n        delete: _deleteAction = { active: true }\n      } = {}\n    } = {}\n  } = entitySchema;\n\n  const showAddButton = !tableData.rows.length && listFilters.length === 0;\n\n  return (\n    <div className=\"page\">\n      {modalStatus && _deleteAction.active && (\n        <DeleteAction\n          data-testid=\"deleteEntity\"\n          onClose={toggleModal}\n          deleteAction={deleteAction}\n          itemName={itemToDelete.name}\n        />\n      )}\n      <PageHeader title={entitySchema.displayName} subtitle=\"\">\n        {createAction.active && !showAddButton && (\n          <Link data-testid=\"addEntity\" className=\"button button--small\" to={`${match.url}/create`}>\n            Add\n          </Link>\n        )}\n      </PageHeader>\n      {showAddButton ? (\n        <CardPrompt>\n          <Link\n            className=\"button button--rounded button--cta\"\n            to={`${match.url}/create`}\n            data-testid=\"add-button\">\n            Add\n          </Link>\n        </CardPrompt>\n      ) : (\n        <>\n          <RenderHook\n            hookKey=\"entity:listing:main:top\"\n            schema={entitySchema}\n            listFilters={listFilters}\n            setListFilters={updateListingFilters}\n          />\n          <SearchFilter\n            schema={entitySchema}\n            listFilters={listFilters}\n            setListFilters={updateListingFilters}\n          />\n          <ListingTableContent\n            totalItems={totalItems}\n            currentPage={currentPage}\n            onSort={handleSort}\n            handleOnPageChange={handleOnPageChange}\n            tableData={tableData}\n            onCloseCardPrompt={onCloseCardPrompt}\n            schema={entitySchema}\n            listFilters={listFilters}\n            setListFilters={updateListingFilters}\n          />\n        </>\n      )}\n    </div>\n  );\n};\nListingTable.propTypes = {\n  entitySchema: PropTypes.object.isRequired,\n  match: PropTypes.object.isRequired,\n  history: PropTypes.object.isRequired\n};\n\nexport default withRouter(ListingTable);\n"],"mappings":"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","ignoreList":[]}

package/lib-es/components/ListingTable/ListingTableContent/ListingTableContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListingTableContent.js","names":["React","useEffect","useRef","Table","Pagination","PropTypes","withRouter","ListingTableContent","tableData","handleSelect","onSort","handleOnPageChange","currentPage","totalItems","ref","displayTable","rows","length","isEnquiry","className","current","tableHeadCells","querySelectorAll","firstRowCells","forEach","element","i","styles","window","getComputedStyle","style","flex","createElement","data","onSelect","visiblePages","onPageChange","propTypes","object","isRequired","match","shape","url","string","func","number","defaultProps"],"sources":["../../../../src/components/ListingTable/ListingTableContent/ListingTableContent.js"],"sourcesContent":["import React, { useEffect, useRef } from 'react';\nimport Table from '@blaze-react/table';\nimport Pagination from '@blaze-react/pagination';\nimport PropTypes from 'prop-types';\nimport { withRouter } from 'react-router-dom';\n\nconst ListingTableContent = ({\n  tableData,\n  handleSelect,\n  onSort,\n  handleOnPageChange,\n  currentPage,\n  totalItems\n}) => {\n  const ref = useRef(null);\n  const displayTable = tableData && tableData.rows && !!tableData.rows.length;\n  const { isEnquiry } = tableData;\n  const className = `page__content${isEnquiry ? ' array-table' : ''}`;\n\n  useEffect(() => {\n    // set table head to match body column widths to handle dynamic content\n    if (ref.current && displayTable) {\n      const tableHeadCells = ref.current.querySelectorAll('.table-head .table-cell');\n      const firstRowCells = ref.current.querySelectorAll(\n        '.table-body .table-row:first-child .table-cell'\n      );\n\n      firstRowCells.forEach((element, i) => {\n        const styles = window.getComputedStyle(element);\n\n        if (tableHeadCells[i]) {\n          tableHeadCells[i].style.flex = styles.flex;\n          tableHeadCells[i].style['justify-content'] = styles['justify-content'];\n        }\n      });\n    }\n  }, [tableData, displayTable]);\n\n  if (displayTable) {\n    return (\n      <div ref={ref} className={className}>\n        <Table\n          onSort={onSort}\n          data={tableData}\n          onSelect={handleSelect}\n          data-testid=\"listing-table-content\"\n        />\n        <Pagination\n          visiblePages={10}\n          totalItems={totalItems}\n          currentPage={currentPage}\n          onPageChange={handleOnPageChange}\n        />\n      </div>\n    );\n  }\n\n  return (\n    <span className=\"table-no-results\" data-testid=\"no-results\">\n      No results\n    </span>\n  );\n};\n\nListingTableContent.propTypes = {\n  tableData: PropTypes.object.isRequired,\n  match: PropTypes.shape({\n    url: PropTypes.string\n  }).isRequired,\n  handleSelect: PropTypes.func,\n  onSort: PropTypes.func,\n  handleOnPageChange: PropTypes.func,\n  currentPage: PropTypes.number.isRequired,\n  totalItems: PropTypes.number.isRequired\n};\n\nListingTableContent.defaultProps = {\n  handleSelect: () => {},\n  onSort: () => {},\n  handleOnPageChange: () => {}\n};\n\nexport default withRouter(ListingTableContent);\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ListingTableContent.js","names":["React","useEffect","useRef","Table","Pagination","PropTypes","withRouter","ListingTableContent","tableData","handleSelect","onSort","handleOnPageChange","currentPage","totalItems","ref","displayTable","rows","length","isEnquiry","className","current","tableHeadCells","querySelectorAll","firstRowCells","forEach","element","i","styles","window","getComputedStyle","style","flex","createElement","data","onSelect","visiblePages","onPageChange","propTypes","object","isRequired","match","shape","url","string","func","number","defaultProps"],"sources":["../../../../src/components/ListingTable/ListingTableContent/ListingTableContent.js"],"sourcesContent":["import React, { useEffect, useRef } from 'react';\nimport Table from '@blaze-react/table';\nimport Pagination from '@blaze-react/pagination';\nimport PropTypes from 'prop-types';\nimport { withRouter } from 'react-router-dom';\n\nconst ListingTableContent = ({\n  tableData,\n  handleSelect,\n  onSort,\n  handleOnPageChange,\n  currentPage,\n  totalItems\n}) => {\n  const ref = useRef(null);\n  const displayTable = tableData && tableData.rows && !!tableData.rows.length;\n  const { isEnquiry } = tableData;\n  const className = `page__content${isEnquiry ? ' array-table' : ''}`;\n\n  useEffect(() => {\n    // set table head to match body column widths to handle dynamic content\n    if (ref.current && displayTable) {\n      const tableHeadCells = ref.current.querySelectorAll('.table-head .table-cell');\n      const firstRowCells = ref.current.querySelectorAll(\n        '.table-body .table-row:first-child .table-cell'\n      );\n\n      firstRowCells.forEach((element, i) => {\n        const styles = window.getComputedStyle(element);\n\n        if (tableHeadCells[i]) {\n          tableHeadCells[i].style.flex = styles.flex;\n          tableHeadCells[i].style['justify-content'] = styles['justify-content'];\n        }\n      });\n    }\n  }, [tableData, displayTable]);\n\n  if (displayTable) {\n    return (\n      <div ref={ref} className={className}>\n        <Table\n          onSort={onSort}\n          data={tableData}\n          onSelect={handleSelect}\n          data-testid=\"listing-table-content\"\n        />\n        <Pagination\n          visiblePages={10}\n          totalItems={totalItems}\n          currentPage={currentPage}\n          onPageChange={handleOnPageChange}\n        />\n      </div>\n    );\n  }\n\n  return (\n    <span className=\"table-no-results\" data-testid=\"no-results\">\n      No results\n    </span>\n  );\n};\n\nListingTableContent.propTypes = {\n  tableData: PropTypes.object.isRequired,\n  match: PropTypes.shape({\n    url: PropTypes.string\n  }).isRequired,\n  handleSelect: PropTypes.func,\n  onSort: PropTypes.func,\n  handleOnPageChange: PropTypes.func,\n  currentPage: PropTypes.number.isRequired,\n  totalItems: PropTypes.number.isRequired\n};\n\nListingTableContent.defaultProps = {\n  handleSelect: () => {},\n  onSort: () => {},\n  handleOnPageChange: () => {}\n};\n\nexport default withRouter(ListingTableContent);\n"],"mappings":"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","ignoreList":[]}

package/lib-es/components/ListingTable/SearchFilter/SearchContainer.js

@@ -4,25 +4,48 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import React, { useState, useMemo, useEffect, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import Select from '@blaze-react/select';
+import MultiSelect from '@blaze-react/multiselect';
+import debounce from 'lodash.debounce';
+import unionBy from 'lodash.unionby';
 import { useQuery, useApolloClient } from '@apollo/client';
-import { getDynamicQuery, getQuery } from '@blaze-cms/admin-ui-utils';
+import { getDynamicQuery, getQuery, fetchFilterByDataFromElastic, fetchAllEntities } from '@blaze-cms/admin-ui-utils';
+import { getStringTypeProps } from '@blaze-cms/utils';
 import { BsArrowCounterclockwise, BsSearch } from 'react-icons/bs';
-import { updateListFilters, buildQueryFields } from './helpers';
+import { updateListFilters, buildQueryFields, getTidyLabel } from './helpers';
 import { NOOP_QUERY } from './querys';
 import { ENTER_KEY, DEFAULT_FILTER_OPTION_LABEL } from '../../../constants';
 const SearchContainer = ({
   setListFilters,
   keywordFiltersToUse = [],
   selectFiltersToDisplay = [],
+  multiSelectFiltersToDisplay = [],
   schema,
-  index
+  index,
+  values
 }) => {
-  const apolloClient = useApolloClient();
+  const client = useApolloClient();
   const [searchTerm, setSearchTerm] = useState('');
   const [selectedFilters, setSelectedFilters] = useState({});
   const [selectOptions, setSelectOptions] = useState([]);
+  const [multiSelectOptions, setMultiSelectOptions] = useState([]);
+  const [allEntitySchemas, setAllEntitySchemas] = useState([]);
   const displaySearchFilter = keywordFiltersToUse.length > 0;
   const displaySelectFilters = selectFiltersToDisplay.length > 0;
+  const displayMultiSelectFilters = multiSelectFiltersToDisplay.length > 0;
+  const displayAggregations = displaySelectFilters || displayMultiSelectFilters;
+  useEffect(() => {
+    (async () => {
+      try {
+        const all = await fetchAllEntities({
+          client
+        });
+        setAllEntitySchemas(all || []);
+      } catch (error) {
+        setAllEntitySchemas([]);
+      }
+    })();
+  }, [client]);
+  const multiSelectPropertySet = useMemo(() => new Set(multiSelectFiltersToDisplay.map(([property]) => property)), [multiSelectFiltersToDisplay]);
   const {
     keywordSearchProperties,
     keywordSearchLabels
@@ -43,19 +66,60 @@ const SearchContainer = ({
   const {
     gqlFields,
     rawQuery
-  } = useMemo(() => buildQueryFields(selectFiltersToDisplay, schema.id), [selectFiltersToDisplay, schema.id]);
-  const action = displaySelectFilters ? getDynamicQuery('ADMIN_SEARCH')([schema], gqlFields, false, index) : NOOP_QUERY;
+  } = useMemo(() => buildQueryFields([...selectFiltersToDisplay, ...multiSelectFiltersToDisplay], schema.id), [selectFiltersToDisplay, multiSelectFiltersToDisplay, schema.id]);
+  const action = displayAggregations ? getDynamicQuery('ADMIN_SEARCH')([schema], gqlFields, false, index) : NOOP_QUERY;
   const {
     data
   } = useQuery(action, {
-    skip: !displaySelectFilters,
+    skip: !displayAggregations,
     variables: {
       where: rawQuery,
       limit: 0
     },
     fetchPolicy: 'cache-and-network'
   });
-  const filterData = useMemo(() => {
+  const buildRelationsIndex = useCallback(schemaObj => {
+    const items = [];
+    if (schemaObj.properties) {
+      Object.entries(schemaObj.properties).forEach(([propName, definition]) => {
+        const {
+          relation
+        } = definition || {};
+        if (!relation) return;
+        const {
+          localField: relationLocalField,
+          entityIdentifier
+        } = relation;
+        const localField = relationLocalField || propName;
+        if (localField) items.push({
+          localField,
+          entityIdentifier
+        });
+      });
+    }
+    if (Array.isArray(schemaObj.relations)) {
+      schemaObj.relations.forEach(relation => {
+        if (!relation.localField) return;
+        const {
+          localField,
+          entityIdentifier
+        } = relation;
+        items.push({
+          localField,
+          entityIdentifier
+        });
+      });
+    }
+    const byKey = new Map();
+    items.forEach(item => {
+      const key = `${item.localField}|${item.entityIdentifier || ''}`;
+      if (!byKey.has(key)) byKey.set(key, item);
+    });
+    return Array.from(byKey.values());
+  }, []);
+  const relationsIndex = useMemo(() => buildRelationsIndex(schema), [schema, buildRelationsIndex]);
+  const stringTypeProps = useMemo(() => getStringTypeProps(schema.id, relationsIndex, allEntitySchemas), [schema.id, relationsIndex, allEntitySchemas]);
+  const aggregationsData = useMemo(() => {
     const {
       searchResults: {
         rawResults: {
@@ -63,48 +127,61 @@ const SearchContainer = ({
         } = {}
       } = {}
     } = data || {};
-    const proccessedData = [];
+    const processed = [];
     Object.entries(aggregations).forEach(([key, {
       buckets
     }]) => {
-      proccessedData.push(Array.isArray(buckets) ? [key, buckets.map(b => b.key).filter(Boolean)] : []);
+      processed.push(Array.isArray(buckets) ? [key, buckets.map(bucket => bucket.key).filter(Boolean)] : []);
     });
-    return proccessedData;
+    return processed;
   }, [data]);
+  const findFilterConfig = useCallback(property => {
+    var _selectFiltersToDispl, _multiSelectFiltersTo;
+    return ((_selectFiltersToDispl = selectFiltersToDisplay.find(([prop]) => prop === property)) === null || _selectFiltersToDispl === void 0 ? void 0 : _selectFiltersToDispl[1]) || ((_multiSelectFiltersTo = multiSelectFiltersToDisplay.find(([prop]) => prop === property)) === null || _multiSelectFiltersTo === void 0 ? void 0 : _multiSelectFiltersTo[1]);
+  }, [selectFiltersToDisplay, multiSelectFiltersToDisplay]);
   useEffect(() => {
-    if (!filterData.length) {
+    if (!aggregationsData.length) {
       setSelectOptions([]);
+      setMultiSelectOptions([]);
       return;
     }
     (async () => {
-      const results = await Promise.all(filterData.map(async ([property, ids]) => {
+      const results = await Promise.all(aggregationsData.map(async ([property, ids]) => {
         try {
-          if (!ids || !ids.length) return {};
-          const [, selectionDetails] = selectFiltersToDisplay.find(([selectProperty]) => selectProperty === property) || [];
-          if (!selectionDetails) return null;
-          if (!selectionDetails.relation) {
+          if (!ids || !ids.length) return null;
+          const config = findFilterConfig(property);
+          if (!config) return null;
+          const {
+            adminListingOptions: {
+              tidyLabel
+            } = {}
+          } = config;
+          if (!config.relation) {
+            const baseOptions = ids.map(value => [value, getTidyLabel(value, tidyLabel)]);
             return {
-              id: property,
-              label: selectionDetails.label,
-              options: ids.map(value => [value, value])
+              property,
+              label: config.label,
+              type: multiSelectPropertySet.has(property) ? 'multi' : 'single',
+              options: baseOptions,
+              selected: values && values[property]
             };
           }
-          const query = getQuery('GET_ENTITY_SCHEMA');
+          const schemaQuery = getQuery('GET_ENTITY_SCHEMA');
           const {
             data: {
               getEntitySchemas: [relationSchema]
             }
-          } = await apolloClient.query({
-            query,
+          } = await client.query({
+            query: schemaQuery,
             variables: {
-              identifier: selectionDetails.relation.entityIdentifier
+              identifier: config.relation.entityIdentifier
             }
           });
           const {
             data: {
               result: selected = []
             }
-          } = await apolloClient.query({
+          } = await client.query({
             query: getDynamicQuery('GET_ALL_ENTITIES')(relationSchema),
             variables: {
               where: {
@@ -119,45 +196,183 @@ const SearchContainer = ({
             }
           })
           // eslint-disable-next-line no-console
-          .catch(e => console.error(e));
+          .catch(error => console.error(error));
+          const baseOptions = selected.map(item => [item.id, getTidyLabel(item.name, tidyLabel)]);
           return {
-            id: property,
-            label: selectionDetails.label,
-            options: selected.map(item => [item.id, item.name])
+            property,
+            label: config.label || config.relation.label,
+            type: multiSelectPropertySet.has(property) ? 'multi' : 'single',
+            options: baseOptions,
+            selected: values && values[property]
           };
         } catch {
           return null;
         }
       }));
-      setSelectOptions(results.filter(Boolean));
+      const valid = results.filter(Boolean);
+      setSelectOptions(valid.filter(option => option.type === 'single').map(({
+        property,
+        label,
+        options,
+        selected
+      }) => ({
+        id: property,
+        label,
+        options,
+        selected
+      })));
+      setMultiSelectOptions(valid.filter(option => option.type === 'multi').map(({
+        property,
+        label,
+        options,
+        selected
+      }) => ({
+        id: property,
+        label,
+        items: options.map(([id, name]) => ({
+          id,
+          name
+        })),
+        selected
+      })));
     })();
-  }, [apolloClient, filterData, schema, selectFiltersToDisplay]);
+  }, [client, aggregationsData, findFilterConfig, multiSelectPropertySet, values]);
   const updateFilters = useCallback((term, filters) => updateListFilters(term, filters, setListFilters, keywordSearchProperties), [setListFilters, keywordSearchProperties]);
+  const debouncedUpdateFilters = useMemo(() => debounce((term, filters) => updateFilters(term, filters), 300), [updateFilters]);
+  useEffect(() => () => debouncedUpdateFilters.cancel(), [debouncedUpdateFilters]);
   const handleSearch = useCallback(() => updateFilters(searchTerm, selectedFilters), [searchTerm, selectedFilters, updateFilters]);
-  const handleSearchChange = useCallback(e => setSearchTerm(e.target.value), []);
-  const handleEnterKey = useCallback(e => {
-    if (e.key === ENTER_KEY) handleSearch();
+  const handleSearchChange = useCallback(({
+    target: {
+      value
+    }
+  }) => setSearchTerm(value), []);
+  const handleEnterKey = useCallback(({
+    key
+  }) => {
+    if (key === ENTER_KEY) handleSearch();
   }, [handleSearch]);
   const handleReset = useCallback(() => {
     setSearchTerm('');
-    setSelectedFilters(Object.keys(selectedFilters).reduce((acc, key) => _objectSpread(_objectSpread({}, acc), {}, {
-      [key]: DEFAULT_FILTER_OPTION_LABEL
-    }), {}));
+    debouncedUpdateFilters.cancel();
+    setSelectedFilters(prev => Object.keys(prev).reduce((acc, key) => {
+      acc[key] = multiSelectPropertySet.has(key) ? [] : DEFAULT_FILTER_OPTION_LABEL;
+      return acc;
+    }, {}));
     updateFilters('', {});
-  }, [selectedFilters, updateFilters]);
-  const handleSelect = useCallback((property, event) => {
-    const {
-      value
-    } = event;
+  }, [multiSelectPropertySet, updateFilters, debouncedUpdateFilters]);
+  const handleSelect = useCallback((property, {
+    value
+  }) => {
     const next = _objectSpread(_objectSpread({}, selectedFilters), {}, {
       [property]: value
     });
     setSelectedFilters(next);
-    updateFilters(searchTerm, next);
-  }, [searchTerm, selectedFilters, updateFilters]);
+    debouncedUpdateFilters(searchTerm, next);
+  }, [searchTerm, selectedFilters, debouncedUpdateFilters]);
+  const handleMultiSelect = useCallback((property, ids) => {
+    const next = _objectSpread(_objectSpread({}, selectedFilters), {}, {
+      [property]: ids
+    });
+    setSelectedFilters(next);
+    debouncedUpdateFilters(searchTerm, next);
+  }, [searchTerm, selectedFilters, debouncedUpdateFilters]);
+  const findRelationByLocalField = useCallback(localField => relationsIndex.find(relation => relation.localField === localField), [relationsIndex]);
+  const resolveAggProp = useCallback((property, config) => {
+    if (!config.relation) return property;
+    if (property.includes('.')) return property;
+    const localField = config.relation.localField || property;
+    return `${localField}.name`;
+  }, []);
+  const resolveEntityIdentifier = useCallback((property, config) => {
+    if (!config.relation) return undefined;
+    if (config.relation.entityIdentifier) return config.relation.entityIdentifier;
+    const localField = property.includes('.') ? property.split('.')[0] : config.relation.localField || property;
+    return findRelationByLocalField(localField).entityIdentifier;
+  }, [findRelationByLocalField]);
+  const addEntitySuffixIfNeeded = useCallback((aggProp, entityIdentifier, config) => {
+    if (!config.relation || !entityIdentifier) return aggProp;
+    return `${aggProp}/${entityIdentifier}`;
+  }, []);
+  const makeOnSearchChange = useCallback(property => async ({
+    event: {
+      value
+    },
+    currentOffset
+  }) => {
+    try {
+      var _config$relation, _aggregations$key, _multiSelectOptions$f;
+      if (!value || currentOffset) return [];
+      const config = findFilterConfig(property);
+      if (!config) return [];
+      let aggProp = resolveAggProp(property, config);
+      if (config.relation && !config.relation.localField && !property.includes('.')) {
+        const matchingRelation = findRelationByLocalField(property);
+        if (matchingRelation.localField) aggProp = `${matchingRelation.localField}.name`;
+      }
+      const entityIdentifier = resolveEntityIdentifier(property, config) || ((_config$relation = config.relation) === null || _config$relation === void 0 ? void 0 : _config$relation.entityIdentifier);
+      const filterByEntry = addEntitySuffixIfNeeded(aggProp, entityIdentifier, config);
+      const currentValues = {
+        entity: schema.id,
+        filterByProperty: [filterByEntry]
+      };
+      const aggregations = await fetchFilterByDataFromElastic(client, currentValues, relationsIndex, stringTypeProps, value);
+      const key = aggProp;
+      const buckets = (aggregations === null || aggregations === void 0 ? void 0 : (_aggregations$key = aggregations[key]) === null || _aggregations$key === void 0 ? void 0 : _aggregations$key.buckets) || [];
+      let items = [];
+      if (config.relation) {
+        const names = buckets.map(bucket => bucket.key).filter(Boolean);
+        if (names.length) {
+          const schemaQuery = getQuery('GET_ENTITY_SCHEMA');
+          const {
+            data: {
+              getEntitySchemas: [relationSchema]
+            }
+          } = await client.query({
+            query: schemaQuery,
+            variables: {
+              identifier: entityIdentifier
+            }
+          });
+          const {
+            data: {
+              result: selected = []
+            }
+          } = await client.query({
+            query: getDynamicQuery('GET_ALL_ENTITIES')(relationSchema),
+            variables: {
+              where: {
+                name: {
+                  _in: names
+                }
+              },
+              sort: [{
+                property: 'name',
+                direction: 'asc'
+              }]
+            }
+          })
+          // eslint-disable-next-line no-console
+          .catch(error => console.error(error));
+          items = selected.map(item => ({
+            id: item.id,
+            name: item.name
+          }));
+        }
+      } else {
+        items = buckets.map(bucket => ({
+          id: bucket.key,
+          name: bucket.key
+        })).filter(option => option.id != null);
+      }
+      const existingItems = ((_multiSelectOptions$f = multiSelectOptions.find(opt => opt.id === property)) === null || _multiSelectOptions$f === void 0 ? void 0 : _multiSelectOptions$f.items) || [];
+      return unionBy(items, existingItems, 'id');
+    } catch (error) {
+      return [];
+    }
+  }, [client, schema.id, relationsIndex, stringTypeProps, multiSelectOptions, findFilterConfig, resolveAggProp, resolveEntityIdentifier, addEntitySuffixIfNeeded, findRelationByLocalField]);
   const placeholderText = `Search ${keywordSearchLabels.join(', ')}`;
   return /*#__PURE__*/React.createElement("div", {
-    className: "search-container"
+    className: "search-container ms-filter"
   }, displaySearchFilter && /*#__PURE__*/React.createElement("div", {
     className: "search-container__search-input-container"
   }, /*#__PURE__*/React.createElement("input", {
@@ -173,18 +388,73 @@ const SearchContainer = ({
   }, /*#__PURE__*/React.createElement(BsSearch, null))), displaySelectFilters && selectOptions.map(({
     id,
     options,
-    label
-  }) => /*#__PURE__*/React.createElement(React.Fragment, null, options && !!options.length && /*#__PURE__*/React.createElement("div", {
-    className: "search-container__select-wrapper"
+    label,
+    selected
+  }) => options && options.length ? /*#__PURE__*/React.createElement("div", {
+    className: "search-container__select-wrapper",
+    key: `select-${id}`
   }, /*#__PURE__*/React.createElement(Select, {
     label: label,
     id: id,
     name: id,
-    onChange: event => handleSelect(id, event),
+    onChange: ({
+      value
+    }) => handleSelect(id, {
+      value
+    }),
     options: options,
-    value: selectedFilters[id],
+    value: selectedFilters[id] !== undefined ? selectedFilters[id] : selected,
     defaultTextValue: DEFAULT_FILTER_OPTION_LABEL
-  })))), /*#__PURE__*/React.createElement("div", {
+  })) : null), displayMultiSelectFilters && multiSelectOptions.map(({
+    id,
+    label,
+    items
+  }) => {
+    const selectedIds = selectedFilters[id] ? selectedFilters[id] : [];
+    const multiSelectData = {
+      filterBy: ['name'],
+      identification: 'id',
+      keyValue: 'name',
+      data: items.map(({
+        id: itemId,
+        name
+      }) => ({
+        id: itemId,
+        name,
+        description: '',
+        checked: selectedIds.includes(itemId),
+        show: true
+      }))
+    };
+    return /*#__PURE__*/React.createElement("div", {
+      className: "search-container__select-wrapper",
+      key: `multiselect-${id}`
+    }, /*#__PURE__*/React.createElement(MultiSelect, {
+      onChange: ({
+        value,
+        currentOffset
+      }) => makeOnSearchChange(id)({
+        event: {
+          value
+        },
+        currentOffset
+      }),
+      name: id,
+      label: label,
+      data: multiSelectData,
+      limit: 10,
+      getSelected: ({
+        event: {
+          target: {
+            value
+          }
+        }
+      }) => handleMultiSelect(id, value),
+      required: false,
+      checkedPreviewCount: 1,
+      formatMoreLabel: n => `${n} more`
+    }));
+  }), /*#__PURE__*/React.createElement("div", {
     className: "search-container__reset-button"
   }, /*#__PURE__*/React.createElement("span", {
     role: "button",
@@ -195,12 +465,14 @@ SearchContainer.propTypes = {
   setListFilters: PropTypes.func.isRequired,
   keywordFiltersToUse: PropTypes.array,
   selectFiltersToDisplay: PropTypes.array,
+  multiSelectFiltersToDisplay: PropTypes.array,
   schema: PropTypes.object.isRequired,
   index: PropTypes.string
 };
 SearchContainer.defaultProps = {
   keywordFiltersToUse: [],
   selectFiltersToDisplay: [],
+  multiSelectFiltersToDisplay: [],
   index: 'admin'
 };
 export default SearchContainer;