Merge pull request #284 from manipalutsav/feature-fix-events-page-add…

…-search

Add Search bar for Judges, Events, Registration page FIX #278 #279 #280

src/commons/Block/index.jsx

@@ -2,6 +2,6 @@ import React from "react";
 
 
 export default ({ show, children, id = null }) => {
-    console.log(show, id)
+    // console.log(show, id)
     return (show ? <>{children}</> : <></>);
 }

src/components/Events/index.jsx

@@ -1,9 +1,10 @@
 import React from "react";
-import { Link } from "gatsby";
+import { Link, navigate } from "gatsby";
+import './style.css'
 
 import eventsService from "../../services/events";
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faTable, faTableList } from '@fortawesome/free-solid-svg-icons'
+import { faTable, faTableList, faClose } from '@fortawesome/free-solid-svg-icons'
 import LoadContent from "../../commons/LoadContent";
 import participationStatus from "../../services/participationStatus";
 
@@ -27,6 +28,14 @@ const styles = {
       boxShadow: "0px 5px 50px -4px rgba(0, 0, 0, .1)",
     },
   },
+  table_styles: {
+    // border: "2px solid black",
+    fontSize: "16px",
+    textWrap: "balance",
+  },
+  table_th: {
+    overflowX: "hidden"
+  }
 };
 
 const EventCard = ({ event }) => (
@@ -67,10 +76,14 @@ export default class Events extends React.Component {
     this.state = {
       events: [],
       loading: true,
-      mode: "card"
+      mode: "card",
+      searchQuery: "",
     };
   }
 
+  handleSearch = (e) => {
+    this.setState({ searchQuery: e.target.value });
+  };
 
   async init() {
 
@@ -149,7 +162,7 @@ export default class Events extends React.Component {
 
 
   render = () => (
-    <div>
+    <div className="event-list-outer-container">
       <div>
         <h2 className="mucapp ">Events</h2>
         <Link to="/events/add"><button className="mucapp">Add Event</button></Link>
@@ -161,31 +174,51 @@ export default class Events extends React.Component {
       </div>
 
       <LoadContent loading={this.state.loading} noDiv={true}>
+        <div className="search-container">
+          <input
+            type="text"
+            placeholder="Search by event name"
+            value={this.state.searchQuery}
+            onChange={this.handleSearch}
+            title="Enter the event name to search"
+          />
+          <div className="clear-icon-container" onClick={() => { this.setState({ searchQuery: "" }) }} title="Clear">
+            <FontAwesomeIcon icon={faClose} />
+          </div>
+        </div>
         {this.state.mode === "table" ? <>
-          <table className="table w-full table-zebra" >
+          <table className="table table-zebra w-full overflow-x-auto border" >
             <thead><tr>
-              <th>Event Name</th>
-              <th>Venue</th>
-              <th>Start Date</th>
-              <th>End Date</th>
-              <th>Rounds</th>
-              <th>Max Teams Per college</th>
-              <th>Is Faculty Event</th>
-              <th>OutStationed Campuses</th>
+              <th style={styles.table_th}>Event Name</th>
+              <th style={styles.table_th}>Venue</th>
+              <th style={styles.table_th}>Start Date</th>
+              <th style={styles.table_th}>End Date</th>
+              <th style={styles.table_th}>Rounds</th>
+              <th style={styles.table_th}>Max Teams Per college</th>
+              <th style={styles.table_th}>Is Faculty Event</th>
+              <th style={styles.table_th}>OutStationed Campuses</th>
             </tr></thead>
             <tbody>
-              {this.state.events.map(event => <tr>
-                <td>{event.name}</td>
-                <td>{event.venue}</td>
-                <td>{event.startDate}</td>
-                <td>{event.endDate}</td>
-                <td>{event.rounds.length}</td>
-                <td>{event.maxTeamsPerCollege}</td>
-                <td>{event.faculty ? "true" : ""}</td>
-                <td>{event.participationStatus ? (`${event.participationStatus.yes} Yes, ${event.participationStatus.maybe} Maybe,${event.participationStatus.no} No`) : ""}</td>
-                <td>
-                </td>
-              </tr>)}
+              {
+                this.state.events
+                  .filter((event) =>
+                    event.name.toLowerCase().includes(this.state.searchQuery.toLowerCase())
+                  )
+                  .map((event, index) => {
+                    return (
+                      <tr onClick={() => { navigate("/events/" + event.id) }} className="table-data-row" key={index}>
+                        <td style={styles.table_styles}>{event.name}</td>
+                        <td style={styles.table_styles}>{event.venue}</td>
+                        <td style={{ ...styles.table_styles, minWidth: "100px" }}>{event.startDate.slice(0, 10)}</td>
+                        <td style={{ ...styles.table_styles, minWidth: "100px" }}>{event.endDate.slice(0, 10)}</td>
+                        <td style={styles.table_styles}>{event.rounds.length}</td>
+                        <td style={styles.table_styles}>{event.maxTeamsPerCollege}</td>
+                        <td style={styles.table_styles}>{event.faculty ? "true" : ""}</td>
+                        <td style={styles.table_styles}>{event.participationStatus ? (`${event.participationStatus.yes} Yes, ${event.participationStatus.maybe} Maybe,${event.participationStatus.no} No`) : ""}</td>
+                      </tr>
+                    );
+                  })
+              }
             </tbody>
           </table>
 
@@ -197,7 +230,13 @@ export default class Events extends React.Component {
             display: "flex",
             flexWrap: "wrap",
           }}>
-            {this.state.events.map((event, i) => <EventCard key={i} event={event} />)}
+            {this.state.events
+              .filter((event) =>
+                event.name.toLowerCase().includes(this.state.searchQuery.toLowerCase())
+              )
+              .map((event, i) => (
+                <EventCard key={i} event={event} />
+              ))}
           </div>}
       </LoadContent>
     </div>

src/components/Events/style.css

@@ -0,0 +1,77 @@
+.table-data-row {
+    cursor: pointer;
+    color: black;
+  }
+
+  .event-list-outer-container{
+    width: 100%;
+    overflow-x: auto;
+  }
+
+  .table-data-row:hover {
+    background-color: black;
+    color: #ff5800;
+    cursor: pointer;
+    transition: 100ms color ease-in-out;
+  }
+
+  table {
+    max-width: 100%;
+  }
+
+  th{
+    min-width: 100px;
+    width: auto;
+  }
+
+  .search-container {
+    border: 1px solid black;
+    width: 300px;
+    margin: 20px auto;
+    border-radius: 5px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    input {
+      padding: 10px 10px;
+      width: 100%;
+      font-size: 16px;
+      border-radius: 5px;
+      outline: none;
+      font-weight: 500;
+    }
+
+
+  }
+
+  .clear-icon-container{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    width: 40px;
+    color: gray;
+    cursor: pointer;
+  }
+
+  .clear-icon-container:hover{
+    color: black;
+  }
+
+  table:first-child{
+    position: relative;
+  }
+
+  @media only screen and (max-width: 757px) {
+    table{
+      width: 100% !important;
+    }
+    th, td{
+      width: 150px;
+    }
+
+    th:first-child{
+      position: relative !important;
+    }
+  }

src/components/Judges/index.jsx

@@ -1,10 +1,14 @@
 import React from "react";
 import { Link } from "gatsby";
 import { FiX } from "react-icons/fi";
+import './style.css'
 
 import reducer from "../../reducers/commonReducer";
 import { getAll } from "../../services/judgeServices";
 import Loader from "../../commons/Loader";
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faClose } from '@fortawesome/free-solid-svg-icons'
+
 
 const styles = {
   judgeCard: {
@@ -76,19 +80,21 @@ const JudgesList = (props) => (
       Add Judge
     </Link>
     {
-      props.judges
-        ? props.judges.map((judge, i) => (
+      props.judges ? props.judges
+        .filter(item =>
+          item.name.toLowerCase().includes(props.searchQuery.toLowerCase())
+        )
+        .map((judge, i) => (
           <Judge info={judge} key={i} />
-        ))
-        : null
-    }
+        )) : null}
   </div>
 );
 
 export default class Judges extends React.Component {
   state = {
     judges: [],
-    loading: true
+    loading: true,
+    searchQuery: ""
   };
 
   componentWillMount() {
@@ -101,18 +107,35 @@ export default class Judges extends React.Component {
     });
   }
 
+  handleSearch = (e) => {
+    this.setState({ searchQuery: e.target.value })
+  };
+
+
   componentWillUnmount() {
     this.unsubscribe();
   }
 
   render = () => (
     <div>
       <h2 className="mucapp">Judges</h2>
+      <div className="search-container">
+        <input
+          type="text"
+          placeholder="Search by Judge name"
+          value={this.state.searchQuery}
+          onChange={this.handleSearch}
+          title="Enter the judge name to search"
+        />
+        <div className="clear-icon-container" onClick={() => { this.setState({ searchQuery: "" }) }} title="Clear">
+          <FontAwesomeIcon icon={faClose} />
+        </div>
+      </div>
       <div>
         {
           this.state.loading
             ? <Loader />
-            : <JudgesList judges={this.state.judges} />
+            : <JudgesList judges={this.state.judges} searchQuery={this.state.searchQuery} />
         }
       </div>
     </div>

src/components/Judges/style.css

@@ -0,0 +1,33 @@
+
+.search-container {
+  border: 1px solid black;
+  width: 300px;
+  margin: 20px auto;
+  border-radius: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  input {
+    padding: 10px 10px;
+    width: 100%;
+    font-size: 16px;
+    border-radius: 5px;
+    outline: none;
+    font-weight: 500;
+  }
+}
+
+.clear-icon-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  width: 40px;
+  color: gray;
+  cursor: pointer;
+}
+
+.clear-icon-container:hover {
+  color: black;
+}