119 lines
5.8 KiB
PHP
119 lines
5.8 KiB
PHP
<div>
|
|
<x-vuexy-admin::offcanvas.basic :id="$offcanvasId" :tag-name="$tagName">
|
|
<x-vuexy-admin::form :id="$formId" :mode="$mode" wireSubmit="onSubmit" actionPosition="both">
|
|
<x-slot name="actions">
|
|
<x-vuexy-admin::button.offcanvasButtons :mode="$mode" :tagName="$tagName" />
|
|
</x-slot>
|
|
<x-vuexy-admin::form.input :uid="$uniqueId" type="hidden" model="id" />
|
|
<x-vuexy-admin::form.input :uid="$uniqueId" type="hidden" model="mode" />
|
|
<x-vuexy-admin::form.select :uid="$uniqueId" model="store_id" label="Sucursal" placeholder="Selecciona una sucursal" :options="$store_options" />
|
|
<div class="row">
|
|
<x-vuexy-admin::form.input :uid="$uniqueId" model="code" label="Código de centro de trabajo" icon="ti ti-tag" parentClass="col-md-8" />
|
|
</div>
|
|
<x-vuexy-admin::form.input :uid="$uniqueId" model="name" label="Nombre del centro de trabajo" />
|
|
<x-vuexy-admin::form.textarea :uid="$uniqueId" model="description" label="Descripción" />
|
|
<hr>
|
|
<x-vuexy-admin::form.select :uid="$uniqueId" model="manager_id" label="Gerente" placeholder="Selecciona un gerente" :options="$manager_options" class="select2 form-select" />
|
|
<x-vuexy-admin::form.input :uid="$uniqueId" model="tel" label="Teléfono" icon="ti ti-phone" />
|
|
<x-vuexy-admin::form.input :uid="$uniqueId" model="tel2" label="Teléfono alternativo" icon="ti ti-phone" />
|
|
<hr>
|
|
<x-vuexy-admin::form.textarea :uid="$uniqueId" name="location_search" label="Dirección de búsqueda" placeholder="Buscar dirección" rows="2" button-icon="ti ti-map-pin-search" onClickButton="clearCoordinates()" />
|
|
<div class="row">
|
|
<x-vuexy-admin::form.input :uid="$uniqueId" model="lat" label="Latitud" type="number" step="0.000001" max="90" min="-90" parentClass="col-5" align="center" size="small" />
|
|
<x-vuexy-admin::form.input :uid="$uniqueId" model="lng" label="Longitud" type="number" step="0.000001" max="180" min="-180" parentClass="col-5" align="center" size="small" />
|
|
<div class="col-2 mt-5 !pl-0">
|
|
<x-vuexy-admin::button.basic variant="secondary" outline size="sm" icon="ti ti-map-pin-off ti-md" onClick="clearCoordinates()" />
|
|
</div>
|
|
</div>
|
|
<div style="height:400px; z-index: 1;" id="locationMap_{{ $uniqueId }}"></div>
|
|
<hr>
|
|
{{ $status }}
|
|
<x-vuexy-admin::form.checkbox :uid="$uniqueId" model="status" label="Activo" switch=true />
|
|
</x-vuexy-admin::form>
|
|
</x-vuexy-admin::offcanvas.basic>
|
|
</div>
|
|
|
|
@push('page-script')
|
|
<script>
|
|
// Evento para inicializar el formulario cuando se carga la página
|
|
window.addEventListener("DOMContentLoaded", () => {
|
|
const clearCoordinates = () => {
|
|
console.log('clearCoordinates');
|
|
// Aqui coloca la logica para limpiar la ubicación
|
|
//LeafletMapHelper.removeMarker();
|
|
}
|
|
|
|
/**
|
|
* Inicializa el formulario de centro de trabajo
|
|
*/
|
|
const initializeWorkCenterForm = () => {
|
|
const initializeSelect2 = () => {
|
|
const select2Selectors = {
|
|
[`#manager_id_{{ $uniqueId }}`]: {
|
|
placeholder: 'Selecciona un gerente',
|
|
onSelect: (id) => {
|
|
@this.set('updateManagerId', id, false);
|
|
},
|
|
onClear: () => {
|
|
@this.set('updateManagerId', null, false);
|
|
}
|
|
}
|
|
};
|
|
|
|
const parent = $('#storeWorkCenterForm');
|
|
|
|
$.each(select2Selectors, (selector, config) => {
|
|
const $element = parent.find(selector);
|
|
|
|
if ($element.length) {
|
|
$element
|
|
.select2({
|
|
placeholder: config.placeholder,
|
|
allowClear: true,
|
|
closeOnSelect: false
|
|
})
|
|
.on('select2:select', (e) => {
|
|
let selectedId = e.params.data.id;
|
|
|
|
config.onSelect(selectedId);
|
|
})
|
|
.on('select2:clear', () => {
|
|
config.onClear();
|
|
});
|
|
}
|
|
});
|
|
};
|
|
|
|
const initializeLocationCard = () => {
|
|
const locationInputs = {
|
|
search: '#location_search_{{ $uniqueId }}',
|
|
btnSearch: '#btn_search_{{ $uniqueId }}',
|
|
lat: '#lat_{{ $uniqueId }}',
|
|
lng: '#lng_{{ $uniqueId }}',
|
|
btnClear: '#storeWorkCenterForm .btn-clear-coords',
|
|
mapId: 'locationMap_{{ $uniqueId }}',
|
|
}
|
|
|
|
LeafletMapHelper.initializeMap(locationInputs, mode, @this);
|
|
}
|
|
|
|
|
|
const mode = @this.get('mode')?? 'create';
|
|
|
|
// Inicializa los select2
|
|
initializeSelect2();
|
|
|
|
// Inicializa el card de ubicación
|
|
initializeLocationCard(mode);
|
|
}
|
|
|
|
|
|
var myOffcanvas = document.getElementById('{{ $offcanvasId }}')
|
|
|
|
myOffcanvas.addEventListener('show.bs.offcanvas', function () {
|
|
initializeWorkCenterForm();
|
|
});
|
|
});
|
|
</script>
|
|
@endpush
|