0.0.31 • Published 1 year ago
pw-components-jsx-dev v0.0.31
pw-components-jsx-dev
Installation
- Avec yarn:
yarn add pw-components-js-dev
- Avec npm:
npm install pw-components-js-dev
Utilisation
git clone https://github.com/Flo976/IAEplateforme.git -b prepare2/sf/PW-115
DatatableObject
DatatableObject permet de definir les proprietés du tableau
Etape 1 : Instanciation
import {DatatableObject as Datatable} from "pw-components-jsx-dev";
var datatable = new Datatable();
Etape 2 : Définition des entêtes
datatable.head.fields = [
{
key: "firstname",
text: "Prénom",
},
{
key: "email",
text: <u>Email</u>,
render: this.orderable,
},
{
key: "phone",
text: "Phone"
render: ({ getText, field, datatable }) => {
return (
<th class={Style.sorting}>
<i>{getText()}</i>
</th>
);
}
},
];
Etape 3 : Définition des actions
Les actions sont dans la propriété head du datatable
datatable.head.fields = [
{
text: "Actions",
renderBody: ({ line }) => {
return (
<td>
<span
class="btn btn-primary"
onClick={() => {
alert(`Modification de ${line.firstname}`);
}}
>
Modifier
</span>
<span
class="btn btn-danger"
onClick={() => {
alert(`Suppression de ${line.firstname}`);
}}
>
Supprimer
</span>
</td>
);
},
},
];
Etape 4 : Définition des propriétés facultatives
// Nombre de line par page
datatable.pagination = 10
// Page actuelle
datatable.activePage = 1
// URL de recuperation des données
datatable.url = window.test_api_listing
Etape 5 : Personnalisation du design de la table
datatable.render = ({ head, body, Style:Stl }) => {
return (
<table class={classNames(Stl.table, "votre_class")}>
{head()}
{body()}
</table>
);
}
Etape 6 : Exemple d’utilisation
import Style from "./LIST_USER_TABLE.scss?module";
import classNames from "classnames";
import {DatatableObject as Datatable} from "pw-components-jsx-dev";
import {Datatable as Dt} from "pw-components-jsx-dev";
class LIST_USER_TABLE {
static datatable
static getMethods() {
return {
...Dt.getMethods(),
setupTable() {
if(LIST_USER_TABLE.datatable){
return LIST_USER_TABLE.datatable
}
var datatable = new Datatable();
LIST_USER_TABLE.datatable = datatable
datatable.instance = this;
datatable.head.fields = [
{
key: "firstname",
text: "Prénom",
render: this.orderable,
},
{
key: "email",
text: "Email",
render: this.orderable,
},
{
key: "phone",
text: <u>phone</u>,
render:this.orderable
},
{
text: "Actions",
renderBody: ({ line }) => {
return (
<td>
<span
class="btn btn-primary"
onClick={() => {
alert(
`Modification de ${line.firstname}`
);
}}
>
Modifier
</span>
<span
class="btn btn-danger"
onClick={() => {
alert(
`Suppression de ${line.firstname}`
);
}}
>
Supprimer
</span>
</td>
);
},
},
];
datatable.render = ({ Style:Stl, head, body }) => {
return (
<table class={classNames(Stl.table, Style.table)}>
{head()}
{body()}
</table>
);
}
datatable.pagination = 10
datatable.activePage = 1
datatable.url = window.test_api_listing
return datatable;
},
};
}
}
export default LIST_USER_TABLE;
Utilisation datatable sur le composant
- Avec recherche
- Avec filtrage
- Avec Ajout
import { C } from "vue/helper/V01Component.jsx";
import classNames from "classnames";
import Components from "common/classes/Components.jsx";
import LIST_USER_TABLE from "common/structure/TABLE/LIST_USER_TABLE.jsx";
import MODAL_USER_FILTER from "common/structure/TABLE/modal/MODAL_USER_FILTER.jsx";
import MODAL_CREATE_USER from "common/structure/TABLE/modal/MODAL_CREATE_USER.jsx";
import PwLoading from "vue/components/core/PwLoading/PwLoading.jsx";
export default C.make({
...Components.getMethods(),
...LIST_USER_TABLE.getMethods(),
$render() {
var datatable = this.setupTable();
var {
fieldFilter,
fieldCreate,
buttonCreate
search,
} = this.config;
search.onSearch = (params = {}) => {
var { value } = params;
datatable.activePage = 1;
datatable.key = value;
datatable.load();
};
var openModalFilter = () => {
var modal = showModal(MODAL_USER_FILTER, {
fieldFilter,
datatable,
});
};
var resetFilters = () => {
datatable.activePage = 1;
datatable.filters = "";
datatable.load();
};
var openModalAjouter = () => {
var modal = showModal(MODAL_CREATE_USER, {
fieldCreate,
buttonCreate,
});
};
var renderButtonFilter = () => {
var reset = () =>{
if (datatable.filters && datatable.filters.length) {
return (
<button class="btn btn-secondary" onClick={resetFilters}>
Annuler les filtres
</button>
);
}
return null;
}
return (
<span>
<button class="btn btn-primary" onClick={openModalFilter}>
Filter
</button>
{reset()}
</span>
);
};
return (
<div class={classNames("")}>
<div class="p-3">
<div class="row">
<div class="col-9">
<span
class="btn btn-primary"
onClick={openModalAjouter}
>
Ajouter
</span>
{renderButtonFilter()}
</div>
<div class="col-3">{this.$search(search)}</div>
<div class="col-12">
<div class="position-relative">
{this.drawTable(datatable)}
<PwLoading
ref="loading"
config={{
isVisible: datatable.isLoading,
hasConfig:true
}}
/>
</div>
</div>
</div>
</div>
</div>
);
},
});
common/functions/modal/modalFunction.js
import { setChildView } from "vue/helper/renderVue";
function showModal(component, config) {
var { onShow=() => {}} = config
setChildView("#app_modal_wrapper", component, config);
config.instance.$$$show();
onShow(config.instance)
return config.instance;
}
export {
showModal
}
Modal de filtrage
import { C } from "vue/helper/V01Component.jsx";
import classNames from "classnames";
import { PwModalMethodes } from "common/functions/modal/PwModalMethodes.jsx";
import Components from "common/classes/Components.jsx";
export default C.make({
...Components.getMethods(),
...PwModalMethodes.getMethodsJsx(),
$render() {
var {
fieldFilter,
datatable,
} = this.config;
var {
category
} = fieldFilter
var applyFilter = () => {
var categoryInstance = category;
var run = () =>{
var category = categoryInstance.value;
var subcategory = $('[name="mf_subcategory"]').val();
var filters = [];
if (category && category.length) {
filters.push({ category });
}
if (subcategory && subcategory.length) {
filters.push({ subcategory });
}
datatable.activePage = 1;
datatable.filters = json_encode(filters);
datatable.load();
hideModalFilter();
}
run()
};
var hideModalFilter = () => {
this.$$$hide();
};
return (
<div class="modal fade" ref="modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Filtrage</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="#">
<div class="my-1">
{this.$select(category)}
</div>
<div class="my-1">
<label
class="mr-sm-2"
for="inlineFormCustomSelect"
>
Sous-catégorie
</label>
<select
ref="mf_subcategory"
class="custom-select mr-sm-2"
name="mf_subcategory"
>
<option value="">
Tous les sous-catégories
</option>
<option value="id-sub-category-1">
Maths
</option>
<option value="id-sub-category-2">
A
</option>
<option value="id-sub-category-3">
B
</option>
</select>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>
<button
type="button"
class="btn btn-primary"
onClick={applyFilter}
>
Filtrer
</button>
</div>
</div>
</div>
</div>
);
},
});
Modal d’ajout
import { C } from "vue/helper/V01Component.jsx";
import classNames from "classnames";
import { PwModalMethodes } from "common/functions/modal/PwModalMethodes.jsx";
import Components from "common/classes/Components.jsx";
export default C.make({
...Components.getMethods(),
...PwModalMethodes.getMethodsJsx(),
$render() {
var {
fieldCreate,
buttonCreate:button,
search,
} = this.config;
var {
firstname,
lastname,
email,
phone,
password,
confirmPassword
} = fieldCreate
return (
<div class="modal fade" ref="modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Ajouter un utilisateur</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="#">
{this.$input(lastname)}
{this.$input(firstname)}
{this.$phone(phone)}
{this.$input(email)}
{this.$password(password)}
{this.$password(confirmPassword)}
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>
{this.$button(button)}
</div>
</div>
</div>
</div>
);
},
});
Dépendances
- @babel/polyfill
- @vue/babel-helper-vue-jsx-merge-props
- @vue/babel-preset-jsx
- classnames
- core-js
- @babel/cli
- @babel/core
- @babel/preset-env
0.0.30
1 year ago
0.0.31
1 year ago
0.0.29
1 year ago
0.0.28
1 year ago
0.0.27
1 year ago
0.0.26
1 year ago
0.0.25
1 year ago
0.0.24
1 year ago
0.0.23
1 year ago
0.0.22
1 year ago
0.0.21
1 year ago
0.0.20
1 year ago
0.0.19
1 year ago
0.0.18
1 year ago
0.0.17
1 year ago
0.0.16
1 year ago
0.0.15
1 year ago
0.0.14
1 year ago
0.0.13
1 year ago
0.0.12
1 year ago
0.0.11
1 year ago
0.0.10
1 year ago
0.0.9
1 year ago
0.0.8
1 year ago
0.0.7
1 year ago
0.0.6
1 year ago
0.0.5
1 year ago
0.0.4
1 year ago
0.0.3
1 year ago
0.0.2
1 year ago
0.0.1
1 year ago