From 778f9a2c44add1589bdb7c4bb09b34766ec38cb1 Mon Sep 17 00:00:00 2001
From: tofulm <tofulm@gmail.com>
Date: Thu, 12 Jan 2023 12:11:05 +0100
Subject: [PATCH] feat : suite refactoring

---
 css/gamutable.css            | 508 +++++++++++++++++------------------
 inclure/gamutable.html       |   4 +-
 src/components/gamuTable.vue | 124 +++------
 3 files changed, 297 insertions(+), 339 deletions(-)

diff --git a/css/gamutable.css b/css/gamutable.css
index bb15394..1829c99 100644
--- a/css/gamutable.css
+++ b/css/gamutable.css
@@ -1,879 +1,879 @@
 .gamutable__input--rechercher {
-  padding: 0.25rem 1rem;
+	padding: 0.25rem 1rem;
 }
 
 .vue-tags .vue-tag.selected {
-  font-size: 1.2rem;
+	font-size: 1.2rem;
 }
 
 div.vue-input > input {
-  font-size: 1.2rem;
+	font-size: 1.2rem;
 }
 
 .tag--ub {
-  display: inline-block;
+	display: inline-block;
 }
 
 .gamutable__input--filtrer {
-  font-size: 1.2rem;
-  padding: 5px 5px !important;
+	font-size: 1.2rem;
+	padding: 5px 5px !important;
 }
 .gamutable__input--filtrer:valid {
-  font-size: 1.2rem;
-  background-color: rgb(153, 153, 153);
-  color: #000;
+	font-size: 1.2rem;
+	background-color: rgb(153, 153, 153);
+	color: #000;
 }
 
 .gamutable__input--filtrer:-moz-placeholder-shown {
-  background-color: transparent;
-  color: inherit;
+	background-color: transparent;
+	color: inherit;
 }
 
 .gamutable__input--filtrer:-ms-input-placeholder {
-  background-color: transparent;
-  color: inherit;
+	background-color: transparent;
+	color: inherit;
 }
 
 .gamutable__input--filtrer:placeholder-shown {
-  background-color: transparent;
-  color: inherit;
+	background-color: transparent;
+	color: inherit;
 }
 
 th .vue-select {
-  width: 100%;
+	width: 100%;
 }
 
 .gamutable--surTable select,
 .gamutable--surTable input {
-  margin-bottom: 0;
+	margin-bottom: 0;
 }
 .gamutable--surTable .gamutable-nbrMax {
-  margin-left: 2rem;
+	margin-left: 2rem;
 }
 .gamutable--surTable .includespip {
-  margin-left: 2rem;
+	margin-left: 2rem;
 }
 
 .gamutable--sousTable {
-  display: -ms-flexbox;
-  display: flex;
-  -ms-flex-pack: justify;
-      justify-content: space-between;
+	display: -ms-flexbox;
+	display: flex;
+	-ms-flex-pack: justify;
+	justify-content: space-between;
 }
 
 .gamutable--pagination {
-  display: -ms-flexbox;
-  display: flex;
+	display: -ms-flexbox;
+	display: flex;
 }
 .gamutable--pagination .page-item {
-  display: -ms-flexbox;
-  display: flex;
+	display: -ms-flexbox;
+	display: flex;
 }
 .gamutable--pagination .page-link {
-  margin: 0 0.2rem;
-  background-color: #eee;
-  cursor: pointer;
+	margin: 0 0.2rem;
+	background-color: #eee;
+	cursor: pointer;
 }
 
 .h2-like.titregamutable,
 .h2-like.titregamutable_deux {
-  font-weight: bold;
+	font-weight: bold;
 }
 
 .gamutable table {
-  font-size: 1rem;
-  table-layout: auto;
+	font-size: 1rem;
+	table-layout: auto;
 }
 .gamutable table thead {
-  border: 1px solid rgb(119, 119, 119);
+	border: 1px solid rgb(119, 119, 119);
 }
 .gamutable table .gt_labels {
-  display: -ms-flexbox;
-  display: flex;
-  -ms-flex-pack: justify;
-      justify-content: space-between;
-  -ms-flex-align: center;
-      align-items: center;
+	display: -ms-flexbox;
+	display: flex;
+	-ms-flex-pack: justify;
+	justify-content: space-between;
+	-ms-flex-align: center;
+	align-items: center;
 }
 .gamutable table th > div {
-  display: -ms-flexbox;
-  display: flex;
+	display: -ms-flexbox;
+	display: flex;
 }
 .gamutable table .label_tete_colonne {
-  -ms-flex-positive: 1;
-      flex-grow: 1;
+	-ms-flex-positive: 1;
+	flex-grow: 1;
 }
 .gamutable table .iconeTri {
-  float: right;
-  width: calc(1rem + 4px);
+	float: right;
+	width: calc(1rem + 4px);
 }
 .gamutable table .iconeTri .fa {
-  padding: 2px 5px;
-  cursor: pointer;
+	padding: 2px 5px;
+	cursor: pointer;
 }
 .gamutable table .tri_col {
-  cursor: pointer;
-  fill: #cecece;
+	cursor: pointer;
+	fill: #cecece;
 }
 .gamutable table .iconeTri > .active {
-  fill: rgb(220, 53, 69);
-  color: rgb(220, 53, 69);
+	fill: rgb(220, 53, 69);
+	color: rgb(220, 53, 69);
 }
 .gamutable table tbody tr:hover {
-  background-color: rgba(179, 209, 67, 0.27);
+	background-color: rgba(179, 209, 67, 0.27);
 }
 
-#app .select {
-  background-color: rgba(179, 209, 67, 0.47);
+.vue-gamutable .select {
+	background-color: rgba(179, 209, 67, 0.47);
 }
 
 td.id {
-  cursor: pointer;
+	cursor: pointer;
 }
 
 th.icone {
-  width: 30px;
-  text-align: center;
+	width: 30px;
+	text-align: center;
 }
 
 tr.filtreColonne th {
-  padding: 0;
+	padding: 0;
 }
 tr.filtreColonne th select {
-  margin: 0;
+	margin: 0;
 }
 
 td.icone > * {
-  width: 100%;
-  display: block;
-  padding: 0.5rem;
-  text-align: center;
+	width: 100%;
+	display: block;
+	padding: 0.5rem;
+	text-align: center;
 }
 
 .gamutable .url_action {
-  padding: 0.2rem;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  background-color: #f5f5f5;
-  border: 1px solid #cecece;
-  border-radius: 5px;
+	padding: 0.2rem;
+	display: -ms-inline-flexbox;
+	display: inline-flex;
+	background-color: #f5f5f5;
+	border: 1px solid #cecece;
+	border-radius: 5px;
 }
 .gamutable .url_action:hover {
-  background-color: #cecece;
+	background-color: #cecece;
 }
 
 td.icone i {
-  font-size: 1.8rem;
+	font-size: 1.8rem;
 }
 
 .vueBlocs {
-  display: -ms-flexbox;
-  display: flex;
-  -ms-flex-wrap: wrap;
-      flex-wrap: wrap;
+	display: -ms-flexbox;
+	display: flex;
+	-ms-flex-wrap: wrap;
+	flex-wrap: wrap;
 }
 
 .vueBlocs-unbloc {
-  width: 23%;
-  border: 1px solid #cecece;
-  margin-bottom: 1rem;
-  margin-right: 1rem;
+	width: 23%;
+	border: 1px solid #cecece;
+	margin-bottom: 1rem;
+	margin-right: 1rem;
 }
 
 .viderInputSearch {
-  color: #ff0000;
+	color: #ff0000;
 }
 
 /* blocks widths (percentage and pixels) */
 .w100 {
-  width: 100%;
+	width: 100%;
 }
 
 .w95 {
-  width: 95%;
+	width: 95%;
 }
 
 .w90 {
-  width: 90%;
+	width: 90%;
 }
 
 .w85 {
-  width: 85%;
+	width: 85%;
 }
 
 .w80 {
-  width: 80%;
+	width: 80%;
 }
 
 .w75 {
-  width: 75%;
+	width: 75%;
 }
 
 .w70 {
-  width: 70%;
+	width: 70%;
 }
 
 .w65 {
-  width: 65%;
+	width: 65%;
 }
 
 .w60 {
-  width: 60%;
+	width: 60%;
 }
 
 .w55 {
-  width: 55%;
+	width: 55%;
 }
 
 .w50 {
-  width: 50%;
+	width: 50%;
 }
 
 .w45 {
-  width: 45%;
+	width: 45%;
 }
 
 .w40 {
-  width: 40%;
+	width: 40%;
 }
 
 .w35 {
-  width: 35%;
+	width: 35%;
 }
 
 .w30 {
-  width: 30%;
+	width: 30%;
 }
 
 .w25 {
-  width: 25%;
+	width: 25%;
 }
 
 .w20 {
-  width: 20%;
+	width: 20%;
 }
 
 .w15 {
-  width: 15%;
+	width: 15%;
 }
 
 .w10 {
-  width: 10%;
+	width: 10%;
 }
 
 .w5 {
-  width: 5%;
+	width: 5%;
 }
 
 .w1000p {
-  width: 1000px;
+	width: 1000px;
 }
 
 .minw1000p {
-  min-width: 1000px;
+	min-width: 1000px;
 }
 
 .maxw1000p {
-  max-width: 1000px;
+	max-width: 1000px;
 }
 
 .w1000p input {
-  width: 1000px;
+	width: 1000px;
 }
 
 .w950p {
-  width: 950px;
+	width: 950px;
 }
 
 .minw950p {
-  min-width: 950px;
+	min-width: 950px;
 }
 
 .maxw950p {
-  max-width: 950px;
+	max-width: 950px;
 }
 
 .w950p input {
-  width: 950px;
+	width: 950px;
 }
 
 .w900p {
-  width: 900px;
+	width: 900px;
 }
 
 .minw900p {
-  min-width: 900px;
+	min-width: 900px;
 }
 
 .maxw900p {
-  max-width: 900px;
+	max-width: 900px;
 }
 
 .w900p input {
-  width: 900px;
+	width: 900px;
 }
 
 .w850p {
-  width: 850px;
+	width: 850px;
 }
 
 .minw850p {
-  min-width: 850px;
+	min-width: 850px;
 }
 
 .maxw850p {
-  max-width: 850px;
+	max-width: 850px;
 }
 
 .w850p input {
-  width: 850px;
+	width: 850px;
 }
 
 .w800p {
-  width: 800px;
+	width: 800px;
 }
 
 .minw800p {
-  min-width: 800px;
+	min-width: 800px;
 }
 
 .maxw800p {
-  max-width: 800px;
+	max-width: 800px;
 }
 
 .w800p input {
-  width: 800px;
+	width: 800px;
 }
 
 .w750p {
-  width: 750px;
+	width: 750px;
 }
 
 .minw750p {
-  min-width: 750px;
+	min-width: 750px;
 }
 
 .maxw750p {
-  max-width: 750px;
+	max-width: 750px;
 }
 
 .w750p input {
-  width: 750px;
+	width: 750px;
 }
 
 .w700p {
-  width: 700px;
+	width: 700px;
 }
 
 .minw700p {
-  min-width: 700px;
+	min-width: 700px;
 }
 
 .maxw700p {
-  max-width: 700px;
+	max-width: 700px;
 }
 
 .w700p input {
-  width: 700px;
+	width: 700px;
 }
 
 .w650p {
-  width: 650px;
+	width: 650px;
 }
 
 .minw650p {
-  min-width: 650px;
+	min-width: 650px;
 }
 
 .maxw650p {
-  max-width: 650px;
+	max-width: 650px;
 }
 
 .w650p input {
-  width: 650px;
+	width: 650px;
 }
 
 .w600p {
-  width: 600px;
+	width: 600px;
 }
 
 .minw600p {
-  min-width: 600px;
+	min-width: 600px;
 }
 
 .maxw600p {
-  max-width: 600px;
+	max-width: 600px;
 }
 
 .w600p input {
-  width: 600px;
+	width: 600px;
 }
 
 .w550p {
-  width: 550px;
+	width: 550px;
 }
 
 .minw550p {
-  min-width: 550px;
+	min-width: 550px;
 }
 
 .maxw550p {
-  max-width: 550px;
+	max-width: 550px;
 }
 
 .w550p input {
-  width: 550px;
+	width: 550px;
 }
 
 .w500p {
-  width: 500px;
+	width: 500px;
 }
 
 .minw500p {
-  min-width: 500px;
+	min-width: 500px;
 }
 
 .maxw500p {
-  max-width: 500px;
+	max-width: 500px;
 }
 
 .w500p input {
-  width: 500px;
+	width: 500px;
 }
 
 .w450p {
-  width: 450px;
+	width: 450px;
 }
 
 .minw450p {
-  min-width: 450px;
+	min-width: 450px;
 }
 
 .maxw450p {
-  max-width: 450px;
+	max-width: 450px;
 }
 
 .w450p input {
-  width: 450px;
+	width: 450px;
 }
 
 .w400p {
-  width: 400px;
+	width: 400px;
 }
 
 .minw400p {
-  min-width: 400px;
+	min-width: 400px;
 }
 
 .maxw400p {
-  max-width: 400px;
+	max-width: 400px;
 }
 
 .w400p input {
-  width: 400px;
+	width: 400px;
 }
 
 .w350p {
-  width: 350px;
+	width: 350px;
 }
 
 .minw350p {
-  min-width: 350px;
+	min-width: 350px;
 }
 
 .maxw350p {
-  max-width: 350px;
+	max-width: 350px;
 }
 
 .w350p input {
-  width: 350px;
+	width: 350px;
 }
 
 .w300p {
-  width: 300px;
+	width: 300px;
 }
 
 .minw300p {
-  min-width: 300px;
+	min-width: 300px;
 }
 
 .maxw300p {
-  max-width: 300px;
+	max-width: 300px;
 }
 
 .w300p input {
-  width: 300px;
+	width: 300px;
 }
 
 .w250p {
-  width: 250px;
+	width: 250px;
 }
 
 .minw250p {
-  min-width: 250px;
+	min-width: 250px;
 }
 
 .maxw250p {
-  max-width: 250px;
+	max-width: 250px;
 }
 
 .w250p input {
-  width: 250px;
+	width: 250px;
 }
 
 .w200p {
-  width: 200px;
+	width: 200px;
 }
 
 .minw200p {
-  min-width: 200px;
+	min-width: 200px;
 }
 
 .maxw200p {
-  max-width: 200px;
+	max-width: 200px;
 }
 
 .w200p input {
-  width: 200px;
+	width: 200px;
 }
 
 .w190p {
-  width: 190px;
+	width: 190px;
 }
 
 .minw190p {
-  min-width: 190px;
+	min-width: 190px;
 }
 
 .maxw190p {
-  max-width: 190px;
+	max-width: 190px;
 }
 
 .w190p input {
-  width: 190px;
+	width: 190px;
 }
 
 .w180p {
-  width: 180px;
+	width: 180px;
 }
 
 .minw180p {
-  min-width: 180px;
+	min-width: 180px;
 }
 
 .maxw180p {
-  max-width: 180px;
+	max-width: 180px;
 }
 
 .w180p input {
-  width: 180px;
+	width: 180px;
 }
 
 .w170p {
-  width: 170px;
+	width: 170px;
 }
 
 .minw170p {
-  min-width: 170px;
+	min-width: 170px;
 }
 
 .maxw170p {
-  max-width: 170px;
+	max-width: 170px;
 }
 
 .w170p input {
-  width: 170px;
+	width: 170px;
 }
 
 .w160p {
-  width: 160px;
+	width: 160px;
 }
 
 .minw160p {
-  min-width: 160px;
+	min-width: 160px;
 }
 
 .maxw160p {
-  max-width: 160px;
+	max-width: 160px;
 }
 
 .w160p input {
-  width: 160px;
+	width: 160px;
 }
 
 .w150p {
-  width: 150px;
+	width: 150px;
 }
 
 .minw150p {
-  min-width: 150px;
+	min-width: 150px;
 }
 
 .maxw150p {
-  max-width: 150px;
+	max-width: 150px;
 }
 
 .w150p input {
-  width: 150px;
+	width: 150px;
 }
 
 .w140p {
-  width: 140px;
+	width: 140px;
 }
 
 .minw140p {
-  min-width: 140px;
+	min-width: 140px;
 }
 
 .maxw140p {
-  max-width: 140px;
+	max-width: 140px;
 }
 
 .w140p input {
-  width: 140px;
+	width: 140px;
 }
 
 .w130p {
-  width: 130px;
+	width: 130px;
 }
 
 .minw130p {
-  min-width: 130px;
+	min-width: 130px;
 }
 
 .maxw130p {
-  max-width: 130px;
+	max-width: 130px;
 }
 
 .w130p input {
-  width: 130px;
+	width: 130px;
 }
 
 .w120p {
-  width: 120px;
+	width: 120px;
 }
 
 .minw120p {
-  min-width: 120px;
+	min-width: 120px;
 }
 
 .maxw120p {
-  max-width: 120px;
+	max-width: 120px;
 }
 
 .w120p input {
-  width: 120px;
+	width: 120px;
 }
 
 .w110p {
-  width: 110px;
+	width: 110px;
 }
 
 .minw110p {
-  min-width: 110px;
+	min-width: 110px;
 }
 
 .maxw110p {
-  max-width: 110px;
+	max-width: 110px;
 }
 
 .w110p input {
-  width: 110px;
+	width: 110px;
 }
 
 .w100p {
-  width: 100px;
+	width: 100px;
 }
 
 .minw100p {
-  min-width: 100px;
+	min-width: 100px;
 }
 
 .maxw100p {
-  max-width: 100px;
+	max-width: 100px;
 }
 
 .w100p input {
-  width: 100px;
+	width: 100px;
 }
 
 .w90p {
-  width: 90px;
+	width: 90px;
 }
 
 .minw90p {
-  min-width: 90px;
+	min-width: 90px;
 }
 
 .maxw90p {
-  max-width: 90px;
+	max-width: 90px;
 }
 
 .w90p input {
-  width: 90px;
+	width: 90px;
 }
 
 .w80p {
-  width: 80px;
+	width: 80px;
 }
 
 .minw80p {
-  min-width: 80px;
+	min-width: 80px;
 }
 
 .maxw80p {
-  max-width: 80px;
+	max-width: 80px;
 }
 
 .w80p input {
-  width: 80px;
+	width: 80px;
 }
 
 .w70p {
-  width: 70px;
+	width: 70px;
 }
 
 .minw70p {
-  min-width: 70px;
+	min-width: 70px;
 }
 
 .maxw70p {
-  max-width: 70px;
+	max-width: 70px;
 }
 
 .w70p input {
-  width: 70px;
+	width: 70px;
 }
 
 .w60p {
-  width: 60px;
+	width: 60px;
 }
 
 .minw60p {
-  min-width: 60px;
+	min-width: 60px;
 }
 
 .maxw60p {
-  max-width: 60px;
+	max-width: 60px;
 }
 
 .w60p input {
-  width: 60px;
+	width: 60px;
 }
 
 .w50p {
-  width: 50px;
+	width: 50px;
 }
 
 .minw50p {
-  min-width: 50px;
+	min-width: 50px;
 }
 
 .maxw50p {
-  max-width: 50px;
+	max-width: 50px;
 }
 
 .w50p input {
-  width: 50px;
+	width: 50px;
 }
 
 .w40p {
-  width: 40px;
+	width: 40px;
 }
 
 .minw40p {
-  min-width: 40px;
+	min-width: 40px;
 }
 
 .maxw40p {
-  max-width: 40px;
+	max-width: 40px;
 }
 
 .w40p input {
-  width: 40px;
+	width: 40px;
 }
 
 .w30p {
-  width: 30px;
+	width: 30px;
 }
 
 .minw30p {
-  min-width: 30px;
+	min-width: 30px;
 }
 
 .maxw30p {
-  max-width: 30px;
+	max-width: 30px;
 }
 
 .w30p input {
-  width: 30px;
+	width: 30px;
 }
 
 .w20p {
-  width: 20px;
+	width: 20px;
 }
 
 .minw20p {
-  min-width: 20px;
+	min-width: 20px;
 }
 
 .maxw20p {
-  max-width: 20px;
+	max-width: 20px;
 }
 
 .w20p input {
-  width: 20px;
+	width: 20px;
 }
 
 .w10p {
-  width: 10px;
+	width: 10px;
 }
 
 .minw10p {
-  min-width: 10px;
+	min-width: 10px;
 }
 
 .maxw10p {
-  max-width: 10px;
+	max-width: 10px;
 }
 
 .w10p input {
-  width: 10px;
+	width: 10px;
 }
 
 .w66 {
-  width: 66.6666666667%;
+	width: 66.6666666667%;
 }
 
 .w33 {
-  width: 33.3333333333%;
+	width: 33.3333333333%;
 }
 
 .wauto {
-  width: auto;
+	width: auto;
 }
 
 .w960p {
-  width: 960px;
+	width: 960px;
 }
 
 .minw960p {
-  min-width: 960px;
+	min-width: 960px;
 }
 
 .maxw960p {
-  max-width: 960px;
+	max-width: 960px;
 }
 
 .w1140p {
-  width: 1140px;
+	width: 1140px;
 }
 
 .minw1140p {
-  min-width: 1140px;
+	min-width: 1140px;
 }
 
 .maxw1140p {
-  max-width: 1140px;
+	max-width: 1140px;
 }
 /*# sourceMappingURL=gamutable.css.map */
diff --git a/inclure/gamutable.html b/inclure/gamutable.html
index 9838f9c..9e8bb89 100644
--- a/inclure/gamutable.html
+++ b/inclure/gamutable.html
@@ -45,7 +45,7 @@
 					includespip="#ENV{includespip}"
 					ref="montableau"
 					filtrer="#ENV{filtrer}"
-					_id="#ENV{_id}"
+					:_id="[(#ENV{_id}|intval)]"
 					filtreselect="[(#ENV{filtrerselect})]"
 				></gamu-table>
 			</div>
@@ -76,7 +76,7 @@
 					includespip="#ENV{includespip}"
 					ref="montableau_deux"
 					filtrer="#ENV{filtrer}"
-					_id="#ENV{_id}"
+					:_id="[(#ENV{_id}|intval)]"
 					filtreselect="[(#ENV{filtrerselect_deux})]"
 				></gamu-table>
 			</div>
diff --git a/src/components/gamuTable.vue b/src/components/gamuTable.vue
index bba4cea..1fc8d4f 100644
--- a/src/components/gamuTable.vue
+++ b/src/components/gamuTable.vue
@@ -653,6 +653,45 @@ function gererConfig(config) {
 	}
 	return filtreCol;
 }
+
+function gererData(filtreColRecup, data, id = null) {
+	if (parseInt(id) > 0) {
+		if (data.length > 0) {
+			let i = trouver_index(table.value, id);
+			table.value[i] = data[0];
+		} else {
+			let i = trouver_index(table.value, id);
+			table.value.splice(i, 1);
+		}
+		localforage.setItem(
+			nameLocalStorage.value,
+			JSON.stringify(table.value)
+		);
+	} else {
+		table.value = data;
+		if (data[0] && data[0].search) {
+			champ_search.value = "search";
+		}
+	}
+	if (filtreColRecup !== undefined) {
+		filtreColType.value = filtreColRecup;
+		filtreCol.value = [];
+		Object.keys(filtreColType.value).forEach((col) => {
+			let Tval = [];
+			table.value.forEach((t) => {
+				let valCol = t[champ_search.value][col];
+				if (valCol) {
+					if (Tval.indexOf(valCol) === -1) {
+						Tval.push(valCol);
+					}
+				}
+			});
+			filtreCol.value.push(col);
+			filtreColVal.value[col] = Tval.sort();
+			filtreColSelected.value[col] = [];
+		});
+	}
+}
 function chargerJson(id) {
 	console.log("chargerJson pour ", id);
 	chargement.value = true;
@@ -670,28 +709,7 @@ function chargerJson(id) {
 				.getItem(nameLocalStorage.value)
 				.then(function (data) {
 					data = recupJson(data);
-					if (data && data.length) {
-						table.value = data;
-						if (data[0].search) {
-							champ_search.value = "search";
-						}
-						if (filtreColRecup !== undefined) {
-							filtreColType.value = filtreColRecup;
-							Object.keys(filtreColType.value).forEach((col) => {
-								let Tval = [];
-								// let Tval = [''];
-								table.value.forEach((t) => {
-									let valCol = t[champ_search.value][col];
-									if (Tval.indexOf(valCol) === -1) {
-										Tval.push(valCol);
-									}
-								});
-								// filtreCol.value.push(col);
-								filtreColVal.value[col] = Tval.sort();
-								filtreColSelected.value[col] = [];
-							});
-						}
-					}
+					gererData(filtreColRecup, data, id);
 					if (props.nomblocajaxreload) {
 						ajaxReload(props.nomblocajaxreload);
 					}
@@ -706,67 +724,7 @@ function chargerJson(id) {
 		.then((data) => {
 			let config = data.shift();
 			let filtreColRecup = gererConfig(config);
-			// header.value = config.header;
-			// if (config.maj !== undefined) {
-			// 	maj.value = config.maj?.lastMAJ;
-			// }
-			// if (config.crayons !== undefined) {
-			// 	crayons.value = config.crayons;
-			// } else {
-			// 	crayons.value = [];
-			// }
-			// if (config.classes !== undefined) {
-			// 	classes.value = config.classes;
-			// } else {
-			// 	classes.value = [];
-			// }
-			// if (config.checkbox !== undefined) {
-			// 	checkbox.value = config.checkbox;
-			// 	Object.keys(checkbox.value).forEach((head) => {
-			// 		Tcheckbox.value[head] = [];
-			// 	});
-			// }
-			// if (config.ordreCol !== undefined) {
-			// 	ordreCol.value = config.ordreCol;
-			// } else {
-			// 	ordreCol.value = [];
-			// }
-			if (parseInt(id) > 0) {
-				if (data.length > 0) {
-					let i = trouver_index(table.value, id);
-					table.value[i] = data[0];
-				} else {
-					let i = trouver_index(table.value, id);
-					table.value.splice(i, 1);
-				}
-				localforage.setItem(
-					nameLocalStorage.value,
-					JSON.stringify(table.value)
-				);
-			} else {
-				table.value = data;
-				if (data[0] && data[0].search) {
-					champ_search.value = "search";
-				}
-			}
-			if (filtreColRecup !== undefined) {
-				filtreColType.value = filtreColRecup;
-				filtreCol.value = [];
-				Object.keys(filtreColType.value).forEach((col) => {
-					let Tval = [];
-					table.value.forEach((t) => {
-						let valCol = t[champ_search.value][col];
-						if (valCol) {
-							if (Tval.indexOf(valCol) === -1) {
-								Tval.push(valCol);
-							}
-						}
-					});
-					filtreCol.value.push(col);
-					filtreColVal.value[col] = Tval.sort();
-					filtreColSelected.value[col] = [];
-				});
-			}
+			gererData(filtreColRecup, data, id);
 
 			nextTick(() => {
 				chargement.value = false;