Luca/thetool
1
0
Fork 0
Code Issues 5 Pull Requests 5 Actions Packages Projects Releases Wiki Activity

Partner Producthchange WIP 2024-07-23

Browse Source
This commit is contained in:
Frank Schubert
2024-07-24 13:34:39 +02:00
parent ce671f2edd
commit a4f6b3b98c
8 changed files with 784 additions and 303 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/js/pages/OrderProductchange/OrderProductchange.js
+72 -33
View File
@@ -1,55 +1,94 @@
Vue.component('OrderProductchange', {
//language=Vue
template: `
<tt-card style="min-height:50vh;">
<tt-autocomplete :api-url="window['TT_CONFIG']['ADDRESS_API_URL'] + '?do=findAddress'"
v-model="owner_id" sm label="Vertragsinhaber auswählen"></tt-autocomplete>
<tt-card style="min-height:50vh;" class="border-top-purple">
<tt-table v-if="owner_id !== ''"
<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 Hauptprodukt durchgeführt werden. Dies ist fast immer das Internetzugangsprodukt.</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 ref="contractTable">
<template v-slot:actions="{ row }">
<a :href="window['TT_CONFIG']['BASE_URL'] + '/Contract/productchange?contract_id=' + row.id" class="btn btn-primary">Produktwechsel erstellen
</a>
</template>
</tt-table>
:config="OrderProductchangeTableConfig" :small="false" class="sm"
disable-filtering ref="contractTable">
<template v-slot:actions="{ row }">
<a :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: "Contract ID", key: "id", filter: false, order: false},
{text: "Produkt", key: "product_id", filter: false, order: false},
{text: "Matchcode", key: "matchcode", filter: false, order: false},
{text: "Preis p.P.", key: "price", filter: false, order: false},
{text: "Herstellungskosten", key: "price_setup", filter: false, order: false},
{text: "Fertigstellung", key: "finish_date", filter: false, order: false},
{text: "Kündigung", key: "cancel_date", filter: false, order: false},
{text: "Aktion", key: "actions", filter: false, order: false}
{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: 'Aktive Produkte',
tableHeader: 'Zu änderndes Produkt wählen',
key: 'OrderProductchange',
},
owner_id: "",
owner: false
}
},
methods: {
filters: {
formatPrice(price) {
roundedPrice = Math.round((parseFloat(price) + Number.EPSILON) * 100) / 100;
return roundedPrice.toFixed(4);
}
},
watch: {
owner_id: {
async handler() {
console.log(this.owner_id);
//this.$refs.contractTable.$set(this.$refs.contractTable.fetchUrl, `${this.window['TT_CONFIG']['CONTRACT_API_URL']}?do=findContracts&owner_id=${this.owner_id}`);
//this.$refs.contractTable.$set(this.$refs.contractTable.filters, 'owner_id', this.owner_id);
//await this.$refs.contractTable.fetchData();
}
beforeMount() {
const urlSearchParams = new URLSearchParams(window.location.search);
if (urlSearchParams.has("owner_id")) {
this.owner_id = urlSearchParams.get("owner_id");
}
}
})