wip
This commit is contained in:
@@ -0,0 +1,71 @@
|
||||
<template>
|
||||
<DefaultField
|
||||
:field="currentField"
|
||||
:errors="errors"
|
||||
:show-help-text="showHelpText"
|
||||
:full-width-content="fullWidthContent"
|
||||
>
|
||||
<template #field>
|
||||
<div class="payout-product-card">
|
||||
<div class="flex">
|
||||
<div class="flex flex-wrap">
|
||||
<product-cart
|
||||
v-for="product in currentField.products"
|
||||
:product="product"
|
||||
:editMode="false"
|
||||
></product-cart>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</DefaultField>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { DependentFormField, HandlesValidationErrors } from 'laravel-nova'
|
||||
import ProductCart from './product-cart'
|
||||
|
||||
export default {
|
||||
mixins: [DependentFormField, HandlesValidationErrors],
|
||||
|
||||
props: ['index', 'resource', 'resourceName', 'resourceId', 'field'],
|
||||
|
||||
components: {
|
||||
ProductCart,
|
||||
},
|
||||
|
||||
data: () => ({
|
||||
values: []
|
||||
}),
|
||||
|
||||
methods: {
|
||||
/*
|
||||
* Set the initial, internal value for the field.
|
||||
*/
|
||||
setInitialValue() {
|
||||
this.value = this.currentField.value || []
|
||||
},
|
||||
|
||||
onSyncedField() {
|
||||
if (this.currentField.products) {
|
||||
this.value = Array.from(this.currentField.products).map(orderItem => orderItem.id)
|
||||
|
||||
this.emitFieldValueChange(this.field.attribute, this.value)
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
Nova.$on('orderItemChanged', (item) => {
|
||||
if (! item.checked) {
|
||||
this.value = Array.from(this.value).filter(element => element !== item.id);
|
||||
} else {
|
||||
this.value = [...this.value, item.id];
|
||||
}
|
||||
|
||||
this.emitFieldValueChange(this.field.attribute, this.value)
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,136 @@
|
||||
<template>
|
||||
<DefaultField
|
||||
:field="currentField"
|
||||
:errors="errors"
|
||||
:show-help-text="showHelpText"
|
||||
:full-width-content="fullWidthContent"
|
||||
>
|
||||
<template #field>
|
||||
<div class="payout-product-card">
|
||||
<div class="w-full">
|
||||
<div class="w-1/3">
|
||||
<span>{{ __('Hasap') }}: <strong>{{ total.toFixed(2) }}</strong></span>
|
||||
</div>
|
||||
<div class="w-1/3">
|
||||
<span>{{ __('Telekeci') }}: <strong>{{ entrepreneurTotal.toFixed(2) }}</strong></span>
|
||||
</div>
|
||||
<div class="w-1/3">
|
||||
<span>{{ __('POSTSHOP jemi') }}: <strong>{{ postshopTotal.toFixed(2) }}</strong></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap">
|
||||
<product-cart
|
||||
v-for="product in currentField.products"
|
||||
:key="product.id"
|
||||
:product="product"
|
||||
></product-cart>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</DefaultField>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { DependentFormField, HandlesValidationErrors } from 'laravel-nova';
|
||||
import ProductCart from './product-cart';
|
||||
|
||||
export default {
|
||||
mixins: [DependentFormField, HandlesValidationErrors],
|
||||
components: {
|
||||
ProductCart,
|
||||
},
|
||||
props: ['resourceName', 'resourceId', 'field'],
|
||||
data() {
|
||||
return {
|
||||
total: 0,
|
||||
entrepreneurTotal: 0,
|
||||
postshopTotal: 0,
|
||||
values: [],
|
||||
prices: [],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
/*
|
||||
* Set the initial, internal value for the field.
|
||||
*/
|
||||
setInitialValue() {
|
||||
this.value = this.currentField.value || []
|
||||
},
|
||||
|
||||
/**
|
||||
* Fill the given FormData object with the field's internal value.
|
||||
*/
|
||||
fill(formData) {
|
||||
Array.from(this.values).forEach(value => {
|
||||
formData.append(this.currentField.attribute + '[]', value)
|
||||
})
|
||||
|
||||
Array.from(this.prices).forEach(value => {
|
||||
formData.append('prices[]', JSON.stringify(value))
|
||||
})
|
||||
|
||||
formData.append('total_sum', this.total.toFixed(2))
|
||||
formData.append('entrepreneur_total', this.entrepreneurTotal.toFixed(2))
|
||||
formData.append('postshop_total', this.postshopTotal.toFixed(2))
|
||||
},
|
||||
|
||||
onSyncedField() {
|
||||
if (this.currentField.products) {
|
||||
this.values = Array.from(this.currentField.products).map(orderItem => orderItem.id)
|
||||
}
|
||||
},
|
||||
|
||||
resetMoney() {
|
||||
this.total = 0;
|
||||
this.postshopTotal = 0;
|
||||
this.entrepreneurTotal = 0;
|
||||
},
|
||||
calculateMoney() {
|
||||
this.resetMoney();
|
||||
|
||||
this.prices.forEach(item => {
|
||||
if (! this.values.includes(item.order_item_id)) {
|
||||
console.log('should return')
|
||||
return;
|
||||
}
|
||||
|
||||
const unitPriceAmount = Number(item.unit_price_amount);
|
||||
const costAmount = Number(item.cost_amount);
|
||||
const quantity = Number(item.quantity);
|
||||
const percentageDifference = unitPriceAmount - costAmount;
|
||||
|
||||
this.total += unitPriceAmount * quantity;
|
||||
this.postshopTotal += percentageDifference * quantity;
|
||||
this.entrepreneurTotal += costAmount * quantity;
|
||||
});
|
||||
|
||||
this.total = parseFloat(this.total.toFixed(2));
|
||||
this.postshopTotal = parseFloat(this.postshopTotal.toFixed(2));
|
||||
this.entrepreneurTotal = parseFloat(this.entrepreneurTotal.toFixed(2));
|
||||
},
|
||||
},
|
||||
provide() {
|
||||
return {
|
||||
sharedState: {
|
||||
total: this.total,
|
||||
entrepreneurTotal: this.entrepreneurTotal,
|
||||
postshopTotal: this.postshopTotal,
|
||||
values: this.values,
|
||||
prices: this.prices,
|
||||
calculateMoney: this.calculateMoney,
|
||||
resetMoney: this.resetMoney,
|
||||
},
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
Nova.$on('add_to_values', (product) => {
|
||||
this.values.push(product.order_item_id)
|
||||
})
|
||||
|
||||
Nova.$on('remove_from_values', (product) => {
|
||||
this.values = this.values.filter(item => item !== product.order_item_id)
|
||||
})
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,170 @@
|
||||
<template>
|
||||
<div
|
||||
class="!z-5 relative flex rounded-[20px] max-w-200px bg-clip-border simple-shadow w-full !p-4 3xl:p-![18px] mr-1 mb-2 px product-cart-item"
|
||||
>
|
||||
<div class="h-full w-full">
|
||||
<div class="relative w-full">
|
||||
<span class="text-white mb-5">
|
||||
Sany: <span class="font-bold">{{ product.quantity }}</span>
|
||||
</span>
|
||||
<img
|
||||
:src="product.product_thumbnail"
|
||||
class="mb-3 mt-5 h-full w-full rounded max-w-200px max-h-200px"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
class="absolute top-0 right-0 flex items-center justify-center rounded-full bg-white p-2 text-brand-500 hover:cursor-pointer"
|
||||
>
|
||||
<div
|
||||
class="flex h-full w-full items-center justify-center rounded-full text-xl hover:bg-gray-50"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
class="checkbox scale-2"
|
||||
@change="handleChange($event)"
|
||||
:checked="isChecked"
|
||||
/>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div class="mb-3 px-1">
|
||||
<div class="mb-2">
|
||||
<p class="text-lg font-bold text-white">
|
||||
{{ product.product_name }}
|
||||
</p>
|
||||
<ul class="mt-1 text-sm font-medium text-white">
|
||||
<li>
|
||||
Sargyt ID:
|
||||
<span class="font-bold">{{ product.order_id }}</span>,
|
||||
</li>
|
||||
<li>
|
||||
Haryt ID:
|
||||
<span class="font-bold">{{ product.product_id }}</span>
|
||||
</li>
|
||||
<li>
|
||||
Satylan baha:
|
||||
<div v-if="editMode">
|
||||
<input
|
||||
class="text-black"
|
||||
type="text"
|
||||
v-model="unit_price_amount"
|
||||
@input="fireProductPriceChangeEvent()"
|
||||
>
|
||||
</div>
|
||||
<div v-else>
|
||||
<span class="font-bold">
|
||||
{{ product.unit_price_amount}}
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
Haryt oz bahasy:
|
||||
<div v-if="editMode">
|
||||
<input
|
||||
class="text-black"
|
||||
type="text"
|
||||
v-model="cost_amount"
|
||||
@input="fireProductPriceChangeEvent()"
|
||||
>
|
||||
</div>
|
||||
<div v-else>
|
||||
<span class="font-bold">
|
||||
{{ product.unit_cost_amount }}
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
product: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
editMode: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isChecked: true,
|
||||
unit_price_amount: this.product.unit_price_amount,
|
||||
cost_amount: this.product.product_cost_amount,
|
||||
};
|
||||
},
|
||||
inject: ['sharedState'],
|
||||
methods: {
|
||||
getProductItem() {
|
||||
return {
|
||||
product_id: this.product.product_id,
|
||||
order_item_id: this.product.id,
|
||||
unit_price_amount: this.unit_price_amount,
|
||||
cost_amount: this.cost_amount,
|
||||
quantity: this.product.quantity,
|
||||
};
|
||||
},
|
||||
|
||||
handleChange(event) {
|
||||
const index = this.sharedState.values;
|
||||
|
||||
if (event.target.checked) {
|
||||
Nova.$emit('add_to_values', this.getProductItem())
|
||||
} else {
|
||||
Nova.$emit('remove_from_values', this.getProductItem())
|
||||
}
|
||||
|
||||
this.sharedState.calculateMoney()
|
||||
},
|
||||
|
||||
fireProductPriceChangeEvent() {
|
||||
const productIndex = this.sharedState.prices.findIndex(
|
||||
price => price.order_item_id === this.product.id
|
||||
);
|
||||
const product = this.getProductItem();
|
||||
|
||||
if (productIndex === -1) {
|
||||
this.sharedState.prices.push(product);
|
||||
} else {
|
||||
this.sharedState.prices[productIndex] = product;
|
||||
}
|
||||
|
||||
this.sharedState.resetMoney();
|
||||
this.sharedState.calculateMoney();
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.fireProductPriceChangeEvent();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.product-cart-item {
|
||||
padding: 15px 15px 0 15px;
|
||||
}
|
||||
.max-w-200px {
|
||||
max-width: 200px;
|
||||
}
|
||||
.max-h-200px {
|
||||
max-height: 200px;
|
||||
}
|
||||
.scale-2 {
|
||||
transform: scale(2);
|
||||
}
|
||||
.simple-shadow {
|
||||
box-shadow: 0px 0px 2px 0px white;
|
||||
}
|
||||
.mb-2 {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.mt-5 {
|
||||
margin-top: 15px;
|
||||
}
|
||||
</style>
|
||||
7
nova-components/PayoutProducts/resources/js/field.js
Normal file
7
nova-components/PayoutProducts/resources/js/field.js
Normal file
@@ -0,0 +1,7 @@
|
||||
import DetailField from './components/DetailField'
|
||||
import FormField from './components/FormField'
|
||||
|
||||
Nova.booting((app, store) => {
|
||||
app.component('detail-payout-products', DetailField)
|
||||
app.component('form-payout-products', FormField)
|
||||
})
|
||||
Reference in New Issue
Block a user