knowyt/client/src/components/CollectQuotes.vue

<template>
  <div>
    <CollectQuotesExplain />
    <AddNewQuote v-if="quotes.length > 0"/>
    <NoQuotesYet v-if="quotes.length == 0" />
    <QuoteListItem v-for="quote in quotes" :key="quote.id" :quote="quote" />
    <AddNewQuote />
    <CollectQuote v-if="showCollectQuoteDialog" :quote="collectQuote" />
  </div>
</template>

<script>

export default {
  data() {
    return {
      showCollectQuoteDialog: false,
      collectQuote: {},
    }
  },
  computed: {
    quotes() {
      var quotes = [...this.$store.state.myQuotes.quotes]
      quotes.sort((a, b) => {
        return a.id.localeCompare(b.id)
      })
      return quotes
    },
  },
  created() {
    this.$nuxt.$on('close-quote', () => {
      this.showCollectQuoteDialog = false
    })

    this.$nuxt.$on('edit-quote', (quote) => {
      this.showCollectQuoteDialog = true
      this.collectQuote = {
        id: quote.id,
        quote: quote.quote,
      }
    })

    this.$nuxt.$on('create-quote', (quote) => {
      this.showCollectQuoteDialog = true
      this.collectQuote = {
        id: ':new:',
        quote: '',
      }
    })

    this.$nuxt.$on('save-quote', async (quote) => {
      this.$engine.saveQuote(quote.id, quote.quote)
      await this.$engine.getMyQuotes()
      this.showCollectQuoteDialog = false
    })
  },
  async fetch() {
    await this.$engine.getMyQuotes()
  },
}
</script>