91 lines
2.7 KiB
Vue
91 lines
2.7 KiB
Vue
<script setup>
|
|
import { ref, inject } from "vue";
|
|
import * as paginatedListModule from "@/components/pagination/paginatedList.vue";
|
|
|
|
const paginatedList = inject(paginatedListModule.PaginatedListKey, paginatedListModule);
|
|
const { isLoading, loadList, metaCurrentPage, metaItemsPerPage, metaTotalItems, setMetaItemsPerPage, setPage } =
|
|
paginatedList;
|
|
|
|
import PaginationDisplayGeneralSearchReload from "@/components/displays/pagination/PaginationDisplayGeneralSearchReload.vue";
|
|
import PaginationDisplay from "@/components/displays/pagination/PaginationDisplay.vue";
|
|
import PaginationNavigation from "@/components/displays/pagination/PaginationNavigation.vue";
|
|
|
|
const props = defineProps({
|
|
label: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
showFilters: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
hideSearch: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
searchPlaceholder: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
hidePagination: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
});
|
|
const isSmall = ref(window.innerWidth < 1024);
|
|
</script>
|
|
|
|
<template>
|
|
<div data-disable-auto-excel-export="1">
|
|
<!-- Label -->
|
|
<h2 class="title is-4 mb-4">{{ label }}</h2>
|
|
<slot name="description"></slot>
|
|
<!-- Search & reload -->
|
|
<PaginationDisplayGeneralSearchReload
|
|
v-if="!props.hideSearch || $slots.buttons"
|
|
:hide-search="props.hideSearch"
|
|
:search-placeholder="props.searchPlaceholder"
|
|
>
|
|
<template #buttons="{ loadList }" v-if="$slots.buttons">
|
|
<slot name="buttons" :loadList="loadList"></slot>
|
|
</template>
|
|
</PaginationDisplayGeneralSearchReload>
|
|
<slot name="afterSearch"></slot>
|
|
<!-- Filters -->
|
|
<PaginationDisplay
|
|
v-if="showFilters"
|
|
data-testid="table-labeled-pagination-filters"
|
|
:metaItemsPerPage="metaItemsPerPage"
|
|
:loadFunction="loadList"
|
|
:isLoading="isLoading"
|
|
:setMetaItemsPerPage="setMetaItemsPerPage"
|
|
>
|
|
<template #paginationColumns>
|
|
<slot name="paginationDisplayFiltersElement"></slot>
|
|
<slot name="leftPaginationColumns"></slot>
|
|
<div class="column is-auto-fill my-3" v-if="!isSmall" />
|
|
<slot name="rightFilterActions"></slot>
|
|
<div class="columns is-multiline">
|
|
<div class="column is-12 p-1 m-0"></div>
|
|
<slot name="rightPaginationColumns"></slot>
|
|
</div>
|
|
</template>
|
|
</PaginationDisplay>
|
|
<!-- Table -->
|
|
<section class="mb-6">
|
|
<slot name="default"></slot>
|
|
</section>
|
|
<!-- Pagination -->
|
|
<PaginationNavigation
|
|
v-if="!props.hidePagination"
|
|
:currentPage="metaCurrentPage"
|
|
:totalPages="Math.ceil(metaTotalItems / metaItemsPerPage)"
|
|
:loadFunction="loadList"
|
|
:setPage="setPage"
|
|
:isLoading="isLoading"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped></style>
|