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

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

@ -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()
},

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>