Enhancement/collection-groups-cleanup

src/app-pages/collectiongroup/collectiongroup-timeseries-list.js

@@ -1,5 +1,5 @@
-import { formatDistanceToNow, parseISO } from 'date-fns';
 import React, { useState } from 'react';
+import { formatDistanceToNow, parseISO } from 'date-fns';
 
 import Button from '../../app-components/button';
 import RoleFilter from '../../app-components/role-filter';
@@ -13,25 +13,21 @@ const TimeseriesListEntry = ({
 
   return (
     // Flex Wrapper
-    <div
-      className='d-flex flex-row list-group-item border-0 bg-light my-1'
-      style={{ cursor: 'pointer' }}
-    >
+    <div className='d-flex flex-row list-group-item border-0 bg-light my-1'>
       {/* Column 1 */}
       <div className='d-flex flex-row' style={{ minWidth: '420px' }}>
         <div className='d-flex flex-column my-2'>
           <div className='h5 mb-1'>
-            <a
-              href={`/${item.project_slug}/instruments/${item.instrument_slug}`}
-            >
+            <a href={`/${item.project_slug}/instruments/${item.instrument_slug}`}>
               {item.instrument}
             </a>
             <RoleFilter allowRoles={[`${item.project_slug.toUpperCase()}.*`]}>
               <Button
                 variant='link'
                 className='text-secondary h-100'
                 handleClick={() => handleItemDelete(item)}
-                icon={<i className='mdi mdi-delete' />}
+                icon={<i className='mdi mdi-delete-outline text-danger' />}
+                title='Remove from group'
               />
             </RoleFilter>
           </div>
@@ -58,27 +54,25 @@ const TimeseriesListEntry = ({
         </div>
         {/* Column 3 */}
         <div className='d-flex flex-row'>
-          <div>
+          <div className='input-group'>
             <input
-              style={{ width: 200, textAlign: 'center' }}
               type='number'
               value={value}
               className='form-control'
-              placeholder='enter value'
-              onChange={(e) => {
-                setValue(e.target.value);
-              }}
+              placeholder='Enter value...'
+              onChange={(e) => setValue(e.target.value)}
             />
-          </div>
-          <div
-            className='btn btn-secondary btn-small ml-1 text-uppercase'
-            onClick={(e) => {
-              handleItemSaveValue(item, value);
-              setValue('');
-            }}
-          >
-            <i className='mdi mdi-plus mdi-16px' />
-            add
+            <div className='input-group-append'>
+              <Button
+                variant='secondary'
+                handleClick={() => {
+                  handleItemSaveValue(item, value);
+                  setValue('');
+                }}
+                text='Add'
+                icon={<i className='mdi mdi-plus' />}
+              />
+            </div>
           </div>
         </div>
       </div>

src/app-pages/collectiongroup/collectiongroup-timeseries-picker.js

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { connect } from 'redux-bundler-react';
 
+import Dropdown from '../../app-components/dropdown';
 import { ModalFooter, ModalHeader } from '../../app-components/modal';
 
 export default connect(
@@ -15,7 +16,6 @@ export default connect(
     instrumentTimeseriesItemsByRoute: timeseries,
   }) => {
     const [timeseriesSelected, setTimeseriesSelected] = useState(null);
-    const [dropdownVisible, setDropdownVisible] = useState(false);
 
     const handleClickAdd = (e) => {
       e.preventDefault();
@@ -34,39 +34,22 @@ export default connect(
       <div className='modal-content' style={{ overflow: 'visible' }}>
         <ModalHeader title='Add Field' />
         <section className='modal-body' style={{ overflow: 'visible' }}>
-          <div className='dropdown'>
-            <button
-              className='btn btn-secondary dropdown-toggle w-100'
-              type='button'
-              id='dropdownMenuButton'
-              data-toggle='dropdown'
-              aria-haspopup='true'
-              aria-expanded='false'
-              onClick={(e) => setDropdownVisible(!dropdownVisible)}
-            >
-              {(timeseriesSelected &&
-                timeseriesSelected.name &&
-                timeseriesSelected.instrument &&
-                `${timeseriesSelected.instrument}  |  ${timeseriesSelected.name}`) ||
-                'Select a Timeseries'}
-            </button>
-            <div
-              className={`dropdown-menu ${dropdownVisible ? 'show' : ''}`}
-              style={{ maxHeight: 240, overflow: 'auto' }}
-              aria-labelledby='dropdownMenuButton'
-            >
-              {timeseries.map((t, idx) => (
-                <span
-                  key={idx}
-                  onClick={(e) => {
-                    setTimeseriesSelected(t);
-                    setDropdownVisible(false);
-                  }}
-                  className='dropdown-item'
-                >{`${t.instrument}  |  ${t.name}`}</span>
-              ))}
-            </div>
-          </div>
+          <Dropdown.Menu
+            buttonClasses={['btn-secondary', 'w-100']}
+            buttonContent={(
+              timeseriesSelected &&
+              timeseriesSelected.name &&
+              timeseriesSelected.instrument &&
+              `${timeseriesSelected.instrument}  |  ${timeseriesSelected.name}`
+            ) || 'Select a Timeseries'}
+          >
+            {timeseries.map((t, idx) => (
+              <Dropdown.Item key={idx} onClick={() => setTimeseriesSelected(t)}>
+                {`${t.instrument}  |  ${t.name}`}
+              </Dropdown.Item>
+
+            ))}
+          </Dropdown.Menu>
         </section>
         <ModalFooter
           customClosingLogic

src/app-pages/collectiongroup/collectiongroup-timestamp-mode-switcher.css

@@ -4,3 +4,7 @@
   display: block;
   width: 100%;
 }
+
+.react-datepicker-popper {
+  z-index: 999;
+}

src/app-pages/instrument/timeseries/timeseries.js

@@ -55,7 +55,7 @@ export default connect(
           headerName: key.toUpperCase(),
           field: key,
           resizable: true,
-          sortable: false,
+          sortable: true,
           filter: true,
           editable: false,
         })),