@eeacms/volto-marine-policy 1.0.0

package/src/components/theme/MetadataListingView/MapPreview.jsx

@@ -0,0 +1,105 @@
+import React from 'react';
+import { Modal, Button } from 'semantic-ui-react';
+import { Icon } from '@plone/volto/components';
+import config from '@plone/volto/registry';
+import fullscreenSVG from '@plone/volto/icons/slider.svg';
+import { useHistory, useLocation } from 'react-router-dom';
+import {
+  TableauDownload,
+  TableauShare,
+} from '@eeacms/volto-marine-policy/components';
+
+const MapPreview = (props) => {
+  const { item, map_url, tableau_url, item_view } = props;
+  const itemID = item?.source?.[0].getId || item?.id;
+  const modalHash = itemID + '_preview';
+  const [open, setOpen] = React.useState(false);
+  const {
+    blocks: { blocksConfig },
+  } = config;
+  const TableauBlockView = blocksConfig.tableau_block.view;
+  const MapBlockView = blocksConfig.maps.view;
+  const history = useHistory();
+  const location = useLocation();
+
+  React.useEffect(() => {
+    if (location.hash.includes(modalHash)) {
+      setOpen(true);
+    } else {
+      setOpen(false);
+    }
+  }, [location, modalHash]);
+
+  const closeModal = () => {
+    history.push({
+      hash: item_view ? '' : itemID,
+    });
+    setOpen(false);
+  };
+
+  return (
+    <>
+      <div className="toolbar-button-wrapper">
+        <Button
+          size="mini"
+          className="viz-btn toolbar-button"
+          title="Preview"
+          onClick={() => {
+            setOpen(true);
+            if (item) {
+              history.push({
+                hash: itemID + '_preview',
+              });
+            }
+          }}
+        >
+          <Icon name={fullscreenSVG} size="28px" />
+        </Button>
+        <span className="btn-text">Preview</span>
+      </div>
+
+      <Modal
+        className="metadata-tableau"
+        onClose={closeModal}
+        onOpen={() => setOpen(true)}
+        open={open}
+      >
+        <Modal.Content>
+          {tableau_url && (
+            <TableauBlockView
+              {...props}
+              data={{ url: props.tableau_url, hideToolbar: true }}
+            >
+              {(viz) => {
+                return (
+                  <div className="tableau-icons">
+                    <TableauDownload {...props} viz={viz} />
+                    <TableauShare
+                      {...props}
+                      viz={viz}
+                      data={{ url: props.tableau_url }}
+                    />
+                  </div>
+                );
+              }}
+            </TableauBlockView>
+          )}
+
+          {map_url && (
+            <div style={{ margin: '1em 0' }}>
+              <MapBlockView {...props} data={{ url: map_url }} />
+            </div>
+          )}
+        </Modal.Content>
+
+        <Modal.Actions>
+          <Button primary onClick={closeModal}>
+            Close
+          </Button>
+        </Modal.Actions>
+      </Modal>
+    </>
+  );
+};
+
+export default MapPreview;

package/src/components/theme/MetadataListingView/MetadataHeader.jsx

@@ -0,0 +1,66 @@
+import React, { useState } from 'react';
+import { Modal } from 'semantic-ui-react';
+import {
+  ItemMetadata,
+  ItemTitle,
+  ItemMetadataSnippet,
+} from '@eeacms/volto-marine-policy/components';
+import './style.less';
+import { useLocation, useHistory } from 'react-router-dom';
+
+const MetadataHeader = (props) => {
+  const { item } = props;
+  const [isOpenModal, setOpenModal] = useState(false);
+  const history = useHistory();
+  const location = useLocation();
+
+  React.useEffect(() => {
+    if (!location.hash.includes(item.id)) {
+      setOpenModal(false);
+    }
+  }, [location, item.id]);
+
+  const closeModal = (item) => {
+    history.replace({}, document.title, window.location.pathname);
+    setOpenModal(false);
+  };
+
+  return (
+    <>
+      <div
+        className="listing-title"
+        onClick={() => {
+          setOpenModal(true);
+          history.push({
+            hash: item?.id,
+          });
+        }}
+        onKeyDown={() => setOpenModal(true)}
+        role="button"
+        tabIndex="0"
+      >
+        <h3>{item.title ? item.title : item.id}</h3>
+      </div>
+
+      <Modal
+        className="item-metadata-modal"
+        open={isOpenModal}
+        onClose={closeModal}
+        size="large"
+        closeIcon
+        centered
+      >
+        <Modal.Header>
+          <ItemMetadataSnippet item={item} />
+          <ItemTitle item={item} />
+        </Modal.Header>
+
+        <Modal.Content>
+          <ItemMetadata item={item} map_preview={true} shareItem={true} />
+        </Modal.Content>
+      </Modal>
+    </>
+  );
+};
+
+export default MetadataHeader;

package/src/components/theme/MetadataListingView/MetadataListingView.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+import {
+  ItemMetadataSnippet,
+  MetadataHeader,
+} from '@eeacms/volto-marine-policy/components';
+import './style.less';
+
+const MetadataListingView = ({ items, isEditMode, token }) => {
+  return (
+    <div className="items">
+      {items.map((item, index) => (
+        <div className="listing-item" key={item['@id']}>
+          <div className="listing-body">
+            <MetadataHeader item={item} />
+            <ItemMetadataSnippet item={item} />
+            <p>{item.description}</p>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+MetadataListingView.propTypes = {
+  items: PropTypes.arrayOf(PropTypes.any).isRequired,
+  isEditMode: PropTypes.bool,
+};
+
+export default compose(
+  connect((state) => ({
+    token: state.userSession.token,
+  })),
+)(MetadataListingView);

package/src/components/theme/MetadataListingView/style.less

@@ -0,0 +1,219 @@
+@type: 'extra';
+@element: 'custom';
+
+@import (multiple, reference, optional) '../../theme.config';
+
+.item-metadata-table {
+  .ui.definition.table tr td:first-child:not(.ignored),
+  .ui.definition.table tr td.definition {
+    width: 220px;
+    background: transparent !important;
+    color: @textColor !important;
+    font-family: @headerFont;
+    vertical-align: top;
+  }
+
+  .ui.definition.table tr td a {
+    word-break: break-word;
+  }
+
+  .ui.definition.table tr:last-child {
+    border-bottom: none;
+  }
+
+  .ui.definition.table td {
+    border: none !important;
+  }
+
+  .tag-types {
+    div {
+      display: inline-block;
+      padding: 0 10px;
+      margin: 2px;
+      background-color: #ddd;
+      font-size: 12px;
+    }
+  }
+}
+
+@media only screen and (max-width: 767px) {
+  .item-metadata-table .ui.definition.table tr {
+    box-shadow: none !important;
+  }
+}
+
+.item-metadata-modal {
+  margin: 3.5rem auto !important;
+
+  .header {
+    border-bottom: 1px solid @lightGrey !important;
+
+    h3 {
+      margin-top: 0;
+    }
+  }
+
+  .copy-box {
+    right: 15px;
+    bottom: 15px;
+  }
+
+  .content {
+    overflow: auto;
+    max-height: 600px;
+    padding-top: 0 !important;
+  }
+
+  @media only screen and (max-width: @largeMobileBreakpoint) {
+    top: 0;
+    bottom: 0;
+    width: 100% !important;
+    height: 100% !important;
+    margin: 0 !important;
+  }
+}
+
+.item-modal-metadata {
+  margin-bottom: 0.5em;
+  font-family: @pageFont;
+  font-weight: normal;
+  line-height: 18px;
+}
+
+.item-metadata-modal {
+  .header a {
+    color: @secondaryColor;
+
+    &:hover {
+      color: @primaryColorHover;
+    }
+  }
+}
+
+.listing-body {
+  position: relative;
+  margin-top: 1.7em;
+
+  .ui.basic.button.add-fav-btn {
+    position: absolute;
+    top: 4px;
+    left: -23px;
+    margin: 0;
+    box-shadow: none !important;
+
+    &:hover {
+      background-color: transparent !important;
+    }
+
+    svg {
+      margin: 0 !important;
+    }
+
+    @media only screen and (max-width: @largeMobileBreakpoint) {
+      left: -19px;
+
+      svg {
+        height: 17px !important;
+      }
+    }
+  }
+}
+
+svg.selected {
+  fill: @primaryColor !important;
+}
+
+.listing-title h3 {
+  display: inline-block;
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+}
+
+.tableau-download-dialog,
+.tableau-share-dialog {
+  z-index: 9999 !important;
+}
+
+.item-metadata {
+  display: flex;
+  margin-bottom: 0.5rem;
+  font-size: 13px;
+
+  p {
+    display: -webkit-box;
+    overflow: hidden;
+    width: 100%;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+  }
+}
+
+.metadata-tab-title {
+  margin-right: 1px;
+  color: @primaryColor;
+  font-weight: 500;
+}
+
+.metadata-icons {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  margin-top: 10px;
+  margin-bottom: 10px;
+
+  .ui.button.toolbar-button {
+    margin: 0 7px !important;
+  }
+}
+
+.metadata-tab-section {
+  display: inline-block;
+  margin-right: 10px;
+  font-size: 13px;
+}
+
+.metadata-tableau {
+  top: 0 !important;
+  width: 100% !important;
+  height: 100% !important;
+  margin: 0 !important;
+
+  .tableau-block {
+    position: relative;
+  }
+
+  .toolbar-button-wrapper .ui.button.toolbar-button {
+    margin: 0 7px !important;
+  }
+
+  .tableau-icons {
+    position: absolute;
+    top: -10px;
+    right: -18px !important;
+    display: flex;
+    flex-direction: row;
+  }
+}
+
+.toolbar-button {
+  position: relative;
+  width: 32px;
+  height: 32px;
+  padding: 2px !important;
+  background-color: @orange !important;
+  border-radius: 3px !important;
+  color: @white !important;
+
+  &:hover {
+    opacity: 0.6;
+  }
+}
+
+.toolbar-button svg {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin: 0 !important;
+  fill: #fff !important;
+  transform: translate(-50%, -50%);
+}

package/src/components/theme/SimpleListingView/SimpleListingView.jsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Modal } from 'semantic-ui-react';
+import {
+  ItemMetadata,
+  ItemTitle,
+  ItemMetadataSnippet,
+} from '@eeacms/volto-marine-policy/components';
+import { formatItemType } from '@eeacms/volto-marine-policy/utils';
+import { useLocation, useHistory } from 'react-router-dom';
+import './style.less';
+
+const SimpleListingView = ({ items, isEditMode }) => {
+  const [isOpenModal, setOpenModal] = React.useState(false);
+  const [selectedItem, setSelectedItem] = React.useState(null);
+  const modalHash = selectedItem?.getId;
+  const history = useHistory();
+  const location = useLocation();
+
+  React.useEffect(() => {
+    if (location.hash.includes(modalHash)) {
+      setOpenModal(true);
+    } else {
+      setOpenModal(false);
+    }
+  }, [location, modalHash]);
+
+  const closeModal = (item) => {
+    setOpenModal(false);
+    setSelectedItem(null);
+    history.push({
+      hash: '',
+    });
+  };
+
+  return (
+    <>
+      <ul className="items">
+        {items.map((item) => (
+          <li className="simple-listing-item" key={item['@id']}>
+            <div
+              className="simple-listing"
+              onClick={() => {
+                setOpenModal(true);
+                setSelectedItem(item);
+                history.push({
+                  hash: item?.getId,
+                });
+              }}
+              onKeyDown={() => setSelectedItem(item)}
+              role="button"
+              tabIndex="0"
+            >
+              <div className="simple-listing-title">
+                {item.title ? item.title : item.id}
+              </div>
+              {item['@type'] && (
+                <div className="metadata-tab-section">
+                  <span>{formatItemType(item['@type'])}</span>
+                </div>
+              )}
+            </div>
+          </li>
+        ))}
+      </ul>
+
+      <Modal
+        className="item-metadata-modal"
+        open={isOpenModal}
+        onClose={closeModal}
+        size="large"
+        closeIcon
+        centered
+      >
+        <Modal.Header>
+          <ItemMetadataSnippet item={selectedItem} />
+          <ItemTitle item={selectedItem} />
+        </Modal.Header>
+
+        <Modal.Content>
+          <ItemMetadata
+            item={selectedItem}
+            map_preview={true}
+            shareItem={true}
+          />
+        </Modal.Content>
+      </Modal>
+    </>
+  );
+};
+
+SimpleListingView.propTypes = {
+  items: PropTypes.arrayOf(PropTypes.any).isRequired,
+  isEditMode: PropTypes.bool,
+};
+
+export default SimpleListingView;

package/src/components/theme/SimpleListingView/style.less

@@ -0,0 +1,33 @@
+@type: 'extra';
+@element: 'custom';
+
+@import (multiple, reference, optional) '../../theme.config';
+
+.block.listing.simple {
+  font-size: 15px;
+
+  .items {
+    padding-left: 25px;
+    margin: 0;
+  }
+
+  .simple-listing-item {
+    padding-bottom: 10px;
+  }
+}
+
+.simple-listing-title {
+  cursor: pointer;
+  font-size: inherit;
+  font-weight: 500;
+  line-height: 22px;
+
+  &:hover {
+    color: @primaryColorHover;
+  }
+}
+
+.simple-listing {
+  display: inline-block;
+  vertical-align: text-top;
+}

package/src/components/theme/Tableau/TableauDownload.jsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import { Popup, Button, Modal } from 'semantic-ui-react';
+import { Icon } from '@plone/volto/components';
+import downloadSVG from '@plone/volto/icons/download.svg';
+
+const TableauDownload = (props) => {
+  const [open, setOpen] = React.useState(false);
+  const viz = props.viz.viz || {};
+
+  const exportImage = () => {
+    viz.showExportImageDialog();
+  };
+
+  const exportData = () => {
+    viz.showExportDataDialog();
+  };
+
+  const exportToCSV = () => {
+    viz.showExportCrossTabDialog();
+  };
+
+  const exportToExcel = () => {
+    viz.exportCrossTabToExcel();
+  };
+
+  const exportToPDF = () => {
+    viz.showExportPDFDialog();
+  };
+
+  const exportPowerPoint = () => {
+    viz.showExportPowerPointDialog();
+  };
+
+  const exportWorkbook = () => {
+    try {
+      viz.showDownloadWorkbookDialog();
+    } catch (err) {
+      setOpen(true);
+    }
+  };
+
+  return (
+    <>
+      <Popup
+        basic
+        className="tableau-download-dialog"
+        position="top center"
+        on="click"
+        trigger={
+          <div className="toolbar-button-wrapper">
+            <Button className="toolbar-button" title="Download">
+              <Icon name={downloadSVG} size="26px" />
+            </Button>
+            <span className="btn-text">Save</span>
+          </div>
+        }
+      >
+        <Popup.Header>Download</Popup.Header>
+        <Popup.Content>
+          <p>Select your file format.</p>
+          <Button onClick={exportImage}>Image</Button>
+          <Button onClick={exportData}>Data</Button>
+          <Button onClick={exportToCSV}>CSV</Button>
+          <Button onClick={exportToExcel}>Excel</Button>
+          <Button onClick={exportToPDF}>PDF</Button>
+          <Button onClick={exportPowerPoint}>PowerPoint</Button>
+          <Button onClick={exportWorkbook}>Tableau Workbook</Button>
+        </Popup.Content>
+      </Popup>
+
+      <Modal onClose={() => setOpen(false)} open={open}>
+        <Modal.Content>
+          Permissions are required to download the workbook.
+        </Modal.Content>
+
+        <Modal.Actions>
+          <Button primary onClick={() => setOpen(false)}>
+            OK
+          </Button>
+        </Modal.Actions>
+      </Modal>
+    </>
+  );
+};
+
+export default TableauDownload;