Sharkey/packages/frontend/src/pages/admin/approvals.vue

<template>
<div>
	<MkStickyContainer>
		<template #header><XHeader :actions="headerActions" :tabs="headerTabs"/></template>
		<MkSpacer :contentMax="900">
			<div class="_gaps_m">
				<MkPagination ref="paginationComponent" :pagination="pagination">
					<template #default="{ items }">
						<div class="_gaps_s">
							<SkApprovalUser v-for="item in items" :key="item.id" :user="(item as any)" :onDeleted="deleted"/>
						</div>
					</template>
				</MkPagination>
			</div>
		</MkSpacer>
	</MkStickyContainer>
</div>
</template>

<script lang="ts" setup>
import { computed, shallowRef } from 'vue';
import XHeader from './_header_.vue';
import MkPagination from '@/components/MkPagination.vue';
import SkApprovalUser from '@/components/SkApprovalUser.vue';
import { i18n } from '@/i18n.js';
import { definePageMetadata } from '@/scripts/page-metadata.js';

let paginationComponent = shallowRef<InstanceType<typeof MkPagination>>();

const pagination = {
	endpoint: 'admin/show-users' as const,
	limit: 10,
	params: computed(() => ({
		sort: '+createdAt',
		state: 'approved',
		origin: 'local',
	})),
	offsetMode: true,
};

function deleted(id: string) {
	if (paginationComponent.value) {
		paginationComponent.value.items.delete(id);
	}
}

const headerActions = computed(() => []);

const headerTabs = computed(() => []);

definePageMetadata(computed(() => ({
	title: i18n.ts.approvals,
	icon: 'ph-chalkboard-teacher ph-bold ph-lg',
})));
</script>

<style lang="scss" module>
.inputs {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.input {
	flex: 1;
}
</style>