wip
This commit is contained in:
91
nova-components/PayoutProducts/resources/css/field.css
Normal file
91
nova-components/PayoutProducts/resources/css/field.css
Normal file
@@ -0,0 +1,91 @@
|
||||
/* Nova Field CSS */
|
||||
.payout-product-card {
|
||||
*,:after,:before{border:0 solid #e9ecef;box-sizing:border-box;}
|
||||
:after,:before{--tw-content:"";}
|
||||
body{line-height:inherit;margin:0;}
|
||||
a{color:inherit;text-decoration:inherit;}
|
||||
button{color:inherit;font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;margin:0;padding:0;}
|
||||
button{text-transform:none;}
|
||||
button{-webkit-appearance:button;background-color:initial;background-image:none;}
|
||||
p{margin:0;}
|
||||
input::placeholder{color:#a0aec0;opacity:1;}
|
||||
button{cursor:pointer;}
|
||||
:disabled{cursor:default;}
|
||||
img{display:block;vertical-align:middle;}
|
||||
img{height:auto;max-width:100%;}
|
||||
*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;}
|
||||
.absolute{position:absolute;}
|
||||
.relative{position:relative;}
|
||||
.top-3{top:.75rem;}
|
||||
.right-3{right:.75rem;}
|
||||
.z-0{z-index:0;}
|
||||
.z-10{z-index:10;}
|
||||
.mx-auto{margin-left:auto;margin-right:auto;}
|
||||
.mb-3{margin-bottom:.75rem;}
|
||||
.mb-2{margin-bottom:.5rem;}
|
||||
.mt-1{margin-top:.25rem;}
|
||||
.ml-px{margin-left:1px;}
|
||||
.-mr-3{margin-right:-.75rem;}
|
||||
.flex{display:flex;}
|
||||
.inline-flex{display:inline-flex;}
|
||||
.h-full{height:100%;}
|
||||
.h-8{height:2rem;}
|
||||
.w-full{width:100%;}
|
||||
.w-max{width:-webkit-max-content;width:max-content;}
|
||||
.w-8{width:2rem;}
|
||||
.flex-row-reverse{flex-direction:row-reverse;}
|
||||
.flex-col{flex-direction:column;}
|
||||
.items-center{align-items:center;}
|
||||
.justify-center{justify-content:center;}
|
||||
.justify-between{justify-content:space-between;}
|
||||
.overflow-hidden{overflow:hidden;}
|
||||
.rounded-xl{border-radius:.75rem;}
|
||||
.rounded-full{border-radius:9999px;}
|
||||
.rounded-\[20px\]{border-radius:20px;}
|
||||
.border-2{border-width:2px;}
|
||||
.border-white{--tw-border-opacity:1;border-color:rgb(255 255 255/var(--tw-border-opacity));}
|
||||
.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity));}
|
||||
.bg-\[\#E0E5F2\]{--tw-bg-opacity:1;background-color:rgb(224 229 242/var(--tw-bg-opacity));}
|
||||
.bg-brand-900{--tw-bg-opacity:1;background-color:rgb(17 4 122/var(--tw-bg-opacity));}
|
||||
.bg-clip-border{background-clip:initial;}
|
||||
.object-cover{object-fit:cover;}
|
||||
.p-2{padding:.5rem;}
|
||||
.\!p-4{padding:1rem!important;}
|
||||
.px-4{padding-left:1rem;padding-right:1rem;}
|
||||
.px-1{padding-left:.25rem;padding-right:.25rem;}
|
||||
.py-2{padding-bottom:.5rem;padding-top:.5rem;}
|
||||
.text-xl{font-size:1.25rem;line-height:1.75rem;}
|
||||
.text-sm{font-size:.875rem;line-height:1.25rem;}
|
||||
.text-lg{font-size:1.125rem;line-height:1.75rem;}
|
||||
.text-xs{font-size:.75rem;line-height:1rem;}
|
||||
.text-base{font-size:1rem;line-height:1.5rem;}
|
||||
.font-bold{font-weight:700;}
|
||||
.font-medium{font-weight:500;}
|
||||
.font-normal{font-weight:400;}
|
||||
.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity));}
|
||||
.text-brand-500{--tw-text-opacity:1;color:rgb(66 42 251/var(--tw-text-opacity));}
|
||||
.text-gray-600{--tw-text-opacity:1;color:rgb(163 174 208/var(--tw-text-opacity));}
|
||||
.text-navy-700{--tw-text-opacity:1;color:rgb(27 37 75/var(--tw-text-opacity));}
|
||||
.shadow-3xl{box-shadow:0 0 #0000,0 0 #0000,var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);}
|
||||
.shadow-3xl{--tw-shadow:14px 17px 40px 4px;--tw-shadow-colored:14px 17px 40px 4px var(--tw-shadow-color);}
|
||||
.shadow-shadow-500{--tw-shadow-color:rgba(112,144,176,.08);--tw-shadow:var(--tw-shadow-colored);}
|
||||
.transition{transition-duration:.15s;transition-property:color,background-color,border-color,fill,stroke,opacity,box-shadow,-webkit-text-decoration-color,-webkit-transform,-webkit-filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-text-decoration-color,-webkit-transform,-webkit-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);}
|
||||
.duration-200{transition-duration:.2s;}
|
||||
.hover\:cursor-pointer:hover{cursor:pointer;}
|
||||
.hover\:bg-gray-50:hover{--tw-bg-opacity:1;background-color:rgb(248 249 250/var(--tw-bg-opacity));}
|
||||
.hover\:bg-brand-800:hover{--tw-bg-opacity:1;background-color:rgb(25 7 147/var(--tw-bg-opacity));}
|
||||
.active\:bg-brand-700:active{--tw-bg-opacity:1;background-color:rgb(33 17 165/var(--tw-bg-opacity));}
|
||||
@media (min-width:768px){
|
||||
.md\:mt-2{margin-top:.5rem;}
|
||||
.md\:items-start{align-items:flex-start;}
|
||||
.md\:items-center{align-items:center;}
|
||||
}
|
||||
@media (min-width:992px){
|
||||
.lg\:mt-0{margin-top:0;}
|
||||
.lg\:justify-between{justify-content:space-between;}
|
||||
}
|
||||
@media (min-width:1600px){
|
||||
.\33xl\:h-full{height:100%;}
|
||||
.\33xl\:w-full{width:100%;}
|
||||
}
|
||||
}
|
||||
@@ -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