Merge branch 'course-outline-start'

Author: Jeffrey Biles

db.json

@@ -11,10 +11,10 @@
     },
     {
       "id": 2,
-      "from": "jeffrey@vuescreencasts.com",
-      "subject": "Five new VueJS videos this week + new podcast episode",
-      "body": "I hope you've been enjoying the Vue 3 course I've been releasing with Vue Mastery!\n\nThis week on VueScreencasts.com we have a follow-up video that digs further into what we covered in this week's Vue Mastery lesson, I answer a question that five of you asked about last week's most popular video, and we start a new series with a very awesome library author.\n\nFinally, for your ears only: a new episode of Exploring the Vueniverse.",
-      "sentAt": "2020-05-03T18:25:43.511Z",
+      "from": "jeffrey@vuetraining.net",
+      "subject": "Learn by doing - Vue 3 Zero to Intermediate in 8 weeks",
+      "body": "Building projects is one of the most effective ways to learn - and _the_ most effective way _remember_ what you've learned - but it can be frustrating.\n\nThis 8-week course takes the pain out of 'learning by doing'.\n\nEach week we give you\n\n* a project that will grow your skills without overwhelming you\n* links to hand-picked resources, such as Vue Mastery videos, that share the knowledge you'll need for the project (no more useless rabbit holes)\n* answers to any and all questions you have while working\n* feedback on your completed code (so you're only learning good habits)\n\nOur instructors are standing by to answer your questions.\n\nReady to learn?",
+      "sentAt": "2020-05-20T18:25:43.511Z",
       "archived": false,
       "read": false
     },

package.json

@@ -12,14 +12,14 @@
     "core-js": "^3.6.4",
     "date-fns": "^2.11.0",
     "marked": "^0.8.1",
-    "vue": "^3.0.0-alpha.10"
+    "vue": "^3.0.0-beta.10"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^4.2.0",
-    "@vue/cli-service": "^4.2.0",
-    "@vue/compiler-sfc": "^3.0.0-alpha.10",
+    "@vue/cli-plugin-babel": "^4.3.0",
+    "@vue/cli-service": "^4.3.0",
+    "@vue/compiler-sfc": "^3.0.0-beta.10",
     "faker": "^4.1.0",
-    "vue-cli-plugin-vue-next": "^0.0.4",
+    "vue-cli-plugin-vue-next": "^0.1.2",
     "vue-template-compiler": "^2.6.11"
   }
 }

src/App.vue

@@ -1,43 +1,23 @@
 <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>
+  <div id="app">      
+    <Suspense>
       <template #default>
-        <MailScreen :screenName="screenName" />
+        <MailScreen />
       </template>
       <template #fallback>
-        <p>Loading...</p>
+        Loading...
       </template>
-    </suspense>
+    </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}
   }
 };
 </script>
@@ -66,6 +46,13 @@ button:disabled {
   cursor: auto;
 }
 
+button.selected {
+  cursor: auto;
+  color: black;
+  border-color: black;
+  border-width: 2px;
+}
+
 .clickable {
   cursor: pointer;
 }

src/components/BulkActionBar.vue

@@ -1,66 +1,77 @@
 <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 -->
+      <input type="checkbox" 
+             :checked="allAreSelected"
+             :class="[partialSelection ? 'partial-check' : '']"
+             @click="bulkSelect">
     </span>
 
     <span class="buttons">
       <button @click="emailSelection.markRead()"
-              :disabled="Array.from(emailSelection.emails).every(e => e.read)"
-              v-if="actions.includes('markRead')">
+              :disabled="Array.from(emailSelection.emails).every(e => e.read)">
         Mark Read
       </button>
       <button @click="emailSelection.markUnread()" 
-              :disabled="Array.from(emailSelection.emails).every(e => !e.read)"
-              v-if="actions.includes('markUnread')">
+              :disabled="Array.from(emailSelection.emails).every(e => !e.read)">
         Mark Unread
       </button>
-      <button @click="emailSelection.archive()" 
-              :disabled="numberSelected == 0"
-              v-if="actions.includes('archive')">
+      <button v-if="selectedScreen == 'inbox'"
+              @click="emailSelection.archive()" 
+              :disabled="numberSelected == 0">
         Archive
       </button>
-      <button @click="emailSelection.moveToInbox()"
-              :disabled="numberSelected == 0"
-              v-if="actions.includes('moveToInbox')">
+      <button v-else
+              @click="emailSelection.moveToInbox()" 
+              :disabled="numberSelected == 0">
         Move to Inbox
       </button>
     </span>
   </div>
 </template>
 
 <script>
-  import useEmailSelection from '../composition/useEmailSelection';
+  import { useEmailSelection } from '../composition/useEmailSelection';
   import { computed } from 'vue';
 
   export default {
-    setup({emails}){
-      let {emailSelection} = useEmailSelection();
+    setup(props){
+      let emailSelection = useEmailSelection();
+
       let numberSelected = computed(() => {
         return emailSelection.emails.size;
       }) 
       let allAreSelected = computed(() => {
-        return emails.length == numberSelected.value;
+        return props.emails.length == numberSelected.value && numberSelected.value !== 0;
+      })
+      let partialSelection = computed(() => {
+        return numberSelected.value > 0 && !allAreSelected.value;
       })
       
       let bulkSelect = function(){
         if(allAreSelected.value) {
           emailSelection.clear();
         } else {
-          emailSelection.addMultiple(emails)
+          emailSelection.addMultiple(props.emails)
         }
       }
-      return { emailSelection, allAreSelected, bulkSelect, numberSelected }
+
+      return { 
+        partialSelection, 
+        allAreSelected,
+        bulkSelect,
+        emailSelection,
+        numberSelected
+      }
     },
     props: {
       emails: {
         type: Array,
-        default: []
-      },
-      actions: {
-        type: Array,
-        default: ['markRead', 'markUnread']
+        required: true
+      }, 
+      selectedScreen: {
+        type: String,
+        required: true
       }
     }
   }

src/components/MailScreen.vue

@@ -1,30 +1,73 @@
 <template>
-  <div>
-    <component :is="screenName" :emails="emails.sort((e1, e2) => e1.sentAt < e2.sentAt ? 1 : -1)" />
-  </div>
+  <button @click="selectScreen('inbox');"
+          :class="[selectedScreen == 'inbox' ? 'selected' : '']">
+    Inbox View
+  </button>
+  <button @click="selectScreen('archive')" 
+          :class="[selectedScreen == 'archive' ? 'selected' : '']">
+    Archived View
+  </button>
+  
+  <h1>VMail {{capitalize(selectedScreen)}}</h1>
+
+  <BulkActionBar :emails="filteredEmails"
+                 :selectedScreen="selectedScreen" />
+
+  <MailTable :emails="filteredEmails" />
 </template>
 
 <script>
-  import MailScreenArchived from '@/components/MailScreenArchived.vue';
-  import MailScreenInbox from '@/components/MailScreenInbox.vue';
-  import { ref } from 'vue';
   import axios from 'axios';
 
+  import MailTable from '@/components/MailTable.vue';
+  import BulkActionBar from '@/components/BulkActionBar.vue';
+  import { useEmailSelection } from '../composition/useEmailSelection';
+
   export default {
     async setup(){
-      let {data} = await axios.get('http://localhost:3000/emails');
-      let emails = ref(data);
+      let response = await axios.get('http://localhost:3000/emails');
+      let emails = response.data;
+      let selectedScreen = 'inbox';
 
-      return {emails};
+      return { 
+        emails,
+        selectedScreen,
+        emailSelection: useEmailSelection()
+      }
     },
     components: {
-      MailScreenArchived,
-      MailScreenInbox
+      BulkActionBar,
+      MailTable
+    },
+    methods: {
+      selectScreen(newScreen) {
+        this.selectedScreen = newScreen;
+        this.emailSelection.clear();
+      },
+      capitalize(word) {
+        if(!word || !word.length){ return; }
+
+        return word[0].toUpperCase() + word.slice(1)
+      }
     },
-    props: {
-      screenName: {
-        type: String,
-        required: true
+    computed: {
+      sortedEmails(){
+        return this.emails.sort((e1, e2) => {
+          return e1.sentAt < e2.sentAt ? 1 : -1
+        })
+      },
+      unarchivedEmails(){
+        return this.sortedEmails.filter(e => !e.archived)
+      },
+      archivedEmails(){
+        return this.sortedEmails.filter(e => e.archived)
+      },
+      filteredEmails(){
+        let filters = {
+          inbox: this.unarchivedEmails,
+          archive: this.archivedEmails
+        }
+        return filters[this.selectedScreen]
       }
     }
   }