Barcode Printing Complete Using Livewire

This commit is contained in:
Fahim Anzam Dip 2021-07-21 19:29:44 +06:00
parent eff33fd386
commit 7b7d0c9389
11 changed files with 99 additions and 41 deletions

View File

@ -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>

View File

@ -27,7 +27,7 @@ class PermissionsTableSeeder extends Seeder
'edit_products',
'delete_products',
'access_product_categories',
'access_user_management',
'print_barcodes',
];
foreach ($permissions as $permission) {

View File

@ -34,11 +34,20 @@ class ProductTable extends Component
$this->barcodes = [];
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);
}
}
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() {
$this->barcodes = [];
}

View File

@ -37,7 +37,9 @@ return [
'enabled' => true,
'binary' => env('WKHTML_PDF_BINARY', '"C:\Program Files\wkhtmltopdf\bin\wkhtmltopdf.exe"'),
'timeout' => false,
'options' => [],
'options' => [
'enable-local-file-access' => true
],
'env' => [],
],
@ -45,7 +47,9 @@ return [
'enabled' => true,
'binary' => env('WKHTML_IMG_BINARY', '"C:\Program Files\wkhtmltopdf\bin\wkhtmltoimage.exe"'),
'timeout' => false,
'options' => [],
'options' => [
'enable-local-file-access' => true
],
'env' => [],
],

26
package-lock.json generated
View File

@ -1726,7 +1726,6 @@
"version": "10.3.1",
"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.3.1.tgz",
"integrity": "sha512-L8AmtKzdiRyYg7BUXJTzigmhbQRCXFKz6SA1Lqo0+AR2FBbQ4aTAPFSDlOutnFkjhiz8my4agGXog1xlMjPJ6A==",
"dev": true,
"requires": {
"browserslist": "^4.16.6",
"caniuse-lite": "^1.0.30001243",
@ -2028,7 +2027,6 @@
"version": "4.16.6",
"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.16.6.tgz",
"integrity": "sha512-Wspk/PqO+4W9qp5iUTJsa1B/QrYn1keNCcEP5OvP7WBwT4KaDly0uONYmC6Xa3Z5IqnUgS0KcgLYu1l74x0ZXQ==",
"dev": true,
"requires": {
"caniuse-lite": "^1.0.30001219",
"colorette": "^1.2.2",
@ -2119,8 +2117,7 @@
"caniuse-lite": {
"version": "1.0.30001244",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001244.tgz",
"integrity": "sha512-Wb4UFZPkPoJoKKVfELPWytRzpemjP/s0pe22NriANru1NoI+5bGNxzKtk7edYL8rmCWTfQO8eRiF0pn1Dqzx7Q==",
"dev": true
"integrity": "sha512-Wb4UFZPkPoJoKKVfELPWytRzpemjP/s0pe22NriANru1NoI+5bGNxzKtk7edYL8rmCWTfQO8eRiF0pn1Dqzx7Q=="
},
"chalk": {
"version": "4.1.1",
@ -2303,8 +2300,7 @@
"colorette": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/colorette/-/colorette-1.2.2.tgz",
"integrity": "sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w==",
"dev": true
"integrity": "sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w=="
},
"colors": {
"version": "1.4.0",
@ -3005,8 +3001,7 @@
"electron-to-chromium": {
"version": "1.3.774",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.774.tgz",
"integrity": "sha512-Fggh17Q1yyv1uMzq8Qn1Ci58P50qcRXMXd2MBcB9sxo6rJxjUutWcNw8uCm3gFWMdcblBO6mDT5HzX/RVRRECA==",
"dev": true
"integrity": "sha512-Fggh17Q1yyv1uMzq8Qn1Ci58P50qcRXMXd2MBcB9sxo6rJxjUutWcNw8uCm3gFWMdcblBO6mDT5HzX/RVRRECA=="
},
"elliptic": {
"version": "6.5.4",
@ -3089,8 +3084,7 @@
"escalade": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
"integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==",
"dev": true
"integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw=="
},
"escape-html": {
"version": "1.0.3",
@ -3424,8 +3418,7 @@
"fraction.js": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.1.1.tgz",
"integrity": "sha512-MHOhvvxHTfRFpF1geTK9czMIZ6xclsEor2wkIGYYq+PxcQqT7vStJqjhe6S1TenZrMZzo+wlqOufBDVepUEgPg==",
"dev": true
"integrity": "sha512-MHOhvvxHTfRFpF1geTK9czMIZ6xclsEor2wkIGYYq+PxcQqT7vStJqjhe6S1TenZrMZzo+wlqOufBDVepUEgPg=="
},
"fresh": {
"version": "0.5.2",
@ -4838,8 +4831,7 @@
"node-releases": {
"version": "1.1.73",
"resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.73.tgz",
"integrity": "sha512-uW7fodD6pyW2FZNZnp/Z3hvWKeEW1Y8R1+1CnErE8cXFXzl5blBOoVB41CvMer6P6Q0S5FXDwcHgFd1Wj0U9zg==",
"dev": true
"integrity": "sha512-uW7fodD6pyW2FZNZnp/Z3hvWKeEW1Y8R1+1CnErE8cXFXzl5blBOoVB41CvMer6P6Q0S5FXDwcHgFd1Wj0U9zg=="
},
"normalize-path": {
"version": "3.0.0",
@ -4850,8 +4842,7 @@
"normalize-range": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
"integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=",
"dev": true
"integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI="
},
"normalize-url": {
"version": "6.1.0",
@ -5547,8 +5538,7 @@
"postcss-value-parser": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz",
"integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==",
"dev": true
"integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ=="
},
"pretty-time": {
"version": "1.1.0",

View File

@ -25,6 +25,7 @@
"webpack-cli": "^4.7.2"
},
"dependencies": {
"autoprefixer": "^10.3.1",
"datatables.net-bs4": "^3.2.2",
"datatables.net-buttons-bs4": "^1.7.1"
}

6
public/b3/bootstrap.min.css vendored Normal file

File diff suppressed because one or more lines are too long

View File

@ -1,6 +0,0 @@
/******/ (() => { // webpackBootstrap
/******/ "use strict";
/******/
/******/
/******/ })()
;

View File

@ -12,9 +12,10 @@
@yield('third_party_stylesheets')
@livewireStyles
@stack('page_css')
@livewireStyles
<style>
div.dataTables_wrapper div.dataTables_length select {
width: 65px;
@ -51,8 +52,9 @@
@yield('third_party_scripts')
@livewireScripts
@stack('page_scripts')
@livewireScripts
</body>
</html>

View File

@ -16,7 +16,8 @@
<td class="align-middle">{{ $product->product_name }}</td>
<td class="align-middle">{{ $product->product_code }}</td>
<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>
@else
<td colspan="3" class="text-center">
@ -28,21 +29,39 @@
</table>
</div>
<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>
</div>
</div>
</div>
@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-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)
<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 !!}
</div>
<p style="font-size: 15px;color: #000;">
Price:: {{ number_format($product->product_price) }}
</p>
</div>
@endforeach
</div>
</div>
</div>
@endif
</div>

View File

@ -8,15 +8,19 @@
<i class="bi bi-search"></i>
</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 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">
<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>