add components Overlay.vue, add localize for Overlay.vue

This commit is contained in:
ogerly 2022-02-11 15:08:09 +01:00
parent bc68db6b21
commit 7834054a77
4 changed files with 80 additions and 61 deletions

View File

@ -0,0 +1,66 @@
<template>
<div>
<b-jumbotron class="bg-light p-4">
<template #header>{{ $t('overlay.confirm.title') }}</template>
<template #lead>
{{ $t('overlay.confirm.text') }}
<br />
<br />
<b-row>
<b-col class="col-2">{{ $t('name') }}</b-col>
<b-col class="h3">{{ items.firstName }} {{ items.lastName }}</b-col>
</b-row>
<b-row>
<b-col class="col-2">{{ $t('e_mail') }}</b-col>
<b-col class="h3">{{ items.email }}</b-col>
</b-row>
<b-row>
<b-col class="col-2">{{ $t('transactionlist.amount') }}</b-col>
<b-col class="h3">{{ items.amount }} GDD</b-col>
</b-row>
<b-row>
<b-col class="col-2">{{ $t('transactionlist.memo') }}</b-col>
<b-col class="h3">{{ items.memo }}</b-col>
</b-row>
<b-row>
<b-col class="col-2">{{ $t('creation_for_month') }}</b-col>
<b-col class="h3">{{ items.date }}</b-col>
</b-row>
</template>
<hr class="my-4" />
<p>
{{ $t('overlay.confirm.question') }}
</p>
<b-container>
<b-row>
<b-col>
<b-button size="md" variant="danger" class="m-3" @click="$emit('overlay-cancel')">
{{ $t('overlay.confirm.cancel') }}
</b-button>
</b-col>
<b-col class="text-right">
<b-button
size="md"
variant="success"
class="m-3 text-right"
@click="$emit('overlay-ok', items)"
>
{{ $t('overlay.confirm.yes') }}
</b-button>
</b-col>
</b-row>
</b-container>
</b-jumbotron>
</div>
</template>
<script>
export default {
name: 'overlay',
props: {
items: { type: Object, required: true },
},
}
</script>

View File

@ -1,38 +1,7 @@
<template>
<div class="component-user-table">
<div v-show="overlay" id="overlay" class="">
<b-jumbotron class="bg-light p-4">
<template #header>{{ overlayText.header }}</template>
<template #lead>
{{ overlayText.text1 }}
</template>
<hr class="my-4" />
<p>
{{ overlayText.text2 }}
</p>
<b-container>
<b-row>
<b-col>
<b-button size="md" variant="danger" class="m-3" @click="overlayCancel">
{{ overlayText.button_cancel }}
</b-button>
</b-col>
<b-col class="text-right">
<b-button
size="md"
variant="success"
class="m-3 text-right"
@click="overlayOK(overlayBookmarkType, overlayItem)"
>
{{ overlayText.button_ok }}
</b-button>
</b-col>
</b-row>
</b-container>
</b-jumbotron>
<div v-show="overlay" id="overlay" @dblclick="overlayCancel">
<overlay :items="overlayItem" @overlay-cancel="overlayCancel" @overlay-ok="overlayOK" />
</div>
<b-table-lite :items="itemsUser" :fields="fieldsTable" caption-top striped hover stacked="md">
<template #cell(creation)="data">
@ -159,7 +128,7 @@
variant="success"
v-show="type === 'PageCreationConfirm'"
size="md"
@click="overlayShow('confirm', row.item)"
@click="overlayShow(row.item)"
class="mr-2"
>
<b-icon icon="check" scale="2" variant=""></b-icon>
@ -170,6 +139,7 @@
</template>
<script>
import Overlay from '../components/Overlay.vue'
import CreationFormular from '../components/CreationFormular.vue'
import EditCreationFormular from '../components/EditCreationFormular.vue'
import ConfirmRegisterMailFormular from '../components/ConfirmRegisterMailFormular.vue'
@ -195,6 +165,7 @@ export default {
},
},
components: {
Overlay,
CreationFormular,
EditCreationFormular,
ConfirmRegisterMailFormular,
@ -208,17 +179,7 @@ export default {
showCreationTransactionListFormular: null,
creationUserData: {},
overlay: false,
overlayBookmarkType: '',
overlayItem: [],
overlayText: [
{
header: '-',
text1: '--',
text2: '---',
button_ok: 'OK',
button_cancel: 'Cancel',
},
],
overlayItem: {},
slotIndex: 0,
openRow: null,
}
@ -251,23 +212,12 @@ export default {
}
}
},
overlayShow(bookmarkType, item) {
overlayShow(item) {
this.overlay = true
this.overlayBookmarkType = bookmarkType
this.overlayItem = item
if (bookmarkType === 'confirm') {
this.overlayText.header = this.$t('overlay.confirm.title')
this.overlayText.text1 = this.$t('overlay.confirm.text')
this.overlayText.text2 = this.$t('overlay.confirm.question')
this.overlayText.button_ok = this.$t('overlay.confirm.yes')
this.overlayText.button_cancel = this.$t('overlay.confirm.no')
}
},
overlayOK(bookmarkType, item) {
if (bookmarkType === 'confirm') {
this.$emit('confirm-creation', item)
}
overlayOK(item) {
this.$emit('confirm-creation', item)
this.overlay = false
},
overlayCancel() {

View File

@ -19,8 +19,10 @@
"update_creation": "Schöpfung aktualisieren"
},
"date": "Datum",
"creation_for_month":"Schöpfung für Monat",
"details": "Details",
"e_mail": "E-Mail",
"name":"Name",
"firstname": "Vorname",
"gradido_admin_footer": "Gradido Akademie Adminkonsole",
"hide_details": "Details verbergen von",
@ -39,7 +41,7 @@
"open_creations": "Offene Schöpfungen",
"overlay": {
"confirm": {
"no": "Nein, nicht speichern.",
"cancel": "abbrechen",
"question": "Willst du diese vorgespeicherte Schöpfung wirklich vollziehen und endgültig speichern?",
"text": "Nach dem Speichern ist der Datensatz nicht mehr änderbar und kann auch nicht mehr gelöscht werden. Bitte überprüfe genau, dass alles stimmt.",
"title": "Schöpfung bestätigen!",

View File

@ -19,6 +19,7 @@
"update_creation": "Creation update"
},
"date": "Date",
"creation_for_month":"Creation for month",
"details": "Details",
"e_mail": "E-mail",
"firstname": "Firstname",
@ -39,7 +40,7 @@
"open_creations": "Open creations",
"overlay": {
"confirm": {
"no": "No, do not save.",
"cancel": "cancel",
"question": "Do you really want to carry out and finally save this pre-stored creation?",
"text": "After saving, the record can no longer be changed or deleted. Please check carefully that everything is correct.",
"title": "Confirm creation!",