update column picker

client/packages/common/src/intl/locales/en/common.json

@@ -94,6 +94,7 @@
   "button.scan": "Scan",
   "button.select-a-color": "Select a colour",
   "button.send": "Send",
+  "button.show-all": "Show all",
   "button.stop": "Stop",
   "button.supply-to-approved": "Supply approved",
   "button.supply-to-requested": "Supply requested",
@@ -619,7 +620,6 @@
   "label.contact-trace-status": "Status",
   "label.contact-tracing": "Contact Tracing",
   "label.contact-tracing-type": "Type of contact",
-  "label.reason-for-contacting": "Reason for contacting us",
   "label.context": "Context",
   "label.cost": "Cost",
   "label.cost-per-unit": "Cost per unit",
@@ -930,6 +930,7 @@
   "label.quantity-to-return": "Quantity to Return",
   "label.ratio": "Ratio",
   "label.reason": "Reason",
+  "label.reason-for-contacting": "Reason for contacting us",
   "label.record-stock-transaction": "Record stock transaction for past vaccination",
   "label.recorded-contact-differs": "Recorded Contact: {{recordedName}}",
   "label.reference": "Reference",
@@ -1692,7 +1693,7 @@
   "sync-status.pull-v6": "Pull V6",
   "sync-status.push": "Push",
   "sync-status.push-v6": "Push V6",
-  "table.select-unselect-all-columns": "Select / unselect all columns",
+  "table.select-unselect-all-rows": "Select / unselect all rows",
   "table.show-columns": "Show / hide columns",
   "template.requisition-sent": "Approved by {{name}}{{job}}. Email: {{email}} and Phone Number: {{phone}}.",
   "text.months": "Months",
@@ -1720,4 +1721,4 @@
   "warning.caps-lock": "Warning: Caps lock is on",
   "warning.field-not-parsed": "{{field}} not parsed",
   "warning.nothing-to-supply": "Nothing left to supply!"
-}
+}

client/packages/common/src/intl/locales/fr/common.json

@@ -1672,7 +1672,7 @@
   "sync-status.pull-v6": "Télécharger V6",
   "sync-status.push": "Envoi",
   "sync-status.push-v6": "Envoyer V6",
-  "table.select-unselect-all-columns": "Sélectionner / désélectionner toutes les colonnes",
+  "table.select-unselect-all-rows": "Sélectionner / désélectionner toutes les lignes",
   "table.show-columns": "Montrer / cacher les colonnes",
   "template.requisition-sent": "Autorisé par {{name}}{{job}}. Courriel: {{email}} et Téléphone: {{phone}}.",
   "text.months": "Mois",
@@ -1700,4 +1700,4 @@
   "warning.caps-lock": "Avertissement: Verrouillage majuscule activé",
   "warning.field-not-parsed": "{{field}} non analysé",
   "warning.nothing-to-supply": "La quantité demandée à été fournie !"
-}
+}

client/packages/common/src/ui/layout/tables/DataTable.tsx

@@ -133,15 +133,14 @@ const DataTableComponent = <T extends RecordWithId>({
   const t = useTranslation();
   const { setRows, setDisabledRows, setFocus } = useTableStore();
   const [clickFocusedRow, setClickFocusedRow] = useState(false);
-  const { columnDisplayState, toggleColumn } = useColumnDisplayState(
-    id,
-    columns
-  );
+  const { columnDisplayState, showAllColumns, toggleColumn } =
+    useColumnDisplayState(id, columns);
 
-  const columnsToDisplay = React.useMemo(
-    () => columns.filter(c => columnDisplayState[String(c.key)] ?? true),
-    [columns, columnDisplayState]
-  );
+  const columnsToDisplay = React.useMemo(() => {
+    const cols = columns.filter(c => columnDisplayState[String(c.key)] ?? true);
+
+    return cols.every(c => c.key === 'selection') ? [] : cols;
+  }, [columns, columnDisplayState]);
 
   useRegisterActions([
     {
@@ -254,6 +253,7 @@ const DataTableComponent = <T extends RecordWithId>({
                   columns={columns}
                   columnDisplayState={columnDisplayState}
                   toggleColumn={toggleColumn}
+                  showAllColumns={showAllColumns}
                 />
               </TableCell>
             )}

client/packages/common/src/ui/layout/tables/columns/CheckboxSelectionColumn.tsx

@@ -38,7 +38,7 @@ export const getCheckboxSelectionColumn = <
   sortable: false,
   align: ColumnAlign.Left,
   width: 60,
-  label: 'table.select-unselect-all-columns',
+  label: 'table.select-unselect-all-rows',
   Header: () => {
     const { toggleAll, allSelected, someSelected } = useTableStore(state => {
       const allSelected =

client/packages/common/src/ui/layout/tables/components/Header/ColumnPicker.tsx

@@ -6,6 +6,7 @@ import {
   Stack,
   Typography,
   FormControlLabel,
+  Button,
 } from '@mui/material';
 import {
   Checkbox,
@@ -18,12 +19,14 @@ import { LocaleKey, useTranslation } from '@common/intl';
 interface ColumnPickerProps<T extends RecordWithId> {
   columns: Column<T>[];
   columnDisplayState: Record<string, boolean>;
+  showAllColumns: () => void;
   toggleColumn: (colKey: string) => void;
 }
 
 export const ColumnPicker = <T extends RecordWithId>({
   columns,
   columnDisplayState,
+  showAllColumns,
   toggleColumn,
 }: ColumnPickerProps<T>) => {
   const t = useTranslation();
@@ -76,7 +79,7 @@ export const ColumnPicker = <T extends RecordWithId>({
             {t('table.show-columns')}
           </Typography>
           {columns
-            .filter(c => !!c.label)
+            .filter(c => !!c.label && c.key !== 'selection')
             .map(column => (
               <FormControlLabel
                 key={String(column.key)}
@@ -87,6 +90,13 @@ export const ColumnPicker = <T extends RecordWithId>({
                 label={t(column.label as LocaleKey)}
               />
             ))}
+          <Button
+            sx={{ textTransform: 'none' }}
+            onClick={showAllColumns}
+            disabled={columns.every(c => !!columnDisplayState[String(c.key)])}
+          >
+            {t('button.show-all')}
+          </Button>
         </Stack>
       </Popover>
     </>

client/packages/common/src/ui/layout/tables/hooks/useColumnDisplayState.ts

@@ -43,5 +43,17 @@ export const useColumnDisplayState = <T extends RecordWithId>(
     });
   };
 
-  return { columnDisplayState, toggleColumn };
+  const showAllColumns = () => {
+    const newState = Object.fromEntries(
+      Object.keys(columnDisplayState).map(key => [key, true])
+    );
+
+    setColumnDisplayState(newState);
+    setHiddenColsStorage({
+      ...hiddenColsStorage,
+      [tableId]: Object.keys(newState).filter(key => !newState[key]),
+    });
+  };
+
+  return { columnDisplayState, showAllColumns, toggleColumn };
 };