@spokane-folio/security-incident 1.0.28

package/src/components/incidents/GetNameCreatedBy.js

@@ -0,0 +1,94 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { stripesConnect } from '@folio/stripes/core';
+import { IncidentContext } from '../../contexts/IncidentContext';
+
+class GetNameCreatedBy extends React.Component {
+  static contextType = IncidentContext;
+  static manifest = Object.freeze({
+    customer: {
+      type: 'okapi',
+      accumulate: true,
+      throwErrors: false // handle 4xx/5xx errors on our own
+    },
+  });
+
+  static propTypes = {
+    context: PropTypes.string,
+    uuid: PropTypes.string,
+    customer: PropTypes.shape({
+      record: PropTypes.object,
+    }),
+    handleGetCreatedByName: PropTypes.func,
+    mutator: PropTypes.shape({
+      customer: PropTypes.shape({
+        GET: PropTypes.func.isRequired,
+      }).isRequired,
+    }).isRequired,
+  };
+
+  componentDidMount() {
+    this.fetchNameCreatedBy(this.props.uuid);
+  };
+
+  componentDidUpdate(prevProps) {
+    if (this.props.uuid !== prevProps.uuid) {
+      this.fetchNameCreatedBy(this.props.uuid);
+    }
+  };
+
+  fetchNameCreatedBy(paramsId) {
+    const idToFetch = paramsId || this.props.uuid
+
+    if (idToFetch !== '') {
+      this.props.mutator.customer
+      .GET({ path: `users/${this.props.uuid}` })
+      .then((response) => {
+        if (response && response.httpStatus === 404) {
+          console.log(`@GetNameCreatedBy: user for uuid="${this.props.uuid}" not found.`);
+          return;
+        };
+
+        if (response && response.id) {
+          const refinedRecord = {
+            id: response.id,
+            barcode: response.barcode,
+            firstName: response.personal.firstName,
+            lastName: response.personal.lastName,
+          };
+          this.props.handleGetCreatedByName(refinedRecord);
+        };
+      })
+      .catch((error) => {
+        // if stripes-connect rejects the promise
+        if (error?.httpStatus === 404) {
+          console.log(`@GetNameCreatedBy: user for uuid="${this.props.uuid}" not found in.`);
+          this.props.handleMissingUsers(this.props.uuid)
+          return;
+        }
+        console.error('@GetNameCreatedBy: unhandled error fetching user:', error);
+      })
+    } else {
+      console.log('@fetchNameCreatedBy - something went wrong - no data');
+    };
+  };
+
+ render() {
+    return null;
+  };
+};
+
+GetNameCreatedBy.contextType = IncidentContext;
+GetNameCreatedBy.propTypes = {
+  uuid: PropTypes.string,
+  customer: PropTypes.shape({
+    record: PropTypes.object,
+  }),
+  mutator: PropTypes.shape({
+    customer: PropTypes.shape({
+      GET: PropTypes.func.isRequired,
+    }).isRequired,
+  }).isRequired,
+};
+
+export default stripesConnect(GetNameCreatedBy, '@spokane-folio/security-incident');

package/src/components/incidents/GetOrgLocaleSettings.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { stripesConnect } from '@folio/stripes/core';
+import { IncidentContext } from '../../contexts/IncidentContext';
+
+
+
+class GetOrgLocaleSettings extends React.Component {
+  static contextType = IncidentContext;
+  static manifest = Object.freeze({
+    localeSettings: {
+      type: 'okapi',
+      path: 'configurations/entries?query=module==ORG and configName==localeSettings and enabled=true'
+    },
+  });
+
+  static propTypes = {
+    localeSettings: PropTypes.shape({
+      records: PropTypes.arrayOf(PropTypes.object),
+    }),
+    resources: PropTypes.object.isRequired
+  };
+
+  componentDidMount() {
+    this.fetchOrgTimezone();
+  }
+
+  componentDidUpdate(prevProps) {
+    this.fetchOrgTimezone(prevProps);
+  }
+
+  fetchOrgTimezone(prevProps = {}) {
+    const currentResources = this.props.resources || {};
+    const prevResources = prevProps.resources || {};
+    const currentLocaleSettings = currentResources.localeSettings;
+    const prevLocaleSettings = prevResources.localeSettings;
+    if (currentLocaleSettings && currentLocaleSettings !== prevLocaleSettings) {
+      try {
+        const localeSettingsRecords = currentLocaleSettings.records;
+        if (localeSettingsRecords && localeSettingsRecords.length > 0) {
+          const orgTimezone = JSON.parse(localeSettingsRecords[0].configs[0].value).timezone;
+          this.context.setOrganizationTimezone(orgTimezone);
+        }
+      } catch (error) {
+        // placeholder
+        console.log('@fetchOrgTimezone - error parsing: ', error.message);
+      }
+    } else {
+      // no new loaded data yet. prev logged here, but removed to reduce noise in console
+      return;
+    };
+  };
+
+  render() {
+    return <></>;
+  };
+};
+
+GetOrgLocaleSettings.contextType = IncidentContext;
+
+export default stripesConnect(GetOrgLocaleSettings, '@spokane-folio/security-incident');

package/src/components/incidents/GetPatronGroups.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { stripesConnect } from '@folio/stripes/core';
+import { IncidentContext } from '../../contexts/IncidentContext';
+
+class GetPatronGroups extends React.Component {
+  static contextType = IncidentContext;
+
+  static manifest = Object.freeze({
+    patronGroups: {
+      type: 'okapi',
+      accumulate: true,
+    },
+  });
+
+  static propTypes = {
+    context: PropTypes.string,
+    uuid: PropTypes.string,
+    patronGroups: PropTypes.shape({
+      records: PropTypes.object,
+    }),
+    mutator: PropTypes.shape({
+      patronGroups: PropTypes.shape({
+        GET: PropTypes.func.isRequired,
+      }).isRequired,
+    }).isRequired,
+  };
+
+  componentDidMount() {
+   this.fetchPatronGroups();
+  };
+
+  fetchPatronGroups() {
+    this.props.mutator.patronGroups
+    .GET({ path: `groups?query=cql.allRecords=1%20sortby%20group&limit=2000`})
+    .then((records) => {
+      const titlesAndIds = records.usergroups.map((pg) => {
+        return {
+          id: pg.id,
+          group: pg.group
+        }
+      });
+      this.props.setPatronGroups(titlesAndIds)
+    })
+  };
+
+  render() {
+    return null;
+  };
+};
+
+export default stripesConnect(GetPatronGroups, '@spokane-folio/security-incident');

package/src/components/incidents/GetSelf.js

@@ -0,0 +1,65 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { stripesConnect } from '@folio/stripes/core';
+import { IncidentContext } from '../../contexts/IncidentContext';
+
+class GetSelf extends React.Component {
+  static contextType = IncidentContext;
+
+  static manifest = Object.freeze({
+    self: {
+      type: 'okapi',
+      accumulate: true,
+    },
+  });
+
+  static propTypes = {
+    self: PropTypes.shape({
+      records: PropTypes.object,
+    }),
+    mutator: PropTypes.shape({
+      self: PropTypes.shape({
+        GET: PropTypes.func.isRequired,
+      }).isRequired,
+    }).isRequired,
+  };
+
+  componentDidMount() {
+    this.fetchSelf();
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.self !== prevProps.self) {
+      this.fetchSelf();
+    }
+  }
+
+  fetchSelf() {
+    this.props.mutator.self
+      .GET({ path: `bl-users/_self` })
+      .then((records) => {
+        const self = records.user;
+        const refinedSelf = {
+          id: self.id,
+          lastName: self.personal.lastName,
+          firstName: self.personal.firstName,
+          barcode: self.barcode ? self.barcode : '',
+        };
+        this.context.setSelf(refinedSelf);
+      })
+      .catch((error) => {
+        console.log(
+          '@fetchSelf - something went wrong - no data. Error: ',
+          JSON.stringify(error, null, 2)
+        );
+      });
+  }
+
+  render() {
+    return <></>;
+  }
+}
+
+GetSelf.contextType = IncidentContext;
+
+export default stripesConnect(GetSelf, '@spokane-folio/security-incident');

package/src/components/incidents/GetSummary.js

@@ -0,0 +1,110 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { stripesConnect } from '@folio/stripes/core';
+import { getHeaderWithCredentials } from '@folio/stripes/util';
+import { IncidentContext } from '../../contexts/IncidentContext';
+
+class GetSummary extends React.Component {
+  static contextType = IncidentContext;
+
+  static propTypes = {
+    stripes: PropTypes.object.isRequired,
+    ids: PropTypes.arrayOf(PropTypes.string).isRequired, 
+    onResult: PropTypes.func.isRequired,                  
+  };
+
+  constructor(props) {
+    super(props);
+    this.okapiURL = props.stripes.okapi.url;
+    this._isMounted = false;
+    this._lastIdsSignature = this.makeIdsSignature(props.ids);
+    this._abortController = null;
+  }
+
+  componentDidMount() {
+    this._isMounted = true;
+    this.fetchIncidentSummaries(this.props.ids);
+  }
+
+  componentDidUpdate(prevProps) {
+    const prevSig = this.makeIdsSignature(prevProps.ids);
+    const nextSig = this.makeIdsSignature(this.props.ids);
+
+    if (prevSig !== nextSig) {
+      this._lastIdsSignature = nextSig;
+      this.fetchIncidentSummaries(this.props.ids);
+    }
+  }
+
+  componentWillUnmount() {
+    this._isMounted = false;
+    if (this._abortController) this._abortController.abort();
+  }
+
+  makeIdsSignature = (idsInput) => {
+    // normalize -> sort unique array -> JSON string
+    const arr = Array.isArray(idsInput) ? idsInput : Array.from(idsInput || []);
+    const uniqSorted = Array.from(new Set(arr)).sort();
+    return JSON.stringify(uniqSorted);
+  };
+
+  fetchIncidentSummaries = async (idsInput) => {
+    const ids = Array.isArray(idsInput) ? idsInput : Array.from(idsInput || []);
+    if (!ids.length) {
+      this.props.onResult([]);
+      return;
+    }
+
+    // cancel any in-flight batch
+    if (this._abortController) this._abortController.abort();
+    this._abortController = new AbortController();
+
+    const credsObj = getHeaderWithCredentials(this.props.stripes.okapi);
+    const headers = { ...credsObj.headers }; 
+
+    try {
+      // TODO set open for loading spinner on linkedTo UI list 
+
+      const fetchOne = async (id) => {
+        const resp = await fetch(`${this.okapiURL}/incidents/${id}`, {
+          ...credsObj,
+          headers,
+          signal: this._abortController.signal,
+        });
+        if (!resp.ok) throw new Error(`GET /incidents/${id} -> ${resp.status}`);
+        const json = await resp.json();
+
+        // prefer server-provided preview; fallback builds a minimal preview
+        const customers =
+          (json.previewForLinkedToUI?.customers) ||
+          (json.customers || []).map(c => c.customerNameLabel || '').filter(Boolean);
+
+        return {
+          id: json.previewForLinkedToUI?.id || json.id,
+          createdDate:
+            json.previewForLinkedToUI?.createdDate ||
+            json.metadata?.createdDate ||
+            null,
+          customers,
+        };
+      };
+
+      const summaries = await Promise.all(ids.map(fetchOne));
+
+      if (this._isMounted) this.props.onResult(summaries);
+    } catch (err) {
+      if (err.name !== 'AbortError') {
+        console.error('GetSummary: fetch failed', err);
+        if (this._isMounted) this.props.onResult([]);
+      }
+    } finally {
+      // TODO set close for loading spinner on linkedTo UI list 
+    }
+  };
+
+  render() {
+    return null; 
+  };
+};
+
+export default stripesConnect(GetSummary, '@spokane-folio/security-incident');

package/src/components/incidents/IncidentTypeCard.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Card, Button, Icon } from '@folio/stripes/components';
+
+const IncidentTypeCard = ({
+  handleTypeToggle,
+  id,
+  category_id,
+  title,
+  description,
+  isSelected,
+}) => {
+  const typeData = {
+    id,
+    title,
+    category_id,
+    description,
+  };
+
+  const handleClick = () => {
+    handleTypeToggle(typeData);
+  };
+
+  return (
+    <Card
+      style={{ height: '210px', overflow: 'auto' }}
+      roundedBorder
+      headerStart={<b>{title}</b>}
+      headerEnd={
+        <Button
+          buttonStyle={isSelected ? 'success' : 'primary'}
+          style={{ marginTop: '10px' }}
+          onClick={handleClick}
+        >
+          {isSelected ? <Icon icon="check-circle" size="large" /> : 'Add'}
+        </Button>
+      }
+    >
+      {description}
+    </Card>
+  );
+};
+
+IncidentTypeCard.propTypes = {
+  handleTypeToggle: PropTypes.func.isRequired,
+  id: PropTypes.string.isRequired,
+  category_id: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string.isRequired,
+  isSelected: PropTypes.bool.isRequired,
+};
+
+export default IncidentTypeCard;

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

@@ -0,0 +1,133 @@
+/**
+ * IncidentTypeCard.test.js
+ * Snapshot + smoke + basic interaction tests for IncidentTypeCard.
+ */
+import React, { act } from 'react';
+import { createRoot } from 'react-dom/client';
+import IncidentTypeCard from './IncidentTypeCard';
+
+/* ------------------------------------------------------------------ *
+ * stripes/components mock
+ * ------------------------------------------------------------------ */
+jest.mock('@folio/stripes/components', () => {
+  const React = require('react');
+
+  // Render Card's headerStart, headerEnd, and children so they appear in the DOM
+  const Card = (p) => (
+    <div data-test-card>
+      <div data-slot="headerStart">{p.headerStart}</div>
+      <div data-slot="headerEnd">{p.headerEnd}</div>
+      <div data-slot="body">{p.children}</div>
+    </div>
+  );
+
+  // Strip unknown DOM props like buttonStyle to avoid warnings
+  const Button = ({ buttonStyle, ...rest }) => <button {...rest}>{rest.children}</button>;
+
+  // Show the icon name in the DOM for assertions
+  const Icon = ({ icon, ...rest }) => <span {...rest}>{icon}</span>;
+
+  return { Card, Button, Icon };
+});
+
+/* ------------------------------------------------------------------ *
+ * DOM setup / teardown
+ * ------------------------------------------------------------------ */
+let container, root;
+beforeEach(() => {
+  container = document.createElement('div');
+  document.body.appendChild(container);
+  root = createRoot(container);
+});
+afterEach(async () => {
+  await act(async () => {
+    root.unmount();
+  });
+  document.body.removeChild(container);
+  container = null;
+});
+
+/* ------------------------------------------------------------------ *
+ * helpers
+ * ------------------------------------------------------------------ */
+const findButton = (rootEl) => rootEl.querySelector('button');
+
+/* ------------------------------------------------------------------ *
+ * fixtures
+ * ------------------------------------------------------------------ */
+const baseProps = {
+  handleTypeToggle: jest.fn(),
+  id: 't1',
+  category_id: 'cat-1',
+  title: 'Type 1 - Disorderly',
+  description: 'A description of the incident type.',
+};
+
+/* ------------------------------------------------------------------ *
+ * tests
+ * ------------------------------------------------------------------ */
+it('renders without crashing (snapshot)', async () => {
+  await act(async () => {
+    root.render(<IncidentTypeCard {...baseProps} isSelected={false} />);
+  });
+  expect(container.innerHTML).toMatchSnapshot();
+});
+
+it('shows "Add" when not selected', async () => {
+  await act(async () => {
+    root.render(<IncidentTypeCard {...baseProps} isSelected={false} />);
+  });
+
+  // title in headerStart
+  expect(container.textContent).toContain('Type 1 - Disorderly');
+  // description in body
+  expect(container.textContent).toContain('A description of the incident type.');
+
+  // Button should say "Add"
+  const btn = findButton(container);
+  expect(btn).toBeTruthy();
+  expect(btn.textContent).toContain('Add');
+  // Should not show the check icon name
+  expect(container.textContent).not.toContain('check-circle');
+});
+
+it('shows a check icon when selected', async () => {
+  await act(async () => {
+    root.render(<IncidentTypeCard {...baseProps} isSelected={true} />);
+  });
+
+  const btn = findButton(container);
+  expect(btn).toBeTruthy();
+  // Our Icon mock renders its `icon` prop as text
+  expect(btn.textContent).toContain('check-circle');
+  // Should not show "Add"
+  expect(btn.textContent).not.toContain('Add');
+});
+
+it('calls handleTypeToggle with the correct type data when clicked', async () => {
+  const handleTypeToggle = jest.fn();
+  await act(async () => {
+    root.render(
+      <IncidentTypeCard
+        {...baseProps}
+        handleTypeToggle={handleTypeToggle}
+        isSelected={false}
+      />
+    );
+  });
+
+  const btn = findButton(container);
+  expect(btn).toBeTruthy();
+
+  await act(async () => {
+    btn.click();
+  });
+
+  expect(handleTypeToggle).toHaveBeenCalledTimes(1);
+  expect(handleTypeToggle).toHaveBeenCalledWith({
+    id: 't1',
+    title: 'Type 1 - Disorderly',
+    category_id: 'cat-1',
+    description: 'A description of the incident type.',
+  });
+});