Merge pull request #1467 from gradido/1459-List-Data-again-on-Confirm-Creation

1459 list data again on confirm creation

admin/src/components/Overlay.spec.js

@@ -0,0 +1,31 @@
+import { mount } from '@vue/test-utils'
+import Overlay from './Overlay.vue'
+
+const localVue = global.localVue
+
+const propsData = {
+  item: {},
+}
+
+const mocks = {
+  $t: jest.fn((t) => t),
+  $d: jest.fn((d) => String(d)),
+}
+
+describe('Overlay', () => {
+  let wrapper
+
+  const Wrapper = () => {
+    return mount(Overlay, { localVue, mocks, propsData })
+  }
+
+  describe('mount', () => {
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    it('has a DIV element with the class.component-overlay', () => {
+      expect(wrapper.find('.component-overlay').exists()).toBeTruthy()
+    })
+  })
+})

admin/src/components/Overlay.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="component-overlay">
+    <b-jumbotron class="bg-light p-4">
+      <template #header>{{ $t('overlay.confirm.title') }}</template>
+
+      <template #lead>
+        <b-row class="mt-4">
+          <b-col class="col-3">{{ $t('transactionlist.amount') }}</b-col>
+          <b-col class="h3">
+            <b>{{ item.amount }} GDD</b>
+          </b-col>
+        </b-row>
+        <b-row>
+          <b-col class="col-3">{{ $t('creation_for_month') }}</b-col>
+          <b-col class="h3">
+            {{ $d(new Date(item.date), 'month') }} {{ $d(new Date(item.date), 'year') }}
+          </b-col>
+        </b-row>
+        <b-row>
+          <b-col class="col-3">{{ $t('transactionlist.memo') }}</b-col>
+          <b-col>{{ item.memo }}</b-col>
+        </b-row>
+        <b-row class="mt-3">
+          <b-col class="col-3">{{ $t('name') }}</b-col>
+          <b-col>{{ item.firstName }} {{ item.lastName }}</b-col>
+        </b-row>
+        <b-row>
+          <b-col class="col-3">{{ $t('e_mail') }}</b-col>
+          <b-col>{{ item.email }}</b-col>
+        </b-row>
+      </template>
+
+      <hr class="my-4" />
+      <p>{{ $t('overlay.confirm.text') }}</p>
+      <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('confirm-creation', item)"
+            >
+              {{ $t('overlay.confirm.yes') }}
+            </b-button>
+          </b-col>
+        </b-row>
+      </b-container>
+    </b-jumbotron>
+  </div>
+</template>
+<script>
+export default {
+  name: 'overlay',
+  props: {
+    item: { type: Object, required: true },
+  },
+}
+</script>

admin/src/locales/de.json

@@ -20,6 +20,7 @@
     "toasted_update": "`Offene Schöpfung {value} GDD) für {email} wurde geändert und liegt zur Bestätigung bereit",
     "update_creation": "Schöpfung aktualisieren"
   },
+  "creation_for_month": "Schöpfung für Monat",
   "date": "Datum",
   "delete": "Löschen",
   "details": "Details",
@@ -31,6 +32,7 @@
   "lastname": "Nachname",
   "moderator": "Moderator",
   "multiple_creation_text": "Bitte wähle ein oder mehrere Mitglieder aus für die du Schöpfen möchtest.",
+  "name": "Name",
   "navbar": {
     "logout": "Abmelden",
     "multi_creation": "Mehrfachschöpfung",
@@ -44,7 +46,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!",

admin/src/locales/en.json

@@ -20,6 +20,7 @@
     "toasted_update": "Open creation {value} GDD) for {email} has been changed and is ready for confirmation.",
     "update_creation": "Creation update"
   },
+  "creation_for_month": "Creation for month",
   "date": "Date",
   "delete": "Delete",
   "details": "Details",
@@ -31,6 +32,7 @@
   "lastname": "Lastname",
   "moderator": "Moderator",
   "multiple_creation_text": "Please select one or more members for which you would like to perform creations.",
+  "name": "Name",
   "navbar": {
     "logout": "Logout",
     "multi_creation": "Multiple creation",
@@ -44,7 +46,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!",

admin/src/pages/CreationConfirm.spec.js

@@ -132,8 +132,8 @@ describe('CreationConfirm', () => {
             await wrapper.find('#overlay').findAll('button').at(0).trigger('click')
           })
 
-          it('closes the overlay', () => {
-            expect(wrapper.find('#overlay').isVisible()).toBeFalsy()
+          it('closes the overlay', async () => {
+            expect(wrapper.find('#overlay').exists()).toBeFalsy()
           })
 
           it('still has 2 items in the table', () => {

admin/src/pages/CreationConfirm.vue

@@ -1,18 +1,7 @@
 <template>
   <div class="creation-confirm">
-    <div v-show="overlay" id="overlay" class="">
-      <b-jumbotron class="bg-light p-4">
-        <template #header>{{ $t('overlay.confirm.title') }}</template>
-        <template #lead>{{ $t('overlay.confirm.text') }}</template>
-        <hr class="my-4" />
-        <p>{{ $t('overlay.confirm.question') }}</p>
-        <b-button size="md" variant="danger" class="m-3" @click="overlay = false">
-          {{ $t('overlay.confirm.no') }}
-        </b-button>
-        <b-button size="md" variant="success" class="m-3 text-right" @click="confirmCreation">
-          {{ $t('overlay.confirm.yes') }}
-        </b-button>
-      </b-jumbotron>
+    <div v-if="overlay" id="overlay" @dblclick="overlay = false">
+      <overlay :item="item" @overlay-cancel="overlay = false" @confirm-creation="confirmCreation" />
     </div>
     <open-creations-table
       class="mt-4"
@@ -24,6 +13,7 @@
   </div>
 </template>
 <script>
+import Overlay from '../components/Overlay.vue'
 import OpenCreationsTable from '../components/Tables/OpenCreationsTable.vue'
 import { getPendingCreations } from '../graphql/getPendingCreations'
 import { deletePendingCreation } from '../graphql/deletePendingCreation'
@@ -33,12 +23,13 @@ export default {
   name: 'CreationConfirm',
   components: {
     OpenCreationsTable,
+    Overlay,
   },
   data() {
     return {
       pendingCreations: [],
       overlay: false,
-      item: [],
+      item: {},
     }
   },
   methods: {