Merge pull request #148 from codeforsanjose/issues-137-admin-search-f…

…ield

Filter Search For Admin added

package.json

@@ -19,6 +19,7 @@
         "express": "^4.17.1",
         "express-fileupload": "^1.2.1",
         "fs": "^0.0.1-security",
+        "fuse.js": "^6.4.6",
         "jsonwebtoken": "^8.5.1",
         "mongodb": "^3.5.9",
         "mongoose": "^5.9.20",

src/containers/AdminDashboard/AdminDashboard.css

@@ -126,6 +126,9 @@
     border: solid 1px var(--color-red);
 }
 
+.AdminDashboard .dropdown-select {
+    margin: .5rem;
+}
 .AdminDashboard .dashboard-section-title {
     font-weight: 800;
     margin: 2rem 0 1rem;

src/containers/AdminDashboard/AdminDashboard.js

@@ -11,6 +11,7 @@ import {
     deleteQuestionnaireResponse,
 } from '../../sendRequest/apis';
 import { getAuthToken } from '../../utilities/auth_utils';
+import { searchArrayObjects } from '../../utilities/search_array';
 import './AdminDashboard.css';
 import { languageOptions, workshopTitle } from '../../data/LanguageOptions';
 import Navbar from '../../compositions/Navbar/Navbar';
@@ -37,6 +38,8 @@ const AdminDashboard = (props) => {
     const [loading, setLoading] = useState(true);
     const [createdOrder, setCreatedOrder] = useState(true);
     const [updatedOrder, setUpdatedOrder] = useState(true);
+    const [filterBy, setFilterBy] = useState('full_name');
+    const [searchTerm, setSearchTerm] = useState('');
     useEffect(() => {
         setLoading(true);
         const jwt = getAuthToken();
@@ -339,7 +342,13 @@ const AdminDashboard = (props) => {
     };
 
     const responsesMarkup = useMemo(() => {
-        return questionnaireResponses.map((response, index) => {
+        let filterQuestionnaireResponses = searchArrayObjects(
+            questionnaireResponses,
+            `questionnaireResponse.${filterBy}`,
+            searchTerm,
+            3
+        );
+        return filterQuestionnaireResponses.map((response, index) => {
             const { questionnaireResponse = {} } = response;
             const fullLangText = languageOptions.find(
                 (item) => item.code === questionnaireResponse['languageCode']
@@ -487,6 +496,8 @@ const AdminDashboard = (props) => {
         downloadOrder,
         createdOrder,
         updatedOrder,
+        filterBy,
+        searchTerm,
     ]);
 
     const responsesTable = (
@@ -687,6 +698,27 @@ const AdminDashboard = (props) => {
                     />
                 </section>
                 <section></section>
+                <section className="dashboard-section-title">
+                    <input
+                        placeholder="Search"
+                        className="input-box"
+                        onChange={(e) => setSearchTerm(e.target.value)}
+                        type="text"
+                        name="name"
+                    />
+                    <select
+                        className="dropdown-select"
+                        value={filterBy}
+                        onChange={(e) => setFilterBy(e.target.value)}
+                        name="cars"
+                        id="cars"
+                    >
+                        <option value="full_name">Name</option>
+                        <option value="email">Email</option>
+                        <option value="mobile_phone">Phone</option>
+                        <option value="US_zipcode">Zip</option>
+                    </select>
+                </section>
                 <section>
                     <h2 className="dashboard-section-title">Details</h2>
                     {responsesTable}

src/utilities/search_array.js

@@ -0,0 +1,25 @@
+import Fuse from 'fuse.js';
+/**
+ * search through an arary of objects for a specifed search string
+ * objects-array of objects to be filterd
+ * propertyPath - property to be filtered on, can include sub objects
+ * searchText - text to search for
+ * minLength - min length of the match
+ * @returns the filtered responses from the array
+ */
+export const searchArrayObjects = (
+    objects,
+    propertyPath,
+    searchText,
+    minLength = 3
+) => {
+    if (!searchText) {
+        return objects;
+    }
+    const fuse = new Fuse(objects, {
+        keys: [propertyPath],
+        minMatchCharLength: minLength,
+    });
+    const filterResponse = fuse.search(searchText).map((result) => result.item);
+    return filterResponse;
+};