Merge pull request #154 from developmentseed/develop

Release v2.0.0

app/assets/scripts/components/admin/models/index.js

@@ -111,7 +111,7 @@ export default function ModelIndex() {
 
   const [isLoading, setIsLoading] = useState(true);
   const [models, setModels] = useState([]);
-  const [page, setPage] = useState(1);
+  const [page, setPage] = useState(0);
   const [total, setTotal] = useState(null);
   const [modelToDelete, setModelToDelete] = useState(null);
 
@@ -122,9 +122,7 @@ export default function ModelIndex() {
       try {
         showGlobalLoadingMessage('Loading models...');
         const data = await restApiClient.get(
-          `model/?active=all&storage=all&page=${
-            page - 1
-          }&limit=${ITEMS_PER_PAGE}`
+          `model/?active=all&storage=all&page=${page}&limit=${ITEMS_PER_PAGE}`
         );
         setTotal(data.total);
         setModels(data.models);
@@ -198,9 +196,9 @@ export default function ModelIndex() {
                     />
                     <Paginator
                       currentPage={page}
-                      gotoPage={setPage}
-                      totalItems={total}
-                      itemsPerPage={ITEMS_PER_PAGE}
+                      setPage={setPage}
+                      totalRecords={total}
+                      pageSize={ITEMS_PER_PAGE}
                     />
                   </>
                 ) : (

app/assets/scripts/components/admin/users/index.js

@@ -105,7 +105,7 @@ export default function UserIndex() {
 
   const [isLoading, setIsLoading] = useState(true);
   const [users, setUsers] = useState([]);
-  const [page, setPage] = useState(1);
+  const [page, setPage] = useState(0);
   const [total, setTotal] = useState(null);
 
   const { restApiClient } = useAuth();
@@ -115,7 +115,7 @@ export default function UserIndex() {
       try {
         showGlobalLoadingMessage('Loading users...');
         const data = await restApiClient.get(
-          `user/?sort=username&page=${page - 1}&limit=${ITEMS_PER_PAGE}`
+          `user/?sort=username&page=${page}&limit=${ITEMS_PER_PAGE}`
         );
         setTotal(data.total);
         setUsers(data.users);
@@ -161,9 +161,9 @@ export default function UserIndex() {
                     />
                     <Paginator
                       currentPage={page}
-                      gotoPage={setPage}
-                      totalItems={total}
-                      itemsPerPage={ITEMS_PER_PAGE}
+                      setPage={setPage}
+                      totalRecords={total}
+                      pageSize={ITEMS_PER_PAGE}
                     />
                   </>
                 ) : (

app/assets/scripts/components/common/card-list.js

@@ -172,6 +172,7 @@ Card.propTypes = {
 
 const CardListContainer = styled.ol`
   display: grid;
+  height: min-content;
   grid-template-columns: ${({ numColumns }) => {
     if (numColumns) {
       return css`repeat(${numColumns}, 1fr)`;
@@ -185,7 +186,7 @@ const CardListScroll = styled(ShadowScrollbar)`
   flex: 1;
 `;
 const CardListWrapper = styled(PanelBlockBody)`
-  height: 100%;
+  height: min-content;
   ${({ nonScrolling }) =>
     nonScrolling &&
     css`

app/assets/scripts/components/common/details-list.js

@@ -26,11 +26,11 @@ const List = styled.ol`
 `;
 
 function DetailsList(props) {
-  const { details } = props;
+  const { details, styles } = props;
   return (
     <List>
       {Object.entries(details).map(([key, value]) => (
-        <li key={key}>
+        <li style={styles} key={key}>
           <>
             <Subheading>{toTitleCase(key)}</Subheading>
             {React.isValidElement(value) ? value : <dd>{value}</dd>}
@@ -43,6 +43,7 @@ function DetailsList(props) {
 
 DetailsList.propTypes = {
   details: T.object,
+  styles: T.object,
 };
 
 export default DetailsList;

app/assets/scripts/components/common/forms/input-color.js

@@ -9,7 +9,7 @@ import {
   PickerStyles,
   PickerDropdownBody,
   PickerDropdownItem,
-} from '../../explore/prime-panel/tabs/retrain-refine-styles';
+} from '../../project/prime-panel/retrain-refine-styles';
 import FormGroupStructure from './form-group-structure';
 
 /**

app/assets/scripts/components/common/map/constants.js

@@ -1 +1,3 @@
 export const BOUNDS_PADDING = [25, 25];
+
+export const MOSAIC_LAYER_OPACITY = 0.8;

app/assets/scripts/components/common/paginator.js

@@ -1,136 +1,129 @@
 import React from 'react';
 import styled from 'styled-components';
 import T from 'prop-types';
-import fill from 'fill-range';
-
 import { Button } from '@devseed-ui/button';
 
-const PaginatorContainer = styled.section`
-  display: flex;
-  flex-flow: column nowrap;
-  justify-content: center;
-  text-align: center;
-  font-size: 0.875rem;
-`;
+import { themeVal, multiply } from '@devseed-ui/theme-provider';
+import { listPageOptions } from '../../utils/pagination-options';
 
-const Pager = styled.ul`
+const PaginationWrapper = styled.nav`
+  text-align: center;
+  margin: ${themeVal('layout.space')};
   display: flex;
+  flex-flow: row wrap;
   justify-content: center;
   align-items: center;
-  list-style: none;
-  list-style-type: none !important;
-  & > :not(:first-child) {
-    margin-left: 1rem;
-  }
-  ${Button} {
-    box-shadow: none;
-  }
 `;
 
-const PageButton = styled(Button)`
-  & ~ & {
-    margin-left: 0.5rem;
-  }
+const PaginationSummary = styled.div`
+  margin-top: ${themeVal('layout.space')};
+  font-size: ${multiply(themeVal('type.base.root'), 0.8)};
+  flex-basis: 100%;
 `;
 
-// Print range of page items
-// From https://stackoverflow.com/questions/47698412/pagination-in-javascript-showing-amount-of-elements-per-page
-function renderPageRange(totalItems, itemsPerPage) {
-  function getPageStart(pageSize, pageNr) {
-    return pageSize * pageNr;
-  }
+const PaginationButton = styled(Button)`
+  margin-left: ${multiply(themeVal('layout.space'), 0.5)};
 
-  function getPageLabel(total, pageSize, pageNr) {
-    const start = Math.max(getPageStart(pageSize, pageNr), 0);
-    const end = Math.min(getPageStart(pageSize, pageNr + 1), total);
-
-    return `${start + 1} - ${end}`;
+  &:first-child {
+    margin-left: 0;
   }
-
-  const size = itemsPerPage;
-  const pages = Array.from({ length: Math.ceil(totalItems / size) }, (_, i) =>
-    getPageLabel(totalItems, size, i)
-  );
-  return pages;
-}
-
+`;
 /**
  *
- * @param {Number} totalItems - total number of items
- * @param {Number} itemsPerPage - total number of pages
+ * @param {Number} totalRecords - total number of items
+ * @param {Number} pageSize - total number of pages
  * @param {Number} currentPage - current page
- * @param {Function} gotoPage - function to call to navigate to a page
+ * @param {Function} setPage - function to call to navigate to a page
  *                              (passed page number as param)
  */
-function Paginator({ currentPage, gotoPage, totalItems, itemsPerPage }) {
-  const numPages = Math.ceil(totalItems / itemsPerPage);
-  const hasPrev = currentPage > 1;
-  const hasNext = currentPage < numPages;
+function Paginator({ pageSize, currentPage, totalRecords, setPage }) {
+  const maxPages = pageSize ? Math.ceil(totalRecords / pageSize) : 0;
+  const pages = listPageOptions(currentPage + 1, maxPages);
+
   return (
-    <PaginatorContainer>
-      <Pager>
-        <li>
-          <Button
-            disabled={!hasPrev}
-            size='small'
-            variation='primary-raised-dark'
-            useIcon='chevron-left--small'
-            hideText
-            onClick={() => {
-              if (hasPrev) {
-                gotoPage(currentPage - 1);
-              }
-            }}
-          >
-            Previous
-          </Button>
-        </li>
-        <li>
-          {fill(1, numPages).map((pageNumber) => (
-            <PageButton
-              key={pageNumber}
-              data-cy={`page-${pageNumber}-button`}
-              isCurrent={pageNumber === currentPage}
-              variation={
-                pageNumber === currentPage ? 'primary-plain' : 'base-plain'
-              }
-              onClick={() => gotoPage(pageNumber)}
-            >
-              {pageNumber}
-            </PageButton>
-          ))}
-        </li>
-        <li>
-          <Button
-            disabled={!hasNext}
+    <PaginationWrapper>
+      <PaginationButton
+        data-cy='first-page-button'
+        onClick={() => setPage(0)}
+        disabled={currentPage === 0}
+        useIcon='chevron-left-trail--small'
+        hideText
+        variation='base-plain'
+        size='small'
+      >
+        First page
+      </PaginationButton>
+      <PaginationButton
+        data-cy='previous-page-button'
+        onClick={() => setPage(currentPage - 1)}
+        disabled={currentPage === 0}
+        useIcon='chevron-left--small'
+        hideText
+        variation='base-plain'
+        size='small'
+      >
+        Previous page
+      </PaginationButton>
+      {pages.map((page) => {
+        return (
+          <PaginationButton
+            onClick={() => setPage(page - 1)}
+            key={`page-${page}`}
+            variation={
+              page === '...'
+                ? 'base-plain'
+                : currentPage + 1 === page
+                ? 'primary-raised-dark'
+                : 'base-plain'
+            }
+            disabled={page === '...'}
+            data-cy={`page-${page}-button`}
             size='small'
-            variation='primary-raised-dark'
-            useIcon='chevron-right--small'
-            data-cy='next-page-button'
-            hideText
-            onClick={() => {
-              if (hasNext) {
-                gotoPage(currentPage + 1);
-              }
-            }}
           >
-            Next
-          </Button>
-        </li>
-      </Pager>
-      <div>
-        Showing {renderPageRange(totalItems, itemsPerPage)[currentPage - 1]} of{' '}
-        {totalItems}
-      </div>
-    </PaginatorContainer>
+            {page}
+          </PaginationButton>
+        );
+      })}
+      <PaginationButton
+        data-cy='next-page-button'
+        onClick={() => setPage(currentPage + 1)}
+        disabled={currentPage === maxPages - 1}
+        useIcon='chevron-right--small'
+        hideText
+        variation='base-plain'
+        size='small'
+      >
+        Next page
+      </PaginationButton>
+      <PaginationButton
+        data-cy='last-page-button'
+        onClick={() => setPage(maxPages - 1)}
+        disabled={currentPage === maxPages - 1}
+        useIcon='chevron-right-trail--small'
+        hideText
+        variation='base-plain'
+        size='small'
+      >
+        Last page
+      </PaginationButton>
+      <PaginationSummary>
+        Showing {currentPage * pageSize + 1}-
+        {Intl.NumberFormat().format(
+          currentPage === maxPages - 1
+            ? totalRecords
+            : (currentPage + 1) * pageSize
+        )}{' '}
+        of {Intl.NumberFormat().format(totalRecords)}
+      </PaginationSummary>
+    </PaginationWrapper>
   );
 }
 
 Paginator.propTypes = {
-  itemsPerPage: T.number,
-  currentPage: T.number,
-  gotoPage: T.func,
-  totalItems: T.number,
+  pageSize: T.number.isRequired,
+  currentPage: T.number.isRequired,
+  totalRecords: T.number.isRequired,
+  setPage: T.func.isRequired,
 };
 
 export default Paginator;