diff --git a/frontend/package.json b/frontend/package.json index 5f9d8162..5ac80468 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -80,7 +80,8 @@ ] }, "dependencies": { - "@apollo/client": "3.8.8", + "@apollo/client": "3.5.4", + "@chakra-ui/icons": "^2.1.1", "@chakra-ui/react": "^2.8.1", "@diamondlightsource/ui-components": "^1.0.2", "@emotion/react": "^11.11.1", diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 6aa416fd..23bc1588 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -1,9 +1,10 @@ -import { useQuery } from "@apollo/client"; +import { useMutation, useQuery } from "@apollo/client"; import { gql } from './__generated__/gql'; import React from "react"; import { theme } from "@diamondlightsource/ui-components" -import { ChakraProvider, Alert, AlertIcon, AlertTitle, AlertDescription, Button, HStack } from "@chakra-ui/react"; +import { ChakraProvider, Alert, AlertIcon, AlertTitle, AlertDescription, Button, HStack, Select } from "@chakra-ui/react"; import { PaginationTable } from "./components/PaginationTable"; +import { PinStatus } from "./__generated__/graphql"; const GET_INFO = gql(` query pinInfo ($after: String) { @@ -26,6 +27,98 @@ query pinInfo ($after: String) { } `); +const UPDATE_PIN_STATUS = gql(` + mutation updatePinStatus($barcode: String!, $status: PinStatus!) { + updateLibraryPinStatus(barcode: $barcode, status: $status) { + barcode + status + } + } + `); + +const PIN_FRAGMENT = gql(` +fragment pin on LibraryPin { + barcode, + status +} +`) + + +const LIBRARY_PINS_FRAGMENT = gql(` +fragment pinPage on LibraryPinConnection { + edges { + cursor + node { + ...pin + loopSize, + } + } +} + +`) + +export interface UpdatePinStatusProps { + item: Record +} + +const UpdatePinStatus = ({item }: UpdatePinStatusProps) => { + + const [status, setStatus] = React.useState(item['status']); + + const handleStatusChange = (event) => { + setStatus(event.target.value); + }; + const [ + updateLibraryPinStatus, + { error: mutationError } + ] = useMutation(UPDATE_PIN_STATUS, { + + update(cache, {data: {updateLibraryPinStatus}}) { + + cache.writeFragment({ + fragment: PIN_FRAGMENT, + data: updateLibraryPinStatus, + fragmentName: "pin", + }); + + const libraryPins = cache.readFragment({ + id: "barcode", + fragment: LIBRARY_PINS_FRAGMENT, + fragmentName: 'pinPage' + }); + if (libraryPins) { + const newEdges = [...libraryPins.edges, updateLibraryPinStatus] + cache.writeFragment({ + id: "barcode", + fragment: LIBRARY_PINS_FRAGMENT, + fragmentName: 'pinPage', + data: { ...libraryPins, edges: newEdges } + }); + } + } + }) + + return ( +
+
{ + e.preventDefault(); + updateLibraryPinStatus({ variables: { barcode: item['barcode'], status: status } }); + + ; + }} + > + + +
+ {mutationError &&

Error :( Please try again

} +
+ ) + } + // Displays libraryPins query in table component. The table can load more data if required function DisplayPinInfo(): React.JSX.Element { const { loading, error, data, fetchMore } = useQuery( @@ -97,9 +190,10 @@ function DisplayPinInfo(): React.JSX.Element { ]} data={data ? data.libraryPins.edges.map((edge) => edge.node): []} loadingRows={loadingRows} + rowVariant={"diamondStriped"} /> -