151 lines
3.2 KiB
Vue
151 lines
3.2 KiB
Vue
<template>
|
|
<table class="table condensed highlight">
|
|
<thead>
|
|
<tr>
|
|
<th class="right-align">
|
|
Artikel
|
|
</th>
|
|
<th class="center-align">
|
|
Beginn
|
|
</th>
|
|
<th class="center-align">
|
|
Zugang
|
|
</th>
|
|
<th class="center-align">
|
|
Ende
|
|
</th>
|
|
<th class="center-align">
|
|
Verlust
|
|
</th>
|
|
<th class="right-align">
|
|
Verkauft
|
|
</th>
|
|
<th class="right-align">
|
|
Summe
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<InventoryItem
|
|
v-for="(item,index) in inventory"
|
|
:key="'item-'+index"
|
|
:item="item"
|
|
:total="sold"
|
|
/>
|
|
</tbody>
|
|
<tfoot>
|
|
<tr>
|
|
<th
|
|
colspan="6"
|
|
class="right-align"
|
|
>
|
|
Gesamtsumme:
|
|
</th>
|
|
<td class="right-align">
|
|
<TweenedNumber
|
|
:wert="sales"
|
|
:precision="2"
|
|
:einheit="'€'"
|
|
/>
|
|
</td>
|
|
</tr>
|
|
</tfoot>
|
|
</table>
|
|
</template>
|
|
|
|
<script>
|
|
import InventoryItem from "./InventoryItem";
|
|
import TweenedNumber from "./TweenedNumber";
|
|
import { InventoryArticle } from '../model/inventory_article';
|
|
import './InventoryTable.css';
|
|
|
|
export default {
|
|
name: "InventoryTable",
|
|
components: { InventoryItem, TweenedNumber },
|
|
props: {
|
|
articles: {
|
|
type: Array,
|
|
default() {
|
|
return [];
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
inventory: []
|
|
};
|
|
},
|
|
computed: {
|
|
meta() {
|
|
return {
|
|
datum: new Date().toString(),
|
|
}
|
|
},
|
|
sales() {
|
|
var total_sales = this.inventory.reduce(function(total, item) {
|
|
return total + item.Sale;
|
|
}, 0);
|
|
return total_sales;
|
|
},
|
|
sold() {
|
|
var total_sold = this.inventory.reduce((total, item) => {
|
|
return total + item.Sold;
|
|
},0);
|
|
return total_sold;
|
|
}
|
|
},
|
|
mounted() {
|
|
this.$on('reset-inventur', this.resetInventory);
|
|
this.$on('export-inventur', this.exportInventory);
|
|
|
|
this.resetInventory();
|
|
},
|
|
methods: {
|
|
resetInventory() {
|
|
this.inventory = this.articles.map(item => {
|
|
return new InventoryArticle(item);
|
|
});
|
|
},
|
|
getInventurBlob() {
|
|
let inventur = this.inventory.map(T => {
|
|
return {
|
|
name: T.article.name,
|
|
preis: T.article.portion.price,
|
|
beginn: T.start,
|
|
zugang: T.fetched,
|
|
ende: T.end,
|
|
verlust: T.lost,
|
|
verkauft: T.Sold,
|
|
umsatz: T.Sale
|
|
};
|
|
});
|
|
const data = JSON.stringify({
|
|
meta: this.meta,
|
|
data: inventur
|
|
});
|
|
const blob = new Blob([data],{type: 'text/json' });
|
|
return blob;
|
|
},
|
|
exportInventory() {
|
|
var formData = new FormData();
|
|
formData.append('file', this.getInventurBlob(), 'inventur.json');
|
|
this.$http
|
|
.post(
|
|
"/api/inventur",
|
|
formData,
|
|
{
|
|
headers: {
|
|
'Content-Type': 'application/x-www-form-urlencoded'
|
|
}
|
|
}
|
|
)
|
|
.then(response => {
|
|
this.$M.toast({ html: response.body });
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
</style> |