From a95a859f1e48dd68f869990c5b496850187d9cfe Mon Sep 17 00:00:00 2001
From: abdu <abdukiran@gmail.com>
Date: Sat, 12 Oct 2024 22:30:21 +0200
Subject: [PATCH] add tabs for completed and active todos
---
frontend/src/components/CustomListElement.vue | 34 +++++++++++++--
frontend/src/components/MainPage.vue | 41 +++++++++++--------
2 files changed, 54 insertions(+), 21 deletions(-)
diff --git a/frontend/src/components/CustomListElement.vue b/frontend/src/components/CustomListElement.vue
index 222bbf9..b664619 100644
--- a/frontend/src/components/CustomListElement.vue
+++ b/frontend/src/components/CustomListElement.vue
@@ -10,6 +10,10 @@ export default {
type: String,
required: true
},
+ completed: {
+ type: Boolean,
+ required: true,
+ },
customClass: {
type: String,
default: ''
@@ -27,8 +31,8 @@ export default {
<div class="list-item-description mb-0">{{ description }}</div>
<!-- Right-side badge -->
- <div class="list-item-badge">
- <b-badge variant="primary">test</b-badge>
+ <div @click="alert('Test')" :class="{'custom-badge-not-completed': !completed, 'custom-badge-completed': completed}">
+ {{completed === true ? 'completed' : 'mark as completed'}}
</div>
</div>
</template>
@@ -57,10 +61,34 @@ export default {
font-size: 1.3rem;
}
-.list-item-badge {
+.custom-badge-completed {
position: absolute;
right: 10px;
top: 50%;
+ padding-left: 20px;
+ padding-right: 20px;
transform: translateY(-50%); /* Vertically center the badge */
+ background-color: #92ca19;
+ border: 1px #7eb900 solid;
+ border-radius: 15px;
+}
+
+.custom-badge-not-completed {
+ position: absolute;
+ right: 10px;
+ top: 50%;
+ padding-left: 20px;
+ padding-right: 20px;
+ transform: translateY(-50%); /* Vertically center the badge */
+ background-color: #ffd133;
+ border: 1px #caa219 solid;
+ border-radius: 15px;
+ color: black;
+}
+
+.custom-badge-not-completed:hover {
+ background-color: #caa219;
+ border: 1px #ffd133 solid;
+ color: white;
}
</style>
diff --git a/frontend/src/components/MainPage.vue b/frontend/src/components/MainPage.vue
index 8f65ed7..7a5a38a 100644
--- a/frontend/src/components/MainPage.vue
+++ b/frontend/src/components/MainPage.vue
@@ -100,15 +100,15 @@ export default {
}
</script>
-<template class="h-100">
+<template class="h100">
<div class="h-100">
<b-container class="h-100" fluid id="main-container">
- <b-button @click="signout">Log out</b-button>
+ <b-button variant="danger" class="mb-4" @click="signout">Log out</b-button>
<b-row class="h-100 justify-content-center align-items-center">
<b-col class="h-100">
<b-card class="shadow-lg w-75 h-75 mx-auto" border-variant="secondary" title="ToDo-App">
- <b-card-body class="h-100">
- <b-button variant="primary" @click="showAddModal = true">
+ <b-card-body class="h-75 d-flex flex-column">
+ <b-button class="mb-4" variant="primary" @click="showAddModal = true">
Hinzufügen
</b-button>
<b-modal v-model="showAddModal" title="Neuen Namen hinzufügen" @ok="addTodo" hide-header id="showAddModal">
@@ -119,19 +119,28 @@ export default {
<b-form-input v-model="todo.description" placeholder="Beschreibung eingeben"></b-form-input>
</b-form-group>
</b-modal>
- <ul class="list-group mt-3" v-if="items.length > 0">
- <li v-for="(item, index) in items" :key="index" class="list-group-item" @click="showDetails(item)">
- <CustomListElement :title="item.title" :description="item.description"></CustomListElement>
- </li>
- </ul>
- <p v-else class="text-muted text-center">No Todos. Click the button above to add new todos.</p>
+ <b-tabs content-class="mt-2">
+ <b-tab title="Active ToDos">
+ <ul class="list-group mt-3 h-75" v-if="items.length > 0">
+ <li v-for="(item, index) in items" :key="index" class="list-group-item" @click="showDetails(item)">
+ <CustomListElement v-if="!item.completed" :title="item.title" :description="item.description" :completed="item.completed"></CustomListElement>
+ </li>
+ </ul>
+ <p v-else class="text-muted text-center">No Todos. Click the button above to add new todos.</p>
+ </b-tab>
+ <b-tab title="Completed ToDos">
+ <ul class="list-group mt-3 h-75" v-if="items.length > 0">
+ <li v-for="(item, index) in items" :key="index" class="list-group-item" @click="showDetails(item)">
+ <CustomListElement v-if="item.completed" :title="item.title" :description="item.description" :completed="item.completed"></CustomListElement>
+ </li>
+ </ul>
+ <p v-else class="text-muted text-center">No Todos. Click the button above to add new todos.</p>
+ </b-tab>
+ </b-tabs>
<b-modal v-model="showDetailsModal" title="Details" hide-header id="showDetailsModal">
<p>{{ selectedItem }}</p>
</b-modal>
</b-card-body>
- <b-card-footer>
- © Jan Schnaidt & Abdullah Kiran, 2024
- </b-card-footer>
</b-card>
</b-col>
</b-row>
@@ -151,12 +160,8 @@ html, body {
overflow-y: auto;
}
-li {
- border: 10px black solid;
-}
-
.list-group-item {
- border: 10px gray solid;
+ border: 1px gray solid;
border-radius: 25px;
}
--
GitLab