Expandable table updates

eea · Apr 21, 2022 · 74b1241 · 74b1241
1 parent 413db87
commit 74b1241
Show file tree

Hide file tree

Showing 5 changed files with 116 additions and 32 deletions.
diff --git a/src/components/manage/Blocks/SimpleDataTable/templates/expandable/Edit.jsx b/src/components/manage/Blocks/SimpleDataTable/templates/expandable/Edit.jsx
@@ -68,6 +68,7 @@ class Edit extends Component {
     schema.properties.popupTitle.choices = choices;
     schema.properties.popupDescription.choices = choices;
     schema.properties.popupUrl.choices = choices;
+    schema.properties.defaultSortColumn.choices = choices;
 
     //set choices for the popup table columns
     schema.properties.popupTableColumns.schema.properties.column.choices = tableChoices;

diff --git a/src/components/manage/Blocks/SimpleDataTable/templates/expandable/PopupRow.jsx b/src/components/manage/Blocks/SimpleDataTable/templates/expandable/PopupRow.jsx
@@ -175,16 +175,21 @@ const PopupRow = ({
       );
     }
   };
-
   return (
     <Modal
       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>

diff --git a/src/components/manage/Blocks/SimpleDataTable/templates/expandable/View.jsx b/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>

diff --git a/src/components/manage/Blocks/SimpleDataTable/templates/expandable/schema.js b/src/components/manage/Blocks/SimpleDataTable/templates/expandable/schema.js
@@ -124,6 +124,8 @@ export default () => ({
         'popupTitle',
         'popupDescription',
         'popupUrl',
+        'defaultSortColumn',
+        'defaultSortOrder',
         'popup_table_provider_url',
         'popupTableColumns',
         'popup_map_provider_url',
@@ -137,6 +139,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 +172,7 @@ export default () => ({
     popupTitle: {
       title: 'Popup Title',
       choices: [],
+      description: 'Title for main table and popup',
     },
     popupDescription: {
       title: 'Popup description',

diff --git a/src/components/manage/Blocks/SimpleDataTable/templates/expandable/style.less b/src/components/manage/Blocks/SimpleDataTable/templates/expandable/style.less
@@ -1,4 +1,4 @@
-.smart-table {
+.expandable-table {
   .ui.search .ui.icon.input {
     width: 100%;
 
@@ -13,19 +13,22 @@
   }
 
   .sortable-th {
-    display: flex;
-    align-items: center;
-    justify-content: center;
     border: none;
     background: none;
     cursor: pointer;
+    font-weight: 400;
+    // width: fit-content;
 
     > * {
       font-size: 1rem;
       line-height: 1rem;
     }
   }
 
+  .ui.table thead {
+    background: #72b38e;
+  }
+
   table {
     overflow: hidden;
     border: 1px solid #e8e8e8 !important;
@@ -75,25 +78,19 @@
     }
 
     .expand-row-icon {
+      width: 120px !important;
       cursor: pointer;
     }
 
-    .expand-row-icon:hover {
-      fill: #058373 !important;
-    }
-
     .expand-row-img {
       width: 120px;
       max-width: 100% !important;
       height: 60px;
       padding: 5px;
       cursor: pointer;
       object-fit: contain;
-    }
 
-    .expand-row-img:hover {
-      border-radius: 5px;
-      box-shadow: 0px 0px 13px -7px #564535;
+      border: 1px solid transparent;
     }
   }
 }
@@ -162,3 +159,30 @@
   height: 400px;
   min-height: 400px;
 }
+
+.popup-trigger-container {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.popup-trigger-title {
+  font-weight: 500;
+  margin: 0 0 0 15px !important;
+}
+
+.popup-trigger-container:hover {
+  .popup-trigger-title {
+    color: #ca4300 !important;
+    font-weight: 500;
+  }
+
+  .expand-row-img {
+    border-radius: 5px;
+    border: 1px solid #ca4300;
+  }
+
+  .expand-row-icon {
+    fill: #ca4300 !important;
+  }
+}