Events - Allow user to change status from (1) individual /events/:id page or (2) directly from the homepage events table row for the event

[daisycrego]

Events

Allow user to change status from multiple UI locations: (1) individual /events/:id page (2) homepage - events table - each row should have an option to edit directly

Todo

• [x] Add statuses to Event model:
• No action
• Notified Zillow
• Zillow Approves Exemption
• Zillow Rejected Exemption

How?

• As string enum in the mongoose schema?
• Did a lame little bit of research:
  • https://stackoverflow.com/questions/43159336/what-to-do-with-enum-values-in-mongoose
  • https://mongoosejs.com/docs/validation.html
• Mongoose has several built-in validators.
  • Strings have enum, match, minLength, and maxLength validators.

    const breakfastSchema = new Schema({
    eggs: {
    type: Number,
    min: [6, 'Too few eggs'],
    max: 12
    },
    bacon: {
    type: Number,
    required: [true, 'Why no bacon?']
    },
    drink: {
    type: String,
    enum: ['Coffee', 'Tea'],
    required: function() {
    return this.bacon > 3;
    }
    }
    });

  • You can configure the error message for individual validators in your schema.

    const breakfastSchema = new Schema({
    eggs: {
    type: Number,
    min: [6, 'Must be at least 6, got {VALUE}'],
    max: 12
    },
    drink: {
    type: String,
    enum: {
    values: ['Coffee', 'Tea'],
    message: '{VALUE} is not supported'
    }
    }
    });

• [ ] Along with these enum options added to the schema, we need a form to edit the Event status. We need an individual one embedded in each event page and then a button to edit to each row in the database (you click the edit icon and then you see the dropdown).
• [ ] Dan's spec: The UI will give the admin the ability to mark each event as: No action, Notified Zillow, Zillow Approves Exemption, Zillow Rejected Exemption. All incoming events will be categorized as No action by default.

[daisycrego]

• [ ] Update the Events table to display only Zillow Flex leads by default, with the ability to filter on the Source to view other lead sources, including all sources.
• [ ] Update the Events table: Action 1 --> Update Status, when user selects Update Status, we display a dropdown to update the status in place of the Update Status button, and a Save button. We can use state within the EventsTable component to know whether or not we are currently editing a given row, and then either display the Update Status button or the status dropdown + Save button.

[daisycrego]

Update the Events table to display only Zillow Flex leads by default, with the ability to filter on the Source to view other lead sources, including all sources.

• Currently the Events table displays all the events. Update the EventsTable component to have internal state to determine whether or not a row is being edited. If a row is being edited, display a status dropdown and a Save button. Attach an onclick handler to the Update Status button which will change the isEditing status, this should result in the component being re-rendered.\

• The current EventsTable receives rows as props. This should be ok, we can update which rows are actually to be displayed internally within the EventsTable:

  export default function EventsTable({ rows }) {
  const classes = useStyles();
  const [order, setOrder] = React.useState("desc");
  const [orderBy, setOrderBy] = React.useState("created");
  
  const [page, setPage] = React.useState(0);
  const [dense, setDense] = React.useState(false);
  const [rowsPerPage, setRowsPerPage] = React.useState(10);
  
  const handleRequestSort = (event, property) => {
  const isAsc = orderBy === property && order === "asc";
  setOrder(isAsc ? "desc" : "asc");
  setOrderBy(property);
  };
  
  const handleChangePage = (event, newPage) => {
  setPage(newPage);
  };
  
  const handleChangeRowsPerPage = (event) => {
  setRowsPerPage(parseInt(event.target.value, 10));
  setPage(0);
  };
  
  const handleChangeDense = (event) => {
  setDense(event.target.checked);
  };
  
  const emptyRows =
  rowsPerPage - Math.min(rowsPerPage, rows.length - page * rowsPerPage);
  
  return (
  <div className={classes.root}>
    <Paper className={classes.paper}>
      <EnhancedTableToolbar />
      <TableContainer>
        <Table
          className={classes.table}
          aria-labelledby="tableTitle"
          size={dense ? "small" : "medium"}
          aria-label="enhanced table"
        >
          <EnhancedTableHead
            classes={classes}
            order={order}
            orderBy={orderBy}
            onRequestSort={handleRequestSort}
            rowCount={rows.length}
          />
          <TableBody>
            {stableSort(rows, getComparator(order, orderBy))
              .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
              .map((row, index) => {
                const labelId = `enhanced-table-checkbox-${index}`;
  
                return (
                  <TableRow hover tabIndex={-1} key={row.id}>
                    <TableCell
                      component="th"
                      id={labelId}
                      scope="row"
                      align={"default"}
                      padding={"left"}
                    >
                      {row.property ? row.property.street : ""}
                    </TableCell>
                    <TableCell align={"default"} padding={"left"}>
                      {`${new Date(row.created).toDateString()} ${new Date(
                        row.created
                      ).toLocaleTimeString()}`}
                    </TableCell>
                    <TableCell align={"default"} padding={"left"}>
                      {row.source}
                    </TableCell>
                    <TableCell align={"default"} padding={"left"}>
                      {actions.map((action) => (
                        <Button>{action.name}</Button>
                      ))}
                    </TableCell>
                    <TableCell align={"default"} padding={"left"}>
                      <Link to={"/event/" + row._id} key={row._id}>
                        <IconButton>
                          <ArrowForward />
                        </IconButton>
                      </Link>
                    </TableCell>
                  </TableRow>
                );
              })}
            {emptyRows > 0 && (
              <TableRow style={{ height: (dense ? 33 : 53) * emptyRows }}>
                <TableCell colSpan={6} />
              </TableRow>
            )}
          </TableBody>
        </Table>
      </TableContainer>
      <TablePagination
        rowsPerPageOptions={[5, 10, 25, 50, 100]}
        component="div"
        count={rows.length}
        rowsPerPage={rowsPerPage}
        page={page}
        onChangePage={handleChangePage}
        onChangeRowsPerPage={handleChangeRowsPerPage}
      />
    </Paper>
    <FormControlLabel
      control={<Switch checked={dense} onChange={handleChangeDense} />}
      label="Dense padding"
    />
  </div>
  );
  }