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

[WIP] Mobile view for orders page #35

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

[WIP] Mobile view for orders page #35

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
08fdf32
add comments and fix formatting
jcads Aug 4, 2021
fed7fb3
Created OrderItem component for mobile
jcads Aug 4, 2021
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
123 changes: 63 additions & 60 deletions src/components/OrderList/OrderList.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,94 +1,97 @@
import React, { useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import {
Table,
Badge,
} from "reactstrap";
/**
* @format
*/
import React, { useEffect, useState } from "react";
import PropTypes from "prop-types";
import { Table, Badge } from "reactstrap";

import axios from "../../axios";

const tableHeaders = [
"Order ID",
"Date",
"Name",
"Item",
"Quantity",
"Status",
"Amount",
];

const badgeColor = {
PENDING: "warning",
ACCEPTED: "primary",
DISPATCHED: "info",
DELIVERED: "success",
CANCELLED: "danger",
};

function OrderList({ filter }) {
const [orders, setOrders] = useState([]);

useEffect(() => {
const fetchData = async () => {
try {
const { data } = await axios.get("/orders")
const { data } = await axios.get("/orders");
setOrders(data);
} catch (e) {
console.error(e)
console.error(e);
}
}
};

fetchData();
}, []);

const headers = [
"Order ID",
"Date",
"Name",
"Item",
"Quantity",
"Status",
"Amount"
];

const badgeColor = {
PENDING: "warning",
ACCEPTED: "primary",
DISPATCHED: "info",
DELIVERED: "success",
CANCELLED: "danger"
}
const displayOrders = () =>
orders.map((order) => {
const { orderStatus } = order;

const displayOrders = () => orders.map(order => {
const {orderStatus} = order;

if (filter === "all" || filter === orderStatus.toLowerCase()) {
return (
<tr>
<th scope="row">
<span className="mb-0 text-sm">
xxxx-xxx
</span>
</th>
<td>{new Date(order.createdAt).toLocaleDateString("en-US")}</td>
<td>{order.buyer.firstName} {order.buyer.lastName}</td>
<td>Rose Necklace</td>
<td>{order.quantity}</td>
<td>
<Badge color={badgeColor[orderStatus]} className="mr-4">
{orderStatus}
</Badge>
</td>
<td>
<span>Php 200</span>
</td>
</tr>
)
}
return null;
})
// show orders based on selected filters
if (filter === "all" || filter === orderStatus.toLowerCase()) {
return (
<tr>
<th scope="row">
<span className="mb-0 text-sm">xxxx-xxx</span>
</th>
<td>{new Date(order.createdAt).toLocaleDateString("en-US")}</td>
<td>
{order.buyer.firstName} {order.buyer.lastName}
</td>
<td>Rose Necklace</td>
<td>{order.quantity}</td>
<td>
<Badge color={badgeColor[orderStatus]} className="mr-4">
{orderStatus}
</Badge>
</td>
<td>
<span>Php 200</span>
</td>
</tr>
);
}
return null;
});

return (
<Table className="align-items-center table-flush" responsive>
<thead className="thead-light">
<tr>
{headers.map(header => <th scope="col">{header}</th>)}
{tableHeaders.map((header) => (
<th scope="col">{header}</th>
))}
</tr>
</thead>
<tbody>
{displayOrders()}
</tbody>
<tbody>{displayOrders()}</tbody>
</Table>
);
}

OrderList.defaultProps = {
filter: "all"
filter: "all",
};

OrderList.propTypes = {
filter: PropTypes.string
filter: PropTypes.string,
};

export default OrderList;
12 changes: 12 additions & 0 deletions src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,3 +63,15 @@ button.close {
color: #F2583E;
}

.order-item-header {
padding: 1rem 0.5rem 0.5rem 1rem;
}

.order-item-header:after {
content: "";
position: absolute;
top: 50px;
left: 17px;
width: 92%;
border-top: 2px solid rgba(0,0,0,0.05);
}
58 changes: 58 additions & 0 deletions src/pages/orders/OrderItem/OrderItem.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
/**
* @format
*/
import React from "react";
import PropTypes from "prop-types";

import {
Card,
CardHeader,
CardBody,
CardTitle,
Badge,
Table,
} from "reactstrap";

function OrderItem({}) {
return (
<Card className="w-50 m-4" style={{ borderRadius: "1.5rem" }}>
<CardHeader className="order-item-header" style={{ border: "none" }}>
<small className="text-gray">04 Aug 2021, 01:00 PM</small>
</CardHeader>
<CardBody className="px-3">
<CardTitle className="d-flex align-items-center justify-content-between">
<h4 className="m-0">OID078</h4>
<Badge color="danger" className="mr-5">
Cancelled
</Badge>
</CardTitle>
<Table striped>
<tbody>
<tr>
<td>Customer</td>
<th scope="row">Juan Dela Crus</th>
</tr>
<tr>
<td>Products</td>
<th scope="row">Tilapia</th>
</tr>
<tr>
<td>Price</td>
<th scope="row">100 Php</th>
</tr>
<tr>
<td>Payment status</td>
<th scope="row">pending</th>
</tr>
</tbody>
</Table>
</CardBody>
</Card>
);
}

OrderItem.defaultProps = {};

OrderItem.propTypes = {};

export default OrderItem;
55 changes: 26 additions & 29 deletions src/pages/orders/Orders.js
100755 → 100644
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,46 +1,41 @@
/**
* @format
*/
import React, { useState } from "react";
import {
Card,
CardHeader,
Container,
Row,
} from "reactstrap";
import { Card, CardHeader, Container, Row, Col } from "reactstrap";

import OrderList from "../../components/OrderList/OrderList";
import OrderItem from "./OrderItem/OrderItem";

const status = ["PENDING", "ACCEPTED", "DISPATCHED", "DELIVERED", "CANCELLED"];

const Orders = () => {
const [orderStatusFilter, setOrderStatusFilter] = useState("all");

const handleClick = (e) => {
const {target} = e;
const btns = target.parentNode.childNodes;
const { target } = e;
const filterButtons = target.parentNode.childNodes;
const status = target.textContent.toLowerCase();
setOrderStatusFilter(status);

btns.forEach(btn => {
filterButtons.forEach((btn) => {
// remove all selected state
if (btn.classList.contains("btn-warning")) {
btn.classList.remove("btn-warning");
btn.classList.add("btn-outline-warning");
}
})
});

if (target.classList.contains("btn-outline-warning")){
// set pressed button to be active
if (target.classList.contains("btn-outline-warning")) {
target.classList.remove("btn-outline-warning");
target.classList.add("btn-warning");
}
}

const status = [
"PENDING",
"ACCEPTED",
"DISPATCHED",
"DELIVERED",
"CANCELLED"
];
}
};

const buttonStyles = {
borderRadius: 10,
fontSize: "0.65rem"
fontSize: "0.65rem",
};

return (
Expand All @@ -51,14 +46,14 @@ const Orders = () => {
<Card className="shadow">
<CardHeader className="bg-transparent">
<Row className="align-items-center">
<div className="col">
<Col xs="12" lg="6" className="mb-3 mb-lg-0">
<h6 className="text-uppercase text-light ls-1 mb-1">
Shop Name
</h6>
<h2 className="text-black mb-0">Manage Orders</h2>
</div>
</Col>

<div className="col">
<Col xs="12" lg="6">
<button
className="btn btn-warning btn-sm"
type="button"
Expand All @@ -67,7 +62,8 @@ const Orders = () => {
>
ALL
</button>
{status.map(stat => (

{status.map((stat) => (
<button
className="btn btn-outline-warning btn-sm"
type="button"
Expand All @@ -77,15 +73,16 @@ const Orders = () => {
{stat}
</button>
))}
</div>
</Col>
</Row>
</CardHeader>
<OrderList filter={orderStatusFilter}/>
<OrderList filter={orderStatusFilter} />
<OrderItem />
</Card>
</div>
</Row>
</Container>
)
);
};

export default Orders;