# Leçon : Introduction au package autoform ## 1. Présentation du projet de base - Bootstrap 4 installé - Deux templates : expense_form et expense_list - Collection `Expenses` déclarée ```htmlmixed= <body> <h1>Welcome to Meteor!</h1> <div class="container"> {{> expense_form}} {{> expense_list}} </div> </body> <template name="expense_form"> <div class="card mb-3"> <div class="card-body"> Non implémenté </div> </div> </template> <template name="expense_list"> <table class="w-100 table table-bordered"> <thead> <tr> <th>Date</th> <th>Libellé</th> <th>Coût</th> </tr> </thead> <tbody> {{#each expense in expenses}} <tr> <td>{{getDisplayedDate expense.date}}</td> <td>{{expense.label}}</td> <td>{{expense.cost}} €</td> </tr> {{/each}} </tbody> </table> </template> ``` ```javascript= // client import 'bootstrap'; import { Template } from 'meteor/templating'; import { Expenses } from '../both/main'; import './main.html'; Template.expense_list.helpers({ expenses() { return Expenses.find({}, { sort: { date: -1 } }); } }); Template.registerHelper('getDisplayedDate', function (date) { return date.toLocaleDateString("fr-FR"); }); // both export const Expenses = new Mongo.Collection('expenses'); ``` ## 2. Installation des packages https://github.com/Meteor-Community-Packages/meteor-autoform Package NPM - simpl-schema Packages atmosphere - aldeed:autoform@6.3.0 - imajus:autoform-bootstrap4 - fortawesome:fontawesome ## 3. Déclaration de la collection et de son schéma ```javascript= // Both import SimpleSchema from 'simpl-schema'; SimpleSchema.extendOptions(['autoform']); export const expensesSchema = new SimpleSchema({ label: { type: String, min: 5, max: 30 }, cost: { min: 0, type: Number }, date: { type: Date } }, { tracker: Tracker }); ``` ## 4. Utilisation du quickForm ```htmlmixed= <template name="expense_form"> <div class="card mb-3"> <div class="card-body"> {{> quickForm id="create-expense" schema=Schemas.Expenses type="insert" collection=Collections.Expenses}} </div> </div> </template> ``` ```javascript= // Client Template.registerHelper('Collections', function () { return { Expenses: Expenses }; }); Template.registerHelper('Schemas', function () { return { Expenses: expensesSchema }; }); ``` ```javascript= AutoForm.setDefaultTemplate('bootstrap4'); ``` ## 5. Utilisation du quickForm sécurisée Retirer le package `insecure` ```javascript= Meteor.methods({ createExpense(expense) { expensesSchema.validate(expense); Expenses.insert(expense); } }); ``` ```htmlmixed= <template name="expense_form"> <div class="card mb-3"> <div class="card-body"> {{> quickForm id="create-expense" schema=Schemas.Expenses type="method" meteormethod="createExpense"}} </div> </div> </template> ``` ## 6. Utilisation du template autoform ```htmlmixed= <template name="expense_form"> <div class="card mb-3"> <div class="card-body"> {{#autoForm id="create-expense" schema=Schemas.Expenses type="method" meteormethod="createExpense"}} <div class="row"> <div class="col-4">{{> afQuickField name='label'}}</div> <div class="col-3">{{> afQuickField name='cost'}}</div> <div class="col-5">{{> afQuickField name='date'}}</div> </div> <button type="submit" class="btn btn-success">Submit</button> {{/autoForm}} </div> </div> </template> ```