feat: ajout du rechargement apres form ou crayons

gamutable_fonctions.php

@@ -9,13 +9,13 @@
  * @package    SPIP\Gamutable\Fonctions
  */
 
-if (!defined('_ECRIRE_INC_VERSION')) {
+if (!defined("_ECRIRE_INC_VERSION")) {
 	return;
 }
-include_spip('inc/vite');
+include_spip("inc/vite");
 
-
-function gamutable_fermer_modalbox($id_objet = 9999999999){
+function gamutable_fermer_modalbox($id_objet = 9999999999)
+{
 	$html = <<<EOJS
 		<script type="text/javascript">
 			id = "$id_objet";
@@ -38,7 +38,8 @@ EOJS;
 	return $html;
 }
 
-function gamutable_recharger_tableau($id_objet = 9999999999){
+function gamutable_recharger_tableau($id_objet = 9999999999)
+{
 	$html = <<<EOJS
 		<script type="text/javascript">
 			id = "$id_objet";

inclure/gamutable.html

@@ -22,11 +22,11 @@
 <span class="crayon gamutable-yyyy-nn"></span>
 
 [(#ENV{apiuri,spip.php?page=json_gamutable.json})]
-<div id="app">
+<div id="vueGamutable">
 	<div class="container_un">
 		<div class="gamutableUn" [ id="(#ENV{id_gamutable})" ]>
 			[<span class="h2-like titregamutable">(#ENV{titregamutable})</span>]
-			<div class="vue-gamutable">
+			<div id="vue-gamutable">
 				<gamu-table
 					apiuri="[(#ENV{apiuri,spip.php?page=json_gamutable.json})]"
 					pdfuri="#GET{pdfuri}"

src/components/gamuTable.vue

@@ -342,8 +342,19 @@
 </template>
 
 <script setup>
-import { watch, ref, onMounted, computed, nextTick, inject } from "vue";
+import {
+	defineExpose,
+	watch,
+	ref,
+	onMounted,
+	computed,
+	nextTick,
+	inject,
+} from "vue";
+// import titi from "./titi";
 import VueSelect from "vue-next-select";
+// const a = titi();
+// console.log("gamuTable vue a = ", a);
 const $papa = inject("$papa");
 const props = defineProps({
 	tparpage: {
@@ -607,7 +618,7 @@ watch(filtreColSelected, () => {
 				}
 			);
 		}
-		if (!ajaxCrayons.value) {
+		if (!ajaxCrayons) {
 			localStorage.setItem(
 				"filtreselect_" + nameLocalStorage.value,
 				JSON.stringify(ObfiltreSelect)
@@ -617,6 +628,7 @@ watch(filtreColSelected, () => {
 });
 
 function chargerJson(id) {
+	console.log("chargerJson pour ", id);
 	chargement.value = true;
 	let url = props.apiuri;
 	if (parseInt(id) > 0) {
@@ -767,7 +779,7 @@ function chargerJson(id) {
 					];
 				});
 				filtreColModif.value++;
-				ajaxCrayons.value = false;
+				ajaxCrayons = false;
 
 				if (parseInt(props._id) > 0) {
 					let _id = parseInt(props._id);
@@ -1089,6 +1101,12 @@ function trouver_index(table, id) {
 	});
 	return i;
 }
+const montableau = ref();
+function rechargerJson(id, ajaxCrayons = true) {
+	ajaxCrayons = ajaxCrayons;
+	chargerJson(id);
+}
+defineExpose({ rechargerJson });
 </script>
 
 <style scoped>

src/gamutable.js

@@ -7,19 +7,17 @@ import { createApp } from "vue";
 // if importing all is too much you can always do it manually
 import GamuTable from "./components/gamuTable.vue";
 import VuePapaParse from "vue-papa-parse";
+
 const components = {
 	GamuTable,
 };
 
-// instantiate the Vue apps
-// Note our lookup is a wrapping div with .vue-app class
-
-for (const el of document.getElementsByClassName("vue-gamutable")) {
-	let app = createApp({
-		template: el.innerHTML,
+window.app = createApp({
 	components,
+	mounted() {
+		app.rechargerJson = this.$refs.montableau.rechargerJson;
+	},
 });
 app.use(VuePapaParse);
 app.provide("$papa", app.config.globalProperties.$papa);
-	app.mount(el);
-}
+app.mount("#vue-gamutable");