@spokane-folio/security-incident 1.0.28

package/src/components/incidents/Thumbnail.js

@@ -0,0 +1,72 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button } from '@folio/stripes/components';
+import { 
+  thumbnailContainerStyle, 
+  thumbnailTextStyle,
+  buttonContainerStyle,
+  thumbnailStyle,
+  buttonStyle
+} from './ThumbnailStyles';
+import playButton from '../../../icons/playButton.png';
+
+import { FormattedMessage } from 'react-intl';
+const Thumbnail = React.memo(({ 
+  handler, 
+  mediaId, 
+  src, 
+  alt, 
+  imageDescription, 
+  handleMarkForRemoval,
+  context
+  }) => {
+
+  return (
+    <>
+    <div style={thumbnailContainerStyle}>
+       <button onClick={handler} type="button">
+        {src === 'isVideo' ? (
+         <img 
+            src={playButton} 
+            alt={alt} 
+            style={thumbnailStyle} 
+          />
+        ) : (<img 
+            src={src} 
+            alt={alt} 
+            style={thumbnailStyle} 
+          />)}
+      </button>
+
+      <div style={thumbnailTextStyle}>
+        <p>{imageDescription}</p>
+      </div>
+
+      {context === 'details' ? 
+      <></> : (<div style={buttonContainerStyle}>
+        <Button
+          buttonStyle='default'
+          style={buttonStyle}
+          onClick={() => handleMarkForRemoval(mediaId)}
+          type="button"
+          aria-label={`Remove ${imageDescription}`}
+        >
+          <FormattedMessage id="remove-button" />
+        </Button>
+      </div>)}
+    </div>
+     
+    </>
+  );
+}); 
+
+Thumbnail.propTypes = {
+  handler: PropTypes.func.isRequired,
+  src: PropTypes.string.isRequired,
+  alt: PropTypes.string.isRequired,
+  imageDescription: PropTypes.string.isRequired,
+  style: PropTypes.object.isRequired,
+  contentType: PropTypes.string.isRequired
+};
+
+export default Thumbnail;

package/src/components/incidents/ThumbnailMarkRemoval.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import { Icon, Button } from '@folio/stripes/components'
+import { 
+  thumbnailContainerStyle, 
+  thumbnailTextStyle,
+  buttonContainerStyle,
+  thumbnailStyle,
+  buttonStyle
+} from './ThumbnailStyles';
+const ThumbnailMarkRemoval = ({ handleUndo, undoId }) => {
+  return (
+    <>
+    <div style={thumbnailContainerStyle}>
+      
+      <div style={thumbnailStyle}>
+        <Icon icon='dash'></Icon>
+      </div>
+
+      <div style={thumbnailTextStyle}>
+        <p><FormattedMessage id="media-marked-for-removal"/></p>
+      </div>
+
+      <div style={buttonContainerStyle}>
+        <Button 
+          buttonStyle='default'
+          style={buttonStyle}
+          onClick={() => handleUndo(undoId)}
+        >
+        <FormattedMessage id="undo-button"/>
+      </Button>
+      </div>
+    </div>
+    </>
+  );
+};
+
+export default ThumbnailMarkRemoval;

package/src/components/incidents/ThumbnailSkeleton.js

@@ -0,0 +1,30 @@
+
+import React from 'react';
+import { Loading } from '@folio/stripes/components';
+import { 
+  thumbnailContainerStyle, 
+  buttonStyle
+} from './ThumbnailStyles';
+const ThumbnailSkeleton = () => {
+  return (
+    <>
+    <div style={thumbnailContainerStyle}>
+      
+      <div style={{ marginTop: '45px'}}>
+        <Loading size ='large'/>
+      </div>
+
+      <div style={{ marginTop: '50px'}}>
+        <Loading size ='medium'/>
+      </div>
+
+      <div style={{ marginTop: '40px'}}>
+        <Loading size ='medium' style={buttonStyle}/>
+      </div>
+
+    </div>
+    </>
+  );
+};
+
+export default ThumbnailSkeleton;

package/src/components/incidents/ThumbnailStyles.js

@@ -0,0 +1,49 @@
+
+export const thumbnailContainerStyle = {
+  width: '120px', // Ensure enough space for padding and internal content
+  borderRadius: '4px',
+  margin: '10px',
+  textAlign: 'center',
+  // border: '1px solid #ccc',
+  boxSizing: 'border-box', // Ensure padding is included within the width
+  padding: '10px',
+  display: 'flex',
+  flexDirection: 'column', // Stack elements vertically
+  alignItems: 'center' // Center content within the container
+};
+
+export const thumbnailStyle = {
+  width: '100px', 
+  height: 'auto', 
+  objectFit: 'cover',
+  maxWidth: '100%', // Ensure it stays within the container
+};
+
+export const thumbnailTextStyle = {
+  maxWidth: '100px',
+  overflow: 'hidden',
+  height: '4.4em', // 2 lines of height
+  margin: '5px 0',
+  textAlign: 'center',
+  lineHeight: '1.2em', // Each line is 1.2 times the font size
+  whiteSpace: 'normal',
+  display: 'block', // Ensure block-level for multi-line text
+  textOverflow: 'ellipsis', // Add ellipsis if the text exceeds 2 lines
+};
+
+export const buttonContainerStyle = {
+  marginTop: '10px',
+  textAlign: 'center',
+  width: '100%', // Ensure the button spans the width of the container
+  display: 'flex',
+  justifyContent: 'center', // Center the button horizontally
+};
+
+export const buttonStyle = {
+  marginTop: '-10px',
+  maxWidth: '100%', // Ensure the button doesn't exceed container width
+  padding: '5px 10px', // Add some padding for visual appeal
+  whiteSpace: 'nowrap', // Prevent text from wrapping to the next line
+  overflow: 'hidden', // Hide any overflowed content
+  textOverflow: 'ellipsis', // Show an ellipsis if the text is too long
+};

package/src/components/incidents/ThumbnailTempPreSave.js

@@ -0,0 +1,71 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button, Icon } from '@folio/stripes/components';
+import { 
+  thumbnailContainerStyle, 
+  thumbnailTextStyle,
+  buttonContainerStyle,
+  thumbnailStyle,
+  buttonStyle
+} from './ThumbnailStyles';
+import { FormattedMessage } from 'react-intl';
+const ThumbnailTempPreSave = React.memo(({ 
+  mediaId, 
+  src, 
+  alt, 
+  imageDescription, 
+  handleRemoveUnsavedMedia,
+  handleRemoveUnsavedMediaCreate,
+  context
+  }) => {
+
+  return (
+    <>
+    <div style={thumbnailContainerStyle}>
+      {src === 'isVideo' ? (
+        <div style={thumbnailStyle}>
+          <Icon icon='play' size='large'></Icon>
+        </div>
+      ) 
+      : src === 'isPdf' ? (
+        <div style={thumbnailStyle}>
+          <Icon icon='report' size='large'></Icon>
+        </div>
+      ) :(<img 
+        src={src} 
+        alt={alt} 
+        style={thumbnailStyle} 
+      />)}
+      
+
+      <div style={thumbnailTextStyle}>
+        <p>{imageDescription}</p>
+      </div>
+
+      <div style={buttonContainerStyle}>
+        <Button
+          buttonStyle='default'
+          style={buttonStyle}
+          onClick={context === 'create' ? 
+            () => handleRemoveUnsavedMediaCreate(mediaId) 
+            : () => handleRemoveUnsavedMedia(mediaId)}
+          type="button"
+          aria-label={`Remove ${imageDescription}`}
+        >
+        <FormattedMessage id="remove-button" />
+        </Button>
+      </div>
+    </div>
+    </>
+  );
+}); 
+
+ThumbnailTempPreSave.propTypes = {
+  src: PropTypes.string.isRequired,
+  alt: PropTypes.string.isRequired,
+  imageDescription: PropTypes.string.isRequired,
+  style: PropTypes.object.isRequired,
+  handleRemoveUnsavedMedia: PropTypes.func,
+};
+
+export default ThumbnailTempPreSave;

package/src/components/incidents/UpdateReport.js

@@ -0,0 +1,84 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { stripesConnect } from '@folio/stripes/core';
+import { IncidentContext } from '../../contexts/IncidentContext';
+
+class UpdateReport extends React.Component {
+  static contextType = IncidentContext;
+
+  static manifest = Object.freeze({
+    incident: {
+      type: 'okapi',
+      records: 'incidents',
+      PUT: {
+        path: 'incidents/!{id}',
+      },
+      accumulate: true,
+    },
+  });
+
+  // console.log("manifest _resourceData:", JSON.stringify(_resourceData, null, 2));
+
+  static propTypes = {
+    id: PropTypes.string,
+    data: PropTypes.object,
+    mutator: PropTypes.shape({
+      incident: PropTypes.shape({
+        PUT: PropTypes.func.isRequired,
+      }).isRequired,
+    }).isRequired,
+    handleCloseEdit: PropTypes.func.isRequired,
+  };
+
+  componentDidUpdate(prevProps) {
+    if (this.props.data !== prevProps.data && this.props.id) {
+      this.updateReport(this.props.id, this.props.data);
+    }
+  }
+
+  updateReport = (id, data) => {
+    // handle update report w/ attachments
+    if (this.context.attachmentsData && this.context.attachmentsData.length > 0) { 
+      console.log("EDIT HAS ATTACHMENTS RAN")
+      this.props.mutator.incident
+      .PUT(data)
+      .then(() => {
+        this.context.setIdForMediaCreate(this.props.id);
+        this.context.setFormDataArrayForMediaCreate(this.context.attachmentsData);
+      })
+      .catch((error) => {
+        // this.context.setUseGetList(false);
+        console.error(
+          '@updateReport - WITH Attachments - Error occurred: ',
+          error
+        );
+      });
+    } else {
+      // handle update report w/out attachments
+      this.props.mutator.incident
+        .PUT(data)
+        .then(() => {
+          this.context.setIsLoadingDetails(false);
+          this.context.setIsUpdatingReport(false)
+          this.props.handleCloseEdit();
+          // this.context.setUseGetList(false);
+          // console.log('update successful');
+        })
+        .catch((error) => {
+          // this.context.setUseGetList(false);
+          console.error(
+            '@updateReport - NO Attachments - Error occurred: ',
+            error
+          );
+        });
+    }
+  };
+
+  render() {
+    return <></>;
+  }
+}
+
+UpdateReport.contextType = IncidentContext;
+
+export default stripesConnect(UpdateReport, '@spokane-folio/security-incident');

package/src/components/incidents/__snapshots__/CreatePane.test.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CreatePane renders correctly (snapshot test) 1`] = `"<div defaultwidth="100%" panetitle="[object Object]" footer="[object Object]"><div>Mock ModalDescribeCustomer</div><div>Mock ModalSelectKnownCustomer</div><div>Mock ModalSelectWitness</div><div>Mock GetSelf</div><div>Mock ModalAddMedia</div><div>Mock ModalCustomWitness</div><div>Mock GetTrespassTemplates</div><div>Mock GetLocations</div><div>Mock GetLocationsInService</div><div>Mock GetIncidentTypesDetails</div><div>Mock ModalSelectIncidentTypes</div><div>Mock CreateReport</div><div><button></button><div label="[object Object]"><div><div xs="2" style="margin-top: 10px; margin-left: 10px; margin-bottom: 10px;"><div label="[object Object]" name="customerNa"></div></div></div><div><div xs="3"><button style="margin-top: 10px;"><span>select-add-known-customer-button</span></button></div></div><div><div xs="3" style="margin-top: 10px;"><button><span>describe-add-unknown-customer-button</span></button></div></div><div><div xs="9"><label style="margin-top: 5px;" tag="h2"><b>customers-list-label</b></label><ul liststyle="bullets" label="customers-list-label" items="" isemptymessage="[object Object]"></ul></div></div></div><div label="[object Object]"><div><div xs="3"><select required="" label="[object Object]" name="incidentLocation" dataoptions="[object Object]"></select></div><div xs="3"><select label="[object Object]" name="subLocation" dataoptions=""></select></div></div><div style="margin-top: 25px;"><div xs="3"><input type="date" required="" name="dateOfIncident" label="[object Object]" value="01/01/2020"></div><div xs="2"><input type="time" required="" name="timeOfIncident" label="[object Object]" value="12:00"></div><div xs="2" style="margin-top: 25px;"><div label="Approximate time" name="isApproximateTime"></div></div></div><div><div xs="4"><button style="margin-top: 15px;"><span>create-pane.select-add-incident-type-button</span></button></div></div><div><div xs="4" style="padding-left: 20px;"><label style="margin-top: 5px;" tag="h2"><b>incident-types-list-label</b></label><ul liststyle="bullets" label="incident-types-list-label" items="" isemptymessage="[object Object]"></ul></div></div><div style="margin-top: 25px;"><div xs="6"><textarea required="" label="[object Object]"></textarea></div></div><div><div xs="2" style="padding-top: 25px;"><button><span>select-add-witness-button</span></button></div></div><div><div xs="2" style="padding-top: 25px;"><button><span>add-self-witness-button</span></button></div></div><div><div xs="2" style="padding-top: 25px;"><button><span>add-custom-witness-button</span></button></div></div><div><div xs="6" style="padding-top: 20px;"><label style="margin-top: 5px;" tag="h2"><span>witnesses-list-label</span></label><ul liststyle="bullets" label="witnesses-list-label" items="" isemptymessage="[object Object]"></ul></div></div></div><div label="[object Object]"><div style="margin: 25px;"><div xs="1" style="visibility: hidden;"></div></div><div style="margin-top: 25px;"><div xs="2"><button><span>add-media-button</span></button></div></div></div></div></div>"`;

package/src/components/incidents/__snapshots__/DetailsPane.test.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders without crashing (snapshot) 1`] = `"<div>Mock GetDetails</div><div defaultwidth="fill" panetitle="[object Object]"></div>"`;

package/src/components/incidents/__snapshots__/EditPane.test.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders without crashing (snapshot) 1`] = `"<div>Mock GetDetails</div><div>Mock UpdateReport</div><div panetitle="[object Object]" defaultwidth="fill" footer="[object Object]"><div>Mock GetTrespassTemplates</div><div>Mock GetTrespassReasons</div><div>Mock GetSummary</div><div>Mock ModalCustomWitness</div><div>Mock GetLocationsInService</div><div>Mock GetIncidentTypesDetails</div><div>Mock ModalAddMedia</div><div>Mock ModalDescribeCustomer</div><div>Mock ModalSelectKnownCustomer</div><div>Mock ModalSelectWitness</div><div>Mock ModalSelectIncidentTypes</div><div>Mock GetSelf</div><div><div xs="12"><div><div type="error"><span>message-banner.error-missing-users-404</span></div></div></div></div><div><button></button><div label="[object Object]"><div headinglevel="4" createdby="[object Object]" lastupdatedby="[object Object]"></div><div><div xs="6"><div label="[object Object]" name="staffSuppressed"></div></div></div></div><div label="[object Object]"><div><div xs="2" style="margin-top: 10px; margin-left: 10px; margin-bottom: 10px;"><div label="[object Object]" name="customerNa"></div></div></div><div><div xs="3"><button style="margin-top: 25px;"><span>select-add-known-customer-button</span></button></div></div><div><div xs="3"><button style="margin-top: 25px;"><span>describe-add-unknown-customer-button</span></button></div></div><div><div xs="6"><label style="margin-top: 5px;" tag="h2" id="customer-list-label"><b>customers-list-label</b></label></div></div><div><div xs="12"><ul></ul></div></div></div><div label="[object Object]"><div><div xs="3"><select required="" label="[object Object]" name="incidentLocation" dataoptions="[object Object]"></select></div><div xs="3"><select label="[object Object]" name="subLocation" dataoptions="[object Object]"></select></div></div><div><div xs="3"><input required="" name="dateTimeOfIncident" label="[object Object]" value="2020-01-01T12:00:00Z"></div><div xs="2"><input required="" name="timeOfIncident" label="[object Object]" value="2020-01-01T12:00:00Z"></div><div xs="2" style="margin-top: 25px;"><div label="Approximate time" name="isApproximateTime"></div></div></div><div><div xs="4"><button style="margin-top: 15px;"><span>edit-pane.select-add-incident-type-button</span></button></div></div><div><div xs="8" style="padding-left: 20px;"><label style="margin-top: 5px;" tag="h2"><b>incident-types-list-label</b></label><ul></ul></div></div><div style="margin-top: 25px;"><div xs="6"><textarea required="" label="[object Object]" modules="[object Object]">desc</textarea></div></div><div><div xs="2" style="padding-top: 25px;"><button><span>select-add-witness-button</span></button></div></div><div><div xs="2" style="padding-top: 25px;"><button><span>add-self-witness-button</span></button></div></div><div><div xs="2" style="padding-top: 25px;"><button><span>add-custom-witness-button</span></button></div></div><div><div xs="2" style="padding-top: 25px;"><button><span>link-to-button</span></button></div></div><div><div xs="8"><label style="margin-top: 5px;" tag="h2"><span>witnesses-list-label</span></label><ul></ul></div></div></div><div label="[object Object]"><div></div><div style="margin: 25px;"><div xs="1" style="visibility: hidden;"></div></div><div style="margin: 25px;"><div xs="1" style="visibility: hidden;"></div></div><div style="margin: 25px;"><div xs="1" style="visibility: hidden;"></div></div><div style="margin-top: 25px;"><div xs="2"><button><span>add-media-button</span></button></div></div></div><div label="[object Object]"><div></div><div><div xs="1" style="visibility: hidden;"></div></div></div></div></div>)"`;

package/src/components/incidents/__snapshots__/IncidentTypeCard.test.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders without crashing (snapshot) 1`] = `"<div data-test-card="true"><div data-slot="headerStart"><b>Type 1 - Disorderly</b></div><div data-slot="headerEnd"><button style="margin-top: 10px;">Add</button></div><div data-slot="body">A description of the incident type.</div></div>"`;

package/src/components/incidents/__snapshots__/IncidentsPaneset.test.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders without crashing (snapshot) 1`] = `"<div><div panetitle="[object Object]" defaultwidth="25%"><div>Mock GetIncidentTypesDetails</div><div>Mock GetLocationsInService</div><div>Mock GetLocations</div><div>Mock GetOrgLocaleSettings</div><div style="margin-top: 35px;"><div xs="10"><h2 margin="medium" tag="h2" id="searchField-label">search-pane.searchField-h2-label</h2></div></div><div><div xs="12"><input aria-labelledby="searchField-label" name="term" searchableindexes="[object Object],[object Object],[object Object],[object Object],[object Object]" value=""><div style="margin-top: 45px;"><div xs="10"><h2 margin="medium" tag="h2">search-pane.filters-h2-label</h2></div></div><div label="[object Object]"><div><div xs="10"><div value="" items="" menustyle="[object Object]"></div></div></div><div><div xs="12" style="margin-left: 10px;"><div style="max-height: 125px; overflow-x: clip; overflow-y: auto; margin-top: 8px;"></div><div style="margin-top: 2px;"></div></div></div></div><div label="[object Object]"><div><div xs="10"><div value="" items="" menustyle="[object Object]"></div></div></div><div><div xs="12" style="margin-left: 10px;"><div style="max-height: 125px; overflow-x: clip; overflow-y: auto; margin-top: 8px;"></div><div style="margin-top: 2px;"></div></div></div></div><hr><div style="margin-top: 25px;"><div xs="8"><input label="[object Object]" value=""></div></div><div><div xs="8"><input label="[object Object]" value=""></div></div></div></div><div><div xs="10" style="margin-top: 12px;"><input label="[object Object]" name="startDate" value=""><input label="[object Object]" name="endDate" value=""></div></div><div><div xs="12"><h2 tag="h2" style="margin-top: 15px;">search-pane.trespass-status-label</h2></div></div><div style="margin-top: -15px;"><div xs="12"><input type="radio" label="[object Object]" checked=""></div></div><div><div xs="12"><input type="radio" label="[object Object]"></div></div><div><div xs="12"><input type="radio" label="[object Object]"></div></div><div style="margin-top: 20px;"><div xs="12"><div label="[object Object]"><div><div xs="12"><input type="radio" name="staffSuppress" label="[object Object]" value="non" checked=""></div></div><div><div xs="12"><input type="radio" name="staffSuppress" label="[object Object]" value="suppressed"></div></div><div><div xs="12"><input type="radio" name="staffSuppress" label="[object Object]" value="all"></div></div></div></div></div><div><div xs="12"><button style="margin-top: 23px;" buttonstyle="primary">search-button</button></div></div><div><div xs="12"><button style="background-color: rgb(222, 221, 217);" buttonstyle="disabled"><span icon="times-circle-solid">times-circle-solid</span></button></div></div></div><div>Mock ResultsPane</div></div>"`;

package/src/components/incidents/__snapshots__/ModalAddMedia.test.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ModalAddMedia renders correctly when open (snapshot test) 1`] = `"<div style="min-height: 550px; height: 80%; max-height: 300vh; max-width: 300vw; width: 60%;" open="" label="[object Object]" footer="[object Object]"><div><div defaultwidth="fill"><div><div xs="5"><input type="text" name="description" label="[object Object]" value=""></div></div><div><div xs="6"><input type="file"></div></div><div style="margin-top: 25px;"><div xs="8"><div type="error"><span>modal-add-media-error-msg-default</span></div></div></div></div></div></div>"`;

package/src/components/incidents/__snapshots__/ModalCustomerDetails.test.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ModalCustomerDetails renders correctly when open (snapshot test) 1`] = `"<div style="min-height: 250px; height: 80%; max-height: 300vh; max-width: 300vw; width: 70%;" open="" label="[object Object]" footer="[object Object]" contentclass="modalContent"><div><div defaultwidth="100%"><div><div label="[object Object]"><div><div xs="3"><input type="text" name="firstName" label="[object Object]" value="John"></div></div><div><div xs="3"><input type="text" name="lastName" label="[object Object]" value="Doe"></div></div><div><div xs="6"><textarea label="[object Object]" modules="[object Object]" required="">Test description</textarea></div></div></div><div label="[object Object]"><div><div xs="2"><input type="text" label="[object Object]" name="sex" value=""></div><div xs="2"><input type="text" label="[object Object]" name="race" value=""></div><div xs="2"><input type="text" label="[object Object]" name="height" value=""></div></div><div><div xs="2"><input type="text" label="[object Object]" name="weight" value=""></div><div xs="2"><input type="text" label="[object Object]" name="hair" value=""></div><div xs="2"><input type="text" label="[object Object]" name="eyes" value=""></div></div><div><div xs="3"><input type="date" label="[object Object]" name="dateOfBirth" value=""></div></div><div><div xs="4"><input type="text" label="[object Object]" name="streetAddress" value=""></div><div xs="2"><input type="text" label="[object Object]" name="city" value=""></div></div><div style="margin-bottom: 100px;"><div xs="2"><input type="text" label="[object Object]" name="state" value=""></div><div xs="2"><input type="text" label="[object Object]" name="zipcode" value=""></div></div></div></div></div></div></div>"`;

package/src/components/incidents/__snapshots__/ModalSelectWitness.test.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders open modal with search + results (snapshot) 1`] = `"<div data-modal="true"><div data-modal-body="true"><div>Mock GetPatronGroups</div><div class="modalBody"><div data-paneset="true"><div data-pane="true"><div><input placeholder="Name or barcode"><button><span>search-button</span></button></div></div><div data-pane="true"><div data-pane-header="true">modal-select-witness.results-pane.paneSubTitle</div><div><div class="mclContainer"><table data-mcl="true"><tbody><tr><td data-col="name">Public, Jane Q</td><td data-col="active"><p><span>modal-select-customer.resultsFormatter-active</span></p></td><td data-col="patronGroup">Staff</td><td data-col="barcode">111</td><td data-col="profilePicLinkOrUUID"><div style="height: 100%; width: 100%; display: flex; justify-content: center; align-items: center;"><div style="width: 100px; height: 100px; display: flex; align-items: center; justify-content: center;"><div data-profile-picture="true">uuid-111</div></div></div></td><td data-col="id"><button>Add</button></td></tr><tr><td data-col="name">Doe, John</td><td data-col="active"><p><span>modal-select-customer.resultsFormatter-inactive</span></p></td><td data-col="patronGroup">Visitor</td><td data-col="barcode">222</td><td data-col="profilePicLinkOrUUID"><div style="height: 100%; width: 100%; display: flex; justify-content: center; align-items: center;"><div style="width: 100px; height: 100px; display: flex; align-items: center; justify-content: center;"><div data-profile-picture="true">uuid-222</div></div></div></td><td data-col="id"><button>Add</button></td></tr></tbody></table></div></div></div></div></div></div><div data-modal-footer="true"><button id="close-continue-button"><span>close-continue-button</span></button><button><span>cancel-button</span></button></div></div>"`;

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

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders without crashing (snapshot) 1`] = `"<div panetitle="[object Object]" id="results-pane" defaultwidth="75%"><div>Mock GetIncidentTypesDetails</div><div style="height: 80vh; width: auto;"><div sortablefields="customers,incidentLocation,dateOfIncident,incidentTypes,incidentWitnesses,createdBy,trespassExpirationDates" sortedcolumn="" sortdirection="ascending" contentdata="" pageamount="20" totalcount="0" pagingoffset="0" pagingtype="prev-next" formatter="[object Object]" visiblecolumns="customers,incidentLocation" columnmapping="[object Object]" columnwidths="[object Object]"></div></div></div>"`;

package/src/components/incidents/helpers/ProfilePicture/ProfilePicture.css

@@ -0,0 +1,5 @@
+.profilePlaceholder {
+  max-width: 100px;
+  max-height: 100px;
+  object-fit: scale-down;
+}

package/src/components/incidents/helpers/ProfilePicture/ProfilePicture.js

@@ -0,0 +1,51 @@
+/* 
+  ProfilePicture - a Track app vendored and slightly scoped down copy 
+  of the ProfilePicture as seen in the @folio/stripes-smart-components v10.0.2.
+*/
+import { useIntl } from 'react-intl';
+import PropTypes from 'prop-types';
+import { Img } from 'react-image';
+import { Loading } from '@folio/stripes/components';
+import { isAValidURL } from './isAValidURL';
+import profilePicThumbnail from '../../../../../icons/profilePicThumbnail.png';
+import useProfilePicture from './useProfilePicture';
+import css from './ProfilePicture.css';
+
+const ProfilePicture = ({ profilePictureLink, croppedLocalImage }) => {
+  /* 
+    croppedLocalImage is not used in Track (read only for ProfilePicture)
+    keeping prop and logic path for API parity so potential future comparisons or upgrades remain predictable. 
+  */
+  const intl = useIntl();
+
+  const { isFetching, profilePictureData } = useProfilePicture({ profilePictureId: profilePictureLink });
+
+  const hasProfilePicture = Boolean(croppedLocalImage) || Boolean(profilePictureLink);
+
+  const isProfilePictureLinkAURL = hasProfilePicture && isAValidURL(profilePictureLink);
+
+  const profilePictureSrc = croppedLocalImage || (isProfilePictureLinkAURL ? profilePictureLink : 'data:;base64,' + profilePictureData);
+  
+  const imgSrc = !hasProfilePicture ? profilePicThumbnail : profilePictureSrc;
+
+  if (isFetching) {
+    return <span data-testid="profile-picture-loader"> <Loading /> </span>;
+  }
+
+  return (
+    <Img
+      data-testid="profile-picture"
+      className={css.profilePlaceholder}
+      alt={intl.formatMessage({ id: 'ui-users.information.profilePicture' })}
+      src={imgSrc}
+      loader={<Loading />}
+    />
+  );
+};
+
+ProfilePicture.propTypes = {
+  profilePictureLink: PropTypes.string,
+  croppedLocalImage: PropTypes.string,
+};
+
+export default ProfilePicture;

package/src/components/incidents/helpers/ProfilePicture/isAValidURL.js

@@ -0,0 +1,3 @@
+export const isAValidURL = (str) => {
+  return URL.canParse(str);
+};

package/src/components/incidents/helpers/ProfilePicture/useProfilePicture.js

@@ -0,0 +1,127 @@
+import { useEffect, useRef, useState, useCallback } from 'react';
+import { useStripes } from '@folio/stripes/core';
+
+// lightweight uuid check
+const looksLikeUUID = (s) =>
+  typeof s === 'string' &&
+  /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i.test(s);
+
+const API_BASE = 'users/profile-picture';
+
+// session cache
+const cache = new Map();
+
+/**
+ * fetch profile picture for a given UUID.
+ * returns { isFetching, isLoading, profilePictureData (base64), error, reload }
+ *
+ * - returns base64 only; <ProfilePicture /> caller builds 
+ *  the data: URI at its profilePictureSrc 
+ * 
+ * - 404 is treated as "no picture", not an error (returns empty string).
+ * - uses Okapi headers from stripes context by default; can be overridden via options -> Track app doesn't make use of these options, but keeping as a zero cost potential future alignment with FOLIO upstream
+ */
+export default function useProfilePicture(
+  { profilePictureId },
+  options = {} // { baseUrl, tenant, token, enabled, disableCache }
+) {
+  const stripes = typeof useStripes === 'function' ? useStripes() : null;
+
+  const okapiUrl = options.baseUrl ?? stripes?.okapi?.url;
+  const okapiTenant = options.tenant ?? stripes?.okapi?.tenant;
+  const okapiToken = options.token ?? stripes?.okapi?.token;
+  const disableCache = Boolean(options.disableCache);
+
+  const enabled =
+    (options.enabled ?? true) &&
+    Boolean(profilePictureId) &&
+    looksLikeUUID(profilePictureId) &&
+    Boolean(okapiUrl) &&
+    Boolean(okapiTenant);
+
+  const [isFetching, setIsFetching] = useState(false);
+  const [profilePictureData, setProfilePictureData] = useState(
+    (!disableCache && cache.get(profilePictureId)) || ''
+  );
+  const [error, setError] = useState(null);
+
+  // bump this to force re-fetch
+  const [nonce, setNonce] = useState(0);
+  const abortRef = useRef(null);
+
+  const reload = useCallback(() => {
+    if (!disableCache) cache.delete(profilePictureId);
+    setNonce((n) => n + 1);
+  }, [profilePictureId, disableCache]);
+
+  useEffect(() => {
+    if (!enabled) {
+      setIsFetching(false);
+      setError(null);
+      // don't wipe data; allows graceful fallback
+      return;
+    }
+
+    if (!disableCache && cache.has(profilePictureId)) {
+      setProfilePictureData(cache.get(profilePictureId));
+      setIsFetching(false);
+      setError(null);
+      return;
+    }
+
+    setIsFetching(true);
+    setError(null);
+
+    // cancel any in-flight request
+    if (abortRef.current) abortRef.current.abort();
+    const controller = new AbortController();
+    abortRef.current = controller;
+
+    const url = `${okapiUrl.replace(/\/$/, '')}/${API_BASE}/${profilePictureId}`;
+
+    fetch(url, {
+      method: 'GET',
+      headers: {
+        'X-Okapi-Tenant': okapiTenant,
+        ...(okapiToken ? { 'X-Okapi-Token': okapiToken } : {}),
+        'Accept': 'application/json',
+      },
+      signal: controller.signal,
+    })
+      .then(async (res) => {
+        if (res.status === 404) return null; // no picture set
+        if (!res.ok) {
+          const text = await res.text().catch(() => '');
+          throw new Error(`GET ${API_BASE}/${profilePictureId} failed: ${res.status} ${text}`);
+        }
+        return res.json();
+      })
+      .then((json) => {
+        if (!json) {
+          setProfilePictureData('');
+          return;
+        }
+        // payload key in Users: profile_picture_blob
+        const b64 = json.profile_picture_blob ?? '';
+        const val = typeof b64 === 'string' ? b64 : '';
+        if (!disableCache) cache.set(profilePictureId, val);
+        setProfilePictureData(val);
+      })
+      .catch((e) => {
+        if (e.name !== 'AbortError') setError(e);
+      })
+      .finally(() => setIsFetching(false));
+
+    return () => controller.abort();
+  }, [
+    enabled,
+    okapiUrl,
+    okapiTenant,
+    okapiToken,
+    profilePictureId,
+    disableCache,
+    nonce, // triggers reload
+  ]);
+
+  return { isFetching, isLoading: isFetching, profilePictureData, error, reload };
+}

package/src/components/incidents/helpers/buildQueryString.js

@@ -0,0 +1,28 @@
+export default function buildQueryString(
+    filtersOrFull = {},
+    sort = '',
+    dir  = 'asc'
+  ) {
+    // support old signature: buildQueryString({ a:1, b:2 })
+    const filters = typeof filtersOrFull === 'object' && !Array.isArray(filtersOrFull)
+      ? filtersOrFull
+      : {};
+
+    const p = new URLSearchParams();
+
+    // canonical order
+    Object.keys(filters).sort().forEach(k => {
+      const v = filters[k];
+      if (v !== undefined && v !== null && v !== '') p.set(k, v);
+    });
+
+    // if (sort) p.set('sort', sort);
+    // if (dir)  p.set('dir',  dir);
+
+    if (sort !== '') {
+      p.set('sort', sort); // only when column name is supplied
+      if (dir) p.set('dir', dir) // then only add dir
+    }
+
+    return p.toString();
+}