Add experimental gear inventory page

At this point it only allows user to generate a CSV dump of the gear, and select which types should be inventoried.

src/App.tsx

@@ -10,6 +10,7 @@ import { refreshCsrfToken } from "apiClient/client";
 import BaseLayout from "components/BaseLayout";
 import { ApprovalsPage } from "pages/Approvals";
 import { AddNewApproval } from "pages/Approvals/AddNewApproval";
+import { GearInventoryPage } from "pages/Inventory/GearInventoryPage";
 import { ApproveDeskCreditPage } from "pages/OfficeHours/ApproveDeskCreditPage";
 import { MyOfficeHoursHistory } from "pages/OfficeHours/MyOfficeHoursHistory";
 import { OfficeHoursHistory } from "pages/OfficeHours/OfficeHoursHistory";
@@ -82,6 +83,9 @@ function App() {
           <Route exact path="/office-hours">
             <OfficeHoursPage />
           </Route>
+          <Route exact path="/gear-inventory">
+            <GearInventoryPage />
+          </Route>
           <Route exact path="/approvals">
             <ApprovalsPage />
           </Route>

src/apiClient/gear.ts

@@ -58,6 +58,7 @@ export interface GearTypeWithFee extends GearTypeBase {
 /** The representation of a gear type in the list endpoint*/
 export interface GearType extends GearTypeWithShorthand {
   defaultDeposit: number;
+  shouldInventory: boolean;
 }
 
 export interface GearLocation {
@@ -140,10 +141,18 @@ async function editGearItem(
   return request(`/gear/${id}/`, "PATCH", item);
 }
 
+async function editGearType(
+  id: number,
+  gearType: Partial<Omit<GearType, "id" | "shorthand">>,
+) {
+  return request(`/gear-types/${id}/`, "PATCH", gearType);
+}
+
 export {
   addNote,
   createGear,
   editGearItem,
+  editGearType,
   getGearRentalHistory,
   markBroken,
   markFixed,

src/pages/Inventory/GearInventoryPage.tsx

@@ -0,0 +1,84 @@
+import { API_HOST } from "apiClient/client";
+import { editGearType, GearType } from "apiClient/gear";
+import { useSetPageTitle } from "hooks";
+import { useGetGearTypesQuery } from "redux/api";
+
+export function GearInventoryPage() {
+  useSetPageTitle("Gear Inventory");
+  const { data: allGearTypes, refetch } = useGetGearTypesQuery();
+  return (
+    <div className="row">
+      <h1>Gear inventory</h1>
+      <h2>Gear types to inventory</h2>
+      <div className="row mb-4">
+        {allGearTypes?.map((gearType) => {
+          return (
+            <div
+              key={gearType.id}
+              className="col-4"
+              style={{ border: "grey dotted 1px" }}
+            >
+              <label>
+                <input
+                  type="checkbox"
+                  checked={gearType.shouldInventory}
+                  onChange={() => {
+                    editGearType(gearType.id, {
+                      shouldInventory: !gearType.shouldInventory,
+                    }).then(refetch);
+                  }}
+                />{" "}
+                {gearType.typeName}
+              </label>
+            </div>
+          );
+        })}
+      </div>
+      <h2>Export CSV files</h2>
+      <a
+        className="btn btn-primary col-3 me-3"
+        href={API_HOST + "/gear-inventory/export"}
+      >
+        Export gear CSV
+      </a>
+      <button
+        className="btn btn-primary col-3"
+        onClick={() => {
+          if (allGearTypes == null) {
+            return;
+          }
+          const csvContent = makeGearTypesCSV(
+            allGearTypes.filter((gearType) => gearType.shouldInventory),
+          );
+          downloadCSVFile(csvContent, "gear-types.csv");
+        }}
+      >
+        Export gear types CSV
+      </button>
+    </div>
+  );
+}
+
+function makeGearTypesCSV(types: GearType[]) {
+  return [
+    ["ID", "Type Name"],
+    ...types.map((gearType) => [gearType.id, gearType.typeName].join(",")),
+  ].join("\n");
+}
+
+function downloadCSVFile(content: string, name: string) {
+  const blob = new Blob([content], { type: "text/csv" });
+  const blobUrl = URL.createObjectURL(blob);
+  const link = document.createElement("a");
+  link.href = blobUrl;
+  link.download = name;
+  document.body.appendChild(link);
+  link.dispatchEvent(
+    new MouseEvent("click", {
+      bubbles: true,
+      cancelable: true,
+      view: window,
+    }),
+  );
+  document.body.removeChild(link);
+}