From b04ec557abfb3759fe06f64966e67444f6556853 Mon Sep 17 00:00:00 2001
From: Saurabh <saurabh_2001ee63@iitp.ac.in>
Date: Fri, 30 Jul 2021 23:46:14 +0530
Subject: [PATCH] Added all orders page component

---
 src/App.js                            |   2 +
 src/components/AddFilter.jsx          |  26 +++++-
 src/components/AllOrders.jsx          |  77 ++++++++++++++++
 src/components/BookOrderCards.jsx     |  22 +++++
 src/components/apis/Orders.json       | 122 +++++++++++++++++++++++++
 src/components/css/AddFilter.css      | 123 ++++++++++++++++++++++++++
 src/components/css/AllOrders.css      |  56 ++++++++++++
 src/components/css/BookCards.css      |   1 +
 src/components/css/BookOrderCards.css |  38 ++++++++
 9 files changed, 463 insertions(+), 4 deletions(-)
 create mode 100644 src/components/AllOrders.jsx
 create mode 100644 src/components/BookOrderCards.jsx
 create mode 100644 src/components/apis/Orders.json
 create mode 100644 src/components/css/AllOrders.css
 create mode 100644 src/components/css/BookOrderCards.css

diff --git a/src/App.js b/src/App.js
index e0e99f5..1c82303 100644
--- a/src/App.js
+++ b/src/App.js
@@ -4,6 +4,7 @@ import Sidebar from './components/Sidebar';
 import BookApprovalSys from './components/BookApprovalSys';
 import MenuRoundedIcon from '@material-ui/icons/MenuRounded';
 import {useState} from 'react';
+import AllOrders from './components/AllOrders';
 
 function App() {
   const [sidebarOpen, setSidebarOpen] = useState(false);
@@ -18,6 +19,7 @@ function App() {
       <div className='main'>
         <Switch>
           <Route exact path='/BookApprovalSys' component={BookApprovalSys}/>
+          <Route exact path='/allOrders' component={AllOrders}/>
         </Switch>
       </div>
     </div>
diff --git a/src/components/AddFilter.jsx b/src/components/AddFilter.jsx
index 745d97e..6f64a73 100644
--- a/src/components/AddFilter.jsx
+++ b/src/components/AddFilter.jsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import './css/AddFilter.css'
+import DeleteRoundedIcon from '@material-ui/icons/DeleteRounded';
 
 const AddFilter = ({ openStatus, close }) => {
 
@@ -9,11 +10,28 @@ const AddFilter = ({ openStatus, close }) => {
                 <h4>+ AddFilter</h4>
                 <h4 id='closebtn' onClick={close}>close x</h4>
             </div>
-            <div className="filterCondition">
-                <h4>condition1 </h4>
-                <h4 id='closebtn' >x</h4>
+            <div className="condition">
+                <form>
+                <p>Medium of rent</p>
+                <input type="reset" value="Clear" name="Button"></input>
+                <fieldset id="Medium">
+                <input type="radio" value="Pick Up" name="Medium"></input>
+                <lable htmlFor="Pick Up">Pick Up</lable>
+                <br></br>
+                <input type="radio" value="Delivery" name="Medium"></input>
+                <lable htmlFor="Delivery">Delivery</lable>
+                </fieldset>
+                </form>
+            </div>
+            <div className="clearAll">
+                <div className="deleteIcon">
+                    <DeleteRoundedIcon color='error' />
+                </div>
+                <div className="clearText">
+                    <h4>Clear All Filters</h4>
+                </div>
+                <button className="doneButton">Done</button>
             </div>
-
 
         </div>
     )
diff --git a/src/components/AllOrders.jsx b/src/components/AllOrders.jsx
new file mode 100644
index 0000000..b9f0e14
--- /dev/null
+++ b/src/components/AllOrders.jsx
@@ -0,0 +1,77 @@
+import React, { useState, useEffect } from 'react'
+import './css/AllOrders.css'
+import BookOrderCards from './BookOrderCards'
+import FilterListIcon from '@material-ui/icons/FilterList';
+import OrdersList from './apis/Orders.json'
+import AddFilter from './AddFilter';
+import Pagignation from './Pagignation';
+
+const AllOrders = () => {
+    const [Orders, setOrders] = useState(OrdersList);
+    const [filterOpen, setFilterOpen] = useState(false);
+    const [currentPage, setCurrentPage] = useState(1);
+
+    const [active, setActive] = useState({
+        'rent': false,
+        'buysell': false
+    })
+
+    function filterOrders(status) {
+        const filteredOrders = OrdersList.filter((book) => {
+            return book.status === status;
+        })
+        setOrders(filteredOrders);
+
+        if (status === "rent") {
+            setActive({
+                "rent": true,
+                "buysell": false
+            });
+        }
+        else {
+            setActive({
+                "rent": false,
+                "buysell": true
+            });
+        }
+    }
+
+    useEffect(() => {
+        filterOrders("rent");
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [])
+
+    // Get current posts
+    const indexOfLastBook = currentPage * 3;
+    const indexOfFirstBook = indexOfLastBook - 3;
+    const currentBooks = Orders.slice(indexOfFirstBook, indexOfLastBook);
+
+    const paginate = pageNumber => setCurrentPage(pageNumber);
+
+    return (
+        <>
+            <AddFilter openStatus={filterOpen} close={() => { setFilterOpen(false) }}/>
+            <div className='bookContainer'>
+                <div className="bookContainerNav">
+                    <p id={active.rent ? 'activeTab' : ''} onClick={() => { filterOrders("rent") }}>Rent</p>
+                    <p id={active.buysell ? 'activeTab' : ''} onClick={() => { filterOrders("buysell") }}>Buy/Sell</p>
+                </div>
+
+
+                <div className="form">
+                    <button className='filterbtn' onClick={(e) => { setFilterOpen(!filterOpen) }}><FilterListIcon fontSize='small' color="primary" /> Filter</button>
+                    <input type="text" placeholder='Search' className='searchbox' />
+                </div>
+
+
+                <div className='line' />
+                <BookOrderCards books={currentBooks} />
+                <Pagignation totalBooks={Orders.length}
+                    paginate={paginate} currentPage={currentPage}/>
+            </div>
+
+        </>
+    )
+}
+
+export default AllOrders
diff --git a/src/components/BookOrderCards.jsx b/src/components/BookOrderCards.jsx
new file mode 100644
index 0000000..a0d3b1e
--- /dev/null
+++ b/src/components/BookOrderCards.jsx
@@ -0,0 +1,22 @@
+import React from 'react'
+import './css/BookOrderCards.css'
+
+const BookOrderCards = ({ books }) => {
+    return (
+        books.map((book) => {
+            return (
+                <div className="bookCard" key={book.title}>
+                    <div className="cardHead">
+                        <h4>{book.title}</h4>
+                    </div>
+                    <p >{book.desc}</p>
+                    {book.medium === 'pickup' ? <button className='bbtn' >Pick Up</button> :
+                        <button className='bbtn' style={{ border:`2px solid #FFAE00`, color: '#FFAE00'}}>Delivery</button>}
+
+                </div>
+            )
+        })
+    )
+}
+
+export default BookOrderCards
diff --git a/src/components/apis/Orders.json b/src/components/apis/Orders.json
new file mode 100644
index 0000000..0606612
--- /dev/null
+++ b/src/components/apis/Orders.json
@@ -0,0 +1,122 @@
+[
+    {
+        "title": "Book1",
+        "desc": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel, eos temporibus aliquid reprehenderit, veniam distinctio dolorum consequatur quo iusto magnam tempora officiis, optio ab deserunt.",
+        "medium": "pickup",
+        "status": "rent"
+    },
+    {
+        "title": "Book2",
+        "desc": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel, eos temporibus aliquid reprehenderit, veniam distinctio dolorum consequatur quo iusto magnam tempora officiis, optio ab deserunt.",
+        "medium": "pickup",
+        "status": "rent"
+    },
+    {
+        "title": "Book3",
+        "desc": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel, eos temporibus aliquid reprehenderit, veniam distinctio dolorum consequatur quo iusto magnam tempora officiis, optio ab deserunt.",
+        "medium": "pickup",
+        "status": "buysell"
+    },
+    {
+        "title": "Book4",
+        "desc": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel, eos temporibus aliquid reprehenderit, veniam distinctio dolorum consequatur quo iusto magnam tempora officiis, optio ab deserunt.",
+        "medium": "pickup",
+        "status": "rent"
+    },
+    {
+        "title": "Book5",
+        "desc": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel, eos temporibus aliquid reprehenderit, veniam distinctio dolorum consequatur quo iusto magnam tempora officiis, optio ab deserunt.",
+        "medium": "pickup",
+        "status": "buysell"
+    },
+    {
+        "title": "Book6",
+        "desc": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel, eos temporibus aliquid reprehenderit, veniam distinctio dolorum consequatur quo iusto magnam tempora officiis, optio ab deserunt.",
+        "medium": "delivery",
+        "status": "buysell"
+    },
+    {
+        "title": "Book7",
+        "desc": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel, eos temporibus aliquid reprehenderit, veniam distinctio dolorum consequatur quo iusto magnam tempora officiis, optio ab deserunt.",
+        "medium": "delivery",
+        "status": "rent"
+    },
+    {
+        "title": "Book8",
+        "desc": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel, eos temporibus aliquid reprehenderit, veniam distinctio dolorum consequatur quo iusto magnam tempora officiis, optio ab deserunt.",
+        "medium": "delivery",
+        "status": "buysell"
+    },
+    {
+        "title": "Book9",
+        "desc": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel, eos temporibus aliquid reprehenderit, veniam distinctio dolorum consequatur quo iusto magnam tempora officiis, optio ab deserunt.",
+        "medium": "delivery",
+        "status": "rent"
+    },
+    {
+        "title": "Book10",
+        "desc": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel, eos temporibus aliquid reprehenderit, veniam distinctio dolorum consequatur quo iusto magnam tempora officiis, optio ab deserunt.",
+        "medium": "delivery",
+        "status": "buysell"
+    },
+    {
+        "title": "Book11",
+        "desc": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel, eos temporibus aliquid reprehenderit, veniam distinctio dolorum consequatur quo iusto magnam tempora officiis, optio ab deserunt.",
+        "medium": "pickup",
+        "status": "rent"
+    },
+    {
+        "title": "Book12",
+        "desc": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel, eos temporibus aliquid reprehenderit, veniam distinctio dolorum consequatur quo iusto magnam tempora officiis, optio ab deserunt.",
+        "medium": "pickup",
+        "status": "rent"
+    },
+    {
+        "title": "Book13",
+        "desc": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel, eos temporibus aliquid reprehenderit, veniam distinctio dolorum consequatur quo iusto magnam tempora officiis, optio ab deserunt.",
+        "medium": "pickup",
+        "status": "rent"
+    },
+    {
+        "title": "Book14",
+        "desc": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel, eos temporibus aliquid reprehenderit, veniam distinctio dolorum consequatur quo iusto magnam tempora officiis, optio ab deserunt.",
+        "medium": "pickup",
+        "status": "buysell"
+    },
+    {
+        "title": "Book15",
+        "desc": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel, eos temporibus aliquid reprehenderit, veniam distinctio dolorum consequatur quo iusto magnam tempora officiis, optio ab deserunt.",
+        "medium": "pickup",
+        "status": "rent"
+    },
+    {
+        "title": "Book16",
+        "desc": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel, eos temporibus aliquid reprehenderit, veniam distinctio dolorum consequatur quo iusto magnam tempora officiis, optio ab deserunt.",
+        "medium": "delivery",
+        "status": "rent"
+    },
+    {
+        "title": "Book17",
+        "desc": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel, eos temporibus aliquid reprehenderit, veniam distinctio dolorum consequatur quo iusto magnam tempora officiis, optio ab deserunt.",
+        "medium": "delivery",
+        "status": "buysell"
+    },
+    {
+        "title": "Book18",
+        "desc": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel, eos temporibus aliquid reprehenderit, veniam distinctio dolorum consequatur quo iusto magnam tempora officiis, optio ab deserunt.",
+        "medium": "delivery",
+        "status": "rent"
+    },
+    {
+        "title": "Book19",
+        "desc": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel, eos temporibus aliquid reprehenderit, veniam distinctio dolorum consequatur quo iusto magnam tempora officiis, optio ab deserunt.",
+        "medium": "delivery",
+        "status": "buysell"
+    },
+    {
+        "title": "Book20",
+        "desc": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel, eos temporibus aliquid reprehenderit, veniam distinctio dolorum consequatur quo iusto magnam tempora officiis, optio ab deserunt.",
+        "medium": "delivery",
+        "status": "rent"
+    }
+]
\ No newline at end of file
diff --git a/src/components/css/AddFilter.css b/src/components/css/AddFilter.css
index 67bafc5..1d53b21 100644
--- a/src/components/css/AddFilter.css
+++ b/src/components/css/AddFilter.css
@@ -39,4 +39,127 @@
     justify-content: space-between;
     background: #e7ee81;
     padding: 10px;
+}
+
+.condition{
+    position: relative;
+    top: 15px;
+    left: 15px;
+    width: 272px;
+    height: 106px;
+
+    display: flex;
+
+    background: #F0F7FD;
+    border: 0.5px solid #0094FF;
+    box-sizing: border-box;
+    border-radius: 5px;
+}
+
+.condition p{
+    position: absolute;
+    top: 8px;
+    left: 19px;
+
+    font-family: Roboto;
+    font-style: normal;
+    font-weight: normal;
+    font-size: 14px;
+    line-height: 16px;
+
+    color: #000000;
+}
+
+.condition input[type=reset]{
+    position: absolute;
+
+    top: 9px;
+    right: 14px;
+    width: 44px;
+    height: 16px;
+
+    font-family: Open Sans;
+    font-style: normal;
+    font-weight: 600;
+    font-size: 12px;
+    line-height: 16px;
+
+    color: #0094FF;
+    border: white;
+    background-color: #F0F7FD;
+    cursor: pointer;
+}
+
+#Medium{
+    position:absolute;
+    top: 42px;
+    left: 19px;
+
+    font-family: Roboto;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 12px;
+    letter-spacing: 0em;
+    text-align: left;
+
+    border: white;
+    
+
+}
+
+#Medium input[type=radio]{
+    margin: 5px;
+    cursor: pointer;
+}
+
+.clearAll {
+    position: absolute;
+    height: 60px;
+    width: 408px;
+    left: 0px;
+    bottom: 0px;
+
+    background: #FFFFFF;
+    
+    box-shadow: 0px -4px 5px rgba(0, 0, 0, 0.06);
+    border-radius: 0px 0px 5px 5px;
+}
+
+.deleteIcon{
+    position: absolute;
+    top: 20px;
+    left: 20px;
+
+    /* background: #F77A7A; */
+}
+
+.clearText{
+    position: absolute;
+
+    width: 92px;
+    height: 16px;
+    left: 44px;
+    top: 25px;
+
+    font-family: Roboto;
+    font-style: normal;
+    font-weight: normal;
+    font-size: 14px;
+    line-height: 16px;
+
+    color: #F14545;
+
+}
+
+.doneButton{
+    position: absolute;
+    top: 13px;
+    right: 13px;    
+    width: 83px;
+    height: 34px;
+
+    background: #3E8EF7;
+    border-radius: 5px;
+    border: #3E8EF7;
 }
\ No newline at end of file
diff --git a/src/components/css/AllOrders.css b/src/components/css/AllOrders.css
new file mode 100644
index 0000000..c4398f2
--- /dev/null
+++ b/src/components/css/AllOrders.css
@@ -0,0 +1,56 @@
+.bookContainer{
+    background-color: #FFFFFF;
+    width: 97%;
+    height: 87vh;
+    margin: 72px auto 0 auto;
+}
+
+.bookContainerNav{
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+}
+
+.bookContainerNav>p{
+    padding: 10px;
+    border-bottom: 2px solid transparent;
+}
+
+.bookContainerNav>p:hover,#activeTab{
+    font-weight: bold;
+    color:#0094FF;
+    border-bottom: 2px solid #0094FF;
+}
+
+
+
+.form{
+    margin: 0 auto 0 auto;
+    padding: 10px 0 10px 0;
+    width: 95%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.line{
+
+    border-bottom: 2px solid #E9E9E9;
+}
+
+.searchbox{
+    padding: 5px;
+    border:1px solid #959595;
+    outline: none;
+}
+
+.filterbtn{
+    padding: 5px 10px 5px 10px;
+    border:1px solid #0094FF;
+    outline: none;
+    background-color: transparent;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
diff --git a/src/components/css/BookCards.css b/src/components/css/BookCards.css
index 2fdaf7d..97ec9c7 100644
--- a/src/components/css/BookCards.css
+++ b/src/components/css/BookCards.css
@@ -27,6 +27,7 @@
 
 .bookCard>p{
     font-size: smaller;
+    width: 689px;
 }
 
 .cardHeadLeft{
diff --git a/src/components/css/BookOrderCards.css b/src/components/css/BookOrderCards.css
new file mode 100644
index 0000000..7a01183
--- /dev/null
+++ b/src/components/css/BookOrderCards.css
@@ -0,0 +1,38 @@
+.bookCard{
+    width:95%;
+    height: 18vh;
+    margin: 10px auto 0 auto;
+    border:1px solid #C4C4C4;
+    padding: 5px;
+    position: relative;
+    box-sizing: border-box;
+}
+
+.cardHead{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+}
+
+.bbtn{
+    position: absolute;
+    width: 106px;
+    height: 31px;
+    right: 17px;
+    top: 16px;
+
+    background: #FFFFFF;
+    border: 2px solid #0094FF;
+    box-sizing: border-box;
+    color: #0094FF;
+}
+
+.bookCard>p{
+    font-size: smaller;
+    width: 689px;
+}
+
+.cardHeadLeft{
+    padding: 0 20px 0 20px;
+}
\ No newline at end of file