quotes added!
This commit is contained in:
parent
9efff3d592
commit
0f5f7909bf
@ -1,9 +1,9 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h1>Quotes</h1>
|
<app-header :quoteCount="quotes.length" :maxQuotes="maxQuotes"></app-header>
|
||||||
<app-new-quote @newQuote="newQuote"></app-new-quote>
|
<app-new-quote @newQuote="newQuote"></app-new-quote>
|
||||||
<hr>
|
<hr>
|
||||||
<app-quote-grid :quotes="quotes"></app-quote-grid>
|
<app-quote-grid :quotes="quotes" @quoteDelete="deleteQuote"></app-quote-grid>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-sm-12 text-center">
|
<div class="col-sm-12 text-center">
|
||||||
<div class="alert alert-info">click a quote to delete it.</div>
|
<div class="alert alert-info">click a quote to delete it.</div>
|
||||||
@ -15,22 +15,30 @@
|
|||||||
<script>
|
<script>
|
||||||
import QuoteGrid from './components/QuoteGrid.vue'
|
import QuoteGrid from './components/QuoteGrid.vue'
|
||||||
import NewQuote from './components/NewQuote.vue'
|
import NewQuote from './components/NewQuote.vue'
|
||||||
|
import Header from './components/Header.vue'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data(){
|
data(){
|
||||||
return {
|
return {
|
||||||
maxQuotes: 10,
|
maxQuotes: 10,
|
||||||
quotes: ["Just a quote to see something"],
|
quotes: ["Just a quote to see something"],
|
||||||
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
appQuoteGrid: QuoteGrid,
|
appQuoteGrid: QuoteGrid,
|
||||||
|
appHeader: Header,
|
||||||
appNewQuote: NewQuote,
|
appNewQuote: NewQuote,
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
newQuote(quote) {
|
newQuote(quote) {
|
||||||
|
if (this.quotes.length >= this.maxQuotes){
|
||||||
|
return alert('Please delete quotes first');
|
||||||
|
}
|
||||||
this.quotes.push(quote)
|
this.quotes.push(quote)
|
||||||
},
|
},
|
||||||
|
deleteQuote(index){
|
||||||
|
this.quotes.splice(index, 1)
|
||||||
|
}
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
23
s10QuoteApp/src/components/Header.vue
Normal file
23
s10QuoteApp/src/components/Header.vue
Normal file
@ -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>
|
@ -21,8 +21,10 @@
|
|||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
createNew(){
|
createNew(){
|
||||||
this.$emit('newQuote', this.quote);
|
if (this.quote.length){
|
||||||
this.quote = '';
|
this.$emit('newQuote', this.quote);
|
||||||
|
this.quote = '';
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<app-quote v-for='quote in quotes'>
|
<app-quote v-for='(quote, index) in quotes' @click.native="deleteQuote(index)">
|
||||||
{{quote}}
|
{{quote}}
|
||||||
</app-quote>
|
</app-quote>
|
||||||
</div>
|
</div>
|
||||||
@ -13,6 +13,11 @@
|
|||||||
props: ['quotes'],
|
props: ['quotes'],
|
||||||
components: {
|
components: {
|
||||||
appQuote: Quote,
|
appQuote: Quote,
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
deleteQuote(index){
|
||||||
|
this.$emit('quoteDelete', index)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
Loading…
Reference in New Issue
Block a user