Allow users to transfer matches between facilities

CHANGELOG.md

@@ -9,6 +9,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ### Added
 
+- Allow users to transfer matches between facilities [#1464](https://github.com/open-apparel-registry/open-apparel-registry/pull/1464)
+
 ### Changed
 
 ### Deprecated

src/app/src/actions/adjustFacilityMatches.js

@@ -6,6 +6,7 @@ import {
     logErrorAndDispatchFailure,
     makeSplitFacilityAPIURL,
     makePromoteFacilityMatchAPIURL,
+    makeTransferFacilityAPIURL,
 } from '../util/util';
 
 export const startFetchFacilityToAdjust = createAction(
@@ -54,6 +55,37 @@ export function fetchFacilityToAdjust() {
     };
 }
 
+export const startFetchFacilityToTransfer = createAction(
+    'START_FETCH_FACILITY_TO_TRANSFER',
+);
+export const failFetchFacilityToTransfer = createAction(
+    'FAIL_FETCH_FACILITY_TO_TRANSFER',
+);
+export const completeFetchFacilityToTransfer = createAction(
+    'COMPLETE_FETCH_FACILITY_TO_TRANSFER',
+);
+export const clearFacilityToTransfer = createAction(
+    'CLEAR_FACILITY_TO_TRANSFER',
+);
+export function fetchFacilityToTransfer(oarID) {
+    return dispatch => {
+        dispatch(startFetchFacilityToTransfer());
+
+        return apiRequest
+            .get(makeSplitFacilityAPIURL(oarID))
+            .then(({ data }) => dispatch(completeFetchFacilityToTransfer(data)))
+            .catch(err =>
+                dispatch(
+                    logErrorAndDispatchFailure(
+                        err,
+                        'An error prevented fetching that facility',
+                        failFetchFacilityToTransfer,
+                    ),
+                ),
+            );
+    };
+}
+
 export const startSplitFacilityMatch = createAction(
     'START_SPLIT_FACILITY_MATCH',
 );
@@ -129,3 +161,40 @@ export function promoteFacilityMatch(matchID) {
             );
     };
 }
+
+export const startTransferFacilityMatch = createAction(
+    'START_TRANSFER_FACILITY_MATCH',
+);
+export const failTransferFacilityMatch = createAction(
+    'FAIL_TRANSFER_FACILITY_MATCH',
+);
+export const completeTransferFacilityMatch = createAction(
+    'COMPLETE_TRANSFER_FACILITY_MATCH',
+);
+
+export function transferFacilityMatch({ matchID, oarID }) {
+    return dispatch => {
+        if (!oarID || !matchID) {
+            return null;
+        }
+
+        dispatch(startTransferFacilityMatch());
+
+        return apiRequest
+            .post(makeTransferFacilityAPIURL(oarID), { match_id: matchID })
+            .then(({ data }) => {
+                dispatch(completeTransferFacilityMatch(data));
+                // Refresh facility to show match is no longer present
+                dispatch(fetchFacilityToAdjust());
+            })
+            .catch(err =>
+                dispatch(
+                    logErrorAndDispatchFailure(
+                        err,
+                        'An error prevented moving that facility match',
+                        failTransferFacilityMatch,
+                    ),
+                ),
+            );
+    };
+}

src/app/src/components/DashboardAdjustMatchCard.jsx

@@ -15,6 +15,8 @@ import find from 'lodash/find';
 import { Link } from 'react-router-dom';
 import { toast } from 'react-toastify';
 
+import MoveMatchDialog from './MoveMatchDialog';
+
 import { makeFacilityDetailLink } from '../util/util';
 
 import { facilityDetailsPropType } from '../util/propTypes';
@@ -107,6 +109,7 @@ export default function DashboardAdjustMatchCard({
     const [matchToSplit, setMatchToSplit] = useState(null);
     const [matchToPromote, setMatchToPromote] = useState(null);
     const [loading, setLoading] = useState(false);
+    const [matchToMove, setMatchToMove] = useState(null);
 
     const closeDialog = () => {
         setMatchToSplit(null);
@@ -183,17 +186,36 @@ export default function DashboardAdjustMatchCard({
         }
 
         return (
-            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+            <div
+                style={{
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                }}
+            >
+                {(match.facility_created_by_item || match.is_geocoded) && (
+                    <Button
+                        variant="contained"
+                        color="primary"
+                        disabled={adjusting}
+                        onClick={() =>
+                            openDialogForMatchToAdjust(
+                                match,
+                                dialogTypesEnum.split,
+                            )
+                        }
+                        style={adjustMatchCardStyles.buttonStyles}
+                    >
+                        {match.facility_created_by_item ? 'Revert' : 'Split'}
+                    </Button>
+                )}
                 <Button
                     variant="contained"
                     color="primary"
                     disabled={adjusting}
-                    onClick={() =>
-                        openDialogForMatchToAdjust(match, dialogTypesEnum.split)
-                    }
+                    onClick={() => setMatchToMove(match)}
                     style={adjustMatchCardStyles.buttonStyles}
                 >
-                    {match.facility_created_by_item ? 'Revert' : 'Split'}
+                    Transfer to Alternate Facility
                 </Button>
                 <Button
                     variant="contained"
@@ -320,8 +342,8 @@ export default function DashboardAdjustMatchCard({
                                 <Typography variant="title">
                                     Match {match.match_id}
                                 </Typography>
-                                {createButtonControls(match)}
                             </div>
+                            <div>{createButtonControls(match)}</div>
                             <div style={adjustMatchCardStyles.nameRowStyles}>
                                 <MatchDetailItem
                                     label="Contributor Name"
@@ -354,6 +376,10 @@ export default function DashboardAdjustMatchCard({
             <Dialog open={Boolean(matchToSplit) || Boolean(matchToPromote)}>
                 {dialogContent}
             </Dialog>
+            <MoveMatchDialog
+                matchToMove={matchToMove}
+                handleClose={() => setMatchToMove(null)}
+            />
         </>
     );
 }

src/app/src/components/DashboardFacilityCard.jsx

@@ -2,16 +2,13 @@ import React from 'react';
 import { arrayOf, bool, func, string } from 'prop-types';
 import Card from '@material-ui/core/Card';
 import CardActions from '@material-ui/core/CardActions';
-import CardContent from '@material-ui/core/CardContent';
-import CircularProgress from '@material-ui/core/CircularProgress';
 import TextField from '@material-ui/core/TextField';
 import Typography from '@material-ui/core/Typography';
 import Button from '@material-ui/core/Button';
-import get from 'lodash/get';
 
 import { facilityDetailsPropType } from '../util/propTypes';
 
-import FacilityDetailsStaticMap from './FacilityDetailsStaticMap';
+import DashboardFacilityCardDetails from './DashboardFacilityCardDetails';
 
 const dashboardFacilityCardStyles = Object.freeze({
     cardStyles: Object.freeze({
@@ -107,87 +104,6 @@ export default function DashboardFacilityCard({
         </>
     );
 
-    const cardContent = (() => {
-        if (fetching) {
-            return <CircularProgress />;
-        }
-
-        if (error && error.length) {
-            return (
-                <ul style={dashboardFacilityCardStyles.errorStyles}>
-                    {error.map(err => (
-                        <li key={err}>
-                            <span
-                                style={dashboardFacilityCardStyles.errorStyles}
-                            >
-                                {err}
-                            </span>
-                        </li>
-                    ))}
-                </ul>
-            );
-        }
-
-        if (!data) {
-            return null;
-        }
-
-        const contributorContent = get(data, 'properties.contributors', [])
-            .length && (
-            <ul style={dashboardFacilityCardStyles.listStyles}>
-                {data.properties.contributors.map(({ name }) => (
-                    <li key={name}>
-                        <Typography
-                            style={dashboardFacilityCardStyles.fieldStyles}
-                        >
-                            {name}
-                        </Typography>
-                    </li>
-                ))}
-            </ul>
-        );
-
-        return (
-            <>
-                <div style={dashboardFacilityCardStyles.mapStyles}>
-                    <FacilityDetailsStaticMap data={data} />
-                </div>
-                <div style={dashboardFacilityCardStyles.infoContainerStyles}>
-                    <Typography style={dashboardFacilityCardStyles.labelStyles}>
-                        Name
-                    </Typography>
-                    <Typography style={dashboardFacilityCardStyles.fieldStyles}>
-                        {get(data, 'properties.name', null)}
-                    </Typography>
-                    <Typography style={dashboardFacilityCardStyles.labelStyles}>
-                        Address
-                    </Typography>
-                    <Typography style={dashboardFacilityCardStyles.fieldStyles}>
-                        {get(data, 'properties.address', null)}
-                    </Typography>
-                    <Typography style={dashboardFacilityCardStyles.labelStyles}>
-                        Country
-                    </Typography>
-                    <Typography style={dashboardFacilityCardStyles.fieldStyles}>
-                        {get(data, 'properties.country_name', null)}
-                    </Typography>
-                    <Typography style={dashboardFacilityCardStyles.labelStyles}>
-                        Location
-                    </Typography>
-                    <Typography style={dashboardFacilityCardStyles.fieldStyles}>
-                        {get(data, 'geometry.coordinates', []).join(', ')}
-                    </Typography>
-                    <Typography style={dashboardFacilityCardStyles.labelStyles}>
-                        Contributors
-                    </Typography>
-                    <div style={dashboardFacilityCardStyles.fieldStyles}>
-                        {contributorContent}
-                    </div>
-                </div>
-            </>
-        );
-    })();
-
     return (
         <Card style={dashboardFacilityCardStyles.cardStyles}>
             <Typography
@@ -199,9 +115,11 @@ export default function DashboardFacilityCard({
             <CardActions style={dashboardFacilityCardStyles.cardActionsStyles}>
                 {cardActions}
             </CardActions>
-            <CardContent style={dashboardFacilityCardStyles.cardContentStyles}>
-                {cardContent}
-            </CardContent>
+            <DashboardFacilityCardDetails
+                data={data}
+                fetching={fetching}
+                error={error}
+            />
         </Card>
     );
 }