From d5bde937b5da3d847e0a0d9ccea14c5a73e2f90f Mon Sep 17 00:00:00 2001
From: Settel <settel@localhost>
Date: Fri, 29 Oct 2021 22:13:38 +0200
Subject: [PATCH] create/edit quote dialog (WIP)

---
 client/src/components/CollectQuote.vue  | 69 +++++--------------------
 client/src/components/CollectQuotes.vue | 33 +++++++++++-
 client/src/components/QuoteListItem.vue | 65 +++++++++++++++++++++++
 3 files changed, 110 insertions(+), 57 deletions(-)
 create mode 100644 client/src/components/QuoteListItem.vue

diff --git a/client/src/components/CollectQuote.vue b/client/src/components/CollectQuote.vue
index b1ebe26..852b71b 100644
--- a/client/src/components/CollectQuote.vue
+++ b/client/src/components/CollectQuote.vue
@@ -1,71 +1,28 @@
 <template>
-  <div class="collect-quote__container">
-    <div class="collect-quote__quote">
-      {{ quote.quote }}
-      {{ quote.quote }}
-    </div>
-    <div class="collect-quote__actions">
-      <div class="collect-quote__icon collect-quote__icon-edit" @click="edit" />
-      <div class="collect-quote__icon collect-quote__icon-delete" @click="remove" />
-    </div>
+  <div class="collect-quote">
+    <p>Sachen gibt's ...</p>
+    <form>
+      <input type="hidden" name="id" :value="quote.id" />
+      <input v-model="quote.quote" size="60" />
+    </form>
+    <button @click="save">Save</button>
+    <Quote :text="quote.quote" />
   </div>
 </template>
+
 <script>
 export default {
   props: ['quote'],
   methods: {
-    async edit() {
-      await this.save()
-    },
-    async save() {
-      // this.$engine.createQuote(this.quote.quote)
-      this.$engine.saveQuote(this.quote.id, this.quote.quote)
-      await this.$engine.getMyQuotes()
-    },
-    async remove() {
-      if (confirm('Eintrag wirklich löschen?')) {
-        this.$engine.removeQuote(this.quote.id)
-        await this.$engine.getMyQuotes()
-      }
-    },
+    save() {
+      this.$nuxt.$emit('save-quote', this.quote)
+    }
   },
 }
 </script>
 
 <style lang="scss">
 .collect-quote {
-  &__container {
-    display: flex;
-  }
-  &__quote {
-    color: #ffffff;
-  }
-  &__actions {
-    display: flex;
-    margin: 0 32px;
-  }
-  &__icon {
-    width: 48px;
-    height: 48px;
-    margin-left: 16px;
-    border: 1px solid #ffffff;
-    border-radius: 8px;
-    text-align: center;
-    line-height: 48px;
-    font-size: 32px;
-    color: #ffffff;
-    cursor: pointer;
-
-    &:hover {
-      background-color: #6040c0;
-    }
-
-    &-edit::after {
-      content: '✎';
-    }
-    &-delete::after {
-      content: '🗑';
-    }
-  }
+  color: #ffffff;
 }
 </style>
diff --git a/client/src/components/CollectQuotes.vue b/client/src/components/CollectQuotes.vue
index 364a7b9..957e412 100644
--- a/client/src/components/CollectQuotes.vue
+++ b/client/src/components/CollectQuotes.vue
@@ -1,18 +1,49 @@
 <template>
   <div>
     <!-- <CollectQuotesExplain /> -->
-    <CollectQuote v-for="quote in quotes" :key="quote.id" :quote="quote" />
+    <QuoteListItem v-for="quote in quotes" :key="quote.id" :quote="quote" />
+    <CollectQuote v-if="showCollectQuoteDialog" :quote="collectQuote" />
+    <p>{{ showCollectQuoteDialog }}</p>
   </div>
 </template>
 
 <script>
 
 export default {
+  data() {
+    return {
+      showCollectQuoteDialog: false,
+      collectQuote: {},
+    }
+  },
   computed: {
     quotes() {
       return this.$store.state.myQuotes.quotes
     },
   },
+  created() {
+    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()
   },
diff --git a/client/src/components/QuoteListItem.vue b/client/src/components/QuoteListItem.vue
new file mode 100644
index 0000000..9f24931
--- /dev/null
+++ b/client/src/components/QuoteListItem.vue
@@ -0,0 +1,65 @@
+<template>
+  <div class="quote-list-item__container">
+    <div class="quote-list-item__quote">
+      {{ quote.quote }}
+    </div>
+    <div class="quote-list-item__actions">
+      <div class="quote-list-item__icon quote-list-item__icon-edit" @click="edit" />
+      <div class="quote-list-item__icon quote-list-item__icon-delete" @click="remove" />
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: ['quote'],
+  methods: {
+    async edit() {
+      this.$nuxt.$emit('edit-quote', this.quote)
+    },
+    async remove() {
+      if (confirm('Eintrag wirklich löschen?')) {
+        this.$engine.removeQuote(this.quote.id)
+        await this.$engine.getMyQuotes()
+      }
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+.quote-list-item {
+  &__container {
+    display: flex;
+  }
+  &__quote {
+    color: #ffffff;
+  }
+  &__actions {
+    display: flex;
+    margin: 0 32px;
+  }
+  &__icon {
+    width: 48px;
+    height: 48px;
+    margin-left: 16px;
+    border: 1px solid #ffffff;
+    border-radius: 8px;
+    text-align: center;
+    line-height: 48px;
+    font-size: 32px;
+    color: #ffffff;
+    cursor: pointer;
+
+    &:hover {
+      background-color: #6040c0;
+    }
+
+    &-edit::after {
+      content: '✎';
+    }
+    &-delete::after {
+      content: '🗑';
+    }
+  }
+}
+</style>