Preorder campaign rework
This commit is contained in:
Luca Haid
@@ -0,0 +1,36 @@
|
||||
.campaign-grid {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: 0.75rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.campaign-icon,
|
||||
.campaign-icon > i{
|
||||
font-size: 24px !important;
|
||||
padding: 0.25rem;
|
||||
}
|
||||
|
||||
.campaign-icon:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.progress-grid {
|
||||
display: grid;
|
||||
grid-template-columns: auto repeat(3, max-content);
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.progress-row > *:nth-child(n+2) {
|
||||
text-align: right;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.preorder-campaign-table-actions > a > i {
|
||||
font-size: 17px !important;
|
||||
}
|
||||
|
||||
.preorder-campaign-table-actions {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
@@ -0,0 +1,103 @@
|
||||
Vue.component('Preordercampaign', {
|
||||
template: `
|
||||
<tt-card>
|
||||
<tt-table :data="window['TT_CONFIG']['CAMPAIGNS']" :config="PreordercampaignTableConfig">
|
||||
<template v-slot:top-buttons>
|
||||
<button v-if="window['TT_CONFIG']['IS_ADMIN'] === '1'" type="button" class="btn btn-primary" @click="window.location = window['TT_CONFIG']['ADD_URL']">
|
||||
<i class="fas fa-plus"></i> Vorbestellung hinzufügen
|
||||
</button>
|
||||
<a v-if="window['TT_CONFIG']['SHOW_MISC_BUTTONS'] === '1'" class="btn btn-purple" :href="window['TT_CONFIG']['PREORDER_DISCOUNT_IMPORT_URL']">
|
||||
<i class="fas fa-tags fa-fw"></i> Gutscheincodes importieren</a>
|
||||
<a v-if="window['TT_CONFIG']['SHOW_MISC_BUTTONS'] === '1'" class="btn btn-purple ml-1" :href="window['TT_CONFIG']['PREORDER_STATUS_UPDATE_IMPORT_URL']">
|
||||
<i class="fas fa-retweet fa-fw"></i> Statusupdates importieren</a>
|
||||
</template>
|
||||
|
||||
<template v-slot:status="{ row: campaign }">
|
||||
<span class="fa-stack" title="Vorbestellkampagne aktiv" v-if="campaign.from <= Date.now()/1000 && campaign.to >= Date.now()/1000">
|
||||
<i class="fas fa-alarm-clock fa-stack-1x text-success" style="z-index:20"></i>
|
||||
<i class="fas fa-circle-check" style="color:Tomato;font-size:.7em"></i>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<template v-slot:add="{ row: campaign }">
|
||||
<a class="btn btn-sm btn-outline-primary" :href="window['TT_CONFIG']['ADD_PREORDER_URL'] + '?preordercampaign_id=' + campaign.id">
|
||||
<i class="fas fa-plus" title="Vorbestellung hinzufügen"></i></a>
|
||||
</template>
|
||||
|
||||
<template v-slot:progress="{ row: campaign }">
|
||||
<div class="campaign-grid">
|
||||
<a :href="window['TT_CONFIG']['VIEW_URL'] + '?filter[preordercampaign_id]=' + campaign.id" class="campaign-icon">
|
||||
<i class="fas fa-list-alt" title="Bestellungen anzeigen"></i></a>
|
||||
<div class="progress-grid">
|
||||
<template v-if="campaign.count_total_units.total_unit_count_sd > 0">
|
||||
<span>EFH:</span><span>{{ campaign.active_preorder_count.sd_count }} /</span>
|
||||
<span>{{ campaign.count_total_units.total_unit_count_sd }}</span>
|
||||
<span>({{ ((campaign.active_preorder_count.sd_count / campaign.count_total_units.total_unit_count_sd) * 100 || 0).toFixed(2) }} %)</span>
|
||||
</template>
|
||||
<template v-if="campaign.count_total_units.total_unit_count_md > 0">
|
||||
<span>MPH:</span><span>{{ campaign.active_preorder_count.md_count }} /</span>
|
||||
<span>{{ campaign.count_total_units.total_unit_count_md }}</span>
|
||||
<span>({{ ((campaign.active_preorder_count.md_count / campaign.count_total_units.total_unit_count_md) * 100 || 0).toFixed(2) }} %)</span>
|
||||
</template>
|
||||
<template v-if="campaign.count_total_units.total_unit_count > 0">
|
||||
<span>Gesamt:</span><span>{{ campaign.active_preorder_count.total_count }} /</span>
|
||||
<span>{{ campaign.count_total_units.total_unit_count * 2 }}</span>
|
||||
<span>({{ ((campaign.active_preorder_count.total_count / (campaign.count_total_units.total_unit_count * 2)) * 100 || 0).toFixed(1) }} %)</span>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-slot:from="{ row: campaign }">{{ formatDate(campaign.from) }}</template>
|
||||
<template v-slot:to="{ row: campaign }">{{ formatDate(campaign.to) }}</template>
|
||||
<template v-slot:rimo_workoders="{ row: campaign }">{{ campaign.rimo_workoders }} / {{ campaign.active_preorder_count.total_count }}</template>
|
||||
|
||||
<template v-slot:actions="{ row: campaign }">
|
||||
<div class="preorder-campaign-table-actions">
|
||||
<a :href="window['TT_CONFIG']['PREORDER_NOTIFICATION_URL'] + '?filter[preordercampaign_id]=' + campaign.id" title="Email Aussendungen"><i class="far fa-envelope"></i></a>
|
||||
<template v-if="window['TT_CONFIG']['IS_ADMIN'] === '1'">
|
||||
<a class="ml-2" :href="window['TT_CONFIG']['EDIT_URL'] + '?id=' + campaign.id"><i class="far fa-edit" title="Bearbeiten"></i></a>
|
||||
<a class="ml-2" :href="window['TT_CONFIG']['ADMIN_URL'] + '?id=' + campaign.id"><i class="far fa-a" title="Adminfunktionen"></i></a>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
</tt-table>
|
||||
</tt-card>
|
||||
|
||||
`,
|
||||
|
||||
data() {
|
||||
return {
|
||||
window: window,
|
||||
PreordercampaignTableConfig: {
|
||||
key: 'PreordercampaignTable',
|
||||
tableHeader: 'Vorbestellkampagnen',
|
||||
defaultPageSize: 25,
|
||||
headers: [
|
||||
{text: 'Status', key: 'status', class: 'text-center',sortable: false,filter:false, priority: 20},
|
||||
{text: '', key: 'add', class: 'text-center',filter:false, sortable: false, priority: 18},
|
||||
{text: 'Netzgebiet', key: 'network_name', priority: 19},
|
||||
{text: 'Name', key: 'name', priority: 14},
|
||||
{text: 'Fortschritt', key: 'progress', priority: 17,filter:false,sortable: false},
|
||||
{text: 'Workorders', key: 'rimo_workoders', class: 'text-center', priority: 16,filter:false},
|
||||
{text: 'Von', key: 'from', class: 'text-center', priority: 13,filter:false,sortable: false},
|
||||
{text: 'Bis', key: 'to', class: 'text-center', priority: 12,filter:false,sortable: false},
|
||||
{text: 'Aktionen', key: 'actions', class: 'text-center', sortable: false, priority: 21,filter:false}
|
||||
],
|
||||
customRowClass: (row) => {
|
||||
if (row.from <= Date.now()/1000 && row.to >= Date.now()/1000) {
|
||||
return 'active';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if (window.TT_CONFIG.IS_ADMIN === "1") {
|
||||
this.PreordercampaignTableConfig.headers.splice(3, 0, {text: 'Netzbesitzer', key: 'network_owner_name', priority: 4, filter: 'select', filterOptions: window['TT_CONFIG']['NETWORK_OWNER_OPTIONS']});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
formatDate: date => window.moment(date * 1000).format('DD.MM.YYYY'),
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user