Test

backend/serviceCRM/settings.py

@@ -40,9 +40,9 @@ INSTALLED_APPS = [
     'django.contrib.sessions',
     'django.contrib.messages',
     'django.contrib.staticfiles',
-    'crispy_forms',
-    'crispy_bootstrap5',
     'django_tables2',
+    'rest_framework',
+    'corsheaders',
 ]
 CRISPY_ALLOWED_TEMPLATE_PACKS = "bootstrap5"
 CRISPY_TEMPLATE_PACK = "bootstrap5"
@@ -60,6 +60,8 @@ MIDDLEWARE = [
     'django.contrib.auth.middleware.AuthenticationMiddleware',
     'django.contrib.messages.middleware.MessageMiddleware',
     'django.middleware.clickjacking.XFrameOptionsMiddleware',
+    'corsheaders.middleware.CorsMiddleware',
+    'django.middleware.common.CommonMiddleware',
 ]
 
 ROOT_URLCONF = 'serviceCRM.urls'
@@ -97,7 +99,7 @@ DATABASES = {
     }
 }
 
-
+CORS_ORIGIN_ALLOW_ALL = True
 # Password validation
 # https://docs.djangoproject.com/en/4.2/ref/settings/#auth-password-validators
 

backend/serviceCRM/urls.py

@@ -17,6 +17,8 @@ Including another URLconf
 from django.contrib import admin
 from django.urls import path
 import serviceCRM.views as view
+from rest_framework import routers
+
 
 urlpatterns = [
     path("", view.InsertListView.as_view(), name="index"),
@@ -27,5 +29,6 @@ urlpatterns = [
     path("delete/<int:id>/", view.Delete.delete, name="delete"),
     path("done/", view.Done.as_view(), name="done"),
     path("done/<int:id>/", view.Done.done_by_id, name="done"),
-    path("datatable/", view.DatatableView.as_view(), name="datatable"),
+    path("api/", view.get_all_inserts, name="api"),
+    # path("datatable/", view.DatatableView.as_view(), name="datatable"),
 ]

backend/serviceCRM/views.py

@@ -1,13 +1,14 @@
 from django.http import HttpResponse, HttpResponseRedirect
 from django.shortcuts import get_object_or_404, render
 from django.views import generic
-
+from rest_framework.decorators import api_view
+from rest_framework.response import Response
 from .forms import InputForm
 from .models import Insert
 from .tables import DoneInsertTable, InsertTable
 
 from django_tables2 import SingleTableView
-from datatableview.views import DatatableView
+# from datatableview.views import DatatableView
 
 class InsertListView(SingleTableView):
     model = Insert
@@ -27,7 +28,7 @@ class InsertNew(generic.View):
                 return HttpResponseRedirect(f"/nalog/{ticket.id}/")
         else:
             form = InputForm()
-ch
+
         return render(request, InsertNew.template_name, {'form': form})
 
 class Update(generic.UpdateView):
@@ -68,7 +69,11 @@ class Delete(generic.View):
         req.delete()
         return HttpResponseRedirect("/")
     
-class DatatableView(DatatableView):
-    model = Insert
-    template_name = 'serviceCRM/Insert_list.html'
+# class DatatableView(DatatableView):
+#     model = Insert
+#     template_name = 'serviceCRM/Insert_list.html'
     
+@api_view(["GET"])
+def get_all_inserts(request):
+    inserts = Insert.objects.all()
+    return Response({"inserts": list(inserts.values())})

frontend/servicecrm/package.json

@@ -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"
   }
 }

frontend/servicecrm/public/index.html

@@ -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/
     -->

frontend/servicecrm/src/App.js

@@ -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;

frontend/servicecrm/src/App.jsx

@@ -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;

frontend/servicecrm/src/components/Btn.jsx

@@ -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;

frontend/servicecrm/src/components/NavigationBar.jsx

@@ -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;

frontend/servicecrm/src/components/Row.jsx

@@ -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;

frontend/servicecrm/src/components/Search.jsx

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

frontend/servicecrm/src/components/Table.jsx

@@ -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>
+    );
+}

frontend/servicecrm/tailwind.config.js

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