open-nomad/ui/stories/components/table.stories.js

import hbs from 'htmlbars-inline-precompile';
import productMetadata from '../../app/utils/styleguide/product-metadata';

import EmberObject, { computed } from '@ember/object';

import { getOwner } from '@ember/application';
import { on } from '@ember/object/evented';
import Controller from '@ember/controller';

export default {
  title: 'Components/Table',
};

/**
 * The Ember integration for Storybook renders a container component with no routing,
 * which means things that need query parameters, like sorting and pagination, won’t work.

 * This initialiser turns on routing and accepts a controller definition that gets wired up
 * to a generated `storybook` route. The controller is attached to the Storybook component
 * as the `controller` property so its query parameters are accessible from the template.
 */
function injectRoutedController(controllerClass) {
  return on('init', function () {
    let container = getOwner(this);
    container.register('controller:storybook', controllerClass);

    let routerFactory = container.factoryFor('router:main');
    routerFactory.class.map(function () {
      this.route('storybook');
    });

    /* eslint-disable-next-line ember/no-private-routing-service */
    let router = container.lookup('router:main');
    router.initialURL = 'storybook';
    router.startRouting(true);

    this.set('controller', container.lookup('controller:storybook'));
  });
}

let longList = [
  {
    city: 'New York',
    growth: 0.048,
    population: '8405837',
    rank: '1',
    state: 'New York',
  },
  {
    city: 'Los Angeles',
    growth: 0.048,
    population: '3884307',
    rank: '2',
    state: 'California',
  },
  {
    city: 'Chicago',
    growth: -0.061,
    population: '2718782',
    rank: '3',
    state: 'Illinois',
  },
  {
    city: 'Houston',
    growth: 0.11,
    population: '2195914',
    rank: '4',
    state: 'Texas',
  },
  {
    city: 'Philadelphia',
    growth: 0.026,
    population: '1553165',
    rank: '5',
    state: 'Pennsylvania',
  },
  {
    city: 'Phoenix',
    growth: 0.14,
    population: '1513367',
    rank: '6',
    state: 'Arizona',
  },
  {
    city: 'San Antonio',
    growth: 0.21,
    population: '1409019',
    rank: '7',
    state: 'Texas',
  },
  {
    city: 'San Diego',
    growth: 0.105,
    population: '1355896',
    rank: '8',
    state: 'California',
  },
  {
    city: 'Dallas',
    growth: 0.056,
    population: '1257676',
    rank: '9',
    state: 'Texas',
  },
  {
    city: 'San Jose',
    growth: 0.105,
    population: '998537',
    rank: '10',
    state: 'California',
  },
  {
    city: 'Austin',
    growth: 0.317,
    population: '885400',
    rank: '11',
    state: 'Texas',
  },
  {
    city: 'Indianapolis',
    growth: 0.078,
    population: '843393',
    rank: '12',
    state: 'Indiana',
  },
  {
    city: 'Jacksonville',
    growth: 0.143,
    population: '842583',
    rank: '13',
    state: 'Florida',
  },
  {
    city: 'San Francisco',
    growth: 0.077,
    population: '837442',
    rank: '14',
    state: 'California',
  },
  {
    city: 'Columbus',
    growth: 0.148,
    population: '822553',
    rank: '15',
    state: 'Ohio',
  },
  {
    city: 'Charlotte',
    growth: 0.391,
    population: '792862',
    rank: '16',
    state: 'North Carolina',
  },
  {
    city: 'Fort Worth',
    growth: 0.451,
    population: '792727',
    rank: '17',
    state: 'Texas',
  },
  {
    city: 'Detroit',
    growth: -0.271,
    population: '688701',
    rank: '18',
    state: 'Michigan',
  },
  {
    city: 'El Paso',
    growth: 0.194,
    population: '674433',
    rank: '19',
    state: 'Texas',
  },
  {
    city: 'Memphis',
    growth: -0.053,
    population: '653450',
    rank: '20',
    state: 'Tennessee',
  },
  {
    city: 'Seattle',
    growth: 0.156,
    population: '652405',
    rank: '21',
    state: 'Washington',
  },
  {
    city: 'Denver',
    growth: 0.167,
    population: '649495',
    rank: '22',
    state: 'Colorado',
  },
  {
    city: 'Washington',
    growth: 0.13,
    population: '646449',
    rank: '23',
    state: 'District of Columbia',
  },
  {
    city: 'Boston',
    growth: 0.094,
    population: '645966',
    rank: '24',
    state: 'Massachusetts',
  },
  {
    city: 'Nashville-Davidson',
    growth: 0.162,
    population: '634464',
    rank: '25',
    state: 'Tennessee',
  },
  {
    city: 'Baltimore',
    growth: -0.04,
    population: '622104',
    rank: '26',
    state: 'Maryland',
  },
  {
    city: 'Oklahoma City',
    growth: 0.202,
    population: '610613',
    rank: '27',
    state: 'Oklahoma',
  },
  {
    city: 'Louisville/Jefferson County',
    growth: 0.1,
    population: '609893',
    rank: '28',
    state: 'Kentucky',
  },
  {
    city: 'Portland',
    growth: 0.15,
    population: '609456',
    rank: '29',
    state: 'Oregon',
  },
  {
    city: 'Las Vegas',
    growth: 0.245,
    population: '603488',
    rank: '30',
    state: 'Nevada',
  },
  {
    city: 'Milwaukee',
    growth: 0.003,
    population: '599164',
    rank: '31',
    state: 'Wisconsin',
  },
  {
    city: 'Albuquerque',
    growth: 0.235,
    population: '556495',
    rank: '32',
    state: 'New Mexico',
  },
  {
    city: 'Tucson',
    growth: 0.075,
    population: '526116',
    rank: '33',
    state: 'Arizona',
  },
  {
    city: 'Fresno',
    growth: 0.183,
    population: '509924',
    rank: '34',
    state: 'California',
  },
  {
    city: 'Sacramento',
    growth: 0.172,
    population: '479686',
    rank: '35',
    state: 'California',
  },
  {
    city: 'Long Beach',
    growth: 0.015,
    population: '469428',
    rank: '36',
    state: 'California',
  },
  {
    city: 'Kansas City',
    growth: 0.055,
    population: '467007',
    rank: '37',
    state: 'Missouri',
  },
  {
    city: 'Mesa',
    growth: 0.135,
    population: '457587',
    rank: '38',
    state: 'Arizona',
  },
  {
    city: 'Virginia Beach',
    growth: 0.051,
    population: '448479',
    rank: '39',
    state: 'Virginia',
  },
  {
    city: 'Atlanta',
    growth: 0.062,
    population: '447841',
    rank: '40',
    state: 'Georgia',
  },
  {
    city: 'Colorado Springs',
    growth: 0.214,
    population: '439886',
    rank: '41',
    state: 'Colorado',
  },
  {
    city: 'Omaha',
    growth: 0.059,
    population: '434353',
    rank: '42',
    state: 'Nebraska',
  },
  {
    city: 'Raleigh',
    growth: 0.487,
    population: '431746',
    rank: '43',
    state: 'North Carolina',
  },
  {
    city: 'Miami',
    growth: 0.149,
    population: '417650',
    rank: '44',
    state: 'Florida',
  },
  {
    city: 'Oakland',
    growth: 0.013,
    population: '406253',
    rank: '45',
    state: 'California',
  },
  {
    city: 'Minneapolis',
    growth: 0.045,
    population: '400070',
    rank: '46',
    state: 'Minnesota',
  },
  {
    city: 'Tulsa',
    growth: 0.013,
    population: '398121',
    rank: '47',
    state: 'Oklahoma',
  },
  {
    city: 'Cleveland',
    growth: -0.181,
    population: '390113',
    rank: '48',
    state: 'Ohio',
  },
  {
    city: 'Wichita',
    growth: 0.097,
    population: '386552',
    rank: '49',
    state: 'Kansas',
  },
  {
    city: 'Arlington',
    growth: 0.133,
    population: '379577',
    rank: '50',
    state: 'Texas',
  },
];

export let Standard = () => {
  return {
    template: hbs`
      <h5 class="title is-5">Table</h5>
      <ListTable @source={{shortList}} as |t|>
        <t.head>
          <th>Name</th>
          <th>Language</th>
          <th>Description</th>
        </t.head>
        <t.body @key="model.name" as |row|>
          <tr>
            <td>{{row.model.name}}</td>
            <td>{{row.model.lang}}</td>
            <td>{{row.model.desc}}</td>
          </tr>
        </t.body>
      </ListTable>
      <p class="annotation">Tables have airy designs with a minimal amount of borders. This maximizes their utility.</p>
      `,
    context: {
      shortList: productMetadata,
    },
  };
};

export let Search = () => {
  return {
    template: hbs`
      <h5 class="title is-5">Table search</h5>
      <div class="boxed-section">
        <div class="boxed-section-head">
          Table Name
          <SearchBox
            @searchTerm={{mut controller.searchTerm}}
            @placeholder="Search..."
            @class="is-inline pull-right"
            @inputClass="is-compact" />
        </div>
        <div class="boxed-section-body {{if controller.filteredShortList.length "is-full-bleed"}}">
          {{#if controller.filteredShortList.length}}
            <ListTable @source={{controller.filteredShortList}} as |t|>
              <t.head>
                <th>Name</th>
                <th>Language</th>
                <th>Description</th>
              </t.head>
              <t.body @key="model.name" as |row|>
                <tr>
                  <td>{{row.model.name}}</td>
                  <td>{{row.model.lang}}</td>
                  <td>{{row.model.desc}}</td>
                </tr>
              </t.body>
            </ListTable>
          {{else}}
            <div class="empty-message">
              <h3 class="empty-message-headline">No Matches</h3>
              <p class="empty-message-body">No products match your query.</p>
            </div>
          {{/if}}
        </div>
      </div>
      <p class="annotation">Tables compose with boxed-section and boxed-section composes with search box.</p>
      `,
    context: {
      controller: EmberObject.extend({
        searchTerm: '',

        filteredShortList: computed('searchTerm', function () {
          let term = this.searchTerm.toLowerCase();
          return productMetadata.filter((product) =>
            product.name.toLowerCase().includes(term)
          );
        }),
      }).create(),
    },
  };
};

export let SortableColumns = () => {
  return {
    template: hbs`
      <h5 class="title is-5">Table with sortable columns</h5>
      <ListTable @source={{sortedShortList}} @sortProperty={{controller.sortProperty}} @sortDescending={{controller.sortDescending}} as |t|>
        <t.head>
          <t.sort-by @prop="name">Name</t.sort-by>
          <t.sort-by @prop="lang" @class="is-2">Language</t.sort-by>
          <th>Description</th>
        </t.head>
        <t.body @key="model.name" as |row|>
          <tr>
            <td>{{row.model.name}}</td>
            <td>{{row.model.lang}}</td>
            <td>{{row.model.desc}}</td>
          </tr>
        </t.body>
      </ListTable>
      <p class="annotation">The list-table component provides a <code>sort-by</code> contextual component for building <code>link-to</code> components with the appropriate query params.</p>
      <p class="annotation">This leaves the component stateless, relying on data to be passed down and sending actions back up via the router (via link-to).</p>
      `,
    context: {
      injectRoutedController: injectRoutedController(
        Controller.extend({
          queryParams: ['sortProperty', 'sortDescending'],
          sortProperty: 'name',
          sortDescending: false,
        })
      ),

      sortedShortList: computed(
        'controller.{sortProperty,sortDescending}',
        function () {
          let sorted = productMetadata.sortBy(
            this.get('controller.sortProperty') || 'name'
          );
          return this.get('controller.sortDescending')
            ? sorted.reverse()
            : sorted;
        }
      ),
    },
  };
};

export let MultiRow = () => {
  return {
    template: hbs`
      <h5 class="title is-5">Multi-row Table</h5>
      <ListTable @source={{sortedShortList}} @sortProperty={{controller.sortProperty}} @sortDescending={{controller.sortDescending}} @class="is-striped" as |t|>
        <t.head>
          <t.sort-by @prop="name">Name</t.sort-by>
          <t.sort-by @prop="lang">Language</t.sort-by>
        </t.head>
        <t.body @key="model.name" as |row|>
          <tr>
            <td>{{row.model.name}}</td>
            <td>{{row.model.lang}}</td>
          </tr>
          <tr>
            <td colspan="2">{{row.model.desc}}</td>
          </tr>
        </t.body>
      </ListTable>
      <p class="annotation">The list-table component attempts to be as flexible as possible. For this reason, <code>t.body</code> does not provide the typical <code>tr</code> element. It's sometimes desired to have multiple elements per record.</p>
      `,
    context: {
      injectRoutedController: injectRoutedController(
        Controller.extend({
          queryParams: ['sortProperty', 'sortDescending'],
          sortProperty: 'name',
          sortDescending: false,
        })
      ),

      sortedShortList: computed(
        'controller.{sortProperty,sortDescending}',
        function () {
          let sorted = productMetadata.sortBy(
            this.get('controller.sortProperty') || 'name'
          );
          return this.get('controller.sortDescending')
            ? sorted.reverse()
            : sorted;
        }
      ),
    },
  };
};

export let Pagination = () => {
  return {
    template: hbs`
      <h5 class="title is-5">Table pagination</h5>
      <ListPagination @source={{longList}} @size={{5}} @page={{controller.currentPage}} as |p|>
        <ListTable @source={{p.list}} @class="with-foot" as |t|>
          <t.head>
            <th class="is-1">Rank</th>
            <th>City</th>
            <th>State</th>
            <th>Population</th>
            <th>Growth</th>
          </t.head>
          <t.body @key="model.rank" as |row|>
            <tr>
              <td>{{row.model.rank}}</td>
              <td>{{row.model.city}}</td>
              <td>{{row.model.state}}</td>
              <td>{{row.model.population}}</td>
              <td>{{format-percentage row.model.growth total=1}}</td>
            </tr>
          </t.body>
        </ListTable>
        <div class="table-foot">
          <nav class="pagination">
            <span class="bumper-left">U.S. City population and growth from 2000-2013</span>
            <div class="pagination-numbers">
              {{p.startsAt}}&ndash;{{p.endsAt}} of {{longList.length}}
            </div>
              <p.prev @class="pagination-previous"> &lt; </p.prev>
              <p.next @class="pagination-next"> &gt; </p.next>
              <ul class="pagination-list"></ul>
          </nav>
        </div>
      </ListPagination>
      <p class="annotation">Pagination works like sorting: using <code>link-to</code>s to set a query param.</p>
      <p class="annotation">Pagination, like Table, is a minimal design. Only a next and previous button are available. The current place in the set of pages is tracked by showing which slice of items is currently shown.</p>
      <p class="annotation">The pagination component exposes first and last components (for jumping to the beginning and end of a list) as well as pageLinks for generating links around the current page.</p>
      `,
    context: {
      injectRoutedController: injectRoutedController(
        Controller.extend({
          queryParams: ['currentPage'],
          currentPage: 1,
        })
      ),
      longList,
    },
  };
};

export let RowLinks = () => {
  return {
    template: hbs`
      <h5 class="title is-5">Table row links</h5>
      <ListTable @source={{shortList}} as |t|>
        <t.head>
          <th>Name</th>
          <th>Language</th>
          <th>Description</th>
        </t.head>
        <t.body @key="model.name" as |row|>
          <tr class="is-interactive">
            <td><a href="javascript:;" class="is-primary">{{row.model.name}}</a></td>
            <td>{{row.model.lang}}</td>
            <td>{{row.model.desc}}</td>
          </tr>
        </t.body>
      </ListTable>
      <p class="annotation">It is common for tables to act as lists of links, (e.g., clients list all allocations, each row links to the allocation detail). The helper class <code>is-interactive</code> on the <code>tr</code> makes table rows have a pointer cursor. The helper class <code>is-primary</code> on the <code>a</code> element in a table row makes the link bold and black instead of blue. This makes the link stand out less, since the entire row is a link.</p>
      <p class="annotation">
        A few rules for using table row links:
        <ol>
          <li>The <code>is-primary</code> cell should always be the first cell</li>
          <li>The <code>is-primary</code> cell should always contain a link to the destination in the form of an <code>a</code> element. This is to support opening a link in a new tab.</li>
          <li>The full row should transition to the destination on click. This is to improve the usability of a table by creating a larger click area.</li>
        </ol>
      </p>
      `,
    context: {
      shortList: productMetadata,
    },
  };
};

export let CellLinks = () => {
  return {
    template: hbs`
      <h5 class="title is-5">Table cell links</h5>
      <ListTable @source={{shortList}} as |t|>
        <t.head>
          <th>Name</th>
          <th>Language</th>
          <th>Description</th>
        </t.head>
        <t.body @key="model.name" as |row|>
          <tr>
            <td><a href={{row.model.link}} target="_parent">{{row.model.name}}</a></td>
            <td>{{row.model.lang}}</td>
            <td>{{row.model.desc}}</td>
          </tr>
        </t.body>
      </ListTable>
      <p class="annotation">Links in table cells are just links.</p>
      `,
    context: {
      shortList: productMetadata,
    },
  };
};

export let CellDecorations = () => {
  return {
    template: hbs`
      <h5 class="title is-5">Table cell decorations</h5>
      <ListTable @source={{shortList}} as |t|>
        <t.head>
          <th>Name</th>
          <th>Language</th>
          <th>Description</th>
        </t.head>
        <t.body @key="model.name" as |row|>
          <tr>
            <td><a href={{row.model.link}}>{{row.model.name}}</a></td>
            <td class="nowrap">
              <span class="color-swatch
                {{if (eq row.model.lang "ruby") "swatch-6"}}
                {{if (eq row.model.lang "golang") "swatch-5"}}" />
              {{row.model.lang}}
            </td>
            <td>{{row.model.desc}}</td>
          </tr>
        </t.body>
      </ListTable>
      <p class="annotation">Small icons and accents of color make tables easier to scan.</p>
      `,
    context: {
      shortList: productMetadata,
    },
  };
};

export let CellIcons = () => {
  return {
    template: hbs`
      <h5 class="title is-5">Table cell icons</h5>
      <ListPagination @source={{longList}} @size={{5}} @page={{controller.currentPage}} as |p|>
        <ListTable @source={{p.list}} @class="with-foot" as |t|>
          <t.head>
            <th class="is-narrow"></th>
            <th class="is-1">Rank</th>
            <th>City</th>
            <th>State</th>
            <th>Population</th>
            <th>Growth</th>
          </t.head>
          <t.body @key="model.rank" as |row|>
            <tr>
              <td class="is-narrow">
                {{#if (lt row.model.growth 0)}}
                  {{x-icon "alert-triangle" class="is-warning"}}
                {{/if}}
              </td>
              <td>{{row.model.rank}}</td>
              <td>{{row.model.city}}</td>
              <td>{{row.model.state}}</td>
              <td>{{row.model.population}}</td>
              <td>{{format-percentage row.model.growth total=1}}</td>
            </tr>
          </t.body>
        </ListTable>
        <div class="table-foot">
          <nav class="pagination">
            <span class="bumper-left">U.S. City population and growth from 2000-2013. Cities with negative growth denoted.</span>
            <div class="pagination-numbers">
              {{p.startsAt}}&ndash;{{p.endsAt}} of {{longList.length}}
            </div>
              <p.prev @class="pagination-previous"> &lt; </p.prev>
              <p.next @class="pagination-next"> &gt; </p.next>
              <ul class="pagination-list"></ul>
          </nav>
        </div>
      </ListPagination>
      `,
    context: {
      injectRoutedController: injectRoutedController(
        Controller.extend({
          queryParams: ['currentPage'],
          currentPage: 1,
        })
      ),
      longList,
    },
  };
};