Create a Shipping 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 Shipping view

component.js

import Component from '@glimmer/component';
import { action, computed } from '@ember/object';
import { tracked } from '@glimmer/tracking';
import { guidFor } from '@ember/object/internals';
import {
  triggerSmartAction,
  deleteRecords,
  getCollectionId,
  loadExternalStyle,
  loadExternalJavascript,
} from 'client/utils/smart-view-utils';

export default class extends Component {
  @tracked currentRecord = null;

  get status() {
    switch (this.currentRecord?.get('forest-shipping_status')) {
      case 'Being processed':
        return 'one';
      case 'Ready for shipping':
        return 'two';
      case 'In transit':
        return 'three';
      case 'Shipped':
        return 'four';
      default:
        return null;
    }
  }

  @action
  setDefaultCurrentRecord() {
    if (!this.currentRecord) {
      this.currentRecord = this.args.records.firstObject;
    }
  }

  @action
  selectRecord(record) {
    this.currentRecord = record;
  }

  @action
  triggerSmartAction(...args) {
    return triggerSmartAction(this, ...args);
  }

  @action
  deleteRecords(...args) {
    return deleteRecords(this, ...args);
  }
}

template.hbs

<style>
  /* Wrapper styles */
   .wrapper-view {
       background: #F2F6FA;
       width: 100%;
       display: flex;
       border: 1px solid #F2F6FA;
       border-radius: 5px
  }
   .wrapper-list {
       min-width: 330px;
       height: 100vh;
       background:#F2F6FA;
       border-right: 1px solid #D9DDE1;
       overflow: scroll
  }
   .wrapper-card {
       width: 100%;
       margin: 30px;
       background: #FFF;
       padding: 20px;
       display: flex;
       flex-direction: column;
       border-radius: 4px;
       -moz-border-radius: 4px;
       -webkit-border-radius: 4px;
       box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.15);
       -moz-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.15);
       -webkit-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.15);
  }
  /* List styles */
   .list--header {
       background: #FFF;
       padding: 14px 30px;
       height: 66px;
       display: flex;
       align-items: center;
       border-bottom: 1px solid #D9DDE1;
  }
   form {
  }
   form.list-options {
       align-self: center;
  }
   form.list-options select {
       background: #F2F6FA;
       border: 1px solid #ADB8C6;
       width: 167px;
       height: 38px;
       font-size: 14px;
       padding: 14px;
  }
   a {
       text-decoration: none;
  }
   .list--item {
       background: #FFF;
       border-bottom: 1px solid #D9DDE1;
       display: flex;
       flex-flow: row wrap;
       justify-content: space-between;
       background: #FFF;
       padding: 14px 30px;
       position: relative;
  }
  /* use this 'selected' to show selected color */
   .list--item.selected::before {
       content: '';
       width: 4px;
       height: 100%;
       margin: 0;
       padding: 0;
       background: #7A6ADC;
       position: absolute;
       top: 0;
       left: 0;
  }
   .list--item__values-left {
       color: #647A93;
  }
   .list--item__values-left h3 {
       font-size: 14px;
       font-weight: bold;
       padding: 2px 0;
  }
   .list--item__values-left h3 span {
       font-size: 10px;
       text-transform: uppercase;
  }
   .list--item__values-left p {
       font-size: 10px;
       padding: 2px 0;
  }
   .list--item__values-left p span {
       text-transform: uppercase;
  }
   .list--item__values-right {
       display: flex;
       align-items: center;
       justify-content: center;
  }
   .list--item__values-right p {
       color: #647A93;
       font-size: 10px;
       align-self: flex-start;
       padding: 2px 0;
       margin: 0;
  }
  /* Card styles */
   .card--title {
       padding: 0;
       margin-bottom: 40px;
  }
   .card--title h2 {
       margin: 0;
       padding: 0;
       color: #303B47;
  }
   .card--title small {
       margin: 0;
       padding: 0;
  }
   .card--gaugebar {
       display: flex;
       flex-flow: row wrap;
       width: 100%;
  }
   .gaugebar {
       width: 100%;
       display: flex;
       align-items: center;
       justify-content: space-between;
       margin-bottom: 40px;
  }
   .gaugebar--points {
       display: flex;
       align-items: flex-start;
       justify-content: space-between;
       height: 50px;
  }
   .gaugebar--points img {
       width: 42px;
       margin: 0 10px;
  }
   .gaugebar--points__information {
       font-size: 12px;
       margin: 0;
       height: 50px;
  }
   .gaugebar--points__information p {
       max-width: 370px;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
  }
   .gaugebar--bar {
       background: #f2f6fa;
       height: 30px;
       width: 100%;
       margin: 0;
       padding: 0;
       position: relative;
       border-radius: 100px;
       -moz-border-radius: 100px;
       -webkit-border-radius: 100px;
  }
   .gaugebar--bar__active {
       background: #54bd7e;
       position: absolute;
       top: 0;
       left: 0;
       width: 50%;
       height: 30px;
       transition: all 900ms ease;
       border-radius: 100px;
       -moz-border-radius: 100px;
       -webkit-border-radius: 100px;
  }
   .gaugebar--bar__active.one {
       width: 5%;
       transition: all 900ms ease;
  }
   .gaugebar--bar__active.two {
       width: 45%;
       transition: all 900ms ease;
  }
   .gaugebar--bar__active.three {
       width: 80%;
       transition: all 900ms ease;
  }
   .gaugebar--bar__active.four {
       width: 100%;
       transition: all 900ms ease;
  }
   .gaugebar--bar__active.four::after {
       content: 'DELIVERED';
       position: absolute;
       top: -50%;
       right: 0;
       font-size: 12px;
       transition: all 900ms ease;
  }
   .gaugebar--bar__active::before{
       content: '';
       background: #459565;
       width: 30px;
       height: 30px;
       position: absolute;
       right: 0;
       border-radius: 50%;
       -moz-border-radius: 50%;
       -webkit-border-radius: 50%;
  }
   .gaugebar--information {
       width: 100%;
       display: flex;
       flex-flow: row wrap;
       flex-direction: row;
       align-items: center;
       justify-content: space-between;
       margin-top: 10px;
  }
   .gaugebar--information__start p, .gaugebar--information__middle p, .gaugebar--information__end p {
       text-transform: uppercase;
       font-size: 10px;
  }
   .gaugebar--information__end p {
       text-align: right;
  }
   .green {
       color: #54BD7E;
  }
   .gaugebar--error {
       background: #FFF;
       border-radius: 4px;
       padding: 20px;
       display: flex;
       flex-direction: column;
       margin-top: 30px;
       box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.15);
       -moz-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.15);
       -webkit-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.15);
  }
   .gaugebar--error p {
       font-size: 14px;
       color: #899AAD;
       margin-bottom: 10px;
  }
   .gaugebar--error p.error {
       color: #FF9A76;
       text-transform: uppercase;
  }
   .gaugebar--error a.btn {
       color: #FFF;
       padding: 8px 24px;
       border-radius: 2px;
  }
   .gaugebar--error a.btn-info {
       background: #3789E4;
  }
   .gaugebar--error a.btn-info:hover {
       background: #287BD8;
       transition: all 900ms ease;
  }
</style>

<div class="wrapper-view" {{did-insert this.setDefaultCurrentRecord}}>
  <div class="wrapper-list">
    {{#each @records as |record|}}
      <a href="#" {{on 'click' (fn this.selectRecord record)}}>
        <div class="list--item {{if (eq this.currentRecord record) 'selected'}}">
          <div class="list--item__values-left">
            <h3><span>to :</span> {{record.forest-customer.forest-firstname}} {{record.forest-customer.forest-lastname}}</h3>
            <p><span>order ID</span> : {{record.id}}</p>
            <p><span>status</span>  : {{record.forest-shipping_status}}</p>
          </div>
          <div class="list--item__values-right">
            <p>{{moment-format record.forest-created_at 'LLL'}}</p>
          </div>
        </div>
      </a>
    {{/each}}
  </div>
  <div class="wrapper-card">
    <div class="card--title">
      <h2>Order to {{this.currentRecord.forest-customer.forest-firstname}} {{this.currentRecord.forest-customer.forest-lastname}}</h2>
      <small>ID: {{this.currentRecord.id}}</small>
    </div>
    <div class="card--gaugebar">
      <div class="gaugebar">
        <div class="gaugebar--points">
          <img src={{this.currentRecord.forest-product.forest-picture}} alt="">
          <div class="gaugebar--points__information">
            <p>Product: {{this.currentRecord.forest-product.forest-label}}</p>
            <p>Customer: {{this.currentRecord.forest-customer.forest-firstname}} {{this.currentRecord.forest-customer.forest-lastname}}</p>
          </div>
        </div>
      </div>
      <div class="gaugebar--bar">
        <!-- use class 'full' to show full bar with order delivered -->
        <div class="gaugebar--bar__active {{this.status}}"></div>
      </div>
      <div class="gaugebar--information">
        <div class="gaugebar--information__one green">
          <p>Being processed</p>
          <p>{{moment-format this.currentRecord.forest-being_processed_at 'LLL'}}</p>
        </div>
        <div class="gaugebar--information__two {{if this.currentRecord.forest-ready_for_shipping_at 'green'}}">
          <p>Ready for shipping</p>
          {{#if this.currentRecord.forest-ready_for_shipping_at}}
            <p>{{moment-format this.currentRecord.forest-ready_for_shipping_at 'LLL'}}</p>
          {{/if}}
        </div>
        <div class="gaugebar--information__three {{if this.currentRecord.forest-in_transit_at 'green'}}">
          <p>In transit</p>
          {{#if this.currentRecord.forest-in_transit_at}}
            <p>{{moment-format this.currentRecord.forest-in_transit_at 'LLL'}}</p>
          {{/if}}
        </div>
        <div class="gaugebar--information__four {{if this.currentRecord.forest-shipped_at 'green'}}">
          <p>Shipped</p>
          {{#if this.currentRecord.forest-shipped_at}}
            <p>{{moment-format this.currentRecord.forest-shipped_at 'LLL'}}</p>
          {{/if}}
        </div>
      </div>
    </div>
  </div>
</div>