ferdzo/serviceCRM
1
0
Fork 0
mirror of https://github.com/ferdzo/serviceCRM.git synced 2026-04-05 13:16:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

Test

Browse Source
This commit is contained in:
ferdzo
2024-04-11 18:13:46 +02:00
parent f001621cdc
commit 2e515c267a
14 changed files with 2077 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1885
frontend/servicecrm/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

11
frontend/servicecrm/package.json
View File

@@ -3,10 +3,18 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"@chakra-ui/react": "^2.8.2",
"@emotion/react": "^11.11.4",
"@emotion/styled": "^11.11.0",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"axios": "^1.6.8",
"bootstrap": "^5.3.3",
"bootstrap5": "^1.1.9",
"framer-motion": "^11.0.18",
"react": "^18.2.0",
"react-bootstrap": "^2.10.2",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
@@ -34,5 +42,8 @@
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"tailwindcss": "^3.4.1"
}
}

13
frontend/servicecrm/public/index.html
View File

@@ -10,7 +10,18 @@
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
<script src="https://cdn.jsdelivr.net/npm/react/umd/react.production.min.js" crossorigin></script>
<script
src="https://cdn.jsdelivr.net/npm/react-dom/umd/react-dom.production.min.js"
crossorigin></script>
<script
src="https://cdn.jsdelivr.net/npm/react-bootstrap@next/dist/react-bootstrap.min.js"
crossorigin></script>
<script>var Alert = ReactBootstrap.Alert;</script>
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->

25
frontend/servicecrm/src/App.js
View File

@@ -1,25 +0,0 @@
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;

19
frontend/servicecrm/src/App.jsx Normal file
View File

@@ -0,0 +1,19 @@
import './App.css';
import NavigationBar from './components/NavigationBar';
import Table from './components/Table';
import MyButton from './components/Btn';
import 'bootstrap/dist/css/bootstrap.css';
function App() {
return (
<div className="App">
<NavigationBar/>
<Table/>
<MyButton/>
</div>
);
}
export default App;

26
frontend/servicecrm/src/components/Btn.jsx Normal file
View File

@@ -0,0 +1,26 @@
import React from 'react';
import {useState} from 'react';
function MyButton(){
const [count, setCount]=useState(0);
function handleClick(){
setCount(count+1);
}
return(
<div>
<Dugme count={count} handleClick={handleClick}/>
<Dugme count={count} handleClick={handleClick}/>
</div>
)
}
function Dugme({count, handleClick}){
return(
<button onClick={handleClick}>Clicked {count} times</button>
)
}
export default MyButton;

23
frontend/servicecrm/src/components/NavigationBar.jsx Normal file
View File

@@ -0,0 +1,23 @@
import React from 'react';
import { Navbar, Nav } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.css';
function NavigationBar() {
return (
<Navbar bg="light" expand="lg">
<Navbar.Brand href="#">Navbar</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<Nav.Link href="/">Home</Nav.Link>
<Nav.Link href="/done">Done</Nav.Link>
<Nav.Link href="http://localhost:8000/admin">Admin</Nav.Link>
<Nav.Link href="#" disabled>Disabled</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
);
}
export default NavigationBar;

20
frontend/servicecrm/src/components/Row.jsx Normal file
View File

@@ -0,0 +1,20 @@
import React from 'react';
function TableRow({ item }) {
const isDone = item.done? "✅":"❌";
return (
<tr>
<th scope="row">{item.id}</th>
<td>{item.name}</td>
<td>{item.date}</td>
<td>{item.phone}</td>
<td>{item.description}</td>
<td>{item.repair}</td>
<td>{item.plateno}</td>
<td>{item.note}</td>
<td>{isDone}</td>
</tr>
);
}
export default TableRow;

9
frontend/servicecrm/src/components/Search.jsx Normal file
View File

@@ -0,0 +1,9 @@
import React from "react";
function Search(data) {
return (
<div>
<input type="text" placeholder="Search..." />
</div>
);
}

42
frontend/servicecrm/src/components/Table.jsx Normal file
View File

@@ -0,0 +1,42 @@
import Row from "./Row";
import React, { useEffect, useState } from "react";
import axios from 'axios';
export default function Table() {
const [data, setData] = 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>
</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>
);
}

9
frontend/servicecrm/tailwind.config.js Normal file
View File

@@ -0,0 +1,9 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [],
theme: {
extend: {},
},
plugins: [],
}