first commit
This commit is contained in:
516
resources/views/livewire/products/products-index.blade.php
Normal file
516
resources/views/livewire/products/products-index.blade.php
Normal file
@ -0,0 +1,516 @@
|
||||
<section id="crm-warehouse-index">
|
||||
<div class="crm-warehouse-index alert-errors"></div>
|
||||
<div wire:ignore>
|
||||
<div class="query-filters" id="toolbar">
|
||||
<div class="d-flex flex-wrap">
|
||||
<div class="pt-1 pr-2 pb-1" style="min-width: 175px; max-width: 225px">
|
||||
<button data-bs-toggle='offcanvas' data-bs-target='#offcanvasUser' class="btn btn-primary waves-effect waves-light">Agregar almacén</button>
|
||||
</div>
|
||||
<button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#accordionFiltrado" aria-expanded="false" aria-controls="accordionFiltrado">
|
||||
Filtrado
|
||||
</button>
|
||||
<div class="px-2 pt-1">
|
||||
<button class="btn btn-label-secondary waves-effect py-3 btn-refresh" disabled><i class="fa-solid fa-rotate"></i></button>
|
||||
</div>
|
||||
<div class="pr-2" style="width: 60px;">
|
||||
<a href="javascript:void(0)" class="clear-filters">Limpiar Filtrado</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<table id="bt-warehouses"></table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@push('page-script')
|
||||
<script>
|
||||
const store_route = '{{ route('admin.core.users.store') }}',
|
||||
route_show = '{{ route('admin.inventory.warehouse.show', ['warehouse' => '~warehouse~']) }}',
|
||||
route_destroy = '{{ route('admin.inventory.warehouse.destroy', ['warehouse' => '~warehouse~']) }}',
|
||||
statusList = {!! json_encode($status_list) !!},
|
||||
statusIntCatalogCss = {!! json_encode($status_list_class) !!};
|
||||
|
||||
var btt_height;
|
||||
|
||||
|
||||
// BootstrapTable Petición AJAX
|
||||
function ajaxRequest(params) {
|
||||
let url = '{{ url()->current() }}' +
|
||||
'?' +
|
||||
$.param(params.data) +
|
||||
'&' +
|
||||
$('.query-filters :input').serialize();
|
||||
|
||||
$.get(url).then(function (res) {
|
||||
params.success(res)
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// BootstrapTable Formatter
|
||||
function userAvatarFormatter(value, row, index) {
|
||||
if(row.id){
|
||||
let show_href = route_show.replace('~warehouseo~', row.id);
|
||||
|
||||
return [
|
||||
'<div class="d-flex justify-content-start align-items-center user-name">',
|
||||
'<div class="avatar-wrapper">',
|
||||
'<div class="avatar avatar-sm me-4">' +
|
||||
'<img src="' + row.profile_photo_url + '" alt="Avatar" class="rounded-circle">' +
|
||||
'</div>',
|
||||
'</div>',
|
||||
'<div class="d-flex flex-column">',
|
||||
'<a href="' + show_href + '" class="text-heading text-truncate"><span class="fw-medium">' + row.name + '</span></a>',
|
||||
'<small>' + row.email + '</small>',
|
||||
'</div>',
|
||||
'</div>',
|
||||
].join('')
|
||||
}
|
||||
}
|
||||
|
||||
function uidFormatter(value, row, index) {
|
||||
if(row.id){
|
||||
let show_href = route_show.replace('~warehouseo~', row.id);
|
||||
|
||||
return [
|
||||
'<div class="d-flex align-items-center justify-content-center">',
|
||||
'<a href="' + show_href + '" class="whitespace-nowrap" title="Ver warehouseo"> ' + row.id + '</a>',
|
||||
@can('crm.warehouses.update')
|
||||
'<a href="javascript:;" class="btn btn-icon btn-text-secondary waves-effect waves-light rounded-pill dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="ti ti-dots-vertical ti-md"></i></a>',
|
||||
'<div class="dropdown-menu dropdown-menu-end m-0">',
|
||||
'<a href="javascript:deleteRow(' + row.id + ');" class="dropdown-item delete-record">Eliminar</a>',
|
||||
'</div>',
|
||||
@endcan
|
||||
'</div>'
|
||||
].join('')
|
||||
}
|
||||
}
|
||||
|
||||
// BootstrapTable Init
|
||||
function initTable(table) {
|
||||
$(table)
|
||||
.bootstrapTable('destroy')
|
||||
.bootstrapTable({
|
||||
height: btt_height,
|
||||
locale: 'es-MX',
|
||||
ajax: "ajaxRequest",
|
||||
toolbar: "#toolbar",
|
||||
search: true,
|
||||
showColumns: true,
|
||||
showColumnsToggleAll: true,
|
||||
showExport: true,
|
||||
showFullscreen: true,
|
||||
showPaginationSwitch: true,
|
||||
showRefresh: true,
|
||||
showToggle: true,
|
||||
clickToSelect: true,
|
||||
minimumCountColumns: 4,
|
||||
fixedColumns: true,
|
||||
fixedNumber: 1,
|
||||
idField: "id",
|
||||
pagination: true,
|
||||
pageList: [10, 25, 50, 100, 500],
|
||||
sidePagination: "server",
|
||||
exportTypes: ['csv', 'txt', 'excel'],
|
||||
exportOptions: {
|
||||
fileName: 'warehouseos',
|
||||
},
|
||||
sortName: 'users.id',
|
||||
sortOrder: 'desc',
|
||||
mobileResponsive: true,
|
||||
cookie: true,
|
||||
resizable: true,
|
||||
cookieIdTable:"crm-warehouse-index",
|
||||
columns: [
|
||||
{
|
||||
field: 'id',
|
||||
title: 'UID',
|
||||
align: 'center',
|
||||
sortable: true,
|
||||
sortName: 'users.id',
|
||||
switchable: false,
|
||||
formatter: uidFormatter
|
||||
},
|
||||
|
||||
{
|
||||
field: 'name',
|
||||
title: 'Nombre',
|
||||
formatter: userAvatarFormatter,
|
||||
},
|
||||
{
|
||||
field: 'email',
|
||||
title: 'Correo electrónico',
|
||||
sortable: true,
|
||||
visible: false,
|
||||
},
|
||||
{
|
||||
field: 'tipo_persona',
|
||||
title: 'Tipo persona',
|
||||
visible: false,
|
||||
sortable: true,
|
||||
formatter: window.btFormatter.tipoPersona,
|
||||
},
|
||||
{
|
||||
field: 'rfc',
|
||||
title: 'RFC',
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
field: 'nombre_fiscal',
|
||||
title: 'Nombre fiscal',
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
field: 'c_regimen_fiscal',
|
||||
title: 'Regimen fiscal',
|
||||
sortable: true,
|
||||
visible: false,
|
||||
formatter: window.btFormatter.regimenFiscal,
|
||||
},
|
||||
{
|
||||
field: 'domicilio_fiscal',
|
||||
title: 'Domicilio fiscal',
|
||||
sortable: true,
|
||||
visible: false,
|
||||
},
|
||||
{
|
||||
field: 'estado',
|
||||
title: 'Estado',
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
field: 'municipio',
|
||||
title: 'Municipio',
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
field: 'localidad',
|
||||
title: 'Localidad',
|
||||
sortable: true,
|
||||
visible: false,
|
||||
},
|
||||
|
||||
{
|
||||
field: 'c_uso_cfdi',
|
||||
title: 'Uso de CFDI',
|
||||
sortable: true,
|
||||
visible: false,
|
||||
formatter: window.btFormatter.usoCfdi,
|
||||
},
|
||||
{
|
||||
field: 'cargo',
|
||||
title: 'Cargo',
|
||||
visible: false,
|
||||
sortable: true,
|
||||
},
|
||||
|
||||
|
||||
{
|
||||
field: 'is_prospect',
|
||||
title: 'Es prospecto',
|
||||
align: 'center',
|
||||
visible: false,
|
||||
sortable: true,
|
||||
formatter: window.btFormatter.check,
|
||||
},
|
||||
{
|
||||
field: 'is_customer',
|
||||
title: 'Es cliente',
|
||||
align: 'center',
|
||||
visible: false,
|
||||
sortable: true,
|
||||
formatter: window.btFormatter.check,
|
||||
},
|
||||
{
|
||||
field: 'is_provider',
|
||||
title: 'Es proveedor',
|
||||
align: 'center',
|
||||
visible: false,
|
||||
sortable: true,
|
||||
formatter: window.btFormatter.check,
|
||||
},
|
||||
{
|
||||
field: 'is_user',
|
||||
title: 'Es usuario',
|
||||
align: 'center',
|
||||
visible: false,
|
||||
sortable: true,
|
||||
formatter: window.btFormatter.check,
|
||||
},
|
||||
|
||||
{
|
||||
field: 'status',
|
||||
title: 'Estado',
|
||||
align: 'center',
|
||||
sortable: true,
|
||||
formatter: window.btFormatter.status,
|
||||
},
|
||||
{
|
||||
field: 'created_at',
|
||||
title: 'Creado ',
|
||||
align: 'center',
|
||||
sortable: true,
|
||||
visible: false,
|
||||
},
|
||||
{
|
||||
field: 'created_by_name',
|
||||
title: 'Creado por',
|
||||
align: 'center',
|
||||
sortable: true,
|
||||
visible: false,
|
||||
sortName: 'created_by_name',
|
||||
},
|
||||
{
|
||||
field: 'updated_at',
|
||||
title: 'Modificado ',
|
||||
align: 'center',
|
||||
sortable: true,
|
||||
visible: false,
|
||||
},
|
||||
]
|
||||
})
|
||||
}
|
||||
|
||||
function toggleSections() {
|
||||
const isProspect = $('#is_prospect').is(':checked');
|
||||
const isCustomer = $('#is_customer').is(':checked');
|
||||
const isProvider = $('#is_provider').is(':checked');
|
||||
const isUser = $('#is_user').is(':checked');
|
||||
|
||||
$('.div-sat').toggle(isCustomer || isProvider);
|
||||
$('.div-sat-customer').toggle(isCustomer);
|
||||
$('.div-user-auth').toggle(isCustomer || isUser);
|
||||
$('.div-roles').toggle(isUser);
|
||||
}
|
||||
|
||||
function toggleCheckboxes(status) {
|
||||
const isDisabled = status == 1;
|
||||
$('#is_prospect, #is_customer, #is_provider, #is_user').prop('disabled', isDisabled);
|
||||
}
|
||||
|
||||
|
||||
load_js_form = () => {
|
||||
$('#userForm .select2')
|
||||
.each(function() {
|
||||
var $this = $(this)
|
||||
|
||||
$this.wrap('<div class="position-relative"></div>')
|
||||
|
||||
$this.select2({
|
||||
dropdownAutoWidth: true,
|
||||
width: '100%',
|
||||
dropdownParent: $this.parent()
|
||||
});
|
||||
});
|
||||
|
||||
// Evento para los checkboxes
|
||||
$('#is_prospect, #is_customer, #is_provider, #is_user').on('change', toggleSections);
|
||||
|
||||
// Evento para el select de estado
|
||||
$('.div-status').on('change', 'select[name="status"]', function() {
|
||||
toggleCheckboxes($(this).val());
|
||||
});
|
||||
|
||||
|
||||
// Previo de imagenes
|
||||
document.getElementById("photo").addEventListener('change', updatePreviewImage);
|
||||
|
||||
|
||||
// Reset form
|
||||
$("#userForm")
|
||||
.on('reset', function(){
|
||||
var form = $("#userForm");
|
||||
|
||||
form.validate().resetForm();
|
||||
|
||||
setTimeout(function(){
|
||||
$('#roles').trigger('change');
|
||||
|
||||
toggleSections();
|
||||
}, 250)
|
||||
|
||||
$('#user-image').prop("src", "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
|
||||
|
||||
$('#userForm .alert-errors').html('');
|
||||
|
||||
$('.pdf-dropzone-div').show();
|
||||
|
||||
$("#pdf-dropzone").removeAllFiles(true);
|
||||
});
|
||||
|
||||
|
||||
$("#userForm")
|
||||
.validate({
|
||||
errorClass: 'error',
|
||||
highlight: function(element, errorClass, validClass) {
|
||||
// Agrega la clase de error a la fila (contenedor del campo)
|
||||
$(element).closest('.mb-3').addClass('has-error');
|
||||
},
|
||||
unhighlight: function(element, errorClass, validClass) {
|
||||
// Elimina la clase de error de la fila (contenedor del campo)
|
||||
$(element).closest('.mb-3').removeClass('has-error');
|
||||
},
|
||||
errorPlacement: function(error, element) {
|
||||
// Controla dónde se colocan los mensajes de error
|
||||
error.appendTo(element.closest('.mb-3').find('.error-message'));
|
||||
},
|
||||
rules: {
|
||||
name: {
|
||||
required: true,
|
||||
minlength: 5
|
||||
},
|
||||
email: {
|
||||
required: true,
|
||||
email: true
|
||||
},
|
||||
password: {
|
||||
required: function(element) {
|
||||
return !$("#userForm input[name=id]").val() && ($('#is_user').is(':checked') || $('#is_customer').is(':checked'));
|
||||
},
|
||||
minlength: 6
|
||||
}
|
||||
},
|
||||
messages: {
|
||||
name: {
|
||||
required: "Por favor ingrese su nombre completo",
|
||||
minlength: "El nombre completo debe tener al menos 8 caracteres"
|
||||
},
|
||||
email: {
|
||||
required: "Por favor ingrese su correo electrónico",
|
||||
email: "El valor no es una dirección de correo válida"
|
||||
},
|
||||
password: {
|
||||
required: "La contraseña es obligatoria para nuevos usuarios",
|
||||
minlength: "La contraseña debe tener al menos 6 caracteres"
|
||||
}
|
||||
},
|
||||
submitHandler: function(form, event) {
|
||||
// Evita que el formulario se envíe automáticamente
|
||||
event.preventDefault();
|
||||
|
||||
var form = $("#userForm")[0],
|
||||
data = new FormData(form);
|
||||
|
||||
$('#userForm :input').prop('disabled', true);
|
||||
$('#userForm .alert-errors').html('');
|
||||
|
||||
$.ajax({
|
||||
url: store_route,
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
|
||||
},
|
||||
data: data,
|
||||
contentType: false,
|
||||
processData: false,
|
||||
cache: false,
|
||||
timeout: 3000,
|
||||
success: function(data) {
|
||||
$('#userForm :input').prop('disabled', false);
|
||||
|
||||
if (data.errors) {
|
||||
$('#userForm .alert-errors').html('<div class="alert alert-danger alert-dismissible fade show" role="alert">' +
|
||||
'<div class="alert-body">' + data.errors + '</div>' +
|
||||
'<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>' +
|
||||
'</div>');
|
||||
|
||||
} else {
|
||||
let $usersIndexAlert = $('.crm-warehouse-index.alert-errors');
|
||||
|
||||
$usersIndexAlert.html('<div class="alert alert-success alert-dismissible fade show" role="alert">' +
|
||||
'<div class="alert-body">' +
|
||||
'<p class="mb-0"><strong>' + data.success + '</strong></p>' +
|
||||
'</div>' +
|
||||
'<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>' +
|
||||
'</div>');
|
||||
|
||||
$('#userForm button[type=reset]').trigger('click');
|
||||
$('#toolbar .clear-filters').trigger('click');
|
||||
}
|
||||
},
|
||||
error: function(e) {
|
||||
$('#userForm :input').prop('disabled', false);
|
||||
|
||||
$('#userForm .alert-errors').html('<div class="alert alert-danger alert-dismissible fade show" role="alert">' +
|
||||
'<div class="alert-body">' + e.responseJSON.message + '</div>' +
|
||||
'<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>' +
|
||||
'</div>');
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// Inicializar el estado al cargar la página
|
||||
toggleSections();
|
||||
toggleCheckboxes($('select[name="status"]').val());
|
||||
}
|
||||
|
||||
// Previo de imagen de perfil
|
||||
updatePreviewImage = (event) => {
|
||||
var file = event.target.files[0],
|
||||
reader = new FileReader();
|
||||
|
||||
reader.onload = event => {
|
||||
document.getElementById('user-image').setAttribute('src', event.target.result);
|
||||
};
|
||||
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
$(document).ready(function() {
|
||||
var $table = $('#bt-warehouses'),
|
||||
$btnRefresh = $('#toolbar .btn-refresh'),
|
||||
$clearFilters = $('a.clear-filters');
|
||||
|
||||
var btt_rest_height = 220,
|
||||
btt_min_height = 600;
|
||||
|
||||
btt_height = (window.innerHeight - btt_rest_height) < btt_min_height?
|
||||
btt_height:
|
||||
window.innerHeight - btt_rest_height;
|
||||
|
||||
var offcanvasElement = document.getElementById('offcanvasUser'),
|
||||
offcanvasUser = new bootstrap.Offcanvas(offcanvasElement);
|
||||
|
||||
const refreshButton = document.querySelector('.btn-refresh');
|
||||
const inputs = document.querySelectorAll('#toolbar input, #toolbar select');
|
||||
|
||||
inputs.forEach(input => {
|
||||
input.addEventListener('change', () => {
|
||||
refreshButton.disabled = false;
|
||||
refreshButton.classList.remove('btn-label-secondary');
|
||||
refreshButton.classList.add('btn-label-success');
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
// Button Refresh
|
||||
$btnRefresh
|
||||
.on('click', () => {
|
||||
$table.bootstrapTable('refresh');
|
||||
refreshButton.disabled = true;
|
||||
refreshButton.classList.remove('btn-label-success');
|
||||
refreshButton.classList.add('btn-label-secondary');
|
||||
});
|
||||
|
||||
// Button clear filters
|
||||
$clearFilters
|
||||
.on('click', () => {
|
||||
$table.bootstrapTable('resetSearch', ''); // Inicializa la búsqueda con cadena vacía
|
||||
refreshButton.disabled = true;
|
||||
refreshButton.classList.remove('btn-label-success');
|
||||
refreshButton.classList.add('btn-label-secondary');
|
||||
});
|
||||
|
||||
|
||||
initTable('#bt-warehouses'); // Una vez que todos los scripts estén cargados, inicializa Bootstrap Table
|
||||
|
||||
|
||||
load_js_form();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
Reference in New Issue
Block a user