504ff4c2af
Since I can't quite figure out how to prevent `MkPagination` from truncating the lists too eagerly, I'm going to hide the problem by making it truncate _less_.
67 lines
1.5 KiB
Vue
67 lines
1.5 KiB
Vue
<template>
|
|
<div>
|
|
<MkStickyContainer>
|
|
<template #header><XHeader :actions="headerActions" :tabs="headerTabs"/></template>
|
|
<MkSpacer :contentMax="900">
|
|
<div class="_gaps_m">
|
|
<MkPagination ref="paginationComponent" :pagination="pagination" :displayLimit="50">
|
|
<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(() => ({
|
|
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>
|