Esup Evaluator et Edit-Evaluator

Evaluator et Edit-Evaluator sont des webcomponents s'appuyant sur la librairie Lit pour afficher/modifier un évaluateur.

Ces webcomponents utilisent les webcomponents suivants :

• @gip-recia/subject-infos
• @gip-recia/subject-search-button

Installation

1. Installation via npm :

npm install @gip-recia/evaluator

2. Importation du composant :

Dans un module JavaScript :

import '@gip-recia/evaluator';

Dans une page HTML :

<script type="module">
  import './path/to/index.js'
</script>

Ou directement la verion minifiée :

<script src="./path/to/evaluator.bundle.min.js"></script>

3. Ajout des composants sur une page HTML :

const evaluator = document.createElement('esup-evaluator');
evaluator.evaluator = {...};
evaluator.config = {...};
document.body.appendChild(evaluator);

const editEvaluator = document.createElement('esup-edit-evaluator');
editEvaluator.evaluator = {...};
editEvaluator.config = {...};
document.body.appendChild(editEvaluator);

Webcomponent Evaluator

Paramètres

Le webcomponent Evaluator accepte les paramètres suivants :

• evaluator - Objet contenant les données de l'évaluator à afficher.

Les propriétés de l'objet varient selon le context :

| Nom | Type | Obligatoire | Description | | ---------- | ------ | ----------- | ----------------------------------------------------------------------------------------------------------------- | | class | String | Oui | Type d'évaluateur (valeurs possibles : OPERATOR/AUTHENTICATED/USERATTRIBUTES/USERMULTIVALUEDATTRIBUTES/USERGROUP) | | evaluators | Array | Non | Tableau des évaluateurs enfants si l'évaluateur est une opération | | type | String | Non | Type d'opération si l'évaluateur est une opération (valeurs possibles : OR/AND/NOT) | | group | String | Non | Identifiant du groupe si l'évaluateur est un groupe | | attribute | String | Non | Attribut de l'évaluateur si l'évaluateur est une personne | | mode | String | Non | Mode de l'évaluateur si l'évaluateur est une personne | | value | String | Non | Valeur de l'évaluateur si l'évaluateur est une personne |

• simple - Booléen indiquant si l'évaluateur est affiché en mode simple ou étendu.

• config - Objet contenant la configuration du composant.

Propriétés disponibles :

| Nom | Type | Obligatoire | Description | | ------------------ | -------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | lang | String | Non | Langue du composant. Valeur initialement disponible : 'fr', 'en'. Possibilité de rajouter des langues via la propriété labels | | labels | Object | Non | Permet de surcharger les labels affichés ou de définir de nouvelles langues. | | resolveKey | Boolean | Non | Indique s'il faut recharger les données de la personne/du groupe si nécessaire. Par défaut: true. | | getSubjectInfos | Function | Oui | Fonction permettant de récupérer les données d'une personne/d'un groupe. Paramètres : keyType et keyId de la personne/du groupe. Retourne : une promise avec les infos de la personne/du groupe. | | userDisplayedAttrs | Array | Oui | Tableau des propriétés de la personne/du groupe à afficher. |

• onSubjectClicked - Fonction appelée lors du clic sur une personne/un groupe.

Variables CSS

Modification de style

Les variables CSS définies dans le webcomponent @gip-recia/subject-infos peuvent être utilisées pour personnaliser le webcomponent.

Webcomponent Edit-Evaluator

Paramètres

Le webcomponent Edit-Evaluator accepte les paramètres suivants :

• evaluator - Objet contenant les données de l'évaluator à modifier.

Les propriétés de l'objet varient selon le context :

| Nom | Type | Obligatoire | Description | | ---------- | ------ | ----------- | ----------------------------------------------------------------------------------------------------------------- | | class | String | Oui | Type d'évaluateur (valeurs possibles : OPERATOR/AUTHENTICATED/USERATTRIBUTES/USERMULTIVALUEDATTRIBUTES/USERGROUP) | | evaluators | Array | Non | Tableau des évaluateurs enfants si l'évaluateur est une opération | | type | String | Non | Type d'opération si l'évaluateur est une opération | | group | String | Non | Identifiant du groupe si l'évaluateur est un groupe | | attribute | String | Non | Attribut de l'évaluateur si l'évaluateur est une personne | | mode | String | Non | Mode de l'évaluateur si l'évaluateur est une personne | | value | String | Non | Valeur de l'évaluateur si l'évaluateur est une personne |

• config - Objet contenant la configuration du composant.

Propriétés disponibles :

| Nom | Type | Obligatoire | Description | | ------------------ | -------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | lang | String | Non | Langue du composant. Valeur initialement disponible : 'fr', 'en'. Possibilité de rajouter des langues via la propriété labels | | labels | Object | Non | Permet de surcharger les labels affichés ou de définir de nouvelles langues. | | resolveKey | Boolean | Non | Indique s'il faut recharger les données de la personne/du groupe si nécessaire. Par défaut: true. | | getSubjectInfos | Function | Oui | Fonction permettant de récupérer les données d'une personne/d'un groupe. Paramètres : keyType et keyId de la personne/du groupe. Retourne : une promise avec les infos de la personne/du groupe. | | userDisplayedAttrs | Array | Oui | Tableau des propriétés de la personne/du groupe à afficher. | | operators | Array | Oui | Liste des opérateurs disponibles. | | stringEvaluators | Array | Oui | Liste des modes disponibles. | | userAttributes | Array | Oui | Liste des attributs utilisateur disponibles. | | treeGroupDatas | Array | Oui | Tableau des donnés affichées dans l'arborescence des groupes (cf. propriété datas du composant @gip-recia/js-tree, les noeuds de l'arbre doivent contenir en plus les propriétés a_attr.model.modelId.keyId et a_attr.model.modelId.KeyType représentant l'identifiant et le type du noeud). | | userDisplayedAttrs | Array | Oui | Tableau des propriétés de la personne/du groupe à afficher. | | searchUsers | Function | Oui | Fonction retournant une promise permettant de rechercher des personnes à partir d'un texte. | | getGroupMembers | Function | Oui | Fonction retournant une promise permettant de rechercher les personnes appartenant à un groupe. |

• onModification - Fonction appelée lors de la modification de l'évaluateur.

• onSubjectClicked - Fonction appelée lors du clic sur une personne/un groupe.

Fonctions

Plusieurs fonctions sont disponibles pour intéragir avec le webcomponent :

• isValid - Permet de s'avoir si l'évaluateur modifié est valide.

Variables CSS

Modification de style

Par défaut le webcomponent Edit-Evaluator s'appuie sur les fonts Font-Awesome pour afficher des icônes (via des pseudo-elements). Il est cependant possible de personnaliser les icônes affichées via les propriétés suivantes :

| Nom | Description | | ------------------------- | -------------------------------------------------------------------------------------------------------- | | --icon-remove-font-family | Permet de configurer la famille de police de caractères de l'icône du bouton de suppression | | --icon-remove-font-weight | Permet de configurer poids de la police de caractères de l'icône du bouton de suppression | | --icon-remove-content | Caractère unicode dans la famille de police de caractères utilisée pour l'icône du bouton de suppression |

Les variables CSS définies dans les webcomponents @gip-recia/subject-infos et @gip-recia/subject-search-button peuvent être utilisées pour personnaliser le webcomponent.

Utilisation

Exemple de configuration des variables css dans un fichier de style :

esup-edit-evaluator {
  --icon-remove-font-family: 'Font Awesome 5 Free';
  --icon-remove-font-weight: 900;
  --icon-remove-font-content: '\\f128';
}

Test des webcomponents

Pour tester les webcomponents, exécuter la commande suivante :

npm start

Une page avec les webcomponents est alors disponible à l'adresse http://localhost:8000.