mirror of
https://github.com/IT4Change/gradido.git
synced 2025-12-13 07:45:54 +00:00
remove user table
This commit is contained in:
Moriz Wahl
parent
ea6bab0823
commit
c6a469e08f
@ -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()
|
|
||||||
})
|
|
||||||
})
|
|
||||||
})
|
|
||||||
})
|
|
||||||
@ -1,316 +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="$d(new Date(), '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>
|
|
||||||
Loading…
x
Reference in New Issue
Block a user