volt-table 0.1.0

data/app/table/views/footers/index.html

@@ -0,0 +1,14 @@
+<:Body>
+  <div class="row">
+    <div class="col-xs-12 col-sm-9">
+      <:pagination total="{{ attrs.table_size }}" per_page="{{ params._per_page }}" />
+    </div>
+    <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3 infoBar" style="padding-left:0px;">
+      <div class="infos">
+        Showing {{ start_offset+1 }} - {{ last_item }} of {{ attrs.table_size }}
+        <div>
+          <small>Filtered from a total of {{ attrs.total_size }}</small>
+        </div>
+      </div>
+    </div>
+  </div>

data/app/table/views/headers/index.html

@@ -0,0 +1,62 @@
+<:Body>
+  <div class="row table-toolbar">
+    <div class="col-sm-12">
+      <div class="input-group">
+        <div class="input-group">
+          <span e-click="toggle_popover" class="fa fa-search input-group-addon">
+          <div class="popover fade right in" role="tooltip" id="popover">
+            <div class="arrow" style="top: 75px"></div>
+            <h3 class="popover-title">Search Help</h3>
+            <div class="popover-content">
+              <b>' | '</b> - or <br />
+              <b>', '</b> - and<br>
+              {{ search_fields.each do |field| }}
+              <b>{{ field['search'] }}:</b> {{field['title']}}<br>
+              {{ end }}
+            </div>
+          </div>
+          </span>
+          <input type="text" class="form-control" placeholder="Search" value="{{ search_term }}" e-keyup="search">
+        </div>
+        <div class="input-group-btn">
+          <button type="button" class="btn btn-default btn-left" e-click="clear_filters">Clear All Filters</button>
+        </div>
+        <div class="input-group-btn">
+          <button type="button" class="btn btn-default btn-middle dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            Show {{ params._per_page }}
+            <span class="caret"></span>
+          </button>
+          <ul class="dropdown-menu dropdown-menu-right">
+            <li class="{{ if size == 10 }} active {{ end }}"><a href="#" e-click="set_table_size(10)">10</a></li>
+            <li class="{{ if size == 25 }} active {{ end }}"><a href="#" e-click="set_table_size(25)">25</a></li>
+            <li class="{{ if size == 50 }} active {{ end }}"><a href="#" e-click="set_table_size(50)">50</a></li>
+          </ul>
+        </div>
+        <!-- /input-group-btn -->
+        <div class="input-group-btn">
+          <button type="button" id="fields_shown" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <span class="fa fa-list"></span>
+            <span class="caret"></span>
+          </button>
+          <ul id="fields_shown_list" class="dropdown-menu dropdown-menu-right">
+            {{ page._table._columns.each do |field| }}
+              {{ if field.key?('title') }}
+                <li>
+                  <div class="checkbox">
+                    <label class="dropdown-item">
+                      <input name="shown_fields" type="checkbox" class="dropdown-item-checkbox" checked="{{ field._shown }}">
+                      {{ field._title }}
+                    </label>
+                  </div>
+                </li>
+                {{ end }}
+              {{ end }}
+          </ul>
+        </div>
+        <!-- /btn-group -->
+      </div>
+      <!-- /input-group -->
+    </div>
+    <!-- /.col-lg-6 -->
+  </div>
+  <!-- /.row -->

data/app/table/views/headers/modal.html

@@ -0,0 +1,34 @@
+<:Body>
+<div class="modal fade" id="sortModal">
+  <div class="modal-dialog modal-md">
+    <div class="modal-content">
+      <div class="modal-header">
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+        <h4 class="modal-title">Sort and Filter</h4>
+      </div>
+      <div class="modal-body">
+        {{ search_fields.each_with_index do |field, i| }}
+        <div class="row">
+          <div class="col-xs-3">
+            {{ field['title'] }}
+          </div>
+          <div class="col-xs-9">
+            <div class="col-sm-6">
+              <!-- <:fields:select value="{{ options[i] }}" label=false options="{{ [{label:'Greater Than', value:'$gt'}, {label:'Less Than', value:'$lt'}, {label:'Not Equal to', value:'$ne'}] }}" /> -->
+            </div>
+            <div class="col-sm-6">
+              <!-- <:fields:text value="{{ values[i] }}" label=false /> -->
+            </div>
+          </div>
+        </div>
+        {{ end }}
+      </div>
+      <div class="modal-footer">
+      <div align="center">
+          <button class="btn btn-default" data-dismiss="modal" style="margin-right:20px">Cancel</button>
+          <button class="btn btn-default" e-click="modal" style="margin-right:20px">Clear Filters</button>
+          <button class="btn btn-primary" e-click="apply_filters" style="margin-right:20px">Apply</button>
+      </div>
+      </div>
+    </div>
+  </div>

data/app/table/views/main/body.html

@@ -0,0 +1,26 @@
+<:Body>
+  <tbody>
+    {{ unless current_page.loaded? }}
+      <tr>
+        <td class="loading" colspan="{{ page._table._columns.size }}">
+          Loading...
+          Someone please make me pretty!
+        </td>
+      </tr>
+    {{ end }}
+    {{ if false }}
+      {{ yield }}
+    {{ else }}
+      {{ current_page.each do |data| }}
+        <tr>
+            {{ page._table._columns.each_with_index do |item, index| }}
+              {{ if item._shown }}
+                <td e-click="td_click(data.id, index)" class="{{ if params._sort_field == item._sort_name }} selected_body {{ end }}">
+                  {{ raw(data.send(item._field_name)) }}
+                </td>
+              {{ end }}
+            {{ end }}
+        </tr>
+      {{ end }}
+    {{ end }}
+  </tbody>

data/app/table/views/main/footers.html

@@ -0,0 +1 @@
+<:table:footers table_size="{{ table_size }}" total_size="{{ total_size }}" />

data/app/table/views/main/index.html

@@ -0,0 +1,7 @@
+<:Body>
+  <:table:headers/>
+  <:table:wrapper>
+    <:table:columns />
+    <:table:main:body source="{{ attrs.source }}" source_name="{{ attrs.source_name }}"/>
+  </:table:wrapper>
+  <:table:footers table_size="{{ table_size }}" source_name="{{ attrs.source_name }}" total_size="{{ total_size }}"/>

data/app/table/views/wrapper/index.html

@@ -0,0 +1,10 @@
+<:Body>
+  <div class="row">
+    <div class="col-xs-12">
+      <div class="table-responsive">
+        <table class="table table-striped table-vmiddle table-hover">
+          {{ yield }}
+        </table>
+      </div>
+    </div>
+  </div>

data/lib/volt/table.rb

@@ -0,0 +1,18 @@
+# If you need to require in code in the gem's app folder, keep in mind that
+# the app is not on the load path when the gem is required.  Use
+# app/{gemname}/config/initializers/boot.rb to require in client or server
+# code.
+#
+# Also, in volt apps, you typically use the lib folder in the
+# app/{componentname} folder instead of this lib folder.  This lib folder is
+# for setting up gem code when Bundler.require is called. (or the gem is
+# required.)
+#
+# If you need to configure volt in some way, you can add a Volt.configure block
+# in this file.
+
+module Volt
+  module Table
+    # Your code goes here...
+  end
+end

data/lib/volt/table/version.rb

@@ -0,0 +1,5 @@
+module Volt
+  module Table
+    VERSION = "0.1.0"
+  end
+end

data/spec/dummy/.gitignore

@@ -0,0 +1,9 @@
+.bundle
+.config
+.yardoc
+tmp
+.idea
+.yardoc
+.sass-cache
+.DS_Store
+compiled

data/spec/dummy/README.md

@@ -0,0 +1,4 @@
+# Place your app's docs here.
+
+## New to Volt?
+Be sure to read the volt docs at http://docs.voltframework.com

data/spec/dummy/app/main/assets/css/app.css.scss

@@ -0,0 +1 @@
+// Place your apps css here

data/spec/dummy/app/main/config/dependencies.rb

@@ -0,0 +1,13 @@
+# Specify which components you wish to include when
+# the "home" component loads.
+
+# bootstrap css framework
+component 'bootstrap'
+
+# a default theme for the bootstrap framework
+component 'bootstrap_jumbotron_theme'
+
+# provides templates for login, signup, and logout
+component 'user_templates'
+component 'pagination'
+component 'table'

data/spec/dummy/app/main/config/initializers/boot.rb

@@ -0,0 +1,10 @@
+# Place any code you want to run when the component is included on the client
+# or server.
+
+# To include code only on the client use:
+# if RUBY_PLATFORM == 'opal'
+#
+# To include code only on the server, use:
+# unless RUBY_PLATFORM == 'opal'
+# ^^ this will not send compile in code in the conditional to the client.
+# ^^ this include code required in the conditional.

data/spec/dummy/app/main/config/routes.rb

@@ -0,0 +1,14 @@
+# See https://github.com/voltrb/volt#routes for more info on routes
+
+client '/about', action: 'about'
+
+# Routes for login and signup, provided by user_templates component gem
+client '/signup', component: 'user_templates', controller: 'signup'
+client '/login', component: 'user_templates', controller: 'login', action: 'index'
+client '/password_reset', component: 'user_templates', controller: 'password_reset', action: 'index'
+client '/forgot', component: 'user_templates', controller: 'login', action: 'forgot'
+client '/account', component: 'user_templates', controller: 'account', action: 'index'
+
+# The main route, this should be last. It will match any params not
+# previously matched.
+client '/', {}

data/spec/dummy/app/main/controllers/main_controller.rb

@@ -0,0 +1,67 @@
+# By default Volt generates this controller for your Main component
+module Main
+  class MainController < Volt::ModelController
+    before_action :set_default_table_options, only: :index
+    before_action :set_default_table2_options, only: :about
+
+    def index
+      # Add code for when the index view is loaded
+    end
+
+    def about
+      # Add code for when the about view is loaded
+    end
+
+    def set_default_table_options
+      params._sort_field ||= "last_name"
+      params._sort_direction ||= 1
+      page._table = {
+        default_click_event: 'user_click',
+        columns: [
+          {title: "First Name", search_field: 'first', field_name: 'first_name', sort_name: 'first_name', shown: true},
+          {title: "Last Name", search_field: 'last', field_name: 'last_name', sort_name: 'last_name', shown: true},
+          {title: "Email", search_field: 'email', field_name: 'email', sort_name: 'email', click_event: 'email_click', shown: true},
+        ]
+      }
+    end
+
+    def set_default_table2_options
+      params._sort_field ||= "last_name"
+      params._sort_direction ||= 1
+      page._table = {
+        columns: [
+          {title: "First Name", search_field: 'first', field_name: 'first_name', sort_name: 'first_name', shown: true},
+          {title: "Last Name", search_field: 'last', field_name: 'last_name', sort_name: 'last_name', shown: true},
+          {title: "Email", search_field: 'email', field_name: 'email', sort_name: 'email', shown: true},
+        ]
+      }
+    end
+
+    def all_users
+      store.users.all
+    end
+
+    def show_user_detail(id)
+      puts id
+    end
+
+    def show_email(id)
+      puts "email of :#{id}"
+    end
+
+    private
+
+    # The main template contains a #template binding that shows another
+    # template.  This is the path to that template.  It may change based
+    # on the params._component, params._controller, and params._action values.
+    def main_path
+      "#{params._component || 'main'}/#{params._controller || 'main'}/#{params._action || 'index'}"
+    end
+
+    # Determine if the current nav component is the active one by looking
+    # at the first part of the url against the href attribute.
+    def active_tab?
+      url.path.split('/')[1] == attrs.href.split('/')[1]
+    end
+  end
+end

data/spec/dummy/app/main/lib/seed_db.rb

@@ -0,0 +1,32 @@
+require_relative '../../../../factories'
+require 'ruby-progressbar'
+
+num_users = 50
+
+progressbar = ProgressBar.create
+progressbar.total = 6 + num_users
+
+#create Custom Users, used for testing
+
+
+# Create several more users
+# steps = num_users
+Factories.custom_user({method: :save}, 'Bob', 'Smith')
+progressbar.increment
+
+Factories.custom_user({method: :save}, 'Jerry', 'Smith')
+progressbar.increment
+
+Factories.custom_user({method: :save}, 'Bob', 'Barker')
+progressbar.increment
+
+Factories.custom_user({method: :save}, 'Jerry', 'Sienfeld')
+progressbar.increment
+
+Factories.custom_user({method: :save}, 'Mary', 'Joe')
+progressbar.increment
+
+num_users.times do
+  Factories.user({method: :save})
+  progressbar.increment
+end

data/spec/dummy/app/main/models/user.rb

@@ -0,0 +1,15 @@
+# By default Volt generates this User model which inherits from Volt::User,
+# you can rename this if you want.
+class User < Volt::User
+  # login_field is set to :email by default and can be changed to :username
+  # in config/app.rb
+  # ROLES = ['admin', 'student', 'teacher', 'TA']
+
+  field login_field
+  field :first_name
+  field :last_name
+
+  validate login_field, unique: true, length: 8
+  validate :email, email: true
+
+end

data/spec/dummy/app/main/views/main/about.html

@@ -0,0 +1,16 @@
+<:Title>
+  About
+
+<:Body>
+  <h1>Table no wrapper</h1>
+  <div class="row">
+    <div class="col-md-12">
+      <div class="panel panel-primary">
+        <div class="panel-heading">Users Table
+        </div>
+        <div class="panel-body">
+          <:table source="{{ all_users }}" source_name="users"/>
+        </div>
+      </div>
+    </div>
+  </div>

data/spec/dummy/app/main/views/main/index.html

@@ -0,0 +1,25 @@
+<:Title>
+  Home
+
+<:Body>
+  <h1>Table with Wrapper</h1>
+  <div class="row">
+    <div class="col-md-12">
+      <div class="panel panel-primary">
+        <div class="panel-heading">Users Table
+        </div>
+        <div class="panel-body">
+          <div class="row">
+            <div class="col-xs-12">
+              <:table:headers />
+            </div>
+          </div>
+          <:table:wrapper>
+            <:table:columns />
+            <:table:main:body source="{{ all_users }}" e-user_click="show_user_detail" e-email_click="show_email"/>
+          </:table:wrapper>
+          <:table:main:footers source="{{ all_users }}" />
+        </div>
+      </div>
+    </div>
+  </div>

data/spec/dummy/app/main/views/main/main.html

@@ -0,0 +1,29 @@
+<:Title>
+  {{ view main_path, "title", {controller_group: 'main'} }}
+
+<:Body>
+  <div class="container">
+    <div class="header">
+      <ul class="nav nav-pills pull-right">
+        <:nav href="/">Home</:nav>
+        <:nav href="/about">About</:nav>
+        <:user_templates:menu />
+      </ul>
+      <h3 class="text-muted">dummy</h3>
+    </div>
+
+    <:volt:notices />
+
+    {{ view main_path, 'body', {controller_group: 'main'} }}
+
+    <div class="footer">
+      <p>&copy; Company {{ Time.now.year }}</p>
+    </div>
+
+  </div>
+
+<:Nav>
+  <li class="{{ if active_tab? }}active{{ end }}">
+    <a href="{{ attrs.href }}">{{ yield }}</a>
+  </li>
+