* image de tri des cols : on n'utilise plus fontawesome mais des icones
svg, personnalisables * On passe le fichier de css en scss (transparent)
This commit is contained in:
parent
4a5238cfd1
commit
e24168bd68
11 changed files with 221 additions and 42 deletions
|
|
@ -16,9 +16,13 @@ Choisir entre la version minifiée de vuejs (sans le debug) ou la version de dev
|
|||
champcsv="search",
|
||||
delimitercsv=";",
|
||||
namecsv="souscripteurs.csv",
|
||||
url_sort_asc="#CHEMIN{...}"
|
||||
url_sort_desc="#CHEMIN{...}"
|
||||
env
|
||||
}>
|
||||
```
|
||||
>url_sort_asc et url_sort_desc => surcharge possible des icones de tri de colonnes
|
||||
|
||||
1. Surcharger `json_gamutable.json.html` en suivant son modele
|
||||
* pour le header c'est de la forme : "champ":"label"
|
||||
* **IMPORTANT** pour le content du json, il que le cle de la KEY de la table soit "id" et non pas "id_souscription"
|
||||
|
|
|
|||
|
|
@ -1,49 +1,65 @@
|
|||
.gamutable--sousTable {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.gamutable--pagination {
|
||||
display: flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.iconeTri {
|
||||
float: right;
|
||||
position: relative;
|
||||
.gamutable--pagination {
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
}
|
||||
.iconeTri .fa-sort-asc {
|
||||
position: absolute;
|
||||
color: #cecece;
|
||||
cursor: pointer;
|
||||
|
||||
.gamutable table th > div {
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
}
|
||||
.iconeTri .fa-sort-desc {
|
||||
color: #cecece;
|
||||
cursor: pointer;
|
||||
|
||||
.gamutable table .label_tete_colonne {
|
||||
-ms-flex-positive: 1;
|
||||
flex-grow: 1;
|
||||
}
|
||||
.iconeTri > .active {
|
||||
color: #000;
|
||||
|
||||
.gamutable table .iconeTri {
|
||||
float: right;
|
||||
width: 1rem;
|
||||
}
|
||||
|
||||
.gamutable table .tri_col {
|
||||
cursor: pointer;
|
||||
fill: #cecece;
|
||||
}
|
||||
|
||||
.gamutable table .iconeTri > .active {
|
||||
fill: #000;
|
||||
}
|
||||
|
||||
#app .select {
|
||||
background-color: rgba(179, 209, 67, 0.47);
|
||||
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;
|
||||
}
|
||||
|
||||
td.icone {
|
||||
/*padding: 0;*/
|
||||
/*padding: 0;*/
|
||||
}
|
||||
|
||||
td.icone > * {
|
||||
width: 100%;
|
||||
display: block;
|
||||
padding: 0.5rem;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
display: block;
|
||||
padding: 0.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
td.icone i {
|
||||
font-size: 1.8rem;
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=gamutable.css.map */
|
||||
|
|
|
|||
1
css/gamutable.css.map
Normal file
1
css/gamutable.css.map
Normal file
|
|
@ -0,0 +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;EAEE,oBAAa;EAAb,aAAa;ACCf;;ADHA;EAKE,oBAAY;MAAZ,YAAY;ACEd;;ADPA;EAQE,YAAY;EACZ,WAAW;ACGb;;ADZA;EAaE,eAAe;EACf,aAAa;ACGf;;ADjBA;EAiBE,UAAU;ACIZ;;ADDA;EACC,0CAA0C;ACI3C;;ADDA;EACC,eAAe;ACIhB;;ADDA;EACC,WAAW;EACX,kBAAkB;ACInB;;ADFA;EACC,cAAA;ACKD;;ADFA;EACC,WAAW;EACX,cAAc;EACd,eAAe;EACf,kBAAkB;ACKnB;;ADHA;EACC,iBAAiB;ACMlB","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\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 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"]}
|
||||
53
css/gamutable.scss
Normal file
53
css/gamutable.scss
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
.gamutable--sousTable {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.gamutable--pagination {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.gamutable table {
|
||||
th > div {
|
||||
display: flex;
|
||||
}
|
||||
.label_tete_colonne {
|
||||
flex-grow: 1;
|
||||
}
|
||||
.iconeTri {
|
||||
float: right;
|
||||
width: 1rem;
|
||||
//position: relative;
|
||||
}
|
||||
.tri_col {
|
||||
cursor: pointer;
|
||||
fill: #cecece;
|
||||
}
|
||||
.iconeTri > .active {
|
||||
fill: #000;
|
||||
}
|
||||
}
|
||||
#app .select {
|
||||
background-color: rgba(179, 209, 67, 0.47);
|
||||
}
|
||||
|
||||
td.id {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
th.icone {
|
||||
width: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
td.icone {
|
||||
/*padding: 0;*/
|
||||
}
|
||||
|
||||
td.icone > * {
|
||||
width: 100%;
|
||||
display: block;
|
||||
padding: 0.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
td.icone i {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
49
css/table_knacss.css
Normal file
49
css/table_knacss.css
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
/* ----------------------------- */
|
||||
/* ==Tables */
|
||||
/* ----------------------------- */
|
||||
table,
|
||||
.table {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
table-layout: fixed;
|
||||
border-collapse: collapse;
|
||||
vertical-align: top;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.table {
|
||||
display: table;
|
||||
border: 1px solid #acb3c2;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.table--zebra tbody tr:nth-child(odd) {
|
||||
background: #e7e9ed;
|
||||
}
|
||||
|
||||
.table caption {
|
||||
caption-side: bottom;
|
||||
padding: 1rem;
|
||||
color: #333;
|
||||
font-style: italic;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.table td,
|
||||
.table th {
|
||||
padding: 0.3rem 0.6rem;
|
||||
min-width: 2rem;
|
||||
vertical-align: top;
|
||||
border: 1px #acb3c2 dotted;
|
||||
text-align: left;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.table thead {
|
||||
color: #212529;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.table--auto {
|
||||
table-layout: auto;
|
||||
}
|
||||
1
img/sprite_gamutable.svg
Normal file
1
img/sprite_gamutable.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><symbol viewBox="0 -19.4 93.34 93.34" id="sort_asc" xmlns="http://www.w3.org/2000/svg"><path d="M7.843 54.545a7.84 7.84 0 01-5.55-13.38l38.83-38.87a7.81 7.81 0 0111.06 0l38.86 38.87a7.84 7.84 0 01-5.55 13.38z"/></symbol><symbol viewBox="0 -19.4 93.34 93.34" id="sort_desc" xmlns="http://www.w3.org/2000/svg"><path d="M85.493 0a7.84 7.84 0 015.55 13.38l-38.83 38.87a7.81 7.81 0 01-11.06 0L2.293 13.38A7.84 7.84 0 017.843 0z"/></symbol></svg>
|
||||
|
After Width: | Height: | Size: 561 B |
|
|
@ -1,5 +1,6 @@
|
|||
<link rel="stylesheet" href="[(#CHEMIN{css/gamutable.css}|compacte|timestamp)]" type="text/css" media="screen" title="no title" charset="utf-8">
|
||||
|
||||
[(#SET{sort_asc,[(#CHEMIN{img/sprite_gamutable.svg})#sort_asc]})]
|
||||
[(#SET{sort_desc,[(#CHEMIN{img/sprite_gamutable.svg})#sort_desc]})]
|
||||
<span class="crayon xxxx-yyyy-nn"></span>
|
||||
<div id="app">
|
||||
<mon-tableau
|
||||
|
|
@ -8,7 +9,8 @@
|
|||
champcsv="#ENV{champcsv,html}"
|
||||
delimitercsv="#ENV{delimitercsv,','}"
|
||||
namecsv="#ENV{namecsv,export.csv}"
|
||||
ref="montableau"
|
||||
url_sort_asc="#ENV{sort_asc,#GET{sort_asc}}"
|
||||
url_sort_desc="#ENV{sort_desc,#GET{sort_desc}}"
|
||||
></mon-tableau>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -150,6 +150,12 @@ let monTableau = {
|
|||
namecsv: {
|
||||
type: String,
|
||||
},
|
||||
url_sort_asc: {
|
||||
type: String,
|
||||
},
|
||||
url_sort_desc: {
|
||||
type: String,
|
||||
},
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
|
|
@ -357,11 +363,20 @@ let monTableau = {
|
|||
<thead>
|
||||
<tr>
|
||||
<th v-for="(label,head,i) in header" :key="'head_'+i" :class="[head,classes[head]]">
|
||||
<span v-html="label"></span>
|
||||
<span class="iconeTri">
|
||||
<i class="fa fa-sort-asc fa-sort-up" :class="ordreActif(head, 'asc')" aria-hidden="true" @click.stop="tri(head,'asc')"></i>
|
||||
<i class="fa fa-sort-desc fa-sort-down":class="ordreActif(head, 'desc')" aria-hidden="true" @click.stop="tri(head,'desc')" ></i>
|
||||
</span>
|
||||
<div>
|
||||
<div class="label_tete_colonne" v-html="label"></div>
|
||||
<div class="iconeTri">
|
||||
<svg class="tri_col" :class="ordreActif(head, 'asc')" width="1rem" height="1rem" @click.stop="tri(head,'asc')">
|
||||
<title></title>
|
||||
<use :xlink:href="url_sort_asc" />
|
||||
</svg>
|
||||
|
||||
<svg class="tri_col" :class="ordreActif(head, 'desc')" width="1rem" height="1rem" @click.stop="tri(head,'desc')">
|
||||
<title></title>
|
||||
<use :xlink:href="url_sort_desc" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
|
|
|||
|
|
@ -1,18 +1,22 @@
|
|||
"use strict";
|
||||
|
||||
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }
|
||||
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
|
||||
|
||||
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); }
|
||||
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
||||
|
||||
function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }
|
||||
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }
|
||||
|
||||
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }
|
||||
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
|
||||
|
||||
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
|
||||
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
||||
|
||||
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
|
||||
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
||||
|
||||
function _iterableToArrayLimit(arr, i) { if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) { return; } var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
|
||||
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
||||
|
||||
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
|
||||
|
||||
function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
|
||||
|
||||
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
||||
|
||||
|
|
@ -190,6 +194,12 @@ var monTableau = {
|
|||
},
|
||||
namecsv: {
|
||||
type: String
|
||||
},
|
||||
url_sort_asc: {
|
||||
type: String
|
||||
},
|
||||
url_sort_desc: {
|
||||
type: String
|
||||
}
|
||||
},
|
||||
data: function data() {
|
||||
|
|
@ -395,7 +405,7 @@ var monTableau = {
|
|||
exporterCSV($csv, this.delimitercsv, this.namecsv);
|
||||
}
|
||||
},
|
||||
template: "\n\t<div class=\"gamutable\">\n\t\t<div class=\"gamutable--surTable\">\n\t\t\t<select id=\"parPage\" v-model=\"parPageSelect\">\n\t\t\t\t<option v-for=\"v in tparpage\" :key=\"v\">{{v}}</option>\n\t\t\t</select>\n\t\t\t<input class=\"gamutable--rechercher\" type=\"text\" v-model=\"search\" placeholder=\"Rechercher\">\n\t\t\t<button class=\"btn gamutable--resetOrderBy\" type=\"button\" @click.stop=\"resetTri()\">R\xE9initialiser les tris des colonnes</button>\n\t\t\t<button class=\"btn gamutable--exportCSV\" type=\"button\" @click.stop=\"exportCSV()\"\n\t\t\t\ttitle=\"Exporter le tableau affich\xE9 en csv\"\n\t\t\t>\n\t\t\t\t<i class=\"fa fa-file-excel-o fas fa-file-csv\" aria-hidden=\"true\"></i>\n\t\t\t</button>\n\t\t\t<span v-show=\"chargement\" class=\"rouge\">\n\t\t\t\t<i class=\"fa fa-refresh fa-spin fa-fw rouge fas fa-sync fa-spin\"></i>\n\t\t\t\tMise \xE0 jour de la base de donn\xE9e\n\t\t\t</span>\n\t\t\t<span v-show=\"!chargement\" class=\"verte\">\n\t\t\t\t<i class=\"fa fa-check\"></i>\n\t\t\t\tBase de donn\xE9es synchronis\xE9e\n\t\t\t</span>\n\t\t</div>\n\t\t<table class=\"table table--zebra\">\n\t\t\t<thead>\n\t\t\t\t<tr>\n\t\t\t\t\t<th v-for=\"(label,head,i) in header\" :key=\"'head_'+i\" :class=\"[head,classes[head]]\">\n\t\t\t\t\t\t<span v-html=\"label\"></span>\n\t\t\t\t\t\t<span class=\"iconeTri\">\n\t\t\t\t\t\t\t<i class=\"fa fa-sort-asc fa-sort-up\" :class=\"ordreActif(head, 'asc')\" aria-hidden=\"true\" @click.stop=\"tri(head,'asc')\"></i>\n\t\t\t\t\t\t\t<i class=\"fa fa-sort-desc fa-sort-down\":class=\"ordreActif(head, 'desc')\" aria-hidden=\"true\" @click.stop=\"tri(head,'desc')\" ></i>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</th>\n\t\t\t\t</tr>\n\t\t\t</thead>\n\t\t\t<tbody>\n\t\t\t\t<tr v-for=\"l in tableau\" :key=\"l.html.id\" :class=\"selectTr.indexOf(l.html.id) !== -1 ? 'select' : ''\" >\n\t\t\t\t\t<td v-for=\"(td,name, i) in l.html\" :key=\"'td_'+i\" :class=\"[afficher_crayons(name,l.html.id), name, classes[name], l.classes !== undefined ? l.classes[name] : '']\" v-html=\"td\" @click=\"selectLigne(l.html.id,name)\">\n\t\t\t\t\t</td>\n\t\t\t\t</tr>\n\t\t\t</tbody>\n\t\t</table>\n\t\t<div class=\"gamutable--sousTable\">\n\t\t\t<div class=\"gamutable-nbrMax\">{{tableau.length}} / {{table.length}} \xE9l\xE9ments</div>\n\t\t\t<div class=\"gamutable--pagination\">\n\t\t\t\t<div class=\"page-item\">\n\t\t\t\t\t<button type=\"button\" class=\"page-link\" v-if=\"page != 1\" @click=\"page=1\"> Start </button>\n\t\t\t\t\t<button type=\"button\" class=\"page-link\" v-if=\"page != 1\" @click=\"page--\"> Previous </button>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"page-item\">\n\t\t\t\t\t<button type=\"button\" class=\"page-link\" v-for=\"pageNumber in pages.slice(page-1, page+5)\" @click=\"page = pageNumber\"> {{pageNumber}} </button>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"page-item\">\n\t\t\t\t\t<button type=\"button\" @click=\"page++\" v-if=\"page < pages.length\" class=\"page-link\"> Next </button>\n\t\t\t\t\t<button type=\"button\" @click=\"page=pages.length\" v-if=\"page < pages.length\" class=\"page-link\"> Last </button>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>"
|
||||
template: "\n\t<div class=\"gamutable\">\n\t\t<div class=\"gamutable--surTable\">\n\t\t\t<select id=\"parPage\" v-model=\"parPageSelect\">\n\t\t\t\t<option v-for=\"v in tparpage\" :key=\"v\">{{v}}</option>\n\t\t\t</select>\n\t\t\t<input class=\"gamutable--rechercher\" type=\"text\" v-model=\"search\" placeholder=\"Rechercher\">\n\t\t\t<button class=\"btn gamutable--resetOrderBy\" type=\"button\" @click.stop=\"resetTri()\">R\xE9initialiser les tris des colonnes</button>\n\t\t\t<button class=\"btn gamutable--exportCSV\" type=\"button\" @click.stop=\"exportCSV()\"\n\t\t\t\ttitle=\"Exporter le tableau affich\xE9 en csv\"\n\t\t\t>\n\t\t\t\t<i class=\"fa fa-file-excel-o fas fa-file-csv\" aria-hidden=\"true\"></i>\n\t\t\t</button>\n\t\t\t<span v-show=\"chargement\" class=\"rouge\">\n\t\t\t\t<i class=\"fa fa-refresh fa-spin fa-fw rouge fas fa-sync fa-spin\"></i>\n\t\t\t\tMise \xE0 jour de la base de donn\xE9e\n\t\t\t</span>\n\t\t\t<span v-show=\"!chargement\" class=\"verte\">\n\t\t\t\t<i class=\"fa fa-check\"></i>\n\t\t\t\tBase de donn\xE9es synchronis\xE9e\n\t\t\t</span>\n\t\t</div>\n\t\t<table class=\"table table--zebra\">\n\t\t\t<thead>\n\t\t\t\t<tr>\n\t\t\t\t\t<th v-for=\"(label,head,i) in header\" :key=\"'head_'+i\" :class=\"[head,classes[head]]\">\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<div class=\"label_tete_colonne\" v-html=\"label\"></div>\n\t\t\t\t\t\t\t<div class=\"iconeTri\">\n\t\t\t\t\t\t\t\t<svg class=\"tri_col\" :class=\"ordreActif(head, 'asc')\" width=\"1rem\" height=\"1rem\" @click.stop=\"tri(head,'asc')\">\n\t\t\t\t\t\t\t\t\t<title></title>\n\t\t\t\t\t\t\t\t\t<use :xlink:href=\"url_sort_asc\" />\n\t\t\t\t\t\t\t\t</svg>\n\n\t\t\t\t\t\t\t\t<svg class=\"tri_col\" :class=\"ordreActif(head, 'desc')\" width=\"1rem\" height=\"1rem\" @click.stop=\"tri(head,'desc')\">\n\t\t\t\t\t\t\t\t\t<title></title>\n\t\t\t\t\t\t\t\t\t<use :xlink:href=\"url_sort_desc\" />\n\t\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</th>\n\t\t\t\t</tr>\n\t\t\t</thead>\n\t\t\t<tbody>\n\t\t\t\t<tr v-for=\"l in tableau\" :key=\"l.html.id\" :class=\"selectTr.indexOf(l.html.id) !== -1 ? 'select' : ''\" >\n\t\t\t\t\t<td v-for=\"(td,name, i) in l.html\" :key=\"'td_'+i\" :class=\"[afficher_crayons(name,l.html.id), name, classes[name], l.classes !== undefined ? l.classes[name] : '']\" v-html=\"td\" @click=\"selectLigne(l.html.id,name)\">\n\t\t\t\t\t</td>\n\t\t\t\t</tr>\n\t\t\t</tbody>\n\t\t</table>\n\t\t<div class=\"gamutable--sousTable\">\n\t\t\t<div class=\"gamutable-nbrMax\">{{tableau.length}} / {{table.length}} \xE9l\xE9ments</div>\n\t\t\t<div class=\"gamutable--pagination\">\n\t\t\t\t<div class=\"page-item\">\n\t\t\t\t\t<button type=\"button\" class=\"page-link\" v-if=\"page != 1\" @click=\"page=1\"> Start </button>\n\t\t\t\t\t<button type=\"button\" class=\"page-link\" v-if=\"page != 1\" @click=\"page--\"> Previous </button>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"page-item\">\n\t\t\t\t\t<button type=\"button\" class=\"page-link\" v-for=\"pageNumber in pages.slice(page-1, page+5)\" @click=\"page = pageNumber\"> {{pageNumber}} </button>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"page-item\">\n\t\t\t\t\t<button type=\"button\" @click=\"page++\" v-if=\"page < pages.length\" class=\"page-link\"> Next </button>\n\t\t\t\t\t<button type=\"button\" @click=\"page=pages.length\" v-if=\"page < pages.length\" class=\"page-link\"> Last </button>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>"
|
||||
};
|
||||
var app = new Vue({
|
||||
el: '#app',
|
||||
|
|
|
|||
14
svg/sort_asc.svg
Normal file
14
svg/sort_asc.svg
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="sort_asc" width="93.335" height="54.545" data-name="Layer 1" version="1.1" viewBox="0 0 93.335 54.545" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
|
||||
<metadata>
|
||||
<rdf:RDF>
|
||||
<cc:Work rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
|
||||
<dc:title>sort</dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<title>sort</title>
|
||||
<path id="sort_asc" d="m7.8426 54.545a7.84 7.84 0 0 1-5.55-13.38l38.83-38.87a7.81 7.81 0 0 1 11.06 0l38.86 38.87a7.84 7.84 0 0 1-5.55 13.38z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 732 B |
14
svg/sort_desc.svg
Normal file
14
svg/sort_desc.svg
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="sort_desc" width="93.335" height="54.545" data-name="Layer 1" version="1.1" viewBox="0 0 93.335 54.545" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
|
||||
<metadata>
|
||||
<rdf:RDF>
|
||||
<cc:Work rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
|
||||
<dc:title>sort</dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<title>sort</title>
|
||||
<path id="sort_dsc" d="m85.493 4.2077e-7a7.84 7.84 0 0 1 5.55 13.38l-38.83 38.87a7.81 7.81 0 0 1-11.06 0l-38.86-38.87a7.84 7.84 0 0 1 5.55-13.38z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 738 B |
Loading…
Add table
Reference in a new issue