IT4Change/gradido
3
0
Fork 0
mirror of https://github.com/IT4Change/gradido.git synced 2025-12-13 07:45:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

set auto width for statistics table and right align text in colunms

Browse Source
This commit is contained in:
mahula 2022-11-17 18:48:37 +01:00
parent fa734edbbe
commit 116dfa8aca
1 changed files with 15 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
admin/src/components/Tables/StatisticTable.vue
View File

@ -1,11 +1,11 @@
<template> <template>
<div class="statistic-table"> <div class="statistic-table">
<b-table-simple class="mt-5" :items="items" :fields="fields" striped stacked="md" responsive> <b-table-simple style="width: auto;" class="mt-5" :items="items" :fields="fields" striped stacked="md">
<b-thead> <b-thead>
<b-tr> <b-tr>
<b-th></b-th> <b-th></b-th>
<b-th>{{ $t('statistic.count') }}</b-th> <b-th class="text-right">{{ $t('statistic.count') }}</b-th>
<b-th>{{ $t('statistic.detail') }}</b-th> <b-th class="text-right">{{ $t('statistic.detail') }}</b-th>
</b-tr> </b-tr>
</b-thead> </b-thead>
<b-tbody> <b-tbody>
@ -13,50 +13,50 @@
<b-td> <b-td>
<b>{{ $t('statistic.totalUsers') }}</b> <b>{{ $t('statistic.totalUsers') }}</b>
</b-td> </b-td>
<b-td>{{ value.totalUsers }}</b-td> <b-td class="text-right">{{ value.totalUsers }}</b-td>
<b-td></b-td> <b-td></b-td>
</b-tr> </b-tr>
<b-tr> <b-tr>
<b-td> <b-td>
<b>{{ $t('statistic.activeUsers') }}</b> <b>{{ $t('statistic.activeUsers') }}</b>
</b-td> </b-td>
<b-td>{{ value.activeUsers }}</b-td> <b-td class="text-right">{{ value.activeUsers }}</b-td>
<b-td></b-td> <b-td></b-td>
</b-tr> </b-tr>
<b-tr> <b-tr>
<b-td> <b-td>
<b>{{ $t('statistic.deletedUsers') }}</b> <b>{{ $t('statistic.deletedUsers') }}</b>
</b-td> </b-td>
<b-td>{{ value.deletedUsers }}</b-td> <b-td class="text-right">{{ value.deletedUsers }}</b-td>
<b-td></b-td> <b-td></b-td>
</b-tr> </b-tr>
<b-tr> <b-tr>
<b-td> <b-td>
<b>{{ $t('statistic.totalGradidoCreated') }}</b> <b>{{ $t('statistic.totalGradidoCreated') }}</b>
</b-td> </b-td>
<b-td>{{ $n(value.totalGradidoCreated, 'decimal') }} {{ $t('GDD') }}</b-td> <b-td class="text-right">{{ $n(value.totalGradidoCreated, 'decimal') }} {{ $t('GDD') }}</b-td>
<b-td>{{ value.totalGradidoCreated }}</b-td> <b-td class="text-right">{{ value.totalGradidoCreated }}</b-td>
</b-tr> </b-tr>
<b-tr> <b-tr>
<b-td> <b-td>
<b>{{ $t('statistic.totalGradidoDecayed') }}</b> <b>{{ $t('statistic.totalGradidoDecayed') }}</b>
</b-td> </b-td>
<b-td>{{ $n(value.totalGradidoDecayed, 'decimal') }} {{ $t('GDD') }}</b-td> <b-td class="text-right">{{ $n(value.totalGradidoDecayed, 'decimal') }} {{ $t('GDD') }}</b-td>
<b-td>{{ value.totalGradidoDecayed }}</b-td> <b-td class="text-right">{{ value.totalGradidoDecayed }}</b-td>
</b-tr> </b-tr>
<b-tr> <b-tr>
<b-td> <b-td>
<b>{{ $t('statistic.totalGradidoAvailable') }}</b> <b>{{ $t('statistic.totalGradidoAvailable') }}</b>
</b-td> </b-td>
<b-td>{{ $n(value.totalGradidoAvailable, 'decimal') }} {{ $t('GDD') }}</b-td> <b-td class="text-right">{{ $n(value.totalGradidoAvailable, 'decimal') }} {{ $t('GDD') }}</b-td>
<b-td>{{ value.totalGradidoAvailable }}</b-td> <b-td class="text-right">{{ value.totalGradidoAvailable }}</b-td>
</b-tr> </b-tr>
<b-tr> <b-tr>
<b-td> <b-td>
<b>{{ $t('statistic.totalGradidoUnbookedDecayed') }}</b> <b>{{ $t('statistic.totalGradidoUnbookedDecayed') }}</b>
</b-td> </b-td>
<b-td>{{ $n(value.totalGradidoUnbookedDecayed, 'decimal') }} {{ $t('GDD') }}</b-td> <b-td class="text-right">{{ $n(value.totalGradidoUnbookedDecayed, 'decimal') }} {{ $t('GDD') }}</b-td>
<b-td>{{ value.totalGradidoUnbookedDecayed }}</b-td> <b-td class="text-right">{{ value.totalGradidoUnbookedDecayed }}</b-td>
</b-tr> </b-tr>
</b-tbody> </b-tbody>
</b-table-simple> </b-table-simple>
@ -67,18 +67,9 @@ export default {
name: 'StatisticTable', name: 'StatisticTable',
props: { props: {
value: { value: {
type: Array, type: Object,
required: true, required: true,
}, },
fields: {
type: Array,
required: true,
},
},
data() {
return {
// CONFIG,
}
}, },
} }
</script> </script>