96 lines
4.6 KiB
JavaScript
96 lines
4.6 KiB
JavaScript
Vue.component('OrderProductchange', {
|
|
//language=Vue
|
|
template: `
|
|
<tt-card style="min-height:50vh;" class="border-top-purple">
|
|
|
|
<div class="row">
|
|
<div class="col">
|
|
|
|
<p class="alert alert-purple">Wählen Sie den Vertragsinhaber aus, um die aktiven Produkte anzuzeigen.<br />
|
|
Produktwechsel sollten immer mit dem <strong>Hauptprodukt</strong> durchgeführt werden. Dies ist fast immer das <strong>Internetzugangsprodukt</strong>.</p>
|
|
|
|
<tt-autocomplete :api-url="window['TT_CONFIG']['ADDRESS_API_URL'] + '?do=findAddress'"
|
|
v-model="owner_id" label="Vertragsinhaber suchen" placeholder="Tippen zum Suchen..."></tt-autocomplete>
|
|
|
|
<div v-if="owner_id !== ''">
|
|
<tt-card class="col-6" v-if="owner_id !== '' && typeof owner === 'object'">
|
|
{{owner.name}}<br/>
|
|
{{owner.street}}<br/>
|
|
{{owner.zip}} {{owner.city}}
|
|
</tt-card>
|
|
|
|
<tt-table
|
|
:fetch-url="\`\${window['TT_CONFIG']['CONTRACT_API_URL']}?do=findContracts&owner_id=\${owner_id}\`"
|
|
:config="OrderProductchangeTableConfig" :small="false" class="sm"
|
|
disable-filtering ref="contractTable">
|
|
|
|
<template v-slot:actions="{ row }">
|
|
<a v-if="!row.product_name.match(/Service Pauschale/i) && row.billing_period > 0"
|
|
:href="window['TT_CONFIG']['ORDER_PRODUCTCHANGE_URL'] + '?contract_id=' + row.id"
|
|
class="btn btn-purple"><i class="fas fa-fw fa-square-up"></i> Produktwechsel erstellen</a>
|
|
</template>
|
|
<template v-slot:billing_period="{ row }">
|
|
<span v-if="row.billing_period == 1">Monatlich</span>
|
|
<span v-else-if="row.billing_period == 12">Jährlich</span>
|
|
<span v-else-if="row.billing_period == 0">Einmalig</span>
|
|
<span v-else>{{row.billing_period}}</span>
|
|
</template>
|
|
<template v-slot:finish_date="{ row }">
|
|
<span v-if="row.finish_date > 0">{{window.moment.unix(row.finish_date).isValid() ? window.moment.unix(row.finish_date).format('DD.MM.YYYY') : ''}}</span>
|
|
</template>
|
|
<template v-slot:cancel_date="{ row }">
|
|
<span v-if="row.cancel_date > 0">{{window.moment.unix(row.cancel_date).isValid() ? window.moment.unix(row.cancel_date).format('DD.MM.YYYY') : ''}}</span>
|
|
</template>
|
|
<template v-slot:price="{ row }">
|
|
<span :class="(row.price < 0) ? 'text-danger' : ''">€ {{row.price | formatPrice}}</span>
|
|
</template>
|
|
<template v-slot:price_setup="{ row }">
|
|
<span :class="(row.price_setup < 0) ? 'text-danger' : ''">€ {{row.price_setup | formatPrice}}</span>
|
|
</template>
|
|
|
|
|
|
</tt-table>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</tt-card>
|
|
|
|
`, data() {
|
|
return {
|
|
window: window,
|
|
OrderProductchangeTableConfig: {
|
|
headers: [
|
|
{text: "", key: "actions", class: "text-right", headerClass: "text-right"},
|
|
{text: "Contract ID", key: "id", class: "text-right", headerClass: "text-right"},
|
|
{text: "Produkt", key: "product_name", headerClass: "text-left"},
|
|
{text: "Matchcode", key: "matchcode", headerClass: "text-left"},
|
|
{text: "Preis", key: "price", headerClass: "text-left"},
|
|
{text: "Periode", key: "billing_period", headerClass: "text-left"},
|
|
{text: "Herstellungskosten", key: "price_setup", headerClass: "text-left"},
|
|
{text: "Fertigstellung", key: "finish_date", filter: "date", headerClass: "text-left"},
|
|
{text: "Kündigung", key: "cancel_date", filter: "date", headerClass: "text-left"}
|
|
],
|
|
tableHeader: 'Zu änderndes Produkt wählen',
|
|
key: 'OrderProductchange',
|
|
},
|
|
owner_id: "",
|
|
owner: false
|
|
}
|
|
},
|
|
filters: {
|
|
formatPrice(price) {
|
|
roundedPrice = Math.round((parseFloat(price) + Number.EPSILON) * 100) / 100;
|
|
return roundedPrice.toFixed(4);
|
|
}
|
|
},
|
|
beforeMount() {
|
|
const urlSearchParams = new URLSearchParams(window.location.search);
|
|
if (urlSearchParams.has("owner_id")) {
|
|
this.owner_id = urlSearchParams.get("owner_id");
|
|
}
|
|
}
|
|
|
|
})
|
|
|