Merge pull request #5284 from msupply-foundation/5137.2-Requisition-l…

…ine-edit-+-UI-updates-to-line-columns

5137.2 requisition line edit + UI updates to line columns

client/packages/system/src/ReasonOption/Components/ReasonOptionsSearchInput.tsx

@@ -0,0 +1,91 @@
+import React, { FC } from 'react';
+import {
+  Autocomplete,
+  BasicTextInput,
+  Box,
+  defaultOptionMapper,
+  getDefaultOptionRenderer,
+  ReasonOptionNode,
+  ReasonOptionNodeType,
+} from '@openmsupply-client/common';
+import { reasonOptions } from '../api';
+
+interface ReasonOptionsSearchInputProps {
+  value?: ReasonOptionNode | null;
+  width?: number | string;
+  onChange: (reasonOption: ReasonOptionNode | null) => void;
+  autoFocus?: boolean;
+  type: ReasonOptionNodeType;
+  isError?: boolean;
+  isDisabled?: boolean;
+}
+
+export const ReasonOptionsSearchInput: FC<ReasonOptionsSearchInputProps> = ({
+  value,
+  width,
+  onChange,
+  autoFocus = false,
+  type,
+  isError,
+  isDisabled,
+}) => {
+  const { data, isLoading } = reasonOptions.document.listAllActive();
+
+  const reasonFilter = (reason: ReasonOptionNode) => {
+    switch (type) {
+      case ReasonOptionNodeType.PositiveInventoryAdjustment:
+        return reason.type === ReasonOptionNodeType.PositiveInventoryAdjustment;
+      case ReasonOptionNodeType.NegativeInventoryAdjustment:
+        return reason.type === ReasonOptionNodeType.NegativeInventoryAdjustment;
+      case ReasonOptionNodeType.RequisitionLineVariance:
+        return reason.type === ReasonOptionNodeType.RequisitionLineVariance;
+      case ReasonOptionNodeType.ReturnReason:
+        return reason.type === ReasonOptionNodeType.ReturnReason;
+      default:
+        return false;
+    }
+  };
+  const reasons = (data?.nodes ?? []).filter(reasonFilter);
+
+  const isRequired = reasons.length !== 0;
+
+  return (
+    <Box display="flex" flexDirection="row" width={120}>
+      <Autocomplete
+        autoFocus={autoFocus}
+        disabled={isDisabled || !isRequired}
+        width={`${width}px`}
+        clearable={false}
+        value={
+          value
+            ? {
+                ...value,
+                label: value.reason,
+              }
+            : null
+        }
+        loading={isLoading}
+        onChange={(_, reason) => {
+          onChange(reason);
+        }}
+        renderInput={props => (
+          <BasicTextInput
+            {...props}
+            autoFocus={autoFocus}
+            InputProps={{
+              disableUnderline: false,
+              style: props.disabled ? { paddingLeft: 0 } : {},
+              ...props.InputProps,
+            }}
+            sx={{ minWidth: width }}
+            error={isError}
+            required={isRequired && !isDisabled}
+          />
+        )}
+        options={defaultOptionMapper(reasons, 'reason')}
+        renderOption={getDefaultOptionRenderer('reason')}
+        isOptionEqualToValue={(option, value) => option?.id === value?.id}
+      />
+    </Box>
+  );
+};

client/packages/system/src/ReasonOption/Components/index.ts

@@ -0,0 +1 @@
+export * from './ReasonOptionsSearchInput';

client/packages/system/src/ReasonOption/api/api.ts

@@ -0,0 +1,31 @@
+import {
+  SortBy,
+  ReasonOptionSortInput,
+  ReasonOptionSortFieldInput,
+} from '@openmsupply-client/common';
+import { Sdk, ReasonOptionRowFragment } from './operations.generated';
+
+export type ListParams = { sortBy?: SortBy<ReasonOptionRowFragment> };
+
+const reasonOptionParsers = {
+  toSortInput: (
+    sortBy: SortBy<ReasonOptionRowFragment>
+  ): ReasonOptionSortInput => {
+    return {
+      desc: sortBy.isDesc,
+      key: sortBy.key as ReasonOptionSortFieldInput,
+    };
+  },
+};
+
+export const getReasonOptionsQuery = (sdk: Sdk) => ({
+  get: {
+    listAllActive: async ({ sortBy }: ListParams) => {
+      const response = await sdk.reasonOptions({
+        sort: sortBy ? reasonOptionParsers.toSortInput(sortBy) : undefined,
+        filter: { isActive: true },
+      });
+      return response?.reasonOptions;
+    },
+  },
+});

client/packages/system/src/ReasonOption/api/hooks/document/index.ts

@@ -0,0 +1,5 @@
+import { useReasonOptions } from './useReasonOptions';
+
+export const Document = {
+  useReasonOptions,
+};

client/packages/system/src/ReasonOption/api/hooks/document/useReasonOptions.ts

@@ -0,0 +1,12 @@
+import { SortBy, useQuery } from '@openmsupply-client/common';
+import { ReasonOptionRowFragment } from '../../operations.generated';
+import { useReasonOptionsApi } from '../utils/useReasonOptionsApi';
+
+export const useReasonOptions = (sortBy?: SortBy<ReasonOptionRowFragment>) => {
+  const api = useReasonOptionsApi();
+  const result = useQuery(api.keys.sortedList(sortBy), () =>
+    api.get.listAllActive({ sortBy })
+  );
+
+  return { ...result };
+};

client/packages/system/src/ReasonOption/api/hooks/index.ts

@@ -0,0 +1,11 @@
+import { Document } from './document';
+import { Utils } from './utils';
+
+export const reasonOptions = {
+  document: {
+    listAllActive: Document.useReasonOptions,
+  },
+  utils: {
+    api: Utils.useReasonOptionsApi,
+  },
+};

client/packages/system/src/ReasonOption/api/hooks/utils/index.ts

@@ -0,0 +1,5 @@
+import { useReasonOptionsApi } from './useReasonOptionsApi';
+
+export const Utils = {
+  useReasonOptionsApi,
+};

client/packages/system/src/ReasonOption/api/hooks/utils/useReasonOptionsApi.ts

@@ -0,0 +1,20 @@
+import { useGql, SortBy } from '@openmsupply-client/common';
+import { getSdk, ReasonOptionRowFragment } from '../../operations.generated';
+import { getReasonOptionsQuery } from '../../api';
+
+export const useReasonOptionsApi = () => {
+  const keys = {
+    base: () => ['reasonOptions'] as const,
+    list: () => [...keys.base(), 'list'] as const,
+    sortedList: (sortBy?: SortBy<ReasonOptionRowFragment>) =>
+      [...keys.list(), sortBy] as const,
+    sortedListActive: (
+      isActive: boolean,
+      sortBy?: SortBy<ReasonOptionRowFragment>
+    ) => [...keys.sortedList(sortBy), isActive] as const,
+  };
+  const { client } = useGql();
+  const sdk = getSdk(client);
+  const queries = getReasonOptionsQuery(sdk);
+  return { ...queries, keys };
+};

client/packages/system/src/ReasonOption/api/index.ts

@@ -0,0 +1,2 @@
+export * from './hooks';
+export { ReasonOptionRowFragment } from './operations.generated';

client/packages/system/src/ReasonOption/api/operations.generated.ts

@@ -0,0 +1,56 @@
+import * as Types from '@openmsupply-client/common';
+
+import { GraphQLClient, RequestOptions } from 'graphql-request';
+import gql from 'graphql-tag';
+type GraphQLClientRequestHeaders = RequestOptions['requestHeaders'];
+export type ReasonOptionRowFragment = { __typename: 'ReasonOptionNode', id: string, type: Types.ReasonOptionNodeType, reason: string, isActive: boolean };
+
+export type ReasonOptionsQueryVariables = Types.Exact<{
+  sort?: Types.InputMaybe<Array<Types.ReasonOptionSortInput> | Types.ReasonOptionSortInput>;
+  filter?: Types.InputMaybe<Types.ReasonOptionFilterInput>;
+}>;
+
+
+export type ReasonOptionsQuery = { __typename: 'Queries', reasonOptions: { __typename: 'ReasonOptionConnector', totalCount: number, nodes: Array<{ __typename: 'ReasonOptionNode', id: string, type: Types.ReasonOptionNodeType, reason: string, isActive: boolean }> } };
+
+export const ReasonOptionRowFragmentDoc = gql`
+    fragment ReasonOptionRow on ReasonOptionNode {
+  __typename
+  id
+  type
+  reason
+  isActive
+}
+    `;
+export const ReasonOptionsDocument = gql`
+    query reasonOptions($sort: [ReasonOptionSortInput!], $filter: ReasonOptionFilterInput) {
+  reasonOptions(sort: $sort, filter: $filter) {
+    __typename
+    ... on ReasonOptionConnector {
+      __typename
+      totalCount
+      nodes {
+        __typename
+        id
+        type
+        reason
+        isActive
+      }
+    }
+  }
+}
+    `;
+
+export type SdkFunctionWrapper = <T>(action: (requestHeaders?:Record<string, string>) => Promise<T>, operationName: string, operationType?: string, variables?: any) => Promise<T>;
+
+
+const defaultWrapper: SdkFunctionWrapper = (action, _operationName, _operationType, _variables) => action();
+
+export function getSdk(client: GraphQLClient, withWrapper: SdkFunctionWrapper = defaultWrapper) {
+  return {
+    reasonOptions(variables?: ReasonOptionsQueryVariables, requestHeaders?: GraphQLClientRequestHeaders): Promise<ReasonOptionsQuery> {
+      return withWrapper((wrappedRequestHeaders) => client.request<ReasonOptionsQuery>(ReasonOptionsDocument, variables, {...requestHeaders, ...wrappedRequestHeaders}), 'reasonOptions', 'query', variables);
+    }
+  };
+}
+export type Sdk = ReturnType<typeof getSdk>;

client/packages/system/src/ReasonOption/api/operations.graphql

@@ -0,0 +1,27 @@
+fragment ReasonOptionRow on ReasonOptionNode {
+  __typename
+  id
+  type
+  reason
+  isActive
+}
+
+query reasonOptions(
+  $sort: [ReasonOptionSortInput!]
+  $filter: ReasonOptionFilterInput
+) {
+  reasonOptions(sort: $sort, filter: $filter) {
+    __typename
+    ... on ReasonOptionConnector {
+      __typename
+      totalCount
+      nodes {
+        __typename
+        id
+        type
+        reason
+        isActive
+      }
+    }
+  }
+}

client/packages/system/src/ReasonOption/index.ts

@@ -0,0 +1,2 @@
+export * from './api'
+export * from './Components'