feat(dashboard): person list (#1682)

* feat(dashboard): person list * fix: test
SocialGouv · Oct 10, 2023 · 342716c · 342716c
1 parent b34d93f
commit 342716c
Show file tree

Hide file tree

Showing 8 changed files with 206 additions and 127 deletions.
diff --git a/dashboard/public/icon_1024.png b/dashboard/public/icon_1024.png
diff --git a/dashboard/public/icon_512.png b/dashboard/public/icon_512.png
diff --git a/dashboard/public/index.html b/dashboard/public/index.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+    <link rel="manifest" href="mano.webmanifest" />
     <meta name="theme-color" content="#008e7f" />
     <link rel="shortcut icon" href="/favicon.png" />
     <title>Mano - Admin</title>

diff --git a/dashboard/public/mano.webmanifest b/dashboard/public/mano.webmanifest
@@ -0,0 +1,21 @@
+{
+  "name": "Mano",
+  "short_name": "Mano",
+  "theme_color": "#008e7f",
+  "background_color": "#008e7f",
+  "display": "fullscreen",
+  "scope": "./",
+  "start_url": "./",
+  "icons": [
+    {
+      "src": "icon_1024.png",
+      "type": "image/png",
+      "sizes": "1024x1024"
+    },
+    {
+      "src": "icon_512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ]
+}
diff --git a/dashboard/src/app.js b/dashboard/src/app.js
@@ -181,7 +181,7 @@ const RestrictedRoute = ({ component: Component, _isLoggedIn, ...rest }) => {
     padding: 0 !important;
     overflow: initial;
         */}
-        <main className="tw-relative tw-flex tw-grow tw-basis-full tw-flex-col tw-overflow-auto tw-overflow-y-scroll tw-px-2 print:!tw-ml-0 print:tw-h-auto print:tw-max-w-full print:tw-overflow-visible print:tw-p-0 sm:tw-px-12 sm:tw-pt-4 sm:tw-pb-12">
+        <main className="tw-relative tw-flex tw-grow tw-basis-full tw-flex-col tw-overflow-auto tw-overflow-x-hidden tw-overflow-y-scroll tw-px-2 print:!tw-ml-0 print:tw-h-auto print:tw-max-w-full print:tw-overflow-visible print:tw-p-0 sm:tw-px-12 sm:tw-pt-4 sm:tw-pb-12">
           <SentryRoute {...rest} render={(props) => (user ? <Component {...props} /> : <Redirect to={{ pathname: '/auth' }} />)} />
         </main>
       </div>

diff --git a/dashboard/src/components/table.js b/dashboard/src/components/table.js
@@ -1,9 +1,11 @@
 import React, { useCallback, useEffect, useRef } from 'react';
 import Sortable from 'sortablejs';
+import useMinimumWidth from '../services/useMinimumWidth';
 
 const Table = ({
   columns = [],
   data = [],
+  renderCellSmallDevices,
   rowKey,
   dataTestId = null,
   onRowClick,
@@ -33,6 +35,8 @@ const Table = ({
     }
   }, [onListChange, isSortable, data.length]);
 
+  const isDesktop = useMinimumWidth('sm');
+
   if (!data.length && noData) {
     return (
       <table className={[className, 'table-selego'].join(' ')}>
@@ -51,84 +55,95 @@ const Table = ({
       </table>
     );
   }
-  return (
-    <table className={[className, 'table-selego'].join(' ')}>
-      <thead>
-        {!!title && (
+
+  if (isDesktop || !renderCellSmallDevices) {
+    return (
+      <table className={[className, 'table-selego'].join(' ')}>
+        <thead className="tw-hidden sm:tw-table-header-group">
+          {!!title && (
+            <tr>
+              <td tabIndex={0} aria-label={title} className="title" colSpan={columns.length}>
+                {title}
+              </td>
+            </tr>
+          )}
           <tr>
-            <td tabIndex={0} aria-label={title} className="title" colSpan={columns.length}>
-              {title}
-            </td>
-          </tr>
-        )}
-        <tr>
-          {columns.map((column) => {
-            const { onSortBy, onSortOrder, sortBy, sortOrder, sortableKey, dataKey } = column;
-            const onNameClick = () => {
-              if (sortBy === sortableKey || sortBy === dataKey) {
-                onSortOrder(sortOrder === 'ASC' ? 'DESC' : 'ASC');
-                return;
-              }
-              onSortBy(sortableKey || dataKey);
-            };
-            return (
-              <td
-                className={[column.className || '', !!onSortBy ? 'tw-cursor-pointer' : 'tw-cursor-default'].join(' ')}
-                style={column.style || {}}
-                key={String(dataKey) + String(column.title)}>
-                <button aria-label="Changer l'ordre de tri" type="button" onClick={!!onSortBy ? onNameClick : null}>
-                  {column.title}
-                </button>
-                {column.help && <>{column.help}</>}
-                {!!onSortBy && (sortBy === sortableKey || sortBy === dataKey) && (
-                  <button onClick={!!onSortBy ? onNameClick : null} type="button" aria-label="Changer l'ordre de tri">
-                    {sortOrder === 'ASC' && <span className="tw-mx-4" onClick={() => onSortOrder('DESC')}>{`\u00A0\u2193`}</span>}
-                    {sortOrder === 'DESC' && <span className="tw-mx-4" onClick={() => onSortOrder('ASC')}>{`\u00A0\u2191`}</span>}
+            {columns.map((column) => {
+              const { onSortBy, onSortOrder, sortBy, sortOrder, sortableKey, dataKey } = column;
+              const onNameClick = () => {
+                if (sortBy === sortableKey || sortBy === dataKey) {
+                  onSortOrder(sortOrder === 'ASC' ? 'DESC' : 'ASC');
+                  return;
+                }
+                onSortBy(sortableKey || dataKey);
+              };
+              return (
+                <td
+                  className={[column.className || '', !!onSortBy ? 'tw-cursor-pointer' : 'tw-cursor-default'].join(' ')}
+                  style={column.style || {}}
+                  key={String(dataKey) + String(column.title)}>
+                  <button aria-label="Changer l'ordre de tri" type="button" onClick={!!onSortBy ? onNameClick : null}>
+                    {column.title}
                   </button>
-                )}
-              </td>
-            );
-          })}
-        </tr>
-      </thead>
-      <tbody ref={gridRef}>
-        {data
-          .filter((e) => e)
-          .map((item) => {
-            return (
-              <tr
-                onClick={() => (!rowDisabled(item) && onRowClick ? onRowClick(item) : null)}
-                onKeyUp={(event) => {
-                  if (event.key === 'Enter')
-                    if (!rowDisabled(item) && onRowClick) {
-                      onRowClick(item);
-                    }
-                }}
-                key={item[rowKey] || item._id}
-                data-key={item[rowKey] || item._id}
-                data-test-id={item[dataTestId] || item[rowKey] || item._id}
-                tabIndex={0}
-                className={[
-                  rowDisabled(item)
-                    ? 'tw-cursor-not-allowed'
-                    : isSortable
-                    ? 'tw-cursor-move'
-                    : Boolean(onRowClick)
-                    ? 'tw-cursor-pointer'
-                    : 'tw-cursor-auto',
-                ].join(' ')}
-                style={item.style || {}}>
-                {columns.map((column) => {
-                  return (
-                    <td className={([column.className || ''].join(' '), !!column.small ? 'small' : 'not-small')} key={item[rowKey] + column.dataKey}>
-                      {column.render ? column.render(item) : item[column.dataKey] || nullDisplay}
-                    </td>
-                  );
-                })}
-              </tr>
-            );
-          })}
-      </tbody>
+                  {column.help && <>{column.help}</>}
+                  {!!onSortBy && (sortBy === sortableKey || sortBy === dataKey) && (
+                    <button onClick={!!onSortBy ? onNameClick : null} type="button" aria-label="Changer l'ordre de tri">
+                      {sortOrder === 'ASC' && <span className="tw-mx-4" onClick={() => onSortOrder('DESC')}>{`\u00A0\u2193`}</span>}
+                      {sortOrder === 'DESC' && <span className="tw-mx-4" onClick={() => onSortOrder('ASC')}>{`\u00A0\u2191`}</span>}
+                    </button>
+                  )}
+                </td>
+              );
+            })}
+          </tr>
+        </thead>
+        <tbody ref={gridRef}>
+          {data
+            .filter((e) => e)
+            .map((item) => {
+              return (
+                <tr
+                  onClick={() => (!rowDisabled(item) && onRowClick ? onRowClick(item) : null)}
+                  onKeyUp={(event) => {
+                    if (event.key === 'Enter')
+                      if (!rowDisabled(item) && onRowClick) {
+                        onRowClick(item);
+                      }
+                  }}
+                  key={item[rowKey] || item._id}
+                  data-key={item[rowKey] || item._id}
+                  data-test-id={item[dataTestId] || item[rowKey] || item._id}
+                  tabIndex={0}
+                  className={[
+                    rowDisabled(item)
+                      ? 'tw-cursor-not-allowed'
+                      : isSortable
+                      ? 'tw-cursor-move'
+                      : Boolean(onRowClick)
+                      ? 'tw-cursor-pointer'
+                      : 'tw-cursor-auto',
+                  ].join(' ')}
+                  style={item.style || {}}>
+                  {columns.map((column) => {
+                    return (
+                      <td
+                        className={([column.className || ''].join(' '), !!column.small ? 'small' : 'not-small')}
+                        key={item[rowKey] + column.dataKey}>
+                        {column.render ? column.render(item) : item[column.dataKey] || nullDisplay}
+                      </td>
+                    );
+                  })}
+                </tr>
+              );
+            })}
+        </tbody>
+      </table>
+    );
+  }
+
+  return (
+    <table>
+      <tbody ref={gridRef}>{data.filter((e) => e).map(renderCellSmallDevices)}</tbody>
     </table>
   );
 };

diff --git a/dashboard/src/index.scss b/dashboard/src/index.scss
@@ -70,10 +70,6 @@ table.table-selego {
   background: #fff;
   -fs-table-paginate: paginate;
 
-  thead {
-    display: table-header-group;
-  }
-
   thead tr {
     height: 2.5rem;
   }