@spokane-folio/security-incident 1.0.28

package/src/components/incidents/ResultsPane.js

@@ -0,0 +1,437 @@
+import React, { useEffect, useState, useMemo } from 'react';
+import { useIntl, FormattedMessage } from 'react-intl';
+import { useHistory, useLocation } from 'react-router-dom';
+import { useStripes } from '@folio/stripes/core';
+import {
+  Icon,
+  Pane,
+  MultiColumnList,
+  Button,
+  PaneHeader,
+  LoadingPane,
+} from '@folio/stripes/components';
+import { useIncidents } from '../../contexts/IncidentContext';
+import GetIncidentTypesDetails from '../../settings/GetIncidentTypesDetails';
+import convertUTCISOToPrettyDate from './helpers/convertUTCISOToPrettyDate';
+import ColumnChooser from './ColumnChooser.js';
+import usePersistedColumns from './usePersistedColumns.js';
+import usePersistedSort from './usePersistedSort.js';
+import buildQueryString from './helpers/buildQueryString.js';
+
+const ResultsPane = ({ 
+  handlePagination, 
+  ...props 
+} ) => {
+  const stripes = useStripes();
+  const history = useHistory();
+  const location = useLocation();
+  const intl = useIntl();
+
+  const { 
+    openDetailsPane, 
+    openCreatePane, 
+    isLoadingSearch, 
+    incidentsList, 
+    limit, 
+    offset, 
+    totalResults,
+    appliedSearchParams
+  } = useIncidents();
+
+  const { 
+    sortColumn, 
+    sortDirection, 
+    setSortColumn, 
+    setSortDirection
+  } = usePersistedSort();
+
+  const [sortedData, setSortedData] = useState([]); // final data prop for MCL
+
+
+  const handleCreateReport = () => {
+    openCreatePane();
+    history.push(`/incidents/create`);
+  };
+
+  const handleViewDetails = (event, row) => {
+    const id = row.id;
+    openDetailsPane(id);
+    sessionStorage.setItem('lastTrackListRoute', location.pathname + location.search);
+    history.push(`/incidents/${id}${location.search}`);
+  };
+
+  const customCameraSvg = (props) => (
+    <svg 
+      xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32" {...props}>
+        <g clipPath="url(#a)">
+          <path fill="#fff" d="M0 0h24v24H0z"/><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" d="M3 8a1 1 0 0 1 1-1h4.5l1-3h5l1 3H20a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V8Z"/>
+          <circle cx="12" cy="13" r="3" stroke="#000" strokeLinejoin="round"/>
+        </g>
+          <defs>
+            <clipPath id="a">
+            <path fill="#fff" d="M0 0h24v24H0z"/></clipPath>
+          </defs>
+    </svg>
+  );
+
+  const inlineIconStyle = {
+    display: 'inline-flex',
+    alignItems: 'center',
+    verticalAlign: 'middle',
+    lineHeight: '1.2', 
+    gap: '4px',
+    marginLeft: '8px'
+  }
+
+  const resultsFormatter = {
+    customers: (item) => {
+      const isStaffSuppressed = item.staffSuppressed && item.staffSuppressed === true;
+      // if report has attachments of image or video, returns true
+      const hasImageOrVideo = item.attachments?.some((att) => {
+        return att.contentType.startsWith('image/') || att.contentType.startsWith('video/') || false
+      });
+      // if report has non trespass related document, returns true
+      const hasNonTrespassPDF = item.attachments?.some((att) => att.contentType === 'application/pdf' && !att.id?.toLowerCase()?.includes('trespass')) || false;
+
+      const customerNameList = item.customers?.map((cust, index) => {
+        const nameLabel = cust.customerNameLabel; 
+        const custDescSnippet = cust.customerDescSnippet;
+        const trespassServed =
+          cust.trespass && cust.trespass.declarationOfService;
+        const endDateOfTrespass = cust.trespass?.endDateOfTrespass ?? null;
+        const isTrespassExpired = 
+          endDateOfTrespass && new Date(endDateOfTrespass) < Date.now();
+
+        return (
+          <li key={index}> 
+            {nameLabel ? nameLabel : custDescSnippet}
+
+            {/* render green check for has been served 'in hand' */}
+            {trespassServed && !isTrespassExpired ? (
+              <span style={{ 
+                ...inlineIconStyle,
+                color: 'green'
+                }}>
+                <Icon icon="check-circle"/>
+              </span>
+            ) : (
+              null
+            )}
+            {/* render X if currently trespassed, else trespass expired  */}
+            {cust.trespass && !isTrespassExpired ? (
+              <span style={{ 
+                  ...inlineIconStyle,
+                  color: 'red'
+                  }}>
+                <Icon 
+                  icon="times-circle-solid" /> 
+                {endDateOfTrespass ? 
+                  convertUTCISOToPrettyDate(endDateOfTrespass) 
+                  : <FormattedMessage id="results-pane.customers-formatter-trespass-no-end-date"/>}
+              </span>
+            ) : cust.trespass && isTrespassExpired ? (
+              <span style={{ marginLeft: '10px' }}>
+                <FormattedMessage id="results-pane.customers-formatter-trespass-expired"/>
+              </span> 
+            ) : (
+              null
+            )}
+            {/* render icon if report has attachment(s) of image or video or non-trespass pdf*/}
+            {hasImageOrVideo || hasNonTrespassPDF ? (
+              <span style={{ ...inlineIconStyle, marginTop: '3px', }}>
+                <Icon 
+                  size='large'
+                  iconClassName='cameraIcon'
+                  icon={customCameraSvg} 
+                  aria-label='camera icon'
+                  />
+              </span>
+            ) : (
+              null
+            )}
+            {isStaffSuppressed ? (
+             <span
+              style={{ 
+                display: 'inline-block',
+                marginBottom: '4px', 
+                marginLeft: '3px',
+                verticalAlign: 'middle'
+              }}>
+                <Icon size='small' icon='exclamation-circle' status='warn'>
+                </Icon>
+             </span>) 
+              : ( 
+                null 
+              )}
+          </li>
+          );
+        });
+      return <ul style={{ margin: '0' }}>
+        {customerNameList?.length > 0 ? 
+          customerNameList 
+          : (
+              <li>
+                <FormattedMessage 
+                  id="results-pane.customers-formatter-no-associated-customers"
+                  />
+                 {hasImageOrVideo || hasNonTrespassPDF ? (
+                 <span style={{ ...inlineIconStyle, marginTop: '3px', }}>
+                    <Icon 
+                      size='large'
+                      iconClassName='cameraIcon'
+                      icon={customCameraSvg} 
+                      aria-label='camera icon'
+                      />
+                  </span>
+                ) : (
+                  null
+                )}
+                {isStaffSuppressed ? (
+                <span
+                  style={{ 
+                    display: 'inline-block',
+                    marginBottom: '2px', 
+                    marginLeft: '3px',
+                    verticalAlign: 'middle'
+                    
+                  }}>
+                    <Icon size='small' icon='exclamation-circle' status='warn'>
+                    </Icon>
+                </span>) 
+                  : ( 
+                    null 
+                  )}
+              </li>
+            )
+          }
+      </ul>;
+    },
+    incidentLocation: (item) => {
+      return item.incidentLocationLabel ? item.incidentLocationLabel : item.incidentLocation
+    },
+    dateOfIncident: (item) => {
+      const readableDate = convertUTCISOToPrettyDate(item.dateTimeOfIncident);
+      return readableDate;
+    },
+    endDateOfTrespass: (item) => {
+      const readableDate = item.convertUTCISOToPrettyDate(endDateOfTrespass);
+      return readableDate;
+    },
+    incidentTypes: (item) => {
+      const typeList = item.incidentTypesLabels.map((type, index) => (
+        <li key={index} style={{ listStyleType: 'none', padding: '5px 0' }}>
+          {type}
+        </li>
+      ));
+
+      return <ul style={{ padding: '0', margin: '0' }}>{typeList}</ul>;
+    },
+    incidentWitnesses: (item) => {
+      const staffInvolvedNamesAssociatedKeys = item.incidentWitnesses?.map((wit) => {
+        const witnessNameLabel = wit.witnessNameLabel;
+        return (
+          <li key={wit.id} style={{ listStyleType: 'none', padding: '5px 0' }}>
+            {`${witnessNameLabel}`}
+          </li>
+        );
+      });
+
+      return <ul style={{ padding: '0', margin: '0' }}>
+        {staffInvolvedNamesAssociatedKeys}
+      </ul>
+    },
+    createdBy: (item) => {
+      return item.createdByLabel ? item.createdByLabel 
+        : `${item.createdBy?.lastName}, ${item.createdBy?.firstName}`
+    },
+    trespassExpirationDates: (item) => {
+      const { customers = [] } = item; 
+      
+      if (customers.length === 0) {
+        return <FormattedMessage id="no-customers" />
+      }
+
+      const endDates = customers
+        .map(cust => cust.trespass?.endDateOfTrespass)
+        .filter(Boolean);
+
+      if (endDates.length === 0) {
+        return <FormattedMessage id="no-trespass" />;
+      }
+
+      return (
+        <ul style={{ paddingLeft: 20, margin: 0 }}>
+          {endDates.map((date, idx) => (
+            <li key={idx}>{convertUTCISOToPrettyDate(date)}</li>
+          ))}
+        </ul>
+      );
+    }
+  };
+
+  const columnWidths = {
+    customers: '375px',
+    incidentLocation: '175px',
+    dateOfIncident: '110px',
+    incidentTypes: '175px'
+  };
+
+  const resultCount = intl.formatMessage(
+    { id: `results-pane.paneSubTitle` },
+    { count: totalResults }
+  );
+
+    const columnsList = [
+    'customers',
+    'incidentLocation',
+    'dateOfIncident',
+    'incidentTypes',
+    'incidentWitnesses',
+    'createdBy',
+    'trespassExpirationDates'
+  ];
+
+
+
+
+
+
+
+  const fixedColumns = ['customers'];
+
+  const toggleableColumns = useMemo(() => [
+    'incidentLocation',
+    'dateOfIncident',
+    'incidentTypes',
+    'incidentWitnesses',
+    'createdBy',
+    'trespassExpirationDates'
+  ], []);
+
+  const allColumns = [...fixedColumns, ...toggleableColumns];
+
+  // const possibleColumns = useMemo(() => [...columnsList]);
+  const sortableFields = [...allColumns];
+
+  const columnLabels = {
+    customers:          <FormattedMessage id="column-mapping.name" />,
+    incidentLocation:   <FormattedMessage id="column-mapping.incidentLocation" />,
+    dateOfIncident:     <FormattedMessage id="column-mapping.dateOfIncident" />,
+    incidentTypes:      <FormattedMessage id="column-mapping.incidentTypes" />,
+    incidentWitnesses:  <FormattedMessage id="column-mapping.witnessedBy" />,
+    createdBy:          <FormattedMessage id="column-mapping.createdBy" />,
+    trespassExpirationDates: <FormattedMessage id="column-mapping.trespassExpirationDates" />
+  };
+
+  const [visibleToggleable, toggleColumn] = usePersistedColumns(toggleableColumns);
+
+  const visibleColumns = [...fixedColumns, ...visibleToggleable];
+
+  const actionMenu = ({ onToggle }) => (
+    <>
+      {stripes.hasPerm('ui-security-incident.edit') ? 
+      <Button
+        style={{ marginTop: '10px' }}
+        buttonStyle="primary"
+        onClick={handleCreateReport}
+      >
+        <FormattedMessage id="results-pane.create-report-button" />
+      </Button> 
+      : null
+      } 
+      <ColumnChooser 
+        possibleColumns={toggleableColumns} 
+        visibleColumns={visibleToggleable}
+        toggleColumn={toggleColumn}
+        columnLabels={columnLabels}
+      />
+    </>
+  );
+
+  const renderHeader = (renderProps) => (
+    <PaneHeader
+      {...renderProps}
+      paneTitle={<FormattedMessage id="results-pane.paneTitle" />} 
+      paneSub={resultCount}
+      actionMenu={actionMenu}
+    />
+  );
+
+  const handleSort = (_e, { name }) => {
+    const nextCol = name;
+    const nextDir =
+      name === sortColumn && sortDirection === 'asc' ? 'desc' : 'asc';
+
+    setSortColumn(nextCol);
+    setSortDirection(nextDir);
+
+    const qs = buildQueryString(
+      { ...appliedSearchParams, limit, offset: 0 }, // always restart at offset 0
+      nextCol,
+      nextDir
+    );
+    history.push(`/incidents?${qs}`)
+  };
+
+  useEffect(() => {
+    setSortedData(incidentsList);
+  }, [incidentsList]); 
+
+  return (
+    isLoadingSearch ? (
+    <LoadingPane defaultWidth="fill" paneTitle="Loading results..." />
+    ) : <Pane
+        paneTitle={<FormattedMessage id="results-pane.paneTitle"/>}
+        id="results-pane"
+        defaultWidth="75%"
+        {...props}
+        renderHeader={renderHeader}
+      >
+      <GetIncidentTypesDetails context='incidents'/>
+
+      <div style={{ height: '80vh', width: 'auto' }}>
+        <MultiColumnList
+          autosize
+          virtualize
+          showSortIndicator 
+          sortableFields={sortableFields}
+          onHeaderClick={handleSort}
+          sortedColumn={sortColumn} 
+          sortDirection={sortDirection === 'desc' ? 'descending' : 'ascending'} 
+          contentData={sortedData}
+          pageAmount={limit} 
+          totalCount={totalResults}
+          pagingOffset={offset}
+          pagingType='prev-next'
+          pagingCanGoNext={offset + limit < totalResults}
+          pagingCanGoPrevious={offset > 0}
+          onNeedMoreData={(askAmount, index) => handlePagination(askAmount, index)} 
+          formatter={resultsFormatter}
+          visibleColumns={visibleColumns}
+          columnMapping={{
+            customers: <FormattedMessage id="column-mapping.name" />,
+            incidentLocation: 
+            <FormattedMessage id="column-mapping.incidentLocation" />
+            ,
+            dateOfIncident: 
+            <FormattedMessage id="column-mapping.dateOfIncident" />
+            ,
+            incidentTypes: 
+            <FormattedMessage id="column-mapping.incidentTypes" />
+            ,
+            incidentWitnesses: 
+            <FormattedMessage id="column-mapping.witnessedBy" />,
+            createdBy: 
+            <FormattedMessage id="column-mapping.createdBy" />,
+            trespassExpirationDates: 
+            <FormattedMessage id="column-mapping.trespassExpirationDates" />,
+          }}
+          columnWidths={columnWidths}
+          onRowClick={handleViewDetails}
+        />
+      </div>
+    </Pane>
+  );
+};
+
+export default ResultsPane;

package/src/components/incidents/ResultsPane.test.js

@@ -0,0 +1,120 @@
+/**
+ * ResultsPane.test.js
+ * Snapshot + smoke tests for the ResultsPane container.
+ */
+import React from 'react';
+import { act } from 'react-dom/test-utils';
+import { createRoot } from 'react-dom/client';
+import ResultsPane from './ResultsPane';
+
+/* ------------------------------------------------------------------ *
+  1 stripes core + UI widget mocks                                   
+ * ------------------------------------------------------------------ */
+jest.mock('@folio/stripes/core', () => ({
+  useStripes: () => ({ hasPerm: jest.fn(() => true) }),
+  stripesConnect: (Comp) => Comp,
+}));
+
+jest.mock('@folio/stripes/components', () => {
+  const React = require('react');
+  const make = (tag) => (p) => React.createElement(tag, p, p.children);
+
+  /* render actionMenu so ColumnChooser text appears */
+  const PaneHeader = (props) => {
+    const menu = props.actionMenu ? props.actionMenu({ onToggle: jest.fn() }) : null;
+    return React.createElement('div', props, menu, props.children);
+  };
+
+  return {
+    Icon: (p) => <span {...p}>{p.icon}</span>,
+    Pane: make('div'),
+    PaneHeader,
+    PaneMenu: make('div'),
+    MultiColumnList: make('div'),
+    Button: make('button'),
+    LoadingPane: make('div'),
+  };
+});
+
+/* ------------------------------------------------------------------ *
+  2  nested components & hooks                                       
+ * ------------------------------------------------------------------ */
+jest
+  .mock('../../settings/GetIncidentTypesDetails', () => () => <div>Mock GetIncidentTypesDetails</div>)
+  .mock('../../settings/GetLocationsInService', () => () => <div>Mock GetLocationsInService</div>)
+  .mock('./GetName', () => () => <div>Mock GetName</div>)
+  .mock('./ColumnChooser', () => () => <div>Mock ColumnChooser</div>);
+
+jest.mock('./usePersistedColumns', () => () => [['customers', 'incidentLocation'], jest.fn()]);
+jest.mock('./usePersistedSort', () => () => ({
+  sortColumn: '',
+  sortDirection: 'asc',
+  setSortColumn: jest.fn(),
+  setSortDirection: jest.fn(),
+}));
+
+jest.mock('./helpers/buildQueryString', () => jest.fn(() => 'mockedQueryString'));
+jest.mock('./helpers/convertUTCISOToPrettyDate', () => jest.fn((d) => d));
+
+/* ------------------------------------------------------------------ *
+ * 3 router + IncidentContext                                        
+ * ------------------------------------------------------------------ */
+const stableIncidentsList  = [];   // avoid new [] on each render
+const stableAppliedFilters = {};
+
+jest.mock('react-router-dom', () => ({
+  useLocation: () => ({ pathname: '/incidents', search: '' }),
+  useHistory: () => ({ push: jest.fn(), replace: jest.fn() }),
+}));
+
+jest.mock('../../contexts/IncidentContext', () => ({
+  useIncidents: () => ({
+    openDetailsPane: jest.fn(),
+    openCreatePane: jest.fn(),
+    isLoadingSearch: false,
+    incidentsList: stableIncidentsList,
+    appliedSearchParams: stableAppliedFilters,
+    incidentTypesList: [],
+    locationsInService: [],
+    limit: 20,
+    offset: 0,
+    totalResults: 0,
+  }),
+}));
+
+/* ------------------------------------------------------------------ *
+  4 DOM setup / teardown (React-18 createRoot)                       
+ * ------------------------------------------------------------------ */
+let container;
+let root;
+beforeEach(() => {
+  container = document.createElement('div');
+  document.body.appendChild(container);
+  root = createRoot(container);
+});
+
+afterEach(() => {
+  root.unmount();
+  document.body.removeChild(container);
+  container = null;
+});
+
+/* ------------------------------------------------------------------ *
+  5 Tests                                                            
+ * ------------------------------------------------------------------ */
+it('renders without crashing (snapshot)', () => {
+  act(() => {
+    root.render(<ResultsPane />);
+  });
+  expect(container.innerHTML).toMatchSnapshot();
+});
+
+it('mounts key child components', () => {
+  act(() => {
+    root.render(<ResultsPane />);
+  });
+  expect(container.textContent).toEqual(
+    expect.stringContaining('Mock GetIncidentTypesDetails')
+  );
+});
+

package/src/components/incidents/SearchCustomerOrWitness.js

@@ -0,0 +1,108 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { stripesConnect } from '@folio/stripes/core';
+import { IncidentContext } from '../../contexts/IncidentContext';
+
+class SearchCustomerOrWitness extends React.Component {
+  static contextType = IncidentContext;
+
+  static manifest = Object.freeze({
+    customer: {
+      type: 'okapi',
+      accumulate: true,
+    },
+  });
+
+  static propTypes = {
+    term: PropTypes.string,
+    customer: PropTypes.shape({
+      records: PropTypes.object,
+    }),
+    mutator: PropTypes.shape({
+      customer: PropTypes.shape({
+        GET: PropTypes.func.isRequired,
+      }).isRequired,
+    }).isRequired,
+  };
+
+  componentDidMount() {
+    this.fetchCustomer();
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.term !== prevProps.term) {
+      this.fetchCustomer(this.props.term);
+    }
+  }
+
+  fetchCustomer() {
+    if (this.props.term) {
+      this.context.openLoadingSearch();
+      let cleanedInput = this.props.term.replace(/[^\w\s]/g, '');
+      const terms = cleanedInput.split(/\s+/).filter(Boolean);
+      let completeQuery = ''
+
+      const searchFields = [
+        'personal.firstName',
+        'personal.lastName',
+        'personal.middleName',
+        'barcode'
+      ];
+
+      const termQueries = terms.map((term) => {
+        const encoded = encodeURIComponent(term);
+        const orExpressions = searchFields
+          .map((field) => `${field}="${encoded}*"`)
+          .join(' or ');
+        return `(${orExpressions})`;
+      });
+
+      completeQuery = termQueries.join(' and ');
+
+      const finalQuery = `(${completeQuery}) sortby personal.lastName personal.firstName`;
+      // console.log('@SearchCustomerOrWitness - finalQuery: ', finalQuery);
+
+      this.props.mutator.customer
+        .GET({ path: `users?query=${finalQuery}&limit=1000` })
+        .then((records) => {
+          const list = records.users;
+          const refinedList = list.map((user) => {
+            return {
+              id: user.id,
+              barcode: user.barcode,
+              firstName: user.personal.firstName,
+              lastName: user.personal.lastName,
+              middleName: user.personal.middleName,
+              active: user.active,
+              profilePicLinkOrUUID: user.personal.profilePictureLink ? user.personal.profilePictureLink : '',
+              patronGroup: user.patronGroup
+            };
+          });
+          // console.log("@SearchCustomerOrWitness - refinedList: ", JSON.stringify(refinedList, null, 2))
+          this.context.setCustomers(refinedList);
+          this.context.closeLoadingSearch();
+        });
+    } else {
+      console.log('@fetchCustomer - something went wrong - no data');
+    }
+  };
+
+  render() {
+    return <></>;
+  };
+};
+
+SearchCustomerOrWitness.contextType = IncidentContext;
+SearchCustomerOrWitness.propTypes = {
+  term: PropTypes.string,
+  customer: PropTypes.shape({
+    records: PropTypes.object,
+  }),
+  mutator: PropTypes.shape({
+    customer: PropTypes.shape({
+      GET: PropTypes.func.isRequired,
+    }).isRequired,
+  }).isRequired,
+};
+
+export default stripesConnect(SearchCustomerOrWitness, '@spokane-folio/security-incident');