From 0f5f7909bf092c81f8119d217407811b858c298b Mon Sep 17 00:00:00 2001
From: Tyrel Souza <tyrelsouza@gmail.com>
Date: Wed, 18 Apr 2018 23:26:36 -0400
Subject: [PATCH] quotes added!

---
 s10QuoteApp/src/App.vue                  | 14 +++++++++++---
 s10QuoteApp/src/components/Header.vue    | 23 +++++++++++++++++++++++
 s10QuoteApp/src/components/NewQuote.vue  |  6 ++++--
 s10QuoteApp/src/components/QuoteGrid.vue |  7 ++++++-
 4 files changed, 44 insertions(+), 6 deletions(-)
 create mode 100644 s10QuoteApp/src/components/Header.vue

diff --git a/s10QuoteApp/src/App.vue b/s10QuoteApp/src/App.vue
index f81aa6b..c7a33fb 100644
--- a/s10QuoteApp/src/App.vue
+++ b/s10QuoteApp/src/App.vue
@@ -1,9 +1,9 @@
 <template>
     <div class="container">
-        <h1>Quotes</h1>
+        <app-header :quoteCount="quotes.length" :maxQuotes="maxQuotes"></app-header>
         <app-new-quote  @newQuote="newQuote"></app-new-quote>
         <hr>
-        <app-quote-grid :quotes="quotes"></app-quote-grid>
+        <app-quote-grid :quotes="quotes" @quoteDelete="deleteQuote"></app-quote-grid>
         <div class="row">
             <div class="col-sm-12 text-center">
                 <div class="alert alert-info">click a quote to delete it.</div>
@@ -15,22 +15,30 @@
 <script>
     import QuoteGrid from './components/QuoteGrid.vue'
     import NewQuote from './components/NewQuote.vue'
+    import Header from './components/Header.vue'
+
     export default {
         data(){
             return {
                 maxQuotes: 10,
                 quotes: ["Just a quote to see something"],
-
             };
         },
         components: {
             appQuoteGrid: QuoteGrid,
+            appHeader: Header,
             appNewQuote: NewQuote,
         },
         methods: {
             newQuote(quote) {
+                if (this.quotes.length >= this.maxQuotes){
+                    return alert('Please delete quotes first');
+                }
                 this.quotes.push(quote)
             },
+            deleteQuote(index){
+                this.quotes.splice(index, 1)
+            }
         },
     }
 </script>
diff --git a/s10QuoteApp/src/components/Header.vue b/s10QuoteApp/src/components/Header.vue
new file mode 100644
index 0000000..6d0cccc
--- /dev/null
+++ b/s10QuoteApp/src/components/Header.vue
@@ -0,0 +1,23 @@
+<template>
+    <div class="row">
+        <div class="col-sm-12">
+        <h1>Quotes</h1>
+            <div class="progress">
+                <div class="progress-bar" role="progressbar" aria-valuenow="100"
+                     aria-valuemin="0" aria-valuemax="100" :style="{width: (quoteCount / maxQuotes) * 100 + '%'}">
+                    {{quoteCount}} / {{maxQuotes}}
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        props: ['quoteCount', 'maxQuotes'],
+    }
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/s10QuoteApp/src/components/NewQuote.vue b/s10QuoteApp/src/components/NewQuote.vue
index f3db0ae..79cecc8 100644
--- a/s10QuoteApp/src/components/NewQuote.vue
+++ b/s10QuoteApp/src/components/NewQuote.vue
@@ -21,8 +21,10 @@
         },
         methods: {
             createNew(){
-                this.$emit('newQuote', this.quote);
-                this.quote = '';
+                if (this.quote.length){
+                    this.$emit('newQuote', this.quote);
+                    this.quote = '';
+                }
             }
         }
     }
diff --git a/s10QuoteApp/src/components/QuoteGrid.vue b/s10QuoteApp/src/components/QuoteGrid.vue
index 9068205..5c0841c 100644
--- a/s10QuoteApp/src/components/QuoteGrid.vue
+++ b/s10QuoteApp/src/components/QuoteGrid.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="row">
-        <app-quote v-for='quote in quotes'>
+        <app-quote v-for='(quote, index) in quotes' @click.native="deleteQuote(index)">
             {{quote}}
         </app-quote>
     </div>
@@ -13,6 +13,11 @@
         props: ['quotes'],
         components: {
             appQuote: Quote,
+        },
+        methods:{
+            deleteQuote(index){
+                this.$emit('quoteDelete', index)
+            }
         }
     }
 </script>