new v3 layout
This commit is contained in:
@@ -10,147 +10,123 @@ Vue.component('Cpeprovisioning', {
|
||||
template: `
|
||||
<div class="cpe-provisioning-page">
|
||||
<tt-card>
|
||||
<div class="filter-card">
|
||||
<div class="filter-grid">
|
||||
<tt-select label="Netzgebiet" :options="networkOptions" v-model="filters.network_id" sm/>
|
||||
<tt-select label="Provisioningstatus" :options="statusOptions" v-model="filters.routerconfig_finished" sm/>
|
||||
<tt-select label="Verzögerte Herstellung" :options="delayOptions" v-model="filters.hide_delayed_finish" sm/>
|
||||
<tt-input label="Kunde" v-model="filters.owner" sm placeholder="Name, SPIN, ..."/>
|
||||
<div class="filter-actions">
|
||||
<tt-button text="Anwenden" @click="applyFilters" additional-class="btn-primary" sm/>
|
||||
<tt-button text="Zurücksetzen" @click="resetFilters" additional-class="btn-secondary" sm/>
|
||||
</div>
|
||||
<div class="filter-grid">
|
||||
<tt-select label="Netzgebiet" :options="networkOptions" v-model="filters.network_id" sm/>
|
||||
<tt-select label="Provisioningstatus" :options="statusOptions" v-model="filters.routerconfig_finished" sm/>
|
||||
<tt-select label="Verzögerte Herstellung" :options="delayOptions" v-model="filters.hide_delayed_finish" sm/>
|
||||
<tt-input label="Suche" v-model="filters.owner" sm placeholder="Kunde, SPIN, Adresse..." @input="applyClientSideFilter"/>
|
||||
<div class="filter-actions">
|
||||
<tt-button text="Anwenden" @click="fetchData(true)" additional-class="btn-primary" sm/>
|
||||
<tt-button text="Zurücksetzen" @click="resetFilters" additional-class="btn-secondary" sm/>
|
||||
</div>
|
||||
</div>
|
||||
</tt-card>
|
||||
|
||||
<tt-card :no-body-padding-top="true">
|
||||
<tt-table
|
||||
:fetch-url="window.TT_CONFIG.CPE_PROV_API_GET_URL"
|
||||
:config="tableConfig"
|
||||
ref="cpeTable"
|
||||
key="cpeProvisioningTable"
|
||||
ssr>
|
||||
<div v-if="loading" class="loading-indicator">
|
||||
<div class="spinner-border text-primary" role="status"><span class="sr-only">Loading...</span></div>
|
||||
<p class="mt-2">Daten werden geladen...</p>
|
||||
</div>
|
||||
|
||||
<template v-slot:customer="{ row }">
|
||||
<div><strong>{{ row.customer }}</strong></div>
|
||||
<div><small class="text-muted">SPIN: {{ row.spin }}</small></div>
|
||||
<div><small>{{ row.network }}</small></div>
|
||||
</template>
|
||||
<div v-if="!loading && filteredItems.length === 0" class="no-results-indicator">
|
||||
<i class="fas fa-info-circle fa-2x text-muted mb-2"></i>
|
||||
<p>Keine Einträge für die aktuellen Filter gefunden.</p>
|
||||
</div>
|
||||
|
||||
<template v-slot:product="{ row }">
|
||||
<div><strong>{{ row.product_name }}</strong></div>
|
||||
<div><small class="text-muted">{{ row.product_code }}</small></div>
|
||||
<div>
|
||||
<small>{{ row.access_type }}</small>
|
||||
<small><i class="fas fa-arrow-down"></i> {{ row.access_type_down }} Mbit/s</small>
|
||||
<small><i class="fas fa-arrow-up"></i> {{ row.access_type_up }} Mbit/s</small>
|
||||
<div class="cpe-cards-container">
|
||||
<div v-for="item in filteredItems" :key="item.orderproduct_id" class="cpe-card" :class="{ 'is-dirty': item.isDirty }">
|
||||
<div class="cpe-card-header">
|
||||
<div class="customer-info">
|
||||
<strong>{{ item.customer }}</strong>
|
||||
<small class="text-muted">SPIN: <span class="text-pink">{{ item.spin }}</span></small>
|
||||
</div>
|
||||
|
||||
<div class="mt-1 d-flex align-items-center">
|
||||
<a target="_blank" :href="window.TT_CONFIG.ORDER_URL + '/Index/?id=' + row.order_id + '&addJournal=1'" class="mr-2">
|
||||
<i class="fas fa-scroll"></i>
|
||||
<div class="location-contact-header">
|
||||
<div><strong>Netzgebiet:</strong> {{ item.network }}</div>
|
||||
<div><strong>POP:</strong> {{ item.pop_name || 'N/A' }}</div>
|
||||
<div v-if="item.owner_phone"><i class="fas fa-phone mr-2 text-muted"></i>{{ item.owner_phone }}</div>
|
||||
<div v-if="item.owner_email"><i class="fas fa-envelope mr-2 text-muted"></i>{{ item.owner_email }}</div>
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<a target="_blank" :href="window.TT_CONFIG.ORDER_URL + '/Index/?id=' + item.order_id + '&addJournal=1'">
|
||||
<tt-tooltip text="Bestelljournal" position="top"><i class="fas fa-scroll"></i></tt-tooltip>
|
||||
</a>
|
||||
<a target="_blank" :href="window.TT_CONFIG.CPE_PROV_PRINT_PDF_URL + '?order_id=' + row.order_id" class="mr-2">
|
||||
<i class="fas fa-print"></i>
|
||||
<a target="_blank" :href="window.TT_CONFIG.CPE_PROV_PRINT_PDF_URL + '?order_id=' + item.order_id">
|
||||
<tt-tooltip text="Label drucken" position="top"><i class="fas fa-print"></i></tt-tooltip>
|
||||
</a>
|
||||
<template v-if="row.vot || row.hw || row.voip || row.note">
|
||||
<tt-tooltip v-if="row.vot" text="Vorortinstallation" position="top">
|
||||
<i class="fas fa-tools text-purple mr-2"></i>
|
||||
<tt-tooltip v-if="item.vot" text="Vorortinstallation" position="top"><i class="fas fa-tools text-purple"></i></tt-tooltip>
|
||||
<tt-tooltip v-if="item.hw" :text="item.hw" position="top"><i class="fas fa-shopping-bag text-purple"></i></tt-tooltip>
|
||||
<tt-tooltip v-if="item.voip" text="Voice Produkt vorhanden" position="top"><i class="fas fa-phone text-purple"></i></tt-tooltip>
|
||||
<tt-tooltip v-if="item.note" :text="item.note" position="top" allow-wrapping><i class="fas fa-clipboard-list text-purple"></i></tt-tooltip>
|
||||
<a target="_blank" :href="item.snopp_url" v-if="item.show_snopp_button">
|
||||
<tt-tooltip text="SNOPP" position="top" allow-wrapping>
|
||||
<img style="height: 18px;" src="/img/snop-logo.png" alt="Snop Logo">
|
||||
</tt-tooltip>
|
||||
<tt-tooltip v-if="row.hw" :text="row.hw" position="top" class="mr-2">
|
||||
<i class="fas fa-shopping-bag text-purple"></i>
|
||||
</tt-tooltip>
|
||||
<tt-tooltip v-if="row.voip" text="Voice Produkt vorhanden" position="top" class="mr-2">
|
||||
<i class="fas fa-phone text-purple"></i>
|
||||
</tt-tooltip>
|
||||
<tt-tooltip v-if="row.note" :text="row.note" position="top" allow-wrapping class="mr-2">
|
||||
<i class="fas fa-clipboard-list text-purple"></i>
|
||||
</tt-tooltip>
|
||||
<a target="_blank" :href="row.snopp_url" class="mr-2">
|
||||
<tt-tooltip v-if="row.show_snopp_button" text="SNOPP" position="top" allow-wrapping>
|
||||
<img style="height: 18px; vertical-align: middle;" class="logo-top-search" src="/img/snop-logo.png" alt="Snop Logo">
|
||||
</tt-tooltip>
|
||||
</a>
|
||||
</template>
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<template v-slot:vlans="{ row }">
|
||||
<div class="vlans-container">
|
||||
<template v-for="(vlan, key) in row.vlans">
|
||||
<tt-chip v-if="vlan.tag" class="vlan-chip" :key="key">
|
||||
<input type="checkbox" :checked="vlan.checked" @change="markDirty(row, 1); vlan.checked = !vlan.checked"/>
|
||||
<span>{{ key.charAt(0).toUpperCase() + key.slice(1) }}: {{ vlan.tag }}</span>
|
||||
</tt-chip>
|
||||
</template>
|
||||
<div class="cpe-card-content">
|
||||
<div class="content-column">
|
||||
<h5>Router Konfiguration</h5>
|
||||
<tt-select label="Router" :options="routerOptions" v-model="item.cpe_data.routertype" @input="markDirty(item); checkShipping(item)" sm no-form-group/>
|
||||
<tt-input label="WLAN SSID" v-model="item.cpe_data.wifi_ssid" @input="markDirty(item)" sm no-form-group/>
|
||||
<tt-input label="WPA Key" v-model="item.cpe_data.wifi_pass" @input="markDirty(item)" sm no-form-group/>
|
||||
<tt-input label="Router MAC" v-model="item.cpe_data.mac" @input="markDirty(item)" sm no-form-group/>
|
||||
<tt-input v-if="item.termination_id" label="ONT SN" v-model="item.ont_sn" @input="markDirty(item)" sm no-form-group :additional-props="{ placeholder: item.ont_deployed ? 'ONT montiert' : 'ONT nicht montiert' }"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-slot:expandedRow="{ row }">
|
||||
<div class="cpe-details-grid">
|
||||
<h5 class="section-title">Router Konfiguration</h5>
|
||||
<tt-select label="Router" :options="routerOptions" v-model="row.cpe_data.routertype" @input="markDirty(row, 2)" sm/>
|
||||
<tt-input label="WLAN SSID" v-model="row.cpe_data.wifi_ssid" @input="markDirty(row, 3)" sm/>
|
||||
<tt-input label="WPA Key" v-model="row.cpe_data.wifi_pass" @input="markDirty(row, 4)" sm/>
|
||||
<tt-input label="Router MAC" v-model="row.cpe_data.mac" @input="markDirty(row, 5)" sm/>
|
||||
<tt-input v-if="row.termination_id && row.ont_deployed !== 0" label="ONT SN" v-model="row.ont_sn" @input="markDirty(row, 6)" sm/>
|
||||
|
||||
<h5 class="section-title">Versand</h5>
|
||||
<tt-checkbox label="Versandauftrag" v-model="row.cpe_data.shipping" @input="markDirty(row, 7);checkShipping(row)" sm/>
|
||||
<tt-input label="Gewicht (kg)" v-model="row.cpe_data.ship_weight" @input="markDirty(row, 8)" sm type="number" :disabled="!row.cpe_data.shipping"/>
|
||||
<tt-input label="Länge (cm)" v-model="row.cpe_data.ship_length" @input="markDirty(row, 9)" sm type="number" :disabled="!row.cpe_data.shipping"/>
|
||||
<tt-input label="Breite (cm)" v-model="row.cpe_data.ship_width" @input="markDirty(row, 10)" sm type="number" :disabled="!row.cpe_data.shipping"/>
|
||||
<tt-input label="Höhe (cm)" v-model="row.cpe_data.ship_height" @input="markDirty(row, 11)" sm type="number" :disabled="!row.cpe_data.shipping"/>
|
||||
|
||||
<h5 class="section-title">Abschluss</h5>
|
||||
<div style="grid-column: 1 / -1;">
|
||||
<tt-textarea label="Kommentar" v-model="row.cpe_data.note" @input="markDirty(row, 12)" sm/>
|
||||
</div>
|
||||
<tt-checkbox label="Konfig abgeschlossen" v-model="row.cpe_data.routerconfig_finished" @input="markDirty(row, 13)" sm/>
|
||||
|
||||
<div class="save-button-container">
|
||||
<tt-button
|
||||
text="Speichern"
|
||||
@click="saveCpe(row)"
|
||||
:loading="row.isSaving"
|
||||
:disabled="!row.isDirty"
|
||||
:additional-class="row.isDirty ? 'btn-success' : 'btn-secondary'"/>
|
||||
<div class="content-column">
|
||||
<h5>Versand & Abschluss</h5>
|
||||
<tt-checkbox label="Versandauftrag" v-model="item.cpe_data.shipping" @input="markDirty(item);checkShipping(item)" sm/>
|
||||
<div class="shipping-dims">
|
||||
<tt-input label="Gewicht" v-model="item.cpe_data.ship_weight" @input="markDirty(item)" sm type="number" :disabled="!item.cpe_data.shipping" placeholder="kg"/>
|
||||
<tt-input label="Länge" v-model="item.cpe_data.ship_length" @input="markDirty(item)" sm type="number" :disabled="!item.cpe_data.shipping" placeholder="cm"/>
|
||||
<tt-input label="Breite" v-model="item.cpe_data.ship_width" @input="markDirty(item)" sm type="number" :disabled="!item.cpe_data.shipping" placeholder="cm"/>
|
||||
<tt-input label="Höhe" v-model="item.cpe_data.ship_height" @input="markDirty(item)" sm type="number" :disabled="!item.cpe_data.shipping" placeholder="cm"/>
|
||||
</div>
|
||||
<tt-textarea label="Kommentar" v-model="item.cpe_data.note" @input="markDirty(item)" sm no-form-group/>
|
||||
</div>
|
||||
</template>
|
||||
</tt-table>
|
||||
</tt-card>
|
||||
|
||||
<div class="content-column action-column">
|
||||
<h5>Produkt & VLANs</h5>
|
||||
<p><strong>{{ item.product_name }}</strong> <small class="text-muted">{{ item.product_code }}</small></p>
|
||||
<p>
|
||||
<span class="badge badge-info">{{ item.access_type }}</span>
|
||||
<span class="ml-2"><i class="fas fa-arrow-down"></i> {{ item.access_type_down }}</span>
|
||||
<span class="ml-2"><i class="fas fa-arrow-up"></i> {{ item.access_type_up }}</span>
|
||||
</p>
|
||||
<div class="vlans-container mt-2">
|
||||
<template v-for="(vlan, key) in item.vlans">
|
||||
<tt-chip v-if="vlan.tag" class="vlan-chip" :key="key">
|
||||
<input type="checkbox" :checked="vlan.checked" @change="markDirty(item); vlan.checked = !vlan.checked"/>
|
||||
<span>{{ key.charAt(0).toUpperCase() + key.slice(1) }}: {{ vlan.tag }}</span>
|
||||
</tt-chip>
|
||||
</template>
|
||||
</div>
|
||||
<div class="finish-wrapper mt-auto">
|
||||
<label class="col-form-label col-form-label-sm">Konfig abgeschlossen</label>
|
||||
<tt-switch v-model="item.cpe_data.routerconfig_finished" @input="markDirty(item)"/>
|
||||
</div>
|
||||
<tt-button text="Speichern" @click="saveCpe(item)" :loading="item.isSaving" :disabled="!item.isDirty" :additional-class="item.isDirty ? 'btn-success' : 'btn-secondary'"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
data() {
|
||||
return {
|
||||
window,
|
||||
loading: true,
|
||||
items: [],
|
||||
filteredItems: [],
|
||||
filters: {
|
||||
network_id: '',
|
||||
routerconfig_finished: '0',
|
||||
hide_delayed_finish: '1',
|
||||
owner: ''
|
||||
},
|
||||
statusOptions: [
|
||||
{ value: '0', text: 'Offen' },
|
||||
{ value: '1', text: 'Abgeschlossen' }
|
||||
],
|
||||
delayOptions: [
|
||||
{ value: '1', text: 'Nicht anzeigen' },
|
||||
{ value: '0', text: 'Anzeigen' }
|
||||
],
|
||||
tableConfig: {
|
||||
key: 'cpeProvisioning',
|
||||
tableHeader: 'CPE Provisioning',
|
||||
expandCondition: () => true,
|
||||
customRowClass: row => (row.isDirty ? 'is-dirty' : ''),
|
||||
headers: [
|
||||
{ key: 'customer', text: 'Kunde', sortable: false, filter: false, priority: 100 },
|
||||
{ key: 'product', text: 'Produkt', sortable: false, filter: false, priority: 90 },
|
||||
{ key: 'vlans', text: 'VLANs', sortable: false, filter: false, priority: 80 },
|
||||
]
|
||||
}
|
||||
statusOptions: [ { value: '0', text: 'Offen' }, { value: '1', text: 'Abgeschlossen' } ],
|
||||
delayOptions: [ { value: '1', text: 'Nicht anzeigen' }, { value: '0', text: 'Anzeigen' } ],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@@ -163,47 +139,100 @@ Vue.component('Cpeprovisioning', {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
applyFilters(fetch = true) {
|
||||
const table = this.$refs.cpeTable;
|
||||
if (table) {
|
||||
table.filters = JSON.parse(JSON.stringify(this.filters));
|
||||
if (fetch) table.fetchData(1);
|
||||
async fetchData() {
|
||||
this.loading = true;
|
||||
this.items = [];
|
||||
this.filteredItems = [];
|
||||
|
||||
const payload = {
|
||||
pagination: { page: 1, per_page: 100 },
|
||||
filters: {
|
||||
network_id: this.filters.network_id,
|
||||
routerconfig_finished: this.filters.routerconfig_finished,
|
||||
hide_delayed_finish: this.filters.hide_delayed_finish,
|
||||
},
|
||||
order: { key: 'order_id', order: 'desc' }
|
||||
};
|
||||
|
||||
try {
|
||||
const { data } = await axios.post(window.TT_CONFIG.CPE_PROV_API_GET_URL, payload);
|
||||
this.items = (data.rows || []).map(item => ({
|
||||
...item,
|
||||
isDirty: false,
|
||||
isSaving: false,
|
||||
pop_name: item.pop_name || 'N/A',
|
||||
owner_address: `${item.owner_street || ''} ${item.owner_housenumber || ''}, ${item.owner_zip || ''} ${item.owner_city || ''}`,
|
||||
owner_phone: item.owner_phone || '',
|
||||
owner_email: item.owner_email || '',
|
||||
}));
|
||||
this.applyClientSideFilter();
|
||||
} catch (error) {
|
||||
console.error("Error fetching CPE data:", error);
|
||||
window.notify('error', 'Fehler beim Laden der Daten.');
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
applyClientSideFilter() {
|
||||
if (!this.filters.owner) {
|
||||
this.filteredItems = this.items;
|
||||
return;
|
||||
}
|
||||
const search = this.filters.owner.toLowerCase();
|
||||
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.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.applyFilters();
|
||||
this.filters = { network_id: '', routerconfig_finished: '0', hide_delayed_finish: '1', owner: '' };
|
||||
this.fetchData();
|
||||
},
|
||||
markDirty(row, field) {
|
||||
console.log(`Marking row as dirty for field ${field}`);
|
||||
this.$set(row, 'isDirty', true);
|
||||
markDirty(item) {
|
||||
this.$set(item, 'isDirty', true);
|
||||
},
|
||||
async checkShipping (row) {
|
||||
async checkShipping(row) {
|
||||
await this.$nextTick();
|
||||
let wasPrefilled = false;
|
||||
|
||||
if (row.cpe_data.shipping && row.cpe_data.routertype) {
|
||||
const shippingData = this.window.TT_CONFIG.ROUTER_SHIPPING_DATA[row.cpe_data.routertype];
|
||||
if (shippingData) {
|
||||
if (!row.cpe_data.ship_weight) row.cpe_data.ship_weight = shippingData.weight;
|
||||
if (!row.cpe_data.ship_length) row.cpe_data.ship_length = shippingData.length;
|
||||
if (!row.cpe_data.ship_width) row.cpe_data.ship_width = shippingData.width;
|
||||
if (!row.cpe_data.ship_height) row.cpe_data.ship_height = shippingData.height;
|
||||
if (!row.cpe_data.ship_weight) {
|
||||
this.$set(row.cpe_data, 'ship_weight', shippingData.weight);
|
||||
wasPrefilled = true;
|
||||
}
|
||||
if (!row.cpe_data.ship_length) {
|
||||
this.$set(row.cpe_data, 'ship_length', shippingData.length);
|
||||
wasPrefilled = true;
|
||||
}
|
||||
if (!row.cpe_data.ship_width) {
|
||||
this.$set(row.cpe_data, 'ship_width', shippingData.width);
|
||||
wasPrefilled = true;
|
||||
}
|
||||
if (!row.cpe_data.ship_height) {
|
||||
this.$set(row.cpe_data, 'ship_height', shippingData.height);
|
||||
wasPrefilled = true;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
} else if (!row.cpe_data.shipping) {
|
||||
// Clear the fields if shipping is unchecked
|
||||
row.cpe_data.ship_weight = '';
|
||||
row.cpe_data.ship_length = '';
|
||||
row.cpe_data.ship_width = '';
|
||||
row.cpe_data.ship_height = '';
|
||||
}
|
||||
|
||||
if (wasPrefilled) {
|
||||
this.markDirty(row);
|
||||
this.window.notify('success', 'Versanddaten wurden automatisch ausgefüllt.');
|
||||
}
|
||||
},
|
||||
async saveCpe(row) {
|
||||
this.$set(row, 'isSaving', true);
|
||||
|
||||
const payload = {
|
||||
id: row.cpe_id,
|
||||
order_id: row.order_id,
|
||||
@@ -220,8 +249,15 @@ Vue.component('Cpeprovisioning', {
|
||||
const { data } = await axios.post(this.window.TT_CONFIG.CPE_PROV_API_SAVE_URL, payload);
|
||||
if (data.success) {
|
||||
this.window.notify('success', data.message);
|
||||
this.$set(row, 'isDirty', false);
|
||||
this.$refs.cpeTable.refreshTable();
|
||||
if (this.filters.routerconfig_finished === '0' && payload.routerconfig_finished) {
|
||||
this.items = this.items.filter(item => item.orderproduct_id !== row.orderproduct_id);
|
||||
this.applyClientSideFilter();
|
||||
} else {
|
||||
const index = this.items.findIndex(item => item.orderproduct_id === row.orderproduct_id);
|
||||
if (index !== -1) {
|
||||
this.items[index].isDirty = false;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
this.window.notify('error', data.message || 'Fehler beim Speichern.');
|
||||
}
|
||||
@@ -233,6 +269,6 @@ Vue.component('Cpeprovisioning', {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.applyFilters(false);
|
||||
this.fetchData();
|
||||
}
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user