DiamondLightSource · kaimsfd · Oct 16, 2023 · Oct 18, 2023 · Oct 25, 2023 · Nov 2, 2023
diff --git 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
@@ -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<string, any>
+}
+
+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 (
+          <div>
+              <form
+                  onSubmit={e => {
+                  e.preventDefault();
+                  updateLibraryPinStatus({ variables: { barcode: item['barcode'], status: status } });
+
+                  ;
+                  }}
+              >
+                      <Select value={status} onChange={handleStatusChange}>
+                        {Object.values(PinStatus).map((status) => (
+                          <option value={status}>{status}</option>))}
+                      </Select>
+                  <button type="submit">Update Status</button>
+              </form>
+              {mutationError && <p>Error :( Please try again</p>}
+          </div>
+      )
+  }
+
 // 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"}
       />
       <HStack justify='center' width='100%'>
-        <Button 
+        <Button marginTop={'1em'}
           colorScheme='teal' 
           variant='outline' 
           onClick={loadMore} 
@@ -121,3 +215,6 @@ export default function App(): React.JSX.Element {
     </ChakraProvider>
   );
 }
+
+export {GET_INFO}
+export { UpdatePinStatus }
diff --git a/frontend/src/components/PaginationTable.tsx b/frontend/src/components/PaginationTable.tsx
@@ -1,5 +1,7 @@
-import { Box, BoxProps, Heading, Skeleton, Table, Tbody, Td, Th, Thead, Tr } from "@chakra-ui/react";
-import React, { useCallback } from "react";
+import { EditIcon } from "@chakra-ui/icons";
+import { Box, BoxProps, HStack, Heading, Skeleton, Table, Tbody, Td, Th, Thead, Tr, Text, IconButton } from "@chakra-ui/react";
+import React, { useCallback, useState } from "react";
+import { UpdatePinStatus } from "../App";
 
 export interface TableProps extends Omit<BoxProps, "onClick"> {
   /** Table data */
@@ -38,6 +40,8 @@ export const PaginationTable = ({
     [data, onClick],
   );
 
+  const [show, setShow] = useState(true);
+
   return (
     <Box overflowY='scroll' {...props}>
       {data === null || data.length === 0 ? (
@@ -58,7 +62,26 @@ export const PaginationTable = ({
               <Tr h='2vh' key={i} onClick={handleClick}>
                 {headers.map((header) => (
                   <Td data-id={i} key={header.key}>
+                    <HStack spacing={2}>
+                      <Text>
                     {item[header.key]}
+                    </Text>
+                    <Text>
+                      {header.key === 'status' ? 
+                          <IconButton 
+                            aria-label='editButton' 
+                            icon={<EditIcon color={'white'}/>} 
+                            colorScheme='black' 
+                            variant={'unstyled'}
+                            onClick={() => setShow(!show)}
+                          />  
+                        : null}
+
+                    </Text>
+                    </HStack>
+                    <Text>
+                    {header.key === 'status' && show ? <UpdatePinStatus item={item}/> : null}
+                    </Text>
                   </Td>
                 ))}
               </Tr>

diff --git a/frontend/yarn.lock b/frontend/yarn.lock
@@ -85,15 +85,23 @@
     "@babel/highlight" "^7.23.4"
     chalk "^2.4.2"
 
+"@babel/code-frame@^7.23.5":
+  version "7.23.5"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.23.5.tgz#9009b69a8c602293476ad598ff53e4562e15c244"
+  integrity sha512-CgH3s1a96LipHCmSUmYFPwY7MNx8C3avkq7i4Wl3cfa662ldtUe4VM1TPXX70pfmrlWTb6jLqTYrZyT2ZTJBgA==
+  dependencies:
+    "@babel/highlight" "^7.23.4"
+    chalk "^2.4.2"
+
 "@babel/compat-data@^7.20.5", "@babel/compat-data@^7.22.6", "@babel/compat-data@^7.22.9", "@babel/compat-data@^7.23.3":
   version "7.23.3"
   resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.23.3.tgz#3febd552541e62b5e883a25eb3effd7c7379db11"
   integrity sha512-BmR4bWbDIoFJmJ9z2cZ8Gmm2MXgEDgjdWgpKmKWUt54UGFJdlj31ECtbaDvCG/qVdG3AQ1SfpZEs01lUFbzLOQ==
 
-"@babel/core@^7.11.1", "@babel/core@^7.11.6", "@babel/core@^7.12.3", "@babel/core@^7.14.0", "@babel/core@^7.16.0", "@babel/core@^7.21.3", "@babel/core@^7.22.9", "@babel/core@^7.23.5":
-  version "7.23.5"
-  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.23.5.tgz#6e23f2acbcb77ad283c5ed141f824fd9f70101c7"
-  integrity sha512-Cwc2XjUrG4ilcfOw4wBAK+enbdgwAcAJCfGUItPBKR7Mjw4aEfAFYrLxeRp4jWgtNIKn3n2AlBOfwwafl+42/g==
+"@babel/core@^7.11.1", "@babel/core@^7.11.6", "@babel/core@^7.12.3", "@babel/core@^7.16.0", "@babel/core@^7.21.3", "@babel/core@^7.23.3":
+  version "7.23.3"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.23.3.tgz#5ec09c8803b91f51cc887dedc2654a35852849c9"
+  integrity sha512-Jg+msLuNuCJDyBvFv5+OKOUjWMZgd85bKjbICd3zWrKAo+bJ49HJufi7CQE0q0uR8NGyO6xkCACScNqyjHSZew==
   dependencies:
     "@ampproject/remapping" "^2.2.0"
     "@babel/code-frame" "^7.23.5"
@@ -111,6 +119,27 @@
     json5 "^2.2.3"
     semver "^6.3.1"
 
+"@babel/core@^7.14.0", "@babel/core@^7.22.9":
+  version "7.23.2"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.23.2.tgz#ed10df0d580fff67c5f3ee70fd22e2e4c90a9f94"
+  integrity sha512-n7s51eWdaWZ3vGT2tD4T7J6eJs3QoBXydv7vkUM06Bf1cbVD2Kc2UrkzhiQwobfV7NwOnQXYL7UBJ5VPU+RGoQ==
+  dependencies:
+    "@ampproject/remapping" "^2.2.0"
+    "@babel/code-frame" "^7.22.13"
+    "@babel/generator" "^7.23.0"
+    "@babel/helper-compilation-targets" "^7.22.15"
+    "@babel/helper-module-transforms" "^7.23.0"
+    "@babel/helpers" "^7.23.2"
+    "@babel/parser" "^7.23.0"
+    "@babel/template" "^7.22.15"
+    "@babel/traverse" "^7.23.2"
+    "@babel/types" "^7.23.0"
+    convert-source-map "^2.0.0"
+    debug "^4.1.0"
+    gensync "^1.0.0-beta.2"
+    json5 "^2.2.3"
+    semver "^6.3.1"
+
 "@babel/eslint-parser@^7.16.3":
   version "7.23.3"
   resolved "https://registry.yarnpkg.com/@babel/eslint-parser/-/eslint-parser-7.23.3.tgz#7bf0db1c53b54da0c8a12627373554a0828479ca"
@@ -130,6 +159,16 @@
     "@jridgewell/trace-mapping" "^0.3.17"
     jsesc "^2.5.1"
 
+"@babel/generator@^7.23.0", "@babel/generator@^7.23.5":
+  version "7.23.5"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.23.5.tgz#17d0a1ea6b62f351d281350a5f80b87a810c4755"
+  integrity sha512-BPssCHrBD+0YrxviOa3QzpqwhNIXKEtOa2jQrm4FlmkC2apYgRnQcmPWiGZDlGxiNtltnUFolMe8497Esry+jA==
+  dependencies:
+    "@babel/types" "^7.23.5"
+    "@jridgewell/gen-mapping" "^0.3.2"
+    "@jridgewell/trace-mapping" "^0.3.17"
+    jsesc "^2.5.1"
+
 "@babel/helper-annotate-as-pure@^7.22.5":
   version "7.22.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.22.5.tgz#e7f06737b197d580a01edf75d97e2c8be99d3882"
@@ -224,7 +263,7 @@
   dependencies:
     "@babel/types" "^7.22.15"
 
-"@babel/helper-module-transforms@^7.23.3":
+"@babel/helper-module-transforms@^7.23.0", "@babel/helper-module-transforms@^7.23.3":
   version "7.23.3"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.23.3.tgz#d7d12c3c5d30af5b3c0fcab2a6d5217773e2d0f1"
   integrity sha512-7bBs4ED9OmswdfDzpz4MpWgSrV7FXlc3zIagvLFjS5H+Mk7Snr21vQ6QwrsoCGMfNC4e4LQPdoULEt4ykz0SRQ==
@@ -333,6 +372,11 @@
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.23.5.tgz#37dee97c4752af148e1d38c34b856b2507660563"
   integrity sha512-hOOqoiNXrmGdFbhgCzu6GiURxUgM27Xwd/aPuu8RfHEZPBzL1Z54okAHAQjXfcQNwvrlkAmAp4SlRTZ45vlthQ==
 
+"@babel/parser@^7.23.0", "@babel/parser@^7.23.5":
+  version "7.23.5"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.23.5.tgz#37dee97c4752af148e1d38c34b856b2507660563"
+  integrity sha512-hOOqoiNXrmGdFbhgCzu6GiURxUgM27Xwd/aPuu8RfHEZPBzL1Z54okAHAQjXfcQNwvrlkAmAp4SlRTZ45vlthQ==
+
 "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.23.3":
   version "7.23.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.23.3.tgz#5cd1c87ba9380d0afb78469292c954fee5d2411a"
@@ -1200,7 +1244,32 @@
     debug "^4.1.0"
     globals "^11.1.0"
 
-"@babel/types@^7.0.0", "@babel/types@^7.16.8", "@babel/types@^7.18.13", "@babel/types@^7.20.7", "@babel/types@^7.21.3", "@babel/types@^7.22.15", "@babel/types@^7.22.19", "@babel/types@^7.22.5", "@babel/types@^7.23.0", "@babel/types@^7.23.4", "@babel/types@^7.23.5", "@babel/types@^7.3.3", "@babel/types@^7.4.4":
+"@babel/traverse@^7.23.2":
+  version "7.23.5"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.23.5.tgz#f546bf9aba9ef2b042c0e00d245990c15508e7ec"
+  integrity sha512-czx7Xy5a6sapWWRx61m1Ke1Ra4vczu1mCTtJam5zRTBOonfdJ+S/B6HYmGYu3fJtr8GGET3si6IhgWVBhJ/m8w==
+  dependencies:
+    "@babel/code-frame" "^7.23.5"
+    "@babel/generator" "^7.23.5"
+    "@babel/helper-environment-visitor" "^7.22.20"
+    "@babel/helper-function-name" "^7.23.0"
+    "@babel/helper-hoist-variables" "^7.22.5"
+    "@babel/helper-split-export-declaration" "^7.22.6"
+    "@babel/parser" "^7.23.5"
+    "@babel/types" "^7.23.5"
+    debug "^4.1.0"
+    globals "^11.1.0"
+
+"@babel/types@^7.0.0", "@babel/types@^7.16.8", "@babel/types@^7.18.13", "@babel/types@^7.20.7", "@babel/types@^7.21.3", "@babel/types@^7.22.15", "@babel/types@^7.22.19", "@babel/types@^7.22.5", "@babel/types@^7.23.0", "@babel/types@^7.23.3", "@babel/types@^7.23.4", "@babel/types@^7.3.3", "@babel/types@^7.4.4":
+  version "7.23.4"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.23.4.tgz#7206a1810fc512a7f7f7d4dace4cb4c1c9dbfb8e"
+  integrity sha512-7uIFwVYpoplT5jp/kVv6EF93VaJ8H+Yn5IczYiaAi98ajzjfoZfslet/e0sLh+wVBjb2qqIut1b0S26VSafsSQ==
+  dependencies:
+    "@babel/helper-string-parser" "^7.23.4"
+    "@babel/helper-validator-identifier" "^7.22.20"
+    to-fast-properties "^2.0.0"
+
+"@babel/types@^7.23.5":
   version "7.23.5"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.23.5.tgz#48d730a00c95109fa4393352705954d74fb5b602"
   integrity sha512-ON5kSOJwVO6xXVRTvOI0eOnWe7VdUcIpsovGo9U/Br4Ie4UVFQTboO2cYnDhAGU6Fp+UxSiT+pMft0SMHfuq6w==
@@ -1412,6 +1481,13 @@
   dependencies:
     "@chakra-ui/shared-utils" "2.0.5"
 
+"@chakra-ui/icons@^2.1.1":
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/icons/-/icons-2.1.1.tgz#58ff0f9e703f2f4f89debd600ce4e438f43f9c9a"
+  integrity sha512-3p30hdo4LlRZTT5CwoAJq3G9fHI0wDc0pBaMHj4SUn0yomO+RcDRlzhdXqdr5cVnzax44sqXJVnf3oQG0eI+4g==
+  dependencies:
+    "@chakra-ui/icon" "3.2.0"
+
 "@chakra-ui/[email protected]":
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/@chakra-ui/image/-/image-2.1.0.tgz#6c205f1ca148e3bf58345b0b5d4eb3d959eb9f87"
@@ -3467,9 +3543,9 @@
   integrity sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==
 
 "@types/json-stable-stringify@^1.0.32":
-  version "1.0.36"
-  resolved "https://registry.yarnpkg.com/@types/json-stable-stringify/-/json-stable-stringify-1.0.36.tgz#fe6c6001a69ff8160a772da08779448a333c7ddd"
-  integrity sha512-b7bq23s4fgBB76n34m2b3RBf6M369B0Z9uRR8aHTMd8kZISRkmDEpPD8hhpYvDFzr3bJCPES96cm3Q6qRNDbQw==
+  version "1.0.35"
+  resolved "https://registry.yarnpkg.com/@types/json-stable-stringify/-/json-stable-stringify-1.0.35.tgz#9cea8628b50a093ae00a7e73de49676f2f9ade27"
+  integrity sha512-zlCWqsRBI0+ANN7dzGeDFJ4CHaVFTLqBNRS11GjR2mHCW6XxNtnMxhQzBKMzfsnjI8oI+kWq2vBwinyQpZVSsg==
 
 "@types/json5@^0.0.29":
   version "0.0.29"