151 lines
3.6 KiB
Vue
151 lines
3.6 KiB
Vue
<script setup>
|
|
|
|
import { v4 as uuidv4 } from 'uuid';
|
|
|
|
const supabase = useSupabaseClient()
|
|
|
|
const props = defineProps({
|
|
item: {
|
|
type: Object,
|
|
required: true
|
|
}
|
|
})
|
|
|
|
const hourrates = ref([])
|
|
const units = ref([])
|
|
|
|
const setup = async () => {
|
|
hourrates.value = await useEntities("hourrates").select()
|
|
units.value = await useEntities("units").selectSpecial()
|
|
}
|
|
|
|
setup()
|
|
|
|
const addRowToPersonalComposition = () => {
|
|
|
|
if(!props.item.personalComposition) props.item.personalComposition = []
|
|
|
|
props.item.personalComposition.push({
|
|
id: uuidv4(),
|
|
unit: 6,
|
|
quantity: 1,
|
|
price: 0,
|
|
name: "Standard"
|
|
})
|
|
calculateTotalPersonalPrice()
|
|
}
|
|
|
|
const removeRowFromPersonalComposition = (id) => {
|
|
props.item.personalComposition = props.item.personalComposition.filter((item) => item.id !== id)
|
|
calculateTotalPersonalPrice()
|
|
}
|
|
|
|
const calculateTotalPersonalPrice = () => {
|
|
let total = 0
|
|
|
|
props.item.personalComposition.forEach((item) => {
|
|
let rowSum = item.quantity * item.price
|
|
total += rowSum
|
|
})
|
|
|
|
props.item.sellingPriceComposed.worker = Number(total.toFixed(2))
|
|
props.item.sellingPriceComposed.total = Number((props.item.sellingPriceComposed.worker + props.item.sellingPriceComposed.material).toFixed(2))
|
|
}
|
|
|
|
const setRowData = (row) => {
|
|
let hourrate = hourrates.value.find(i => i.id === row.hourrate)
|
|
|
|
row.purchasePrice = hourrate.purchasePrice
|
|
row.price = hourrate.sellingPrice
|
|
|
|
calculateTotalPersonalPrice()
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<UCard class="w-full">
|
|
<UButton
|
|
@click="addRowToPersonalComposition"
|
|
>
|
|
+ Stundensatz
|
|
</UButton>
|
|
|
|
<table class="w-full mt-3">
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Menge</th>
|
|
<th>Einheit</th>
|
|
<th>Einkaufpreis</th>
|
|
<th>Verkaufspreis</th>
|
|
</tr>
|
|
<tr
|
|
v-for="row in props.item.personalComposition"
|
|
>
|
|
<td>
|
|
<USelectMenu
|
|
searchable
|
|
:search-attributes="['name']"
|
|
:options="hourrates"
|
|
value-attribute="id"
|
|
option-attribute="name"
|
|
v-model="row.hourrate"
|
|
:color="row.hourrate ? 'primary' : 'rose'"
|
|
@change="setRowData(row)"
|
|
>
|
|
<!-- <template #label>
|
|
{{products.find(i => i.id === product.product) ? products.find(i => i.id === product.product).name : 'Kein Artikel ausgewählt'}}
|
|
</template>-->
|
|
</USelectMenu>
|
|
</td>
|
|
<td>
|
|
<UInput
|
|
type="number"
|
|
v-model="row.quantity"
|
|
:step="units.find(i => i.id === row.unit) ? units.find(i => i.id === row.unit).step : 1"
|
|
@change="calculateTotalPersonalPrice"
|
|
/>
|
|
</td>
|
|
<td>
|
|
<USelectMenu
|
|
:options="units"
|
|
disabled
|
|
value-attribute="id"
|
|
option-attribute="name"
|
|
v-model="row.unit"
|
|
></USelectMenu>
|
|
</td>
|
|
<td>
|
|
<UInput
|
|
type="number"
|
|
v-model="row.purchasePrice"
|
|
step="0.01"
|
|
@change="calculateTotalPersonalPrice"
|
|
/>
|
|
</td>
|
|
<td>
|
|
<UInput
|
|
type="number"
|
|
v-model="row.price"
|
|
step="0.01"
|
|
@change="calculateTotalPersonalPrice"
|
|
/>
|
|
</td>
|
|
<td>
|
|
<UButton
|
|
icon="i-heroicons-x-mark"
|
|
@click="removeRowFromPersonalComposition(row.id)"
|
|
variant="outline"
|
|
color="rose"
|
|
/>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</UCard>
|
|
</template>
|
|
|
|
<style scoped>
|
|
td {
|
|
margin-bottom: 0.5em;
|
|
}
|
|
</style> |