feat: delete chat - backend, frontend

plugins/tps/birzha/components/Messages.php

@@ -122,4 +122,26 @@ class Messages extends ComponentBase
             'latest_message_area' => $this->renderPartial('@latest_message')
         ];
     }
+
+    public function onDeleteChat()
+    {
+        $chatRoomId = Input::get('chatroom_id');
+
+        $chatroom = Chatroom::with(['messages', 'users'])->find($chatRoomId);
+        if($chatroom) {
+            \DB::beginTransaction();
+
+            try {
+                $chatroom->messages()->delete();
+                $chatroom->users()->detach();
+                $chatroom->delete();
+            } catch (\Throwable $th) {
+                return \Redirect::to('/error');
+            }
+
+            \DB::commit();
+        }
+
+        return \Redirect::back();
+    }
 }

plugins/tps/birzha/components/messages/default.htm

@@ -54,6 +54,9 @@
                                 {{chatroom.count_unread_messages}}
                             </div>
                         {% endif %}
+                        <button type="button" class="delete" onclick="event.stopPropagation(); deleteChat({{ chatroom.id }})">
+                            <img src="{{ 'assets/images/svg/trash.svg'|theme }}" alt="delete-icon">
+                        </button>
                     </a>
                     {% endfor %}
                     
@@ -79,6 +82,27 @@
 </section>
 <!-- Chat end ======================================================== -->
 
+<!--Delete modal ========================================================= -->
+<div class="modal" id="delete-modal">
+    <div class="modal_inner">
+        <form data-request="onDeleteChat">
+            <h2 class="modal_title">
+                {{ 'auth.messages_modal_question'|_ }}
+            </h2>
+            <input type="hidden" value="" name="chatroom_id">
+            <div class="modal_btn-box">
+                <button class="reset-form" type="reset">
+                    {{ 'auth.modal_no'|_ }}
+                </button>
+                <button class="accept-form" type="submit">
+                    {{ 'auth.modal_yes'|_ }}
+                </button>
+            </div>
+        </form>
+    </div>
+</div>
+<!--Delete modal end ===================================================== -->
+
 {% put scripts %}
     <script>
         function showMessages(data) {

shablon/chat.html

@@ -1094,8 +1094,8 @@
                         Yes!
                     </button>
                 </div>
-            </div>
             </form>
+        </div>
     </div>
     <!--Delete modal end ===================================================== -->
 

shablon/css/main.css

@@ -3515,6 +3515,7 @@ li {
     height: 20px;
     display: none;
     z-index: 2;
+    background-color: transparent;
 }
 
 .delete:hover {
@@ -3568,6 +3569,7 @@ li {
     -webkit-box-orient: vertical;
     overflow: hidden;
     text-overflow: ellipsis;
+    word-break: break-word;
 }
 
 .person_message {

shablon/js/main.js

@@ -260,14 +260,23 @@ if (phone_box != undefined) {
     })
 }
 
-if (delete_btn != undefined) {
-    delete_btn.forEach(x => {
-        x.addEventListener('click', function () {
-            sleep(2).then(() => {
-                delete_modal.classList.add('active');
-            });
-        });
-    })
+// if (delete_btn != undefined) {
+//     delete_btn.forEach(x => {
+//         x.addEventListener('click', function (event) {
+//             event.stopPropagation()
+//             sleep(2).then(() => {
+//                 delete_modal.classList.add('active');
+//             });
+//         });
+//     })
+// }
+
+function deleteChat(chatroomId) {
+
+    sleep(2).then(() => {
+        delete_modal.classList.add('active');
+        $('#delete-modal input[name="chatroom_id"]').val(chatroomId)
+    });
 }
 
 if (iti__country != undefined) {

themes/birzha/assets/css/main.css

@@ -3502,6 +3502,53 @@ li {
     background: #c9c9c9;
 }
 
+.person:hover .person_message {
+    width: calc(100% - 50px);
+}
+
+.delete {
+    cursor: pointer;
+    position: absolute;
+    bottom: 20px;
+    right: 20px;
+    width: 20px;
+    height: 20px;
+    display: none;
+    z-index: 2;
+    background-color: transparent;
+}
+
+.delete:hover {
+    animation: trash .5s linear infinite;
+}
+
+@keyframes trash {
+    0% {
+        transform: rotate(-7deg);
+    }
+
+    50% {
+        transform: rotate(7deg);
+    }
+
+    100% {
+        transform: rotate(-7deg);
+    }
+}
+
+.delete img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    -o-object-fit: contain;
+    pointer-events: none;
+}
+
+.person:hover .delete {
+    display: block;
+}
+
+
 .person:last-child {
     border-bottom: none;
 }
@@ -3516,6 +3563,13 @@ li {
     font-weight: 700;
     line-height: 1.3;
     margin-bottom: 10px;
+
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    word-break: break-word;
 }
 
 .person_message {
@@ -3749,6 +3803,81 @@ li {
 
 /* Chat end ======================================= */
 
+/* Modal ================================ */
+
+.modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, .5);
+
+    display: none;
+    z-index: 20;
+}
+
+.modal.active {
+    display: block;
+}
+
+.modal_inner {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    -moz-transform: translate(-50%, -50%);
+    -ms-transform: translate(-50%, -50%);
+    -o-transform: translate(-50%, -50%);
+    -webkit-transform: translate(-50%, -50%);
+    width: calc(100% - 80px);
+    max-width: 400px;
+    background: #fff;
+    border-radius: 10px;
+    padding: 30px;
+}
+
+.modal_title {
+    font-size: 20px;
+    font-weight: 600;
+    line-height: 1.4;
+    color: var(--blue);
+    margin-bottom: 30px;
+    text-align: center;
+}
+
+.modal_btn-box {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    margin: 0 -10px;
+}
+
+.modal_btn-box button {
+    width: calc(50% - 34px);
+    margin: 0 10px;
+    border: 1px solid #eeee;
+    border-radius: 5px;
+    cursor: pointer;
+    padding: 7px;
+    transition: all .1s linear;
+}
+
+.reset-form:hover {
+    background: rgba(255, 0, 0, 0.795);
+    color: #fff;
+}
+
+.accept-form:hover {
+    background: #003097c0;
+    color: #fff;
+}
+
+
+
+
+/* Modal end ================================ */
+
 
 /* Message ======================================= */
 
@@ -4796,7 +4925,6 @@ li {
     }
 }
 
-
 @media(max-width: 1000px) {
     :root {
         --item-width: calc(50% - 40px)
@@ -5824,6 +5952,19 @@ li {
     .add_post_box-item {
         width: calc(50% - 10px);
     }
+
+    /* Modal ========================= */
+    .person_message {
+        width: calc(100% - 40px);
+    }
+
+    .delete {
+        bottom: 10px;
+        right: 16px;
+        width: 16px;
+        height: 16px;
+    }
+
 }
 
 @media(max-width: 600px) {
@@ -6488,4 +6629,13 @@ li {
         height: unset;
     }
 
+    /* Modal ============================ */
+    .modal_title {
+        font-size: 18px;
+    }
+
+    .modal_btn-box button {
+        width: calc(50% - 15px);
+    }
+
 }

themes/birzha/assets/images/svg/trash.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#f00" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2">
+	<polyline points="3 6 5 6 21 6">
+	</polyline>
+	<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2">
+	</path>
+	<line x1="10" y1="11" x2="10" y2="17">
+	</line>
+	<line x1="14" y1="11" x2="14" y2="17">
+	</line>
+</svg>

themes/birzha/assets/js/main.js

@@ -49,6 +49,8 @@ let iti__country = document.querySelectorAll('.iti__country');
 let iti__country_list = document.querySelectorAll('.iti__country-list');
 
 
+let delete_btn = document.querySelectorAll('.delete');
+let delete_modal = document.querySelector('#delete-modal');
 
 
 //  Fixed header ====================================
@@ -126,6 +128,12 @@ window.onclick = function (e) {
         }
     }
 
+    if (delete_modal != undefined) {
+        if (delete_modal.classList.contains('active')) {
+            delete_modal.classList.remove('active');
+        }
+    }
+
     // if (iti__country_list != undefined) {
     //     if (iti__country_list.classList.contains('active') && !e.target.closest('.phone_box')) {
     //         iti__country_list.classList.remove('active');
@@ -252,6 +260,25 @@ if (phone_box != undefined) {
     })
 }
 
+// if (delete_btn != undefined) {
+//     delete_btn.forEach(x => {
+//         x.addEventListener('click', function (event) {
+//             event.stopPropagation()
+//             sleep(2).then(() => {
+//                 delete_modal.classList.add('active');
+//             });
+//         });
+//     })
+// }
+
+function deleteChat(chatroomId) {
+
+    sleep(2).then(() => {
+        delete_modal.classList.add('active');
+        $('#delete-modal input[name="chatroom_id"]').val(chatroomId)
+    });
+}
+
 if (iti__country != undefined) {
     iti__country.forEach(x => {
         x.addEventListener('click', function () {

themes/birzha/config/lang.yaml

@@ -16,6 +16,9 @@ en:
   auth.no_my_announces: You have no active <br> ads at the moment.
   auth.messages: Messages
   auth.messages_no: There are no messages
+  auth.messages_modal_question: Are you sure you want to delete this chat?
+  auth.modal_yes: Yes!
+  auth.modal_no: No!
   auth.logout: Logout
   auth.add_announce: Add announcement
   auth.notifications: Notifications
@@ -162,6 +165,9 @@ ru:
   auth.no_my_announces: На данный момент <br> у вас нет активных объявлений.
   auth.messages: Сообщения
   auth.messages_no: Сообщений нет
+  auth.messages_modal_question: Вы действительно хотите удалить эту переписку?
+  auth.modal_yes: Да!
+  auth.modal_no: Нет!
   auth.logout: Выйти
   auth.add_announce: Добавить объявление
   auth.notifications: Уведомления
@@ -308,6 +314,9 @@ tm:
   auth.no_my_announces: Häzirki wagtda <br> işjeň mahabatyňyz ýok.
   auth.messages: Hatlar
   auth.messages_no: Hatlar ýok
+  auth.messages_modal_question: Siz hakykatdanam şu ýazyşygy pozmak isleýäňizmi?
+  auth.modal_yes: Hawa!
+  auth.modal_no: Ýok!
   auth.logout: Çykyş
   auth.add_announce: Bildiriş goş
   auth.notifications: Habarnamalar