Add addStudent and editStudent functions

db.json

@@ -1,36 +1,54 @@
 {
   "students": [
     {
-            "id": 1,
       "last_name": "Ivanov",
       "first_name": "Ivan",
-            "bdate": "01.01.1999",
+      "bdate": "1999-01-01",
       "email": "i.ivanov@mail.ru",
       "phone": "8 111 111 11 11",
-            "groupId": 1
+      "groupId": "1",
+      "id": 1
     },
     {
-            "id": 2,
       "last_name": "Petrov",
       "first_name": "Petr",
-            "bdate": "12.12.2000",
+      "bdate": "2000-12-12",
       "email": "p.petrov@mail.ru",
       "phone": "8 222 222 22 22",
-            "groupId": 1
+      "groupId": "1",
+      "id": 2
     },
     {
-            "id": 3,
       "last_name": "Sidorov",
       "first_name": "Sidr",
-            "bdate": "12.12.2000",
+      "bdate": "2000-12-12",
       "email": "s.sidorov@mail.ru",
       "phone": "8 333 333 33 33",
-            "groupId": 2
+      "groupId": "2",
+      "id": 3
+    },
+    {
+      "last_name": "!!!!",
+      "first_name": "asdasd",
+      "bdate": "0001-01-01",
+      "email": "asd@asd",
+      "phone": "3459345",
+      "groupId": "2",
+      "id": 4
     }
   ],
   "groups": [
-        { "id": 1, "name": "SomeGroup-11" },
+    {
-        { "id": 2, "name": "SomeGroup-12" },
+      "id": 1,
-        { "id": 2, "name": "SomeGroup-13" }
+      "name": "SomeGroup-11"
+    },
+    {
+      "id": 2,
+      "name": "SomeGroup-12"
+    },
+    {
+      "id": 3,
+      "name": "SomeGroup-13"
+    }
   ]
 }

page-js.html

@@ -79,12 +79,12 @@
                                     <input type="text" class="form-control" id="id" disabled />
                                 </div>
                                 <div class="mb-3">
-                                    <label for="lastname" class="form-label">Last Name:</label>
+                                    <label for="last_name" class="form-label">Last Name:</label>
-                                    <input type="text" class="form-control" id="lastname" required />
+                                    <input type="text" class="form-control" id="last_name" required />
                                 </div>
                                 <div class="mb-3">
-                                    <label for="firstname" class="form-label">First Name:</label>
+                                    <label for="first_name" class="form-label">First Name:</label>
-                                    <input type="text" class="form-control" id="firstname" required />
+                                    <input type="text" class="form-control" id="first_name" required />
                                 </div>
                                 <div class="mb-3">
                                     <label for="bdate" class="form-label">Birth date:</label>
@@ -99,8 +99,8 @@
                                     <input type="text" class="form-control" id="phone" required />
                                 </div>
                                 <div class="mb-3">
-                                    <select class="form-select" aria-label="Select group">
+                                    <select class="form-select" aria-label="Select group" required>
-                                        <option selected>Select group</option>
+                                        <option value="">Select group</option>
                                         <option value="1">One</option>
                                         <option value="2">Two</option>
                                         <option value="3">Three</option>
@@ -120,15 +120,31 @@
             Автор, 2022
         </footer>
         <script type="module">
-            const addStudent = async () => {
+            // eslint-disable-next-line no-undef
-                const data = {
+            const myModal = bootstrap.Modal.getOrCreateInstance(document.getElementById("studentModal"));
-                    last_name: "Last",
+            const studentForm = document.querySelector("#studentModal form");
-                    first_name: "First",
+
-                    bdate: "01.01.1999",
+            const setModalData = (element) => {
-                    email: "f.last@mail.ru",
+                const inputs = studentForm.querySelectorAll("input[required]");
-                    phone: "8 111 111 11 12",
+                inputs.forEach((input) => {
-                    groupId: 1,
+                    input.value = element ? element[input.getAttribute("id")] : "";
+                });
+                const idInput = studentForm.querySelector("#id");
+                idInput.value = element ? element.id : "";
+                const groupSelector = studentForm.querySelector("select");
+                groupSelector.value = element ? element.group.id : "";
+                myModal.show();
             };
+
+            const modalEl = document.getElementById("studentModal");
+            modalEl.addEventListener("shown.bs.modal", (event) => {
+                if (!event.relatedTarget) {
+                    return;
+                }
+                setModalData();
+            });
+
+            const addStudent = async (data) => {
                 const response = await fetch("http://localhost:3001/students", {
                     method: "post",
                     headers: {
@@ -141,6 +157,19 @@
                 }
             };
 
+            const editStudent = async (id, data) => {
+                const response = await fetch(`http://localhost:3001/students/${id}`, {
+                    method: "put",
+                    headers: {
+                        "Content-Type": "application/json",
+                    },
+                    body: JSON.stringify(data),
+                });
+                if (!response.ok) {
+                    throw new Error(`Response status: ${response.status}`);
+                }
+            };
+
             const deleteStudent = async (id) => {
                 // eslint-disable-next-line no-restricted-globals, no-alert
                 const answer = confirm(`Do you want to delete student with id = ${id}?`);
@@ -193,6 +222,11 @@
                     container.appendChild(createTd(element.email));
                     container.appendChild(createTd(element.phone));
                     container.appendChild(createTd(element.group.name));
+                    container.appendChild(
+                        createButton("Edit", "btn-warning", async () => {
+                            setModalData(element);
+                        })
+                    );
                     container.appendChild(
                         createButton("Delete", "btn-danger", async () => {
                             await deleteStudent(element.id);
@@ -205,11 +239,23 @@
             };
 
             document.addEventListener("DOMContentLoaded", () => {
-                // eslint-disable-next-line no-undef
+                studentForm.addEventListener("submit", async (event) => {
-                const myModal = bootstrap.Modal.getOrCreateInstance(document.getElementById("studentModal"));
+                    event.preventDefault();
-                const saveStudent = document.getElementById("saveStudent");
+                    const data = {};
-                saveStudent.addEventListener("click", async () => {
+                    const inputs = studentForm.querySelectorAll("input[required]");
-                    await addStudent();
+                    inputs.forEach((input) => {
+                        data[input.getAttribute("id")] = input.value;
+                    });
+                    const idInput = studentForm.querySelector("#id");
+                    const studentId = idInput.value;
+                    const groupSelector = studentForm.querySelector("select");
+                    data.groupId = groupSelector.value;
+                    console.log(data);
+                    if (!studentId) {
+                        await addStudent(data);
+                    } else {
+                        await editStudent(studentId, data);
+                    }
                     myModal.hide();
                     getStudents();
                 });