From 98f58c88e3a1d2ade5fda18389e49b49eaae489e Mon Sep 17 00:00:00 2001
From: abdu <abdukiran@gmail.com>
Date: Sat, 19 Oct 2024 17:27:49 +0200
Subject: [PATCH] add signout modal, update signout button logic, update delete
button logic
---
frontend/src/components/MainPage.vue | 32 ++++++++++++++++++++++------
1 file changed, 25 insertions(+), 7 deletions(-)
diff --git a/frontend/src/components/MainPage.vue b/frontend/src/components/MainPage.vue
index 3133c86..3a8fbc5 100644
--- a/frontend/src/components/MainPage.vue
+++ b/frontend/src/components/MainPage.vue
@@ -38,6 +38,11 @@ export default {
}
},
methods: {
+ setToDoIdForDeleteModal(todoId){
+ console.log(todoId)
+ this.todoIdForDeleteModal = todoId
+ console.log(this.todoIdForDeleteModal)
+ },
async validateSession(){
if(this.$route.name === 'main') {
let url = "http://localhost:9876/user/validateSession"
@@ -105,7 +110,7 @@ export default {
headers: {
"Content-Type": "application/json"
},
- credentials: 'include', // Ensure credentials are included
+ credentials: 'include',
})
if(response.status === 204) {
@@ -164,7 +169,7 @@ export default {
</b-button>
</b-col>
<b-col>
- <b-button class="mb-4" variant="danger" @click="signout">
+ <b-button v-b-modal.signout-modal class="mb-4" variant="danger">
Log out
</b-button>
</b-col>
@@ -180,7 +185,7 @@ export default {
<div class="badge-container">
<b-button variant="link" @click="setTodoComplete(item.todoId)" class="custom-badge-not-completed">mark as completed</b-button>
</div>
- <b-button variant="danger" @click.stop="deleteTodo(item.todoId)">Delete</b-button>
+ <b-button v-b-modal.delete-modal variant="danger" @click.stop="setToDoIdForDeleteModal(item.todoId)">Delete</b-button>
</div>
</li>
</ul>
@@ -196,7 +201,7 @@ export default {
<div class="badge-container">
<div class="custom-badge-completed">completed</div>
</div>
- <b-button v-b-modal.delete-modal variant="danger" @click="sendInfoToModal(item.todoId)">Delete</b-button>
+ <b-button v-b-modal.delete-modal variant="danger" @click="setToDoIdForDeleteModal(item.todoId)">Delete</b-button>
</div>
</li>
</ul>
@@ -205,7 +210,7 @@ export default {
</b-tabs>
<!-- details modal -->
- <b-modal v-model="showDetailsModal" title="Details" hide-header id="showDetailsModal">
+ <b-modal v-model="showDetailsModal" title="Details" hide-header-close id="showDetailsModal">
<h3>Title: {{ selectedItem.title }}</h3>
<p style="overflow-wrap: break-word"> Description: <br> {{ selectedItem.description }}</p>
<div>Status: <br>
@@ -213,11 +218,14 @@ export default {
</div>
</b-modal>
- <b-modal @ok="deleteTodo(this.todoIdForDeleteModal)" hie-header id="delete-modal">
- <p>{{this.todoIdForDeleteModal}}</p>
+ <!-- delete modal -->
+ <b-modal title="Delete ToDo" @ok="deleteTodo(todoIdForDeleteModal)" hide-header-close id="delete-modal">
+ <p>Are you sure you want to delete this ToDo?</p>
</b-modal>
<b-modal v-model="showAddModal" title="add title" @ok="addTodo" hide-header id="showAddModal">
+ <!-- add modal -->
+ <b-modal v-model="showAddModal" title="add title" @ok="addTodo" hide-header-close id="showAddModal">
<b-form-group label="Title">
<b-form-input required v-model="todo.title" placeholder="todo title"></b-form-input>
</b-form-group>
@@ -225,6 +233,16 @@ export default {
<b-form-input v-model="todo.description" placeholder="todo description"></b-form-input>
</b-form-group>
</b-modal>
+
+ <!-- signout modal -->
+ <b-modal
+ title="Log out"
+ @ok="signout"
+ hide-header-close
+ id="signout-modal"
+ >
+ <p>Are you sure you want to log out?</p>
+ </b-modal>
</b-card-body>
</b-card>
</b-col>
--
GitLab