Skip to content
Snippets Groups Projects
Commit 00c2bee9 authored by abdu's avatar abdu
Browse files

add status (running, completed) and delete button

parent 86264a5a
No related branches found
No related tags found
No related merge requests found
...@@ -30,10 +30,6 @@ export default { ...@@ -30,10 +30,6 @@ export default {
<!-- Bottom-left description --> <!-- Bottom-left description -->
<div class="list-item-description mb-0">{{ description }}</div> <div class="list-item-description mb-0">{{ description }}</div>
<!-- Right-side badge -->
<div @click="alert('Test')" :class="{'custom-badge-not-completed': !completed, 'custom-badge-completed': completed}">
{{completed === true ? 'completed' : 'mark as completed'}}
</div>
</div> </div>
</template> </template>
......
...@@ -119,16 +119,32 @@ export default { ...@@ -119,16 +119,32 @@ export default {
<b-tabs content-class="mt-2"> <b-tabs content-class="mt-2">
<b-tab title="Active ToDos"> <b-tab title="Active ToDos">
<ul class="list-group mt-3 h-75" v-if="items.length > 0"> <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)"> <li v-for="(item, index) in items" :key="index" class="list-group-item">
<CustomListElement :title="item.title" :description="item.description" :completed="item.completed"></CustomListElement> <div class="d-flex justify-content-between align-items-center w-100">
<div class="flex-grow-1">
<CustomListElement :title="item.title" :description="item.description" :completed="item.completed"></CustomListElement>
</div>
<div class="badge-container">
<div class="custom-badge-not-completed">running</div>
</div>
<b-button variant="danger" @click.stop="deleteItem(index)">Delete</b-button>
</div>
</li> </li>
</ul> </ul>
<p v-else class="text-muted text-center">No Todos. Click the button above to add new todos.</p> <p v-else class="text-muted text-center">No Todos. Click the button above to add new todos.</p>
</b-tab> </b-tab>
<b-tab title="Completed ToDos"> <b-tab title="Completed ToDos">
<ul class="list-group mt-3 h-75" v-if="completedItems.length > 0"> <ul class="list-group mt-3 h-75" v-if="completedItems.length > 0">
<li v-for="(item, index) in completedItems" :key="index" class="list-group-item" @click="showDetails(item)"> <li v-for="(item, index) in completedItems" :key="index" class="list-group-item">
<CustomListElement :title="item.title" :description="item.description" :completed="item.completed"></CustomListElement> <div class="d-flex justify-content-between align-items-center w-100">
<div class="flex-grow-1">
<CustomListElement :title="item.title" :description="item.description" :completed="item.completed"></CustomListElement>
</div>
<div class="badge-container">
<div class="custom-badge-completed">completed</div>
</div>
<b-button variant="danger" @click.stop="deleteItem(index)">Delete</b-button>
</div>
</li> </li>
</ul> </ul>
<p v-else class="text-muted text-center">No Todos. Click the button above to add new todos.</p> <p v-else class="text-muted text-center">No Todos. Click the button above to add new todos.</p>
...@@ -158,11 +174,45 @@ html, body { ...@@ -158,11 +174,45 @@ html, body {
} }
.list-group-item { .list-group-item {
display: flex;
justify-content: space-between;
align-items: center;
border: 1px gray solid; border: 1px gray solid;
border-radius: 25px; border-radius: 25px;
width: 100%;
} }
.list-group-item:hover { .list-group-item:hover {
background-color: #e9ecef; background-color: #e9ecef;
} }
.flex-grow-1 {
flex-grow: 1;
}
.badge-container {
display: flex;
align-items: center;
justify-content: center;
margin-right: 10px;
}
.custom-badge-completed,
.custom-badge-not-completed {
padding: 5px;
margin-left: 10px; /* Add some space between the badge and the element before it */
border-radius: 15px;
}
.custom-badge-completed {
background-color: #92ca19;
border: 1px #7eb900 solid;
}
.custom-badge-not-completed {
background-color: #ffd133;
border: 1px #caa219 solid;
color: black;
}
</style> </style>
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment