adapt admin are overlay for open contributions page

- use slots
- refactor for reusability for main 3 admin actions confirm/delete/reject

admin/src/components/Overlay.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="component-overlay">
     <b-jumbotron class="bg-light p-4">
-      <template #header>{{ $t('overlay.confirm.title') }}</template>
+      <template #header><slot name="title" /></template>
 
       <template #lead>
         <b-row class="mt-4">
@@ -31,26 +31,26 @@
       </template>
 
       <hr class="my-4" />
-      <p>{{ $t('overlay.confirm.text') }}</p>
-      <p>
-        {{ $t('overlay.confirm.question') }}
-      </p>
+      <slot name="text" />
+      <slot name="question" />
+
       <b-container>
         <b-row>
           <b-col>
             <b-button size="md" variant="danger" class="m-3" @click="$emit('overlay-cancel')">
-              {{ $t('overlay.confirm.cancel') }}
+              {{ $t('overlay.cancel') }}
             </b-button>
           </b-col>
           <b-col class="text-right">
-            <b-button
+            <slot name="submit-btn" />
+            <!-- <b-button
               size="md"
               variant="success"
               class="m-3 text-right"
               @click="$emit('confirm-creation', item)"
             >
               {{ $t('overlay.confirm.yes') }}
-            </b-button>
+            </b-button> -->
           </b-col>
         </b-row>
       </b-container>

admin/src/components/Tables/OpenCreationsTable.vue

@@ -5,7 +5,7 @@
         <b-button
           variant="danger"
           size="md"
-          @click="$emit('remove-creation', row.item)"
+          @click="$emit('show-overlay', row.item, 'delete')"
           class="mr-2"
         >
           <b-icon icon="x" variant="light"></b-icon>
@@ -42,7 +42,7 @@
           <b-button
             variant="success"
             size="md"
-            @click="$emit('show-overlay', row.item)"
+            @click="$emit('show-overlay', row.item, 'confirm')"
             class="mr-2"
           >
             <b-icon icon="check" scale="2" variant=""></b-icon>

admin/src/pages/CreationConfirm.vue

@@ -1,13 +1,38 @@
+<!-- eslint-disable @intlify/vue-i18n/no-dynamic-keys -->
 <template>
   <div class="creation-confirm">
     <div v-if="overlay" id="overlay" @dblclick="overlay = false">
-      <overlay :item="item" @overlay-cancel="overlay = false" @confirm-creation="confirmCreation" />
+      <overlay
+        :item="item"
+        @overlay-cancel="overlay = false"
+        @confirm-creation="confirmCreation"
+        @remove-creation="removeCreation"
+      >
+        <template #title>
+          {{ $t(overlayTitle) }}
+        </template>
+        <template #text>
+          <p>{{ $t(overlayText) }}</p>
+        </template>
+        <template #question>
+          <p>{{ $t(overlayQuestion) }}</p>
+        </template>
+        <template #submit-btn>
+          <b-button
+            size="md"
+            variant="success"
+            class="m-3 text-right"
+            @click="$emit(overlayEvent, item)"
+          >
+            {{ $t(overlyBtnText) }}
+          </b-button>
+        </template>
+      </overlay>
     </div>
     <open-creations-table
       class="mt-4"
       :items="pendingCreations"
       :fields="fields"
-      @remove-creation="removeCreation"
       @show-overlay="showOverlay"
       @update-state="updateState"
       @update-contributions="$apollo.queries.PendingContributions.refetch()"
@@ -31,28 +56,32 @@ export default {
     return {
       pendingCreations: [],
       overlay: false,
+      overlayTitle: '',
+      overlayText: '',
+      overlayQuestion: '',
+      overlayEvent: '',
+      overlyBtnText: '',
       item: {},
     }
   },
   methods: {
-    removeCreation(item) {
-      this.$bvModal.msgBoxConfirm(this.$t('creation_form.deleteNow')).then(async (value) => {
-        if (value)
-          await this.$apollo
-            .mutate({
-              mutation: adminDeleteContribution,
-              variables: {
-                id: item.id,
-              },
-            })
-            .then((result) => {
-              this.updatePendingCreations(item.id)
-              this.toastSuccess(this.$t('creation_form.toasted_delete'))
-            })
-            .catch((error) => {
-              this.toastError(error.message)
-            })
-      })
+    removeCreation() {
+      this.$apollo
+        .mutate({
+          mutation: adminDeleteContribution,
+          variables: {
+            id: this.item.id,
+          },
+        })
+        .then((result) => {
+          this.overlay = false
+          this.updatePendingCreations(this.item.id)
+          this.toastSuccess(this.$t('creation_form.toasted_delete'))
+        })
+        .catch((error) => {
+          this.overlay = false
+          this.toastError(error.message)
+        })
     },
     confirmCreation() {
       this.$apollo
@@ -76,9 +105,35 @@ export default {
       this.pendingCreations = this.pendingCreations.filter((obj) => obj.id !== id)
       this.$store.commit('openCreationsMinus', 1)
     },
-    showOverlay(item) {
+    showOverlay(item, variant) {
       this.overlay = true
       this.item = item
+
+      switch (variant) {
+        case 'confirm':
+          this.overlayTitle = 'overlay.confirm.title'
+          this.overlayText = 'overlay.confirm.text'
+          this.overlayQuestion = 'overlay.confirm.question'
+          this.overlyBtnText = 'overlay.confirm.yes'
+          this.overlayEvent = 'confirm-creation'
+          break
+        case 'delete':
+          this.overlayTitle = 'overlay.delete.title'
+          this.overlayText = 'overlay.delete.text'
+          this.overlayQuestion = 'overlay.delete.question'
+          this.overlyBtnText = 'overlay.delete.yes'
+          this.overlayEvent = 'remove-creation'
+          break
+        case 'reject':
+          this.overlayTitle = 'overlay.reject.title'
+          this.overlayText = 'overlay.reject.text'
+          this.overlayQuestion = 'overlay.reject.question'
+          this.overlyBtnText = 'overlay.reject.yes'
+          this.overlayEvent = 'reject-creation'
+          break
+      }
+      console.log('Overlay variant: ' + variant)
+      console.log('Overlay event: ' + this.overlayEvent)
     },
     updateState(id) {
       this.pendingCreations.find((obj) => obj.id === id).messagesCount++