@spokane-folio/security-incident 1.0.28

package/src/components/incidents/usePersistedColumns.js

@@ -0,0 +1,70 @@
+import React, { useState, useCallback, useEffect } from 'react';
+
+export const STORAGE_KEY = 'ui-secinci-visible-columns';
+
+export default function usePersistedColumns(possibleColumns) {
+  // walk through the canonical list and retain only the columns that are currently visible, in their canonical order
+  const reorderToCanonical = (columns, canonicalOrder) =>
+    canonicalOrder.filter(col => columns.includes(col));
+
+  const [visibleColumns, setVisibleColumns] = useState(() => {
+    // load from sessionStorage
+    const stored = sessionStorage.getItem(STORAGE_KEY);
+
+    try {
+      const parsed = JSON.parse(stored);
+      // keep only valid column IDs
+      const filtered = Array.isArray(parsed) && parsed.length
+        ? parsed.filter(col => possibleColumns.includes(col))
+        : possibleColumns;
+
+      // initialize with canon
+      return reorderToCanonical(filtered, possibleColumns);
+    } catch {
+      return possibleColumns;
+    }
+  });
+
+  // sync visibleColumns from sessionStorage on each mount/render
+  useEffect(() => {
+    const stored = sessionStorage.getItem(STORAGE_KEY);
+
+    try {
+      const parsed = JSON.parse(stored);
+      const filtered = Array.isArray(parsed) && parsed.length
+        ? parsed.filter(col => possibleColumns.includes(col))
+        : possibleColumns;
+
+      const canonical = reorderToCanonical(filtered, possibleColumns);
+      setVisibleColumns((current) => {
+        const joined = (arr) => arr.join('|');
+        return joined(current) === joined(canonical) ? current : canonical;
+      });
+    } catch {
+      setVisibleColumns(possibleColumns);
+    }
+  }, [possibleColumns]);
+
+  const toggleColumn = useCallback((colId) => {
+    setVisibleColumns(prev => {
+      const isRemoving = prev.includes(colId);
+      // const isLastOne = prev.length === 1;
+
+      // if (isRemoving && isLastOne) {
+      //   return prev;
+      // }
+
+      let next = isRemoving
+        ? prev.filter(c => c !== colId)
+        : [...prev, colId];
+
+      // return enforced canonical order after every toggle, regardless of toggle sequence
+      next = reorderToCanonical(next, possibleColumns);
+
+      sessionStorage.setItem(STORAGE_KEY, JSON.stringify(next));
+      return next;
+    });
+  }, [possibleColumns]);
+
+  return [visibleColumns, toggleColumn];
+}

package/src/components/incidents/usePersistedSort.js

@@ -0,0 +1,23 @@
+import { useState } from 'react';
+
+export default function usePersistedSort() {
+  const [sortColumn, setCol] = useState('');
+  const [sortDirection, setDir] = useState('asc');
+
+  const toggleSort = (col) => {
+    if (col === sortColumn) {
+      setDir(d => (d === 'asc' ? 'desc' : 'asc'));
+    } else {
+      setCol(col);
+      setDir('asc');
+    }
+  };
+
+  return { 
+    sortColumn, 
+    sortDirection, 
+    toggleSort, 
+    setSortColumn : setCol, 
+    setSortDirection : setDir
+  };
+}

package/src/components/incidents/usePersistedSortModalLink.js

@@ -0,0 +1,23 @@
+import { useState } from 'react';
+
+export default function usePersistedSortModalLink() {
+  const [sortColumn, setCol] = useState('');
+  const [sortDirection, setDir] = useState('asc');
+
+  const toggleSort = (col) => {
+    if (col === sortColumn) {
+      setDir(d => (d === 'asc' ? 'desc' : 'asc'));
+    } else {
+      setCol(col);
+      setDir('asc');
+    }
+  };
+
+  return { 
+    sortColumn, 
+    sortDirection, 
+    toggleSort, 
+    setSortColumn : setCol, 
+    setSortDirection : setDir
+  };
+}

package/src/contexts/IncidentContext.js

@@ -0,0 +1,433 @@
+
+import React, { createContext, useState, useContext, useEffect } from 'react';
+// export for class components
+export const IncidentContext = createContext(); 
+// export for function components
+export const useIncidents =  () => useContext(IncidentContext); 
+
+export const IncidentProvider = ({ children }) => {
+  // data
+  const [incidentsList, setIncidentsList] = useState([]);
+  const [singleIncident, setSingleIncident] = useState({});
+  const [incidentTypesList, setIncidentTypesList] = useState([])
+  const [incidentTypesNamesIdsList, setIncidentTypesNamesIdsList] = useState([]); 
+  const [locations, setLocations] = useState([]);
+  const [customers, setCustomers] = useState([]);
+  const [self, setSelf] = useState({})
+  const [selectedCustomers, setSelectedCustomers] = useState([]);
+  const [selectedWitnesses, setSelectedWitnesses] = useState([]);
+  const [selectedTrespassWitnesses, setSelectedTrespassWitnesses] = useState([]);
+  const [describedCustomers, setDescribedCustomers] = useState([]);
+  const [attachmentsData, setAttachmentsData] = useState([]); 
+  const [idForMediaCreate, setIdForMediaCreate] = useState(null);
+  const [formDataArrayForMediaCreate, setFormDataArrayForMediaCreate] = useState(null);
+  const [modalErrorContent, setModalErrorContent] = useState("");
+  const [locationsInService, setLocationsInService] = useState([]);
+  const [incidentCategories, setIncidentCategories] = useState([]);
+  const [trespassTemplates, setTrespassTemplates] = useState([]);
+  const [trespassReasons, setTrespassReasons] = useState([]);
+  const [organizationTimezone, setOrganizationTimezone] = useState('');
+
+  // toggle
+  const [isDetailsPaneOpen, setIsDetailsPaneOpen] = useState(false);
+  const [isEditPaneOpen, setIsEditPaneOpen] = useState(false);
+  const [isCreatePaneOpen, setIsCreatePaneOpen] = useState(false);
+  const [isModalSelectTypesOpen, setIsModalSelectTypesOpen] = useState(false);
+  const [isModalUnknownCustOpen, setIsModalUnknownCustOpen] = useState(false);
+  const [isModalSelectKnownCustOpen, setIsModalSelectKnownCustOpen] = useState(false);
+  const [isModalSelectWitness, setIsModalSelectWitness] = useState(false);
+  const [isModalDeleteDescCustOpen, setIsModalDeleteDescCustOpen] = useState(false);
+  const [isModalCustomerDetails, setIsModalCustomerDetails] = useState(false);
+  const [isModalViewCustomerDetails, setIsModalViewCustomerDetails] = useState(false);
+  const [isModalTrespass, setIsModalTrespass] = useState(false);
+  const [isModalViewTrespass, setIsModalViewTrespass] = useState(false);
+  const [isModalMedia, setIsModalMedia] = useState(false);
+  const [isModalViewImage, setIsModalViewImage] = useState(false);
+  const [isModalViewDocument, setIsModalViewDocument] = useState(false);
+  const [isModalCustomWitness, setIsModalCustomWitness] = useState(false);
+  const [isLoadingSearch, setIsLoadingSearch] = useState(false);
+  const [isLoadingDetails, setIsLoadingDetails] = useState(false);
+  const [showModalError, setShowModalError] = useState(false);
+  const [isImageArrayLoading, setIsImageArrayLoading] = useState(false);
+  const [isUpdatingReport, setIsUpdatingReport] = useState(false);
+  const [isCreatingReport, setIsCreatingReport] = useState(false);
+
+ // nav
+ const [mode, setMode] = useState('');
+ const [recentInstanceId, setRecentInstanceId] = useState('');
+
+ // query
+ const [limit, setLimit] = useState(20); //limit value for query params, pagination
+ const [offset, setOffset] = useState(0);//offset value for query params, pagination
+ const [totalResults, setTotalResults] = useState(0);//value of response total records
+ const [appliedSearchParams, setAppliedSearchParams] = useState(null); // stable, cleaned fields for local persist
+ const [queryString, setQueryString] = useState("");// value passed to <GetListByDynamicQuery/>
+
+
+ //  TODO remove useGetList
+ const [useGetList, setUseGetList] = useState(false);//boolean to run <GetListByDynamicQuery/>
+
+
+//  useEffect(() => {
+//   console.log("@IncidentContext - offset --> ", offset)
+//  }, [offset]);
+
+  // document error
+  const [documentError, setDocumentError] = useState(false);
+  const [documentErrorMessage, setDocumentErrorMessage] = useState([]);
+
+  const triggerDocumentError = (message) => {
+    setDocumentError(true);
+    setDocumentErrorMessage((prev) => [...prev, message])
+  };
+
+  const clearDocumentError = () => {
+    setDocumentError(false);
+    setDocumentErrorMessage([]);
+  };
+
+  const updateSingleIncident = (incident) => {
+    setSingleIncident(incident);
+  };
+
+  const openDetailsPane = () => {
+    setIsDetailsPaneOpen(true);
+  };
+
+  const closeDetailsPane = () => {
+    setIsDetailsPaneOpen(false);
+  };
+
+  const openEditPane = () => {
+    setIsEditPaneOpen(true)
+  };
+
+  const closeEditPane = () => {
+    setIsEditPaneOpen(false)
+  };
+
+  const openCreatePane = () => {
+    setIsCreatePaneOpen(true)
+  };
+
+  const closeCreatePane = () => {
+    setIsCreatePaneOpen(false)
+  };
+
+  const openModalSelectTypes = () => {
+    setIsModalSelectTypesOpen(true)
+  };
+
+  const closeModalSelectTypes = () => {
+    setIsModalSelectTypesOpen(false)
+  };
+
+  const openModalUnknownCust = () => {
+    setIsModalUnknownCustOpen(true)
+  };
+
+  const closeModalUnknownCust = () => {
+    setIsModalUnknownCustOpen(false)
+  };
+
+  const openModalSelectKnownCust = () => {
+    setIsModalSelectKnownCustOpen(true)
+  };
+
+  const closeModalSelectKnownCust = () => {
+    setIsModalSelectKnownCustOpen(false)
+  };
+
+  const openModalSelectWitness = () => {
+    setIsModalSelectWitness(true)
+  };
+
+  const closeModalSelectWitness = () => {
+    setIsModalSelectWitness(false)
+  };
+
+  const openModalDeleteDescCustOpen = () => {
+    setIsModalDeleteDescCustOpen(true)
+  };
+
+  const closeModalDeleteDescCustOpen = () => {
+    setIsModalDeleteDescCustOpen(false)
+  };
+
+  const openModalCustomerDetails = () => {
+    setIsModalCustomerDetails(true)
+  };
+
+  const closeModalCustomerDetails = () => {
+    setIsModalCustomerDetails(false)
+  };
+
+  const openModalViewCustomerDetails = () => {
+    setIsModalViewCustomerDetails(true)
+  };
+
+  const closeModalViewCustomerDetails = () => {
+    setIsModalViewCustomerDetails(false)
+  };
+
+  const openModalTrespass = () => {
+    setIsModalTrespass(true)
+  };
+
+  const closeModalTrespass = () => {
+    setIsModalTrespass(false)
+  };
+
+  const openModalMedia = () => {
+    setIsModalMedia(true)
+  };
+
+  const closeModalMedia = () => {
+    setIsModalMedia(false)
+  };
+
+  const openModalViewImage = () => {
+    setIsModalViewImage(true)
+  };
+
+  const closeModalViewImage = () => {
+    setIsModalViewImage(false)
+  };
+
+  const openModelViewDocument = () => {
+    setIsModalViewDocument(true)
+  };
+
+  const closeModalViewDocument = () => {
+    setIsModalViewDocument(false)
+  };
+
+  
+  const openModalCustomWitness= () => {
+    setIsModalCustomWitness(true)
+  };
+
+  const closeModalCustomWitness = () => {
+    setIsModalCustomWitness(false)
+  };
+
+  const openModelViewTrespass = () => {
+    setIsModalViewTrespass(true)
+  };
+
+  const closeModalViewTrespass = () => {
+    setIsModalViewTrespass(false)
+  };
+
+  const openModalError = () => {
+    setShowModalError(true)
+  };
+
+  const closeModalError = () => {
+    setShowModalError(false)
+  };
+
+  const openImageSkeleton = () => {
+    setIsImageArrayLoading(true)
+  };
+
+  const closeImageSkeleton = () => {
+    setIsImageArrayLoading(false)
+  };
+
+  const openLoadingSearch = () => {
+    setIsLoadingSearch(true)
+  };
+
+  const closeLoadingSearch = () => {
+    setIsLoadingSearch(false)
+  };
+
+  const openLoadingDetails = () => {
+    setIsLoadingDetails(true)
+  };
+
+  const closeLoadingDetails = () => {
+    setIsLoadingDetails(false)
+  };
+
+  return (
+    <IncidentContext.Provider value={{
+      // data
+      incidentsList,
+      setIncidentsList,
+
+      singleIncident,
+      setSingleIncident,
+
+      incidentTypesList,
+      setIncidentTypesList,
+
+      incidentTypesNamesIdsList, 
+      setIncidentTypesNamesIdsList,
+
+      locations, 
+      setLocations,
+
+      customers, 
+      setCustomers,
+
+      self,
+      setSelf,
+
+      selectedCustomers,
+      setSelectedCustomers,
+
+      selectedWitnesses, 
+      setSelectedWitnesses,
+
+      selectedTrespassWitnesses, 
+      setSelectedTrespassWitnesses,
+
+      describedCustomers, 
+      setDescribedCustomers,
+
+      attachmentsData, 
+      setAttachmentsData,
+
+      idForMediaCreate, 
+      setIdForMediaCreate,
+
+      formDataArrayForMediaCreate, 
+      setFormDataArrayForMediaCreate,
+
+      modalErrorContent, 
+      setModalErrorContent,
+
+      locationsInService, 
+      setLocationsInService,
+
+      incidentCategories, 
+      setIncidentCategories,
+
+      trespassTemplates, 
+      setTrespassTemplates,
+
+      trespassReasons, 
+      setTrespassReasons,
+
+      organizationTimezone, 
+      setOrganizationTimezone,
+
+      // togglers
+      isDetailsPaneOpen,
+      openDetailsPane,
+      closeDetailsPane,
+
+      isEditPaneOpen,
+      openEditPane,
+      closeEditPane,
+
+      isCreatePaneOpen,
+      openCreatePane,
+      closeCreatePane,
+
+      isModalSelectTypesOpen,
+      openModalSelectTypes,
+      closeModalSelectTypes,
+
+      isModalUnknownCustOpen,
+      openModalUnknownCust,
+      closeModalUnknownCust,
+
+      isModalSelectKnownCustOpen,
+      openModalSelectKnownCust,
+      closeModalSelectKnownCust,
+
+      isModalSelectWitness,
+      openModalSelectWitness,
+      closeModalSelectWitness,
+
+      isModalDeleteDescCustOpen,
+      openModalDeleteDescCustOpen,
+      closeModalDeleteDescCustOpen,
+
+      isModalTrespass,
+      openModalTrespass,
+      closeModalTrespass,
+
+      isModalViewTrespass, 
+      openModelViewTrespass, 
+      closeModalViewTrespass,
+
+      isModalCustomerDetails, 
+      openModalCustomerDetails, 
+      closeModalCustomerDetails,
+
+      isModalViewCustomerDetails, 
+      openModalViewCustomerDetails, 
+      closeModalViewCustomerDetails,
+
+      isModalMedia,
+      openModalMedia,
+      closeModalMedia,
+      
+      isModalViewImage, 
+      openModalViewImage,
+      closeModalViewImage,
+
+      isModalViewDocument, 
+      openModelViewDocument, 
+      closeModalViewDocument,
+
+      isModalCustomWitness, 
+      openModalCustomWitness, 
+      closeModalCustomWitness,
+
+      showModalError,
+      openModalError,
+      closeModalError,
+
+      isImageArrayLoading, 
+      openImageSkeleton, 
+      closeImageSkeleton,
+
+      isUpdatingReport, 
+      setIsUpdatingReport,
+
+      isCreatingReport, 
+      setIsCreatingReport,
+
+
+      isLoadingSearch,
+      openLoadingSearch,
+      closeLoadingSearch,
+
+      isLoadingDetails,
+      setIsLoadingDetails,
+      openLoadingDetails,
+      closeLoadingDetails,
+
+      useGetList, 
+      setUseGetList,
+
+      // nav
+      mode, 
+      setMode,
+
+      queryString, 
+      setQueryString,
+
+      limit, setLimit, 
+      offset, setOffset, 
+      totalResults, setTotalResults,
+      appliedSearchParams, setAppliedSearchParams,
+
+      // document error
+      documentError, setDocumentError, 
+      documentErrorMessage, setDocumentErrorMessage,
+      triggerDocumentError, 
+      clearDocumentError,
+
+      recentInstanceId, 
+      setRecentInstanceId
+    }}>
+      {children}
+    </IncidentContext.Provider>
+  )
+};

package/src/index.js

@@ -0,0 +1,61 @@
+import 'core-js/stable';
+import 'regenerator-runtime/runtime';
+import React from 'react';
+import { IntlProvider } from 'react-intl';
+import PropTypes from 'prop-types';
+import { Switch, Route } from 'react-router-dom';
+import enUStranslations from '../translations/ui-security-incident/en_US';
+import Settings from './settings';
+import Application from './routes/Application';
+import CreatePane from './components/incidents/CreatePane';
+import DetailsPane from './components/incidents/DetailsPane';
+import EditPane from './components/incidents/EditPane';
+import { IncidentProvider } from './contexts/IncidentContext';
+class SecurityIncident extends React.Component {
+  static propTypes = {
+    match: PropTypes.object.isRequired,
+    showSettings: PropTypes.bool,
+    stripes: PropTypes.shape({
+      connect: PropTypes.func,
+    }),
+  };
+  
+  render() {
+    const {
+      showSettings,
+      match: { path },
+      stripes,
+    } = this.props;
+
+    if (showSettings) {
+      return (
+        <IntlProvider 
+          locale="en" 
+          messages={enUStranslations} 
+          >
+          <IncidentProvider>
+            <Settings {...this.props} />
+          </IncidentProvider>
+        </IntlProvider>
+      );
+    }
+
+    return (
+      <IntlProvider 
+        locale="en" 
+        messages={enUStranslations} 
+        >
+        <IncidentProvider>
+          <Switch>
+            <Route path={path} exact component={Application} />
+            <Route path={`${path}/create`} exact component={CreatePane} />
+            <Route path={`${path}/:id`} exact component={DetailsPane} />
+            <Route path={`${path}/:id/edit`} exact component={EditPane} />
+          </Switch>
+        </IncidentProvider>
+      </IntlProvider>
+    );
+  }
+}
+
+export default SecurityIncident;

package/src/routes/Application.js

@@ -0,0 +1,13 @@
+
+import React from 'react';
+import IncidentsPaneset from '../components/incidents/IncidentsPaneset.js';
+
+const Application = () => {
+    return (
+      <>
+       <IncidentsPaneset />
+      </>
+    );
+};
+
+export default Application; 

package/src/settings/GetIncidentCategories.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { stripesConnect } from '@folio/stripes/core';
+import { IncidentContext } from '../contexts/IncidentContext';
+
+class GetIncidentCategories extends React.Component {
+  static contextType = IncidentContext;
+  static manifest = Object.freeze({
+    incidentCategories: {
+      type: 'okapi',
+      path: 'incidents/configurations/incident-categories',
+      records: 'data.value.categories',
+      throwErrors: false // prevent error modal if empty on first pass
+    },
+  });
+
+  static propTypes = {
+    resources: PropTypes.object.isRequired,
+    handleFetchedCategories: PropTypes.func,
+  };
+
+  componentDidMount() {
+    this.fetchRecords();
+  };
+
+  componentDidUpdate(prevProps) {
+   const resourceChanged = 
+    this.props.resources.incidentCategories !==
+    prevProps.resources.incidentCategories;
+
+   if (resourceChanged) {
+    this.fetchRecords();
+   };
+  };
+
+  fetchRecords = () => {
+    const incidentCategoriesBody = this.props.resources.incidentCategories;
+    // console.log("incidentCategoriesBody --> ", JSON.stringify(incidentCategoriesBody, null, 2));
+
+    if (!incidentCategoriesBody?.hasLoaded) return; 
+
+    const categories = incidentCategoriesBody?.records;
+    this.context.setIncidentCategories(categories)  
+  };
+
+  render() {
+    return null;
+  };
+};
+
+GetIncidentCategories.contextType = IncidentContext;
+
+export default stripesConnect(
+  GetIncidentCategories,
+  '@spokane-folio/security-incident'
+);