Please wait...
Page is loading

Data Grid

asdlkjh dslkjfahds k

Getting started

To use data list require it and dependencies in your own js file

//= require vendor/jquery-1.10.2
//= require lib/backport/jquery-1.10.2-params-patch
//= require vendor/jquery.to_json
//= require vendor/sortable
//= require vendor/bs_data_list

and in your sass file

//= require vendor/bs_data_list

Default behaviour

The helper will create a data grid wireframe tied to a DataSource. the grid API is saved on the wireframe's root element data attribute and accessible via $.BsDataList.helpers.defaultAPI(). The only required argument is the URL where the DataSource is initialized. The content of the grid is set in an accompanying _grid partial which is rendered as part of the Data Source response.

  • Not content-scrollable
  • header passed as block to the helper, it is user's resposibility to include expand icon if desired
  • Only supported toolbar action is 'reload', currently impossible to forgo.
Anime character list
Loading
.border
  =bs_data_list_wire_frame(plugins_data_grid_anime_characters_path, scrollable: 'lg', export_formats: %i[xls]) do
    .d-flex.align-items-center
      .data-grid-title
        =link_to 'javascript:;', 'data-toggle': 'full-screen' do
          %i.far.fa-expand-alt
        Anime character list

      .ml-auto.d-flex
        .dropdown.ml-2
          =button_tag type:'button', class: 'btn btn-light', data: {toggle: 'dropdown', display: "static"} do
            %i.far.fa-ellipsis-h
          .dropdown-menu.dropdown-menu-right
            =link_to import_plugins_data_grid_anime_characters_path, class: 'dropdown-item', remote: true, method: :POST do
              %i.far.fa-file-import
              import
            =button_tag type:'button', class: 'dropdown-item',
                    data: {toggle: 'remote-modal', target: '#ranks-modal', 'remote-modal-url' => plugins_data_grid_anime_character_ranks_path(format: 'fbox')} do
              %i.fas.fa-dumbbell
              Ranks

        =button_tag type:'button', class: 'btn btn-primary ml-2',
                    data: {toggle: 'remote-modal', target: '#new-anime-modal', 'remote-modal-url' => new_plugins_data_grid_anime_character_path(format: 'fbox')} do
          %i.far.fa-plus
          New
_grid.html
-department_mapping = {'Konohagakure': {name: 'Hidden Leaf Village', icon_class: 'fa-leaf'}, 'Sunagakure': {name: 'Sand Village', icon_class: 'fa-sack'}, 'Kara': {icon_class: 'fa-hockey-mask'},
                       'Ryūchi Cave': {icon_class: 'fa-snake'}, 'Kirigakure': {name: 'Village Hidden by Mist', icon_class: 'fa-smoke'}, 'Kumogakure': {name: 'Hidden Cloud Village', icon_class: 'fa-cloud'},
                       'Iwagakure': {name: 'Hidden Stone Village', icon_class: 'fa-chimney'}, 'Hoshigakure': {name: 'Village Hidden Among Stars', icon_class: 'fa-stars'}, 'Yumegakure': {name: 'Village Hidden Among Dreams', icon_class: 'fa-snooze'},
                       'Kusagakure': {name: 'Village Hidden in the Grass', icon_class: 'fa-seedling'}, 'Takigakure': {name: 'Village Hidden by a Waterfall', icon_class: 'fa-water'}, 'Land of Water': {icon_class: 'fa-tint'},
                       'Land of Fire': {icon_class: 'fa-fire'}, 'Land of Hot Water': {icon_class: 'fa-heat'}, 'Land of Sound': {icon_class: 'fa-music'}, 'Land of the Sea': {icon_class: 'fa-ship'},
                       'Land of Tea': {icon_class: 'fa-mug-tea'}, 'Land of Iron': {icon_class: 'fa-sword'}, 'Land of Wind': {icon_class: 'fa-wind'}, 'Mount Myōboku': {icon_class: 'fa-frog'},
                       'Land of Snow': {icon_class: 'fa-snowflake'}, 'Land of Forests': {icon_class: 'fa-trees'}, 'Land of Waves': {icon_class: 'fa-wave-sine'}}

-rank_mapping = {'Kage': {icon_class: 'fa-crown', badge_class: 'badge-warning'},
                 'Jōnin': {badge_class: 'badge-primary'},
                 'Anbu': {badge_class: 'badge-dark'},
                 'Chūnin': {badge_class: 'badge-info'},
                 'Genin': {badge_class: 'badge-success'},
                 'Tokubetsu Jōnin': {badge_class: 'badge-primary'}}

-gb.list_view do |builder|
  -builder.selection_mode_actions( {url: reanimation_plugins_data_grid_anime_characters_path(value: false), method: :POST, class: 'far fa-skull', label: 'kill'},
                                   {url: reanimation_plugins_data_grid_anime_characters_path(value: true), method: :POST, class: 'far fa-seedling', label: 'reanimate'},
                                   {url: mass_destroy_plugins_data_grid_anime_characters_path, method: :DELETE, class: 'far fa-trash', label: 'delete', confirm: t('application.are_you_sure')})

  -builder.row_cells do |obj|
    %td.anime-character
      .row.no-gutters
        -if obj.photo.present?
          -anime_character_image = obj.photo.sub(/\/revision.*$/, '')
          =link_to 'javascript:;', class: 'col-auto',
                                   style: "background-image: url('#{anime_character_image}')",
                                   data: {toggle: 'remote-modal', 'remote-modal-url': preview_plugins_data_grid_anime_character_path(obj, format: 'fbox') , target: '#anime_characters-photo-modal'} do
            %i.far.fa-search-plus

        -else
          .col-auto.border

        .col
          %h5.mb-0
            =link_to obj.name, 'javascript:;', class: 'text-decoration-none',
                     data: {toggle: 'remote-modal', target: '#remote-modal',
                            'remote-modal-url': edit_plugins_data_grid_anime_character_path(obj, format: 'fbox')}

          .d-flex.flex-wrap.align-items-center

            -if obj.sex == 'Male'
              .badge.badge-warning.mr-2
                %i.fas.fa-male
                Male

            -elsif obj.sex == 'Female'
              .badge.badge-info.mr-2
                %i.fas.fa-female
                Female

            -if obj.anime_character_rank&.name.present?
              -rank = rank_mapping[obj.anime_character_rank.name.to_sym]
              -rank_badge_class = rank.present? && rank[:badge_class] || 'badge-info'
              -rank_icon_class = rank.present? && rank[:icon_class]
              .badge{class: rank_badge_class}
                -if rank_icon_class.present?
                  %i.fas{class: rank_icon_class}
                =obj.anime_character_rank.name
            -else
              .badge.badge-light.border
                ='no rank'

            .badge.badge-light.border
              =obj.age.present? ? "age: #{obj.age}" : 'age: ?'

            -if obj.alive == false
              .badge.badge-secondary.mr-2
                %i.fas.fa-skull-crossbones
                dead

            -elsif obj.alive == true
              .badge.badge-success.mr-2
                %i.fas.fa-seedling
                alive


          .small.text-muted.mt-2
            -if obj.department.present?
              -department = department_mapping[obj.department.to_sym]
              -if department.present?
                -if department[:icon_class]
                  %i.fas{class: department[:icon_class]}
                =department[:name] || truncated_text(obj.department, 25)
              -else
                =truncated_text(obj.department, 25)
            -else
              ='Unknown'

-gb.sorting_columns do |scb|
  -scb.model_cols_group do |grp|
    -%i(id age name department surname_or_name).each do |attr|
      -grp.column attr
  -scb.relation_cols_group 'anime_character_rank' do |grp|
    -grp.column :name

-gb.filters_modal_body do |fmb|
  -# Note that this is not best-practice because it precludes searching for dead characters
  -fmb.base_model_group label: false do |mgb|
    -mgb.build_items :toggler, %i(alive)
  -fmb.base_model_group label: false do |mgb|
    -mgb.build_items :checkbox_group,
      {anime_character_rank_id:  AnimeCharacterRank.select(:id, :name).to_a.map{|rank| [rank.name, rank.id]},
      department: department_mapping.map{|val,h| [h[:name] || val, val.to_s] }}
    -mgb.build_items :range_group, %i(age)
On this page