From 0b1d5e8b79366ef5ea9b600e301fc4d83fce0380 Mon Sep 17 00:00:00 2001
From: Ivan <Ppechenkooo@gmail.com>
Date: Sun, 28 Jan 2024 20:49:58 +0300
Subject: [PATCH] deleting documents, bug fixes

---
 static/scripts/documents-table.js             | 56 ++++++++++---------
 static/styles/main.css                        | 34 +++++++++--
 static/templates/project/documents.html       | 52 +++++++++++++++++
 static/templates/project/project.html         |  4 +-
 .../templates/project/settings/payment.html   |  1 -
 static/templates/user/settings.html           |  2 +-
 6 files changed, 117 insertions(+), 32 deletions(-)

diff --git a/static/scripts/documents-table.js b/static/scripts/documents-table.js
index 7bc29c6..ee39b0d 100644
--- a/static/scripts/documents-table.js
+++ b/static/scripts/documents-table.js
@@ -7,15 +7,16 @@ $(document).ready(function () {
 
     documents.forEach((doc) => {
       const row = document.createElement("tr");
-      row.setAttribute(
-        "onclick",
-        `window.open('` + API_SERVER + `/` + doc.path + `', '_blank')`
-      );
 
       const data = document.createElement("td");
 
       const rowContainer = document.createElement("div");
-      rowContainer.setAttribute("class", "row-container");
+      rowContainer.setAttribute("class", "row-container with-button");
+
+      rowContainer.setAttribute(
+        "onclick",
+        `window.open('` + API_SERVER + `/` + doc.path + `', '_blank')`
+      );
 
       const rowIcon = document.createElement("div");
       rowIcon.setAttribute("class", "row-icon");
@@ -62,6 +63,7 @@ $(document).ready(function () {
 
       const documentName = document.createElement("h1");
       documentName.textContent = doc.name;
+      documentName.setAttribute("id", `doc-name-${doc.id}`);
       rowContent.appendChild(documentName);
 
       const documentType = document.createElement("h2");
@@ -74,27 +76,31 @@ $(document).ready(function () {
 
       rowContainer.appendChild(rowContent);
 
-      //   const deleteIcon = document.createElement("div");
-      //   deleteIcon.setAttribute("class", "row-delete-icon");
-
-      //   let deleteContent = `
-      //   <svg xmlns="http://www.w3.org/2000/svg" width="21" height="25" viewBox="0 0 21 25" fill="none">
-      //   <g clip-path="url(#clip0_369_11)">
-      //     <path d="M6.98543 19.8025C7.38047 19.8025 7.64032 19.553 7.62993 19.1892L7.3077 8.06653C7.29731 7.7027 7.03742 7.46362 6.6632 7.46362C6.2682 7.46362 6.00831 7.71309 6.0187 8.07692L6.33058 19.1892C6.34097 19.5634 6.60082 19.8025 6.98543 19.8025ZM10.0624 19.8025C10.4574 19.8025 10.738 19.553 10.738 19.1892V8.07692C10.738 7.71309 10.4574 7.46362 10.0624 7.46362C9.66737 7.46362 9.39709 7.71309 9.39709 8.07692V19.1892C9.39709 19.553 9.66737 19.8025 10.0624 19.8025ZM13.1497 19.8025C13.5239 19.8025 13.7838 19.5634 13.7942 19.1892L14.106 8.07692C14.1164 7.71309 13.8565 7.46362 13.4615 7.46362C13.0873 7.46362 12.8275 7.7027 12.817 8.07692L12.5052 19.1892C12.4948 19.553 12.7547 19.8025 13.1497 19.8025ZM5.49895 4.75051H7.15178V2.52599C7.15178 1.93347 7.56755 1.54886 8.19128 1.54886H11.9127C12.5364 1.54886 12.9522 1.93347 12.9522 2.52599V4.75051H14.605V2.42204C14.605 0.914762 13.6278 0 12.027 0H8.07692C6.47611 0 5.49895 0.914762 5.49895 2.42204V4.75051ZM0.779624 5.58214H19.3555C19.7817 5.58214 20.1247 5.21831 20.1247 4.79211C20.1247 4.3659 19.7817 4.01248 19.3555 4.01248H0.779624C0.363825 4.01248 0 4.3659 0 4.79211C0 5.2287 0.363825 5.58214 0.779624 5.58214ZM5.30147 23.1497H14.8337C16.3202 23.1497 17.3181 22.183 17.3908 20.6965L18.1185 5.38462H16.4449L15.7484 20.5198C15.7277 21.1435 15.2807 21.5801 14.6673 21.5801H5.447C4.85449 21.5801 4.4075 21.1331 4.37629 20.5198L3.63825 5.38462H2.00624L2.74428 20.7069C2.81705 22.1933 3.79418 23.1497 5.30147 23.1497Z" fill="#FF3B30" fill-opacity="0.85"/>
-      //   </g>
-      //   <defs>
-      //     <clipPath id="clip0_369_11">
-      //       <rect width="20.1247" height="25" fill="white"/>
-      //     </clipPath>
-      //   </defs>
-      // </svg>
-      //     `;
-
-      //   deleteIcon.innerHTML = deleteContent;
-
-      //   rowContainer.appendChild(deleteIcon);
-
       data.appendChild(rowContainer);
+
+      if (isAdmin && isFull) {
+        const deleteContainer = document.createElement("div");
+        deleteContainer.setAttribute("class", "row-delete-container");
+        deleteContainer.setAttribute("onclick", `deleteDoc(${doc.id});`);
+
+        let deleteContent = `
+        <svg xmlns="http://www.w3.org/2000/svg" width="21" height="25" viewBox="0 0 21 25" fill="none">
+        <g clip-path="url(#clip0_369_11)">
+          <path d="M6.98543 19.8025C7.38047 19.8025 7.64032 19.553 7.62993 19.1892L7.3077 8.06653C7.29731 7.7027 7.03742 7.46362 6.6632 7.46362C6.2682 7.46362 6.00831 7.71309 6.0187 8.07692L6.33058 19.1892C6.34097 19.5634 6.60082 19.8025 6.98543 19.8025ZM10.0624 19.8025C10.4574 19.8025 10.738 19.553 10.738 19.1892V8.07692C10.738 7.71309 10.4574 7.46362 10.0624 7.46362C9.66737 7.46362 9.39709 7.71309 9.39709 8.07692V19.1892C9.39709 19.553 9.66737 19.8025 10.0624 19.8025ZM13.1497 19.8025C13.5239 19.8025 13.7838 19.5634 13.7942 19.1892L14.106 8.07692C14.1164 7.71309 13.8565 7.46362 13.4615 7.46362C13.0873 7.46362 12.8275 7.7027 12.817 8.07692L12.5052 19.1892C12.4948 19.553 12.7547 19.8025 13.1497 19.8025ZM5.49895 4.75051H7.15178V2.52599C7.15178 1.93347 7.56755 1.54886 8.19128 1.54886H11.9127C12.5364 1.54886 12.9522 1.93347 12.9522 2.52599V4.75051H14.605V2.42204C14.605 0.914762 13.6278 0 12.027 0H8.07692C6.47611 0 5.49895 0.914762 5.49895 2.42204V4.75051ZM0.779624 5.58214H19.3555C19.7817 5.58214 20.1247 5.21831 20.1247 4.79211C20.1247 4.3659 19.7817 4.01248 19.3555 4.01248H0.779624C0.363825 4.01248 0 4.3659 0 4.79211C0 5.2287 0.363825 5.58214 0.779624 5.58214ZM5.30147 23.1497H14.8337C16.3202 23.1497 17.3181 22.183 17.3908 20.6965L18.1185 5.38462H16.4449L15.7484 20.5198C15.7277 21.1435 15.2807 21.5801 14.6673 21.5801H5.447C4.85449 21.5801 4.4075 21.1331 4.37629 20.5198L3.63825 5.38462H2.00624L2.74428 20.7069C2.81705 22.1933 3.79418 23.1497 5.30147 23.1497Z" fill="#FF3B30" fill-opacity="0.85"/>
+        </g>
+        <defs>
+          <clipPath id="clip0_369_11">
+            <rect width="20.1247" height="25" fill="white"/>
+          </clipPath>
+        </defs>
+      </svg>
+          `;
+
+        deleteContainer.innerHTML = deleteContent;
+
+        data.appendChild(deleteContainer);
+      }
+
       row.appendChild(data);
       tbody.appendChild(row);
     });
diff --git a/static/styles/main.css b/static/styles/main.css
index 29a3cb7..4b62f52 100644
--- a/static/styles/main.css
+++ b/static/styles/main.css
@@ -1461,21 +1461,47 @@ input::placeholder {
   border-radius: 8px;
 }
 
-.project-content td,
-.progress-content td {
+.project-content td .row-container,
+.progress-content td .row-container {
   border-radius: 8px;
   cursor: pointer;
   padding: 0 10px;
 }
 
-.project-content td:hover,
-.progress-content td:hover {
+.progress-content td {
+  display: flex;
+  flex-direction: row;
+  flex-grow: 1;
+  flex-shrink: 1;
+}
+
+.project-content td .row-container:hover,
+.progress-content td .row-container:hover {
+  background: rgba(232, 232, 237, 0.8);
+}
+
+.row-delete-container {
+  margin: auto 10px;
+  padding: 9px;
+  border-radius: 5px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  align-content: center;
+  justify-items: center;
+  transition: 0.3s;
+  cursor: pointer;
+}
+
+.row-delete-container:hover {
   background: rgba(232, 232, 237, 0.8);
 }
 
 .project-content .row-container,
 .progress-content .row-container {
   display: flex;
+  width: 100%;
+  box-sizing: border-box;
 }
 
 .project-content .row-icon,
diff --git a/static/templates/project/documents.html b/static/templates/project/documents.html
index f617b34..c10d861 100644
--- a/static/templates/project/documents.html
+++ b/static/templates/project/documents.html
@@ -27,6 +27,8 @@
             },
             {{/each}}
         ];
+        const isAdmin = {{IsAdmin}};
+        const isFull = true;
   </script>
   <script src="../../scripts/projects.js"></script>
   <script src="../../scripts/documents-table.js"></script>
@@ -231,6 +233,17 @@
   </div>
   </form>
 
+  {{#if IsAdmin}}
+  <div id="deletedocument-form-popup-bg" class="form-popup-bg not-main" >
+    <div class="form-container">
+        <img src="../../img/xmark.svg" id="btnCloseDeleteForm" class="close-button">
+        <h1>Вы уверены что хотите удалить документ <span style="display: inline; font-weight: bold;" id="deleteDocName"></span>?</h1>
+
+        <button type="button" class="form-button" onclick="confirmDelete();" id="deleteConfirm">Удалить документ</button>
+    </div>
+</div>
+  {{/if}}
+
   <script>
     document.addEventListener("DOMContentLoaded", function() {
 
@@ -411,6 +424,45 @@
         });
     });
 
+    {{#if IsAdmin}}
+
+    function deleteDoc(id) {
+              $("#deleteDocName").text($(`#doc-name-${id}`).text())
+              $('#deletedocument-form-popup-bg').addClass('is-visible');
+              $('#deleteConfirm').attr('onclick', `confirmDelete(${id})`);
+            }
+
+    $(document).ready(function($) {
+      
+            $('#deletedocument-form-popup-bg').on('click', function(event) {
+                if ($(event.target).is('#deletedocument-form-popup-bg') || $(event.target).is('#btnCloseDeleteForm')) {
+                event.preventDefault();
+                $(this).removeClass('is-visible');
+                }
+            });
+
+          });
+
+          function confirmDelete(id) {
+            $.ajax({
+              url: API_SERVER + "/document?id=" + id, 
+              method: "DELETE",
+              headers: {
+                  Authorization: getCookie("token"),
+                },
+              success: function(response) {
+                location.reload();
+                },
+                error: function() {
+                  alert("Произошла ошибка при запросе к серверу.");
+                }
+            });
+              
+            }
+
+      {{/if}}
+
+
 
             
     </script>
diff --git a/static/templates/project/project.html b/static/templates/project/project.html
index dae4beb..bd33ac2 100644
--- a/static/templates/project/project.html
+++ b/static/templates/project/project.html
@@ -12,6 +12,8 @@
   <script src="https://cdn.jsdelivr.net/npm/js-circle-progress/dist/circle-progress.min.js" type="module"></script>
   <script>
     const API_SERVER = "{{API_SERVER}}";
+    const isAdmin = {{IsAdmin}};
+    const isFull = false;
   </script>
   <script type="module">
     import { minidenticonSvg } from 'https://cdn.jsdelivr.net/npm/minidenticons@4.2.0/minidenticons.min.js'
@@ -304,7 +306,7 @@
                         </div>
                         <div class="header-name">
                             <h1>Оплата проекта</h1>
-                            <h2>последние 3 транзакции</h2>
+                            <h2>последние 2 транзакции</h2>
                         </div>
                     </div>
 
diff --git a/static/templates/project/settings/payment.html b/static/templates/project/settings/payment.html
index 01bad47..0d62741 100644
--- a/static/templates/project/settings/payment.html
+++ b/static/templates/project/settings/payment.html
@@ -458,7 +458,6 @@
       location.reload();
       },
       error: function() {
-        // Обработка ошибки при запросе к серверу
         alert("Произошла ошибка при запросе к серверу.");
       }
   });
diff --git a/static/templates/user/settings.html b/static/templates/user/settings.html
index ca35ebf..671ad23 100644
--- a/static/templates/user/settings.html
+++ b/static/templates/user/settings.html
@@ -181,7 +181,7 @@
             <div class="setting-top">
               <h1>Пароль</h1>
               <h2>Если хотите изменить пароль, укажите новый ниже</h2>
-              <input oninput="handlePasswordChange(this)" id="password-input" type="password" required>
+              <input oninput="handlePasswordChange(this)" id="password-input" type="password" autocomplete="new-password" required>
             </div>
             <div class="setting-bottom">
               <h2>Используйте минимум 5 символов.</h2>