16882 user saved views UI

moped-database/metadata/tables.yaml

@@ -5074,8 +5074,8 @@
       permission:
         check: {}
         set:
-          created_by_user_id: x-hasura-x-hasura-user-db-id
-          updated_by_user_id: x-hasura-x-hasura-user-db-id
+          created_by_user_id: x-hasura-user-db-id
+          updated_by_user_id: x-hasura-user-db-id
         columns:
           - description
           - is_deleted
@@ -5086,8 +5086,8 @@
       permission:
         check: {}
         set:
-          created_by_user_id: x-hasura-x-hasura-user-db-id
-          updated_by_user_id: x-hasura-x-hasura-user-db-id
+          created_by_user_id: x-hasura-user-db-id
+          updated_by_user_id: x-hasura-user-db-id
         columns:
           - description
           - is_deleted
@@ -5148,7 +5148,7 @@
         filter: {}
         check: null
         set:
-          updated_by_user_id: x-hasura-x-hasura-user-db-id
+          updated_by_user_id: x-hasura-user-db-id
       comment: ""
     - role: moped-editor
       permission:
@@ -5160,7 +5160,7 @@
         filter: {}
         check: null
         set:
-          updated_by_user_id: x-hasura-x-hasura-user-db-id
+          updated_by_user_id: x-hasura-user-db-id
       comment: ""
 - table:
     name: moped_users

moped-editor/src/components/GridTable/FiltersChips.js

@@ -1,12 +1,15 @@
-import React from "react";
-import { Box, Typography, Chip, Grid } from "@mui/material";
+import React, { useState } from "react";
+import { useLocation } from "react-router-dom";
+import { useMutation } from "@apollo/client";
+import { Box, Typography, Chip, Grid, Button } from "@mui/material";
 import makeStyles from "@mui/styles/makeStyles";
 import {
   advancedSearchFilterParamName,
   advancedSearchIsOrParamName,
 } from "src/views/projects/projectsListView/useProjectListViewQuery/useAdvancedSearch";
 import { formatDateType } from "src/utils/dateAndTime";
 import { FILTERS_COMMON_OPERATORS } from "./FiltersCommonOperators";
+import { ADD_USER_SAVED_VIEW } from "src/queries/project";
 
 const useStyles = makeStyles((theme) => ({
   filtersList: {
@@ -19,6 +22,10 @@ const useStyles = makeStyles((theme) => ({
     fontSize: ".9rem",
     color: theme.palette.text.secondary,
   },
+  saveViewButton: {
+    margin: theme.spacing(0.5),
+    marginTop: theme.spacing(1),
+  },
 }));
 
 /**
@@ -36,9 +43,15 @@ const FiltersChips = ({
   filtersConfig,
   setSearchParams,
   setIsOr,
+  handleSnackbar
 }) => {
   const classes = useStyles();
 
+  const [saveView] = useMutation(ADD_USER_SAVED_VIEW);
+  const [IsViewSaved, setIsViewSaved] = useState(false);
+
+  let { pathname, search } = useLocation();
+
   const filtersCount = Object.keys(filters).length;
 
   const filtersLabels = filters.map((filter) => {
@@ -84,6 +97,7 @@ const FiltersChips = ({
         prevSearchParams.set(advancedSearchFilterParamName, jsonParamString);
         return prevSearchParams;
       });
+      setIsViewSaved(false);
     } else {
       // no filters left, clear search params
       setSearchParams((prevSearchParams) => {
@@ -105,12 +119,51 @@ const FiltersChips = ({
       prevSearchParams.set(advancedSearchIsOrParamName, !isOr);
       return prevSearchParams;
     });
+    setIsViewSaved(false);
+  };
+
+  const handleSaveView = () => {
+    const defaultDescription = filtersLabels
+      .map(
+        (filter) =>
+          `${filter.filterLabel} ${filter.operatorLabel} ${filter.filterValue}`
+      )
+      .join(", ");
+    saveView({
+      variables: {
+        object: {
+          description: defaultDescription,
+          url: `${pathname}${search}`,
+          query_filters: filters,
+        },
+      },
+    })
+      .then(() => {
+        setIsViewSaved(true);
+        handleSnackbar(true, "View saved to Dashboard", "success");
+      })
+      .catch((error) => {
+        handleSnackbar(true, "Error saving view to Dashboard", "error", error);
+      });
   };
 
   return (
     <Box className={classes.filtersList}>
       <Typography className={classes.filtersText} component="span">
         <Grid container alignItems={"center"} spacing={0.5}>
+          <Grid>
+            <Button
+              onClick={() => {
+                handleSaveView();
+              }}
+              variant="outlined"
+              color="primary"
+              className={classes.saveViewButton}
+              disabled={IsViewSaved}
+            >
+              SAVE VIEW
+            </Button>
+          </Grid>
           {filtersCount > 1 && (
             <Grid item>
               <Chip

moped-editor/src/components/GridTable/Search.js

@@ -97,6 +97,7 @@ const Search = ({
   loading,
   showMapView,
   setShowMapView,
+  handleSnackbar
 }) => {
   const classes = useStyles();
   const divRef = React.useRef();
@@ -184,6 +185,7 @@ const Search = ({
                 resetSimpleSearch={resetSimpleSearch}
                 setIsOr={setIsOr}
                 setSearchParams={setSearchParams}
+                handleSnackbar={handleSnackbar}
               />
             </Grid>
             <Grid item xs={12} md="auto" className={classes.downloadButtonGrid}>

moped-editor/src/components/GridTable/SearchBar.js

@@ -69,6 +69,7 @@ const SearchBar = ({
   resetSimpleSearch,
   setSearchParams,
   setIsOr,
+  handleSnackbar
 }) => {
   const classes = useStyles();
 
@@ -173,6 +174,7 @@ const SearchBar = ({
           setIsOr={setIsOr}
           isOr={isOr}
           setSearchParams={setSearchParams}
+          handleSnackbar={handleSnackbar}
         />
       )}
     </>

moped-editor/src/queries/project.js

@@ -1012,3 +1012,13 @@ export const GET_PROJECTS_GEOGRAPHIES = gql`
     }
   }
 `;
+
+export const ADD_USER_SAVED_VIEW = gql`
+  mutation AddUserSavedView($object: moped_user_saved_views_insert_input!) {
+    insert_moped_user_saved_views_one(object: $object) {
+      description
+      url
+      query_filters
+    }
+  }
+`;

moped-editor/src/views/projects/projectsListView/ProjectsListViewTable.js

@@ -31,6 +31,9 @@ import { useCurrentData } from "./useProjectListViewQuery/useCurrentData";
 import ProjectsListViewMap from "./ProjectsListViewMap";
 import dataGridProStyleOverrides from "src/styles/dataGridProStylesOverrides";
 import ActivityMetrics from "src/components/ActivityMetrics";
+import FeedbackSnackbar, {
+  useFeedbackSnackbar,
+} from "src/components/FeedbackSnackbar";
 
 export const mapSearchParamName = "map";
 
@@ -196,6 +199,9 @@ const ProjectsListViewTable = () => {
     [setQueryLimit, setQueryOffset]
   );
 
+  const { snackbarState, handleSnackbar, handleSnackbarClose } =
+  useFeedbackSnackbar();
+
   /**
    * Store the most recent version of the query in app context so that it
    * can be refetched elswhere
@@ -231,6 +237,7 @@ const ProjectsListViewTable = () => {
           loading={loading || isMapDataLoading}
           showMapView={showMapView}
           setShowMapView={setShowMapView}
+          handleSnackbar={handleSnackbar}
         />
         {/*Main Table Body*/}
         <Paper className={classes.paper}>
@@ -295,6 +302,10 @@ const ProjectsListViewTable = () => {
           </Box>
         </Paper>
       </Container>
+      <FeedbackSnackbar
+          snackbarState={snackbarState}
+          handleSnackbarClose={handleSnackbarClose}
+        />
     </ApolloErrorHandler>
   );
 };