@spokane-folio/security-incident 1.0.28

package/src/components/incidents/ModalViewCustomerDetails.js

@@ -0,0 +1,241 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import {
+  AccordionSet,
+  Accordion,
+  Button,
+  Col,
+  Headline,
+  Modal,
+  ModalFooter,
+  Pane,
+  Paneset,
+  Row,
+} from '@folio/stripes/components';
+import { useIncidents } from '../../contexts/IncidentContext';
+import css from './ModalStyle.css';
+
+const ModalViewCustomerDetails = ({ customerID, customersForView }) => {
+  const { isModalViewCustomerDetails, closeModalViewCustomerDetails } =
+    useIncidents();
+
+  // uses 'description' field in customer object
+  const [customerDescription, setCustomerDescription] = useState('');
+  // uses 'details' object in customer object
+  const [customerDetailsData, setCustomerDetailsData] = useState({
+    sex: '',
+    race: '',
+    height: '',
+    weight: '',
+    hair: '',
+    eyes: '',
+    dateOfBirth: '',
+    streetAddress: '',
+    city: '',
+    state: '',
+    zipcode: '',
+  });
+
+  useEffect(() => {
+    const currentCustomer = customersForView.find(
+      (cust) => cust.id === customerID
+    );
+    if (currentCustomer && currentCustomer.details) {
+      const currentDetails = {
+        sex: currentCustomer.details.sex || '',
+        race: currentCustomer.details.race || '',
+        height: currentCustomer.details.height || '',
+        weight: currentCustomer.details.weight || '',
+        hair: currentCustomer.details.hair || '',
+        eyes: currentCustomer.details.eyes || '',
+        dateOfBirth: currentCustomer.details.dateOfBirth || '',
+        streetAddress: currentCustomer.details.streetAddress || '',
+        city: currentCustomer.details.city || '',
+        state: currentCustomer.details.state || '',
+        zipcode: currentCustomer.details.zipcode || ''
+      };
+      setCustomerDetailsData(currentDetails);
+    }
+    if (currentCustomer && currentCustomer.description) {
+      const currentDescription = currentCustomer.description || '';
+      setCustomerDescription(currentDescription);
+    }
+  }, [customerID, customersForView]);
+
+  const createMarkup = (content) => {
+    return {__html: content}
+  };
+
+  if (!isModalViewCustomerDetails) {
+    return null;
+  }
+
+  const footer = (
+    <ModalFooter>
+      <Button
+        onClick={closeModalViewCustomerDetails}
+        buttonStyle="primary"
+        marginBottom0
+      >
+        <FormattedMessage id="close-button" />
+      </Button>
+    </ModalFooter>
+  );
+
+  return (
+    <Modal
+      style={{ minHeight: '600px' }}
+      open
+      dismissible
+      onClose={closeModalViewCustomerDetails}
+      closeOnBackgroundClick
+      label={<FormattedMessage id="modal-view-customer-details-label" />}
+      size="large"
+      footer={footer}
+      contentClass={css.modalContent}
+    >
+      <Paneset>
+        <Pane defaultWidth="100%">
+          <AccordionSet>
+            <Accordion
+              label={
+                <FormattedMessage id="modal-view-customer-details.accordion-label-customer-description" />
+              }
+            >
+              <Row>
+                <Col xs={4}>
+                  <div 
+                    dangerouslySetInnerHTML={createMarkup(customerDescription)}>
+                  </div>
+                </Col>
+              </Row>
+            </Accordion>
+            <Accordion
+              label={
+                <FormattedMessage id="modal-view-customer-details.accordion-label-identity-details" />
+              }
+            >
+              <Row style={{ marginTop: '30px' }}>
+                <Col xs={2}>
+                  <Headline size="medium" tag="h2">
+                    <FormattedMessage id="modal-view-customer-details.headline-sex" />
+                  </Headline>
+                  <p>
+                    {customerDetailsData.sex ? customerDetailsData.sex : '-'}
+                  </p>
+                </Col>
+
+                <Col xs={2}>
+                  <Headline size="medium" tag="h2">
+                    <FormattedMessage id="modal-view-customer-details.headline-race" />
+                  </Headline>
+                  <p>
+                    {customerDetailsData.race ? customerDetailsData.race : '-'}
+                  </p>
+                </Col>
+                <Col xs={2}>
+                  <Headline size="medium" tag="h2">
+                    <FormattedMessage id="modal-view-customer-details.headline-weight" />
+                  </Headline>
+                  <p>
+                    {customerDetailsData.height
+                      ? customerDetailsData.height
+                      : '-'}
+                  </p>
+                </Col>
+              </Row>
+
+              <Row style={{ marginTop: '30px' }}>
+                <Col xs={2}>
+                  <Headline size="medium" tag="h2">
+                    <FormattedMessage id="modal-view-customer-details.headline-weight" />
+                  </Headline>
+                  <p>
+                    {customerDetailsData.weight
+                      ? customerDetailsData.weight
+                      : '-'}
+                  </p>
+                </Col>
+                <Col xs={2}>
+                  <Headline size="medium" tag="h2">
+                    <FormattedMessage id="modal-view-customer-details.headline-hair" />
+                  </Headline>
+                  <p>
+                    {customerDetailsData.hair ? customerDetailsData.hair : '-'}
+                  </p>
+                </Col>
+                <Col xs={2}>
+                  <Headline size="medium" tag="h2">
+                    <FormattedMessage id="modal-view-customer-details.headline-eyes" />
+                  </Headline>
+                  <p>
+                    {customerDetailsData.eyes ? customerDetailsData.eyes : '-'}
+                  </p>
+                </Col>
+              </Row>
+
+              <Row style={{ marginTop: '30px' }}>
+                <Col xs={2}>
+                  <Headline size="medium" tag="h2">
+                    <FormattedMessage id="modal-view-customer-details.headline-date-of-birth" />
+                  </Headline>
+                  <p>
+                    {customerDetailsData.dateOfBirth
+                      ? customerDetailsData.dateOfBirth.slice(0, 10)
+                      : '-'}
+                  </p>
+                </Col>
+                <Col xs={2}>
+                  <Headline size="medium" tag="h2">
+                    <FormattedMessage id="modal-view-customer-details.headline-street-address" />
+                  </Headline>
+                  <p>
+                    {customerDetailsData.streetAddress
+                      ? customerDetailsData.streetAddress
+                      : '-'}
+                  </p>
+                </Col>
+                <Col xs={2}>
+                  <Headline size="medium" tag="h2">
+                    <FormattedMessage id="modal-view-customer-details.headline-city" />
+                  </Headline>
+                  <p>
+                    {customerDetailsData.city ? customerDetailsData.city : '-'}
+                  </p>
+                </Col>
+                <Col xs={2}>
+                  <Headline size="medium" tag="h2">
+                    <FormattedMessage id="modal-view-customer-details.headline-state" />
+                  </Headline>
+                  <p>
+                    {customerDetailsData.state
+                      ? customerDetailsData.state
+                      : '-'}
+                  </p>
+                </Col>
+                <Col xs={2}>
+                  <Headline size="medium" tag="h2">
+                    <FormattedMessage id="modal-view-customer-details.headline-zipcode" />
+                  </Headline>
+                  <p>
+                    {customerDetailsData.zipcode
+                      ? customerDetailsData.zipcode
+                      : '-'}
+                  </p>
+                </Col>
+              </Row>
+            </Accordion>
+          </AccordionSet>
+        </Pane>
+      </Paneset>
+    </Modal>
+  );
+};
+
+ModalViewCustomerDetails.propTypes = {
+  customerID: PropTypes.string.isRequired,
+  customersForView: PropTypes.arrayOf(PropTypes.object).isRequired,
+};
+
+export default ModalViewCustomerDetails;

package/src/components/incidents/ModalViewMedia.js

@@ -0,0 +1,86 @@
+import React, { useState } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { Col, Loading, Modal, Row } from '@folio/stripes/components';
+import { useIncidents } from '../../contexts/IncidentContext';
+import GetMedia from './GetMedia';
+
+const ModalViewMedia = ({ modalViewImageData }) => {
+  const { isModalViewImage, closeModalViewImage } = useIncidents();
+  const { id, imageId, alt, contentType, imageDescription} = modalViewImageData;
+  const [mediaUrl, setMediaUrl] = useState('');
+  const [isLoading, setIsLoading] = useState(true);
+
+  if (!isModalViewImage) {
+    return null;
+  };
+
+  const handleDataResponse = (url) => {
+    setMediaUrl(url)
+    setIsLoading(false)
+  };
+ 
+  const isVideo = contentType.startsWith('video');
+
+  const handleDismissClose = () => {
+    closeModalViewImage();
+  };
+
+  return (
+    <Modal
+      style={{ 
+        minHeight: '550px',
+        height: '60%', // allows modal to grow/shrink based on content
+        maxHeight: '300vh',  // modal will never exceed 90% of viewport height
+        maxWidth: '400vw', // modal width responsive to viewport width
+        width: '80%' // modal width adjusts based on content and window size
+      }}
+      open
+      dismissible
+      closeOnBackgroundClick
+      label={imageDescription}
+      size="large"
+      onClose={handleDismissClose}
+    >
+      {id && imageId && 
+        <GetMedia 
+          context='original-or-video'
+          id={id} 
+          imageId={imageId} 
+          handleDataResponse={handleDataResponse}
+        />}
+
+      {isLoading ? (
+        <Row style={{ display: 'flex', justifyContent: 'center', marginTop: "150px"}}>
+          <Col>
+          <div style={{ "display": "flex", "justiftContent": "center", "aligItems": "center", "height": "100%" }}>
+            <Loading size='large'/>
+          </div>
+          </Col>
+        </Row>
+        ) : ( 
+        <Row style={{ display: 'flex', justifyContent: 'center' }}>
+        <Col xs={8} style={{ textAlign: 'center' }}>
+          {isVideo ? (
+            mediaUrl && <video 
+              width="650" 
+              height="auto" 
+              controls controlsList="nodownload" // do not render download option
+              oncontextmenu="return false;" // prevent right click download option
+              >
+                <source src={mediaUrl} type={contentType}></source>
+                <FormattedMessage id="video-player-default-text" />
+            </video>          
+          ) : (mediaUrl && <img
+            src={mediaUrl}
+            alt={alt}
+            style={{ width: '550px', margin: 'auto' }}
+            className="img-fluid"
+          />)}
+        </Col>
+      </Row>
+      )}
+    </Modal>
+  );
+};
+
+export default ModalViewMedia;

package/src/components/incidents/ModalViewTrespass.js

@@ -0,0 +1,210 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import {
+  AccordionSet,
+  Accordion,
+  Button,
+  Col,
+  Headline,
+  List,
+  Modal,
+  ModalFooter,
+  Pane,
+  Paneset,
+  Row,
+} from '@folio/stripes/components';
+import { useIncidents } from '../../contexts/IncidentContext';
+import css from './ModalStyle.css';
+import GetLocationsInService from '../../settings/GetLocationsInService';
+
+const ModalViewTrespass = ({ customerID, customersForView }) => {
+  const { 
+    isModalViewTrespass, 
+    closeModalViewTrespass, 
+    locationsInService 
+  } = useIncidents();
+
+  const [trespassData, setTrespassData] = useState({
+    dateOfOccurrence: '',
+    exclusionOrTrespassBasedOn: [],
+    witnessedBy: { witnesses: [] },
+    endDateOfTrespass: '',
+    declarationOfService: {
+      date: '',
+      placeSigned: '',
+      title: '',
+      signature: false,
+    },
+  });
+
+  const associatedKeyPlaceSigned = (value) => {
+    // value is expected to tbe the id associated w/ locationInService obj
+    const locObject = locationsInService.find(loc => loc.id === value)
+    // return the obj's location (which is the 'Pretty Name')
+    return locObject ? locObject.location : '';
+  };
+
+  useEffect(() => {
+    const currentCustomer = customersForView.find(
+      (cust) => cust.id === customerID
+    );
+    if (currentCustomer && currentCustomer.trespass) {
+      const trespass = currentCustomer.trespass;
+      const declarationOfService = trespass.declarationOfService || {
+        date: '',
+        placeSigned: '',
+        title: '',
+        signature: false,
+      };
+
+      const currentDetails = {
+        dateOfOccurrence: trespass.dateOfOccurrence || '',
+        exclusionOrTrespassBasedOn: trespass.exclusionOrTrespassBasedOn || [],
+        endDateOfTrespass: trespass.endDateOfTrespass || '',
+        declarationOfService: declarationOfService ? {
+          date: declarationOfService.date || '',
+          placeSigned: associatedKeyPlaceSigned(declarationOfService.placeSigned) || '',
+          title: declarationOfService.title || '',
+          signature: declarationOfService.signature || false,
+        } : {
+          date: '',
+          placeSigned: '',
+          title: '',
+          signature: false,
+        },
+      };
+      setTrespassData(currentDetails);
+    }
+  }, [customerID, customersForView]);
+
+  const itemsFormatterExclusionList = (item) => {
+    return <li style={{ marginLeft: '10px' }}>{item}</li>;
+  };
+
+  if (!isModalViewTrespass) {
+    return null;
+  };
+
+  const footer = (
+    <ModalFooter>
+      <Button
+        onClick={closeModalViewTrespass}
+        buttonStyle="primary"
+        marginBottom0
+      >
+        <FormattedMessage id="close-button" />
+      </Button>
+    </ModalFooter>
+  );
+
+  return (
+    <Modal
+      style={{ minHeight: '1050px' }}
+      open
+      dismissible
+      onClose={closeModalViewTrespass}
+      closeOnBackgroundClick
+      label={<FormattedMessage id="modal-view-trespass-label" />}
+      size="large"
+      footer={footer}
+      contentClass={css.modalContent}
+    >
+      <Paneset>
+        <Pane defaultWidth="100%">
+          <GetLocationsInService />
+          <AccordionSet>
+            <Accordion
+              label={
+                <FormattedMessage id="modal-view-trespass.accordion-trespass-details-label" />
+              }
+            >
+              <Row style={{ marginTop: '15px' }}>
+                <Col xs={4}>
+                  <Headline size="medium" tag="h3">
+                    <FormattedMessage id="modal-view-trespass.headline-exclusion-based-on" />
+                  </Headline>
+                  <List
+                    label={
+                      <FormattedMessage id="modal-view-trespass.headline-exclusion-based-on" />
+                    }
+                    listStyle="bullets"
+                    items={trespassData.exclusionOrTrespassBasedOn}
+                    itemFormatter={itemsFormatterExclusionList}
+                    isEmptyMessage="-"
+                  />
+                </Col>
+              </Row>
+              <Row style={{ marginTop: '15px' }}>
+                <Col xs={4}>
+                  <Headline size="medium" tag="h3">
+                    <FormattedMessage id="modal-view-trespass.headline-end-date-trespass" />
+                  </Headline>
+                  <p>
+                    {trespassData.endDateOfTrespass
+                      ? trespassData.endDateOfTrespass.slice(0, 10)
+                      : '-'}
+                  </p>
+                </Col>
+              </Row>
+            </Accordion>
+
+            <Accordion
+              label={
+                <FormattedMessage id="modal-view-trespass.accordion-declaration-of-service-label" />
+              }
+            >
+              <Row style={{ marginTop: '15px' }}>
+                <Col xs={2}>
+                  <Headline size="medium" tag="h3">
+                    <FormattedMessage id="modal-view-trespass.headline-date-served" />
+                  </Headline>
+                  <p>
+                    {trespassData.declarationOfService.date
+                      ? trespassData.declarationOfService.date.slice(0, 10)
+                      : '-'}
+                  </p>
+                </Col>
+                <Col xs={2}>
+                  <Headline size="medium" tag="h3">
+                    <FormattedMessage id="modal-view-trespass.headline-place-signed" />
+                  </Headline>
+                  <p>
+                    {trespassData.declarationOfService.placeSigned
+                      ? trespassData.declarationOfService.placeSigned
+                      : '-'}
+                  </p>
+                </Col>
+                <Col xs={2}>
+                  <Headline size="medium" tag="h3">
+                    <FormattedMessage id="modal-view-trespass.headline-title" />
+                  </Headline>
+                  <p>
+                    {trespassData.declarationOfService.title
+                      ? trespassData.declarationOfService.title
+                      : '-'}
+                  </p>
+                </Col>
+                <Col xs={2}>
+                  <Headline size="medium" tag="h3">
+                    <FormattedMessage id="modal-view-trespass.headline-signed" />
+                  </Headline>
+                  <p>
+                    {trespassData.declarationOfService.signature ? 'Yes' : '-'}
+                  </p>
+                </Col>
+              </Row>
+            </Accordion>
+          </AccordionSet>
+        </Pane>
+      </Paneset>
+    </Modal>
+  );
+};
+
+ModalViewTrespass.propTypes = {
+  customerID: PropTypes.string.isRequired,
+  customersForView: PropTypes.arrayOf(PropTypes.object).isRequired,
+};
+
+export default ModalViewTrespass;