80 lines
No EOL
1.9 KiB
Vue
80 lines
No EOL
1.9 KiB
Vue
<script setup lang="ts">
|
|
import axios from "axios";
|
|
import {useAuthStore} from "@/stores/auth.store.ts";
|
|
import {ref, onMounted, reactive, computed} from "vue";
|
|
const auth = useAuthStore()
|
|
const items = ref([])
|
|
|
|
const listData = reactive({
|
|
'per_page': 5,
|
|
'first_page': null,
|
|
'last_page': null,
|
|
'total_items': 0,
|
|
'current_page': 1,
|
|
})
|
|
|
|
const active_columns = reactive({
|
|
'track_title': 'Track Title',
|
|
'artist_name': 'Artist',
|
|
'genre': 'Genre',
|
|
'track_type': 'Track Type',
|
|
'length': 'Length',
|
|
'mtime': 'Uploaded'
|
|
})
|
|
|
|
/**
|
|
* ToDo: understand why per_page and other filters doesn't work
|
|
* @param page_info created by v-data-table-server on update
|
|
*/
|
|
const getItems = (page_info) => {
|
|
console.log(page_info);
|
|
return axios.get(`/file`, {
|
|
params: {
|
|
page: page_info.page,
|
|
per_page: page_info.itemsPerPage,
|
|
}
|
|
}).then((response) => {
|
|
console.log(response)
|
|
listData.per_page = response.data.per_page;
|
|
listData.first_page = response.data.from;
|
|
listData.last_page = response.data.last_page;
|
|
listData.current_page = response.data.current_page;
|
|
listData.total_items = response.data.total;
|
|
|
|
items.value = response.data.data.map((el) => {
|
|
Object.keys(el).forEach((key) => {
|
|
if (Object.keys(active_columns).includes(key)) {
|
|
el[active_columns[key]] = el[key];
|
|
}
|
|
delete el[key];
|
|
})
|
|
return el;
|
|
});
|
|
console.log(listData);
|
|
}).catch((error) => {
|
|
console.log("Error: "+error);
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<v-data-table-server
|
|
v-model:items-per-page="listData.per_page"
|
|
:items="items"
|
|
:items-length="listData.total_items"
|
|
loading-text="Loading..."
|
|
:loading="items.length === 0"
|
|
@update:options="getItems"
|
|
@update:items-per-page="getItems"
|
|
disable-sort
|
|
>
|
|
</v-data-table-server>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.v-data-table {
|
|
width:100%;
|
|
}
|
|
</style> |