recup des fichiers gamutable de souscriptions
This commit is contained in:
parent
b38912f104
commit
bdc332fe9f
12 changed files with 18090 additions and 107 deletions
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
node_modules
|
||||
20
css/gamutable.css
Normal file
20
css/gamutable.css
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
.gamutable--pagination {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.iconeTri {
|
||||
float: right;
|
||||
position: relative;
|
||||
}
|
||||
.iconeTri .fa-sort-asc {
|
||||
position: absolute;
|
||||
color: #cecece;
|
||||
cursor: pointer;
|
||||
}
|
||||
.iconeTri .fa-sort-desc {
|
||||
color: #cecece;
|
||||
cursor: pointer;
|
||||
}
|
||||
.iconeTri .active {
|
||||
color: #000;
|
||||
}
|
||||
|
|
@ -1,106 +0,0 @@
|
|||
<?php
|
||||
|
||||
/**
|
||||
* Fichier généré par la Fabrique de plugin v7
|
||||
* le 2020-03-10 16:09:32
|
||||
*
|
||||
* Ce fichier de sauvegarde peut servir à recréer
|
||||
* votre plugin avec le plugin «Fabrique» qui a servi à le créer.
|
||||
*
|
||||
* Bien évidemment, les modifications apportées ultérieurement
|
||||
* par vos soins dans le code de ce plugin généré
|
||||
* NE SERONT PAS connues du plugin «Fabrique» et ne pourront pas
|
||||
* être recréées par lui !
|
||||
*
|
||||
* La «Fabrique» ne pourra que régénerer le code de base du plugin
|
||||
* avec les informations dont il dispose.
|
||||
*
|
||||
**/
|
||||
|
||||
if (!defined('_ECRIRE_INC_VERSION')) {
|
||||
return;
|
||||
}
|
||||
|
||||
$data = array (
|
||||
'fabrique' =>
|
||||
array (
|
||||
'version' => 7,
|
||||
),
|
||||
'paquet' =>
|
||||
array (
|
||||
'prefixe' => 'gamutable',
|
||||
'nom' => 'GamuTable',
|
||||
'slogan' => '',
|
||||
'description' => 'Affichage des "table" en utilisant vuejs',
|
||||
'credits' =>
|
||||
array (
|
||||
'logo' =>
|
||||
array (
|
||||
'texte' => '',
|
||||
'url' => '',
|
||||
),
|
||||
),
|
||||
'version' => '1.0.0',
|
||||
'auteur' => 'tofulm',
|
||||
'auteur_lien' => 'https://gamuza.fr',
|
||||
'licence' => 'GNU/GPL',
|
||||
'categorie' => 'outil',
|
||||
'etat' => 'dev',
|
||||
'compatibilite' => '[3.2.0-dev;3.3.*]',
|
||||
'documentation' => '',
|
||||
'administrations' => '',
|
||||
'schema' => '1.0.0',
|
||||
'formulaire_config' => 'on',
|
||||
'formulaire_config_titre' => '',
|
||||
'fichiers' =>
|
||||
array (
|
||||
0 => 'autorisations',
|
||||
1 => 'fonctions',
|
||||
2 => 'options',
|
||||
3 => 'pipelines',
|
||||
),
|
||||
'inserer' =>
|
||||
array (
|
||||
'paquet' => '',
|
||||
'administrations' =>
|
||||
array (
|
||||
'maj' => '',
|
||||
'desinstallation' => '',
|
||||
'fin' => '',
|
||||
),
|
||||
'base' =>
|
||||
array (
|
||||
'tables' =>
|
||||
array (
|
||||
'fin' => '',
|
||||
),
|
||||
),
|
||||
),
|
||||
'scripts' =>
|
||||
array (
|
||||
'pre_copie' => '',
|
||||
'post_creation' => '',
|
||||
),
|
||||
'exemples' => '',
|
||||
),
|
||||
'objets' =>
|
||||
array (
|
||||
),
|
||||
'images' =>
|
||||
array (
|
||||
'paquet' =>
|
||||
array (
|
||||
'logo' =>
|
||||
array (
|
||||
0 =>
|
||||
array (
|
||||
'extension' => 'svg',
|
||||
'contenu' => 'PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM6c29kaXBvZGk9Imh0dHA6Ly9zb2RpcG9kaS5zb3VyY2Vmb3JnZS5uZXQvRFREL3NvZGlwb2RpLTAuZHRkIgogICB4bWxuczppbmtzY2FwZT0iaHR0cDovL3d3dy5pbmtzY2FwZS5vcmcvbmFtZXNwYWNlcy9pbmtzY2FwZSIKICAgZGF0YS1uYW1lPSJMYXllciAxIgogICB2aWV3Qm94PSIwIDAgMTI4IDEyOCIKICAgeD0iMHB4IgogICB5PSIwcHgiCiAgIHZlcnNpb249IjEuMSIKICAgaWQ9InN2ZzQ2NTgiCiAgIHNvZGlwb2RpOmRvY25hbWU9ImRhdGF0YWJsZS5zdmciCiAgIHdpZHRoPSIxMjgiCiAgIGhlaWdodD0iMTI4IgogICBpbmtzY2FwZTp2ZXJzaW9uPSIwLjkyLjQgNWRhNjg5YzMxMywgMjAxOS0wMS0xNCI+CiAgPG1ldGFkYXRhCiAgICAgaWQ9Im1ldGFkYXRhNDY2NCI+CiAgICA8cmRmOlJERj4KICAgICAgPGNjOldvcmsKICAgICAgICAgcmRmOmFib3V0PSIiPgogICAgICAgIDxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PgogICAgICAgIDxkYzp0eXBlCiAgICAgICAgICAgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIgLz4KICAgICAgPC9jYzpXb3JrPgogICAgPC9yZGY6UkRGPgogIDwvbWV0YWRhdGE+CiAgPGRlZnMKICAgICBpZD0iZGVmczQ2NjIiIC8+CiAgPHNvZGlwb2RpOm5hbWVkdmlldwogICAgIHBhZ2Vjb2xvcj0iI2ZmZmZmZiIKICAgICBib3JkZXJjb2xvcj0iIzY2NjY2NiIKICAgICBib3JkZXJvcGFjaXR5PSIxIgogICAgIG9iamVjdHRvbGVyYW5jZT0iMTAiCiAgICAgZ3JpZHRvbGVyYW5jZT0iMTAiCiAgICAgZ3VpZGV0b2xlcmFuY2U9IjEwIgogICAgIGlua3NjYXBlOnBhZ2VvcGFjaXR5PSIwIgogICAgIGlua3NjYXBlOnBhZ2VzaGFkb3c9IjIiCiAgICAgaW5rc2NhcGU6d2luZG93LXdpZHRoPSIxOTE2IgogICAgIGlua3NjYXBlOndpbmRvdy1oZWlnaHQ9IjEwNTYiCiAgICAgaWQ9Im5hbWVkdmlldzQ2NjAiCiAgICAgc2hvd2dyaWQ9ImZhbHNlIgogICAgIGlua3NjYXBlOnpvb209IjEuMzcwMzEyNSIKICAgICBpbmtzY2FwZTpjeD0iLTMuMzEzNzI4NCIKICAgICBpbmtzY2FwZTpjeT0iMTI1LjYyODU3IgogICAgIGlua3NjYXBlOndpbmRvdy14PSIwIgogICAgIGlua3NjYXBlOndpbmRvdy15PSIyMCIKICAgICBpbmtzY2FwZTp3aW5kb3ctbWF4aW1pemVkPSIwIgogICAgIGlua3NjYXBlOmN1cnJlbnQtbGF5ZXI9InN2ZzQ2NTgiIC8+CiAgPHRpdGxlCiAgICAgaWQ9InRpdGxlNDY0NCI+NzcgTWlzY2VsbGFuZW91cyAxMiAoMik8L3RpdGxlPgogIDxwYXRoCiAgICAgZD0iTSA2MiwxMDggSCA0IGEgNCw0IDAgMCAwIC00LDQgdiAxMiBhIDQsNCAwIDAgMCA0LDQgaCA1OCBhIDQsNCAwIDAgMCA0LC00IHYgLTEyIGEgNCw0IDAgMCAwIC00LC00IHogbSAtNDQsMTIgaCAtMiBhIDIsMiAwIDAgMSAwLC00IGggMiBhIDIsMiAwIDAgMSAwLDQgeiBtIDEwLDAgaCAtMiBhIDIsMiAwIDAgMSAwLC00IGggMiBhIDIsMiAwIDAgMSAwLDQgeiBtIDEwLDAgaCAtMiBhIDIsMiAwIDAgMSAwLC00IGggMiBhIDIsMiAwIDAgMSAwLDQgeiBtIDEwLDAgaCAtMiBhIDIsMiAwIDAgMSAwLC00IGggMiBhIDIsMiAwIDAgMSAwLDQgeiIKICAgICBpZD0icGF0aDQ2NDYiCiAgICAgc3R5bGU9ImZpbGw6I2I2OGY0ZjtmaWxsLW9wYWNpdHk6MSIKICAgICBpbmtzY2FwZTpjb25uZWN0b3ItY3VydmF0dXJlPSIwIiAvPgogIDxwYXRoCiAgICAgZD0iTSA2Miw4NCBIIDQgYSA0LDQgMCAwIDAgLTQsNCB2IDEyIGEgNCw0IDAgMCAwIDQsNCBoIDU4IGEgNCw0IDAgMCAwIDQsLTQgViA4OCBBIDQsNCAwIDAgMCA2Miw4NCBaIE0gMTgsOTYgaCAtMiBhIDIsMiAwIDAgMSAwLC00IGggMiBhIDIsMiAwIDAgMSAwLDQgeiBtIDEwLDAgaCAtMiBhIDIsMiAwIDAgMSAwLC00IGggMiBhIDIsMiAwIDAgMSAwLDQgeiBtIDEwLDAgaCAtMiBhIDIsMiAwIDAgMSAwLC00IGggMiBhIDIsMiAwIDAgMSAwLDQgeiBtIDEwLDAgaCAtMiBhIDIsMiAwIDAgMSAwLC00IGggMiBhIDIsMiAwIDAgMSAwLDQgeiIKICAgICBpZD0icGF0aDQ2NDgiCiAgICAgc3R5bGU9ImZpbGw6I2I2OGY0ZjtmaWxsLW9wYWNpdHk6MSIKICAgICBpbmtzY2FwZTpjb25uZWN0b3ItY3VydmF0dXJlPSIwIiAvPgogIDxwYXRoCiAgICAgZD0iTSA2Miw2MCBIIDQgYSA0LDQgMCAwIDAgLTQsNCB2IDEyIGEgNCw0IDAgMCAwIDQsNCBoIDU4IGEgNCw0IDAgMCAwIDQsLTQgViA2NCBBIDQsNCAwIDAgMCA2Miw2MCBaIE0gMTgsNzIgaCAtMiBhIDIsMiAwIDAgMSAwLC00IGggMiBhIDIsMiAwIDAgMSAwLDQgeiBtIDEwLDAgaCAtMiBhIDIsMiAwIDAgMSAwLC00IGggMiBhIDIsMiAwIDAgMSAwLDQgeiBtIDEwLDAgaCAtMiBhIDIsMiAwIDAgMSAwLC00IGggMiBhIDIsMiAwIDAgMSAwLDQgeiBtIDEwLDAgaCAtMiBhIDIsMiAwIDAgMSAwLC00IGggMiBhIDIsMiAwIDAgMSAwLDQgeiIKICAgICBpZD0icGF0aDQ2NTAiCiAgICAgc3R5bGU9ImZpbGw6I2I2OGY0ZjtmaWxsLW9wYWNpdHk6MSIKICAgICBpbmtzY2FwZTpjb25uZWN0b3ItY3VydmF0dXJlPSIwIiAvPgogIDxwYXRoCiAgICAgZD0iTSAxMjIsMCBIIDYgQSA2LDYgMCAwIDAgMCw2IFYgNTcuMDggQSA3Ljk0LDcuOTQgMCAwIDEgNCw1NiBWIDQ0IGggMjcgdiAxMiBoIDQgViA0NCBoIDI3IHYgMTIgYSA3Ljk0LDcuOTQgMCAwIDEgNCwxLjA4IFYgNDQgSCA5MyBWIDY4IEggNzAgdiA0IEggOTMgViA5NiBIIDcwIHYgNCBoIDIzIHYgMjQgSCA3MCBhIDcuOTQsNy45NCAwIDAgMSAtMS4wOCw0IEggMTI2IGEgMiwyIDAgMCAwIDIsLTIgViA2IEEgNiw2IDAgMCAwIDEyMiwwIFogTSAzMSw0MCBIIDQgViAxNiBoIDI3IHogbSAzMSwwIEggMzUgViAxNiBoIDI3IHogbSAzMSwwIEggNjYgViAxNiBoIDI3IHogbSAzMSw4NCBIIDk3IHYgLTI0IGggMjcgeiBtIDAsLTI4IEggOTcgViA3MiBoIDI3IHogbSAwLC0yOCBIIDk3IFYgNDQgaCAyNyB6IG0gMCwtMjggSCA5NyBWIDE2IGggMjcgeiBtIDAsLTI4IEggNCBWIDYgQSAyLDIgMCAwIDEgNiw0IGggMTE2IGEgMiwyIDAgMCAxIDIsMiB6IgogICAgIGlkPSJwYXRoNDY1MiIKICAgICBpbmtzY2FwZTpjb25uZWN0b3ItY3VydmF0dXJlPSIwIiAvPgo8L3N2Zz4K',
|
||||
),
|
||||
),
|
||||
),
|
||||
'objets' =>
|
||||
array (
|
||||
),
|
||||
),
|
||||
);
|
||||
141
gulpfile.js
Normal file
141
gulpfile.js
Normal file
|
|
@ -0,0 +1,141 @@
|
|||
const { src, dest, series, parallel, watch } = require('gulp');
|
||||
const gulpSass = require('gulp-sass');
|
||||
const sourcemaps = require('gulp-sourcemaps');
|
||||
const postcss = require('gulp-postcss');
|
||||
const autoprefixer = require('autoprefixer');
|
||||
const cssnano = require('cssnano');
|
||||
const notify = require('gulp-notify');
|
||||
const concat = require('gulp-concat');
|
||||
const uglify = require('gulp-uglify');
|
||||
const babel = require('gulp-babel');
|
||||
const rename = require('gulp-regex-rename');
|
||||
const unuse = require('postcss-uncss'); //https://github.com/uncss/postcss-uncss
|
||||
|
||||
/*
|
||||
* SASS$
|
||||
*/
|
||||
function sass() {
|
||||
let options_unuse = {
|
||||
html: 'http://starter.spip'
|
||||
};
|
||||
return (
|
||||
src('css/**/*.scss')
|
||||
.pipe(sourcemaps.init())
|
||||
.pipe(gulpSass({ outputStyle: 'expanded' }))
|
||||
.on('error', err => notify().write(err))
|
||||
.pipe(postcss([autoprefixer()])) // autoprefixer
|
||||
//.pipe(postcss([autoprefixer(), cssnano()])) // autoprefixer + minifier
|
||||
//.pipe(postcss([unuse(options_unuse), autoprefixer()])) // css unuse + autoprefixer
|
||||
.pipe(sourcemaps.write('.')) // initialize sourcemaps first
|
||||
.pipe(dest('css'))
|
||||
);
|
||||
}
|
||||
|
||||
/*
|
||||
* JS -> concat + babel
|
||||
*/
|
||||
function jsConcatMinif() {
|
||||
return src(['./js/a_compresser/*.js'])
|
||||
.pipe(sourcemaps.init())
|
||||
.pipe(
|
||||
babel({
|
||||
presets: ['@babel/preset-env']
|
||||
})
|
||||
)
|
||||
.pipe(concat('mon_site.min.js', { newLine: ';' }))
|
||||
.pipe(uglify())
|
||||
.pipe(sourcemaps.write('.'))
|
||||
.pipe(dest('./js'));
|
||||
}
|
||||
|
||||
/*
|
||||
* JS -> babel
|
||||
*/
|
||||
function jsBabel() {
|
||||
return src(['js/*.es6.js'])
|
||||
.pipe(
|
||||
babel({
|
||||
presets: ['@babel/preset-env']
|
||||
})
|
||||
)
|
||||
.pipe(rename(/\.es6/, ''))
|
||||
.pipe(dest('./js'));
|
||||
}
|
||||
|
||||
/*
|
||||
* Les Watchers
|
||||
*/
|
||||
function watcherSass() {
|
||||
watch('css/**/*.scss', { ignoreInitial: false }, sass).on('change', function() {
|
||||
notify('CSS -> SCSS ==> OK').write('');
|
||||
});
|
||||
}
|
||||
|
||||
function watcherJsConcatMinif() {
|
||||
watch('./js/a_compresser/*.js', { ignoreInitial: false }, jsConcatMinif).on('change', function() {
|
||||
notify('JS (concat) ==> OK').write('');
|
||||
});
|
||||
}
|
||||
|
||||
function watcherJsBabel() {
|
||||
watch('./js/*.es6.js', { ignoreInitial: false }, jsBabel).on('change', function() {
|
||||
notify('JS (babel) ==> OK').write('');
|
||||
});
|
||||
}
|
||||
|
||||
/*
|
||||
* SVG sprite
|
||||
*/
|
||||
const gulpSvgSprite = require('gulp-svg-sprite');
|
||||
const config = {
|
||||
shape: {
|
||||
spacing: {
|
||||
box: 'icon'
|
||||
}
|
||||
},
|
||||
mode: {
|
||||
//"view": {
|
||||
//"dest": ".",
|
||||
//"sprite": "sprite_css_pictos.svg",
|
||||
//"bust": false
|
||||
//},
|
||||
|
||||
symbol: {
|
||||
dest: '.',
|
||||
sprite: 'sprite_symbol_pictos.svg'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
function svgSprite() {
|
||||
return (
|
||||
src('svg/**/*.svg')
|
||||
//.pipe(plumber())
|
||||
.pipe(gulpSvgSprite(config))
|
||||
.on('error', function(error) {
|
||||
console.log(error);
|
||||
})
|
||||
.pipe(dest('img'))
|
||||
);
|
||||
}
|
||||
|
||||
/*
|
||||
* SVG minifier
|
||||
*/
|
||||
var svgmin = require('gulp-svgmin');
|
||||
function svgMin() {
|
||||
return src('svg/*.svg')
|
||||
.pipe(svgmin())
|
||||
.pipe(dest('./svgmin'));
|
||||
}
|
||||
|
||||
/*
|
||||
* Exports des fonctions
|
||||
*/
|
||||
module.exports = {
|
||||
default: parallel(sass, jsConcatMinif, jsBabel),
|
||||
sass: sass,
|
||||
watch: parallel(watcherSass, watcherJsConcatMinif, watcherJsBabel),
|
||||
sprite: svgSprite,
|
||||
svgmin: svgMin
|
||||
};
|
||||
12
inclure/gamutable.html
Normal file
12
inclure/gamutable.html
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<link rel="stylesheet" href="[(#CHEMIN{css/gamutable.css}|timestamp)]" type="text/css" media="screen" title="no title" charset="utf-8">
|
||||
|
||||
<div id="app">
|
||||
<mon-tableau
|
||||
apiuri="spip.php?page=json_gamutable.json"
|
||||
:tparpage="[11,22,33,'tous']"
|
||||
ref="montableau"
|
||||
></mon-tableau>
|
||||
</div>
|
||||
|
||||
<script src="[(#CHEMIN{js/vue.js}|timestamp)]" type="text/javascript"></script>
|
||||
<script src="[(#CHEMIN{js/gamutable.js}|timestamp)]" type="text/javascript"></script>
|
||||
212
js/gamutable.es6.js
Normal file
212
js/gamutable.es6.js
Normal file
|
|
@ -0,0 +1,212 @@
|
|||
jQuery(function() {
|
||||
gamutable();
|
||||
//onAjaxLoad(gamutable);
|
||||
function gamutable() {
|
||||
$('#app').on('click', '.url_action', function(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
let url = $(this).attr('href');
|
||||
$.ajax({
|
||||
url: url,
|
||||
async: true
|
||||
}).done(function() {
|
||||
app.rechargerJson();
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
function recupJson(d) {
|
||||
try {
|
||||
return JSON.parse(d);
|
||||
} catch (e) {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
console.time('Chargement de VueJS AVANT Ajax');
|
||||
console.time('Chargement de VueJs APRES Ajax');
|
||||
Vue.nextTick(function() {
|
||||
console.timeEnd('Chargement de VueJS AVANT Ajax');
|
||||
});
|
||||
|
||||
let monTableau = {
|
||||
props: {
|
||||
tparpage: {
|
||||
type: Array,
|
||||
default: function() {
|
||||
return [10, 20, 50, 'Tous'];
|
||||
}
|
||||
},
|
||||
apiuri: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
objet: {
|
||||
type: String
|
||||
}
|
||||
},
|
||||
data: function() {
|
||||
return {
|
||||
message: `Hello Vue ! `,
|
||||
table: [],
|
||||
header: [],
|
||||
crayons: [],
|
||||
search: '',
|
||||
page: 1,
|
||||
parPage: this.tparpage[0],
|
||||
parPageSelect: this.tparpage[0],
|
||||
pages: [],
|
||||
triOrders: [],
|
||||
triProps: []
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.chargerJson();
|
||||
},
|
||||
computed: {
|
||||
tableau: function() {
|
||||
console.log('computed tableau');
|
||||
return this.pagination(
|
||||
this.table.filter(ligne => {
|
||||
if (this.search) {
|
||||
if (!Object.values(ligne).every(el => el.indexOf(this.search))) {
|
||||
return ligne;
|
||||
}
|
||||
} else {
|
||||
return ligne;
|
||||
}
|
||||
})
|
||||
);
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
tableau() {
|
||||
this.setPages();
|
||||
},
|
||||
parPageSelect(e) {
|
||||
if (!parseInt(e)) {
|
||||
this.parPage = this.table.length;
|
||||
} else {
|
||||
this.parPage = e;
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
chargerJson() {
|
||||
fetch(this.apiuri)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
let config = data.shift();
|
||||
this.header = config.header;
|
||||
this.crayons = config.crayons;
|
||||
this.table = data;
|
||||
Vue.nextTick(function() {
|
||||
console.timeEnd('Chargement de VueJs APRES Ajax');
|
||||
});
|
||||
})
|
||||
.catch(error => console.log(error));
|
||||
},
|
||||
setPages() {
|
||||
let nombreDePages = Math.ceil(this.table.length / this.parPage);
|
||||
this.pages = [];
|
||||
for (let index = 1; index <= nombreDePages; index++) {
|
||||
this.pages.push(index);
|
||||
}
|
||||
},
|
||||
pagination(tableau) {
|
||||
let page = this.page;
|
||||
let parPage = this.parPage;
|
||||
let from = page * parPage - parPage;
|
||||
let to = page * parPage;
|
||||
return tableau.slice(from, to);
|
||||
},
|
||||
afficher_crayons(name, id) {
|
||||
if (Object.keys(this.crayons).indexOf(name) !== -1) {
|
||||
return `crayon ${this.crayons[name]}-${name}-${id}`;
|
||||
}
|
||||
},
|
||||
tri(col, sens) {
|
||||
const i = this.triProps.indexOf(col);
|
||||
if (i !== -1) {
|
||||
this.triOrders[i] = sens;
|
||||
} else {
|
||||
this.triProps.push(col);
|
||||
this.triOrders.push(sens);
|
||||
}
|
||||
const orderBy = (arr, props, orders) =>
|
||||
arr.sort((a, b) =>
|
||||
props.reduce((acc, prop, i) => {
|
||||
if (acc === 0) {
|
||||
const [p1, p2] = orders && orders[i] === 'desc' ? [b[prop], a[prop]] : [a[prop], b[prop]];
|
||||
acc = p1 > p2 ? 1 : p1 < p2 ? -1 : 0;
|
||||
}
|
||||
return acc;
|
||||
}, 0)
|
||||
);
|
||||
this.table = orderBy(this.table, this.triProps, this.triOrders);
|
||||
},
|
||||
ordreActif(col, sens) {
|
||||
const i = this.triProps.indexOf(col);
|
||||
if (i !== -1) {
|
||||
if (this.triOrders[i] === sens) {
|
||||
return 'active';
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
template: `
|
||||
<div>
|
||||
<h3> {{ message }}</h3>
|
||||
<div class="table">
|
||||
<div class="gamutable--surTable">
|
||||
<select id="parPage" v-model="parPageSelect">
|
||||
<option v-for="v in tparpage" :key="v">{{v}}</option>
|
||||
</select>
|
||||
<input type="text" v-model="search" placeholder="Rechercher">
|
||||
</div>
|
||||
<table class="table table--zebra">
|
||||
<thead>
|
||||
<tr>
|
||||
<th v-for="(head,i) in header" :key="'head_'+i" :class="head">
|
||||
{{head}}
|
||||
<span class="iconeTri">
|
||||
<i class="fa fa-sort-asc" :class="ordreActif(head, 'asc')" aria-hidden="true" @click.stop="tri(head,'asc')"></i>
|
||||
<i class="fa fa-sort-desc":class="ordreActif(head, 'desc')" aria-hidden="true" @click.stop="tri(head,'desc')" ></i>
|
||||
</span>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="l in tableau" :key="l.id">
|
||||
<td v-for="(td,name, i) in l" :key="'td_'+i" :class="[afficher_crayons(name,l.id), name]" v-html="td">
|
||||
{{td}}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="gamutable--pagination">
|
||||
<div>{{table.length}} éléments</div>
|
||||
<div class="page-item">
|
||||
<button type="button" class="page-link" v-if="page != 1" @click="page=1"> Start </button>
|
||||
<button type="button" class="page-link" v-if="page != 1" @click="page--"> Previous </button>
|
||||
</div>
|
||||
<div class="page-item">
|
||||
<button type="button" class="page-link" v-for="pageNumber in pages.slice(page-1, page+5)" @click="page = pageNumber"> {{pageNumber}} </button>
|
||||
</div>
|
||||
<div class="page-item">
|
||||
<button type="button" @click="page++" v-if="page < pages.length" class="page-link"> Next </button>
|
||||
<button type="button" @click="page=pages.length" v-if="page < pages.length" class="page-link"> Last </button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>`
|
||||
};
|
||||
|
||||
let app = new Vue({
|
||||
el: '#app',
|
||||
components: { monTableau },
|
||||
methods: {
|
||||
rechargerJson() {
|
||||
this.$refs.montableau.chargerJson();
|
||||
}
|
||||
}
|
||||
});
|
||||
195
js/gamutable.js
Normal file
195
js/gamutable.js
Normal file
|
|
@ -0,0 +1,195 @@
|
|||
"use strict";
|
||||
|
||||
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
|
||||
|
||||
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
|
||||
|
||||
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 _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
||||
|
||||
jQuery(function () {
|
||||
gamutable(); //onAjaxLoad(gamutable);
|
||||
|
||||
function gamutable() {
|
||||
$('#app').on('click', '.url_action', function (e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
var url = $(this).attr('href');
|
||||
$.ajax({
|
||||
url: url,
|
||||
async: true
|
||||
}).done(function () {
|
||||
app.rechargerJson();
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
function recupJson(d) {
|
||||
try {
|
||||
return JSON.parse(d);
|
||||
} catch (e) {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
console.time('Chargement de VueJS AVANT Ajax');
|
||||
console.time('Chargement de VueJs APRES Ajax');
|
||||
Vue.nextTick(function () {
|
||||
console.timeEnd('Chargement de VueJS AVANT Ajax');
|
||||
});
|
||||
var monTableau = {
|
||||
props: {
|
||||
tparpage: {
|
||||
type: Array,
|
||||
default: function _default() {
|
||||
return [10, 20, 50, 'Tous'];
|
||||
}
|
||||
},
|
||||
apiuri: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
objet: {
|
||||
type: String
|
||||
}
|
||||
},
|
||||
data: function data() {
|
||||
return {
|
||||
message: "Hello Vue ! ",
|
||||
table: [],
|
||||
header: [],
|
||||
crayons: [],
|
||||
search: '',
|
||||
page: 1,
|
||||
parPage: this.tparpage[0],
|
||||
parPageSelect: this.tparpage[0],
|
||||
pages: [],
|
||||
triOrders: [],
|
||||
triProps: []
|
||||
};
|
||||
},
|
||||
mounted: function mounted() {
|
||||
this.chargerJson();
|
||||
},
|
||||
computed: {
|
||||
tableau: function tableau() {
|
||||
var _this = this;
|
||||
|
||||
console.log('computed tableau');
|
||||
return this.pagination(this.table.filter(function (ligne) {
|
||||
if (_this.search) {
|
||||
if (!Object.values(ligne).every(function (el) {
|
||||
return el.indexOf(_this.search);
|
||||
})) {
|
||||
return ligne;
|
||||
}
|
||||
} else {
|
||||
return ligne;
|
||||
}
|
||||
}));
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
tableau: function tableau() {
|
||||
this.setPages();
|
||||
},
|
||||
parPageSelect: function parPageSelect(e) {
|
||||
if (!parseInt(e)) {
|
||||
this.parPage = this.table.length;
|
||||
} else {
|
||||
this.parPage = e;
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
chargerJson: function chargerJson() {
|
||||
var _this2 = this;
|
||||
|
||||
fetch(this.apiuri).then(function (response) {
|
||||
return response.json();
|
||||
}).then(function (data) {
|
||||
var config = data.shift();
|
||||
_this2.header = config.header;
|
||||
_this2.crayons = config.crayons;
|
||||
_this2.table = data;
|
||||
Vue.nextTick(function () {
|
||||
console.timeEnd('Chargement de VueJs APRES Ajax');
|
||||
});
|
||||
}).catch(function (error) {
|
||||
return console.log(error);
|
||||
});
|
||||
},
|
||||
setPages: function setPages() {
|
||||
var nombreDePages = Math.ceil(this.table.length / this.parPage);
|
||||
this.pages = [];
|
||||
|
||||
for (var index = 1; index <= nombreDePages; index++) {
|
||||
this.pages.push(index);
|
||||
}
|
||||
},
|
||||
pagination: function pagination(tableau) {
|
||||
var page = this.page;
|
||||
var parPage = this.parPage;
|
||||
var from = page * parPage - parPage;
|
||||
var to = page * parPage;
|
||||
return tableau.slice(from, to);
|
||||
},
|
||||
afficher_crayons: function afficher_crayons(name, id) {
|
||||
if (Object.keys(this.crayons).indexOf(name) !== -1) {
|
||||
return "crayon ".concat(this.crayons[name], "-").concat(name, "-").concat(id);
|
||||
}
|
||||
},
|
||||
tri: function tri(col, sens) {
|
||||
var i = this.triProps.indexOf(col);
|
||||
|
||||
if (i !== -1) {
|
||||
this.triOrders[i] = sens;
|
||||
} else {
|
||||
this.triProps.push(col);
|
||||
this.triOrders.push(sens);
|
||||
}
|
||||
|
||||
var orderBy = function orderBy(arr, props, orders) {
|
||||
return arr.sort(function (a, b) {
|
||||
return props.reduce(function (acc, prop, i) {
|
||||
if (acc === 0) {
|
||||
var _ref = orders && orders[i] === 'desc' ? [b[prop], a[prop]] : [a[prop], b[prop]],
|
||||
_ref2 = _slicedToArray(_ref, 2),
|
||||
p1 = _ref2[0],
|
||||
p2 = _ref2[1];
|
||||
|
||||
acc = p1 > p2 ? 1 : p1 < p2 ? -1 : 0;
|
||||
}
|
||||
|
||||
return acc;
|
||||
}, 0);
|
||||
});
|
||||
};
|
||||
|
||||
this.table = orderBy(this.table, this.triProps, this.triOrders);
|
||||
},
|
||||
ordreActif: function ordreActif(col, sens) {
|
||||
var i = this.triProps.indexOf(col);
|
||||
|
||||
if (i !== -1) {
|
||||
if (this.triOrders[i] === sens) {
|
||||
return 'active';
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
template: "\n\t<div>\n\t\t<h3> {{ message }}</h3>\n\t\t<div class=\"table\">\n\t\t\t<div class=\"gamutable--surTable\">\n\t\t\t\t<select id=\"parPage\" v-model=\"parPageSelect\">\n\t\t\t\t\t<option v-for=\"v in tparpage\" :key=\"v\">{{v}}</option>\n\t\t\t\t</select>\n\t\t\t\t<input type=\"text\" v-model=\"search\" placeholder=\"Rechercher\">\n\t\t\t</div>\n\t\t\t<table class=\"table table--zebra\">\n\t\t\t\t<thead>\n\t\t\t\t\t<tr>\n\t\t\t\t\t\t<th v-for=\"(head,i) in header\" :key=\"'head_'+i\" :class=\"head\">\n\t\t\t\t\t\t\t{{head}}\n\t\t\t\t\t\t\t<span class=\"iconeTri\">\n\t\t\t\t\t\t\t\t<i class=\"fa fa-sort-asc\" :class=\"ordreActif(head, 'asc')\" aria-hidden=\"true\" @click.stop=\"tri(head,'asc')\"></i>\n\t\t\t\t\t\t\t\t<i class=\"fa fa-sort-desc\":class=\"ordreActif(head, 'desc')\" aria-hidden=\"true\" @click.stop=\"tri(head,'desc')\" ></i>\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</th>\n\t\t\t\t\t</tr>\n\t\t\t\t</thead>\n\t\t\t\t<tbody>\n\t\t\t\t\t<tr v-for=\"l in tableau\" :key=\"l.id\">\n\t\t\t\t\t\t<td v-for=\"(td,name, i) in l\" :key=\"'td_'+i\" :class=\"[afficher_crayons(name,l.id), name]\" v-html=\"td\">\n\t\t\t\t\t\t\t{{td}}\n\t\t\t\t\t\t</td>\n\t\t\t\t\t</tr>\n\t\t\t\t</tbody>\n\t\t\t</table>\n\t\t\t<div class=\"gamutable--pagination\">\n\t\t\t\t<div>{{table.length}} \xE9l\xE9ments</div>\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',
|
||||
components: {
|
||||
monTableau: monTableau
|
||||
},
|
||||
methods: {
|
||||
rechargerJson: function rechargerJson() {
|
||||
this.$refs.montableau.chargerJson();
|
||||
}
|
||||
}
|
||||
});
|
||||
43
json_gamutable.json.html
Normal file
43
json_gamutable.json.html
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
#HTTP_HEADER{Content-Type: application/json; charset=#CHARSET}
|
||||
[
|
||||
{
|
||||
"header":[
|
||||
"id",
|
||||
"titre",
|
||||
"date",
|
||||
"statut",
|
||||
"genre",
|
||||
"nom_souscripteur",
|
||||
"prenom",
|
||||
"date_naissance",
|
||||
"lieu_naissance",
|
||||
"representant_legal",
|
||||
"type",
|
||||
"email",
|
||||
"telephone",
|
||||
"adresse"
|
||||
],
|
||||
"crayons":{
|
||||
"titre" : "souscription",
|
||||
"prenom" : "souscription"
|
||||
}
|
||||
},
|
||||
<BOUCLE_souscriptions(SOUSCRIPTIONS){','}{0,12}>
|
||||
{
|
||||
"id": #ID_SOUSCRIPTION,
|
||||
"titre" : [(#TITRE|json_encode)],
|
||||
"date" : [(#DATE|affdate{d/m/Y}|json_encode)],
|
||||
"statut" : [(#INCLURE{fond=js/statut,statut,id_souscription}|json_encode)],
|
||||
"genre" : [(#GENRE|json_encode)],
|
||||
"nom_souscripteur" : [(#NOM_SOUSCRIPTEUR|json_encode)],
|
||||
"prenom" : [(#PRENOM|json_encode)],
|
||||
"date_naissance" : [(#DATE_NAISSANCE|affdate{d/m/Y}|json_encode)],
|
||||
"lieu_naissance" : [(#LIEU_NAISSANCE|json_encode)],
|
||||
"representant_legal" : [(#REPRESENTANT_LEGAL|json_encode)],
|
||||
"type" : [(#TYPE|json_encode)],
|
||||
"email" : [(#EMAIL|json_encode)],
|
||||
"telephone" : [(#TELEPHONE|json_encode)],
|
||||
"adresse" : [(#ADRESSE|json_encode)]
|
||||
}
|
||||
</BOUCLE_souscriptions>
|
||||
]
|
||||
|
|
@ -8,7 +8,7 @@ if (!defined('_ECRIRE_INC_VERSION')) {
|
|||
$GLOBALS[$GLOBALS['idx_lang']] = array(
|
||||
|
||||
// G
|
||||
'gamutable_description' => 'Affichage des \"table\" en utilisant vuejs',
|
||||
'gamutable_description' => "Affichage des <\\table> en utilisant vuejs",
|
||||
'gamutable_nom' => 'GamuTable',
|
||||
'gamutable_slogan' => '',
|
||||
);
|
||||
|
|
|
|||
43
package.json
Normal file
43
package.json
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
{
|
||||
"name": "starter_spip",
|
||||
"version": "1.0.0",
|
||||
"description": "les fichiers à intégrer dans un plugin squelette pour avoir ZPIP opérationnel + Knacss 7",
|
||||
"main": "gulpfile.js",
|
||||
"browserslist": [
|
||||
"last 1 version",
|
||||
"> 1%",
|
||||
"IE 10"
|
||||
],
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "ssh://git@git.gamuza.fr:2222/Gamuza/starter_SPIP.git"
|
||||
},
|
||||
"author": "tofulm at Gamuza",
|
||||
"license": "ISC",
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.6.3",
|
||||
"@babel/preset-env": "^7.6.3",
|
||||
"@types/jquery": "^3.3.31",
|
||||
"gulp": "^4.0.2",
|
||||
"gulp-babel": "^8.0.0",
|
||||
"gulp-concat": "^2.6.1",
|
||||
"gulp-notify": "^3.2.0",
|
||||
"gulp-regex-rename": "^0.1.0",
|
||||
"gulp-svg-sprite": "^1.5.0",
|
||||
"gulp-svgmin": "^2.2.0",
|
||||
"gulp-uglify": "^3.0.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"autoprefixer": "^9.6.4",
|
||||
"cssnano": "^4.1.10",
|
||||
"gulp-postcss": "^8.0.0",
|
||||
"gulp-sass": "^4.0.2",
|
||||
"gulp-sourcemaps": "^2.6.5",
|
||||
"postcss": "^7.0.18",
|
||||
"postcss-uncss": "^0.17.0",
|
||||
"uncss": "^0.17.2"
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue