45 lines
1.6 KiB
Vue
45 lines
1.6 KiB
Vue
|
<template>
|
||
|
|
<q-card-section class="fit row justify-left content-center items-center q-col-gutter-sm">
|
||
|
|
<div class="text-h6 col-6">
|
||
|
|
Aktueller Stand: {{ balance.balance.toFixed(2) }} €
|
||
|
|
<q-badge color="negative" align="top" v-if="isLocked"> gesperrt </q-badge>
|
||
|
|
</div>
|
||
|
|
<div v-if="showSelector" class="col-6">
|
||
|
|
<UserSelector :user="user" @update:user="userUpdated" />
|
||
|
|
</div>
|
||
|
|
</q-card-section>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts">
|
||
|
|
import { ref, computed, defineComponent, onBeforeMount } from '@vue/composition-api';
|
||
|
|
import UserSelector from 'src/plugins/user/components/UserSelector.vue';
|
||
|
|
import { StateInterfaceBalance, UserBalance } from '../store/balance';
|
||
|
|
import { Store } from 'vuex';
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
showSelector: boolean;
|
||
|
|
}
|
||
|
|
|
||
|
|
export default defineComponent({
|
||
|
|
name: 'BalanceHeader',
|
||
|
|
components: { UserSelector },
|
||
|
|
props: ['showSelector'],
|
||
|
|
setup(props: Props, { root, emit }) {
|
||
|
|
onBeforeMount(() => void store.dispatch('balance/getBalance'));
|
||
|
|
const store = <Store<StateInterfaceBalance>>root.$store;
|
||
|
|
const user = ref(<FG.User>store.state.user.currentUser);
|
||
|
|
const balance = computed(() => {const balances = store.state.balance.balances; return balances.get(user.value.userid) || {balance: 0, limit: null} ;});
|
||
|
|
|
||
|
|
const isLocked = computed(() => balance.value.limit !== null && balance.value.balance >= balance.value.limit);
|
||
|
|
|
||
|
|
function userUpdated(selectedUser: FG.User) {
|
||
|
|
void store.dispatch('balance/getBalance', selectedUser);
|
||
|
|
user.value = selectedUser;
|
||
|
|
emit('update:user', selectedUser);
|
||
|
|
}
|
||
|
|
|
||
|
|
return { user, balance, isLocked, userUpdated };
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script>
|