mirror of
https://github.com/Bubka/2FAuth.git
synced 2024-12-04 14:22:00 +01:00
56 lines
2.1 KiB
Vue
56 lines
2.1 KiB
Vue
|
<script setup>
|
||
|
|
import userService from '@/services/userService'
|
||
|
|
import { useUserStore } from '@/stores/user'
|
||
|
|
import { UseColorMode } from '@vueuse/components'
|
||
|
|
|
||
|
|
const user = useUserStore()
|
||
|
|
const props = defineProps({
|
||
|
|
showGroupSwitch: Boolean,
|
||
|
|
groups: Array
|
||
|
|
})
|
||
|
|
|
||
|
|
const emit = defineEmits(['update:showGroupSwitch'])
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Sets the selected group as the active group
|
||
|
|
*/
|
||
|
|
function setActiveGroup(id) {
|
||
|
|
user.preferences.activeGroup = id
|
||
|
|
|
||
|
|
if( user.preferences.rememberActiveGroup ) {
|
||
|
|
userService.updatePreference('activeGroup', id)
|
||
|
|
}
|
||
|
|
|
||
|
|
emit('update:showGroupSwitch', false)
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div id="groupSwitch" class="container groups">
|
||
|
|
<div class="columns is-centered">
|
||
|
|
<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-dark has-text-light is-outlined': mode == 'dark'}" @click="setActiveGroup(group.id)">{{ group.name }}</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">
|
||
|
|
<!-- Close Group switch button -->
|
||
|
|
<p class="control">
|
||
|
|
<UseColorMode v-slot="{ mode }">
|
||
|
|
<button id="btnClose" class="button is-rounded" :class="{'is-dark' : mode == 'dark'}" @click="$emit('update:showGroupSwitch', false)">{{ $t('commons.close') }}</button>
|
||
|
|
</UseColorMode>
|
||
|
|
</p>
|
||
|
|
</VueFooter>
|
||
|
|
</div>
|
||
|
|
</template>
|