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,21 +1,45 @@
 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 [filteredData, setFilteredData] = useState([]);
+  const [searchValue, setSearchValue] = useState("");
 
   useEffect(() => {
-        axios.get('http://localhost:8000/api/').then(
+    axios.get("http://localhost:8000/api/").then((response) => {
-            (response) => {
       setData(response.data);
     });
   }, []);
-    console.log(data);
+
-    const Done = data && data.inserts && data.inserts.filter((item) => item.done === true);
+  useEffect(() => {
-    const NotDone = data && data.inserts && data.inserts.filter((item) => item.done === false);
+    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>
@@ -28,15 +52,14 @@ export default function Table() {
             <th scope="col">Plateno</th>
             <th scope="col">Note</th>
             <th scope="col">Done</th>
-
           </tr>
         </thead>
         <tbody>
-                { isDone 
+          {filteredData.map((item) => {
-                    ? NotDone && NotDone.map((item) => <Row key={item.id} item={item} />)
+            return <Row key={item.id} item={item} />;
-                    : Done && Done.map((item) =>  <Row key={item.id} item={item} />)
+          })}
-                }
         </tbody>
       </table>
+    </div>
   );
 }