caboose-cms 0.4.151 → 0.5.1

data/app/views/caboose/products/admin_index.html.erb

@@ -0,0 +1,95 @@
+<h1>Products</h1>
+
+<p style="margin: 12px 0">
+  <a href="/admin/vendors/new">New Vendor</a>
+  <span style="margin: 0 3px">|</span>
+  <a href="/admin/products/new">New Product</a>
+  <span style="margin: 0 3px">|</span>
+  <a href="/admin/products/sort">Sort Products</a>
+</p>
+
+<div class="media">
+	<aside class="right">
+		<form action="/admin/products" method="get" id="search_form" style="margin: 0 0 12px">
+			<input type="text" name="search_like" placeholder="Title or Vendor Name" value="<%= params[:search_like] %>" style="width: 350px" />
+			<input type="submit" value="Search" />
+			<input type="button" value="Clear" onclick="window.location='/admin/products'" />
+			
+			<ul>
+				<li><p>Find products that have:</p></li>
+				<li><label><input name="filters[missing_prices]" type="checkbox" <%= 'checked="checked"' if params[:filters] && params[:filters][:missing_prices] %> /> Missing prices</label></li>
+				<li><label><input name="filters[missing_images]" type="checkbox" <%= 'checked="checked"' if params[:filters] && params[:filters][:missing_images] %> /> Missing images</label></li>
+				<li><label><input name="filters[no_vendor]" type="checkbox" <%= 'checked="checked"' if params[:filters] && params[:filters][:no_vendor] %> /> No vendor</label></li>
+			</ul>
+		</form>
+	</aside>
+	
+	<section>
+		<% if @products.count > 0 %>
+			<table class='data' id='properties_table'>
+				<tr>
+					<%= raw @gen.sortable_table_headings({
+						'id'     => 'ID',
+						'title'  => 'Title',
+						'vendor' => 'Vendor'
+					}) %>
+				</tr>
+		
+				<% @products.each do |p| %>
+					<tr onclick="window.location='/admin/products/<%= p.id %>/general';">
+						<td><%= raw p.id %></td>
+						<td><%= raw p.title %></td>
+						<td><%= raw p.vendor.nil? ? 'Unknown' : p.vendor.name %></td>    
+					</tr>
+				<% end %>
+			</table>
+	
+			<p><%= raw @gen.generate %></p>
+		<% else %>
+			<p>There are no products right now.</p>
+		<% end %>
+	</section>
+</div>
+
+<% content_for :caboose_css do %>
+	<style>
+		ul {
+			list-style-type: none;
+			padding: 0;
+		}
+		input[type=checkbox] {
+			height: 16px;
+			left: auto !important;
+			margin: 0 0 12px !important;
+			position: relative !important;
+			top: auto !important;
+		}
+		label { cursor: pointer; }
+		label input[type=checkbox] {
+			height: 15px !important;
+			left: auto !important;
+			margin: 12px 0 !important;
+			position: relative !important;
+			top: auto !important;
+		}
+		
+		.media,
+		.media > section { overflow: hidden; }
+		.media > aside {
+			float: left;
+			margin-right: 12px;
+		}
+		.media > aside.right {
+			float: right;
+			margin-left: 12px;
+		}
+	</style>
+<% end %>
+
+<% content_for :caboose_js do %>
+	<script type='text/javascript'>
+		$(document).ready(function() { 
+		  var modal = new CabooseModal(800);
+		});
+	</script>
+<% end %>

data/app/views/caboose/products/admin_new.html.erb

@@ -0,0 +1,41 @@
+<%
+p = @product
+%>
+<h1>New Product</h1>
+
+<form action='/admin/products' method='post' id='new_form'>
+<input type='hidden' name='authenticity_token' value="<%= form_authenticity_token %>" />
+<p><input type='text' name='title' value='' placeholder='Product Title' style='width: 400px;' /></p>
+<div id='message'><%= raw flash[:message] ? flash[:message] : "" %></div>
+<p>
+<input type='button' value='< Back' onclick="window.location='/admin/products';" />
+<input type='submit' value='Add Product' onclick='add_product(); return false' />
+</p>
+</form>
+
+<% content_for :caboose_js do %>
+<%= javascript_include_tag "caboose/model/all" %>
+<script type='text/javascript'>
+
+function add_product()
+{
+  modal.autosize("<p class='loading'>Adding product...</p>");
+  $.ajax({
+    url: '/admin/products',
+    type: 'post',
+    data: $('#new_form').serialize(),
+    success: function(resp) {
+      if (resp.error)
+        modal.autosize("<p class='note error'>" + resp.error + "</p>");
+      if (resp.redirect)
+        window.location = resp.redirect    
+    }
+  });
+}
+
+var modal = false;
+$(window).load(function() {
+  modal = new CabooseModal(800);
+});
+</script>
+<% end %>

data/app/views/caboose/products/admin_sort.html copy.erb

@@ -0,0 +1,155 @@
+<h1>Sort Products</h1>
+
+<section>
+  <aside>
+    <ul id="source" class="sortable">
+      <% @products.each do |product| %>
+        <li id="<%= product.id %>"><%= product.title %></li>
+      <% end %>
+    </ul>
+    
+    <!-- <input name="filter" type="button" value="Filter" />
+    <input name="clear" type="button" value="Clear" /><br /> -->
+    <input name="search" type="search" placeholder="Search for Products" />
+    
+    <select class="filter" name="vendor">
+      <option value="">-- Filter by Vendor --</option>
+      
+      <% @vendors.each do |vendor| %>
+        <option value="<%= vendor.id %>"><%= vendor.name %></option>
+      <% end %>
+    </select>
+  </aside>
+  
+  <article>
+    <ul id="destination" class="sortable">
+      <% @products.each do |product| %>
+        <li id="<%= product.id %>"><%= product.title %></li>
+      <% end %>
+    </ul>
+    
+    <input id="submit" type="button" value="Apply" /><br />
+  </article>
+</section>
+
+<% content_for :caboose_js do %>
+  <%= javascript_include_tag('underscore') %>
+  <%= javascript_include_tag('caboose/jquery-ui') %>
+  <%= javascript_include_tag('caboose/jquery-ui-multisortable') %>
+  
+  <script>
+    
+    window.products = <%= @products.to_json.html_safe %>;
+    window.results  = window.products; // Used to store filtered results
+    
+    // Delay method
+    var delay = (function(){
+      var timer = 0;
+      return function(callback, ms){
+        clearTimeout (timer);
+        timer = setTimeout(callback, ms);
+      };
+    })();
+    
+    // Filter
+    function filter(event) {
+      var search_string = $('input[name=search]').val()
+        , vendor_id     = $('select[name=vendor]').val();
+        
+      window.results = _.filter(window.products, function(product) {
+        return search_string && product.title.toUpperCase().indexOf(search_string.toUpperCase()) > -1 || vendor_id && product.vendor_id == vendor_id
+      });
+      
+      console.log(window.results);
+    }
+    
+    $(document).ready(function() {
+      
+      // Define lists
+      var $lists = $('ul.sortable')
+        , $source = $('ul#source')
+        , $destination = $('ul#destination');
+      
+      $source.multisortable({
+        start: function(event, ui) {
+          
+        },
+        
+        connectWith: $destination
+      });
+      
+      $destination.multisortable({
+        receive: function(event, ui) {
+          // $source.sortable('cancel');
+        }
+      });
+      
+      // Filter events
+      $('#filter').on('click', filter);
+      $('select').on('change', filter);
+      
+      $('input[type=search]').on('keyup', function(event) {
+        delay(function() { filter(event) }, 1000);
+      });
+    });
+  </script>
+<% end %>
+
+<% content_for :caboose_css do %>
+  <style>
+  
+    /* Layout */
+    
+    section,
+    section article { overflow: hidden; }
+    
+    section aside {
+      float: left;
+      margin-right: 12px;
+    }
+    
+    /* Filters */
+    
+    input[type=search], select {
+      box-sizing: border-box;
+      margin: 6px 0;
+      width: 350px;
+      outline: none !important;
+    }
+    input[type=search] { height: 42px; }
+    select { display: block; }
+    
+    input[type=button] {
+      background: #ccc;
+      cursor: pointer;
+      margin: 12px 0;
+      padding: 6px;
+      outline: none !important;
+    }
+    
+    /* Lists */
+    
+    ul.sortable {
+      border: 1px solid #ccc;
+      height: 250px;
+      list-style: none;
+      margin: 0;
+      overflow: scroll;
+      padding: 0;
+      width: 350px;
+    }
+    ul.sortable li {
+      box-sizing: border-box;
+      cursor: pointer;
+      cursor: grab;
+      overflow: hidden;
+      padding: 6px;
+      white-space: nowrap;
+      width: 100%;
+    }
+    ul.sortable li.selected {
+      background: #3e9aff;
+      color: #fff;
+    }
+  </style>
+<% end %>

data/app/views/caboose/products/admin_sort.html.erb

@@ -0,0 +1,254 @@
+<h1>Sort Products</h1>
+
+<section>
+  <aside>
+    <ul id="source" class="sortable">
+      <% @products.each do |product| %>
+        <li data-id="<%= product.id %>"><%= product.title %></li>
+      <% end %>
+    </ul>
+    
+    <input name="search" type="search" placeholder="Search for Products" />
+    
+    <select class="filter" name="vendor">
+      <option value="">-- Filter by Vendor --</option>
+      
+      <% @vendors.each do |vendor| %>
+        <option value="<%= vendor.id %>"><%= vendor.name %></option>
+      <% end %>
+    </select>
+  </aside>
+  
+  <article>
+    <ul id="target" class="sortable">
+      <% @products.each do |product| %>
+        <li data-id="<%= product.id %>"><%= product.title %></li>
+      <% end %>
+    </ul>
+    
+    <input id="submit" type="button" value="Apply" /><br />
+  </article>
+</section>
+
+<% content_for :caboose_js do %>
+  <%= javascript_include_tag('underscore') %>
+  <%= javascript_include_tag('caboose/jquery-ui') %>
+  
+  <script>
+    
+    window.products = <%= @products.to_json.html_safe %>;
+    window.results  = window.products; // Used to store filtered results
+    
+    // Delay method
+    var delay = (function(){
+      var timer = 0;
+      return function(callback, ms){
+        clearTimeout (timer);
+        timer = setTimeout(callback, ms);
+      };
+    })();
+    
+    // Filter
+    function filter(event) {
+      var $source       = $('ul#source')
+        , $search       = $('input[name=search]')
+        , search_string = $search.val() === $search.attr('placeholder') ? undefined : $search.val().trim().toUpperCase()
+        , vendor_id     = $('select[name=vendor]').val();
+      
+      $source.empty();
+      
+      _.each(window.products, function(product) {
+        if (!search_string && !vendor_id
+        || search_string && product.title.toUpperCase().indexOf(search_string) > -1
+        || vendor_id && product.vendor_id == vendor_id) {
+          $source.append( $('<li/>').attr('data-id', product.id).text(product.title) );
+        }
+      });
+    }
+    
+    function update(event) {
+      
+      // Send the ordered array to the server to make it official
+      $.ajax({
+        type: 'put',
+        url: '/admin/products/update-sort-order',
+        data: { product_ids: $('ul#target').sortable('toArray', { attribute: 'data-id' }) }
+      });
+    }
+    
+    $(document).ready(function() {
+      var selected_class = 'selected';
+      
+      // Selection rules
+      $('ul.sortable').on('click', 'li', function(event) {
+        $element = $(this);
+        
+        if (event.shiftKey && $last_element) {
+          if ($element.index() < $last_element.index()) {
+            $element.nextUntil($last_element).addClass(selected_class);
+          } else {
+            $element.prevUntil($last_element).addClass(selected_class);
+          }
+          
+          $element.toggleClass(selected_class);
+        } else if (event.ctrlKey || event.metaKey) {
+          if ($element.hasClass(selected_class)) {
+            $element.removeClass(selected_class);
+          } else {
+            $element.addClass(selected_class);
+          }
+        } else {
+          $element.addClass(selected_class).siblings().removeClass(selected_class);
+        }
+        
+        $last_element = $element;
+      });
+      
+      // Setup sortable lists
+      $('ul#source').sortable({
+        delay: 150,
+        revert: 0,
+        connectWith: 'ul#target',
+        
+        helper: function(event, item) {
+          
+          // If the user just clicked and immediately drug an element
+          if ( !item.hasClass(selected_class) ) item.addClass(selected_class).siblings().removeClass(selected_class);
+          
+          // Grab the selected elements and create the helper
+          var elements = item.parent().children('.' + selected_class).clone()
+            , helper   = $('<li/>');
+            
+          // Add the elements to the item multidrag data attribute
+          item.data('multidrag', elements).siblings('.' + selected_class);
+          
+          // Pass back the helper
+          return helper.append(elements);
+        },
+        
+        start: function(event, ui) {
+          
+          // Make sure the item stays visible on #source
+          $(ui.item).show();
+          
+          // Clone the original item and note the previous one, to reappend after jquery ui takes it away
+          item_clone = $(ui.item).clone();
+          previous_item = $(ui.item).prev();
+          
+          // Remove selected status from ul#target
+          $('ul#target li.selected').removeClass('selected');
+        },
+        
+        beforeStop: function(event, ui) {
+          
+          if ($(ui.item).parent().attr('id') != 'source') {
+          
+            // Remove duplicate items from old positions
+            ui.item.data('multidrag').each(function(index, element) {
+              var $element = $(element);
+              $('ul#target li[data-id=' + $element.attr('data-id') + ']').not('.selected').remove()
+            });
+          }
+        },
+        
+        stop: function(event, ui) {
+          
+          if ($(ui.item).parent().attr('id') == 'source') return false;
+          
+          // Clear multidrag data
+          ui.item.after( ui.item.data('multidrag') ).remove();
+          
+          // If the previous item is defined append the clone just after, otherwise prepend to #source
+          if (previous_item.length) {
+            previous_item.after(item_clone);
+          } else {
+            $('ul#source').prepend(item_clone);
+          }
+          
+          // Update sort order
+          update(event, ui);
+        }
+      });
+      
+      // Update sort order when done sorting
+      $('ul#target').sortable({ stop: update });
+      
+      // Filter when the vendor select box change
+      $('select').on('change', filter);
+      
+      // Filter, after a delay, when there is a keyup event in the search
+      $('input[type=search]').on('keyup', function(event) {
+        delay(function() { filter(event) }, 600);
+      });
+    });
+  </script>
+<% end %>
+
+<% content_for :caboose_css do %>
+  <style>
+  
+    /* Layout */
+    
+    section,
+    section article { overflow: hidden; }
+    
+    section aside {
+      float: left;
+      margin-right: 12px;
+    }
+    
+    /* Filters */
+    
+    input[type=search], select {
+      box-sizing: border-box;
+      margin: 6px 0;
+      width: 350px;
+      outline: none !important;
+    }
+    input[type=search] { height: 42px; }
+    select { display: block; }
+    
+    input[type=button] {
+      background: #ccc;
+      cursor: pointer;
+      margin: 12px 0;
+      padding: 6px;
+      outline: none !important;
+    }
+    
+    /* Lists */
+    
+    ul.sortable {
+      border: 1px solid #ccc;
+      height: 250px;
+      list-style: none;
+      margin: 0;
+      overflow-x: hidden;
+      overflow-y: scroll;
+      padding: 0;
+      width: 350px;
+      -webkit-touch-callout: none;
+      -webkit-user-select: none;
+      -khtml-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+    }
+    ul.sortable li {
+      box-sizing: border-box;
+      border-bottom: 1px solid #ccc;
+      cursor: pointer;
+      cursor: grab;
+      display: block;
+      padding: 6px;
+      width: 100%;
+    }
+    ul.sortable li.selected {
+      background: #3e9aff;
+      border-color: #fff;
+      color: #fff;
+    }
+    
+    ul#source .ui-sortable-placeholder { display: none; }
+  </style>
+<% end %>