Probaaaa

.unotes/templates/title_date.hbs

@@ -0,0 +1,4 @@
+# {{capitalizeAll title}}
+
+{{formatDate date "llll"}}
+

frontend/servicecrm/src/App.jsx

@@ -2,6 +2,7 @@ import './App.css';
 import NavigationBar from './components/NavigationBar';
 import Table from './components/Table';
 import MyButton from './components/Btn';
+import Search from './components/Search';
 import 'bootstrap/dist/css/bootstrap.css';
 
 
@@ -10,6 +11,7 @@ function App() {
   return (
     <div className="App">
        <NavigationBar/>
+        
          <Table/>
        <MyButton/>
     </div>

frontend/servicecrm/src/components/Search.jsx

@@ -1,9 +1,30 @@
-import React from "react";
+import React, { useState } from "react";
+
+function Search( props ) {
+  const [value, setValue] = useState("");
+
+  const onChange = (event) => {
+    setValue(event.target.value);
+  };
+
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    props.handleValue(value);
+  }
 
-function Search(data) {
   return (
     <div>
-      <input type="text" placeholder="Search..." />
+      <form onSubmit={handleSubmit}>
+        <input
+          onChange={onChange}
+          value={value}
+          type="text"
+          placeholder="Search..."
+        />
+        <button type="submit">Search</button>
+      </form>
     </div>
   );
-}
+}
+
+export default Search;

frontend/servicecrm/src/components/Table.jsx

@@ -1,42 +1,65 @@
 import Row from "./Row";
 import React, { useEffect, useState } from "react";
-import axios from 'axios';
+import axios from "axios";
+import Search from "./Search";
 
 export default function Table() {
-    const [data, setData] = useState([]);
+  const [data, setData] = useState([]);
+  const [filteredData, setFilteredData] = useState([]);
+  const [searchValue, setSearchValue] = useState("");
 
-    useEffect(() => {
-        axios.get('http://localhost:8000/api/').then(
-            (response) => {
-                setData(response.data);
-            });
-    }, []);
-    console.log(data);
-    const Done = data && data.inserts && data.inserts.filter((item) => item.done === true);
-    const NotDone = data && data.inserts && data.inserts.filter((item) => item.done === false);
-    var isDone = true;
-    return (
-        <table className="table">
-            <thead>
-                <tr>
-                    <th scope="col">ID</th>
-                    <th scope="col">Name</th>
-                    <th scope="col">Date</th>
-                    <th scope="col">Phone</th>
-                    <th scope="col">Description</th>
-                    <th scope="col">Repair</th>
-                    <th scope="col">Plateno</th>
-                    <th scope="col">Note</th>
-                    <th scope="col">Done</th>
+  useEffect(() => {
+    axios.get("http://localhost:8000/api/").then((response) => {
+      setData(response.data);
+    });
+  }, []);
 
-                </tr>
-            </thead>
-            <tbody>
-                { isDone 
-                    ? NotDone && NotDone.map((item) => <Row key={item.id} item={item} />)
-                    : Done && Done.map((item) =>  <Row key={item.id} item={item} />)
-                }
-            </tbody>
-        </table>
-    );
-}
+  useEffect(() => {
+    if (searchValue){
+      debugger;
+      for (const item in data) {
+        if (item.name.toLowerCase().includes(searchValue.toLowerCase())){
+          setFilteredData((prev) => {
+            return [...prev, item];
+          });
+        }
+      }
+  }
+  }, [searchValue, data]);
+
+  const Done = data?.inserts?.filter((item) => item.done === true);
+  const NotDone = data?.inserts?.filter((item) => item.done === false);
+  var isDone = true;
+
+  const handleValue = (value) => {
+    setSearchValue(value);
+  };
+
+  return (
+    <div>
+      <Search data={data} handleValue={handleValue} />
+
+      <table className="table"></table>
+      <table className="table">
+        <thead>
+          <tr>
+            <th scope="col">ID</th>
+            <th scope="col">Name</th>
+            <th scope="col">Date</th>
+            <th scope="col">Phone</th>
+            <th scope="col">Description</th>
+            <th scope="col">Repair</th>
+            <th scope="col">Plateno</th>
+            <th scope="col">Note</th>
+            <th scope="col">Done</th>
+          </tr>
+        </thead>
+        <tbody>
+          {filteredData.map((item) => {
+            return <Row key={item.id} item={item} />;
+          })}
+        </tbody>
+      </table>
+    </div>
+  );
+}