Create a custom tinder-like validation view

Please be sure of your agent type and version and pick the right documentation accordingly.

Node.js

This is the documentation of the forest-express-sequelize and forest-express-mongoose Node.js agents that will soon reach end-of-support.

forest-express-sequelize v9 and forest-express-mongoose v9 are replaced by @forestadmin/agent v1.

Please check your agent type and version and read on or switch to the right documentation.

Ruby on Rails

This is still the latest Ruby on Rails documentation of the forest_liana agent, you’re at the right place, please read on.

Python

This is the documentation of the django-forestadmin Django agent that will soon reach end-of-support.

If you’re using a Django agent, notice that django-forestadmin v1 is replaced by forestadmin-agent-django v1.

If you’re using a Flask agent, go to the forestadmin-agent-flask v1 documentation.

Please check your agent type and version and read on or switch to the right documentation.

PHP

This is the documentation of the forestadmin/laravel-forestadmin Laravel agent that will soon reach end-of-support.

If you’re using a Laravel agent, notice that forestadmin/laravel-forestadmin v1 is replaced by forestadmin/laravel-forestadmin v3.

If you’re using a Symfony agent, go to the forestadmin/symfony-forestadmin v1 documentation.

Please check your agent type and version and read on or switch to the right documentation.

Create a custom tinder-like validation view

This example shows you how you can implement a time-saving profile validation view using keyboard keys to trigger approve/reject actions.

In our example, we want to Approve or Reject new customers profiles and more specifically:

• We want to preview information from the user's profile

• We want to approve a customer by pressing the ArrowRight key

• We want to reject a customer by pressing the ArrowLeft key

How it works

Models definition

Here is the definition of the underlying model for this view

module.exports = (sequelize, DataTypes) => {
  const { Sequelize } = sequelize;
  const customerValidations = sequelize.define(
    'customerValidations',
    {
      firstname: {
        type: DataTypes.STRING,
      },
      lastname: {
        type: DataTypes.STRING,
      },
      email: {
        type: DataTypes.STRING,
      },
      createdAt: {
        type: DataTypes.DATE,
      },
      status: {
        type: DataTypes.STRING,
      },
      avatar: {
        type: DataTypes.STRING,
      },
    },
    {
      tableName: 'customers',
      underscored: true,
      schema: process.env.DATABASE_SCHEMA,
    }
  );

  return customerValidations;
};

Smart view definition

Learn more about smart views. This file contains the HTML, JS and CSS needed to build the view.

Template

<div class="c-smart-view">
  <div class="c-smart-view__content">
    {{#if (eq @recordsCount 0)}}
      <span class="c-smart-view_icon fa fa-{{@collection.iconOrDefault}} fa-5x"></span>
      <h1>
        {{@collection.pluralizedDisplayName}}
      </h1>
      <p>
        There are no items to process.
      </p>
    {{/if}}
    {{#unless (eq @recordsCount 0)}}
      <div class="wrapper-view" {{did-insert this.setDefaultCurrentRecord}}>
        <div class="wrapper-list">
          {{#each @records as |record|}}
              <div class="list--item align-left {{if (eq @records.firstObject record) 'selected'}}">
                <div class="list--item__values">
                  <h3><span>name :</span> {{record.forest-firstname}} {{record.forest-lastname}}</h3>
                  <p><span>email :</span> {{record.forest-email}}</p>
                  <p>{{moment-format record.forest-createdAt 'LLL'}}</p>
                </div>
              </div>
          {{/each}}
        </div>
        <div class="wrapper-content">
         <h1>
            {{@recordsCount}} items to process
          </h1>
          <p>
            Press <i class="fa fa-arrow-right"></i> to approve
          </p>
          <p>
            Press <i class="fa fa-arrow-left"></i> to reject
          </p>
          <div class="record-container" >
            <div class="c-beta-label c-beta-label--top ember-view l-dmb">
              <div class= "c-beta-label__label">Name</div>
              <p class="c-row-value align-left">{{@records.firstObject.forest-firstname}} {{@records.firstObject.forest-lastname}}</p>
            </div>
            <div class="c-beta-label c-beta-label--top ember-view l-dmb">
              <div class= "c-beta-label__label">Email</div>
              <p class="c-row-value align-left">{{@records.firstObject.forest-email}}</p>
            </div>
            <div class= "row-value-image">
              <img src="{{@records.firstObject.forest-avatar}}" width="300" height="400">
            </div>
            <div class="c-beta-button c-beta-button--secondary" onclick={{ action 'triggerSmartAction' @collection 'reject' @records.firstObject}}>Reject</div>
            <div class="c-beta-button c-beta-button--primary" onclick={{ action 'triggerSmartAction' @collection 'approve' @records.firstObject}}>Approve</div>
          </div>
        </div>
      </div>
    {{/unless}}
  </div>
</div>