@spokane-folio/security-incident 1.0.28

package/src/settings/ModalDeleteTrespassReason.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import { Button, Modal, ModalFooter } from '@folio/stripes/components';
+
+const ModalDeleteTrespassReason = ({ isOpen, onClose, onConfirm }) => {
+  if (!isOpen) {
+    return null;
+  }
+
+  const footer = (
+    <ModalFooter>
+      <Button onClick={onConfirm} buttonStyle="warning">
+        <FormattedMessage id="delete-button"/>
+      </Button>
+      <Button onClick={onClose}>
+        <FormattedMessage id="cancel-button"/>
+      </Button>
+    </ModalFooter>
+  );
+
+  return (
+    <Modal
+      open={isOpen}
+      dismissible
+      closeOnBackgroundClick
+      label={
+        <FormattedMessage id="settings.trespass-reason-modal-delete-label" />
+      }
+      size="small"
+      onClose={onClose}
+      footer={footer}
+    >
+      <section>
+        <p>
+          <FormattedMessage id="settings.trespass-reason-delete-warn" />
+        </p>
+      </section>
+    </Modal>
+  );
+};
+
+ModalDeleteTrespassReason.propTypes = {
+  isOpen: PropTypes.func.isRequired,
+  onClose: PropTypes.func.isRequired,
+  onConfirm: PropTypes.func.isRequired,
+};
+
+export default ModalDeleteTrespassReason;

package/src/settings/ModalPreviewTrespassDoc.js

@@ -0,0 +1,65 @@
+
+import React, { useState, useEffect } from 'react';
+import { FormattedMessage } from 'react-intl';
+import {
+  Button,
+  Checkbox,
+  Col,
+  Modal,
+  ModalFooter,
+  Pane,
+  PaneHeader,
+  Paneset,
+  Row,
+  TextField,
+  TextArea
+} from '@folio/stripes/components';
+
+const ModalPreviewTrespassDoc = ({ 
+  closePreviewModal,
+  previewContent
+}) => {
+  
+  const footer = (
+    <ModalFooter>
+      <Button
+        onClick={closePreviewModal}
+        buttonStyle="primary"
+        marginBottom0
+      >
+        <FormattedMessage id="close-button"/>
+      </Button>
+    </ModalFooter>
+  );
+
+  return (
+    <Modal
+      style={{
+        minHeight: '250px',
+        height: '80%', // allows modal to grow/shrink based on content
+        maxHeight: '300vh', 
+        maxWidth: '300vw', // modal width responsive to viewport width
+        width: '70%' // modal width adjusts based on content and window size
+      }}
+      open
+      dismissible
+      closeOnBackgroundClick
+      label='Preview trespass template document'
+      size='large'
+      onClose={closePreviewModal}
+      footer={footer}
+    >
+    <div
+      style={{ 
+        padding: '1em',
+        maxHeight: 'calc(80vh - 100px)', // Adjust based on modal header/footer height
+        overflowY: 'auto',
+        whiteSpace: 'pre-wrap'
+      }}
+      dangerouslySetInnerHTML={{ __html: previewContent }}>
+    </div>
+    </Modal>
+  );
+};
+
+export default ModalPreviewTrespassDoc; 

package/src/settings/ModalTrespassDocTokens.js

@@ -0,0 +1,83 @@
+
+import React, { useState, useEffect } from 'react';
+import { FormattedMessage } from 'react-intl';
+import {
+  Button,
+  Checkbox,
+  Col,
+  Modal,
+  ModalFooter,
+  Row,
+} from '@folio/stripes/components';
+
+const ModalTrespassDocTokens = ({ 
+  setShowTokensModal, 
+  selectedTokens, setSelectedTokens,
+  handleInsertTokens, tokensArray
+}) => {
+
+  const handleCloseDismiss = () => {
+    setShowTokensModal(false);
+    setSelectedTokens([])
+  };
+
+  const handleCheckboxChange = (tokenValue, isChecked) => {
+    if (isChecked) {
+      setSelectedTokens((prev) => [...prev, tokenValue])
+    } else {
+      setSelectedTokens((prev) => prev.filter((val) => val !== tokenValue))
+    }
+  };
+
+  const handleInsertClick = () => {
+    handleInsertTokens(selectedTokens)
+  };
+
+  const footer = (
+    <ModalFooter>
+      <Button
+        onClick={handleInsertClick}
+        buttonStyle="primary"
+        marginBottom0
+      >
+        <FormattedMessage id="settings.trespass-document-template.insert-selected-tokens"/>
+      </Button>
+    </ModalFooter>
+  );
+
+  return (
+    <Modal
+      style={{
+        minHeight: '250px',
+        height: '80%', // allows modal to grow/shrink based on content
+        maxHeight: '300vh', 
+        maxWidth: '300vw', // modal width responsive to viewport width
+        width: '70%' // modal width adjusts based on content and window size
+      }}
+      open
+      dismissible
+      closeOnBackgroundClick
+      label='Tokens'
+      size='large'
+      onClose={handleCloseDismiss}
+      footer={footer}
+    >
+      <Row>
+        <Col>
+        {tokensArray.map((token) => (
+          <Checkbox
+            key={token.value}
+            label={token.label}
+            checked={selectedTokens.includes(token.value)}
+            value={token.value}
+            onChange={(e) => handleCheckboxChange(token.value, e.target.checked)}
+          />
+        ))}
+        </Col>
+      </Row>
+
+    </Modal>
+  );
+};
+
+export default ModalTrespassDocTokens; 

package/src/settings/NewIncidentTypePane.js

@@ -0,0 +1,182 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import {
+  Accordion,
+  AccordionSet,
+  Button,
+  Col,
+  Pane,
+  PaneHeader,
+  PaneFooter,
+  Row,
+  Select,
+  TextArea,
+  TextField,
+} from '@folio/stripes/components';
+import GetIncidentTypesDetails from './GetIncidentTypesDetails';
+import GetIncidentCategories from './GetIncidentCategories';
+import PutIncidentType from './PutIncidentType';
+import makeId from './helpers/makeId';
+import { useIncidents } from '../contexts/IncidentContext';
+
+const NewIncidentTypePane = ({ handleCloseNew, ...props }) => {
+
+  const { incidentCategories } = useIncidents();
+  const [allIncidentTypes, setAllIncidentTypes] = useState([]);
+  const [formattedData, setFormattedData] = useState(null);
+  const [formData, setFormData] = useState({
+    title: '',
+    category_id: '',
+    description: '',
+  });
+
+  const handleIncidentTypes = (data) => {
+    setAllIncidentTypes(data);
+  };
+
+  const dataOptions = incidentCategories.map((category) => ({
+    value: category.id,
+    label: category.title,
+  }));
+
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setFormData((prev) => ({
+      ...prev,
+      [name]: value,
+    }));
+  };
+
+  const isFormDataPresent = () => {
+    return formData.title && formData.category_id && formData.description;
+  };
+
+  const handleSubmit = (e) => {
+    if (e) e.preventDefault();
+    const newIncidentType = {
+      ...formData,
+      id: makeId(formData.title),
+    };
+    const updatedIncidentTypes = [...allIncidentTypes, newIncidentType];
+
+    const formattedReadyData = {
+      data: {
+        value: {
+          incidentTypes: updatedIncidentTypes
+        }
+      }
+    };
+    setFormattedData(formattedReadyData);
+  };
+
+  const renderHeader = (renderProps) => (
+    <PaneHeader
+      {...renderProps}
+      dismissible
+      paneTitle={
+        <FormattedMessage id="settings.incident-types.new.paneTitle" />
+      }
+      onClose={handleCloseNew}
+    />
+  );
+
+  const footer = (
+    <PaneFooter
+      renderStart={
+        <Button onClick={handleCloseNew}>
+          <FormattedMessage id="cancel-button" />
+        </Button>
+      }
+      renderEnd={
+        <Button
+          buttonStyle="primary"
+          onClick={handleSubmit}
+          disabled={!isFormDataPresent()}
+        >
+          <FormattedMessage id="save-and-close-button" />
+        </Button>
+      }
+    />
+  );
+
+  return (
+    <Pane defaultWidth="100%" renderHeader={renderHeader} footer={footer}>
+
+      <GetIncidentCategories />
+      
+      <GetIncidentTypesDetails
+        context="settings"
+        handleIncidentTypes={handleIncidentTypes}
+      />
+      {formattedData && (
+        <PutIncidentType
+          data={formattedData}
+          context="new"
+          handleCloseNew={handleCloseNew}
+        />
+      )}
+
+      <AccordionSet>
+        <Accordion
+          label={
+            <FormattedMessage id="settings.incident-types.new.type-info-accordion-label" />
+          }
+        >
+          <Row>
+            <Col xs={8}>
+              <Col>
+                <TextField
+                  required
+                  label={
+                    <FormattedMessage id="settings.incident-types.new.title-text-field-label" />
+                  }
+                  name="title"
+                  value={formData.title}
+                  onChange={handleChange}
+                />
+              </Col>
+            </Col>
+          </Row>
+          <Row>
+            <Col xs={4}>
+              <Col>
+                <Select
+                  required
+                  label={
+                    <FormattedMessage id="settings.incident-types.new.category-select-label" />
+                  }
+                  name="category_id"
+                  value={formData.category_id}
+                  placeholder="Select a category"
+                  dataOptions={dataOptions}
+                  onChange={handleChange}
+                />
+              </Col>
+            </Col>
+          </Row>
+          <Row>
+            <Col xs={6}>
+              <TextArea
+                required
+                label={
+                  <FormattedMessage id="settings.incident-types.new.description-text-area-label" />
+                }
+                name="description"
+                value={formData.description}
+                onChange={handleChange}
+                style={{ width: '100%', height: '200px' }}
+              />
+            </Col>
+          </Row>
+        </Accordion>
+      </AccordionSet>
+    </Pane>
+  );
+};
+
+NewIncidentTypePane.propTypes = {
+  handleCloseNew: PropTypes.func.isRequired,
+};
+
+export default NewIncidentTypePane;

package/src/settings/PutIncidentType.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { stripesConnect } from '@folio/stripes/core';
+
+class PutIncidentType extends React.Component {
+  static manifest = Object.freeze({
+    incidentTypes: {
+      type: 'okapi',
+      path: `incidents/configurations/incident-types`,
+      PUT: {
+        path: `incidents/configurations/incident-types`,
+      },
+      accumulate: true,
+    },
+  });
+
+  static propTypes = {
+    data: PropTypes.string,
+    mutator: PropTypes.shape({
+      incidentTypes: PropTypes.shape({
+        PUT: PropTypes.func.isRequired,
+      }).isRequired,
+    }).isRequired,
+    handleCloseNew: PropTypes.func.isRequired,
+    handleCloseEdit: PropTypes.func.isRequired,
+    handleDeleteSuccess: PropTypes.func.isRequired,
+    context: PropTypes.string.isRequired,
+  };
+
+  componentDidMount() {
+    if (this.props.data) {
+      this.updateIncidentType(this.props.data);
+    }
+  }
+
+  updateIncidentType = (data) => {
+    console.log("@updateIncidentType - data passed in --> ", JSON.stringify(this.props.data, null, 2))
+    this.props.mutator.incidentTypes
+      .PUT(data)
+      .then(() => {
+        if (this.props.context === 'new') {
+          this.props.handleCloseNew();
+        } else if (this.props.context === 'edit') {
+          this.props.handleCloseEdit();
+        } else if (this.props.context === 'details') {
+          this.props.handleDeleteSuccess();
+        }
+        console.log('update successful');
+      })
+      .catch((error) => {
+        console.error('error updating: ', error);
+      });
+  };
+
+  render() {
+    return null;
+  };
+};
+
+export default stripesConnect(PutIncidentType, '@spokane-folio/security-incident');

package/src/settings/PutLocationsInService.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { stripesConnect } from '@folio/stripes/core';
+
+class PutLocationsInService extends React.Component {
+  static manifest = Object.freeze({
+    locationsInServicePUT: {
+      type: 'okapi',
+      path: `incidents/configurations/locations-in-service`, 
+      PUT: {
+        path: `incidents/configurations/locations-in-service`, 
+      }
+    },
+  }); 
+
+  static propTypes = {
+    data: PropTypes.object,
+    mutator: PropTypes.shape({
+      locationsInServicePUT: PropTypes.shape({
+        PUT: PropTypes.func.isRequired,
+      }).isRequired,
+    }).isRequired,
+    setShow: PropTypes.func // optional, passed from LocationsPaneset only
+  };
+
+  static defaultProps = {
+    setShow: () => {}, // fallback when not supplied
+  };
+
+  componentDidMount() {
+    if (this.props.data) {
+      this.updateLocationsInService(this.props.data);
+    }
+  };
+
+  updateLocationsInService = (data) => {
+    this.props.mutator.locationsInServicePUT
+      .PUT(data)
+      .then(() => {
+        this.props.setShow(true)    
+      })
+      .catch((error) => {
+        console.error('error updating: ', error);
+      });
+  };
+
+  render() {
+    return null;
+  };
+};
+
+export default stripesConnect(PutLocationsInService, '@spokane-folio/security-incident');

package/src/settings/PutTrespassReasons.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { stripesConnect } from '@folio/stripes/core';
+
+class PutTrespassReasons extends React.Component {
+  static manifest = Object.freeze({
+    trespassReasons: {
+      type: 'okapi',
+      path: `incidents/configurations/trespass-reasons`, 
+      PUT: {
+        path: `incidents/configurations/trespass-reasons`, 
+      },
+      fetch: false,
+      accumulate: false
+    },
+  }); 
+
+  static propTypes = {
+    data: PropTypes.object,
+    mutator: PropTypes.shape({
+      trespassReasons: PropTypes.shape({
+        PUT: PropTypes.func.isRequired,
+      }).isRequired,
+    }).isRequired,
+    handleFinishEdit: PropTypes.func, // not required (invoked in Edit)
+    onSuccess: PropTypes.func, // not required (invoked in Paneset 'new')
+    handleDeleteSuccess: PropTypes.func // not required (invoked in delete context)
+  };
+
+  componentDidMount() {
+    if (this.props.data) {
+      this.updateTrespassReasons(this.props.data);
+    }
+  };
+
+  updateTrespassReasons = async (data) => {
+   if (this.props.context === 'delete') {
+    try {
+      await this.props.mutator.trespassReasons.PUT(data);
+      this.props.onSuccess?.() // tell parent paneset it succeeded
+      this.props.handleDeleteSuccess() 
+    } catch (error) {
+      console.error('error updating: ', error);
+    }
+   } else {
+    try {
+      await this.props.mutator.trespassReasons.PUT(data);
+      this.props.onSuccess?.() // tell parent paneset it succeeded
+      this.props.handleFinishEdit() // close out Edit work
+    } catch (error) {
+      console.error('error updating: ', error);
+    }
+   }
+  };
+
+  render() {
+    return null;
+  };
+};
+
+export default stripesConnect(PutTrespassReasons, '@spokane-folio/security-incident');

package/src/settings/PutTrespassTemplate.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { stripesConnect } from '@folio/stripes/core';
+
+class PutTrespassTemplate extends React.Component {
+  static manifest = Object.freeze({
+    trespassTemplatesPUT: {
+      type: 'okapi',
+      path: `incidents/configurations/trespass-templates`,
+      PUT: {
+        path: `incidents/configurations/trespass-templates`,
+      }
+    },
+  });
+
+  static propTypes = {
+    data: PropTypes.object,
+    mutator: PropTypes.shape({
+      trespassTemplatesPUT: PropTypes.shape({
+        PUT: PropTypes.func.isRequired,
+      }).isRequired,
+    }).isRequired
+  };
+
+  componentDidMount() {
+    console.log("COMPONENT DID MOUNT @PutTrespassTemplate - data --> ", JSON.stringify(this.props.data, null, 2))
+    if (this.props.data) {
+      console.log("IN CONDITION @PutTrespassTemplate - data --> ", JSON.stringify(this.props.data, null, 2))
+      this.updateRecords(this.props.data);
+    };
+  };
+
+  updateRecords = (data) => {
+    console.log("@PutTrespassTemplate - data --> ", JSON.stringify(data, null, 2))
+    this.props.mutator.trespassTemplatesPUT
+      .PUT(data)
+      .then(() => {
+        console.log("succcess update trespass templates")
+      })
+      .catch((error) => {
+        console.error('error updating: ', error);
+      });
+  };
+
+  render() {
+    return null;
+  }
+}
+
+export default stripesConnect(PutTrespassTemplate, '@spokane-folio/security-incident');

package/src/settings/TrespassDoc.css

@@ -0,0 +1,17 @@
+.ql-insertToken {
+  background: none;
+  /* Remove default background */
+  border: none;
+  color: black;
+  /* Set text color */
+  cursor: pointer;
+  padding: 5px 10px;
+  /* Adjust padding */
+  font-size: 14px;
+  /* Font size */
+}
+
+.ql-insertToken:hover {
+  background-color: #f0f0f0;
+  /* Add hover effect */
+}