From 7834054a77dcb3e47383c4da017112d15afa0fe2 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Fri, 11 Feb 2022 15:08:09 +0100
Subject: [PATCH] add components Overlay.vue, add localize for Overlay.vue

---
 admin/src/components/Overlay.vue   | 66 +++++++++++++++++++++++++++++
 admin/src/components/UserTable.vue | 68 ++++--------------------------
 admin/src/locales/de.json          |  4 +-
 admin/src/locales/en.json          |  3 +-
 4 files changed, 80 insertions(+), 61 deletions(-)
 create mode 100644 admin/src/components/Overlay.vue

diff --git a/admin/src/components/Overlay.vue b/admin/src/components/Overlay.vue
new file mode 100644
index 000000000..e9af36cdd
--- /dev/null
+++ b/admin/src/components/Overlay.vue
@@ -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>
diff --git a/admin/src/components/UserTable.vue b/admin/src/components/UserTable.vue
index e2222fc0c..de59cb277 100644
--- a/admin/src/components/UserTable.vue
+++ b/admin/src/components/UserTable.vue
@@ -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() {
diff --git a/admin/src/locales/de.json b/admin/src/locales/de.json
index 327cfd302..673aca078 100644
--- a/admin/src/locales/de.json
+++ b/admin/src/locales/de.json
@@ -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!",
diff --git a/admin/src/locales/en.json b/admin/src/locales/en.json
index 3f12f10a8..b5470d4d2 100644
--- a/admin/src/locales/en.json
+++ b/admin/src/locales/en.json
@@ -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!",