flaschengeist-frontend/src/plugins/balance/components/BalanceHeader.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 } 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>