61 lines
1.7 KiB
Vue
61 lines
1.7 KiB
Vue
<script setup lang="ts">
|
|
import { onMounted } from "vue";
|
|
import { userApi } from "../generated/api";
|
|
import { useModelApi } from "../composables/useModelApi";
|
|
|
|
const {
|
|
items: users,
|
|
loading,
|
|
error,
|
|
load: loadUsers,
|
|
} = useModelApi(userApi, {
|
|
defaultListParams: { ordering: "id" },
|
|
loadErrorMessage: "Не удалось загрузить пользователей",
|
|
});
|
|
|
|
onMounted(loadUsers);
|
|
</script>
|
|
|
|
<template>
|
|
<section class="hero">
|
|
<p class="eyebrow">Directory</p>
|
|
<h1>Пользователи</h1>
|
|
<p class="subtitle">Вторая страница для проверки маршрутизации и панели навигации.</p>
|
|
</section>
|
|
|
|
<van-notice-bar
|
|
v-if="error"
|
|
class="notice"
|
|
color="#991b1b"
|
|
background="#fee2e2"
|
|
left-icon="warning-o"
|
|
wrapable
|
|
:scrollable="false"
|
|
:text="error"
|
|
/>
|
|
|
|
<section class="card list-card">
|
|
<div class="list-title">
|
|
<h2>Список</h2>
|
|
<van-button size="small" plain type="primary" :loading="loading" @click="loadUsers()">
|
|
Обновить
|
|
</van-button>
|
|
</div>
|
|
|
|
<van-loading v-if="loading && users.length === 0" class="state" type="spinner">
|
|
Загрузка...
|
|
</van-loading>
|
|
|
|
<van-empty v-else-if="users.length === 0" description="Пользователей пока нет" />
|
|
|
|
<van-cell-group v-else inset>
|
|
<van-cell v-for="user in users" :key="user.id" :title="user.name" center>
|
|
<template #label> ID: {{ user.id }} </template>
|
|
<template #right-icon>
|
|
<van-tag plain type="success">User</van-tag>
|
|
</template>
|
|
</van-cell>
|
|
</van-cell-group>
|
|
</section>
|
|
</template>
|