Ajout autocomplete page administration (11ef3191) · Commits · open-source / oscar

module/Oscar/view/oscar/chemin-decisionnel-administration/formulaire.phtml

+79 −6

Original line number	Diff line number	Diff line
		@@ -39,13 +39,13 @@
		<?php else: ?>

		<style>
		#previsionlisation_form > div {
		#previsualisation_form > div {
		display: flex;
		justify-content: space-between;
		margin-bottom: 2rem;
		}
		</style>
		<form id="previsionlisation_form" style="margin: 4rem;">
		<form id="previsualisation_form" style="margin: 4rem;">
		<?php if (in_array('dateStart', $formulaire->getChamps())): ?>
		<div>
		<label for="previsualisation_<?= $activity_forms['dateStart']['name'] ?>"><?= $activity_forms['dateStart']['label'] ?> :</label>
		@@ -79,12 +79,85 @@
		<?php endif; ?>
		<?php if (in_array('partenaire', $formulaire->getChamps())): ?>
		<div>
		<label for="previsualisation_<?= $activity_forms['partenaire']['name'] ?>"><?= $activity_forms['partenaire']['label'] ?> :</label>
		<label for="previsualisation_partenaire">Partenaire :</label>
		<input type="hidden" id="previsualisation_partenaire_id" name="partenaire_id" />
		<input type="text"
		id="previsualisation_<?= $activity_forms['partenaire']['name'] ?>"
		name="<?= $activity_forms['partenaire']['name'] ?>"
		id="previsualisation_partenaire"
		name="partenaire"
		value="<?= $partenaire ?>" />
		</div>
		<style>
		#partenaireautocomplete {
		background: rgb(220, 220, 220);
		padding: 0.5rem;
		display: none;
		width: 100%;
		position: absolute;
		}
		#partenaireautocomplete ul > li:hover {
		background-color: white;
		}
		</style>
		<div id="partenaireautocomplete" style="display: none;">
		<ul id="partenaireautocomplete_list">
		</ul>
		</div>
		<script>
		window.addEventListener('load', function () {

		var apiQueryCall = null;
		this.document.getElementById("previsualisation_partenaire").addEventListener('input', (e) => {
		this.document.getElementById("previsualisation_partenaire_id").value = null;
		if (apiQueryCall != null) {
		clearTimeout(apiQueryCall);
		}
		apiQueryCall = setTimeout(async () => {
		let list = this.document.getElementById("partenaireautocomplete_list");
		list.innerHTML = '';

		let res = await fetch('<?= $this->url('organization/api') ?>?recherche=' + this.document.getElementById("previsualisation_partenaire").value).catch((error) => {});
		if (!res) {
		return;
		}
		if (!res.ok) {
		return;
		}
		const partenaires = (await res.json()).organizations;
		this.document.getElementById("partenaireautocomplete").style.display = 'block';
		if (partenaires.length == 0) {
		let newElemList = this.document.createElement('li');
		newElemList.innerText = 'Aucun partenaire correspondant trouvé';
		list.appendChild(newElemList);
		return;
		}
		for (const c of partenaires) {
		let newElemList = this.document.createElement('li');
		newElemList.setAttribute('class', "undetouslespartenaire");
		newElemList.innerText = (c.fullname ? c.fullname : '') + ' - ' + (c.street1 ? c.street1 + ' ' : '') + (c.zipcode ? c.zipcode + ' ' : '') + (c.city ? c.city : '');

		newElemList.addEventListener('click', (e) => {
		this.document.getElementById("previsualisation_partenaire_id").value = c.id;
		this.document.getElementById("previsualisation_partenaire").value = (c.fullname ? c.fullname : '') + ' - ' + (c.street1 ? c.street1 + ' ' : '') + (c.zipcode ? c.zipcode + ' ' : '') + (c.city ? c.city : '');
		this.document.getElementById("partenaireautocomplete").style.display = 'none';
		list.innerText = '';
		});
		list.appendChild(newElemList);
		};
		}, 500);
		});

		this.document.addEventListener("mousedown", (e) => {
		if (!e.target.classList.contains("undetouslespartenaire")) {
		this.document.getElementById("partenaireautocomplete").style.display = 'none';
		}
		});
		this.document.addEventListener("keydown", (event) => {
		if (event.key === "Tab") {
		this.document.getElementById("partenaireautocomplete").style.display = 'none';
		}
		});
		});
		</script>
		<?php endif; ?>

		<input type="submit" value="Actualiser">
		@@ -125,7 +198,7 @@
		<script type="module">
		// If absolute URL from the remote server is provided, configure the CORS
		// header on that server.
		var url = '<?= $this->url('chemins-decisionnels/demarrer/convention', ['id' => $chemin_decisionnel_id, 'formulaire-id' => $formulaire->getId()]) . "?dateStart=" . $date_start . "&dateEnd=" . $date_end . "&amount=" . $amount . "&partenaire=" . $partenaire ?>';
		var url = '<?= $this->url('chemins-decisionnels/demarrer/convention', ['id' => $chemin_decisionnel_id, 'formulaire-id' => $formulaire->getId()]) . "?dateStart=" . $date_start . "&dateEnd=" . $date_end . "&amount=" . $amount . "&partenaire=" . urlencode($partenaire) ?>';

		// Loaded via <script> tag, create shortcut to access PDF.js exports.
		var { pdfjsLib } = globalThis;

module/Oscar/view/oscar/chemin-decisionnel/demarrer.phtml

+2 −2

Original line number	Diff line number	Diff line
		@@ -147,11 +147,11 @@
		for (const c of partenaires) {
		let newElemList = this.document.createElement('li');
		newElemList.setAttribute('class', "undetouslespartenaire");
		newElemList.innerText = c.fullname + ' - ' + c.street1 + ' ' + c.zipcode + ' ' + c.city;
		newElemList.innerText = (c.fullname ? c.fullname : '') + ' - ' + (c.street1 ? c.street1 + ' ' : '') + (c.zipcode ? c.zipcode + ' ' : '') + (c.city ? c.city : '');

		newElemList.addEventListener('click', (e) => {
		this.document.getElementById("formulaire_partenaire_id").value = c.id;
		this.document.getElementById("formulaire_partenaire").value = c.fullname + ' - ' + c.street1 + ' ' + c.zipcode + ' ' + c.city;
		this.document.getElementById("formulaire_partenaire").value = (c.fullname ? c.fullname : '') + ' - ' + (c.street1 ? c.street1 + ' ' : '') + (c.zipcode ? c.zipcode + ' ' : '') + (c.city ? c.city : '');
		this.document.getElementById("partenaireautocomplete").style.display = 'none';
		list.innerText = '';
		});