Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Voucher dropdown + Miscellaneous fixes #133

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Voucher dropdown + Miscellaneous fixes #133

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
6d204fc
Convert vouchers to checkboxes in UI and responsiveness fixes
julesfll Oct 27, 2020
d4c6c4f
Fix various warnings
julesfll Oct 27, 2020
21e1711
Fix spacing and update snapshots
julesfll Nov 6, 2020
813a4ce
Update snapshots
julesfll Nov 17, 2020
742d366
Merge branch 'main' into voucher-dropdown
julesfll Dec 19, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 7 additions & 8 deletions frontend/src/components/Navbar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,14 +27,13 @@ const LocalNavbar = (props) => {
<Navbar.Toggle aria-controls="responsive-navbar-nav" />
<Navbar.Collapse id="responsive-navbar-nav">
<Nav className="flex-lg-fill">
<Nav.Link>
<Link
to="/about"
className="text-white text-decoration-none h-hub-nav-link"
title="Learn more about Code-For-Charlottesville!"
>
About
</Link>
<Nav.Link
as={Link}
to="/about"
className="text-white text-decoration-none h-hub-nav-link"
title="Learn more about Code-For-Charlottesville!"
>
About
</Nav.Link>
<Form className="flex-fill nav-toggle" inline>
<FormControl
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/PropertyModal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ const PropertyModal = ({
}) => {
return (
<>
<Modal size="lg" show={showModal} onHide={() => setShowModal(false)}>
<Modal size="lg" scrollable show={showModal} onHide={() => setShowModal(false)}>
<Modal.Header className="bg-info" closeButton>
<Modal.Title className="text-light">Property Details</Modal.Title>
</Modal.Header>
Expand Down
54 changes: 28 additions & 26 deletions frontend/src/components/SearchTable.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,42 +32,44 @@ export default function SearchTable(props) {
) : (
""
)}
<div className="border mb-4">
<Table
columns={props.columns}
rows={props.rows}
selectedRowIndex={3}
onColumnSort={(cName, cIndex) => {
console.log("cname is ", cName);
console.log("cIndex is ", cIndex);
}}
onEditClick={(r) => {
setFormValues(r);
setShowEditModal(true);
}}
onRowSelect={(rName, rIndex) => {
console.log(rName, rIndex);
// setShowModal(true);
}}
/>
</div>

<Row>
<Col>
<Table
columns={props.columns}
rows={props.rows}
selectedRowIndex={3}
onColumnSort={(cName, cIndex) => {
console.log("cname is ", cName);
console.log("cIndex is ", cIndex);
}}
onEditClick={(r) => {
setFormValues(r);
setShowEditModal(true);
}}
onRowSelect={(rName, rIndex) => {
console.log(rName, rIndex);
// setShowModal(true);
}}
/>
</Col>
</Row>
<Row className="text-center pagination ml-3">
<Col sm={1} />
<Col sm={9}>
<Pagination
numberOfPages={
Math.ceil(props.pagination.totalNumberOfResults /
props.pagination.results_per_page)
}
numberOfPages={Math.ceil(
props.pagination.totalNumberOfResults /
props.pagination.results_per_page
)}
currentPageIndex={props.pagination.page}
resultsIndexStart={
props.pagination.page * props.pagination.results_per_page
}
resultsIndexEnd={
(props.pagination.page + 1) * (props.pagination.results_per_page) - 1
(props.pagination.page + 1) * props.pagination.results_per_page -
1
}
onSetPage={(index) => props.pagination.page = index}
onSetPage={(index) => (props.pagination.page = index)}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure what is going on here. You are setting the prop to index? Should you be setting state?

Copy link
Collaborator Author

@julesfll julesfll Nov 6, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not exactly sure- maybe it's intended as a Redux update? Was someone working on fixing the pagination? Otherwise I can look into this

/>
</Col>
<Col sm={2}>
Expand Down
108 changes: 31 additions & 77 deletions frontend/src/components/SearchTool.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,11 @@
import React from "react";
import "../style/SearchTool.css";
import { Container, Row, Col, Form } from "react-bootstrap";
import { Container, Row, Col, Form, InputGroup } from "react-bootstrap";
import { setSearchfieldsQuery, searchProperties } from "../actions/search";
import { connect } from "react-redux";

const SearchTool = (props) => {
return (
<div className="size border">
<>
<div style={{ height: "50px", display: "flex", alignItems: "center" }}>
<h5
style={{
Expand All @@ -22,10 +21,9 @@ const SearchTool = (props) => {
</h5>
</div>
<hr style={{ borderWidth: "3px" }} />
<div>
<div className="px-3">
<p
style={{
paddingLeft: "15px",
fontFamily: "Roboto",
fontSize: "14px",
marginBottom: "5px",
Expand All @@ -37,8 +35,6 @@ const SearchTool = (props) => {
<Form>
<Form.Row
style={{
paddingLeft: "15px",
paddingRight: "15px",
marginBottom: "5px",
}}
>
Expand All @@ -52,6 +48,9 @@ const SearchTool = (props) => {
)
}
/>
<Form.Text id="minHelp" muted style={{ paddingLeft: "0.5em" }}>
Min
</Form.Text>
</Col>
<Col>
<Form.Control
Expand All @@ -62,36 +61,13 @@ const SearchTool = (props) => {
)
}
/>
</Col>
</Form.Row>
<Row>
<Col>
<p
style={{
paddingLeft: "20px",
fontFamily: "Roboto",
fontSize: "13px",
}}
>
Min
</p>
</Col>
<Col>
<p
style={{
paddingLeft: "0px",
fontFamily: "Roboto",
fontSize: "13px",
}}
>
<Form.Text id="maxHelp" muted style={{ paddingLeft: "0.5em" }}>
Max
</p>
</Form.Text>
</Col>
</Row>
</Form.Row>
<Form.Row
style={{
paddingLeft: "15px",
paddingRight: "15px",
marginTop: "17px",
}}
>
Expand All @@ -105,22 +81,19 @@ const SearchTool = (props) => {
setSearchfieldsQuery("date_available", e.target.value)
)
}
></Form.Control>
/>
</div>
</Form.Row>

<Form.Group
controlId="bedrooms"
style={{
marginTop: "24px",
paddingLeft: "9px",
paddingRight: "9px",
}}
>
<Form.Label>Bedrooms</Form.Label>
<Form.Control
as="select"
id="numBeds"
onChange={(e) =>
props.dispatch(
setSearchfieldsQuery("bedrooms", parseInt(e.target.value))
Expand All @@ -142,15 +115,12 @@ const SearchTool = (props) => {
controlId="bathrooms"
style={{
marginTop: "15px",
paddingLeft: "9px",
paddingRight: "9px",
}}
>
<Form.Label>Bathrooms</Form.Label>
<Form.Control
as="select"
custom
id="numBath"
onChange={(e) =>
props.dispatch(
setSearchfieldsQuery("bathrooms", parseFloat(e.target.value))
Expand All @@ -170,9 +140,7 @@ const SearchTool = (props) => {
</Form.Control>
</Form.Group>
<Form.Row style={{ marginTop: "20px" }}>
<Col xs="10" style={{ paddingLeft: "15px" }}>
Deposit Needed
</Col>
<Col xs="10">Deposit Needed</Col>
<Col xs="1">
<Form.Check
onChange={(e) =>
Expand All @@ -185,9 +153,7 @@ const SearchTool = (props) => {
</Col>
</Form.Row>
<Form.Row style={{ marginTop: "4px" }}>
<Col xs="10" style={{ paddingLeft: "15px" }}>
Credit Report Needed
</Col>
<Col xs="10">Credit Report Needed</Col>
<Col xs="1">
<Form.Check
onChange={(e) =>
Expand All @@ -200,9 +166,7 @@ const SearchTool = (props) => {
</Col>
</Form.Row>
<Form.Row style={{ marginTop: "4px" }}>
<Col xs="10" style={{ paddingLeft: "15px" }}>
Near Bus Stop
</Col>
<Col xs="10">Near Bus Stop</Col>
<Col xs="1">
<Form.Check
onChange={(e) =>
Expand All @@ -215,9 +179,7 @@ const SearchTool = (props) => {
</Col>
</Form.Row>
<Form.Row style={{ marginTop: "4px", marginBottom: "30px" }}>
<Col xs="10" style={{ paddingLeft: "15px" }}>
Pets allowed
</Col>
<Col xs="10">Pets allowed</Col>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Did it not need the padding anymore?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I moved the padding "up a level"- the class name px-3 adds the padding to the parent instead of each child having their own padding

<Col xs="1">
<Form.Check
onChange={(e) =>
Expand All @@ -233,15 +195,12 @@ const SearchTool = (props) => {
<hr
style={{
borderWidth: "2px",
margin: "15px",
}}
/>
<Form.Group
controlId="schoolDistrict"
style={{
marginTop: "15px",
paddingLeft: "9px",
paddingRight: "9px",
}}
>
<Form.Label>School District</Form.Label>
Expand All @@ -262,15 +221,12 @@ const SearchTool = (props) => {
<hr
style={{
borderWidth: "2px",
margin: "15px",
}}
/>
<Form.Group
controlId="leaseType"
style={{
marginTop: "15px",
paddingLeft: "9px",
paddingRight: "9px",
}}
>
<Form.Label>Lease Type</Form.Label>
Expand All @@ -285,37 +241,35 @@ const SearchTool = (props) => {
<hr
style={{
borderWidth: "2px",
margin: "15px",
}}
/>
<Form.Group
controlId="vouchers"
style={{
marginTop: "15px",
paddingLeft: "9px",
paddingRight: "9px",
}}
>
<Form.Label>Vouchers Accepted</Form.Label>
<Form.Control
onChange={(e) =>
props.dispatch(
setSearchfieldsQuery("school_district", e.target.value)
)
}
as="select"
custom
>
<option>Any</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</Form.Control>
<Form.Row>
<Form.Check
onChange={(e) =>
props.dispatch(
setSearchfieldsQuery("school_district", e.target.value)
)
}
inline
defaultChecked={true}
label="2"
id="voucher-2"
/>
<Form.Check inline defaultChecked={true} label="3" id="voucher-3" />
<Form.Check inline defaultChecked={true} label="4" id="voucher-4" />
<Form.Check inline defaultChecked={true} label="5" id="voucher-5" />
</Form.Row>
</Form.Group>
</Form>
</div>
</div>
</>
);
};

Expand Down
7 changes: 4 additions & 3 deletions frontend/src/components/Table.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,10 @@ const LocalTable = (props) => {
{props.columns.map((c, columnIndex) =>
_renderCell(r[c.field], rowIndex, columnIndex)
)}
<Button variant="warning" onClick={() => props.onEditClick && props.onEditClick(r)}>Edit</Button>
<Button variant="danger">Delete</Button>

<td>
<Button variant="warning" onClick={() => props.onEditClick && props.onEditClick(r)}>Edit</Button>
<Button variant="danger">Delete</Button>
</td>
</tr>
);

Expand Down
Loading