ok
Mini Shell
@php
$addProductCategoryPermission = user()->permission('manage_product_category');
$addProductSubCategoryPermission = user()->permission('manage_product_sub_category');
@endphp
<link rel="stylesheet" href="{{ asset('vendor/css/dropzone.min.css') }}">
<div class="row">
<div class="col-sm-12">
<x-form id="save-product-form">
@include('sections.password-autocomplete-hide')
<div class="add-client bg-white rounded">
<h4 class="mb-0 p-20 f-21 font-weight-normal text-capitalize border-bottom-grey">
@lang('app.menu.addProducts')</h4>
<div class="row p-20">
<div class="col-lg-12">
<div class="row">
<input type="hidden" id="hiddenProductId">
<div class="col-lg-4 col-md-6">
<x-forms.text fieldId="name" :fieldLabel="__('app.name')" fieldName="name"
fieldRequired="true" :fieldPlaceholder="__('placeholders.productName')">
</x-forms.text>
</div>
<div class="col-lg-4 col-md-6">
<x-forms.number class="mr-0 mr-lg-2 mr-md-2" :fieldLabel="__('app.price')"
fieldName="price" fieldId="price" fieldRequired="true"
:fieldPlaceholder="__('placeholders.price')"
fieldValue="0"/>
</div>
<div class="col-lg-4 col-md-6">
<x-forms.label class="my-3" fieldId=""
:fieldLabel="__('modules.productCategory.productCategory')">
</x-forms.label>
<x-forms.input-group>
<select class="form-control select-picker" name="category_id"
id="product_category_id" data-live-search="true">
<option value="">--</option>
@foreach ($categories as $category)
<option value="{{ $category->id }}">
{{ mb_ucwords($category->category_name) }}</option>
@endforeach
</select>
@if ($addProductCategoryPermission == 'all' || $addProductCategoryPermission == 'added')
<x-slot name="append">
<button id="add-category" type="button"
data-toggle="tooltip"
data-original-title="{{ __('app.add').' '.__('modules.productCategory.productCategory') }}"
class="btn btn-outline-secondary border-grey">@lang('app.add')</button>
</x-slot>
@endif
</x-forms.input-group>
</div>
<div class="col-lg-4 col-md-6">
<x-forms.label class="my-3" fieldId=""
:fieldLabel="__('modules.productCategory.productSubCategory')">
</x-forms.label>
<x-forms.input-group>
<select class="form-control select-picker" name="sub_category_id" id="sub_category_id" data-live-search="true">
<option value="">@lang('messages.noProductSubCategoryAdded')</option>
@foreach ($subCategories as $subCategory)
<option value="{{ $subCategory->id }}">
{{ mb_ucwords($subCategory->category_name) }}</option>
@endforeach
</select>
@if ($addProductSubCategoryPermission == 'all' || $addProductSubCategoryPermission == 'added')
<x-slot name="append">
<button id="add-sub-category" type="button" data-toggle="tooltip" data-original-title="{{ __('app.add').' '.__('modules.productCategory.productSubCategory') }}" class="btn btn-outline-secondary border-grey">@lang('app.add')</button>
</x-slot>
@endif
</x-forms.input-group>
</div>
<div class="col-lg-4 col-md-6">
<x-forms.label class="my-3" fieldId="" :fieldLabel="__('modules.invoices.tax')">
</x-forms.label>
<x-forms.input-group>
<select class="form-control select-picker" name="tax[]" id="tax_id"
data-live-search="true" multiple="true">
@foreach ($taxes as $tax)
<option value="{{ $tax->id }}">{{ strtoupper($tax->tax_name) }}:
{{ $tax->rate_percent }}%
</option>
@endforeach
</select>
@if (user()->permission('manage_tax') == 'all')
<x-slot name="append">
<button id="add-tax" type="button"
data-toggle="tooltip"
data-original-title="{{ __('app.add').' '.__('modules.invoices.tax') }}"
class="btn btn-outline-secondary border-grey">@lang('app.add')</button>
</x-slot>
@endif
</x-forms.input-group>
</div>
<div class="col-lg-4 col-md-6">
<x-forms.text fieldId="hsn_sac_code" :fieldLabel="__('app.hsnSac')"
fieldName="hsn_sac_code"
:fieldPlaceholder="__('placeholders.hsnSac')">
</x-forms.text>
</div>
<div class="col-lg-4 col-md-6">
<x-forms.label class="my-3" fieldId="" :fieldLabel="__('modules.unitType.unitType')">
</x-forms.label>
<x-forms.input-group>
<select class="form-control select-picker" name="unit_type" id="unit_type_id"
data-live-search="true">
@foreach ($unit_types as $unit_type)
<option @if($unit_type->default == 1) selected @endif value="{{ $unit_type->id }}">{{ ucwords($unit_type->unit_type) }}
</option>
@endforeach
</select>
</x-forms.input-group>
</div>
<div class="col-lg-4 col-md-6 mt-5">
<x-forms.checkbox class="mr-0 mr-lg-2 mr-md-2" :fieldLabel="__('app.purchaseAllow')"
fieldName="purchase_allow" fieldId="purchase_allow" fieldValue="no"
fieldRequired="true"/>
</div>
<div class="col-lg-4 col-md-6 mt-5">
<x-forms.checkbox class="mr-0 mr-lg-2 mr-md-2" :fieldLabel="__('app.downloadable')"
fieldName="downloadable" fieldId="downloadable" fieldValue="true"
fieldRequired="true" :popover="__('messages.downloadable')"/>
</div>
<div class="col-lg-12 col-xl-12 mt-2 downloadable d-none">
<x-forms.file class="mr-0 mr-lg-2 mr-md-2" :fieldLabel="__('app.downloadableFile')"
fieldName="downloadable_file" fieldId="downloadable_file"
fieldRequired="true"/>
</div>
<div class="col-md-12 mt-3">
<div class="form-group">
<x-forms.label class="my-3" fieldId="description-text"
:fieldLabel="__('app.description')">
</x-forms.label>
<textarea name="description" id="description-text" rows="4"
class="form-control"></textarea>
</div>
</div>
<div class="col-lg-12">
<x-forms.file-multiple class="mr-0 mr-lg-2 mr-md-2" :fieldLabel="__('app.menu.addFile')" fieldName="file" fieldId="file-upload-dropzone-product"/>
</div>
<input type ="hidden" name="add_more" value="false" id="add_more" />
</div>
</div>
</div>
<x-forms.custom-field :fields="$fields"></x-forms.custom-field>
<x-form-actions>
<x-forms.button-primary id="save-product" class="mr-3" icon="check">@lang('app.save')
</x-forms.button-primary>
<x-forms.button-secondary class="mr-3" id="save-more-product" icon="check-double">@lang('app.saveAddMore')
</x-forms.button-secondary>
<x-forms.button-cancel :link="route('products.index')" class="border-0">@lang('app.cancel')
</x-forms.button-cancel>
</x-form-actions>
</div>
</x-form>
</div>
</div>
<script>
$(document).ready(function () {
let defaultImage = '';
let lastIndex = 0;
Dropzone.autoDiscover = false;
//Dropzone class
productDropzone = new Dropzone("div#file-upload-dropzone-product", {
dictDefaultMessage: "{{ __('app.dragDrop') }}",
url: "{{ route('product-files.store') }}",
headers: {
'X-CSRF-TOKEN': '{{ csrf_token() }}'
},
paramName: "file",
maxFilesize: DROPZONE_MAX_FILESIZE,
maxFiles: DROPZONE_MAX_FILES,
autoProcessQueue: false,
uploadMultiple: true,
addRemoveLinks: true,
parallelUploads: DROPZONE_MAX_FILES,
acceptedFiles: 'image/*',
init: function () {
productDropzone = this;
}
});
productDropzone.on('sending', function (file, xhr, formData) {
const productID = $('#hiddenProductId').val();
formData.append('product_id', productID);
formData.append('default_image', defaultImage);
$.easyBlockUI();
});
productDropzone.on('uploadprogress', function () {
$.easyBlockUI();
});
productDropzone.on('queuecomplete', function () {
window.location.href = '{{ route("products.index") }}';
});
productDropzone.on('removedfile', function () {
var grp = $('div#file-upload-dropzone').closest(".form-group");
var label = $('div#file-upload-box').siblings("label");
$(grp).removeClass("has-error");
$(label).removeClass("is-invalid");
});
productDropzone.on('error', function (file, message) {
productDropzone.removeFile(file);
var grp = $('div#file-upload-dropzone').closest(".form-group");
var label = $('div#file-upload-box').siblings("label");
$(grp).find(".help-block").remove();
var helpBlockContainer = $(grp);
if (helpBlockContainer.length == 0) {
helpBlockContainer = $(grp);
}
helpBlockContainer.append('<div class="help-block invalid-feedback">' + message + '</div>');
$(grp).addClass("has-error");
$(label).addClass("is-invalid");
});
productDropzone.on('addedfile', function (file) {
lastIndex++;
const div = document.createElement('div');
div.className = 'form-check-inline custom-control custom-radio mt-2 mr-3';
const input = document.createElement('input');
input.className = 'custom-control-input';
input.type = 'radio';
input.name = 'default_image';
input.id = 'default-image-' + lastIndex;
input.value = file.name;
if (lastIndex == 1) {
input.checked = true;
}
div.appendChild(input);
var label = document.createElement('label');
label.className = 'custom-control-label pt-1 cursor-pointer';
label.innerHTML = "@lang('modules.makeDefaultImage')";
label.htmlFor = 'default-image-' + lastIndex;
div.appendChild(label);
file.previewTemplate.appendChild(div);
});
$('#product_category_id').change(function (e) {
let categoryId = $(this).val();
let url = "{{ route('get_product_sub_categories', ':id') }}";
url = (categoryId) ? url.replace(':id', categoryId) : url.replace(':id', null);
$.easyAjax({
url: url,
type: "GET",
success: function (response) {
if (response.status == 'success') {
var options = [];
var rData;
rData = response.data;
$.each(rData, function (index, value) {
var selectData;
selectData = '<option value="' + value.id + '">' + value
.category_name + '</option>';
options.push(selectData);
});
$('#sub_category_id').html('<option value="">--</option>' + options);
$('#sub_category_id').selectpicker('refresh');
}
}
})
});
$('#save-more-product').click(function () {
$('#add_more').val(true);
const url = "{{ route('products.store') }}";
var data = $('#save-product-form').serialize();
saveProduct(data, url, "#save-more-product");
});
$('#save-product').click(function() {
const url = "{{ route('products.store') }}";
var data = $('#save-product-form').serialize();
saveProduct(data, url, "#save-product");
});
function saveProduct(data, url, buttonSelector) {
$.easyAjax({
url: url,
container: '#save-product-form',
type: "POST",
disableButton: true,
blockUI: true,
buttonSelector: buttonSelector,
file: true,
data: data,
success: function(response) {
if (productDropzone.getQueuedFiles().length > 0) {
productID = response.productID
defaultImage = response.defaultImage;
$('#hiddenProductId').val(productID);
productDropzone.processQueue();
}
else if(response.add_more == true) {
var right_modal_content = $.trim($(RIGHT_MODAL_CONTENT).html());
if(right_modal_content.length) {
$(RIGHT_MODAL_CONTENT).html(response.html.html);
$('#add_more').val(false);
}
else {
$('.content-wrapper').html(response.html.html);
init('.content-wrapper');
$('#add_more').val(false);
}
}
else{
if (response.redirectUrl == 'no') {
getProductOptions();
closeTaskDetail();
} else if ($(MODAL_XL).hasClass('show')) {
$(MODAL_XL).modal('hide');
window.location.reload();
} else {
window.location.href = response.redirectUrl;
}
}
if (typeof showTable !== 'undefined' && typeof showTable === 'function') {
showTable();
}
}
});
}
function getProductOptions() {
$.easyAjax({
url: "{{ route('products.options') }}",
type: "GET",
success: function (response) {
$('#add-products').html(response.products);
$('#add-products').val('');
$('#add-products').selectpicker('refresh');
}
})
}
$('#add-category').click(function () {
const url = "{{ route('productCategory.create') }}";
$(MODAL_LG + ' ' + MODAL_HEADING).html('...');
$.ajaxModal(MODAL_LG, url);
})
$('#add-sub-category').click(function () {
const url = "{{ route('productSubCategory.create') }}";
$(MODAL_LG + ' ' + MODAL_HEADING).html('...');
$.ajaxModal(MODAL_LG, url);
});
$('#add-tax').click(function () {
const url = "{{ route('taxes.create') }}";
$(MODAL_LG + ' ' + MODAL_HEADING).html('...');
$.ajaxModal(MODAL_LG, url);
});
init(RIGHT_MODAL);
$('#downloadable').change(function () {
if ($(this).is(':checked')) {
$('.downloadable').removeClass('d-none');
} else {
$('.downloadable').addClass('d-none');
}
});
});
</script>
Zerion Mini Shell 1.0