ponytail 0.3.0 → 0.4.0

data/app/assets/stylesheets/ponytail/_base.scss

@@ -0,0 +1,38 @@
+.horizontal-box {
+  @include display-box;
+  @include box-orient(horizontal);
+}
+
+.vertical-box {
+  @include display-box;
+  @include box-orient(vertical);
+}
+
+@keyframes highlight {
+  0% { background-color: yellow; }
+  100% { background-color: white; }
+}
+
+.header {
+  @include border-radius(5px);
+  border: 1px solid #000;
+  margin-bottom: 5px;
+  padding: 5px;
+
+  > * {
+    margin: 0 3px;
+  }
+}
+
+.notice {
+  @include display-box;
+  @include border-radius(5px);
+  margin: 5px 0;
+  padding: 5px;
+  background: limegreen;
+  color: white;
+
+  .message {
+    @include box-flex(1);
+  }
+}

data/app/assets/stylesheets/ponytail/_index.scss

@@ -0,0 +1,68 @@
+.index {
+  @extend .vertical-box;
+  width: 1024px;
+  height: 768px;
+
+  .container {
+    @extend .horizontal-box;
+
+    > div {
+      @include box-flex(1);
+      margin: 0 2px;
+    }
+
+    .migration_filepath {
+      margin: 2px 0;
+    }
+
+    .migration_files {
+      height: 500px;
+      overflow-y: auto;
+
+      table {
+        width: 100%;
+      }
+
+      .filename {
+        padding: 2px;
+        cursor: pointer;
+        &:hover {
+          background-color: cornsilk;
+        }
+      }
+
+      .raw_content {
+        display: none;
+      }
+    }
+
+    .migration_file {
+      .migration_filename {
+        margin: 2px 0;
+        padding: 2px;
+
+        &.highlight {
+          animation: highlight 1s 1;
+        }
+      }
+      .raw_content {
+        @include border-radius(5px);
+        background: whitesmoke;
+        margin-top: 2px;
+        padding: 5px;
+
+        pre {
+          margin: 5px 0;
+        }
+      }
+    }
+  }
+
+  .actions {
+    @extend .horizontal-box;
+
+    .migrate {
+      margin-left: 10px;
+    }
+  }
+}

data/app/assets/stylesheets/ponytail/_new.scss

@@ -0,0 +1,133 @@
+.new {
+  @extend .vertical-box;
+  width: 1024px;
+  height: 768px;
+
+  .container {
+    @extend .horizontal-box;
+    margin-top: 5px;
+
+    > div {
+      margin: 0 2px;
+    }
+
+    .tables {
+      @extend .vertical-box;
+      @include box-flex(1);
+      @include border-radius(5px);
+      border: solid 1px #000;
+      height: 500px;
+      overflow-x: hidden;
+      overflow-y: auto;
+
+      .table {
+        @extend .vertical-box;
+        border-bottom: solid 1px #000;
+        padding: 3px;
+        .table_name {
+          @include box-flex(1);
+          input {
+            display: none;
+          }
+        }
+        .edit_table {
+          width: 40px;
+        }
+        .drop_table {
+          width: 40px;
+        }
+        .restore_table {
+          width: 60px;
+          display: none;
+        }
+      }
+
+      .new_table {
+        padding: 3px;
+        margin-top: 3px;
+      }
+
+      .columns {
+        margin: 3px 0 0 5px;
+        display: none;
+
+        .column {
+          @extend .horizontal-box;
+          padding: 2px;
+          width: 100%;
+          .column_type {
+            width: 100px;
+            cursor: pointer;
+            &:hover {
+              background-color: cornsilk;
+            }
+            select {
+              display: none;
+            }
+          }
+          .column_name {
+            @include box-flex(1);
+            cursor: pointer;
+            &:hover {
+              background-color: cornsilk;
+            }
+            input {
+              display: none;
+            }
+          }
+          .remove_column {
+            width: 60px;
+          }
+          .restore_column {
+            width: 60px;
+            display: none;
+          }
+        }
+
+        .add_column {
+          margin-top: 3px;
+        }
+      }
+
+      .table_name {
+        cursor: pointer;
+        &:hover {
+          background-color: cornsilk;
+        }
+      }
+
+      .column_name {
+        width: 100%;
+      }
+    }
+
+    .migration_file {
+      @extend .vertical-box;
+      width: 500px;
+
+      .migration_file_header {
+        @extend .horizontal-box;
+
+        .classname {
+          @include box-flex(1);
+          span {
+            display: none;
+          }
+        }
+      }
+
+      .raw_content {
+        @include box-flex(1);
+        margin-top: 3px;
+        textarea {
+          width: 100%;
+          height: 500px;
+        }
+      }
+
+      .actions {
+        margin-top: 3px;
+      }
+    }
+  }
+}

data/app/assets/stylesheets/ponytail/application.scss

@@ -0,0 +1,5 @@
+@import "compass";
+
+@import "base";
+@import "index";
+@import "new";

data/app/views/ponytail/migrations/index.html.erb

@@ -1,17 +1,57 @@
-<div class="pt_index">
-  <%= render 'notice' %>
+<div class="index">
+  <div class="header">
+    <span>index</span>
+    <span>|</span>
+    <a href="/rails/migrations/new">new</a>
+  </div>
 
-  <% @migrations.each do |migration| %>
-    <%= render 'migration', migration: migration, current: @current_version %>
+  <% if notice %>
+    <div class="notice">
+      <div class="message"><%= notice %></div>
+      <div class="close"><a href="#">x</a></div>
+    </div>
   <% end %>
 
-  <div class="pt_actions">
-    <%= button_to 'New', new_migration_path, method: :get, disabled: Ponytail::Migration.check_pending? %>
-    <%= button_to 'Migrate', migrate_migrations_path, disabled: Ponytail::Migration.check_pending? %>
-    <%= button_to 'Rollback', rollback_migrations_path, disabled: Ponytail::Migration.check_pending? %>
+  <div class="container">
+    <div>
+      <!-- TODO: fake it! -->
+      <% path = 'db/migrate/' %>
+      <div class="migration_filepath"><%= path %></div>
+      <div class="migration_files">
+        <table>
+          <% @migrations.each do |migration| %>
+            <tr>
+              <td><%= migration.version == @current_version ? "*" : "" %></td>
+              <!-- TODO: fake it!(sub) -->
+              <td class="filename"><%= migration.filename.sub(path, "") %></td>
+              <td class="raw_content"><%= migration.raw_content %></td>
+            </tr>
+          <% end %>
+        </table>
+      </div>
+    </div>
+
+    <div class="migration_file">
+      <% migration = @migrations[0] %>
+      <!-- TODO: fake it!(sub) -->
+      <div class="migration_filename"><%= migration.filename.sub(path, "") %></div>
+      <div class="raw_content">
+        <pre><%= migration.raw_content %></pre>
+      </div>
+    </div>
+  </div>
+
+  <div class="actions">
+    <div>
+      <button class="new_button">New</button>
+    </div>
+    <div class="migrate">
+      <button class="migrate_button" <%= Ponytail::Migration.check_pending? ? 'disabled="disabled"' : '' %>>Migrate</button>
+      <button class="rollback_button" <%= Ponytail::Migration.check_pending? ? 'disabled="disabled"' : '' %>>Rollback</button>
+    </div>
   </div>
 </div>
 
 <script type='text/javascript'>
-  setupIndex();
+  new Ponytail.Views.Index({el: $(".index")}).render();
 </script>

data/app/views/ponytail/migrations/new.html.erb

@@ -1,22 +1,93 @@
-<%= render 'table_view_template' %>
-<%= render 'column_view_template' %>
+<%= render 'ponytail/templates/table' %>
+<%= render 'ponytail/templates/column' %>
 
-<div class="pt_new">
-  <div class="pt_schema">
-    <% @schema.tables.each do |t| %>
-      <%= render 'table', table: t %>
-    <% end %>
+<div class="new">
+  <div class="header">
+    <a href="/rails/migrations">index</a>
+    <span>|</span>
+    <span>new</span>
+  </div>
 
-    <div class="pt_new_table">
-      <a href="#">New Table</a>
+  <% notice = @migration.errors.full_messages if @migration.errors.any? %>
+  <% if notice %>
+    <div class="notice">
+      <div class="message"><%= notice %></div>
+      <div class="close"><a href="#">x</a></div>
+    </div>
+  <% end %>
+
+  <div class="container">
+    <div class="tables">
+      <% @schema.tables.each do |table| %>
+        <div class="table">
+          <div class="horizontal-box">
+            <div class="table_name">
+              <span><%= table.name %></span>
+              <input type="text" value="<%= table.name %>" />
+            </div>
+            <div class="edit_table"><a href="#">edit</a></div>
+            <div class="drop_table"><a href="#">drop</a></div>
+            <div class="restore_table"><a href="#">restore</a></div>
+          </div>
+          <div class="columns">
+            <% table.columns.each do |column| %>
+              <div class="column">
+                <div class="column_type">
+                  <span><%= column.type %></span>
+                  <select>
+                    <option value="string">string</option>
+                    <option value="text">text</option>
+                    <option value="integer">integer</option>
+                    <option value="float">float</option>
+                    <option value="decimal">decimal</option>
+                    <option value="datetime">datetime</option>
+                    <option value="timestamp">timestamp</option>
+                    <option value="time">time</option>
+                    <option value="date">date</option>
+                    <option value="binary">binary</option>
+                    <option value="boolean">boolean</option>
+                  </select>
+                </div>
+                <div class="column_name">
+                  <span><%= column.name %></span>
+                  <input type="text" value="<%= column.name %>" />
+                </div>
+                <div class="remove_column"><a href="#">remove</a></div>
+                <div class="restore_column"><a href="#">restore</a></div>
+              </div>
+            <% end %>
+            <div class="add_column"><a href="#">Add Column</a></div>
+          </div>
+        </div>
+      <% end %>
+      <div class="new_table"><a href="#">New Table</a></div>
     </div>
-  </div>
 
-  <div class="migration_file_view">
-    <%= render 'migration_file', migration: @migration %>
+    <%= form_for @migration, url: migrations_path do |f| %>
+      <div class="migration_file">
+        <div class="migration_file_header">
+          <div class="classname">
+            <input type="text" name="ponytail_migration[name]" value="NewMigration" />
+          </div>
+
+          <div class="edit_checkbox">
+            <input type="checkbox" />
+            <span>edit</span>
+          </div>
+        </div>
+
+        <div class="raw_content">
+          <textarea name="ponytail_migration[raw_content]" disabled="disabled"></textarea>
+        </div>
+
+        <div class="actions">
+          <button class="create_button" <%= Ponytail::Migration.check_pending? ? 'disabled="disabled"' : '' %>>Create File</button>
+        </div>
+      </div>
+    <% end %>
   </div>
 </div>
 
 <script type='text/javascript'>
-  new Ponytail.Views.NewMigrationView({el: $(".pt_new")});
+  new Ponytail.Views.New({el: $(".new")}).render();
 </script>

data/app/views/ponytail/{migrations/_column_view_template.html.erb → templates/_column.html.erb}

@@ -1,6 +1,6 @@
-<script type="text/template" id="column_view_template">
-  <div class="pt_column_type">
-    <span style="display: none;"><%%= type %></span>
+<script type="text/template" id="column_template">
+  <div class="column_type">
+    <span><%%= type %></span>
     <select>
       <option value="string">string</option>
       <option value="text">text</option>
@@ -15,8 +15,10 @@
       <option value="boolean">boolean</option>
     </select>
   </div>
-  <div class="pt_column_name">
-    <span style="display: none;"><%%= name %></span>
+  <div class="column_name">
+    <span><%%= name %></span>
     <input type="text" value="<%%= name %>" />
   </div>
+  <div class="remove_column"><a href="#">remove</a></div>
+  <div class="restore_column"><a href="#">restore</a></div>
 </script>

data/app/views/ponytail/templates/_table.html.erb

@@ -0,0 +1,14 @@
+<script type="text/template" id="table_template">
+  <div class="horizontal-box">
+    <div class="table_name">
+      <span><%%= name %></span>
+      <input type="text" value="<%%= name %>" />
+    </div>
+    <div class="edit_table"><a href="#">edit</a></div>
+    <div class="drop_table"><a href="#">drop</a></div>
+    <div class="restore_table"><a href="#">restore</a></div>
+  </div>
+  <div class="columns">
+    <div class="add_column"><a href="#">Add Column</a></div>
+  </div>
+</script>

data/bin/rails

@@ -0,0 +1,3 @@
+#!/bin/sh
+
+spec/dummy/bin/rails $@

data/lib/ponytail/version.rb

@@ -1,3 +1,3 @@
 module Ponytail
-  VERSION = "0.3.0"
+  VERSION = "0.4.0"
 end

data/lib/ponytail.rb

@@ -2,3 +2,6 @@ require 'ponytail/engine'
 require 'ponytail/migration'
 require 'ponytail/schema'
 require 'rails/mapper'
+
+require 'sass-rails'
+require 'compass-rails'

data/lib/rails/mapper.rb

@@ -3,8 +3,8 @@ module ActionDispatch::Routing
     def mount_ponytail
       resources :migrations, only: [:index, :new, :create, :destroy], module: :ponytail, path: 'rails/migrations' do
         collection do
-          post :migrate
-          post :rollback
+          get :migrate
+          get :rollback
         end
       end
     end

data/ponytail.gemspec

@@ -18,7 +18,10 @@ Gem::Specification.new do |spec|
   spec.test_files    = spec.files.grep(%r{^(test|spec|features)/})
   spec.require_paths = ["lib"]
 
-  spec.add_dependency 'rails', '~> 4.0'
+  spec.add_dependency 'rails', '~> 4.0.0'
+  spec.add_dependency 'coffee-rails', '~> 4.0.0'
+  spec.add_dependency 'sass-rails', '~> 4.0.0'
+  spec.add_dependency 'compass-rails'
 
   spec.add_development_dependency "bundler", "~> 1.3"
   spec.add_development_dependency "rake"

data/spec/dummy/config/environments/production.rb

@@ -27,7 +27,7 @@ Dummy::Application.configure do
   # config.assets.css_compressor = :sass
 
   # Do not fallback to assets pipeline if a precompiled asset is missed.
-  config.assets.compile = false
+  # config.assets.compile = false
 
   # Generate digests for assets URLs.
   config.assets.digest = true

data/spec/dummy/config/initializers/ponytail_on_heroku.rb

@@ -0,0 +1,21 @@
+if Rails.env.production?
+  module Ponytail
+    class Migration
+      def self.migrate
+        false
+      end
+
+      def self.rollback
+        false
+      end
+
+      def save
+        valid?
+      end
+
+      def destroy
+        false
+      end
+    end
+  end
+end

data/spec/features/migrations/index_spec.rb

@@ -2,6 +2,7 @@ require 'spec_helper'
 
 describe "/migrations" do
   it "title is 'Migrations'" do
+    pending
     visit '/rails/migrations'
     expect(page).to have_title 'Migrations'
   end

data/spec/javascripts/ponytail/models/command_spec.coffee

@@ -0,0 +1,5 @@
+describe 'Command', ->
+  describe '#toString', ->
+    it 'it should be able to get string', ->
+      command = new Ponytail.Models.Command("rename_table", ":users", ":new_users")
+      expect(command.toString()).toBe("rename_table :users, :new_users")

data/spec/javascripts/ponytail/models/create_command_spec.js

@@ -2,7 +2,6 @@ describe("CreateTableCommand", function() {
   describe("#toString", function() {
     it("it should be able to get string", function() {
       var column = buildModel({type: 'string', name: 'name'});
-      console.log(column.get("type"));
       var command = new Ponytail.Models.CreateTableCommand('users', [column]);
       var expected = [
         "create_table :users do |t|",

data/spec/javascripts/ponytail/models/migration_file_spec.js

@@ -4,7 +4,7 @@ describe("MigrationFile", function() {
       var mFile = new Ponytail.Models.MigrationFile({className: "CreateUsers"});
       spyOn(mFile, "getContentOfClass").andReturn("");
       var expected = [
-        "class CreateUsers < ActiveRecord::MigrationFile",
+        "class CreateUsers < ActiveRecord::Migration",
         "",
         "end",
       ].join("\n");

data/spec/javascripts/support/boots/boot.coffee

@@ -0,0 +1,16 @@
+jsApiReporter = undefined
+do ->
+  jasmineEnv = jasmine.getEnv()
+
+  jsApiReporter = new jasmine.JsApiReporter()
+  htmlReporter = new jasmine.HtmlReporter()
+
+  jasmineEnv.addReporter jsApiReporter
+  jasmineEnv.addReporter htmlReporter
+
+  jasmineEnv.specFilter = (spec) ->
+    htmlReporter.specFilter spec
+
+  jasmineEnv.execute()
+
+@jsApiReporter = jsApiReporter