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-11 18:54:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

Bare app - remove everything except styling, db.json, and packages

Browse Source
This commit is contained in:
Jeffrey Biles
2020-03-29 01:38:36 -07:00
parent 9c1b2a6ecc
commit 11c6ac7bad
10 changed files with 1 additions and 436 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/App.vue
View File

@@ -1,44 +1,13 @@
<template>
<div id="app">
<button @click="selectScreen('MailScreenInbox');"
:disabled="screenName == 'MailScreenInbox'">
Inbox View
</button>
<button @click="selectScreen('MailScreenArchived')"
:disabled="screenName == 'MailScreenArchived'">
Archived View
</button>
<suspense>
<template #default>
<MailScreen :screenName="screenName" />
</template>
<template #fallback>
<p>Loading...</p>
</template>
</suspense>
</div>
</template>
<script>
import MailScreen from '@/components/MailScreen.vue';
import useEmailSelection from './composition/useEmailSelection';
import { ref } from 'vue'
export default {
name: 'App',
components: {
MailScreen
},
setup(){
let screenName = ref('MailScreenInbox');
let {emailSelection} = useEmailSelection();
let selectScreen = function(newScreen){
screenName.value = newScreen;
emailSelection.clear();
}
return {screenName, selectScreen}
}
name: 'App'
};
</script>

71
src/components/BulkActionBar.vue
View File

@@ -1,71 +0,0 @@
<template>
<div class="bulk-action-bar">
<span class="checkbox">
<input type="checkbox" :checked="allAreSelected" @click="bulkSelect">
<span v-if="!allAreSelected && numberSelected > 0">-</span> <!-- later on this minus sign will be in the checkbox, as it is in gmail -->
</span>
<span class="buttons">
<button @click="emailSelection.markRead()"
:disabled="Array.from(emailSelection.emails).every(e => e.read)"
v-if="actions.includes('markRead')">
Mark Read
</button>
<button @click="emailSelection.markUnread()"
:disabled="Array.from(emailSelection.emails).every(e => !e.read)"
v-if="actions.includes('markUnread')">
Mark Unread
</button>
<button @click="emailSelection.archive()"
:disabled="numberSelected == 0"
v-if="actions.includes('archive')">
Archive
</button>
<button @click="emailSelection.moveToInbox()"
:disabled="numberSelected == 0"
v-if="actions.includes('moveToInbox')">
Move to Inbox
</button>
</span>
</div>
</template>
<script>
import useEmailSelection from '../composition/useEmailSelection';
import { computed } from 'vue';
export default {
setup({emails}){
let {emailSelection} = useEmailSelection();
let numberSelected = computed(() => {
return emailSelection.emails.size;
})
let allAreSelected = computed(() => {
return emails.length == numberSelected.value;
})
let bulkSelect = function(){
if(allAreSelected.value) {
emailSelection.clear();
} else {
emailSelection.addMultiple(emails)
}
}
return { emailSelection, allAreSelected, bulkSelect, numberSelected }
},
props: {
emails: {
type: Array,
default: []
},
actions: {
type: Array,
default: ['markRead', 'markUnread']
}
}
}
</script>
<style scoped>
</style>

35
src/components/MailScreen.vue
View File

@@ -1,35 +0,0 @@
<template>
<div>
<component :is="screenName" :emails="emails.sort((e1, e2) => e1.sentAt < e2.sentAt ? 1 : -1)" />
</div>
</template>
<script>
import MailScreenArchived from '@/components/MailScreenArchived.vue';
import MailScreenInbox from '@/components/MailScreenInbox.vue';
import { ref } from 'vue';
import axios from 'axios';
export default {
async setup(){
let {data} = await axios.get('http://localhost:3000/emails');
let emails = ref(data);
return {emails};
},
components: {
MailScreenArchived,
MailScreenInbox
},
props: {
screenName: {
type: String,
required: true
}
}
}
</script>
<style scoped>
</style>

34
src/components/MailScreenArchived.vue
View File

@@ -1,34 +0,0 @@
<template>
<h1>VMail Archives</h1>
<BulkActionBar :emails="archivedEmails" :actions="['markRead', 'markUnread', 'moveToInbox']" />
<MailTable :emails="archivedEmails" />
</template>
<script>
import MailTable from '@/components/MailTable.vue';
import BulkActionBar from '@/components/BulkActionBar.vue';
export default {
components: {
MailTable,
BulkActionBar
},
computed: {
archivedEmails(){
return this.emails.filter(e => e.archived)
}
},
props: {
emails: {
type: Array,
required: true
}
}
}
</script>
<style scoped>
</style>

34
src/components/MailScreenInbox.vue
View File

@@ -1,34 +0,0 @@
<template>
<h1>VMail Inbox</h1>
<BulkActionBar :emails="inboxEmails" :actions="['markRead', 'markUnread', 'archive']" />
<MailTable :emails="inboxEmails" />
</template>
<script>
import MailTable from '@/components/MailTable.vue';
import BulkActionBar from '@/components/BulkActionBar.vue';
export default {
components: {
MailTable,
BulkActionBar
},
computed: {
inboxEmails(){
return this.emails.filter(e => !e.archived)
}
},
props: {
emails: {
type: Array,
required: true
}
}
}
</script>
<style scoped>
</style>

86
src/components/MailTable.vue
View File

@@ -1,86 +0,0 @@
<template>
<table class="mail-table">
<tbody>
<tr v-for="email in emails"
:key="email.id"
:class="[email.read ? 'read' : '']"
@click="openEmail(email, true)"
class="clickable">
<td>
<input type="checkbox"
:checked="emailSelection.emails.has(email)"
@click="emailSelection.toggle(email)">
</td>
<td>{{email.from}}</td>
<td>
<p><strong>{{email.subject}}</strong> - {{email.body}}</p>
</td>
<td class="date">{{format(new Date(email.sentAt), 'MMM do yyyy')}}</td>
</tr>
</tbody>
<ModalView v-if="!!openedEmail" :closeModal="() => {openedEmail = null;}">
<MailView :email="openedEmail"
@changeEmail="(args) => changeEmail(emails, args)"
@openEmail="openEmail" />
</ModalView>
</table>
</template>
<script>
import { format } from 'date-fns'
import useEmailSelection from '../composition/useEmailSelection';
import MailView from '@/components/MailView.vue';
import ModalView from '@/components/ModalView.vue';
import { ref } from 'vue';
import axios from 'axios';
export default {
setup({emails}){
let {emailSelection} = useEmailSelection();
let openedEmail = ref();
let openEmail = function(email) {
openedEmail.value = email;
if(email) {
openedEmail.value.read = true;
axios.put(`http://localhost:3000/emails/${openedEmail.value.id}`, openedEmail.value)
}
}
function changeEmail(emails, {amount, toggleArchive, closeModal, toggleRead}){
let index = emails.findIndex(e => e == openedEmail.value);
if(toggleArchive) { emails[index].archived = !emails[index].archived }
if(toggleRead) { emails[index].read = !emails[index].read }
if(toggleArchive || toggleRead) {
axios.put(`http://localhost:3000/emails/${emails[index].id}`, emails[index])
}
if(closeModal) { openedEmail.value = null; return null; }
if(amount) {
openEmail(emails[index + amount])
}
}
return {format, emailSelection, openedEmail, openEmail, changeEmail}
},
props: {
emails: {
type: Array,
default: []
}
},
components: {
MailView,
ModalView
}
}
</script>
<style scoped>
</style>

57
src/components/MailView.vue
View File

@@ -1,57 +0,0 @@
<template>
<div class="email-display" v-if="email">
<div class="toolbar">
<button @click="toggleArchive">{{email.archived ? 'Move to Inbox (e)' : 'Archive (e)'}}</button>
<button @click="goNewer">Newer (k)</button>
<button @click="goOlder">Older (j)</button>
<button @click="toggleRead()">Mark {{email.read ? 'Unread' : 'Read'}}</button>
</div>
<h2 class="mb-0">Subject: <strong>{{email.subject}}</strong></h2>
<div><em>From {{email.from}} on {{format(new Date(email.sentAt), 'MMM do yyyy')}}</em></div>
<div v-html="marked(email.body)" />
</div>
</template>
<script>
import marked from 'marked';
import { useKeydown } from '../composition/useKeydown';
import { format } from 'date-fns';
export default {
setup({}, {emit}) {
let goNewer = () => emit('changeEmail', {amount: -1})
let goOlder = () => emit('changeEmail', {amount: 1})
let goNewerAndArchive = () => emit('changeEmail', {amount: -1, toggleArchive: true})
let goOlderAndArchive = () => emit('changeEmail', {amount: 1, toggleArchive: true})
let toggleArchive = () => emit('changeEmail', {toggleArchive: true, closeModal: true})
let toggleRead = () => { emit('changeEmail', {toggleRead: true}) }
useKeydown([
{key: 'k', fn: goNewer},
{key: 'j', fn: goOlder},
{key: '[', fn: goNewerAndArchive},
{key: ']', fn: goOlderAndArchive},
{key: 'e', fn: toggleArchive}
])
return {
toggleArchive,
goNewer,
goOlder,
toggleRead,
format,
marked,
}
},
props: {
email: {
type: Object
},
}
}
</script>
<style scoped>
</style>

28
src/components/ModalView.vue
View File

@@ -1,28 +0,0 @@
<template>
<div class="modal">
<div class="overlay" @click="closeModal()"></div>
<div class="modal-card">
<slot :closeModal="closeModal" />
</div>
</div>
</template>
<script>
import { useKeydown } from '../composition/useKeydown';
export default {
setup({closeModal}, context){
useKeydown([{key: 'Escape', fn: closeModal}])
},
props: {
closeModal: {
type: Function,
required: true
}
}
}
</script>
<style scoped>
</style>

39
src/composition/useEmailSelection.js
View File

@@ -1,39 +0,0 @@
import { ref, reactive } from 'vue';
let emails = new Set();
export const useEmailSelection = function(){
let emailSelection = reactive({
emails: emails,
toggle(id) {
if(this.emails.has(id)) {
this.emails.delete(id)
} else {
this.emails.add(id);
}
},
clear(){
this.emails.clear();
},
addMultiple(emails) {
emails.forEach(email => {
this.emails.add(email)
})
},
forSelected(fn){
this.emails.forEach(email => {
fn(email)
})
},
markRead(){ this.forSelected(e => e.read = true )},
markUnread(){ this.forSelected(e => e.read = false )},
archive(){ this.forSelected(e => e.archived = true); this.clear();},
moveToInbox(){ this.forSelected(e => e.archived = false); this.clear();}
})
return {
emailSelection,
}
}
export default useEmailSelection;

20
src/composition/useKeydown.js
View File

@@ -1,20 +0,0 @@
import { onMounted, onBeforeUnmount } from 'vue';
import { fr } from 'date-fns/locale';
export const useKeydown = function(keyCombos) {
let onkey = function(event) {
let kc = keyCombos.find(({key, fn}) => key == event.key )
if(kc) {
kc.fn()
}
}
onMounted(()=> {
window.addEventListener('keydown', onkey);
})
onBeforeUnmount(()=> {
window.removeEventListener('keydown', onkey);
})
}
export default useKeydown;