@spokane-folio/security-incident 1.0.28

package/src/settings/TrespassReasonDetailsPane.js

@@ -0,0 +1,171 @@
+import React, { useEffect, useState } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { useParams } from 'react-router-dom';
+import {
+  AccordionSet,
+  Accordion,
+  Button,
+  Col,
+  Dropdown,
+  DropdownMenu,
+  Headline,
+  KeyValue,
+  Label,
+  Pane,
+  PaneMenu,
+  Row,
+} from '@folio/stripes/components';
+import GetTrespassReasons from './GetTrespassReasons';
+import { useIncidents } from '../contexts/IncidentContext';
+import PutTrespassReasons from './PutTrespassReasons';
+import ModalDeleteTrespassReason from './ModalDeleteTrespassReason';
+
+const TrespassReasonDetailsPane = ({handleShowEdit, handleCloseDetails, ...props}, ) => {
+  const { id } = useParams();
+  const { 
+    trespassReasons
+  } = useIncidents();
+
+  const [isClickDelete, setIsClickDelete] = useState(false);
+  const [toDeleteId, setToDeleteId] = useState(null);
+  const [formattedData, setFormattedData] = useState(null);
+  const [viewTrespassReason, setViewTrespassReason] = useState({
+    reason: '',
+    isDefault: false,
+    isSuppressed: false
+  });
+
+  useEffect(() => {
+    const singleTRbyId = trespassReasons.find(tr => tr.id === id);
+    // console.log("singleTRbyId --> ", JSON.stringify(singleTRbyId, null, 2))
+    if (singleTRbyId) {
+      setViewTrespassReason(singleTRbyId)
+    } 
+  }, [id, trespassReasons])
+
+  const handleShowModal = (incidentTypeId) => {
+    setIsClickDelete(true);
+    setToDeleteId(incidentTypeId);
+  };
+
+  const handleCloseModal = () => {
+    setIsClickDelete(false);
+    setToDeleteId(null);
+  };
+
+  const handleDeleteSuccess = () => {
+    handleCloseModal();
+    handleCloseDetails();
+  };
+
+  const handleDelete = () => {
+    if (toDeleteId) {
+      const updatedTrespassReasons = trespassReasons.filter((tr) => {
+        return tr.id !== toDeleteId;
+      });
+      const readyFormattedData = {
+        data: {
+          value: {
+            trespassReasons: updatedTrespassReasons
+          }
+        }
+      }
+      setFormattedData(readyFormattedData);
+    }
+  };
+
+  const lastMenu = (
+    <PaneMenu>
+      <Dropdown
+        label={<FormattedMessage id="dropdown-actions-button" />}
+        buttonProps={{ buttonStyle: 'primary' }}
+        style={{ marginTop: '8px' }}
+      >
+        <DropdownMenu>
+          <Button
+            style={{ marginTop: '10px' }}
+            buttonStyle="primary"
+            onClick={() => handleShowEdit(id)}
+          >
+          <FormattedMessage id="edit-button" />
+          </Button>
+            <Button
+            style={{ marginTop: '10px' }}
+            buttonStyle="warning"
+            onClick={() => handleShowModal(id)}
+          >
+          <FormattedMessage id="settings.incident-types.details-delete-button" />
+          </Button>
+        </DropdownMenu>
+      </Dropdown>
+    </PaneMenu>
+  );
+
+  return (
+    <Pane
+      dismissible
+      onClose={handleCloseDetails}
+      defaultWidth="100%"
+      paneTitle={<FormattedMessage id="settings.trespass-reason-paneTitle"/>}
+      {...props}
+      lastMenu={lastMenu}>
+
+      <GetTrespassReasons />
+
+      {isClickDelete && (
+        <ModalDeleteTrespassReason 
+          isOpen={isClickDelete}
+          onClose={handleCloseModal}
+          onConfirm={handleDelete}
+        />
+      )}
+
+      {formattedData && (
+        <PutTrespassReasons 
+          data={formattedData}
+          context='delete'
+          handleDeleteSuccess={handleDeleteSuccess}
+        />
+      )}
+
+      <AccordionSet>
+        <Accordion label='Details'>
+         <Row>
+          <Col xs={6}>
+            <KeyValue
+              label={<FormattedMessage id="settings.trespass-reason-details-reason-label"/>}
+              value={viewTrespassReason.reason || ''}
+            />
+          </Col>
+         </Row>
+
+        <Row>
+          <Col xs={6}>
+            <KeyValue
+              label={<FormattedMessage id="settings.trespass-reason-details-default-label"/>}
+              value={viewTrespassReason.isDefault ? 
+                (<FormattedMessage id="settings.trespass-reason-details-yes"/>) 
+                : (<FormattedMessage id="settings.trespass-reason-details-no"/>)
+              }
+            />
+          </Col>
+         </Row>
+
+        <Row>
+          <Col xs={6}>
+            <KeyValue
+              label={ <FormattedMessage id="settings.trespass-reason-details-isSuppressed-label"/>}
+              value={viewTrespassReason.isSuppressed ? 
+                (<FormattedMessage id="settings.trespass-reason-details-yes"/>) 
+                : (<FormattedMessage id="settings.trespass-reason-details-no"/>)
+              }
+            />
+          </Col>
+         </Row>
+        </Accordion>
+      </AccordionSet>
+    </Pane>
+  );
+};
+
+export default TrespassReasonDetailsPane; 

package/src/settings/TrespassReasonEditPane.js

@@ -0,0 +1,221 @@
+import React, { useEffect, useState } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { useParams } from 'react-router-dom';
+import {
+  AccordionSet,
+  Accordion,
+  Button,
+  Checkbox,
+  Col,
+  LoadingPane,
+  Pane,
+  Row,
+  TextArea
+} from '@folio/stripes/components';
+import GetTrespassReasons from './GetTrespassReasons';
+import PutTrespassReasons from './PutTrespassReasons';
+import { useIncidents } from '../contexts/IncidentContext';
+
+const TrespassReasonEditPane = ({handleCancelEdit, handleCloseEdit, ...props}) => {
+  const { id } = useParams();
+  const { 
+    trespassReasons
+  } = useIncidents();
+
+  const [formattedTrespassReasons, setFormattedTrespassReasons] = useState(null);
+  const [isButtonDisabled, setIsButtonDisabled] = useState(false);
+  const [trIsLoading, setTrIsLoading] = useState(false);
+  const [formData, setFormData] = useState({
+    id: '',
+    reason: '',
+    isDefault: false,
+    isSuppressed: false
+  });
+
+  // useEffect(() => {
+  //   console.log("formData --> ", JSON.stringify(formData, null, 2))
+  // }, [formData]);
+
+  useEffect(() => {
+    if (trespassReasons && trespassReasons.length > 0) {
+      const foundTR = trespassReasons.find((tr) => tr.id === id);
+      if (foundTR) {
+        setFormData({
+          id: foundTR.id,
+          reason: foundTR.reason || '', 
+          ...(foundTR.isDefault ? {isDefault: foundTR.isDefault} : {}),
+          ...(foundTR.isSuppressed ? {isSuppressed: foundTR.isSuppressed} : {})
+        });
+      } else {
+        console.error(`trespass reason with id ${id} not found`);
+        setFormData({
+          id: '',
+          reason: '',
+        });
+      };
+    };
+  }, [id, trespassReasons]);
+
+  const handleChange = (event) => {
+    const { name, value } = event.target
+    if (name === 'isDefault') {
+      setFormData((prev) => ({
+        ...prev,
+        [name]: event.target.checked
+      }));
+    } else if (name === 'isSuppressed') {
+      setFormData((prev) => ({
+        ...prev,
+        [name]: event.target.checked
+      }))
+    } else {
+      setFormData((prev) => ({
+        ...prev,
+        [name]: value
+      }));
+    };
+  };
+
+  const handleFinishEdit = () => {
+    setTrIsLoading(false);
+    handleCloseEdit(id);
+  };
+
+  const stripFalseFlags = (tr, keys = ['isDefault', 'isSuppressed']) => {
+    const out = { ...tr };
+    for (const k of keys) {
+      if (out[k] === false) delete out[k];
+      else if (out[k] === true) out[k] = true; // normalize to literal true
+    }
+    return out; 
+  };
+
+  const handleEditSaveAndClose = () => {
+    const newTR = {
+      id: formData.id,
+      reason: formData.reason,
+      isSuppressed: !!formData.isSuppressed,
+      isDefault: formData.isSuppressed ? false : !!formData.isDefault,
+    };
+
+    const upsertById = (list, item) => {
+      let found = false;
+      const replaced = list.map(tr => {
+        if (tr.id === item.id) {
+          found = true;
+          return { ...tr, ...item };
+        }
+        return tr; 
+      });
+      return found ? replaced : [...replaced, item];
+    };
+
+    let next = upsertById(trespassReasons, newTR);
+
+    // no suppressed item can be default
+    next = next.map(tr => (tr.isSuppressed ? { ...tr, isDefault: false} : tr));
+
+    // ensure single isDefault (having a default is not required)
+    if (newTR.isDefault) {
+      next = next.map(tr => tr.id === newTR.id ? tr : { ...tr, isDefault: false }
+      );
+    };
+
+    // remove false flags (no persist isDefault: false, isSuppressed: false, only persist if true)
+    next = next.map(tr => stripFalseFlags(tr, ['isDefault', 'isSuppressed']));
+
+    const readyFormattedData = {
+      value: { trespassReasons: next }
+    };
+
+    // console.log("ON SAVE, pre data key -> ", JSON.stringify(readyFormattedData, null, 2))
+
+    // triggers <PutTrespassReasons />
+    setFormattedTrespassReasons({ data: readyFormattedData })
+  };
+
+  useEffect(() => {
+    const isReasonNotEmpty = formData.reason && formData.reason.trim() !== '';
+    const isValid = isReasonNotEmpty;
+    setIsButtonDisabled(!isValid);
+  }, [formData]);
+
+  return (
+   <>
+    <GetTrespassReasons />
+
+    {formattedTrespassReasons && 
+      <PutTrespassReasons 
+        data={formattedTrespassReasons}
+        handleFinishEdit={handleFinishEdit}
+        />}
+
+   {trIsLoading ? (
+    <LoadingPane defaultWidth='100%'/>
+   ) : (
+     <Pane
+      dismissible
+      onClose={() => handleCancelEdit(id)}
+      defaultWidth="100%"
+      paneTitle={<FormattedMessage 
+        id="settings.trespass-reasons-paneTitle"/>
+      }
+      {...props}>
+
+      <AccordionSet>
+        <Accordion label={<FormattedMessage 
+          id="details-pane.accordion-label.details"/>}
+        >
+          <Row>
+            <Col xs={8}>
+              <TextArea
+                required
+                label={<FormattedMessage id="settings.trespass-document-edit-textfield-reason-label"/>}
+                name='reason'
+                value={formData.reason}
+                onChange={handleChange} 
+              />
+            </Col>
+          </Row>
+           <Row>
+            <Col xs={6}>
+              <Checkbox 
+                label={<FormattedMessage id="settings.trespass-document-edit-checkbox-default-label"/>}
+                name='isDefault'
+                checked={formData.isDefault}
+                onChange={handleChange}
+              />
+            </Col>
+          </Row>
+          <Row>
+            <Col xs={6}>
+              <Checkbox 
+                label={<FormattedMessage id="settings.trespass-document-edit-checkbox-suppress-label"/>}
+                name='isSuppressed'
+                checked={formData.isSuppressed}
+                onChange={handleChange}
+              />
+            </Col>
+          </Row>
+          <Row style={{ marginTop: '20px', marginBottom: '25px'}}>
+            <Col xs={4}>
+              <Button
+                buttonStyle='primary'
+                disabled={isButtonDisabled}
+                onClick={handleEditSaveAndClose}
+              >
+                  <FormattedMessage 
+                    id="save-and-close-button"
+                    />
+              </Button>
+            </Col>
+          </Row>
+        </Accordion>
+      </AccordionSet>
+    </Pane>
+   )}
+   </>
+  );
+};
+
+export default TrespassReasonEditPane; 

package/src/settings/TrespassReasonsPaneset.js

@@ -0,0 +1,282 @@
+
+import React, { useState, useEffect } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { useHistory, Switch, Route, useLocation } from 'react-router-dom';
+import {
+  Button,
+  Checkbox,
+  Col,
+  Icon,
+  MultiColumnList,
+  Pane,
+  Paneset,
+  Row,
+  TextArea
+} from '@folio/stripes/components';
+import GetTrespassReasons from './GetTrespassReasons';
+import PutTrespassReasons from './PutTrespassReasons';
+import TrespassReasonDetailsPane from './TrespassReasonDetailsPane';
+import TrespassReasonEditPane from './TrespassReasonEditPane';
+import { v4 as uuidv4 } from 'uuid';
+import { useIncidents } from '../contexts/IncidentContext';
+
+const TrespassReasonsPaneset = ({...props}) => {
+  const history = useHistory();
+  const { pathname } = useLocation();
+  const { 
+    trespassReasons
+  } = useIncidents();
+
+  const [trespassReasonsList, setTrespassReasonsList] = useState([]);
+  const listRoute = '/settings/incidents/trespass-reasons';
+  const [reloadKey, setReloadKey] = useState(0);
+  useEffect(() => {
+    if (pathname === listRoute) {
+      setReloadKey(key => key + 1) // guarantee fresh GET
+    }
+  }, [pathname]);
+  const [isButtonDisabled, setIsButtonDisabled] = useState(false);
+  const [formattedTrespassReasons, setFormattedTrespassReasons] = useState(null);
+  const [formData, setFormData] = useState({
+    id: '',
+    reason: ''
+  });
+
+  const sortTRlist = (trConfigList = []) => {
+    const collator = new Intl.Collator(undefined, { numeric: true, sensitivity: 'base' });
+    return [...trConfigList].sort((a, b) => {
+      const aStr = (a?.reason ?? '').trim();
+      const bStr = (b?.reason ?? '').trim();
+      return collator.compare(aStr, bStr);
+    });
+  };
+
+  useEffect(() => {
+    const sortedTRlist = sortTRlist(trespassReasons);
+    // console.log("sortedTRlist --> ", JSON.stringify(sortedTRlist, null, 2))
+    setTrespassReasonsList(sortedTRlist)
+  }, [trespassReasons])
+
+  const handleChange = (event) => {
+    const { name, value } = event.target
+    if (name === 'isDefault') {
+      setFormData((prev) => ({
+        ...prev,
+        [name]: event.target.checked
+      }));
+    } else {
+      setFormData((prev) => ({
+        ...prev,
+        [name]: value
+      }));
+    };
+  };
+
+  const resetForFreshFormInput = () => {
+    setFormData({
+      id: '',
+      reason: ''
+    })
+  };
+
+  const makeTrespassReasonObject = () => {
+    return {
+      id: uuidv4(),
+      reason: formData.reason,
+      ...(formData.isDefault ? { isDefault: true } : {})
+    }
+  };
+
+  const handleSaveAndClose = () => {
+    const newTrespassReason = makeTrespassReasonObject();
+    let updatedTrespassReasonsList = [];
+
+    // handle can only be one TR w/ isDefault: true
+    if (newTrespassReason.isDefault) {
+      const removedPrevDefaultList = trespassReasons.map((tr) => {
+        const { isDefault, ...otherKeys } = tr;
+        return otherKeys;
+      });
+      updatedTrespassReasonsList = [...removedPrevDefaultList, newTrespassReason];
+    } else {
+      updatedTrespassReasonsList = [...trespassReasons, newTrespassReason]
+    };
+
+    const readyFormattedData = {
+      value: {
+        trespassReasons: updatedTrespassReasonsList
+      }
+    };
+
+    setFormattedTrespassReasons({ data: readyFormattedData })
+    resetForFreshFormInput();
+  };
+
+  const handleCloseDetails = () => {
+    history.push(`/settings/incidents/trespass-reasons`);
+  };
+
+  const handleShowDetails = (event, row) => {
+    const id = row.id
+    history.push(`/settings/incidents/trespass-reasons/${id}`);
+  };
+
+  const handleShowEdit = (reasonsId) => {
+    history.push(`/settings/incidents/trespass-reasons/${reasonsId}/edit`);
+  };
+
+  const handleCancelEdit = (reasonsId) => {
+    history.push(`/settings/incidents/trespass-reasons/${reasonsId}`);
+  };
+
+  const handleCloseEdit = (reasonsId) => {
+    history.push(`/settings/incidents/trespass-reasons/${reasonsId}`);
+  };
+
+  const getValidationResults = () => {
+    const isReasonNotEmpty = formData.reason && formData.reason.trim() !== '';
+    return isReasonNotEmpty
+  };
+
+  useEffect(() => {
+    setIsButtonDisabled(!getValidationResults())
+  }, [formData]);
+
+  const columnWidths = {
+    reason: '275px',
+    isDefault: '80px'
+  };
+
+  const formatter = {
+    reason: (item) => {
+      if (item.reason?.length > 48) {
+        return item.reason.slice(0, 72) + "...";
+      } else {
+        return item.reason;
+      }
+    },
+    isDefault: (item) => {
+      const isDefault = item.isDefault;
+      return isDefault ? <span style={{ color: 'green' }}>
+        <Icon icon='check-circle'></Icon>
+      </span>
+        : null
+    },
+    isSuppressed: (item) => {
+      const isSuppressed = item.isSuppressed;
+       return isSuppressed ? <span>
+        <Icon 
+          size='small' 
+          icon='exclamation-circle' 
+          status='warn'>
+        </Icon>
+      </span>
+        : null
+    }
+  };
+
+  return (
+    <Paneset>
+      <Pane
+        defaultWidth="fill"
+        paneTitle={<FormattedMessage 
+          id="settings.trespass-reasons-paneTitle"/>
+        }
+      >
+        <GetTrespassReasons key={reloadKey} reloadKey={reloadKey}/>
+
+        {formattedTrespassReasons && 
+          <PutTrespassReasons 
+            data={formattedTrespassReasons}
+            onSuccess={() => {
+              setFormattedTrespassReasons(null); // unmount this component
+              setReloadKey(key => key + 1);  // force fresh GET
+            }}
+            />}
+
+        <Row>
+          <Col xs={12}>
+           <MultiColumnList 
+            contentData={trespassReasonsList ?? []}
+            visibleColumns={[
+              'reason',
+              'isDefault',
+              'isSuppressed'
+            ]}
+            columnMapping={{
+              reason: <FormattedMessage id="settings.trespass-reasons.column-mapping-reason"/>,
+              isDefault: <FormattedMessage id="settings.trespass-reasons.column-mapping-default"/>,
+              isSuppressed: <FormattedMessage id="settings.trespass-reasons.column-mapping-isSuppressed"/>
+            }}
+            columnWidths={columnWidths}
+            formatter={formatter}
+            onRowClick={handleShowDetails}
+          />
+          </Col>
+        </Row>
+
+        <Row style={{ marginTop: '45px' }}>
+          <Col xs={8}>
+            <TextArea 
+              required
+              label={<FormattedMessage id="settings.trespass-reason-textarea-reason"/>}
+              name='reason'
+              value={formData.reason}
+              onChange={handleChange} 
+            />
+          </Col>
+        </Row>
+
+        <Row>
+          <Col xs={6}>
+            <Checkbox 
+              label={<FormattedMessage id="settings.trespass-reason-checkbox-isDefault"/>}
+              name='isDefault'
+              checked={formData.isDefault}
+              onChange={handleChange}
+            />
+          </Col>
+        </Row>
+
+        <Row style={{ marginTop: '20px', marginBottom: '25px'}}>
+          <Col xs={4}>
+            <Button
+              buttonStyle='primary'
+              disabled={isButtonDisabled}
+              onClick={handleSaveAndClose}
+            >
+              <FormattedMessage 
+                id="save-and-close-button"
+                />
+            </Button>
+          </Col>
+        </Row>
+      </Pane>
+
+       <Switch>
+        <Route 
+          exact
+          path="/settings/incidents/trespass-reasons/:id"
+          render={(props) => (
+            <TrespassReasonDetailsPane 
+              {...props} 
+              handleCloseDetails={handleCloseDetails} 
+              handleShowEdit={handleShowEdit}
+              />
+          )}/>
+        <Route 
+          exact
+          path="/settings/incidents/trespass-reasons/:id/edit"
+          render={(props) => (
+            <TrespassReasonEditPane 
+              handleCancelEdit={handleCancelEdit}
+              handleCloseEdit={handleCloseEdit}
+              {...props} 
+              />
+          )}/>
+      </Switch>
+    </Paneset>
+  )
+};
+
+export default TrespassReasonsPaneset; 

package/src/settings/__snapshots__/IncidentCategoriesPane.test.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders without crashing (snapshot) 1`] = `"<div><div></div><div><div xs="10"><button><span>settings.categories-new-button</span></button></div></div><ul><li><div data-col="title">Behavior</div><div data-col="id"><div><div><button><span>edit-button</span></button><button><span>settings.categories-delete-button</span></button></div></div></div></li><li><div data-col="title">Property</div><div data-col="id"><div><div><button><span>edit-button</span></button><button><span>settings.categories-delete-button</span></button></div></div></div></li></ul><div>Mock GetIncidentCategories</div></div>"`;

package/src/settings/__snapshots__/IncidentTypeDetailsPane.test.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders without crashing (snapshot) 1`] = `"<div><div><div><div><div><button buttonstyle="primary" style="display: block; width: 50%; margin-top: 10px;"><span>edit-button</span></button><button buttonstyle="warning" style="display: block; width: 50%; margin-top: 10px;"><span>settings.incident-types.details-delete-button</span></button></div></div></div></div><div>Mock GetIncidentCategories</div><div>Mock GetSingleIncidentTypeDetails</div><div>Mock GetIncidentTypesDetails</div><div><div label="[object Object]"><div><div xs="8"><div><label style="margin-top: 5px;" tag="h2"><span>settings.incident-types.details.title-label</span></label><p>Type 1 - Disorderly</p></div></div></div><div><div xs="8"><div><label style="margin-top: 5px;" tag="h2"><span>settings.incident-types.details.category-label</span></label><p>Behavior</p></div></div></div><div><div xs="10"><label style="margin-top: 5px;" tag="h2"><span>settings.incident-types.details.description-label</span></label><p>Initial description</p></div></div></div><div label="[object Object]"></div></div></div>"`;

package/src/settings/__snapshots__/IncidentTypeEditPane.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]"></div><div>Mock GetSingleIncidentTypeDetails</div><div>Mock GetIncidentCategories</div><div>Mock GetIncidentTypesDetails</div><div><div label="[object Object]"><div><div xs="8"><div><input required="" label="[object Object]" name="title" value="Type 1 - Disorderly"></div></div></div><div><div xs="4"><div><select required="" label="[object Object]" name="category_id" placeholder="Select a category" dataoptions="[object Object],[object Object]"></select></div></div></div><div><div xs="6"><textarea required="" label="[object Object]" name="description" style="width: 100%; height: 200px;">Initial description</textarea></div></div></div></div><div><button><span>cancel-button</span></button><button buttonstyle="primary"><span>save-and-close-button</span></button></div></div>"`;

package/src/settings/__snapshots__/IncidentTypesPaneset.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="fill"><div><div xs="10"><button buttonstyle="primary"><span>settings.incident-types-new-button</span></button></div></div><ul><li><li>Type 1 - Disorderly</li><li>Type 2 - Theft</li><li>Type 2.1 - Minor</li><li>Type 10 - Assault</li></li></ul></div><div>Mock GetIncidentTypesDetails</div><div></div></div>"`;