adjsut list on single mode

lib/FindLocation/FindLocation.js

@@ -14,36 +14,56 @@ import { FindLocationFilters } from './FindLocationFilters';
 
 export const FindLocation = (props) => {
   const {
-    columnMapping,
     idPrefix,
     isMultiSelect,
     modalLabel,
+    onRecordsSelect,
     resultsPaneTitle,
     sortableColumns,
-    visibleColumns,
     ...rest
   } = props;
 
-  const [selectedLocations, setSelectedLocations] = useState();
+  const [selectedLocations, setSelectedLocations] = useState({});
+
+  const columnMapping = useMemo(() => ({
+    ...COLUMN_MAPPING,
+    ...(
+      isMultiSelect
+      ? { [COLUMN_NAMES.isAssigned]: <FormattedMessage id="stripes-acq-components.find-location.results.column.assignment" /> }
+      : {}
+    )
+  }), [isMultiSelect]);
+
+  const visibleColumns = useMemo(() => ([
+    ...VISIBLE_COLUMNS,
+    ...(isMultiSelect ? [COLUMN_NAMES.isAssigned] : []),
+  ]), [isMultiSelect]);
 
   const resultsFormatter = useMemo(() => ({
     [COLUMN_NAMES.name]: ({ name }) => name,
-    // TODO: refine
+    // TODO: add formatters for the rest of colls
     [COLUMN_NAMES.code]: ({ code }) => code,
     [COLUMN_NAMES.isActive]: ({ isActive }) => (
       <FormattedMessage id={`stripes-acq-components.find-location.results.column.status.${ isActive ? 'active': 'inactive'}`} />
     ),
-    [COLUMN_NAMES.isAssigned]: ({ id }) => id,
-  }), []);
+    [COLUMN_NAMES.isAssigned]: ({ id }) => (
+      <FormattedMessage id={`stripes-acq-components.filter.assignment.${ selectedLocations[id] ? 'assigned': 'unassigned'}`} />
+    ),
+  }), [selectedLocations]);
 
   const { locations, isLoading } = useLocationsRecords();
 
   const renderFilters = useCallback((activeFilters, applyFilters) => (
     <FindLocationFilters
       activeFilters={activeFilters}
       applyFilters={applyFilters}
+      isMultiSelect={isMultiSelect}
     />
-  ), []);
+  ), [isMultiSelect]);
+
+  const refreshRecords = useCallback((data) => {
+    console.log('refresh', data)
+  }, []);
 
   return (
     <FindRecords
@@ -55,29 +75,33 @@ export const FindLocation = (props) => {
       columnMapping={columnMapping}
       resultsFormatter={resultsFormatter}
       records={locations}
-      totalCount={0}
-      refreshRecords={console.log}
+      totalCount={locations.length}
+      refreshRecords={refreshRecords}
       isMultiSelect={isMultiSelect}
       isLoading={isLoading}
-      selectRecords={console.log}
+      selectRecords={onRecordsSelect}
       onSelectedChange={setSelectedLocations}
-      stickyFirstColumn
+      stickyFirstColumn={isMultiSelect}
       renderFilters={renderFilters}
       {...rest}
     />
   );
 };
 
 FindLocation.propTypes = {
-
+  idPrefix: PropTypes.string,
+  isMultiSelect: PropTypes.bool,
+  modalLabel: PropTypes.oneOf([PropTypes.element, PropTypes.string]),
+  onRecordsSelect: PropTypes.func.isRequired,
+  resultsPaneTitle: PropTypes.oneOf([PropTypes.element, PropTypes.string]),
+  sortableColumns: PropTypes.arrayOf(PropTypes.string),
+  visibleColumns: PropTypes.arrayOf(PropTypes.string),
 };
 
 FindLocation.defaultProps = {
-  columnMapping: COLUMN_MAPPING,
   idPrefix: 'FindLocation-',
   isMultiSelect: false,
   modalLabel: <FormattedMessage id="stripes-acq-components.find-location.modal.label" />,
   resultsPaneTitle: <FormattedMessage id="stripes-acq-components.find-location.results.heading" />,
   sortableColumns: SORTABLE_COLUMNS,
-  visibleColumns: VISIBLE_COLUMNS,
 };

lib/FindLocation/FindLocationFilters/FindLocationFilters.js

@@ -1,18 +1,22 @@
 import PropTypes from 'prop-types';
-import { useCallback, useMemo } from 'react';
+import { useCallback } from 'react';
 
 import { AccordionSet } from '@folio/stripes/components';
 
 import { AcqCheckboxFilter } from '../../AcqCheckboxFilter';
-import { FILTERS } from '../configs';
-import { LibrariesFilter } from './LibrariesFilter';
-import { InstitutionsFilter } from './InstitutionsFilter';
+import {
+  ASSIGNED_FILTER_OPTIONS,
+  FILTERS,
+} from '../configs';
 import { CampusesFilter } from './CampusesFilter';
+import { InstitutionsFilter } from './InstitutionsFilter';
+import { LibrariesFilter } from './LibrariesFilter';
 
 export const FindLocationFilters = ({
   activeFilters,
   applyFilters,
   disabled,
+  isMultiSelect,
 }) => {
   const adaptedApplyFilters = useCallback(({ name, values }) => applyFilters(name, values), [applyFilters]);
 
@@ -27,26 +31,36 @@ export const FindLocationFilters = ({
         options={[]}
       />
 
-      <LibrariesFilter
-        id={FILTERS.libraries}
-        activeFilters={activeFilters[FILTERS.libraries]}
-        name={FILTERS.libraries}
+      <CampusesFilter
+        id={FILTERS.campuses}
+        activeFilters={activeFilters[FILTERS.campuses]}
+        name={FILTERS.campuses}
         onChange={adaptedApplyFilters}
         disabled={disabled}
         options={[]}
       />
 
-      <CampusesFilter
-        id={FILTERS.campuses}
-        activeFilters={activeFilters[FILTERS.campuses]}
-        name={FILTERS.campuses}
+      <LibrariesFilter
+        id={FILTERS.libraries}
+        activeFilters={activeFilters[FILTERS.libraries]}
+        name={FILTERS.libraries}
         onChange={adaptedApplyFilters}
         disabled={disabled}
         options={[]}
       />
 
-      {/* <AcqCheckboxFilter
-      /> */}
+      {isMultiSelect && (
+        <AcqCheckboxFilter
+          closedByDefault={false}
+          id={FILTERS.isAssigned}
+          activeFilters={activeFilters[FILTERS.isAssigned]}
+          labelId="stripes-acq-components.find-location.results.column.assignment"
+          name={FILTERS.isAssigned}
+          onChange={adaptedApplyFilters}
+          disabled={disabled}
+          options={ASSIGNED_FILTER_OPTIONS}
+        />
+      )}
     </AccordionSet>
   );
 }
@@ -55,4 +69,5 @@ FindLocationFilters.propTypes = {
   activeFilters: PropTypes.object.isRequired,
   applyFilters: PropTypes.func.isRequired,
   disabled: PropTypes.bool,
+  isMultiSelect: PropTypes.bool,
 };

lib/FindLocation/configs.js

@@ -1,26 +1,53 @@
-import { FormattedMessage } from "react-intl";
+import { FormattedMessage } from 'react-intl';
 
 export const COLUMN_NAMES = {
   name: 'name',
-  // TODO: refine
   code: 'code',
+  institution: 'institution',
+  campus: 'campus',
+  library: 'library',
   isActive: 'isActive',
   isAssigned: 'isAssigned',
 };
 
 export const COLUMN_MAPPING = {
   [COLUMN_NAMES.name]: <FormattedMessage id="stripes-acq-components.find-location.results.column.name" />,
-  // TODO: refine
-  [COLUMN_NAMES.code]: <FormattedMessage id="code" />,
+  [COLUMN_NAMES.code]: <FormattedMessage id="stripes-acq-components.find-location.results.column.code" />,
+  [COLUMN_NAMES.institution]: <FormattedMessage id="stripes-acq-components.find-location.results.column.institution" />,
+  [COLUMN_NAMES.campus]: <FormattedMessage id="stripes-acq-components.find-location.results.column.campus" />,
+  [COLUMN_NAMES.library]: <FormattedMessage id="stripes-acq-components.find-location.results.column.library" />,
   [COLUMN_NAMES.isActive]: <FormattedMessage id="stripes-acq-components.find-location.results.column.status" />,
-  [COLUMN_NAMES.isAssigned]: <FormattedMessage id="stripes-acq-components.find-location.results.column.assignment" />,
 };
 
-export const VISIBLE_COLUMNS = Object.values(COLUMN_NAMES);
-export const SORTABLE_COLUMNS = Object.values(COLUMN_NAMES);
+export const VISIBLE_COLUMNS = [
+  COLUMN_NAMES.name,
+  COLUMN_NAMES.code,
+  COLUMN_NAMES.institution,
+  COLUMN_NAMES.campus,
+  COLUMN_NAMES.library,
+  COLUMN_NAMES.isActive,
+];
+
+export const SORTABLE_COLUMNS = [
+  COLUMN_NAMES.name,
+  COLUMN_NAMES.code,
+  COLUMN_NAMES.isActive,
+];
 
 export const FILTERS = {
   institutions: 'institutions',
-  libraries: 'libraries',
   campuses: 'campuses',
+  libraries: 'libraries',
+  isAssigned: 'isAssigned',
 };
+
+export const ASSIGNED_FILTER_OPTIONS = [
+  {
+    value: true,
+    label: <FormattedMessage id="stripes-acq-components.filter.assignment.assigned" />,
+  },
+  {
+    value: false,
+    label: <FormattedMessage id="stripes-acq-components.filter.assignment.unassigned" />,
+  },
+];

lib/FindRecords/FindRecordsModal.js

@@ -337,7 +337,7 @@ FindRecordsModal.propTypes = {
 
 FindRecordsModal.defaultProps = {
   columnMapping: {},
-  columnWidths: {},
+  columnWidths: { isChecked: '34px' },
   resultsFormatter: {},
   isMultiSelect: false,
   resetData: noop,

translations/stripes-acq-components/en.json

@@ -30,6 +30,8 @@
   "filter.campus": "Campus",
   "filter.institution": "Institution",
   "filter.library": "Library",
+  "filter.assignment.assigned": "Assigned",
+  "filter.assignment.unassigned": "Unassigned",
 
   "holdings.deleteModal.heading": "Delete Holdings",
   "holdings.deleteModal.message": "This piece is connected to records in inventory. After this edit there will be no other pieces OR items connected to the related Holdings record(s). After making this change would you like FOLIO to delete the Holdings record(s)?",
@@ -203,6 +205,10 @@
 
   "find-location.modal.label": "Select locations",
   "find-location.results.column.assignment": "Location assignment status",
+  "find-location.results.column.campus": "Campus",
+  "find-location.results.column.code": "Code",
+  "find-location.results.column.institution": "Institution",
+  "find-location.results.column.library": "Library",
   "find-location.results.column.name": "Name",
   "find-location.results.column.status": "Location status",
   "find-location.results.column.status.active": "Active",