Only include restricted items in the approval form (#103)

* Filter items by restricted status

* Filter types by restricted status

* Filter gear by restricted status

Author: fpagnoux

src/apiClient/gear.ts

@@ -59,6 +59,7 @@ export interface GearTypeWithFee extends GearTypeBase {
 export interface GearType extends GearTypeWithShorthand {
   defaultDeposit: number;
   shouldInventory: boolean;
+  restricted: boolean;
 }
 
 export interface GearLocation {

src/components/GearItemSelect.tsx

@@ -43,14 +43,22 @@ type Props = {
   onChange: (person: GearSummary | null | undefined) => void;
   className?: string;
   invalid?: boolean;
+  filters?: { restricted?: boolean };
 };
 
-export function GearItemSelect({ value, onChange, className, invalid }: Props) {
+export function GearItemSelect({
+  className,
+  filters,
+  invalid,
+  onChange,
+  value,
+}: Props) {
   const [query, setInput] = useState<string>("");
   const { pending, fn: debouncedSetInput } = useDebounce(setInput, 250);
   const { gearList, isFetching } = useGearList({
     q: query,
     retired: false,
+    ...filters,
   });
 
   const options: GearOption[] =

src/components/GearTypeSelect.tsx

@@ -1,8 +1,8 @@
 import { useCallback } from "react";
 import ReactSelect, { MultiValue } from "react-select";
 
-import { useGetGearTypesQuery } from "src/redux/api";
 import { GearType as APIGearType } from "src/apiClient/gear";
+import { useGetGearTypesQuery } from "src/redux/api";
 
 import { Select } from "./Select";
 
@@ -17,17 +17,22 @@ export function GearTypeSelect({
   value,
   onChange,
   invalid,
+  restrictedOnly,
 }: {
   value: number | null | undefined;
   onChange: (value: GearType | null) => void;
   invalid?: boolean;
+  restrictedOnly?: boolean;
 }) {
-  const gearTypeOptions = useGearTypesOptions();
-  const selectedOption = gearTypeOptions.find((o) => o.id === value);
+  const allGearTypeOptions = useGearTypesOptions();
+  const filteredOptions = !restrictedOnly
+    ? allGearTypeOptions
+    : allGearTypeOptions.filter((t) => t.restricted);
+  const selectedOption = filteredOptions.find((o) => o.id === value);
   return (
     <Select
       className="flex-grow-1"
-      options={gearTypeOptions}
+      options={filteredOptions}
       value={selectedOption}
       onChange={onChange}
       invalid={invalid}

src/pages/Approvals/ApprovalItemsPicker.tsx

@@ -73,6 +73,7 @@ export function ApprovalItemsPicker() {
                         value={value ?? null}
                         onChange={(val) => onChange(val?.id)}
                         invalid={invalid}
+                        restrictedOnly={true}
                       />
                     );
                   }}
@@ -100,6 +101,7 @@ export function ApprovalItemsPicker() {
                       value={value ?? null}
                       onChange={(val) => onChange(val?.id)}
                       invalid={invalid}
+                      filters={{ restricted: true }}
                     />
                   );
                 }}

src/pages/Gear/AllGearPage/AllGearPage.tsx

@@ -23,7 +23,8 @@ export function AllGearPage() {
   const [showFilters, setShowFilters] = useState<boolean>(
     !isEqual(filters, { retired: GearStatusFilter.exclude }), // Open the panel if filters are not the default
   );
-  const { gearTypes, broken, missing, retired, q, locations } = filters;
+  const { gearTypes, broken, missing, retired, q, locations, restricted } =
+    filters;
   const query = q ?? "";
   const setQuery = (q: string) => setFilters((filters) => ({ ...filters, q }));
 
@@ -34,6 +35,7 @@ export function AllGearPage() {
     broken: gearStatusToBoolean(broken),
     missing: gearStatusToBoolean(missing),
     retired: gearStatusToBoolean(retired),
+    restricted: gearStatusToBoolean(restricted),
     locations: locations,
   });
 

src/pages/Gear/AllGearPage/GearFilters.tsx

@@ -13,6 +13,7 @@ export enum GearStatusFilter {
 export type Filters = {
   q?: string;
   gearTypes?: number[];
+  restricted?: GearStatusFilter;
   broken?: GearStatusFilter;
   retired?: GearStatusFilter;
   missing?: GearStatusFilter;
@@ -65,7 +66,7 @@ export function GearFilters({ filters, setFilters }: Props) {
   );
 }
 
-const gearStatus = ["broken", "missing", "retired"] as const;
+const gearStatus = ["restricted", "broken", "missing", "retired"] as const;
 
 const gearStatusOptions = [
   { value: GearStatusFilter.include, label: "Include" },

src/pages/Gear/AllGearPage/useGearFilter.ts

@@ -21,11 +21,13 @@ function serialize({
   missing,
   retired,
   locations,
+  restricted,
 }: Filters): Record<string, string> {
   return {
     ...(q && { q }),
     ...(broken != null && { broken: String(broken) }),
     ...(missing != null && { missing: String(missing) }),
+    ...(restricted != null && { restricted: String(restricted) }),
     ...(retired != null &&
       retired !== GearStatusFilter.exclude && { retired: String(retired) }),
     ...(!isEmpty(gearTypes) && { gearTypes: gearTypes!.map(String).join(",") }),
@@ -40,6 +42,7 @@ function parse(params: URLSearchParams): Filters {
   const retired =
     parseStatus(params.get("retired")) ?? GearStatusFilter.exclude;
   const broken = parseStatus(params.get("broken"));
+  const restricted = parseStatus(params.get("restricted"));
   const q = params.get("q") ?? "";
   const locations = params.get("locations") ?? "";
 
@@ -48,6 +51,7 @@ function parse(params: URLSearchParams): Filters {
     ...(retired !== null && { retired }),
     ...(broken != null && { broken }),
     ...(missing != null && { missing }),
+    ...(restricted != null && { restricted }),
     ...(!isEmpty(gearTypes) && {
       gearTypes: gearTypes!.split(",").map(Number),
     }),

src/redux/api.ts

@@ -70,18 +70,29 @@ export const gearDbApi = createApi({
         broken?: boolean;
         missing?: boolean;
         retired?: boolean;
+        restricted?: boolean;
         gearTypes?: number[];
         locations?: number[];
       }
     >({
-      query: ({ q, page, gearTypes, broken, missing, retired, locations }) => ({
+      query: ({
+        q,
+        page,
+        gearTypes,
+        broken,
+        missing,
+        retired,
+        restricted,
+        locations,
+      }) => ({
         url: "gear/",
         params: {
           ...(q && { q }),
           ...(page && { page }),
           ...(broken != null && { broken }),
           ...(missing != null && { missing }),
           ...(retired != null && { retired }),
+          ...(restricted != null && { restricted }),
           ...(!isEmpty(gearTypes) && { gearTypes }),
           ...(!isEmpty(locations) && { locations }),
         },
@@ -200,12 +211,14 @@ export function useGearList({
   missing,
   retired,
   locations,
+  restricted,
 }: {
   q: string;
   page?: number;
   gearTypes?: number[];
   broken?: boolean;
   missing?: boolean;
+  restricted?: boolean;
   retired?: boolean;
   locations?: number[];
 }) {
@@ -217,6 +230,7 @@ export function useGearList({
     missing,
     retired,
     locations,
+    restricted,
   });
   const data = result.data;
   const gearList = data?.results;