Karolh2000/working branch

package.json

@@ -8,6 +8,7 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^27.5.2",
+    "@types/lodash": "^4.14.196",
     "@types/node": "^16.18.39",
     "@types/react": "^18.2.18",
     "@types/react-dom": "^18.2.7",
@@ -18,6 +19,7 @@
     "react-router-dom": "^6.14.2",
     "react-scripts": "5.0.1",
     "typescript": "^4.9.5",
+    "uuid": "^9.0.0",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
@@ -45,6 +47,7 @@
     ]
   },
   "devDependencies": {
+    "@types/uuid": "^9.0.2",
     "eslint": "^8.46.0"
   }
 }

src/App.tsx

@@ -1,21 +1,31 @@
 import React from 'react';
 import './App.css';
-import Navigator from "./components/Navigator";
-import RoutingTable from "./components/RoutingTable";
+import Menu from "./components/Menu";
+import Routing from "./components/Routing";
 import LoginButton from "./components/auth/LoginButton";
-import Image from "./components/Image";
+import Search from "./components/Search";
 
 function App() {
     return (
-        <div>
-            <LoginButton/>
-            <Image imagePath={"./resources/media/logo-white.svg"}></Image>
+        <div className="m-3">
             <div className="row">
-                <div className="col-2">
-                    <Navigator/>
-                </div>
                 <div className="col-5">
-                    <RoutingTable/>
+                    {/*<Search/>*/}
+                </div>
+                <div className="col-6">
+                    <div className="float-end">
+                        <Search/>
+                        <LoginButton/>
+                    </div>
+                </div>
+            </div>
+            {/*<Image imagePath={"./resources/media/logo-white.svg"}></Image>*/}
+            <div className="row">
+                <div className="col-2 mt-lg-3">
+                    <Menu/>
+                </div>
+                <div className="col-9 mt-lg-3">
+                    <Routing/>
                 </div>
             </div>
         </div>

src/components/Main.tsx → src/Location.tsx

@@ -1,10 +1,16 @@
 import React from "react";
 import 'bootstrap/dist/css/bootstrap.min.css';
 
+interface Location {
+    city: string;
+    state: string;
+    country: string;
+}
+
 function Main() {
     return (
-        <div className="display-1">
-            Main
+        <div>
+            Location
         </div>
     );
 }

src/components/Client.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import 'bootstrap/dist/css/bootstrap.min.css';
+import PersistantCombo from "./PersistantCombo";
+
+interface Client {
+    name: string;
+}
+
+function Client() {
+    return (
+        <div>
+            <PersistantCombo/>
+        </div>
+    );
+}
+
+export default Client;

src/components/CreateTask.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import Task from "./Task";
+
+function CreateTask() {
+
+    const task: Task = {
+        id: "",
+        client: { name: ""},
+        code: "",
+        matter: { name: ""},
+        name: "",
+        narrative: "",
+        project: {name: ""},
+        activityCode: "",
+        time: 0
+    }
+    return (
+        <div className="container">
+            <Task  {...task} />
+        </div>
+    );
+}
+
+export default CreateTask;

src/components/Home.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import 'bootstrap/dist/css/bootstrap.min.css';
+
+function Home() {
+    return (
+        <div className="form-control-lg">
+            HOME PAGE NOT IMPLEMENTED YET
+        </div>
+    );
+}
+
+export default Home;

src/components/Image.tsx

@@ -5,7 +5,9 @@ import TickerLogo from '../resources/media/logo-white.svg';
 const Image = ({ imagePath } : { imagePath: string }) => {
     return (
         <div>
-            <img src={ imagePath } alt={ imagePath } />
+            <svg className="">
+                <use xlinkHref={imagePath}></use>
+            </svg>
         </div>
     );
 }

src/components/Matter.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import 'bootstrap/dist/css/bootstrap.min.css';
+import PersistantCombo from "./PersistantCombo";
+
+interface Matter {
+    name: string;
+}
+
+function Matter() {
+    return (
+        <div>
+            Matter
+        </div>
+    );
+}
+
+export default Matter;

src/components/Navigator.tsx → src/components/Menu.tsx

@@ -7,8 +7,9 @@ interface NavInfo {
 }
 
 const AppRoutes: NavInfo[] = [
-    {path: "/", displayName: "Main", name: "main"},
-    {path: "/login", displayName: "Login", name: "login"}
+    {path: "/", displayName: "Home", name: "home"},
+    {path: "/tasks", displayName: "Tasks", name: "tasks"},
+    {path: "/createTask", displayName: "Create Task", name: "createTask"}
 ];
 
 function NaviLink(navInfo: NavInfo) {
@@ -20,7 +21,7 @@ function NaviLink(navInfo: NavInfo) {
     );
 }
 
-function Navigator() {
+function Menu() {
     return (
         <div className="container mt-3 h4">
             <nav>
@@ -35,5 +36,5 @@ function Navigator() {
     );
 }
 
-export default Navigator;
+export default Menu;
 

src/components/PersistantCombo.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import 'bootstrap/dist/css/bootstrap.min.css';
+import {FormText} from "react-bootstrap";
+
+const enum State  {Save = 'save'}
+function PersistentCombo() {
+
+    const context = {};
+
+    // const reducer = (state: string, action: any) => {
+    //     if (State.Save === state) {
+    //         context.value = action.value;
+    //     }
+    // }
+    return (
+        <div>
+            <label>List</label>
+            <input name="ble" list="sfd, sf, sdf, sdf"/>
+            <datalist></datalist>
+            <div className="">
+                <select className="">
+                        <option value="roundTrip">Item 1</option>
+                        <option value="oneWay">Item 2</option>
+                </select>
+            </div>
+        </div>
+    );
+}
+
+export default PersistentCombo;

src/components/Login.tsx → src/components/Project.tsx

@@ -1,12 +1,16 @@
 import React from "react";
 import 'bootstrap/dist/css/bootstrap.min.css';
 
-function Login() {
+interface Project {
+    name: string;
+}
+
+function Project() {
     return (
         <div className="">
-            Login
+            Project
         </div>
     );
 }
 
-export default Login;
+export default Project;

src/components/Routing.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import {BrowserRouter, Route, Routes} from "react-router-dom";
+import Home from './Home';
+import Tasks from "./Tasks";
+import CreateTask from "./CreateTask";
+function Routing() {
+    return (
+        <BrowserRouter>
+            <Routes>
+                <Route path="/" element={<Home />} />
+                <Route path="/tasks" element={<Tasks />} />
+                <Route path="/createTask" element={<CreateTask />} />
+            </Routes>
+        </BrowserRouter>
+    );
+}
+
+export default Routing;

src/components/Search.tsx

@@ -0,0 +1,27 @@
+import React, {useRef, useState} from "react";
+
+function Search() {
+
+    const ref: any = useRef(null);
+
+    const [text, setText] = useState("Search");
+
+    const handleChange = (event: any) => {
+        setText(event.target.value);
+        console.log("Text value " + event.target.value);
+    }
+    const clearText = () => {
+        setText("");
+        // if (ref.current != null) {
+            ref.current.value = "";
+        // }
+    }
+
+    return (
+        <>
+            <input className="form-control-lg" ref={ref} onChange={handleChange} id="tickerSearch" readOnly={false} type="search"  defaultValue={text} onClick={clearText}/>
+        </>
+    );
+}
+
+export default Search;