37 lines
1.3 KiB
Vue
37 lines
1.3 KiB
Vue
<template>
|
|
<q-table :rows="rows" :columns="columns" row-key="id" :filter="props.filter" :loading="loading"
|
|
:pagination="pagination" selection="single" v-model:selected="selected"></q-table>
|
|
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { ref, onMounted } from 'vue'
|
|
import { api } from 'boot/axios';
|
|
const props = defineProps<{filter:string}>()
|
|
const columns = [
|
|
{ name: 'id', label: 'ID', field: 'id', align: 'left', sortable: true },
|
|
{ name: 'firstName', label: '氏名', field: 'firstName', align: 'left', sortable: true },
|
|
{ name: 'lastName', label: '苗字', field: 'lastName', align: 'left', sortable: true },
|
|
{ name: 'email', label: '電子メール', field: 'email', align: 'left', sortable: true },
|
|
];
|
|
|
|
const pagination = ref({ sortBy: 'id', descending: true, rowsPerPage: 10 });
|
|
const rows = ref([]);
|
|
const loading = ref(false);
|
|
const selected = ref([]);
|
|
defineExpose({
|
|
selected
|
|
})
|
|
const getUsers = async (filter = () => true) => {
|
|
loading.value = true;
|
|
const result = await api.get(`api/v1/users`);
|
|
rows.value = result.data.map((item) => {
|
|
return { id: item.id, firstName: item.first_name, lastName: item.last_name, email: item.email, isSuperuser: item.is_superuser, isActive: item.is_active }
|
|
}).filter(filter);
|
|
loading.value = false;
|
|
}
|
|
|
|
onMounted(async () => {
|
|
await getUsers();
|
|
})
|
|
</script>
|