feat: ajout du rechargement apres form ou crayons

This commit is contained in:
Christophe 2023-01-11 16:59:34 +01:00
parent fbb3ab117c
commit a8fc324b7c
4 changed files with 39 additions and 22 deletions

View file

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

View file

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

View file

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

View file

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