From 3f98e272d935a23797fe086ede2d021d3c529c55 Mon Sep 17 00:00:00 2001 From: tofulm Date: Wed, 21 Oct 2020 16:06:29 +0200 Subject: [PATCH] vue bloc OK, chargement ajax du bloc texte html --- css/gamutable.css | 14 ++++++++++ css/gamutable.css.map | 2 +- css/gamutable.scss | 11 ++++++++ inclure/gamutable.html | 2 +- js/gamutable.es6.js | 23 ++++++++++++++--- js/gamutable.js | 58 ++++++++++++++++++++++++++++-------------- 6 files changed, 86 insertions(+), 24 deletions(-) diff --git a/css/gamutable.css b/css/gamutable.css index 90ed81e..1423dbf 100644 --- a/css/gamutable.css +++ b/css/gamutable.css @@ -66,4 +66,18 @@ td.icone i { font-size: 1.8rem; } +.vueBlocs { + 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; +} + /*# sourceMappingURL=gamutable.css.map */ diff --git a/css/gamutable.css.map b/css/gamutable.css.map index b57b998..a25e7ea 100644 --- a/css/gamutable.css.map +++ b/css/gamutable.css.map @@ -1 +1 @@ -{"version":3,"sources":["gamutable.scss","gamutable.css"],"names":[],"mappings":"AAAA;EACC,oBAAa;EAAb,aAAa;EACb,sBAA8B;MAA9B,8BAA8B;ACC/B;;ADCA;EACC,oBAAa;EAAb,aAAa;ACEd;;ADCA;EACC,eAAe;ACEhB;;ADHA;EAGE,oBAAa;EAAb,aAAa;ACIf;;ADPA;EAME,oBAAY;MAAZ,YAAY;ACKd;;ADXA;EASE,YAAY;EACZ,WAAW;ACMb;;ADhBA;EAcE,eAAe;EACf,aAAa;ACMf;;ADrBA;EAkBE,UAAU;ACOZ;;ADJA;EACC,0CAA0C;ACO3C;;ADJA;EACC,eAAe;ACOhB;;ADJA;EACC,WAAW;EACX,kBAAkB;ACOnB;;ADLA;EACC,cAAA;ACQD;;ADLA;EACC,WAAW;EACX,cAAc;EACd,eAAe;EACf,kBAAkB;ACQnB;;ADNA;EACC,iBAAiB;ACSlB","file":"gamutable.css","sourcesContent":[".gamutable--sousTable {\n\tdisplay: flex;\n\tjustify-content: space-between;\n}\n.gamutable--pagination {\n\tdisplay: flex;\n}\n\n.gamutable table {\n\tfont-size: 1rem;\n\tth > div {\n\t\tdisplay: flex;\n\t}\n\t.label_tete_colonne {\n\t\tflex-grow: 1;\n\t}\n\t.iconeTri {\n\t\tfloat: right;\n\t\twidth: 1rem;\n\t\t//position: relative;\n\t}\n\t.tri_col {\n\t\tcursor: pointer;\n\t\tfill: #cecece;\n\t}\n\t.iconeTri > .active {\n\t\tfill: #000;\n\t}\n}\n#app .select {\n\tbackground-color: rgba(179, 209, 67, 0.47);\n}\n\ntd.id {\n\tcursor: pointer;\n}\n\nth.icone {\n\twidth: 30px;\n\ttext-align: center;\n}\ntd.icone {\n\t/*padding: 0;*/\n}\n\ntd.icone > * {\n\twidth: 100%;\n\tdisplay: block;\n\tpadding: 0.5rem;\n\ttext-align: center;\n}\ntd.icone i {\n\tfont-size: 1.8rem;\n}\n",".gamutable--sousTable {\n display: flex;\n justify-content: space-between;\n}\n\n.gamutable--pagination {\n display: flex;\n}\n\n.gamutable table {\n font-size: 1rem;\n}\n\n.gamutable table th > div {\n display: flex;\n}\n\n.gamutable table .label_tete_colonne {\n flex-grow: 1;\n}\n\n.gamutable table .iconeTri {\n float: right;\n width: 1rem;\n}\n\n.gamutable table .tri_col {\n cursor: pointer;\n fill: #cecece;\n}\n\n.gamutable table .iconeTri > .active {\n fill: #000;\n}\n\n#app .select {\n background-color: rgba(179, 209, 67, 0.47);\n}\n\ntd.id {\n cursor: pointer;\n}\n\nth.icone {\n width: 30px;\n text-align: center;\n}\n\ntd.icone {\n /*padding: 0;*/\n}\n\ntd.icone > * {\n width: 100%;\n display: block;\n padding: 0.5rem;\n text-align: center;\n}\n\ntd.icone i {\n font-size: 1.8rem;\n}\n"]} \ No newline at end of file +{"version":3,"sources":["gamutable.scss","gamutable.css"],"names":[],"mappings":"AAAA;EACC,oBAAa;EAAb,aAAa;EACb,sBAA8B;MAA9B,8BAA8B;ACC/B;;ADCA;EACC,oBAAa;EAAb,aAAa;ACEd;;ADCA;EACC,eAAe;ACEhB;;ADHA;EAGE,oBAAa;EAAb,aAAa;ACIf;;ADPA;EAME,oBAAY;MAAZ,YAAY;ACKd;;ADXA;EASE,YAAY;EACZ,WAAW;ACMb;;ADhBA;EAcE,eAAe;EACf,aAAa;ACMf;;ADrBA;EAkBE,UAAU;ACOZ;;ADJA;EACC,0CAA0C;ACO3C;;ADJA;EACC,eAAe;ACOhB;;ADJA;EACC,WAAW;EACX,kBAAkB;ACOnB;;ADLA;EACC,cAAA;ACQD;;ADLA;EACC,WAAW;EACX,cAAc;EACd,eAAe;EACf,kBAAkB;ACQnB;;ADNA;EACC,iBAAiB;ACSlB;;ADNA;EACC,oBAAa;EAAb,aAAa;EACb,mBAAe;MAAf,eAAe;ACShB;;ADPA;EACC,UAAU;EACV,yBAAyB;EACzB,mBAAmB;EACnB,kBAAkB;ACUnB","file":"gamutable.css","sourcesContent":[".gamutable--sousTable {\n\tdisplay: flex;\n\tjustify-content: space-between;\n}\n.gamutable--pagination {\n\tdisplay: flex;\n}\n\n.gamutable table {\n\tfont-size: 1rem;\n\tth > div {\n\t\tdisplay: flex;\n\t}\n\t.label_tete_colonne {\n\t\tflex-grow: 1;\n\t}\n\t.iconeTri {\n\t\tfloat: right;\n\t\twidth: 1rem;\n\t\t//position: relative;\n\t}\n\t.tri_col {\n\t\tcursor: pointer;\n\t\tfill: #cecece;\n\t}\n\t.iconeTri > .active {\n\t\tfill: #000;\n\t}\n}\n#app .select {\n\tbackground-color: rgba(179, 209, 67, 0.47);\n}\n\ntd.id {\n\tcursor: pointer;\n}\n\nth.icone {\n\twidth: 30px;\n\ttext-align: center;\n}\ntd.icone {\n\t/*padding: 0;*/\n}\n\ntd.icone > * {\n\twidth: 100%;\n\tdisplay: block;\n\tpadding: 0.5rem;\n\ttext-align: center;\n}\ntd.icone i {\n\tfont-size: 1.8rem;\n}\n\n.vueBlocs {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n}\n.vueBlocs-unbloc {\n\twidth: 23%;\n\tborder: 1px solid #cecece;\n\tmargin-bottom: 1rem;\n\tmargin-right: 1rem;\n}\n",".gamutable--sousTable {\n display: flex;\n justify-content: space-between;\n}\n\n.gamutable--pagination {\n display: flex;\n}\n\n.gamutable table {\n font-size: 1rem;\n}\n\n.gamutable table th > div {\n display: flex;\n}\n\n.gamutable table .label_tete_colonne {\n flex-grow: 1;\n}\n\n.gamutable table .iconeTri {\n float: right;\n width: 1rem;\n}\n\n.gamutable table .tri_col {\n cursor: pointer;\n fill: #cecece;\n}\n\n.gamutable table .iconeTri > .active {\n fill: #000;\n}\n\n#app .select {\n background-color: rgba(179, 209, 67, 0.47);\n}\n\ntd.id {\n cursor: pointer;\n}\n\nth.icone {\n width: 30px;\n text-align: center;\n}\n\ntd.icone {\n /*padding: 0;*/\n}\n\ntd.icone > * {\n width: 100%;\n display: block;\n padding: 0.5rem;\n text-align: center;\n}\n\ntd.icone i {\n font-size: 1.8rem;\n}\n\n.vueBlocs {\n display: flex;\n flex-wrap: wrap;\n}\n\n.vueBlocs-unbloc {\n width: 23%;\n border: 1px solid #cecece;\n margin-bottom: 1rem;\n margin-right: 1rem;\n}\n"]} \ No newline at end of file diff --git a/css/gamutable.scss b/css/gamutable.scss index bea9f23..44c95af 100644 --- a/css/gamutable.scss +++ b/css/gamutable.scss @@ -52,3 +52,14 @@ td.icone > * { td.icone i { font-size: 1.8rem; } + +.vueBlocs { + display: flex; + flex-wrap: wrap; +} +.vueBlocs-unbloc { + width: 23%; + border: 1px solid #cecece; + margin-bottom: 1rem; + margin-right: 1rem; +} diff --git a/inclure/gamutable.html b/inclure/gamutable.html index 27a5450..0333d7b 100644 --- a/inclure/gamutable.html +++ b/inclure/gamutable.html @@ -9,7 +9,7 @@ champcsv="#ENV{champcsv,html}" delimitercsv="#ENV{delimitercsv,','}" namecsv="#ENV{namecsv,export.csv}" - vuebloc="#ENV{vuebloc}" + urlvuebloc="[(#ENV{vuebloc})]" url_sort_asc="#ENV{sort_asc,#GET{sort_asc}}" url_sort_desc="#ENV{sort_desc,#GET{sort_desc}}" ref="montableau" diff --git a/js/gamutable.es6.js b/js/gamutable.es6.js index c449692..fd9338b 100644 --- a/js/gamutable.es6.js +++ b/js/gamutable.es6.js @@ -146,7 +146,11 @@ function trouver_index(table, id) { }); return i; } - +String.fromHtmlEntities = function (string) { + return (string + '').replace(/&#\d+;/gm, function (s) { + return String.fromCharCode(s.match(/\d+/gm)[0]); + }); +}; let monTableau = { props: { tparpage: { @@ -174,6 +178,9 @@ let monTableau = { url_sort_desc: { type: String, }, + urlvuebloc: { + type: String, + }, vueblocdefaut: { type: String, default: 'tableau', @@ -197,10 +204,19 @@ let monTableau = { chargement: true, nameLocalStorage: this.calculer_nameLocalStorage(), quelleVue: this.vueblocdefaut, + vuebloc: '', }; }, mounted() { this.chargerJson(); + if (this.urlvuebloc) { + fetch(this.urlvuebloc) + .then((response) => response.text()) + .then((data) => { + console.log(data); + this.vuebloc = data; + }); + } }, computed: { tableau: function () { @@ -387,7 +403,6 @@ let monTableau = { }, replaceBloc(ligne) { let html = this.vuebloc; - console.log(ligne); Object.keys(ligne).forEach((key) => { html = html.replace(`@@${key}@@`, ligne[key]); }); @@ -412,12 +427,14 @@ let monTableau = { @@ -439,7 +456,7 @@ let monTableau = {
-
0) { if (data.length > 0) { - var i = trouver_index(_this2.table, id); - _this2.table[i] = data[0]; + var i = trouver_index(_this3.table, id); + _this3.table[i] = data[0]; } else { - var _i2 = trouver_index(_this2.table, id); + var _i2 = trouver_index(_this3.table, id); console.log('index ', _i2); - _this2.table.splice(_i2, 1); + _this3.table.splice(_i2, 1); } } else { - _this2.table = data; + _this3.table = data; if (data[0] && data[0].search) { - _this2.champ_search = 'search'; + _this3.champ_search = 'search'; } } Vue.nextTick(function () { - _this2.chargement = false; + _this3.chargement = false; if ($_id > 0) { - _this2.selectLigne($_id, 'id'); + _this3.selectLigne($_id, 'id'); var _url = new URL(window.location); @@ -444,7 +465,7 @@ var monTableau = { } }, exportCSV: function exportCSV() { - var _this3 = this; + var _this4 = this; var $csv = []; var $header = []; @@ -454,7 +475,7 @@ var monTableau = { }); $tableau = this.tableau.reduce(function (acc, ligne) { var $uneLigne = []; - Object.values(ligne[_this3.champcsv]).forEach(function (l) { + Object.values(ligne[_this4.champcsv]).forEach(function (l) { return $uneLigne.push(l); }); return [].concat(_toConsumableArray(acc), [[].concat($uneLigne)]); @@ -464,7 +485,6 @@ var monTableau = { }, replaceBloc: function replaceBloc(ligne) { var html = this.vuebloc; - console.log(ligne); Object.keys(ligne).forEach(function (key) { html = html.replace("@@".concat(key, "@@"), ligne[key]); }); @@ -474,7 +494,7 @@ var monTableau = { this.quelleVue = vue; } }, - template: "\n\t
\n\t\t
\n\t\t\t\n\t\t\t\n\n\t\t\t\n\n\t\t\t\n\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\tMise \xE0 jour de la base de donn\xE9e\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t
\n\t\t
\n\t\t\t
\n\t\t\t
\n\t\t
\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t
\n\t\t\t
{{tableau.length}} \xE9l\xE9ments
\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t
\n\t\t
\n\t
" + template: "\n\t
\n\t\t
\n\t\t\t\n\t\t\t\n\n\t\t\t\n\n\t\t\t\n\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\tMise \xE0 jour de la base de donn\xE9e\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t
\n\t\t
\n\t\t\t
\n\t\t\t
\n\t\t
\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t
\n\t\t\t
{{tableau.length}} \xE9l\xE9ments
\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t
\n\t\t
\n\t
" }; var gamuTable = { components: {