settel/knowyt
1
0
Fork 0
Code Issues Pull Requests Packages Releases Activity

create/edit quote dialog (WIP)

Browse Source
This commit is contained in:
Settel 2021-10-29 22:13:38 +02:00
parent e18e6a94c1
commit d5bde937b5
3 changed files with 110 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
client/src/components/CollectQuote.vue
View File

@ -1,71 +1,28 @@
<template> <template>
<div class="collect-quote__container"> <div class="collect-quote">
<div class="collect-quote__quote"> <p>Sachen gibt's ...</p>
{{ quote.quote }} <form>
{{ quote.quote }} <input type="hidden" name="id" :value="quote.id" />
</div> <input v-model="quote.quote" size="60" />
<div class="collect-quote__actions"> </form>
<div class="collect-quote__icon collect-quote__icon-edit" @click="edit" /> <button @click="save">Save</button>
<div class="collect-quote__icon collect-quote__icon-delete" @click="remove" /> <Quote :text="quote.quote" />
</div>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
props: ['quote'], props: ['quote'],
methods: { methods: {
async edit() { save() {
await this.save() this.$nuxt.$emit('save-quote', this.quote)
}, }
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()
}
},
}, },
} }
</script> </script>
<style lang="scss"> <style lang="scss">
.collect-quote { .collect-quote {
&__container { color: #ffffff;
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> </style>

33
client/src/components/CollectQuotes.vue
View File

@ -1,18 +1,49 @@
<template> <template>
<div> <div>
<!-- <CollectQuotesExplain /> --> <!-- <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> </div>
</template> </template>
<script> <script>
export default { export default {
data() {
return {
showCollectQuoteDialog: false,
collectQuote: {},
}
},
computed: { computed: {
quotes() { quotes() {
return this.$store.state.myQuotes.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() { async fetch() {
await this.$engine.getMyQuotes() await this.$engine.getMyQuotes()
}, },

65
client/src/components/QuoteListItem.vue Normal file
View File

@ -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>