wip: switch to datagrid

brave · Oct 12, 2023 · 93dbc10 · 93dbc10
1 parent cafd27c
commit 93dbc10
Show file tree

Hide file tree

Showing 4 changed files with 138 additions and 135 deletions.
diff --git a/src/components/Creatives/CreativeList.tsx b/src/components/Creatives/CreativeList.tsx
@@ -10,15 +10,9 @@ import MiniSideBar from "components/Drawer/MiniSideBar";
 import { Box, Link, List, Typography } from "@mui/material";
 import { Status } from "components/Campaigns/Status";
 import { Link as RouterLink } from "react-router-dom";
-import {
-  DataGrid,
-  GridColDef,
-  GridToolbarColumnsButton,
-  GridToolbarContainer,
-  GridToolbarFilterButton,
-  GridToolbarQuickFilter,
-} from "@mui/x-data-grid";
+import { DataGrid, GridColDef } from "@mui/x-data-grid";
 import { CreativeStatusSwitch } from "components/Creatives/CreativeStatusSwitch";
+import { CustomToolbar } from "components/Datagrid/CustomToolbar";
 
 const ALLOWED_TYPES = ["notification_all_v1", "inline_content_all_v1"];
 export function CreativeList() {
@@ -81,17 +75,6 @@ export function CreativeList() {
     },
   ];
 
-  function CustomToolbar() {
-    return (
-      <GridToolbarContainer>
-        <GridToolbarColumnsButton />
-        <GridToolbarFilterButton />
-        <Box flex={1} />
-        <GridToolbarQuickFilter />
-      </GridToolbarContainer>
-    );
-  }
-
   const creatives = [...(data?.advertiser?.creatives ?? [])].filter((c) =>
     ALLOWED_TYPES.includes(c.type.code),
   );
@@ -107,32 +90,34 @@ export function CreativeList() {
         header="Creatives"
         sx={{
           flexGrow: 1,
-          mr: 2,
-          width: "100%",
+          overflowX: "auto",
+          mr: 1,
         }}
       >
-        <DataGrid
-          loading={loading}
-          rows={creatives}
-          columns={columns}
-          density="standard"
-          autoHeight
-          disableRowSelectionOnClick
-          hideFooterSelectedRowCount
-          rowHeight={60}
-          slots={{ toolbar: CustomToolbar }}
-          sx={{ borderStyle: "none" }}
-          initialState={{
-            sorting: {
-              sortModel: [{ field: "createdAt", sort: "desc" }],
-            },
-            pagination: {
-              paginationModel: {
-                pageSize: 10,
+        <Box>
+          <DataGrid
+            loading={loading}
+            rows={creatives}
+            columns={columns}
+            density="standard"
+            autoHeight
+            disableRowSelectionOnClick
+            hideFooterSelectedRowCount
+            rowHeight={60}
+            slots={{ toolbar: CustomToolbar }}
+            sx={{ borderStyle: "none" }}
+            initialState={{
+              sorting: {
+                sortModel: [{ field: "createdAt", sort: "desc" }],
               },
-            },
-          }}
-        />
+              pagination: {
+                paginationModel: {
+                  pageSize: 10,
+                },
+              },
+            }}
+          />
+        </Box>
       </CardContainer>
     </MiniSideBar>
   );

diff --git a/src/components/Datagrid/CustomToolbar.tsx b/src/components/Datagrid/CustomToolbar.tsx
@@ -0,0 +1,18 @@
+import {
+  GridToolbarColumnsButton,
+  GridToolbarContainer,
+  GridToolbarFilterButton,
+  GridToolbarQuickFilter,
+} from "@mui/x-data-grid";
+import { Box } from "@mui/material";
+
+export function CustomToolbar() {
+  return (
+    <GridToolbarContainer>
+      <GridToolbarColumnsButton />
+      <GridToolbarFilterButton />
+      <Box flex={1} />
+      <GridToolbarQuickFilter />
+    </GridToolbarContainer>
+  );
+}
diff --git a/src/user/User.tsx b/src/user/User.tsx
@@ -51,77 +51,76 @@ export function User() {
           setFromDate,
         }}
       >
-        <Box height="100%">
-          <Box display="flex">
-            <Navbar />
-            <Box
-              width="100%"
-              height="100%"
-              padding={1}
-              marginTop="64px"
-              bgcolor="background.default"
-            >
-              <Switch>
-                {/* /adsmanager */}
-                <ProtectedRoute
-                  path="/user/main/adsmanager/advanced/new/:draftId"
-                  authedComponent={NewCampaign}
-                  validateAdvertiserProperty={(a) =>
-                    a.selfServiceManageCampaign
-                  }
-                />
-
-                <ProtectedRoute
-                  path="/user/main/adsmanager/advanced/:campaignId"
-                  authedComponent={EditCampaign}
-                  validateAdvertiserProperty={(a) =>
-                    a.selfServiceManageCampaign
-                  }
-                />
-
-                <ProtectedRoute
-                  path="/user/main/creative/:id"
-                  authedComponent={CreativeForm}
-                  validateAdvertiserProperty={(a) =>
-                    a.selfServiceManageCampaign
-                  }
-                />
-
-                <ProtectedRoute
-                  path="/user/main/complete/:mode"
-                  authedComponent={CompletionForm}
-                />
-
-                {/* /campaigns/:campaignId/analytics - */}
-                <ProtectedRoute
-                  path="/user/main/campaign/:campaignId"
-                  authedComponent={CampaignReportView}
-                />
-
-                <Route path="/user/main/settings" component={Settings} />
-
-                <Route path="/user/main/profile" component={Profile} />
-
-                <ProtectedRoute
-                  path="/user/main/campaign"
-                  authedComponent={CampaignView}
-                  unauthedComponent={AdvertiserAgreed}
-                />
-
-                <ProtectedRoute
-                  path="/user/main/assets"
-                  authedComponent={AdvertiserAssets}
-                />
-
-                <ProtectedRoute
-                  path="/user/main/creatives"
-                  authedComponent={CreativeList}
-                />
-
-                {/* default */}
-                <Redirect to="/user/main/campaign" />
-              </Switch>
-            </Box>
+        <Box display="flex" height="100vh" width="100vw" flexDirection="row">
+          <Navbar />
+          <Box
+            flex={1}
+            component="main"
+            marginTop="64px"
+            height="calc(100% - 64px)"
+            overflow="auto"
+            padding={1}
+            // this is flexing vertically, so that screens that wish to be
+            // exactly in viewport without scrollbars can set flex=1 on the
+            // child they wish to fill the screen with
+            display="flex"
+            flexDirection="column"
+            bgcolor="background.default"
+          >
+            <Switch>
+              {/* /adsmanager */}
+              <ProtectedRoute
+                path="/user/main/adsmanager/advanced/new/:draftId"
+                authedComponent={NewCampaign}
+                validateAdvertiserProperty={(a) => a.selfServiceManageCampaign}
+              />
+
+              <ProtectedRoute
+                path="/user/main/adsmanager/advanced/:campaignId"
+                authedComponent={EditCampaign}
+                validateAdvertiserProperty={(a) => a.selfServiceManageCampaign}
+              />
+
+              <ProtectedRoute
+                path="/user/main/creative/:id"
+                authedComponent={CreativeForm}
+                validateAdvertiserProperty={(a) => a.selfServiceManageCampaign}
+              />
+
+              <ProtectedRoute
+                path="/user/main/complete/:mode"
+                authedComponent={CompletionForm}
+              />
+
+              {/* /campaigns/:campaignId/analytics - */}
+              <ProtectedRoute
+                path="/user/main/campaign/:campaignId"
+                authedComponent={CampaignReportView}
+              />
+
+              <Route path="/user/main/settings" component={Settings} />
+
+              <Route path="/user/main/profile" component={Profile} />
+
+              <ProtectedRoute
+                path="/user/main/campaign"
+                authedComponent={CampaignView}
+                unauthedComponent={AdvertiserAgreed}
+              />
+
+              <ProtectedRoute
+                path="/user/main/assets"
+                authedComponent={AdvertiserAssets}
+              />
+
+              <ProtectedRoute
+                path="/user/main/creatives"
+                authedComponent={CreativeList}
+              />
+
+              {/* default */}
+              <Redirect to="/user/main/campaign" />
+            </Switch>
           </Box>
         </Box>
       </FilterContext.Provider>

diff --git a/src/user/campaignList/CampaignList.tsx b/src/user/campaignList/CampaignList.tsx
@@ -1,9 +1,5 @@
 import { useState } from "react";
-import {
-  ColumnDescriptor,
-  EnhancedTable,
-  StandardRenderers,
-} from "components/EnhancedTable";
+import { EnhancedTable, StandardRenderers } from "components/EnhancedTable";
 import { Checkbox, Link } from "@mui/material";
 import {
   campaignOnOffState,
@@ -22,6 +18,7 @@ import {
 import _ from "lodash";
 import { uiTextForCampaignFormat } from "user/library";
 import { CampaignSummaryFragment } from "graphql/campaign.generated";
+import { GridColDef } from "@mui/x-data-grid";
 
 interface Props {
   advertiser?: AdvertiserCampaignsFragment | null;
@@ -52,36 +49,39 @@ export function CampaignList({
     },
   });
 
-  const columns: ColumnDescriptor<CampaignSummaryFragment>[] = [
+  const columns: GridColDef<CampaignSummaryFragment>[] = [
     {
-      title: "Campaign",
-      value: (c) => c.name,
-      extendedRenderer: (r) => (
+      field: "name",
+      headerName: "Campaign",
+      renderCell: ({ row }) => (
         <Link
           component={RouterLink}
-          to={`/user/main/campaign/${r.id}`}
+          to={`/user/main/campaign/${row.id}`}
           underline="none"
         >
-          {r.name}
+          {row.name}
         </Link>
       ),
     },
     {
-      title: "Format",
-      value: (c) => uiTextForCampaignFormat(c.format),
+      field: "format",
+      headerName: "Format",
+      valueGetter: ({ row }) => uiTextForCampaignFormat(row.format),
     },
     {
-      title: "Status",
-      value: (c) => (isAfterEndDate(c.endAt) ? "completed" : c.state),
-      extendedRenderer: (r) => (
-        <Status state={r.state} start={r.startAt} end={r.endAt} />
+      field: "state",
+      headerName: "Status",
+      valueGetter: ({ row }) =>
+        isAfterEndDate(row.endAt) ? "completed" : row.state,
+      renderCell: ({ row }) => (
+        <Status state={row.state} start={row.startAt} end={row.endAt} />
       ),
-      sx: { width: "1px", p: 0 },
+      width: 1,
     },
     {
-      title: "Budget",
-      value: (c) => c.budget,
-      extendedRenderer: (r) => renderMonetaryAmount(r.budget, r.currency),
+      field: "budget",
+      headerName: "Budget",
+      renderCell: ({ row }) => renderMonetaryAmount(row.budget, row.currency),
       align: "right",
     },
     {
@@ -132,7 +132,6 @@ export function CampaignList({
       {
         title: "",
         value: (c) => c.id,
-        sortable: false,
         extendedRenderer: (r) => (
           <CampaignCheckBox
             campaign={r}
@@ -142,6 +141,8 @@ export function CampaignList({
         ),
         align: "center",
         sx: { width: "1px" },
+        sortable: false,
+        filterable: false,
       },
       {
         title: "On/Off",