This is the tool.vue file
<template>
<LoadingView :loading="initialLoading">
<Heading :level="1" class="mb-3 flex items-center">
<span>Adverts</span>
</Heading>
<div class="flex mb-6">
<IndexSearchInput
:placeholder="searchPlaceholder"
/>
<div class="w-full flex items-center" >
<!-- Create / Attach Button -->
<CreateResourceButton
:label="createButtonLabel"
:singular-name="singularName"
:resource-name="resourceName"
class="flex-shrink-0 ml-auto mb-6"
/>
</div>
</div>
<Card>
<ResourceTableToolbar>
</ResourceTableToolbar>
<LoadingView :loading="loading">
<table class="w-full divide-y divide-gray-100 dark:divide-gray-700"
data-testid="resource-table">
<thead class="bg-gray-50 dark:bg-gray-800">
<tr>
<th class="td-fit uppercase text-xxs text-gray-500 tracking-wide pl-5 pr-2 py-2"><span class="sr-only">Selected Resources</span></th>
<th class="text-left px-2 whitespace-nowrap uppercase text-gray-500 text-xxs tracking-wide py-2">ID</th>
<th class="text-left px-2 whitespace-nowrap uppercase text-gray-500 text-xxs tracking-wide py-2">Headline</th>
<th class="text-left px-2 whitespace-nowrap uppercase text-gray-500 text-xxs tracking-wide py-2">Start Date</th>
<th class="text-left px-2 whitespace-nowrap uppercase text-gray-500 text-xxs tracking-wide py-2">End Date</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-100 dark:divide-gray-700">
<tr class="group" v-for="(item, index) in items" :key="index">
<td class="py-2 cursor-pointer td-fit pl-5 pr-5 dark:bg-gray-800 group-hover:bg-gray-50 dark:group-hover:bg-gray-900"><input type="checkbox" class="checkbox" aria-label="Select Resource 1" data-testid="adverts-items-0-checkbox" dusk="1-checkbox"></td>
<td class="px-2 py-2 whitespace-nowrap cursor-pointer dark:bg-gray-800 group-hover:bg-gray-50 dark:group-hover:bg-gray-900">
<div class="text-left"> <span class="whitespace-nowrap">{{ item.id }}</span></div>
</td>
<td class="px-2 py-2 whitespace-nowrap cursor-pointer dark:bg-gray-800 group-hover:bg-gray-50 dark:group-hover:bg-gray-900">{{ item.headline }}</td>
<td class="px-2 py-2 whitespace-nowrap cursor-pointer dark:bg-gray-800 group-hover:bg-gray-50 dark:group-hover:bg-gray-900">{{ item.start_date }}</td>
<td class="px-2 py-2 whitespace-nowrap cursor-pointer dark:bg-gray-800 group-hover:bg-gray-50 dark:group-hover:bg-gray-900">{{ item.end_date }}</td>
</tr>
</tbody>
</table>
<pagination-links
v-if="resourceResponse"
:resource-name="resourceName"
:resources="resources"
:resource-response="resourceResponse"
@previous="selectPreviousPage"
@next="selectNextPage">
</pagination-links>
</LoadingView>
</Card>
</LoadingView>
</template>
<script>
import axios from 'axios';
import { Paginatable, PerPageable } from 'laravel-nova';
export default {
mixins: [
Paginatable,
PerPageable
],
data() {
return {
items: [],
initialLoading: true,
loading:false,
createButtonLabel: 'Create New Advert',
searchPlaceholder: 'Search Adverts',
singularName: 'Advert',
resourceName: 'Adverts',
};
},
mounted() {
this.getAdverts();
},
methods: {
getAdverts() {
this.initialLoading = false;
this.loading = true;
axios.get('/nova-vendor/manager/index')
.then(response => {
this.items = response.data;
this.loading = false;
})
.catch(error => {
console.log(error);
});
},
computed: {
/**
* Return the heading for the view
*/
headingTitle() {
if (this.initialLoading) {
return ' '
} else {
return 'Adverts'
}
},
}
}
}
</script>
<style>
/* Your custom styles here */
</style>
I was told the following :
1 Import the Paginatable mixin at the top of the file:
import { Paginatable } from 'laravel-nova';
2 Add the Paginatable mixin to the mixins array:
mixins: [ Paginatable]
3 Modify the getAdverts method to use the paginate method provided by the Paginatable mixin:
getAdverts() {
this.initialLoading = false;
this.loading = true;
this.paginate(axios.get('/nova-vendor/manager/index'))
.then(response => {
this.items = response.data;
this.loading = false;
})
.catch(error => {
console.log(error);
});
}
4 Add the pagination-links component to the template:
<pagination-links
v-if="resourceResponse"
:resource-name="resourceName"
:resources="resources"
:resource-response="resourceResponse"
@previous="selectPreviousPage"
@next="selectNextPage">
</pagination-links>```
But it doesn't work, I get following error in:
WARNING in ./resources/js/pages/Tool.vue?vue&type=script&lang=js (./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/pages/Tool.vue?vue&type=script&lang=js) 4:11-22 export 'Paginatable' (imported as 'Paginatable') was not found in 'laravel-nova' (possible exports: CopiesToClipboard, DependentFormField, Errors, FieldValue, FormEvents, FormField, HandlesFieldAttachments, HandlesFormRequest, HandlesPanelVisibility, HandlesUploads, HandlesValidationErrors, HasCards, Localization, MetricBehavior, PreventsFormAbandonment, PreventsModalAbandonment, mapProps, useCopyValueToClipboard, useLocalization)
Any idea how to get this working properly?
