IT4Change/gradido
3
0
Fork 0
mirror of https://github.com/IT4Change/gradido.git synced 2025-12-13 07:45:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'master' into admin-email-confirmation

Browse Source
This commit is contained in:
Moriz Wahl 2022-02-11 15:03:29 +01:00
commit 14373ff302
15 changed files with 539 additions and 705 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.github/workflows/test.yml vendored
View File

@ -422,7 +422,7 @@ jobs:
report_name: Coverage Admin Interface
type: lcov
result_path: ./coverage/lcov.info
min_coverage: 93
min_coverage: 94
token: ${{ github.token }}
##############################################################################

86
admin/src/components/Tables/OpenCreationsTable.vue Normal file
View File

@ -0,0 +1,86 @@
<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>

125
admin/src/components/Tables/SearchUserTable.vue Normal file
View File

@ -0,0 +1,125 @@
<template>
<div class="search-user-table">
<b-table-lite :items="items" :fields="fields" caption-top striped hover stacked="md">
<template #cell(creation)="data">
<div v-html="data.value"></div>
</template>
<template #cell(show_details)="row">
<b-button
variant="info"
size="md"
v-if="row.item.emailChecked"
@click="rowToogleDetails(row, 0)"
class="mr-2"
>
<b-icon :icon="row.detailsShowing ? 'eye-slash-fill' : 'eye-fill'"></b-icon>
</b-button>
</template>
<template #cell(confirm_mail)="row">
<b-button
:variant="row.item.emailChecked ? 'success' : 'danger'"
size="md"
@click="rowToogleDetails(row, 1)"
class="mr-2"
>
<b-icon
:icon="row.item.emailChecked ? 'envelope-open' : 'envelope'"
aria-label="Help"
></b-icon>
</b-button>
</template>
<template #cell(has_elopage)="row">
<b-icon
:variant="row.item.hasElopage ? 'success' : 'danger'"
:icon="row.item.hasElopage ? 'check-circle' : 'x-circle'"
></b-icon>
</template>
<template #cell(transactions_list)="row">
<b-button variant="warning" size="md" @click="rowToogleDetails(row, 2)" class="mr-2">
<b-icon icon="list"></b-icon>
</b-button>
</template>
<template #row-details="row">
<row-details
:row="row"
type="singleCreation"
:slotName="slotName"
:index="slotIndex"
@row-toogle-details="rowToogleDetails"
>
<template #show-creation>
<div>
<creation-formular
type="singleCreation"
pagetype="singleCreation"
:creation="row.item.creation"
:item="row.item"
:creationUserData="creationUserData"
@update-user-data="updateUserData"
/>
</div>
</template>
<template #show-register-mail>
<confirm-register-mail-formular
:checked="row.item.emailChecked"
:email="row.item.email"
:dateLastSend="
row.item.emailConfirmationSend
? $d(new Date(row.item.emailConfirmationSend), 'long')
: ''
"
/>
</template>
<template #show-transaction-list>
<creation-transaction-list-formular :userId="row.item.userId" />
</template>
</row-details>
</template>
</b-table-lite>
</div>
</template>
<script>
import CreationFormular from '../CreationFormular.vue'
import ConfirmRegisterMailFormular from '../ConfirmRegisterMailFormular.vue'
import RowDetails from '../RowDetails.vue'
import CreationTransactionListFormular from '../CreationTransactionListFormular.vue'
import { toggleRowDetails } from '../../mixins/toggleRowDetails'
const slotNames = ['show-creation', 'show-register-mail', 'show-transaction-list']
export default {
name: 'SearchUserTable',
mixins: [toggleRowDetails],
components: {
CreationFormular,
ConfirmRegisterMailFormular,
CreationTransactionListFormular,
RowDetails,
},
props: {
items: {
type: Array,
required: true,
},
fields: {
type: Array,
required: true,
},
},
data() {
return {
creationUserData: {},
}
},
methods: {
updateUserData(rowItem, newCreation) {
rowItem.creation = newCreation
},
},
computed: {
slotName() {
return slotNames[this.slotIndex]
},
},
}
</script>

35
admin/src/components/Tables/SelectUsersTable.vue Normal file
View File

@ -0,0 +1,35 @@
<template>
<div class="component-select-users-table">
<b-table-lite :items="items" :fields="fields" caption-top striped hover stacked="md">
<template #cell(bookmark)="row">
<div>
<b-button
v-if="row.item.emailChecked"
variant="warning"
size="md"
@click="$emit('push-item', row.item)"
class="mr-2"
>
<b-icon icon="plus" variant="success"></b-icon>
</b-button>
<div v-else>{{ $t('e_mail') }}!</div>
</div>
</template>
</b-table-lite>
</div>
</template>
<script>
export default {
name: 'SelectUsersTable',
props: {
items: {
type: Array,
required: true,
},
fields: {
type: Array,
required: true,
},
},
}
</script>

26
admin/src/components/Tables/SelectedUsersTable.vue Normal file
View File

@ -0,0 +1,26 @@
<template>
<div class="component-selected-users-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-item', row.item)" class="mr-2">
<b-icon icon="x" variant="light"></b-icon>
</b-button>
</template>
</b-table-lite>
</div>
</template>
<script>
export default {
name: 'SelectedUsersTable',
props: {
items: {
type: Array,
required: true,
},
fields: {
type: Array,
required: true,
},
},
}
</script>

343
admin/src/components/UserTable.spec.js
View File

@ -1,343 +0,0 @@
import { mount } from '@vue/test-utils'
import UserTable from './UserTable.vue'
const localVue = global.localVue
const apolloQueryMock = jest.fn()
apolloQueryMock.mockResolvedValue()
describe('UserTable', () => {
let wrapper
const defaultItemsUser = [
{
userId: 1,
firstName: 'Bibi',
lastName: 'Bloxberg',
email: 'bibi@bloxberg.de',
creation: [200, 400, 600],
emailChecked: true,
},
{
userId: 2,
firstName: 'Benjamin',
lastName: 'Blümchen',
email: 'benjamin@bluemchen.de',
creation: [1000, 1000, 1000],
emailChecked: true,
},
{
userId: 3,
firstName: 'Peter',
lastName: 'Lustig',
email: 'peter@lustig.de',
creation: [0, 0, 0],
emailChecked: true,
},
{
userId: 4,
firstName: 'New',
lastName: 'User',
email: 'new@user.ch',
creation: [1000, 1000, 1000],
emailChecked: false,
},
]
const confirmationItemsUser = [
{
email: 'bibi@bloxberg.de',
firstName: 'Bibi',
lastName: 'Bloxberg',
amount: 10,
memo: 'Test 1',
date: '11-09-2001',
moderator: 1,
},
{
email: 'bibi@bloxberg.de',
firstName: 'Bibi',
lastName: 'Bloxberg',
amount: 10,
memo: 'Test 2',
date: '21-09-2001',
moderator: 1,
},
{
email: 'bibi@bloxberg.de',
firstName: 'Bibi',
lastName: 'Bloxberg',
amount: 10,
memo: 'Test 3',
date: '30-09-2001',
moderator: 1,
},
]
const propsDataPageUserSearch = {
type: 'PageUserSearch',
itemsUser: defaultItemsUser,
fieldsTable: [
'email',
'firstName',
'lastName',
'creation',
'show_details',
'confirm_mail',
'transactions_list',
],
}
const propsDataUserListSearch = {
type: 'UserListSearch',
itemsUser: defaultItemsUser,
fieldsTable: ['bookmark', 'email', 'firstName', 'lastName', 'creation'],
creation: [1000, 1000, 1000],
}
const propsDataUserListMassCreation = {
type: 'UserListMassCreation',
itemsUser: defaultItemsUser,
fieldsTable: ['email', 'firstName', 'lastName', 'creation', 'bookmark'],
creation: [1000, 1000, 1000],
}
const propsDataPageCreationConfirm = {
type: 'PageCreationConfirm',
itemsUser: confirmationItemsUser,
fieldsTable: [
'bookmark',
'email',
'firstName',
'lastName',
'amount',
'memo',
'date',
'moderator',
'edit_creation',
'confirm',
],
}
const mocks = {
$t: jest.fn((t) => t),
$d: jest.fn((d) => String(d)),
$apollo: {
query: apolloQueryMock,
},
$store: {
commit: jest.fn(),
},
}
const Wrapper = (propsData) => {
return mount(UserTable, { localVue, propsData, mocks })
}
describe('mount', () => {
describe('type PageUserSearch', () => {
beforeEach(async () => {
wrapper = Wrapper(propsDataPageUserSearch)
})
it('has a DIV element with the class.component-user-table', () => {
expect(wrapper.find('.component-user-table').exists()).toBeTruthy()
})
it('has a DIV element with the id overlay that is not displayed', () => {
expect(wrapper.find('#overlay').exists()).toBeTruthy()
expect(wrapper.find('#overlay').attributes('style')).toBe('display: none;')
})
describe('table', () => {
it('has a table', () => {
expect(wrapper.find('table').exists()).toBeTruthy()
})
describe('header definition', () => {
it('has 4 column', () => {
expect(wrapper.findAll('th').length).toBe(7)
})
it('has Email as first column', () => {
expect(wrapper.find('th[aria-colindex="1"] div').text()).toBe('Email')
})
it('has First Name as second column', () => {
expect(wrapper.find('th[aria-colindex="2"] div').text()).toBe('First Name')
})
it('has Last Name as third column', () => {
expect(wrapper.find('th[aria-colindex="3"] div').text()).toBe('Last Name')
})
it('has Creation as fourth column', () => {
expect(wrapper.find('th[aria-colindex="4"] div').text()).toBe('Creation')
})
it('has Creation as fifth column', () => {
expect(wrapper.find('th[aria-colindex="5"] div').text()).toBe('Show Details')
})
it('has Creation as sixth column', () => {
expect(wrapper.find('th[aria-colindex="6"] div').text()).toBe('Confirm Mail')
})
it('has Creation as seventh column', () => {
expect(wrapper.find('th[aria-colindex="7"] div').text()).toBe('Transactions List')
})
})
describe('content', () => {
it('has 4 rows', () => {
expect(wrapper.findAll('tbody tr')).toHaveLength(4)
})
it('has 7 columns', () => {
expect(wrapper.findAll('tr:nth-child(1) > td')).toHaveLength(7)
})
it('find button on fifth column', () => {
expect(
wrapper.findAll('tr:nth-child(1) > td').at(5).find('button').isVisible(),
).toBeTruthy()
})
})
describe('row toggling', () => {
describe('user with email not activated', () => {
it('has no details button', () => {
expect(
wrapper.findAll('tbody > tr').at(3).findAll('td').at(4).find('button').exists(),
).toBeFalsy()
})
it('has a red confirmed button with envelope item', () => {
const row = wrapper.findAll('tbody > tr').at(3)
expect(row.findAll('td').at(5).find('button').exists()).toBeTruthy()
expect(row.findAll('td').at(5).find('button').classes('btn-danger')).toBeTruthy()
expect(row.findAll('td').at(5).find('svg').classes('bi-envelope')).toBeTruthy()
})
describe('click on envelope', () => {
beforeEach(async () => {
await wrapper
.findAll('tbody > tr')
.at(3)
.findAll('td')
.at(5)
.find('button')
.trigger('click')
})
it('opens the details', async () => {
expect(wrapper.findAll('tbody > tr')).toHaveLength(6)
expect(wrapper.findAll('tbody > tr').at(5).find('input').element.value).toBe(
'new@user.ch',
)
expect(wrapper.findAll('tbody > tr').at(5).text()).toContain(
'unregister_mail.text_false',
)
// HACK: for some reason we need to close the row details after this test
await wrapper
.findAll('tbody > tr')
.at(3)
.findAll('td')
.at(5)
.find('button')
.trigger('click')
})
describe('click on envelope again', () => {
beforeEach(async () => {
await wrapper
.findAll('tbody > tr')
.at(3)
.findAll('td')
.at(5)
.find('button')
.trigger('click')
})
it('closes the details', () => {
expect(wrapper.findAll('tbody > tr')).toHaveLength(4)
})
})
describe('click on close details', () => {
beforeEach(async () => {
await wrapper.findAll('tbody > tr').at(5).findAll('button').at(1).trigger('click')
})
it('closes the details', () => {
expect(wrapper.findAll('tbody > tr')).toHaveLength(4)
})
})
})
})
describe('different details', () => {
it.skip('shows the creation formular for second user', async () => {
await wrapper
.findAll('tbody > tr')
.at(1)
.findAll('td')
.at(4)
.find('button')
.trigger('click')
expect(wrapper.findAll('tbody > tr')).toHaveLength(6)
expect(
wrapper
.findAll('tbody > tr')
.at(3)
.find('div.component-creation-formular')
.exists(),
).toBeTruthy()
})
it.skip('shows the transactions for third user', async () => {
await wrapper
.findAll('tbody > tr')
.at(4)
.findAll('td')
.at(6)
.find('button')
.trigger('click')
expect(wrapper.findAll('tbody > tr')).toHaveLength(6)
})
})
})
})
})
describe('type UserListSearch', () => {
beforeEach(() => {
wrapper = Wrapper(propsDataUserListSearch)
})
it('has a DIV element with the class.component-user-table', () => {
expect(wrapper.find('.component-user-table').exists()).toBeTruthy()
})
})
describe('type UserListMassCreation', () => {
beforeEach(() => {
wrapper = Wrapper(propsDataUserListMassCreation)
})
it('has a DIV element with the class.component-user-table', () => {
expect(wrapper.find('.component-user-table').exists()).toBeTruthy()
})
})
describe('type PageCreationConfirm', () => {
beforeEach(() => {
wrapper = Wrapper(propsDataPageCreationConfirm)
})
it('has a DIV element with the class.component-user-table', () => {
expect(wrapper.find('.component-user-table').exists()).toBeTruthy()
})
})
})
})

320
admin/src/components/UserTable.vue
View File

@ -1,320 +0,0 @@
<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-button size="md" variant="danger" class="m-3" @click="overlayCancel">
{{ overlayText.button_cancel }}
</b-button>
<b-button
size="md"
variant="success"
class="m-3 text-right"
@click="overlayOK(overlayBookmarkType, overlayItem)"
>
{{ overlayText.button_ok }}
</b-button>
</b-jumbotron>
</div>
<b-table-lite :items="itemsUser" :fields="fieldsTable" caption-top striped hover stacked="md">
<template #cell(creation)="data">
<div v-html="data.value"></div>
</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(show_details)="row">
<b-button
variant="info"
size="md"
v-if="row.item.emailChecked"
@click="rowToogleDetails(row, 0)"
class="mr-2"
>
<b-icon :icon="row.detailsShowing ? 'eye-slash-fill' : 'eye-fill'"></b-icon>
</b-button>
</template>
<template #cell(confirm_mail)="row">
<b-button
:variant="row.item.emailChecked ? 'success' : 'danger'"
size="md"
@click="rowToogleDetails(row, 1)"
class="mr-2"
>
<b-icon
:icon="row.item.emailChecked ? 'envelope-open' : 'envelope'"
aria-label="Help"
></b-icon>
</b-button>
</template>
<template #cell(has_elopage)="row">
<b-icon
:variant="row.item.hasElopage ? 'success' : 'danger'"
:icon="row.item.hasElopage ? 'check-circle' : 'x-circle'"
></b-icon>
</template>
<template #cell(transactions_list)="row">
<b-button variant="warning" size="md" @click="rowToogleDetails(row, 2)" class="mr-2">
<b-icon icon="list"></b-icon>
</b-button>
</template>
<template #row-details="row">
<row-details
v-if="type !== 'UserListSearch' && type !== 'UserListMassCreation'"
:row="row"
:type="type"
:slotName="slotName"
:index="slotIndex"
@row-toogle-details="rowToogleDetails"
>
<template #show-creation>
<div>
<creation-formular
v-if="type === 'PageUserSearch'"
type="singleCreation"
:pagetype="type"
:creation="row.item.creation"
:item="row.item"
:creationUserData="creationUserData"
@update-creation-data="updateCreationData"
@update-user-data="updateUserData"
/>
<edit-creation-formular
v-else
type="singleCreation"
:pagetype="type"
:creation="row.item.creation"
:item="row.item"
:row="row"
:creationUserData="creationUserData"
@update-creation-data="updateCreationData"
@update-user-data="updateUserData"
/>
</div>
</template>
<template #show-register-mail>
<confirm-register-mail-formular
:checked="row.item.emailChecked"
:email="row.item.email"
:dateLastSend="
row.item.emailConfirmationSend
? $d(new Date(row.item.emailConfirmationSend), 'long')
: ''
"
/>
</template>
<template #show-transaction-list>
<creation-transaction-list-formular :userId="row.item.userId" />
</template>
</row-details>
</template>
<template #cell(bookmark)="row">
<div v-if="type === 'UserListSearch'">
<b-button
v-if="row.item.emailChecked"
variant="warning"
size="md"
@click="bookmarkPush(row.item)"
class="mr-2"
>
<b-icon icon="plus" variant="success"></b-icon>
</b-button>
<div v-else>{{ $t('e_mail') }}!</div>
</div>
<b-button
variant="danger"
v-show="type === 'UserListMassCreation' || type === 'PageCreationConfirm'"
size="md"
@click="bookmarkRemove(row.item)"
class="mr-2"
>
<b-icon icon="x" variant="light"></b-icon>
</b-button>
</template>
<template #cell(confirm)="row">
<b-button
variant="success"
v-show="type === 'PageCreationConfirm'"
size="md"
@click="overlayShow('confirm', row.item)"
class="mr-2"
>
<b-icon icon="check" scale="2" variant=""></b-icon>
</b-button>
</template>
</b-table-lite>
</div>
</template>
<script>
import CreationFormular from '../components/CreationFormular.vue'
import EditCreationFormular from '../components/EditCreationFormular.vue'
import ConfirmRegisterMailFormular from '../components/ConfirmRegisterMailFormular.vue'
import CreationTransactionListFormular from '../components/CreationTransactionListFormular.vue'
import RowDetails from '../components/RowDetails.vue'
const slotNames = ['show-creation', 'show-register-mail', 'show-transaction-list']
export default {
name: 'UserTable',
props: {
type: {
type: String,
required: true,
},
itemsUser: {
type: Array,
required: true,
},
fieldsTable: {
type: Array,
required: true,
},
},
components: {
CreationFormular,
EditCreationFormular,
ConfirmRegisterMailFormular,
CreationTransactionListFormular,
RowDetails,
},
data() {
return {
showCreationFormular: null,
showConfirmRegisterMailFormular: null,
showCreationTransactionListFormular: null,
creationUserData: {},
overlay: false,
overlayBookmarkType: '',
overlayItem: [],
overlayText: [
{
header: '-',
text1: '--',
text2: '---',
button_ok: 'OK',
button_cancel: 'Cancel',
},
],
slotIndex: 0,
openRow: null,
}
},
methods: {
rowToogleDetails(row, index) {
if (this.openRow) {
if (this.openRow.index === row.index) {
if (index === this.slotIndex) {
row.toggleDetails()
this.openRow = null
} else {
this.slotIndex = index
}
} else {
this.openRow.toggleDetails()
row.toggleDetails()
this.slotIndex = index
this.openRow = row
if (this.type === 'PageCreationConfirm') {
this.creationUserData = row.item
}
}
} else {
row.toggleDetails()
this.slotIndex = index
this.openRow = row
if (this.type === 'PageCreationConfirm') {
this.creationUserData = row.item
}
}
},
overlayShow(bookmarkType, 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)
}
this.overlay = false
},
overlayCancel() {
this.overlay = false
},
bookmarkPush(item) {
this.$emit('push-item', item)
},
bookmarkRemove(item) {
if (this.type === 'UserListMassCreation') {
this.$emit('remove-item', item)
}
if (this.type === 'PageCreationConfirm') {
this.$emit('remove-creation', item)
}
},
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
},
},
computed: {
slotName() {
return slotNames[this.slotIndex]
},
},
}
</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>

6
admin/src/locales/de.json
View File

@ -2,6 +2,7 @@
"all_emails": "Alle Nutzer",
"bookmark": "bookmark",
"confirmed": "bestätigt",
"creation": "Schöpfung",
"creation_form": {
"creation_for": "Aktives Grundeinkommen für",
"enter_text": "Text eintragen",
@ -19,12 +20,15 @@
"update_creation": "Schöpfung aktualisieren"
},
"date": "Datum",
"delete": "Löschen",
"details": "Details",
"edit": "Bearbeiten",
"e_mail": "E-Mail",
"firstname": "Vorname",
"gradido_admin_footer": "Gradido Akademie Adminkonsole",
"hide_details": "Details verbergen von",
"lastname": "Nachname",
"moderator": "Moderator",
"multiple_creation_text": "Bitte wähle ein oder mehrere Mitglieder aus für die du Schöpfen möchtest.",
"navbar": {
"logout": "Abmelden",
@ -55,6 +59,8 @@
},
"remove": "Entfernen",
"remove_all": "alle Nutzer entfernen",
"save": "Speichern",
"text": "Text",
"transaction": "Transaktion",
"transactionlist": {
"amount": "Betrag",

6
admin/src/locales/en.json
View File

@ -2,6 +2,7 @@
"all_emails": "All users",
"bookmark": "Remember",
"confirmed": "confirmed",
"creation": "Creation",
"creation_form": {
"creation_for": "Active Basic Income for",
"enter_text": "Enter text",
@ -19,12 +20,15 @@
"update_creation": "Creation update"
},
"date": "Date",
"delete": "Delete",
"details": "Details",
"edit": "Edit",
"e_mail": "E-mail",
"firstname": "Firstname",
"gradido_admin_footer": "Gradido Academy Admin Console",
"hide_details": "Hide details from",
"lastname": "Lastname",
"moderator": "Moderator",
"multiple_creation_text": "Please select one or more members for which you would like to perform creations.",
"navbar": {
"logout": "Logout",
@ -55,6 +59,8 @@
},
"remove": "Remove",
"remove_all": "Remove all users",
"save": "Speichern",
"text": "Text",
"transaction": "Transaction",
"transactionlist": {
"amount": "Amount",

34
admin/src/mixins/toggleRowDetails.js Normal file
View File

@ -0,0 +1,34 @@
export const toggleRowDetails = {
data() {
return {
slotIndex: 0,
openRow: null,
creationUserData: {},
}
},
methods: {
rowToogleDetails(row, index) {
if (this.openRow) {
if (this.openRow.index === row.index) {
if (index === this.slotIndex) {
row.toggleDetails()
this.openRow = null
} else {
this.slotIndex = index
}
} else {
this.openRow.toggleDetails()
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
}
},
},
}

141
admin/src/mixins/toggleRowDetails.test.js Normal file
View File

@ -0,0 +1,141 @@
import { toggleRowDetails } from './toggleRowDetails'
import { mount } from '@vue/test-utils'
const localVue = global.localVue
const Component = {
render() {},
mixins: [toggleRowDetails],
}
const toggleDetailsMock = jest.fn()
const secondToggleDetailsMock = jest.fn()
const row = {
toggleDetails: toggleDetailsMock,
index: 0,
item: {
data: 'item-data',
},
}
let wrapper
describe('toggleRowDetails', () => {
beforeEach(() => {
jest.clearAllMocks()
wrapper = mount(Component, { localVue })
})
it('sets default data', () => {
expect(wrapper.vm.slotIndex).toBe(0)
expect(wrapper.vm.openRow).toBe(null)
expect(wrapper.vm.creationUserData).toEqual({})
})
describe('no open row', () => {
beforeEach(() => {
wrapper.vm.rowToogleDetails(row, 2)
})
it('calls toggleDetails', () => {
expect(toggleDetailsMock).toBeCalled()
})
it('updates slot index', () => {
expect(wrapper.vm.slotIndex).toBe(2)
})
it('updates open row', () => {
expect(wrapper.vm.openRow).toEqual(
expect.objectContaining({
index: 0,
item: {
data: 'item-data',
},
}),
)
})
it('updates creation user data', () => {
expect(wrapper.vm.creationUserData).toEqual({ data: 'item-data' })
})
})
describe('with open row', () => {
beforeEach(() => {
wrapper.setData({ openRow: row })
})
describe('row index is open row index', () => {
describe('index is slot index', () => {
beforeEach(() => {
wrapper.vm.rowToogleDetails(row, 0)
})
it('calls toggleDetails', () => {
expect(toggleDetailsMock).toBeCalled()
})
it('sets open row to null', () => {
expect(wrapper.vm.openRow).toBe(null)
})
})
describe('index is not slot index', () => {
beforeEach(() => {
wrapper.vm.rowToogleDetails(row, 2)
})
it('does not call toggleDetails', () => {
expect(toggleDetailsMock).not.toBeCalled()
})
it('updates slot index', () => {
expect(wrapper.vm.slotIndex).toBe(2)
})
})
})
describe('row index is not open row index', () => {
beforeEach(() => {
wrapper.vm.rowToogleDetails(
{
toggleDetails: secondToggleDetailsMock,
index: 2,
item: {
data: 'new-item-data',
},
},
2,
)
})
it('closes the open row', () => {
expect(toggleDetailsMock).toBeCalled()
})
it('opens the new row', () => {
expect(secondToggleDetailsMock).toBeCalled()
})
it('updates slot index', () => {
expect(wrapper.vm.slotIndex).toBe(2)
})
it('updates open row', () => {
expect(wrapper.vm.openRow).toEqual({
toggleDetails: secondToggleDetailsMock,
index: 2,
item: {
data: 'new-item-data',
},
})
})
it('updates creation user data', () => {
expect(wrapper.vm.creationUserData).toEqual({ data: 'new-item-data' })
})
})
})
})

20
admin/src/pages/Creation.vue
View File

@ -17,11 +17,10 @@
</b-input-group-text>
</b-input-group-append>
</b-input-group>
<user-table
<select-users-table
v-if="itemsList.length > 0"
type="UserListSearch"
:itemsUser="itemsList"
:fieldsTable="Searchfields"
:items="itemsList"
:fields="Searchfields"
@push-item="pushItem"
/>
<b-pagination
@ -41,11 +40,10 @@
{{ $t('remove_all') }}
</b-button>
</div>
<user-table
<selected-users-table
class="shadow p-3 mb-5 bg-white rounded"
type="UserListMassCreation"
:itemsUser="itemsMassCreation"
:fieldsTable="fields"
:items="itemsMassCreation"
:fields="fields"
@remove-item="removeItem"
/>
</div>
@ -65,7 +63,8 @@
</template>
<script>
import CreationFormular from '../components/CreationFormular.vue'
import UserTable from '../components/UserTable.vue'
import SelectUsersTable from '../components/Tables/SelectUsersTable.vue'
import SelectedUsersTable from '../components/Tables/SelectedUsersTable.vue'
import { searchUsers } from '../graphql/searchUsers'
import { creationMonths } from '../mixins/creationMonths'
@ -74,7 +73,8 @@ export default {
mixins: [creationMonths],
components: {
CreationFormular,
UserTable,
SelectUsersTable,
SelectedUsersTable,
},
data() {
return {

18
admin/src/pages/CreationConfirm.spec.js
View File

@ -165,17 +165,17 @@ describe('CreationConfirm', () => {
expect(wrapper.findAll('tbody > tr')).toHaveLength(1)
})
})
})
})
describe('confirm creation with error', () => {
beforeEach(async () => {
apolloMutateMock.mockRejectedValue({ message: 'Ouchhh!' })
await wrapper.findComponent({ name: 'UserTable' }).vm.$emit('confirm-creation', { id: 2 })
})
describe('confirm creation with error', () => {
beforeEach(async () => {
apolloMutateMock.mockRejectedValue({ message: 'Ouchhh!' })
await wrapper.find('#overlay').findAll('button').at(1).trigger('click')
})
it('toasts an error message', () => {
expect(toastedErrorMock).toBeCalledWith('Ouchhh!')
it('toasts an error message', () => {
expect(toastedErrorMock).toBeCalledWith('Ouchhh!')
})
})
})
})

76
admin/src/pages/CreationConfirm.vue
View File

@ -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') },
]
},
},
@ -112,3 +133,20 @@ export default {
},
}
</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>

6
admin/src/pages/UserSearch.vue
View File

@ -22,7 +22,7 @@
</b-input-group-append>
</b-input-group>
</div>
<user-table type="PageUserSearch" :itemsUser="searchResult" :fieldsTable="fields" />
<search-user-table type="PageUserSearch" :items="searchResult" :fields="fields" />
<b-pagination
pills
size="lg"
@ -35,7 +35,7 @@
</div>
</template>
<script>
import UserTable from '../components/UserTable.vue'
import SearchUserTable from '../components/Tables/SearchUserTable.vue'
import { searchUsers } from '../graphql/searchUsers'
import { creationMonths } from '../mixins/creationMonths'
@ -43,7 +43,7 @@ export default {
name: 'UserSearch',
mixins: [creationMonths],
components: {
UserTable,
SearchUserTable,
},
data() {
return {