# j-ListForm

> j-ListForm : NOUVEAU : délai {Numéro} délai initial pour l'affichage des détails (par défaut : 1000 ms) ; NOUVEAU : composant.add() ouvre un formulaire pour créer un enregistrement

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: fr
Content-SHA256: bba56e7698960aa9c497e65d2ffd4859937cf3e11f2a42a57dc5670516524dce
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

__Configuration__ :

- `autofocus {String/Boolean}` concentre le premier élément d'entrée, `string` signifie un sélecteur personnalisé (par défaut : `false`)
- Texte de liste vide `empty {String}` (par défaut : `---`)
- `default {Boolean}` exécute la méthode `DEFAULT()` pour la portée du formulaire (par défaut : `true`)
- Le contrôle `required {Boolean}` sera "obligatoire" (par défaut : `false`)
- `enter {Boolean}` permet d'utiliser `enter` comme soumission (par défaut : `false`)
- `disabled {Boolean}` désactive le contrôle (par défaut : `false`)
- `formclass {String}` une classe personnalisée pour le conteneur de formulaires
- `itemclass {String}` une classe personnalisée pour le conteneur d'articles
- `create {String}` un lien vers une fonction `function(empty_object, callback(DEFAULT_ITEM_OBJECT), arr)` (la valeur `null` ignore la création)
- `submit {String}` un lien vers une fonction `function(form_data, callback(NEW_DATA), arr, item_ref_in_items)` (la valeur `null` ignore la mise à jour)
- `update {String}` un lien vers une fonction `function(form_data, callback(NEW_DATA), arr, item_ref_in_items)` (la valeur `null` ignore la mise à jour)
- `remove {String}` un lien vers une fonction `function(remove_item, callback(really_remove?), arr)`
- `selector {String}` un sélecteur jQuery pour template personnalisé (en dehors du composant). Fonctionne comme `custom template` dans [data-binding](https://wiki.totaljs.com/jcomponent/08-data-binding/)
- `footertop {Boolean}` déplace le pied de page en haut du composant (par défaut : `false`)
- `move {String}` un lien vers une fonction `function(items)`
- `newbie {String}` un nom de propriété pour chaque nouvel élément (il contiendra toujours la valeur `true`)
- `plugin {String}` un nom de plugin personnalisé à l'intérieur du composant (par défaut : `component.ID`)
- `invalidform {Boolean}` désactive le composant `j-Validate` si le `j-ListForm` est en mode édition (par défaut : `false`)
- __NOUVEAU__ : `delay {Number}` délai initial d'affichage des détails (par défaut : `1000` ms)

Le composant doit avoir défini 3 modèles enveloppés dans `<script type="text/html">` :

- `1` en premier - avec un modèle Tangular pour le rendu de l'élément
- `2` deuxième - un formulaire avec des composants (le formulaire sera enveloppé dans une portée isolée)
- Pied de page `3` - un pied de page avec bouton pour l'article `create`

__Bon à savoir :__

Le composant surveille un événement de clic sur tous les boutons avec l'attribut `name` :

- `name="submit"` effectue la soumission/sauvegarde des données dans le modèle
- `name="update"` effectue la soumission/sauvegarde des données dans le modèle
- `name="remove"` supprime l'élément actuel du modèle
- `name="cancel"` annule l'édition
- `name="create"` crée un formulaire vide
- `form` contient la classe `ui-listform-new` lors de la création d'un nouvel élément

__Boutons de liste :__

- `name="remove"` supprime l'élément
- `name="up"` déplace l'élément vers le haut
- `name="down"` déplace l'élément vers le bas

__Méthodes :__

- __NOUVEAU__ : `component.add()` ouvre un formulaire de création d'enregistrement

Utilisez-le avec `<ui-component name="listform">`. Lorsque le composant n'est pas encore chargé, jComponent le télécharge lors de la première utilisation depuis l'adresse dans `DEF.fallback` (le CDN Componentator par défaut). Auteur : Peter Širka. Source : le référentiel de composants Componentator, licence MIT.

```html example.html
<style>
	.ui-listform-item { height: 26px; line-height: 26px; overflow: hidden; padding: 0 5px; }
	button { background-color: white; border-radius: 2px; border: 1px solid #E0E0E0; font-size: 12px; height: 28px; line-height: 27px; padding: 0 10px; }
	button i { margin-right: 5px; }
	button:disabled { color: gray; background-color: #F8F8F8; }
	.ui-dark button { background-color: #303030; border-color: #454545; }
	.ui-dark button:disabled { background-color: #252525; color: #404040; }
</style>

<div style="width:400px">

	<ui-component name="listform" path="users" config="autofocus:1">

		<!-- LIST RENDERING -->
		<script type="text/html">
			<div>
				<div class="pull-right">
					<button name="up"><i class="ti ti-arrow-up"></i></button>
					<button name="down"><i class="ti ti-arrow-down"></i></button>
					<button name="remove"><i class="ti ti-remove"></i></button>
				</div>
				{{ name }}
			</div>
		</script>

		<!-- FORM RENDERING -->
		<script type="text/html">
			<div class="padding">
				<ui-component name="input" path="?.name" config="required:1" default="''" class="m">Name</ui-component>
				<ui-component name="validate" path="?">
					<button name="submit"><i class="ti ti-save"></i>Save</button>
					<button name="remove">Remove</button>
					<button name="cancel">Cancel</button>
				</ui-component>
			</div>
		</script>

		<!-- FOOTER -->

		<script type="text/html">
			<div style="margin-top:10px"><button name="create"><i class="ti ti-plus-circle green"></i>Create new</button></div>
		</script>

	</ui-component>
	<hr />
	<ui-bind path="users" config="text:STRINGIFY(value)" style="font-family:monospace" class="block"></ui-bind>

</div>

<script>

	var users = [{ name: 'Total.js' }, { name: 'Flow' }, { name: 'jComponent' }];

</script>
```