Merge pull request #66 from eea/develop

Develop

CHANGELOG.md

@@ -4,9 +4,19 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### [0.2.9](https://github.com/eea/volto-forests-theme/compare/0.2.8...0.2.9)
+
+- Expandable table popup format changes [`1c0d096`](https://github.com/eea/volto-forests-theme/commit/1c0d09674796c485ad48335dc5f0debdd0712018)
+- Readmore inline [`167e6ed`](https://github.com/eea/volto-forests-theme/commit/167e6edc30a0037506e32527d11037d5aa785c6b)
+- Email in expandable popup [`997b71d`](https://github.com/eea/volto-forests-theme/commit/997b71d35400e997de99b3d730c82431fe7ad305)
+- close icon on expandable modal [`2249430`](https://github.com/eea/volto-forests-theme/commit/22494308946761c74acdbf26d8247a6b2a402346)
+- Expandable table updates [`74b1241`](https://github.com/eea/volto-forests-theme/commit/74b124100f8886e196764b15cd3fb1a825679a3a)
+
 #### [0.2.8](https://github.com/eea/volto-forests-theme/compare/0.2.7...0.2.8)
 
-- check auth token update [`2b17de2`](https://github.com/eea/volto-forests-theme/commit/2b17de2b675090ccf3dc91e3f2b289b639ee96b9)
+> 19 April 2022
+
+- check auth token update [`#65`](https://github.com/eea/volto-forests-theme/pull/65)
 
 #### [0.2.7](https://github.com/eea/volto-forests-theme/compare/0.2.6...0.2.7)
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-forests-theme",
-  "version": "0.2.8",
+  "version": "0.2.9",
   "description": "@eeacms/volto-forests-theme: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

src/components/manage/Blocks/SimpleDataTable/templates/expandable/Edit.jsx

@@ -19,15 +19,11 @@ class Edit extends Component {
 
     const schema = SimpleDataTableSchema(config, templateSchema(config));
 
-    // TODO: create picker for columns to include
-
     const provider_url = this.props.data?.provider_url;
     const provider_data = provider_url
       ? this.props.providers_data[provider_url]
       : '';
 
-    // const { provider_data } = this.props;
-
     if (!provider_data) return schema;
 
     const choices = Array.from(Object.keys(provider_data).sort()).map((n) => [
@@ -68,6 +64,9 @@ class Edit extends Component {
     schema.properties.popupTitle.choices = choices;
     schema.properties.popupDescription.choices = choices;
     schema.properties.popupUrl.choices = choices;
+    schema.properties.popupEmail.choices = choices;
+
+    schema.properties.defaultSortColumn.choices = choices;
 
     //set choices for the popup table columns
     schema.properties.popupTableColumns.schema.properties.column.choices = tableChoices;

src/components/manage/Blocks/SimpleDataTable/templates/expandable/PopupRow.jsx

@@ -18,9 +18,10 @@ import {
 
 const defaultSchema = {
   title: '',
-  description: '', //
+  description: '',
   tableColumns: [],
   url: '',
+  email: '',
   logo: '',
   mapData: {},
 };
@@ -77,6 +78,7 @@ const PopupRow = ({
         image_url,
         popupDescription,
         popupUrl,
+        popupEmail,
         popupTableColumns,
         popupLong,
         popupLat,
@@ -90,6 +92,7 @@ const PopupRow = ({
         logo: rowData[image_url],
         description: rowData[popupDescription],
         url: validUrl(rowData[popupUrl]),
+        email: rowData[popupEmail],
         tableColumns: popupTableColumns,
         mapData: {
           long: popupLong,
@@ -175,35 +178,81 @@ const PopupRow = ({
       );
     }
   };
-
   return (
     <Modal
+      className="expandable-modal"
+      closeIcon
       onClose={() => handleClose()}
       onOpen={() => handleExpand()}
       open={expand}
       trigger={
-        <span>
+        <div className="popup-trigger-container">
           <ValidImage imageUrl={rowData[tableData.image_url]} />
-        </span>
+          <p className="popup-trigger-title">
+            {rowData &&
+              tableData &&
+              tableData.popupTitle &&
+              rowData[tableData.popupTitle]}
+          </p>
+        </div>
       }
     >
       <Modal.Header className="popup-header">{popupSchema.title}</Modal.Header>
       <Modal.Content scrolling>
+        <div style={{ display: 'flex' }}>
+          {popupSchema.logo && (
+            <a
+              className="popup-logo-container"
+              href={popupSchema.url}
+              target="_blank"
+              rel="noreferrer"
+            >
+              <img
+                src={popupSchema.logo}
+                alt={popupSchema.logo}
+                className="popup-logo"
+                onError={() => setPopupSchema({ ...popupSchema, logo: '' })} // don't show it if it's not available
+              />
+            </a>
+          )}
+          {popupSchema.email && popupSchema.url && (
+            <div className="info-container">
+              {popupSchema.email && (
+                <div style={{ display: 'flex' }}>
+                  <p style={{ margin: '0 10px 0 0', fontSize: '24px' }}>
+                    Email:
+                  </p>
+                  <a href={`mailto:${popupSchema.email}`} className="popup-url">
+                    {popupSchema.email}
+                  </a>
+                </div>
+              )}
+              {popupSchema.url && (
+                <div style={{ display: 'flex' }}>
+                  <p style={{ margin: '0 10px 0 0', fontSize: '24px' }}>
+                    Website:
+                  </p>
+                  <a
+                    href={popupSchema.url}
+                    target="_blank"
+                    rel="noreferrer"
+                    className="popup-url"
+                  >
+                    {popupSchema.url}
+                  </a>
+                </div>
+              )}
+            </div>
+          )}
+        </div>
         <Modal.Description style={{ display: 'flex' }}>
           {popupSchema.description && (
             <div className="description-container">
-              <ReadMore maxChars={200} text={popupSchema.description} />
+              <ReadMore maxChars={600} text={popupSchema.description} />
             </div>
           )}
-          {popupSchema.logo && (
-            <img
-              src={popupSchema.logo}
-              alt={popupSchema.logo}
-              className="popup-logo"
-              onError={() => setPopupSchema({ ...popupSchema, logo: '' })} // don't show it if it's not available
-            />
-          )}
         </Modal.Description>
+
         <div
           style={{
             display: 'flex',
@@ -219,14 +268,6 @@ const PopupRow = ({
                 tableColumns={popupSchema.tableColumns}
               />
             )}
-            <a
-              href={popupSchema.url}
-              target="_blank"
-              rel="noreferrer"
-              className="popup-url"
-            >
-              {popupSchema.url}
-            </a>
           </div>
           <div style={{ width: '49%' }}>
             {rowData && (

src/components/manage/Blocks/SimpleDataTable/templates/expandable/ReadMore.jsx

@@ -18,9 +18,13 @@ const ReadMore = ({ text, maxChars }) => {
     <span className="readmore-container">
       <p className="readmore-text">{more ? text : displayText}</p>
       {showAction && (
-        <button className="readmore-action" onClick={() => setMore(!more)}>
+        <p
+          role="presentation"
+          className="readmore-action"
+          onClick={() => setMore(!more)}
+        >
           {more ? 'Read less..' : 'Read more..'}
-        </button>
+        </p>
       )}
     </span>
   );

src/components/manage/Blocks/SimpleDataTable/templates/expandable/View.jsx

@@ -95,6 +95,16 @@ const View = (props) => {
     [filteredTableData, selectedColumns],
   );
 
+  React.useEffect(() => {
+    if (data.defaultSortColumn && data.defaultSortOrder) {
+      if (data.defaultSortOrder === 'ascending') {
+        setSortBy([data.defaultSortColumn, true]);
+      } else {
+        setSortBy([data.defaultSortColumn, false]);
+      }
+    }
+  }, [data.defaultSortColumn, data.defaultSortOrder]);
+
   React.useEffect(() => {
     const newTableData = [];
     if (provider_data_length) {
@@ -139,9 +149,10 @@ const View = (props) => {
   }, []);
 
   return (
-    <div className="smart-table">
+    <div className="expandable-table">
       <Search
         ref={search}
+        placeholder={data.searchDescription}
         loading={loadingProviderData || loading}
         onResultSelect={() => {}}
         showNoResults={false}
@@ -158,11 +169,6 @@ const View = (props) => {
           return '';
         }}
       />
-      {data.searchDescription ? (
-        <p className="search-description">{data.searchDescription}</p>
-      ) : (
-        ''
-      )}
       <Table
         textAlign="left"
         striped={data.striped}
@@ -172,16 +178,40 @@ const View = (props) => {
         {show_header ? (
           <Table.Header>
             <Table.Row>
-              <Table.HeaderCell></Table.HeaderCell>
+              <Table.HeaderCell>
+                <button
+                  className="sortable-th"
+                  title="Sort by"
+                  onClick={() => {
+                    if (sortBy[0] === data.popupTitle) {
+                      setSortBy([data.popupTitle, !sortBy[1]]);
+                    } else {
+                      setSortBy([data.popupTitle, true]);
+                    }
+                  }}
+                  style={{ display: 'flex' }}
+                >
+                  <span>
+                    <span style={{ color: '#3f3227', fontWeight: 'bold' }}>
+                      Organisation
+                    </span>
+                    {sortBy[0] === data.popupTitle ? (
+                      <Icon name={sortBy[1] ? upSVG : downSVG} size="1rem" />
+                    ) : (
+                      <Icon name={upDownSVG} size="1rem" color="grey" />
+                    )}
+                  </span>
+                </button>
+              </Table.HeaderCell>
               {selectedColumns &&
                 selectedColumns.length > 0 &&
                 selectedColumns.map((colDef, j) => (
                   <Table.HeaderCell
                     key={getNameOfColumn(colDef)}
                     className={getAlignmentOfColumn(colDef, j)}
                   >
-                    <button
-                      className="sortable-th"
+                    <p
+                      role="presentation"
                       title="Sort by"
                       onClick={() => {
                         if (sortBy[0] === colDef.column) {
@@ -190,15 +220,24 @@ const View = (props) => {
                           setSortBy([colDef.column, true]);
                         }
                       }}
-                      style={{ display: 'flex' }}
+                      style={{
+                        marginBottom: 0,
+                        whiteSpace: 'nowrap',
+                        color: '#3f3227',
+                      }}
                     >
-                      <span>{getTitleOfColumn(colDef)}</span>
-                      {sortBy[0] === colDef.column ? (
-                        <Icon name={sortBy[1] ? upSVG : downSVG} size="1rem" />
-                      ) : (
-                        <Icon name={upDownSVG} size="1rem" color="grey" />
-                      )}
-                    </button>
+                      <span style={{ display: 'inline-block' }}>
+                        <span>{getTitleOfColumn(colDef)}</span>
+                        {sortBy[0] === colDef.column ? (
+                          <Icon
+                            name={sortBy[1] ? upSVG : downSVG}
+                            size="1rem"
+                          />
+                        ) : (
+                          <Icon name={upDownSVG} size="1rem" color="grey" />
+                        )}
+                      </span>
+                    </p>
                   </Table.HeaderCell>
                 ))}
             </Table.Row>

src/components/manage/Blocks/SimpleDataTable/templates/expandable/schema.js

@@ -124,6 +124,9 @@ export default () => ({
         'popupTitle',
         'popupDescription',
         'popupUrl',
+        'popupEmail',
+        'defaultSortColumn',
+        'defaultSortOrder',
         'popup_table_provider_url',
         'popupTableColumns',
         'popup_map_provider_url',
@@ -137,6 +140,18 @@ export default () => ({
       title: 'Search description',
       widget: 'textarea',
     },
+    defaultSortColumn: {
+      title: 'Default Sort Column',
+      description: 'Automatic sorting of table by selected column',
+      choices: [],
+    },
+    defaultSortOrder: {
+      title: 'Default Sort Order',
+      choices: [
+        ['ascending', 'ascending'],
+        ['descending', 'descending'],
+      ],
+    },
     popup_table_provider_url: {
       title: 'Popup Table provider',
       widget: 'object_by_path',
@@ -158,6 +173,7 @@ export default () => ({
     popupTitle: {
       title: 'Popup Title',
       choices: [],
+      description: 'Title for main table and popup',
     },
     popupDescription: {
       title: 'Popup description',
@@ -167,6 +183,10 @@ export default () => ({
       title: 'Popup Url',
       choices: [],
     },
+    popupEmail: {
+      title: 'Popup Email',
+      choices: [],
+    },
     popupTableColumns: {
       title: 'Popup Table Columns',
       description: 'Define popup table columns',