50 lines
1.1 KiB
Vue
50 lines
1.1 KiB
Vue
<template>
|
|
<div class="collect-quotes__container">
|
|
<div class="collect-quotes__explaination-box">
|
|
<QuoteExplainationBox />
|
|
</div>
|
|
<div class="collect-quotes__quotes">
|
|
<QuoteCard v-for="quote in quotes" :key="quote.id" :quote="quote" :editable="true" />
|
|
<QuoteCardNew v-if="showNewQuoteCard" @click="createNewQuote" />
|
|
<QuoteCard v-if="!showNewQuoteCard" :quote="newQuote" :editable="true" :instant-edit="true" @edit-end="editEnd" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
import type { Quote } from '@/composables/engine.d'
|
|
import useEngine from '@/composables/useEngine'
|
|
const engine = useEngine()
|
|
const quotes = engine.getQuotesRef()
|
|
await engine.loadQuotes()
|
|
|
|
const showNewQuoteCard = ref(true)
|
|
const newQuote = ref({} as Quote)
|
|
|
|
const createNewQuote = () => {
|
|
showNewQuoteCard.value = false
|
|
newQuote.value = {
|
|
id: '',
|
|
quote: '',
|
|
}
|
|
}
|
|
|
|
const editEnd = () => {
|
|
showNewQuoteCard.value = true
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.collect-quotes {
|
|
&__explaination-box {
|
|
margin: 16px;
|
|
}
|
|
|
|
&__quotes {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
}
|
|
</style>
|