==
<template>
<div>
<!-- Table Container Card -->
<b-card
no-body
class="mb-0"
>
<router-link
:to="{
name: 'five_four',
}"
>
svs
</router-link>
<div class="m-2">
<!-- Table Top -->
<b-row>
<!-- Per Page -->
<b-col
cols="12"
md="6"
class="d-flex align-items-center justify-content-start mb-1 mb-md-0"
>
<label>Show</label>
<b-form-select
v-model="queryBody.per_page"
:options="pageOptions"
:clearable="false"
@change="changePageCount"
class="per-page-selector d-inline-block mx-50"
/>
<label>entries</label>
</b-col>
<!-- Per Page -->
<!-- Search -->
<b-col
cols="12"
md="6"
>
<div class="d-flex align-items-center justify-content-end">
<b-input-group size="md" class="mr-2">
<b-form-input
v-model="filter"
type="search"
placeholder="Type here to Search ..."
v-on:keyup="findData"
@search="clearSearch"
></b-form-input>
<b-input-group-append>
<b-button
:disabled="!filter"
@click="findData"
variant="primary"
>Search</b-button>
</b-input-group-append>
</b-input-group>
<b-button
variant="primary"
>
<span class="text-nowrap">Add </span>
</b-button>
</div>
</b-col>
</b-row>
</div>
<b-table
class="position-relative"
:items="itemsData"
responsive
:fields="fields"
primary-key="id"
no-local-sorting
@sort-changed="customSorting"
show-empty
empty-text="No matching records found"
>
<template v-slot:cell(actions)="row">
<b-dropdown
variant="link"
no-caret
v-if="row.item.id !== -1"
>
<template #button-content>
<font-awesome-icon
:icon = "['fas', 'ellipsis-vertical']"
class="align-middle text-body"
/>
</template>
<b-dropdown-item @click="view(row.item.name,row.item.id)">
<font-awesome-icon :icon = "['fas', 'file-lines']" />
<span class="align-middle ml-50">Details</span>
</b-dropdown-item>
<b-dropdown-item @click="edit(row.item.name,row.item.id)">
<font-awesome-icon :icon = "['fas', 'pen']" />
<span class="align-middle ml-50">Edit</span>
</b-dropdown-item>
<b-dropdown-item @click="openModal(row.item)">
<font-awesome-icon :icon = "['fas', 'trash']" />
<span class="align-middle ml-50" >Delete</span>
</b-dropdown-item>
</b-dropdown>
</template>
</b-table>
<div class="mx-2 mb-2">
<b-row>
<b-col
cols="12"
sm="6"
class="d-flex align-items-center justify-content-center justify-content-sm-start"
>
<span class="text-muted">Showing {{ pageMeta.from }} to {{ pageMeta.to }} of {{ totalRows}} entries <span v-if="filter">(filtered from {{ rowsCount}} total entries)</span></span>
</b-col>
<!-- Pagination -->
<b-col
cols="12"
sm="6"
class="d-flex align-items-center justify-content-center justify-content-sm-end"
>
<b-pagination
v-model="queryBody.page"
:total-rows="totalRows"
:per-page="queryBody.per_page"
@page-change="pagination"
first-number
last-number
class="mb-0 mt-1 mt-sm-0"
prev-class="prev-item"
next-class="next-item"
>
<template #prev-text>
<font-awesome-icon :icon = "['fas', 'chevron-left']" />
</template>
<template #next-text>
<font-awesome-icon :icon = "['fas', 'chevron-right']" />
</template>
</b-pagination>
</b-col>
</b-row>
</div>
</b-card>
<div>
</div>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
selectedOption: null,
options: [
{ value: 'option1', text: 'Option 1' },
{ value: 'option2', text: 'Option 2' },
{ value: 'option3', text: 'Option 3' },
],
fields: [
{ key: 'id', label: 'ID' },
{ key: 'name', label: 'Name' },
{ key: 'description', label: 'Description' },
{key: "actions", label: "Actions" }
],
itemsData: [],
queryBody: {
sort_by: "",
order: "",
page: 1,
per_page: 5,
},
pageOptions: [5,10, 25, 50, 100],
lastPage: 1,
totalRows: 1,
filter: '',
rowItem:'',
rowsCount:0,
};
},
mounted(){
this.refetchData();
},
computed: {
pageMeta() {
const from = (this.queryBody.page - 1) * this.queryBody.per_page + 1;
const to =
this.queryBody.page * this.queryBody.per_page > this.totalRows
? this.totalRows
: this.queryBody.page * this.queryBody.per_page;
return { from, to };
}
},
methods:{
refetchData(){
this.getData(this.queryBody);
},
changePageCount(per_page) {
console.log('vamsi');
this.queryBody.page=1;
this.queryBody.per_page=per_page;
this.getData(this.queryBody);
},
findData() {
this.queryBody.query=this.filter;
this.getData(this.queryBody);
},
clearSearch(event)
{
if(event.target.value ==="")
{
if(!this.filter)
{
this.queryBody.page=1;
this.queryBody.per_page=10;
delete this.queryBody['query'];
this.getData(this.queryBody);
}
}
},
formateResponse(result){
let si_no=((this.queryBody.page)*(this.queryBody.per_page))-(this.queryBody.per_page);
this.itemsData = result.data.map((item, index) => ({
...item,
'si_no': si_no+index + 1, // Calculate serial number
}));
let pagination=result;
this.queryBody.page = parseInt(pagination.current_page);
this.queryBody.per_page = parseInt(pagination.per_page, 10);
this.lastPage = pagination.last_page;
this.totalRows = pagination.total;
this.rowsCount=pagination.rows_count;
// if (this.itemsData.length === 1) {
// this.itemsData.push({
// id: -1,
// name: '',
// });
// }
},
deleteEmptyKeys: function(data) {
var query = {};
for (var key in data) {
(data[key] !== '') ? query[key] = data[key]: '';
}
return query;
},
getData(params) {
const queryParams = {
params: this.deleteEmptyKeys(params),
};
axios
.get('cards', queryParams)
.then((response) => {
console.log(response.data.data);
this.formateResponse(response.data.data);
})
.catch((error) => {
// Handle errors here
console.error('Error fetching user data:', error);
});
},
customSorting: function(ctx) {
if (ctx.sortBy == "" || ctx.sortBy == null) {
return;
}
this.queryBody.order = ctx.sortDesc ? "asc" : "desc";
this.queryBody.sort_by = ctx.sortBy;
this.queryBody.page = 1;
this.getData(this.queryBody);
},
pagination: function(pageNumber) {
console.log('vamsi',pageNumber);
this.queryBody.page=pageNumber;
this.getData(this.queryBody);
},
}
};
</script>
<style >
.per-page-selector {
width: 90px;
}
</style>
==
No comments:
Post a Comment