Finishfeature/OP-835

OP-835: Select all for pricelist added

src/components/PricelistDetailsPanel.js

@@ -1,8 +1,10 @@
 import React, { useState, useEffect } from "react";
 import { withTheme, withStyles } from "@material-ui/core/styles";
-import { Table, withModulesManager, combine, useTranslations, ErrorBoundary } from "@openimis/fe-core";
-import { Paper, Grid, Typography, Checkbox, Button } from "@material-ui/core";
+import { Table, withModulesManager, combine, useTranslations, ErrorBoundary, formatMessage } from "@openimis/fe-core";
+import { IconButton } from "@material-ui/core";
+import { Paper, Grid, Typography, Checkbox, Button, useStyles, Box } from "@material-ui/core";
 import PriceOverruleDialog from "./PriceOverruleDialog";
+import SelectAllButton from "./PricelistSelectAllButton" 
 
 const styles = (theme) => ({
   paper: theme.paper.paper,
@@ -45,6 +47,13 @@ const PricelistDetailsPanel = (props) => {
   const { formatMessage } = useTranslations("medical_pricelist", modulesManager);
   const [pagination, setPagination] = useState({ page: 0, afterCursor: null, beforeCursor: null });
   const [editedDetail, setEditedDetail] = useState(null);
+
+  const ButtonHeader = (_) => {
+    return SelectAllButton(details, props, edited, onEditedChanged, edited)
+  }
+
+  HEADERS[0] = ButtonHeader
+
   useEffect(() => {
     const filters = [];
     if (pagination.afterCursor) {

src/components/PricelistSelectAllButton.js

@@ -0,0 +1,54 @@
+import React, { useState, useEffect } from "react";
+import { withTheme, withStyles } from "@material-ui/core/styles";
+import { Table, withModulesManager, combine, useTranslations, ErrorBoundary, formatMessage } from "@openimis/fe-core";
+import { IconButton } from "@material-ui/core";
+import { Paper, Grid, Typography, Checkbox, Button, useStyles, Box } from "@material-ui/core";
+import PriceOverruleDialog from "./PriceOverruleDialog";
+
+export function SelectAllButton (details, props, edited, onEditedChanged) {
+    const {
+      modulesManager,
+    } = props;
+    const { formatMessage } = useTranslations("medical_pricelist", modulesManager);
+
+    const page_details_uuids = details.items ? details.items.map(d => d.uuid) : []
+    const current_added_details = edited.addedDetails? edited.addedDetails : []
+    const areNotAllSelected = !current_added_details.includes(...page_details_uuids)
+    const current_removed_details = edited.removedDetails? edited.removedDetails : []
+
+
+    if (areNotAllSelected) {
+        page_details_uuids.push(...current_removed_details)    
+    } else {
+        page_details_uuids.push(...current_added_details)    
+    }
+
+    const new_details_uuids = [...new Set(page_details_uuids)]
+    //details.items.length > (!!edited.addedDetails? edited.addedDetails.length : 0)
+
+    const selectAllEdited = () => {
+      try {
+        const addedDetails = areNotAllSelected ? new_details_uuids : current_removed_details;
+        const removedDetails = areNotAllSelected ? current_removed_details : new_details_uuids;
+        onEditedChanged({
+          ...edited,
+          addedDetails,
+          removedDetails
+        })
+      } catch (error) {
+        console.error(error);
+      }
+    }
+
+    return (
+          <Box flexGrow={1}>
+          <Box display="flex" justifyContent="flex-end">
+          <Button onClick={() => selectAllEdited()} color="primary" disabled={props.readOnly} fullWidth>
+        {areNotAllSelected ? formatMessage("medical_pricelist.table.selectAll") : formatMessage("medical_pricelist.table.unselectAll")}
+      </Button>
+          </Box>
+        </Box>
+    );
+  }
+
+export default SelectAllButton;

src/translations/en.json

@@ -34,5 +34,7 @@
   "medical_pricelist.updatePricelist.mutationLabel": "Pricelist updated - {name}",
   "medical_pricelist.deletePricelist.mutationLabel": "Pricelist deleted - {name}",
   "medical_pricelist.deletePricelistDialog.title": "Delete pricelist",
-  "medical_pricelist.deletePricelistDialog.message": "Are you sure you want to delete the pricelist {name}?"
+  "medical_pricelist.deletePricelistDialog.message": "Are you sure you want to delete the pricelist {name}?",
+  "medical_pricelist.table.selectAll":   "Select All",
+  "medical_pricelist.table.unselectAll": "Unselect All"
 }