Skip to content

P
Platform
Unverified Commit ca40f209 authored by Nicolas Widart's avatar Nicolas Widart
Browse files
Options

Refactoring table component to remove duplicate server calls

parent 476fd8bc
Hide whitespace changes
Inline Side-by-side
Showing with 59 additions and 116 deletions
Modules/Page/Assets/js/components/PageTableServerSide.vue
View file @ ca40f209
...@@ -88,92 +88,65 @@ ...@@ -88,92 +88,65 @@
data() { data() {
return { return {
data, data,
meta: {}, meta: {
order_meta: {}, current_page: 1,
per_page: 10,
},
order_meta: {
order_by: '',
order: '',
},
links: {}, links: {},
searchQuery: '', searchQuery: '',
tableIsLoading: false, tableIsLoading: false,
} }
}, },
methods: { methods: {
fetchData() { queryServer(customProperties) {
this.tableIsLoading = true; let properties = {
axios.get(route('api.page.page.indexServerSide')) page: this.meta.current_page,
per_page: this.meta.per_page,
order_by: this.order_meta.order_by,
order: this.order_meta.order,
search: this.searchQuery,
};
axios.get(route('api.page.page.indexServerSide', _.merge(properties, customProperties)))
.then(response => { .then(response => {
this.tableIsLoading = false; this.tableIsLoading = false;
this.data = response.data.data; this.data = response.data.data;
this.meta = response.data.meta; this.meta = response.data.meta;
this.links = response.data.links; this.links = response.data.links;
this.order_meta.order_by = properties.order_by;
this.order_meta.order = properties.order;
}); });
}, },
fetchData() {
this.tableIsLoading = true;
this.queryServer();
},
goToEdit(scope) { goToEdit(scope) {
this.$router.push({name: 'admin.page.page.edit', params: {pageId: scope.row.id}}) this.$router.push({name: 'admin.page.page.edit', params: {pageId: scope.row.id}})
}, },
handleSizeChange(event) { handleSizeChange(event) {
console.log('per page :' + event); console.log('per page :' + event);
this.tableIsLoading = true; this.tableIsLoading = true;
axios.get(route('api.page.page.indexServerSide', { this.queryServer({per_page: event});
per_page: event,
page: this.meta.current_page,
order_by: this.order_meta.order_by,
order: this.order_meta.order,
}))
.then(response => {
this.tableIsLoading = false;
this.data = response.data.data;
this.meta = response.data.meta;
this.links = response.data.links;
});
}, },
handleCurrentChange(event) { handleCurrentChange(event) {
console.log('current page :' + event); console.log('current page :' + event);
this.tableIsLoading = true; this.tableIsLoading = true;
axios.get(route('api.page.page.indexServerSide', { this.queryServer({page: event});
page: event,
per_page: this.meta.per_page,
order_by: this.order_meta.order_by,
order: this.order_meta.order,
search: this.searchQuery,
}))
.then(response => {
this.tableIsLoading = false;
this.data = response.data.data;
this.meta = response.data.meta;
this.links = response.data.links;
});
}, },
handleSortChange(event) { handleSortChange(event) {
console.log('sorting', event); console.log('sorting', event);
this.tableIsLoading = true; this.tableIsLoading = true;
axios.get(route('api.page.page.indexServerSide', { this.queryServer({order_by: event.prop, order: event.order,});
page: this.meta.current_page,
per_page: this.meta.per_page,
order_by: event.prop,
order: event.order,
search: this.searchQuery,
}))
.then(response => {
this.tableIsLoading = false;
this.data = response.data.data;
this.meta = response.data.meta;
this.links = response.data.links;
this.order_meta.order_by = event.prop;
this.order_meta.order = event.order;
});
}, },
performSearch(query) { performSearch(query) {
console.log('searching:' + query); console.log('searching:' + query);
this.tableIsLoading = true; this.tableIsLoading = true;
axios.get(route('api.page.page.indexServerSide', { this.queryServer({search: query});
search: query,
}))
.then(response => {
this.tableIsLoading = false;
this.data = response.data.data;
this.meta = response.data.meta;
this.links = response.data.links;
});
}, },
}, },
mounted() { mounted() {
......
public/js/app.js
View file @ ca40f209
...@@ -31335,7 +31335,7 @@ window.axios.interceptors.response.use(null, function (error) { ...@@ -31335,7 +31335,7 @@ window.axios.interceptors.response.use(null, function (error) {
"use strict"; "use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true }); Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/*! /*!
* vue-i18n v7.2.0 * vue-i18n v7.2.0
* (c) 2017 kazuya kawaguchi * (c) 2017 kazuya kawaguchi
* Released under the MIT License. * Released under the MIT License.
*/ */
...@@ -72851,8 +72851,15 @@ exports.default = { ...@@ -72851,8 +72851,15 @@ exports.default = {
data: function data() { data: function data() {
return { return {
data: _data, data: _data,
meta: {}, meta: {
order_meta: {}, meta: {
current_page: 1,
per_page: 10
},
order_meta: {
order_by: '',
order: ''
},
links: {}, links: {},
searchQuery: '', searchQuery: '',
tableIsLoading: false tableIsLoading: false
...@@ -72860,89 +72867,52 @@ exports.default = { ...@@ -72860,89 +72867,52 @@ exports.default = {
}, },
methods: { methods: {
fetchData: function fetchData() { queryServer: function queryServer(customProperties) {
var _this = this; var _this = this;
this.tableIsLoading = true; var properties = {
_axios2.default.get(route('api.page.page.indexServerSide')).then(function (response) { page: this.meta.current_page,
per_page: this.meta.per_page,
order_by: this.order_meta.order_by,
order: this.order_meta.order,
search: this.searchQuery
};
_axios2.default.get(route('api.page.page.indexServerSide', _lodash2.default.merge(properties, customProperties))).then(function (response) {
_this.tableIsLoading = false; _this.tableIsLoading = false;
_this.data = response.data.data; _this.data = response.data.data;
_this.meta = response.data.meta; _this.meta = response.data.meta;
_this.links = response.data.links; _this.links = response.data.links;
_this.order_meta.order_by = properties.order_by;
_this.order_meta.order = properties.order;
}); });
}, },
fetchData: function fetchData() {
this.tableIsLoading = true;
this.queryServer();
},
goToEdit: function goToEdit(scope) { goToEdit: function goToEdit(scope) {
this.$router.push({ name: 'admin.page.page.edit', params: { pageId: scope.row.id } }); this.$router.push({ name: 'admin.page.page.edit', params: { pageId: scope.row.id } });
}, },
handleSizeChange: function handleSizeChange(event) { handleSizeChange: function handleSizeChange(event) {
var _this2 = this;
console.log('per page :' + event); console.log('per page :' + event);
this.tableIsLoading = true; this.tableIsLoading = true;
_axios2.default.get(route('api.page.page.indexServerSide', { this.queryServer({ per_page: event });
per_page: event,
page: this.meta.current_page,
order_by: this.order_meta.order_by,
order: this.order_meta.order
})).then(function (response) {
_this2.tableIsLoading = false;
_this2.data = response.data.data;
_this2.meta = response.data.meta;
_this2.links = response.data.links;
});
}, },
handleCurrentChange: function handleCurrentChange(event) { handleCurrentChange: function handleCurrentChange(event) {
var _this3 = this;
console.log('current page :' + event); console.log('current page :' + event);
this.tableIsLoading = true; this.tableIsLoading = true;
_axios2.default.get(route('api.page.page.indexServerSide', { this.queryServer({ page: event });
page: event,
per_page: this.meta.per_page,
order_by: this.order_meta.order_by,
order: this.order_meta.order,
search: this.searchQuery
})).then(function (response) {
_this3.tableIsLoading = false;
_this3.data = response.data.data;
_this3.meta = response.data.meta;
_this3.links = response.data.links;
});
}, },
handleSortChange: function handleSortChange(event) { handleSortChange: function handleSortChange(event) {
var _this4 = this;
console.log('sorting', event); console.log('sorting', event);
this.tableIsLoading = true; this.tableIsLoading = true;
_axios2.default.get(route('api.page.page.indexServerSide', { this.queryServer({ order_by: event.prop, order: event.order });
page: this.meta.current_page,
per_page: this.meta.per_page,
order_by: event.prop,
order: event.order,
search: this.searchQuery
})).then(function (response) {
_this4.tableIsLoading = false;
_this4.data = response.data.data;
_this4.meta = response.data.meta;
_this4.links = response.data.links;
_this4.order_meta.order_by = event.prop;
_this4.order_meta.order = event.order;
});
}, },
performSearch: function performSearch(query) { performSearch: function performSearch(query) {
var _this5 = this;
console.log('searching:' + query); console.log('searching:' + query);
this.tableIsLoading = true; this.tableIsLoading = true;
_axios2.default.get(route('api.page.page.indexServerSide', { this.queryServer({ search: query });
search: query
})).then(function (response) {
_this5.tableIsLoading = false;
_this5.data = response.data.data;
_this5.meta = response.data.meta;
_this5.links = response.data.links;
});
} }
}, },
mounted: function mounted() { mounted: function mounted() {
...@@ -75140,4 +75110,4 @@ exports.default = { ...@@ -75140,4 +75110,4 @@ exports.default = {
}; };
/***/ }) /***/ })
/******/ ]); /******/ ]);
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Technounit-GROUP 2023