diff --git a/public/js/pages/Cpeprovisioning/Cpeprovisioning.css b/public/js/pages/Cpeprovisioning/Cpeprovisioning.css index 940002eea..431fe7c92 100644 --- a/public/js/pages/Cpeprovisioning/Cpeprovisioning.css +++ b/public/js/pages/Cpeprovisioning/Cpeprovisioning.css @@ -13,7 +13,7 @@ body { .cpe-provisioning-page .filter-actions { display: flex; gap: 0.5rem; - padding-bottom: 0.25rem; + padding-bottom: 1rem; } .loading-indicator, .no-results-indicator { text-align: center; @@ -153,4 +153,8 @@ body { grid-template-columns: 1fr; gap: 0.75rem; } +} + +.tt-switch { + margin-bottom: 0 !important; } \ No newline at end of file diff --git a/public/js/pages/Cpeprovisioning/Cpeprovisioning.js b/public/js/pages/Cpeprovisioning/Cpeprovisioning.js index b87eb613b..e4c5550c6 100644 --- a/public/js/pages/Cpeprovisioning/Cpeprovisioning.js +++ b/public/js/pages/Cpeprovisioning/Cpeprovisioning.js @@ -11,9 +11,9 @@ Vue.component('Cpeprovisioning', {
- - - + + +
@@ -22,7 +22,7 @@ Vue.component('Cpeprovisioning', {
-
+
Loading...

Daten werden geladen...

@@ -111,6 +111,19 @@ Vue.component('Cpeprovisioning', {
+ +
+
+
+ Loading... +
+ Lade weitere Einträge... +
+
+ +
+ +
`, data() { @@ -127,6 +140,8 @@ Vue.component('Cpeprovisioning', { }, statusOptions: [ { value: '0', text: 'Offen' }, { value: '1', text: 'Abgeschlossen' } ], delayOptions: [ { value: '1', text: 'Nicht anzeigen' }, { value: '0', text: 'Anzeigen' } ], + page: 1, + pagination: {}, } }, computed: { @@ -139,13 +154,22 @@ Vue.component('Cpeprovisioning', { } }, methods: { - async fetchData() { + async fetchData(isNewSearch = false) { + if (isNewSearch) { + this.page = 1; + this.items = []; + this.filteredItems = []; + this.pagination = {}; + } + + if (!isNewSearch && this.pagination.total_pages && this.page > this.pagination.total_pages) { + return; // No more pages to load + } + this.loading = true; - this.items = []; - this.filteredItems = []; const payload = { - pagination: { page: 1, per_page: 100 }, + pagination: { page: this.page, per_page: 25 }, filters: { network_id: this.filters.network_id, routerconfig_finished: this.filters.routerconfig_finished, @@ -156,7 +180,7 @@ Vue.component('Cpeprovisioning', { try { const { data } = await axios.post(window.TT_CONFIG.CPE_PROV_API_GET_URL, payload); - this.items = (data.rows || []).map(item => ({ + const newItems = (data.rows || []).map(item => ({ ...item, isDirty: false, isSaving: false, @@ -165,6 +189,15 @@ Vue.component('Cpeprovisioning', { owner_phone: item.owner_phone || '', owner_email: item.owner_email || '', })); + + if (isNewSearch) { + this.items = newItems; + } else { + this.items.push(...newItems); + } + + this.pagination = data.pagination; + this.page++; this.applyClientSideFilter(); } catch (error) { console.error("Error fetching CPE data:", error); @@ -182,14 +215,14 @@ Vue.component('Cpeprovisioning', { this.filteredItems = this.items.filter(item => { return (item.customer && item.customer.toLowerCase().includes(search)) || (item.spin && item.spin.toLowerCase().includes(search)) || - (item.owner_address && item.owner_address.toLowerCase().includes(search)) || + (item.owner_full_address && item.owner_full_address.toLowerCase().includes(search)) || (item.product_name && item.product_name.toLowerCase().includes(search)) || (item.network && item.network.toLowerCase().includes(search)); }); }, resetFilters() { this.filters = { network_id: '', routerconfig_finished: '0', hide_delayed_finish: '1', owner: '' }; - this.fetchData(); + this.fetchData(true); }, markDirty(item) { this.$set(item, 'isDirty', true); @@ -231,9 +264,8 @@ Vue.component('Cpeprovisioning', { this.window.notify('success', 'Versanddaten wurden automatisch ausgefüllt.'); } }, - async saveCpe(row) { - this.$set(row, 'isSaving', true); - const payload = { + _buildSavePayload(row) { + return { id: row.cpe_id, order_id: row.order_id, orderproduct_id: row.orderproduct_id, @@ -244,6 +276,10 @@ Vue.component('Cpeprovisioning', { shipping: row.cpe_data.shipping ? 1 : 0, routerconfig_finished: row.cpe_data.routerconfig_finished ? 1 : 0, }; + }, + async saveCpe(row) { + this.$set(row, 'isSaving', true); + const payload = this._buildSavePayload(row); try { const { data } = await axios.post(this.window.TT_CONFIG.CPE_PROV_API_SAVE_URL, payload); @@ -255,7 +291,7 @@ Vue.component('Cpeprovisioning', { } else { const index = this.items.findIndex(item => item.orderproduct_id === row.orderproduct_id); if (index !== -1) { - this.items[index].isDirty = false; + this.$set(this.items[index], 'isDirty', false); } } } else { @@ -269,6 +305,6 @@ Vue.component('Cpeprovisioning', { } }, mounted() { - this.fetchData(); + this.fetchData(true); } }); \ No newline at end of file