aboutsummaryrefslogtreecommitdiffstats
path: root/apps/settings/src/components/Users/UserListFooter.vue
blob: d3667a385804cd47898ccc5f4f0bb194ea454a98 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!--
  - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
  - SPDX-License-Identifier: AGPL-3.0-or-later
-->

<template>
	<tr class="footer">
		<th scope="row">
			<!-- TRANSLATORS Label for a table footer which summarizes the columns of the table -->
			<span class="hidden-visually">{{ t('settings', 'Total rows summary') }}</span>
		</th>
		<td class="footer__cell footer__cell--loading">
			<NcLoadingIcon v-if="loading"
				:title="t('settings', 'Loading accounts …')"
				:size="32" />
		</td>
		<td class="footer__cell footer__cell--count footer__cell--multiline">
			<span aria-describedby="user-count-desc">{{ userCount }}</span>
			<span id="user-count-desc"
				class="hidden-visually">
				{{ t('settings', 'Scroll to load more rows') }}
			</span>
		</td>
	</tr>
</template>

<script lang="ts">
import Vue from 'vue'
import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'

import {
	translate as t,
	translatePlural as n,
} from '@nextcloud/l10n'

export default Vue.extend({
	name: 'UserListFooter',

	components: {
		NcLoadingIcon,
	},

	props: {
		loading: {
			type: Boolean,
			required: true,
		},
		filteredUsers: {
			type: Array,
			required: true,
		},
	},

	computed: {
		userCount(): string {
			if (this.loading) {
				return this.n(
					'settings',
					'{userCount} account …',
					'{userCount} accounts …',
					this.filteredUsers.length,
					{
						userCount: this.filteredUsers.length,
					},
				)
			}
			return this.n(
				'settings',
				'{userCount} account',
				'{userCount} accounts',
				 this.filteredUsers.length,
				{
					userCount: this.filteredUsers.length,
				},
			)
		},
	},

	methods: {
		t,
		n,
	},
})
</script>

<style lang="scss" scoped>
@use './shared/styles';

.footer {
	@include styles.row;
	@include styles.cell;

	&__cell {
		position: sticky;
		color: var(--color-text-maxcontrast);

		&--loading {
			inset-inline-start: 0;
			min-width: var(--avatar-cell-width);
			width: var(--avatar-cell-width);
			align-items: center;
			padding: 0;
		}

		&--count {
			inset-inline-start: var(--avatar-cell-width);
			min-width: var(--cell-width);
			width: var(--cell-width);
		}
	}
}
</style>