wip
This commit is contained in:
10
nova-components/ProductInventory/.gitignore
vendored
Normal file
10
nova-components/ProductInventory/.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/ProductInventory/composer.json
Normal file
29
nova-components/ProductInventory/composer.json
Normal file
@@ -0,0 +1,29 @@
|
||||
{
|
||||
"name": "nurmuhammet/product-inventory",
|
||||
"description": "A Laravel Nova field.",
|
||||
"keywords": [
|
||||
"laravel",
|
||||
"nova"
|
||||
],
|
||||
"license": "MIT",
|
||||
"require": {
|
||||
"php": "^7.3|^8.0"
|
||||
},
|
||||
"autoload": {
|
||||
"psr-4": {
|
||||
"Nurmuhammet\\ProductInventory\\": "src/"
|
||||
}
|
||||
},
|
||||
"extra": {
|
||||
"laravel": {
|
||||
"providers": [
|
||||
"Nurmuhammet\\ProductInventory\\FieldServiceProvider"
|
||||
]
|
||||
}
|
||||
},
|
||||
"config": {
|
||||
"sort-packages": true
|
||||
},
|
||||
"minimum-stability": "dev",
|
||||
"prefer-stable": true
|
||||
}
|
||||
1
nova-components/ProductInventory/dist/css/field.css
vendored
Normal file
1
nova-components/ProductInventory/dist/css/field.css
vendored
Normal file
@@ -0,0 +1 @@
|
||||
|
||||
2
nova-components/ProductInventory/dist/js/field.js
vendored
Normal file
2
nova-components/ProductInventory/dist/js/field.js
vendored
Normal file
File diff suppressed because one or more lines are too long
14
nova-components/ProductInventory/dist/js/field.js.LICENSE.txt
vendored
Normal file
14
nova-components/ProductInventory/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/ProductInventory/dist/mix-manifest.json
vendored
Normal file
4
nova-components/ProductInventory/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/ProductInventory/nova.mix.js
Normal file
40
nova-components/ProductInventory/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/ProductInventory/package.json
Normal file
22
nova-components/ProductInventory/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/ProductInventory/postcss.config.js
Normal file
1
nova-components/ProductInventory/postcss.config.js
Normal file
@@ -0,0 +1 @@
|
||||
module.exports = {}
|
||||
1
nova-components/ProductInventory/resources/css/field.css
Normal file
1
nova-components/ProductInventory/resources/css/field.css
Normal file
@@ -0,0 +1 @@
|
||||
/* Nova Field CSS */
|
||||
@@ -0,0 +1,37 @@
|
||||
<template>
|
||||
<DefaultField :field="field" :errors="errors">
|
||||
<template #field>
|
||||
<div class="md:flex md:flex-row" v-for="(item, index) in field.value">
|
||||
<div class="w-full px-1 md:w-1/2">
|
||||
<div class="flex relative w-full">
|
||||
<select class="w-full block form-control form-input form-control-bordered link-default">
|
||||
<option>{{ item.name }}</option>
|
||||
</select>
|
||||
|
||||
<svg class="flex-shrink-0 pointer-events-none form-select-arrow" xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6">
|
||||
<path class="fill-current" d="M8.292893.292893c.390525-.390524 1.023689-.390524 1.414214 0 .390524.390525.390524 1.023689 0 1.414214l-4 4c-.390525.390524-1.023689.390524-1.414214 0l-4-4c-.390524-.390525-.390524-1.023689 0-1.414214.390525-.390524 1.023689-.390524 1.414214 0L5 3.585786 8.292893.292893z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full px-1 md:w-1/2">
|
||||
<input
|
||||
type="number"
|
||||
v-model="item.value"
|
||||
class="w-full block form-control form-input form-control-bordered"
|
||||
disabled="disabled"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
</template>
|
||||
</DefaultField>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ['index', 'resource', 'resourceName', 'resourceId', 'field'],
|
||||
data: () => ({
|
||||
generator: 0,
|
||||
}),
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,133 @@
|
||||
<template>
|
||||
<DefaultField :field="currentField" :errors="errors">
|
||||
<template #field>
|
||||
<div class="md:flex md:flex-row" v-for="(item, index) in items" :key="generator">
|
||||
<div class="w-full px-1 md:w-1/2">
|
||||
<div class="flex relative w-full">
|
||||
<select
|
||||
class="w-full block form-control form-input form-control-bordered"
|
||||
v-model="item.key"
|
||||
@change="optionSelected(item.key)"
|
||||
:disabled="item.key !== ''"
|
||||
required
|
||||
>
|
||||
<option value="" disabled>Select</option>
|
||||
<option v-for="option in item.availableOptions" :key="option" :value="option.value">{{ option.label }}</option>
|
||||
</select>
|
||||
|
||||
<svg class="flex-shrink-0 pointer-events-none form-select-arrow" xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6">
|
||||
<path class="fill-current" d="M8.292893.292893c.390525-.390524 1.023689-.390524 1.414214 0 .390524.390525.390524 1.023689 0 1.414214l-4 4c-.390525.390524-1.023689.390524-1.414214 0l-4-4c-.390524-.390525-.390524-1.023689 0-1.414214.390525-.390524 1.023689-.390524 1.414214 0L5 3.585786 8.292893.292893z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full px-1 md:w-1/2">
|
||||
<input
|
||||
type="number"
|
||||
v-model="item.value"
|
||||
class="w-full form-control form-input form-input-bordered"
|
||||
/>
|
||||
</div>
|
||||
<IconButton
|
||||
@click="removeItem(index)"
|
||||
class="ml-auto"
|
||||
iconType="trash"
|
||||
solid
|
||||
small
|
||||
/>
|
||||
</div>
|
||||
|
||||
<InvertedButton type="button" @click="addItem()" v-if="addButtonVisibility">
|
||||
<span>Add</span>
|
||||
</InvertedButton>
|
||||
|
||||
<p v-if="hasError" class="my-2 text-danger">
|
||||
{{ firstError }}
|
||||
</p>
|
||||
</template>
|
||||
</DefaultField>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { DependentFormField, HandlesValidationErrors } from 'laravel-nova'
|
||||
|
||||
export default {
|
||||
mixins: [DependentFormField, HandlesValidationErrors],
|
||||
props: ['resourceName', 'resourceId', 'field'],
|
||||
data: () => ({
|
||||
generator: 0,
|
||||
items: [],
|
||||
options: [],
|
||||
selectedValues: [],
|
||||
addButtonVisibility: true,
|
||||
}),
|
||||
methods: {
|
||||
/**
|
||||
* Fill the given FormData object with the field's internal value.
|
||||
*/
|
||||
fill(formData) {
|
||||
this.items.forEach((item, index) => {
|
||||
if (item.key && item.value) {
|
||||
formData.append(`${this.fieldAttribute}[${item.key}]`, item.value)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* Add item
|
||||
*/
|
||||
addItem(key = '', value = '') {
|
||||
this.items.push({
|
||||
id: this.generator++,
|
||||
key: key,
|
||||
value: value,
|
||||
availableOptions: this.options.filter(option => ! this.selectedValues.includes(option.value))
|
||||
})
|
||||
|
||||
this.addButtonVisibility = false
|
||||
},
|
||||
|
||||
/**
|
||||
* Remove item
|
||||
*/
|
||||
removeItem(index) {
|
||||
this.selectedValues = this.selectedValues.filter(item => item !== this.items[index].key)
|
||||
this.items.splice(index, 1)
|
||||
|
||||
this.checkAddButtonVisibility()
|
||||
},
|
||||
|
||||
/**
|
||||
* Option Selected
|
||||
*/
|
||||
optionSelected(value) {
|
||||
this.selectedValues.push(value)
|
||||
|
||||
this.checkAddButtonVisibility()
|
||||
},
|
||||
|
||||
/**
|
||||
* Check Add Button Visibility
|
||||
*/
|
||||
checkAddButtonVisibility() {
|
||||
if (this.selectedValues.length === this.options.length) {
|
||||
return
|
||||
}
|
||||
|
||||
this.addButtonVisibility = true
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.options = Object.values(this.currentField.options)
|
||||
|
||||
if (this.currentField.value && this.currentField.value.length > 0) {
|
||||
Array.from(this.currentField.value).forEach(value => {
|
||||
this.addItem(value.id, value.pivot.stock)
|
||||
this.optionSelected(value.id)
|
||||
})
|
||||
} else {
|
||||
this.addItem()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
7
nova-components/ProductInventory/resources/js/field.js
Normal file
7
nova-components/ProductInventory/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-product-inventory', DetailField)
|
||||
app.component('form-product-inventory', FormField)
|
||||
})
|
||||
@@ -0,0 +1,33 @@
|
||||
<?php
|
||||
|
||||
namespace Nurmuhammet\ProductInventory;
|
||||
|
||||
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('product-inventory', __DIR__.'/../dist/js/field.js');
|
||||
Nova::style('product-inventory', __DIR__.'/../dist/css/field.css');
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Register any application services.
|
||||
*
|
||||
* @return void
|
||||
*/
|
||||
public function register()
|
||||
{
|
||||
//
|
||||
}
|
||||
}
|
||||
44
nova-components/ProductInventory/src/ProductInventory.php
Normal file
44
nova-components/ProductInventory/src/ProductInventory.php
Normal file
@@ -0,0 +1,44 @@
|
||||
<?php
|
||||
|
||||
namespace Nurmuhammet\ProductInventory;
|
||||
|
||||
use Illuminate\Support\Collection;
|
||||
use Laravel\Nova\Fields\Field;
|
||||
use Laravel\Nova\Fields\SupportsDependentFields;
|
||||
|
||||
class ProductInventory extends Field
|
||||
{
|
||||
use SupportsDependentFields;
|
||||
|
||||
/**
|
||||
* The field's component.
|
||||
*
|
||||
* @var string
|
||||
*/
|
||||
public $component = 'product-inventory';
|
||||
|
||||
/**
|
||||
* Set the options for the select menu.
|
||||
*
|
||||
* @param array<string|int, array<string, mixed>|string>|\Closure|callable|\Illuminate\Support\Collection $options
|
||||
* @return $this
|
||||
*
|
||||
* @phpstan-param TOption|(callable(): (TOption))|(\Closure(): (TOption)) $options
|
||||
*/
|
||||
public function options(array|Collection $options): self
|
||||
{
|
||||
return $this->withMeta([
|
||||
'options' => $this->serializeOptions($options),
|
||||
]);
|
||||
}
|
||||
|
||||
/**
|
||||
* Serialize Options
|
||||
*
|
||||
* @param Collection $options
|
||||
*/
|
||||
public function serializeOptions(array|Collection $options): array|Collection
|
||||
{
|
||||
return collect($options)->map(fn ($label, $value) => ['label' => $label, 'value' => $value]);
|
||||
}
|
||||
}
|
||||
10
nova-components/ProductInventory/webpack.mix.js
Normal file
10
nova-components/ProductInventory/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/product-inventory')
|
||||
Reference in New Issue
Block a user