feat: create new quote

client/src/components/CollectQuotes.vue

@@ -1,15 +1,33 @@
 <template>
   <div class="collect-quotes__container">
     <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>
 </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">

client/src/components/QuoteCard.vue

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

client/src/components/QuoteCardNew.vue

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