totole/build-gmail-clone-with-vue-3
1
0
Fork 0
mirror of https://github.com/kevin-DL/build-gmail-clone-with-vue-3.git synced 2026-01-16 21:04:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

Disable buttons that won't do anyhing

Browse Source
This commit is contained in:
Jeffrey Biles
2020-03-18 01:19:52 -07:00
parent e448b4b7cc
commit 2c13f9e8e8
1 changed files with 12 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/BulkActionBar.vue
View File

@@ -1,12 +1,12 @@
<template>
<div class="bulk-action-bar">
<span v-if="!allSelected && emailSelection.emails.size > 0">-</span> <!-- later on this minus sign will be in the checkbox, as it is in gmail -->
<input type="checkbox" :checked="allSelected" @click="bulkSelect">
<span v-if="!allAreSelected && numberSelected > 0">-</span> <!-- later on this minus sign will be in the checkbox, as it is in gmail -->
<input type="checkbox" :checked="allAreSelected" @click="bulkSelect">
<button @click="emailSelection.markRead()">
<button @click="emailSelection.markRead()" :disabled="Array.from(emailSelection.emails).every(e => e.read)">
Mark Read
</button>
<button @click="emailSelection.markUnread()">
<button @click="emailSelection.markUnread()" :disabled="Array.from(emailSelection.emails).every(e => !e.read)">
Mark Unread
</button>
</div>
@@ -19,17 +19,21 @@
export default {
setup({emails}){
let {emailSelection} = useEmailSelection();
let allSelected = computed(() => {
return emails.length == emailSelection.emails.size;
let numberSelected = computed(() => {
return emailSelection.emails.size;
})
let allAreSelected = computed(() => {
return emails.length == numberSelected;
})
let bulkSelect = function(){
if(allSelected.value) {
if(allAreSelected.value) {
emailSelection.clear();
} else {
emailSelection.addMultiple(emails)
}
}
return { emailSelection, allSelected, bulkSelect }
return { emailSelection, allAreSelected, bulkSelect, numberSelected }
},
props: {
emails: {