open creations table

admin/src/components/Tables/OpenCreationsTable.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="component-open-creations-table">
+    <b-table-lite :items="items" :fields="fields" caption-top striped hover stacked="md">
+      <template #cell(bookmark)="row">
+        <b-button
+          variant="danger"
+          size="md"
+          @click="$emit('remove-creation', row.item)"
+          class="mr-2"
+        >
+          <b-icon icon="x" variant="light"></b-icon>
+        </b-button>
+      </template>
+      <template #cell(edit_creation)="row">
+        <b-button variant="info" size="md" @click="rowToogleDetails(row, 0)" class="mr-2">
+          <b-icon :icon="row.detailsShowing ? 'x' : 'pencil-square'" aria-label="Help"></b-icon>
+        </b-button>
+      </template>
+      <template #cell(confirm)="row">
+        <b-button variant="success" size="md" @click="$emit('show-overlay', row.item)" class="mr-2">
+          <b-icon icon="check" scale="2" variant=""></b-icon>
+        </b-button>
+      </template>
+      <template #row-details="row">
+        <row-details
+          :row="row"
+          type="show-creation"
+          slotName="show-creation"
+          :index="0"
+          @row-toogle-details="rowToogleDetails"
+        >
+          <template #show-creation>
+            <div>
+              <edit-creation-formular
+                type="singleCreation"
+                :creation="row.item.creation"
+                :item="row.item"
+                :row="row"
+                :creationUserData="creationUserData"
+                @update-creation-data="updateCreationData"
+                @update-user-data="updateUserData"
+              />
+            </div>
+          </template>
+        </row-details>
+      </template>
+    </b-table-lite>
+  </div>
+</template>
+
+<script>
+import { toggleRowDetails } from '../../mixins/toggleRowDetails'
+import RowDetails from '../RowDetails.vue'
+import EditCreationFormular from '../EditCreationFormular.vue'
+
+export default {
+  name: 'OpenCreationsTable',
+  mixins: [toggleRowDetails],
+  components: {
+    EditCreationFormular,
+    RowDetails,
+  },
+  props: {
+    items: {
+      type: Array,
+      required: true,
+    },
+    fields: {
+      type: Array,
+      required: true,
+    },
+  },
+  methods: {
+    updateCreationData(data) {
+      this.creationUserData.amount = data.amount
+      this.creationUserData.date = data.date
+      this.creationUserData.memo = data.memo
+      this.creationUserData.moderator = data.moderator
+      data.row.toggleDetails()
+    },
+    updateUserData(rowItem, newCreation) {
+      rowItem.creation = newCreation
+    },
+  },
+}
+</script>
+<style>
+#overlay {
+  position: fixed;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding-left: 5%;
+  background-color: rgba(12, 11, 11, 0.781);
+  z-index: 1000000;
+  cursor: pointer;
+}
+</style>

admin/src/mixins/toggleRowDetails.js

@@ -3,6 +3,7 @@ export const toggleRowDetails = {
     return {
       slotIndex: 0,
       openRow: null,
+      creationUserData: {},
     }
   },
   methods: {
@@ -20,11 +21,13 @@ export const toggleRowDetails = {
           row.toggleDetails()
           this.slotIndex = index
           this.openRow = row
+          this.creationUserData = row.item
         }
       } else {
         row.toggleDetails()
         this.slotIndex = index
         this.openRow = row
+        this.creationUserData = row.item
       }
     },
   },

admin/src/pages/CreationConfirm.vue

@@ -1,17 +1,30 @@
 <template>
   <div class="creation-confirm">
-    <user-table
+    <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>
+    <open-creations-table
       class="mt-4"
-      type="PageCreationConfirm"
-      :itemsUser="pendingCreations"
-      :fieldsTable="fields"
+      :items="pendingCreations"
+      :fields="fields"
       @remove-creation="removeCreation"
-      @confirm-creation="confirmCreation"
+      @show-overlay="showOverlay"
     />
   </div>
 </template>
 <script>
-import UserTable from '../components/UserTable.vue'
+import OpenCreationsTable from '../components/Tables/OpenCreationsTable.vue'
 import { getPendingCreations } from '../graphql/getPendingCreations'
 import { deletePendingCreation } from '../graphql/deletePendingCreation'
 import { confirmPendingCreation } from '../graphql/confirmPendingCreation'
@@ -19,11 +32,13 @@ import { confirmPendingCreation } from '../graphql/confirmPendingCreation'
 export default {
   name: 'CreationConfirm',
   components: {
-    UserTable,
+    OpenCreationsTable,
   },
   data() {
     return {
       pendingCreations: [],
+      overlay: false,
+      item: [],
     }
   },
   methods: {
@@ -43,19 +58,21 @@ export default {
           this.$toasted.error(error.message)
         })
     },
-    confirmCreation(item) {
+    confirmCreation() {
       this.$apollo
         .mutate({
           mutation: confirmPendingCreation,
           variables: {
-            id: item.id,
+            id: this.item.id,
           },
         })
         .then((result) => {
-          this.updatePendingCreations(item.id)
+          this.overlay = false
+          this.updatePendingCreations(this.item.id)
           this.$toasted.success(this.$t('creation_form.toasted_created'))
         })
         .catch((error) => {
+          this.overlay = false
           this.$toasted.error(error.message)
         })
     },
@@ -78,22 +95,26 @@ export default {
       this.pendingCreations = this.pendingCreations.filter((obj) => obj.id !== id)
       this.$store.commit('openCreationsMinus', 1)
     },
+    showOverlay(item) {
+      this.overlay = true
+      this.item = item
+    },
   },
   computed: {
     fields() {
       return [
-        { key: 'bookmark', label: 'löschen' },
-        { key: 'email', label: 'Email' },
-        { key: 'firstName', label: 'Vorname' },
-        { key: 'lastName', label: 'Nachname' },
+        { key: 'bookmark', label: this.$t('delete') },
+        { key: 'email', label: this.$t('e_mail') },
+        { key: 'firstName', label: this.$t('firstname') },
+        { key: 'lastName', label: this.$t('lastname') },
         {
           key: 'amount',
-          label: 'Schöpfung',
+          label: this.$t('creation'),
           formatter: (value) => {
             return value + ' GDD'
           },
         },
-        { key: 'memo', label: 'Text' },
+        { key: 'memo', label: this.$t('text') },
         {
           key: 'date',
           label: this.$t('date'),
@@ -101,9 +122,9 @@ export default {
             return this.$d(new Date(value), 'short')
           },
         },
-        { key: 'moderator', label: 'Moderator' },
-        { key: 'edit_creation', label: 'ändern' },
-        { key: 'confirm', label: 'speichern' },
+        { key: 'moderator', label: this.$t('moderator') },
+        { key: 'edit_creation', label: this.$t('edit') },
+        { key: 'confirm', label: this.$t('save') },
       ]
     },
   },