Barcode Printing Complete Using Livewire
This commit is contained in:
parent
eff33fd386
commit
7b7d0c9389
|
@ -0,0 +1,29 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport"
|
||||||
|
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||||
|
<title>Barcodes</title>
|
||||||
|
<link rel="stylesheet" href="{{ public_path('b3/bootstrap.min.css') }}">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
@foreach($barcodes as $barcode)
|
||||||
|
<div class="col-xs-3" style="border: 1px solid #dddddd;border-style: dashed;">
|
||||||
|
<p style="font-size: 15px;color: #000;margin-top: 15px;margin-bottom: 5px;">
|
||||||
|
{{ $name }}
|
||||||
|
</p>
|
||||||
|
<div>
|
||||||
|
{!! $barcode !!}
|
||||||
|
</div>
|
||||||
|
<p style="font-size: 15px;color: #000;font-weight: bold;">
|
||||||
|
Price:: {{ number_format($price) }}</p>
|
||||||
|
</div>
|
||||||
|
@endforeach
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
|
@ -27,7 +27,7 @@ class PermissionsTableSeeder extends Seeder
|
||||||
'edit_products',
|
'edit_products',
|
||||||
'delete_products',
|
'delete_products',
|
||||||
'access_product_categories',
|
'access_product_categories',
|
||||||
'access_user_management',
|
'print_barcodes',
|
||||||
];
|
];
|
||||||
|
|
||||||
foreach ($permissions as $permission) {
|
foreach ($permissions as $permission) {
|
||||||
|
|
|
@ -34,11 +34,20 @@ class ProductTable extends Component
|
||||||
$this->barcodes = [];
|
$this->barcodes = [];
|
||||||
|
|
||||||
for ($i = 1; $i <= $quantity; $i++) {
|
for ($i = 1; $i <= $quantity; $i++) {
|
||||||
$barcode = DNS1DFacade::getBarCodeSVG($product->product_code, $product->product_barcode_symbology,2 , 60);
|
$barcode = DNS1DFacade::getBarCodeSVG($product->product_code, $product->product_barcode_symbology,2 , 60, 'black', false);
|
||||||
array_push($this->barcodes, $barcode);
|
array_push($this->barcodes, $barcode);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public function getPdf() {
|
||||||
|
$pdf = \PDF::loadView('product::barcode.print', [
|
||||||
|
'barcodes' => $this->barcodes,
|
||||||
|
'price' => $this->product->product_price,
|
||||||
|
'name' => $this->product->product_name,
|
||||||
|
]);
|
||||||
|
return $pdf->stream('barcodes-'. $this->product->product_code .'.pdf');
|
||||||
|
}
|
||||||
|
|
||||||
public function updatedQuantity() {
|
public function updatedQuantity() {
|
||||||
$this->barcodes = [];
|
$this->barcodes = [];
|
||||||
}
|
}
|
||||||
|
|
|
@ -37,7 +37,9 @@ return [
|
||||||
'enabled' => true,
|
'enabled' => true,
|
||||||
'binary' => env('WKHTML_PDF_BINARY', '"C:\Program Files\wkhtmltopdf\bin\wkhtmltopdf.exe"'),
|
'binary' => env('WKHTML_PDF_BINARY', '"C:\Program Files\wkhtmltopdf\bin\wkhtmltopdf.exe"'),
|
||||||
'timeout' => false,
|
'timeout' => false,
|
||||||
'options' => [],
|
'options' => [
|
||||||
|
'enable-local-file-access' => true
|
||||||
|
],
|
||||||
'env' => [],
|
'env' => [],
|
||||||
],
|
],
|
||||||
|
|
||||||
|
@ -45,7 +47,9 @@ return [
|
||||||
'enabled' => true,
|
'enabled' => true,
|
||||||
'binary' => env('WKHTML_IMG_BINARY', '"C:\Program Files\wkhtmltopdf\bin\wkhtmltoimage.exe"'),
|
'binary' => env('WKHTML_IMG_BINARY', '"C:\Program Files\wkhtmltopdf\bin\wkhtmltoimage.exe"'),
|
||||||
'timeout' => false,
|
'timeout' => false,
|
||||||
'options' => [],
|
'options' => [
|
||||||
|
'enable-local-file-access' => true
|
||||||
|
],
|
||||||
'env' => [],
|
'env' => [],
|
||||||
],
|
],
|
||||||
|
|
||||||
|
|
|
@ -1726,7 +1726,6 @@
|
||||||
"version": "10.3.1",
|
"version": "10.3.1",
|
||||||
"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.3.1.tgz",
|
"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.3.1.tgz",
|
||||||
"integrity": "sha512-L8AmtKzdiRyYg7BUXJTzigmhbQRCXFKz6SA1Lqo0+AR2FBbQ4aTAPFSDlOutnFkjhiz8my4agGXog1xlMjPJ6A==",
|
"integrity": "sha512-L8AmtKzdiRyYg7BUXJTzigmhbQRCXFKz6SA1Lqo0+AR2FBbQ4aTAPFSDlOutnFkjhiz8my4agGXog1xlMjPJ6A==",
|
||||||
"dev": true,
|
|
||||||
"requires": {
|
"requires": {
|
||||||
"browserslist": "^4.16.6",
|
"browserslist": "^4.16.6",
|
||||||
"caniuse-lite": "^1.0.30001243",
|
"caniuse-lite": "^1.0.30001243",
|
||||||
|
@ -2028,7 +2027,6 @@
|
||||||
"version": "4.16.6",
|
"version": "4.16.6",
|
||||||
"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.16.6.tgz",
|
"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.16.6.tgz",
|
||||||
"integrity": "sha512-Wspk/PqO+4W9qp5iUTJsa1B/QrYn1keNCcEP5OvP7WBwT4KaDly0uONYmC6Xa3Z5IqnUgS0KcgLYu1l74x0ZXQ==",
|
"integrity": "sha512-Wspk/PqO+4W9qp5iUTJsa1B/QrYn1keNCcEP5OvP7WBwT4KaDly0uONYmC6Xa3Z5IqnUgS0KcgLYu1l74x0ZXQ==",
|
||||||
"dev": true,
|
|
||||||
"requires": {
|
"requires": {
|
||||||
"caniuse-lite": "^1.0.30001219",
|
"caniuse-lite": "^1.0.30001219",
|
||||||
"colorette": "^1.2.2",
|
"colorette": "^1.2.2",
|
||||||
|
@ -2119,8 +2117,7 @@
|
||||||
"caniuse-lite": {
|
"caniuse-lite": {
|
||||||
"version": "1.0.30001244",
|
"version": "1.0.30001244",
|
||||||
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001244.tgz",
|
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001244.tgz",
|
||||||
"integrity": "sha512-Wb4UFZPkPoJoKKVfELPWytRzpemjP/s0pe22NriANru1NoI+5bGNxzKtk7edYL8rmCWTfQO8eRiF0pn1Dqzx7Q==",
|
"integrity": "sha512-Wb4UFZPkPoJoKKVfELPWytRzpemjP/s0pe22NriANru1NoI+5bGNxzKtk7edYL8rmCWTfQO8eRiF0pn1Dqzx7Q=="
|
||||||
"dev": true
|
|
||||||
},
|
},
|
||||||
"chalk": {
|
"chalk": {
|
||||||
"version": "4.1.1",
|
"version": "4.1.1",
|
||||||
|
@ -2303,8 +2300,7 @@
|
||||||
"colorette": {
|
"colorette": {
|
||||||
"version": "1.2.2",
|
"version": "1.2.2",
|
||||||
"resolved": "https://registry.npmjs.org/colorette/-/colorette-1.2.2.tgz",
|
"resolved": "https://registry.npmjs.org/colorette/-/colorette-1.2.2.tgz",
|
||||||
"integrity": "sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w==",
|
"integrity": "sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w=="
|
||||||
"dev": true
|
|
||||||
},
|
},
|
||||||
"colors": {
|
"colors": {
|
||||||
"version": "1.4.0",
|
"version": "1.4.0",
|
||||||
|
@ -3005,8 +3001,7 @@
|
||||||
"electron-to-chromium": {
|
"electron-to-chromium": {
|
||||||
"version": "1.3.774",
|
"version": "1.3.774",
|
||||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.774.tgz",
|
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.774.tgz",
|
||||||
"integrity": "sha512-Fggh17Q1yyv1uMzq8Qn1Ci58P50qcRXMXd2MBcB9sxo6rJxjUutWcNw8uCm3gFWMdcblBO6mDT5HzX/RVRRECA==",
|
"integrity": "sha512-Fggh17Q1yyv1uMzq8Qn1Ci58P50qcRXMXd2MBcB9sxo6rJxjUutWcNw8uCm3gFWMdcblBO6mDT5HzX/RVRRECA=="
|
||||||
"dev": true
|
|
||||||
},
|
},
|
||||||
"elliptic": {
|
"elliptic": {
|
||||||
"version": "6.5.4",
|
"version": "6.5.4",
|
||||||
|
@ -3089,8 +3084,7 @@
|
||||||
"escalade": {
|
"escalade": {
|
||||||
"version": "3.1.1",
|
"version": "3.1.1",
|
||||||
"resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
|
"resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
|
||||||
"integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==",
|
"integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw=="
|
||||||
"dev": true
|
|
||||||
},
|
},
|
||||||
"escape-html": {
|
"escape-html": {
|
||||||
"version": "1.0.3",
|
"version": "1.0.3",
|
||||||
|
@ -3424,8 +3418,7 @@
|
||||||
"fraction.js": {
|
"fraction.js": {
|
||||||
"version": "4.1.1",
|
"version": "4.1.1",
|
||||||
"resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.1.1.tgz",
|
"resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.1.1.tgz",
|
||||||
"integrity": "sha512-MHOhvvxHTfRFpF1geTK9czMIZ6xclsEor2wkIGYYq+PxcQqT7vStJqjhe6S1TenZrMZzo+wlqOufBDVepUEgPg==",
|
"integrity": "sha512-MHOhvvxHTfRFpF1geTK9czMIZ6xclsEor2wkIGYYq+PxcQqT7vStJqjhe6S1TenZrMZzo+wlqOufBDVepUEgPg=="
|
||||||
"dev": true
|
|
||||||
},
|
},
|
||||||
"fresh": {
|
"fresh": {
|
||||||
"version": "0.5.2",
|
"version": "0.5.2",
|
||||||
|
@ -4838,8 +4831,7 @@
|
||||||
"node-releases": {
|
"node-releases": {
|
||||||
"version": "1.1.73",
|
"version": "1.1.73",
|
||||||
"resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.73.tgz",
|
"resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.73.tgz",
|
||||||
"integrity": "sha512-uW7fodD6pyW2FZNZnp/Z3hvWKeEW1Y8R1+1CnErE8cXFXzl5blBOoVB41CvMer6P6Q0S5FXDwcHgFd1Wj0U9zg==",
|
"integrity": "sha512-uW7fodD6pyW2FZNZnp/Z3hvWKeEW1Y8R1+1CnErE8cXFXzl5blBOoVB41CvMer6P6Q0S5FXDwcHgFd1Wj0U9zg=="
|
||||||
"dev": true
|
|
||||||
},
|
},
|
||||||
"normalize-path": {
|
"normalize-path": {
|
||||||
"version": "3.0.0",
|
"version": "3.0.0",
|
||||||
|
@ -4850,8 +4842,7 @@
|
||||||
"normalize-range": {
|
"normalize-range": {
|
||||||
"version": "0.1.2",
|
"version": "0.1.2",
|
||||||
"resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
|
"resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
|
||||||
"integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=",
|
"integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI="
|
||||||
"dev": true
|
|
||||||
},
|
},
|
||||||
"normalize-url": {
|
"normalize-url": {
|
||||||
"version": "6.1.0",
|
"version": "6.1.0",
|
||||||
|
@ -5547,8 +5538,7 @@
|
||||||
"postcss-value-parser": {
|
"postcss-value-parser": {
|
||||||
"version": "4.1.0",
|
"version": "4.1.0",
|
||||||
"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz",
|
||||||
"integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==",
|
"integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ=="
|
||||||
"dev": true
|
|
||||||
},
|
},
|
||||||
"pretty-time": {
|
"pretty-time": {
|
||||||
"version": "1.1.0",
|
"version": "1.1.0",
|
||||||
|
|
|
@ -25,6 +25,7 @@
|
||||||
"webpack-cli": "^4.7.2"
|
"webpack-cli": "^4.7.2"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"autoprefixer": "^10.3.1",
|
||||||
"datatables.net-bs4": "^3.2.2",
|
"datatables.net-bs4": "^3.2.2",
|
||||||
"datatables.net-buttons-bs4": "^1.7.1"
|
"datatables.net-buttons-bs4": "^1.7.1"
|
||||||
}
|
}
|
||||||
|
|
File diff suppressed because one or more lines are too long
|
@ -1,6 +0,0 @@
|
||||||
/******/ (() => { // webpackBootstrap
|
|
||||||
/******/ "use strict";
|
|
||||||
/******/
|
|
||||||
/******/
|
|
||||||
/******/ })()
|
|
||||||
;
|
|
|
@ -12,9 +12,10 @@
|
||||||
|
|
||||||
@yield('third_party_stylesheets')
|
@yield('third_party_stylesheets')
|
||||||
|
|
||||||
|
@livewireStyles
|
||||||
|
|
||||||
@stack('page_css')
|
@stack('page_css')
|
||||||
|
|
||||||
@livewireStyles
|
|
||||||
<style>
|
<style>
|
||||||
div.dataTables_wrapper div.dataTables_length select {
|
div.dataTables_wrapper div.dataTables_length select {
|
||||||
width: 65px;
|
width: 65px;
|
||||||
|
@ -51,8 +52,9 @@
|
||||||
|
|
||||||
@yield('third_party_scripts')
|
@yield('third_party_scripts')
|
||||||
|
|
||||||
|
@livewireScripts
|
||||||
|
|
||||||
@stack('page_scripts')
|
@stack('page_scripts')
|
||||||
|
|
||||||
@livewireScripts
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -16,7 +16,8 @@
|
||||||
<td class="align-middle">{{ $product->product_name }}</td>
|
<td class="align-middle">{{ $product->product_name }}</td>
|
||||||
<td class="align-middle">{{ $product->product_code }}</td>
|
<td class="align-middle">{{ $product->product_code }}</td>
|
||||||
<td class="align-middle text-center" style="width: 200px;">
|
<td class="align-middle text-center" style="width: 200px;">
|
||||||
<input wire:model="quantity" class="form-control" type="number" min="1" value="{{ $quantity }}">
|
<input wire:model="quantity" class="form-control" type="number" min="1"
|
||||||
|
value="{{ $quantity }}">
|
||||||
</td>
|
</td>
|
||||||
@else
|
@else
|
||||||
<td colspan="3" class="text-center">
|
<td colspan="3" class="text-center">
|
||||||
|
@ -28,21 +29,39 @@
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-3">
|
<div class="mt-3">
|
||||||
<button {{ empty($product) ? 'disabled' : '' }} wire:click="generateBarcodes({{ $product }}, {{ $quantity }})" type="button" class="btn btn-primary"><i class="bi bi-upc-scan"></i> Generate Barcodes
|
<button
|
||||||
|
wire:click="generateBarcodes({{ $product }}, {{ $quantity }})"
|
||||||
|
type="button" class="btn btn-primary"><i class="bi bi-upc-scan"></i> Generate Barcodes
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@if(!empty($barcodes))
|
@if(!empty($barcodes))
|
||||||
|
<div class="text-right mb-3">
|
||||||
|
<button wire:click="getPdf" wire:loading.attr="disabled" type="button" class="btn btn-primary">
|
||||||
|
<span wire:loading wire:target="getPdf" class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
|
||||||
|
<i wire:loading.remove wire:target="getPdf" class="bi bi-file-earmark-pdf"></i> Download PDF
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-body d-flex flex-wrap justify-content-center align-items-center pt-5">
|
<div class="card-body">
|
||||||
|
<div class="row justify-content-center">
|
||||||
@foreach($barcodes as $barcode)
|
@foreach($barcodes as $barcode)
|
||||||
<div class="mr-5 mb-5">
|
<div class="col-lg-3 col-md-4 col-6" style="border: 1px solid #ffffff;border-style: dashed;background-color: #48FCFE;">
|
||||||
|
<p class="mt-3 mb-1" style="font-size: 15px;color: #000;">
|
||||||
|
{{ $product->product_name }}
|
||||||
|
</p>
|
||||||
|
<div>
|
||||||
{!! $barcode !!}
|
{!! $barcode !!}
|
||||||
</div>
|
</div>
|
||||||
|
<p style="font-size: 15px;color: #000;">
|
||||||
|
Price:: {{ number_format($product->product_price) }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
@endforeach
|
@endforeach
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
@endif
|
@endif
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -8,15 +8,19 @@
|
||||||
<i class="bi bi-search"></i>
|
<i class="bi bi-search"></i>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<input wire:keydown.escape="resetQuery" wire:model.debounce.500ms="query" type="text" class="form-control" placeholder="Type product name or code...." wire:key.="">
|
<input wire:keydown.escape="resetQuery" wire:model.debounce.500ms="query" type="text" class="form-control" placeholder="Type product name or code....">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div wire:loading class="card position-absolute mt-1" style="z-index: 1;left: 0;right: 0;">
|
<div wire:loading wire:target="query" class="card position-absolute mt-1" style="z-index: 1;left: 0;right: 0;">
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<strong class="text-primary">Searching.......</strong>
|
<div class="d-flex justify-content-center">
|
||||||
|
<div class="spinner-border text-primary" role="status">
|
||||||
|
<span class="sr-only">Loading...</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue