mirror of
https://github.com/Bubka/2FAuth.git
synced 2024-12-01 20:54:03 +01:00
68 lines
3.0 KiB
Vue
68 lines
3.0 KiB
Vue
<script setup>
|
|
import twofaccountService from '@/services/twofaccountService'
|
|
import groupService from '@/services/groupService'
|
|
import { UseColorMode } from '@vueuse/components'
|
|
|
|
const props = defineProps({
|
|
showDestinationGroupSelector: Boolean,
|
|
selectedAccountsIds: Array,
|
|
groups: Array
|
|
})
|
|
const destinationGroupId = ref(null)
|
|
|
|
const emit = defineEmits(['update:showDestinationGroupSelector', 'accounts-moved'])
|
|
|
|
/**
|
|
* Move accounts selected from the Edit mode to another group or withdraw them
|
|
*/
|
|
async function moveAccounts() {
|
|
// Backend will associate all provided accounts with the selected group in the same move
|
|
// or withdraw the accounts if destination is 'no group' (id = 0)
|
|
if (destinationGroupId.value === 0) {
|
|
await twofaccountService.withdraw(props.selectedAccountsIds)
|
|
}
|
|
else await groupService.assign(props.selectedAccountsIds, destinationGroupId.value)
|
|
|
|
emit('accounts-moved')
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<!-- Group selector -->
|
|
<div class="container group-selector">
|
|
<div class="columns is-centered is-multiline">
|
|
<div class="column is-full has-text-centered">
|
|
{{ $t('groups.move_selected_to') }}
|
|
</div>
|
|
<div class="column is-one-third-tablet is-one-quarter-desktop is-one-quarter-widescreen is-one-quarter-fullhd">
|
|
<div class="columns is-multiline">
|
|
<div class="column is-full" v-for="group in groups" :key="group.id">
|
|
<UseColorMode v-slot="{ mode }">
|
|
<button class="button is-fullwidth" :class="{'is-link' : destinationGroupId === group.id, 'is-dark has-text-light is-outlined': mode == 'dark'}" @click="destinationGroupId = group.id">
|
|
<span v-if="group.id === 0" class="is-italic">
|
|
{{ $t('groups.no_group') }}
|
|
</span>
|
|
<span v-else>
|
|
{{ group.name }}
|
|
</span>
|
|
</button>
|
|
</UseColorMode>
|
|
</div>
|
|
</div>
|
|
<div class="columns is-centered">
|
|
<div class="column has-text-centered">
|
|
<RouterLink :to="{ name: 'groups' }" >{{ $t('groups.manage_groups') }}</RouterLink>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<VueFooter :showButtons="true">
|
|
<!-- Move to selected group button -->
|
|
<p class="control">
|
|
<button class="button is-link is-rounded" @click="moveAccounts">{{ $t('commons.move') }}</button>
|
|
</p>
|
|
<ButtonBackCloseCancel action="cancel" :useLinkTag="false" @canceled="$emit('update:showDestinationGroupSelector', false)" />
|
|
</VueFooter>
|
|
</div>
|
|
</template> |