wip
This commit is contained in:
10
nova-components/PayoutProducts/.gitignore
vendored
Normal file
10
nova-components/PayoutProducts/.gitignore
vendored
Normal file
@@ -0,0 +1,10 @@
|
||||
/.idea
|
||||
/vendor
|
||||
/node_modules
|
||||
package-lock.json
|
||||
composer.phar
|
||||
composer.lock
|
||||
phpunit.xml
|
||||
.phpunit.result.cache
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
29
nova-components/PayoutProducts/composer.json
Normal file
29
nova-components/PayoutProducts/composer.json
Normal file
@@ -0,0 +1,29 @@
|
||||
{
|
||||
"name": "nurmuhammet/payout-products",
|
||||
"description": "A Laravel Nova field.",
|
||||
"keywords": [
|
||||
"laravel",
|
||||
"nova"
|
||||
],
|
||||
"license": "MIT",
|
||||
"require": {
|
||||
"php": "^7.3|^8.0"
|
||||
},
|
||||
"autoload": {
|
||||
"psr-4": {
|
||||
"Nurmuhammet\\PayoutProducts\\": "src/"
|
||||
}
|
||||
},
|
||||
"extra": {
|
||||
"laravel": {
|
||||
"providers": [
|
||||
"Nurmuhammet\\PayoutProducts\\FieldServiceProvider"
|
||||
]
|
||||
}
|
||||
},
|
||||
"config": {
|
||||
"sort-packages": true
|
||||
},
|
||||
"minimum-stability": "dev",
|
||||
"prefer-stable": true
|
||||
}
|
||||
1
nova-components/PayoutProducts/dist/css/field.css
vendored
Normal file
1
nova-components/PayoutProducts/dist/css/field.css
vendored
Normal file
@@ -0,0 +1 @@
|
||||
.payout-product-card{*,:after,:before{border:0 solid #e9ecef;box-sizing:border-box}:after,:before{--tw-content:""}body{line-height:inherit;margin:0}a{text-decoration:inherit}a,button{color:inherit}button{-webkit-appearance:button;background-color:initial;background-image:none;font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;padding:0;text-transform:none}button,p{margin:0}input::-moz-placeholder{color:#a0aec0;opacity:1}input::placeholder{color:#a0aec0;opacity:1}button{cursor:pointer}:disabled{cursor:default}img{display:block;height:auto;max-width:100%;vertical-align:middle}*,: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:-moz-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{-o-object-fit: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{--tw-shadow:14px 17px 40px 4px;--tw-shadow-colored:14px 17px 40px 4px var(--tw-shadow-color);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-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,text-decoration-color,fill,stroke,opacity,box-shadow,transform,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-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%}}}
|
||||
2
nova-components/PayoutProducts/dist/js/field.js
vendored
Normal file
2
nova-components/PayoutProducts/dist/js/field.js
vendored
Normal file
File diff suppressed because one or more lines are too long
14
nova-components/PayoutProducts/dist/js/field.js.LICENSE.txt
vendored
Normal file
14
nova-components/PayoutProducts/dist/js/field.js.LICENSE.txt
vendored
Normal file
@@ -0,0 +1,14 @@
|
||||
/*!
|
||||
* The buffer module from node.js, for the browser.
|
||||
*
|
||||
* @author Feross Aboukhadijeh <http://feross.org>
|
||||
* @license MIT
|
||||
*/
|
||||
|
||||
/*!
|
||||
* vuex v4.1.0
|
||||
* (c) 2022 Evan You
|
||||
* @license MIT
|
||||
*/
|
||||
|
||||
/*! ieee754. BSD-3-Clause License. Feross Aboukhadijeh <https://feross.org/opensource> */
|
||||
4
nova-components/PayoutProducts/dist/mix-manifest.json
vendored
Normal file
4
nova-components/PayoutProducts/dist/mix-manifest.json
vendored
Normal file
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"/js/field.js": "/js/field.js",
|
||||
"/css/field.css": "/css/field.css"
|
||||
}
|
||||
40
nova-components/PayoutProducts/nova.mix.js
Normal file
40
nova-components/PayoutProducts/nova.mix.js
Normal file
@@ -0,0 +1,40 @@
|
||||
const mix = require('laravel-mix')
|
||||
const webpack = require('webpack')
|
||||
const path = require('path')
|
||||
|
||||
class NovaExtension {
|
||||
name() {
|
||||
return 'nova-extension'
|
||||
}
|
||||
|
||||
register(name) {
|
||||
this.name = name
|
||||
}
|
||||
|
||||
webpackPlugins() {
|
||||
return new webpack.ProvidePlugin({
|
||||
_: 'lodash',
|
||||
Errors: 'form-backend-validation',
|
||||
})
|
||||
}
|
||||
|
||||
webpackConfig(webpackConfig) {
|
||||
webpackConfig.externals = {
|
||||
vue: 'Vue',
|
||||
}
|
||||
|
||||
webpackConfig.resolve.alias = {
|
||||
...(webpackConfig.resolve.alias || {}),
|
||||
'laravel-nova': path.join(
|
||||
__dirname,
|
||||
'../../vendor/laravel/nova/resources/js/mixins/packages.js'
|
||||
),
|
||||
}
|
||||
|
||||
webpackConfig.output = {
|
||||
uniqueName: this.name,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
mix.extend('nova', new NovaExtension())
|
||||
22
nova-components/PayoutProducts/package.json
Normal file
22
nova-components/PayoutProducts/package.json
Normal file
@@ -0,0 +1,22 @@
|
||||
{
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "npm run development",
|
||||
"development": "mix",
|
||||
"watch": "mix watch",
|
||||
"watch-poll": "mix watch -- --watch-options-poll=1000",
|
||||
"hot": "mix watch --hot",
|
||||
"prod": "npm run production",
|
||||
"production": "mix --production",
|
||||
"nova:install": "npm --prefix='../../vendor/laravel/nova' ci"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/compiler-sfc": "^3.2.22",
|
||||
"form-backend-validation": "^2.3.3",
|
||||
"laravel-mix": "^6.0.41",
|
||||
"lodash": "^4.17.21",
|
||||
"postcss": "^8.3.11",
|
||||
"vue-loader": "^16.8.3"
|
||||
},
|
||||
"dependencies": {}
|
||||
}
|
||||
1
nova-components/PayoutProducts/postcss.config.js
Normal file
1
nova-components/PayoutProducts/postcss.config.js
Normal file
@@ -0,0 +1 @@
|
||||
module.exports = {}
|
||||
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)
|
||||
})
|
||||
33
nova-components/PayoutProducts/src/FieldServiceProvider.php
Normal file
33
nova-components/PayoutProducts/src/FieldServiceProvider.php
Normal file
@@ -0,0 +1,33 @@
|
||||
<?php
|
||||
|
||||
namespace Nurmuhammet\PayoutProducts;
|
||||
|
||||
use Illuminate\Support\ServiceProvider;
|
||||
use Laravel\Nova\Events\ServingNova;
|
||||
use Laravel\Nova\Nova;
|
||||
|
||||
class FieldServiceProvider extends ServiceProvider
|
||||
{
|
||||
/**
|
||||
* Bootstrap any application services.
|
||||
*
|
||||
* @return void
|
||||
*/
|
||||
public function boot()
|
||||
{
|
||||
Nova::serving(function (ServingNova $event) {
|
||||
Nova::script('payout-products', __DIR__.'/../dist/js/field.js');
|
||||
Nova::style('payout-products', __DIR__.'/../dist/css/field.css');
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Register any application services.
|
||||
*
|
||||
* @return void
|
||||
*/
|
||||
public function register()
|
||||
{
|
||||
//
|
||||
}
|
||||
}
|
||||
38
nova-components/PayoutProducts/src/PayoutProducts.php
Normal file
38
nova-components/PayoutProducts/src/PayoutProducts.php
Normal file
@@ -0,0 +1,38 @@
|
||||
<?php
|
||||
|
||||
namespace Nurmuhammet\PayoutProducts;
|
||||
|
||||
use Illuminate\Contracts\Support\Arrayable;
|
||||
use Illuminate\Support\Collection;
|
||||
use Laravel\Nova\Fields\Field;
|
||||
use Laravel\Nova\Fields\SupportsDependentFields;
|
||||
|
||||
class PayoutProducts extends Field
|
||||
{
|
||||
use SupportsDependentFields;
|
||||
|
||||
/**
|
||||
* The field's component.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
public $component = 'payout-products';
|
||||
|
||||
/**
|
||||
* Products to be rendered
|
||||
*
|
||||
* @param array $products
|
||||
*/
|
||||
public function products(array|callable|Collection $products): self
|
||||
{
|
||||
if (is_callable($products)) {
|
||||
$products = call_user_func($products);
|
||||
}
|
||||
|
||||
if ($products instanceof Arrayable) {
|
||||
$products = $products->toArray();
|
||||
}
|
||||
|
||||
return $this->withMeta(['products' => $products]);
|
||||
}
|
||||
}
|
||||
10
nova-components/PayoutProducts/webpack.mix.js
Normal file
10
nova-components/PayoutProducts/webpack.mix.js
Normal file
@@ -0,0 +1,10 @@
|
||||
let mix = require('laravel-mix')
|
||||
|
||||
require('./nova.mix')
|
||||
|
||||
mix
|
||||
.setPublicPath('dist')
|
||||
.js('resources/js/field.js', 'js')
|
||||
.vue({ version: 3 })
|
||||
.css('resources/css/field.css', 'css')
|
||||
.nova('nurmuhammet/payout-products')
|
||||
Reference in New Issue
Block a user