feat: create new quote

This commit is contained in:
Settel 2022-08-27 17:26:59 +02:00
parent 3c1ed677d8
commit 3ce802d920
3 changed files with 39 additions and 15 deletions

View File

@ -1,15 +1,33 @@
<template> <template>
<div class="collect-quotes__container"> <div class="collect-quotes__container">
<QuoteCard v-for="quote in quotes" :key="quote.id" :quote="quote" :editable="true" /> <QuoteCard v-for="quote in quotes" :key="quote.id" :quote="quote" :editable="true" />
<QuoteCardNew /> <QuoteCardNew v-if="showNewQuoteCard" @click="createNewQuote" />
<QuoteCard v-if="!showNewQuoteCard" :quote="newQuote" :editable="true" :instant-edit="true" @edit-end="editEnd" />
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue'
import type { Quote } from '@/composables/engine.d'
import useEngine from '@/composables/useEngine' import useEngine from '@/composables/useEngine'
const engine = useEngine() const engine = useEngine()
const quotes = engine.getQuotesRef() const quotes = engine.getQuotesRef()
await engine.loadQuotes() 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> </script>
<style lang="scss"> <style lang="scss">

View File

@ -2,7 +2,7 @@
<div class="quote-card__container" <div class="quote-card__container"
:class="{ 'quote-card__container__editable': editable, 'quote-card__container__editable__edit-mode': isEditMode }"> :class="{ 'quote-card__container__editable': editable, 'quote-card__container__editable__edit-mode': isEditMode }">
<div v-if="editable" class="quote-card__action-buttons"> <div v-if="editable && !isEditMode" class="quote-card__action-buttons">
<QuoteCardActionButton @click="editQuote" icon="edit" /> <QuoteCardActionButton @click="editQuote" icon="edit" />
<QuoteCardActionButton @click="deleteQuote" icon="trash" /> <QuoteCardActionButton @click="deleteQuote" icon="trash" />
</div> </div>
@ -23,7 +23,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue' import { ref, defineEmits } from 'vue'
import contenteditable from 'vue-contenteditable' import contenteditable from 'vue-contenteditable'
import useEngine from '@/composables/useEngine' import useEngine from '@/composables/useEngine'
import type { Quote } from '@/composables/engine.d' import type { Quote } from '@/composables/engine.d'
@ -31,7 +31,9 @@ import type { Quote } from '@/composables/engine.d'
const props = defineProps<{ const props = defineProps<{
quote: Quote, quote: Quote,
editable?: boolean, editable?: boolean,
instantEdit?: boolean,
}>() }>()
const emit = defineEmits(['edit-end'])
const quoteElId = `quote-${props.quote.id}` const quoteElId = `quote-${props.quote.id}`
const isEditMode = ref(false) const isEditMode = ref(false)
@ -49,19 +51,28 @@ const editQuote = () => {
}, 0) }, 0)
} }
if (props.instantEdit) {
editQuote()
}
const deleteQuote = () => useEngine().deleteQuote(props.quote.id) const deleteQuote = () => useEngine().deleteQuote(props.quote.id)
const saveQuote = () => { const saveQuote = async () => {
isEditMode.value = false isEditMode.value = false
useEngine().saveQuote(props.quote.id, props.quote.quote) if (props.quote.quote) {
useEngine().saveQuote(props.quote.id || ':new:', props.quote.quote)
}
emit('edit-end')
await useEngine().loadQuotes()
window.setTimeout(() => { window.setTimeout(() => {
const $el = document.getElementById(quoteElId) const $el = document.getElementById(quoteElId)
if ($el != null) {
$el.blur() $el.blur()
const sel = window.getSelection() const sel = window.getSelection()
sel.removeAllRanges() sel.removeAllRanges()
}
}, 0) }, 0)
} }
</script> </script>

View File

@ -1,14 +1,9 @@
<template> <template>
<div class="quote-card-new__container" @click="newQuote"> <div class="quote-card-new__container">
<div class="quote-card-new__new">+</div> <div class="quote-card-new__new">+</div>
</div> </div>
</template> </template>
<script setup lang="ts">
import useEngine from '@/composables/useEngine'
const newQuote = () => useEngine().createQuote('something is going to happen')
</script>
<style lang="scss"> <style lang="scss">
@import '~/assets/css/components'; @import '~/assets/css/components';