(PR) Administrator : Redesign of the backoffice

Gemfile

@@ -9,6 +9,7 @@ group :development do
   gem 'better_errors'
   gem 'binding_of_caller'
   gem 'meta_request'
+  gem 'pry-rails'
 end
 
 # Gems used only for assets and not required
@@ -20,6 +21,10 @@ group :assets do
   gem 'uglifier', '>= 1.0.3'
   gem 'rails-backbone'
   gem 'compass-rails'
+  gem 'bootstrap-sass'
+  gem 'bootstrap-datepicker-rails'
+  gem 'select2-rails'
+  gem 'underscore-rails'
 end
 
 group :test do
@@ -39,9 +44,11 @@ group :development, :test do
 end
 
 gem 'jquery-rails', '=2.1.4'
+gem 'simple_form'
 
 # MongoDB adapter and an optimizer for MongoDB
 gem 'mongoid', '~> 3.0.0'
+gem 'mongoid_slug'
 gem 'bson_ext'
 
 # Upload system

Gemfile.lock

@@ -54,6 +54,10 @@ GEM
       erubis (>= 2.6.6)
     binding_of_caller (0.7.1)
       debug_inspector (>= 0.0.1)
+    bootstrap-datepicker-rails (1.0.0.7)
+      railties (>= 3.0)
+    bootstrap-sass (2.3.1.0)
+      sass (~> 3.2)
     bson (1.8.4)
     bson_ext (1.8.4)
       bson (~> 1.8.4)
@@ -175,6 +179,7 @@ GEM
     meta_request (0.2.3)
       rack-contrib
       railties
+    method_source (0.8.1)
     mime-types (1.22)
     mini_magick (3.5.0)
       subexec (~> 0.2.1)
@@ -200,6 +205,9 @@ GEM
     mongoid_fulltext (0.6.1)
       mongoid (~> 3.0)
       unicode_utils (~> 1.0.0)
+    mongoid_slug (3.1.1)
+      mongoid (> 3.0)
+      stringex (~> 1.4)
     moped (1.4.5)
     multi_json (1.7.2)
     multipart-post (1.2.0)
@@ -212,6 +220,12 @@ GEM
     origin (1.0.11)
     orm_adapter (0.4.0)
     polyglot (0.3.3)
+    pry (0.9.12)
+      coderay (~> 1.0.5)
+      method_source (~> 0.8)
+      slop (~> 3.4)
+    pry-rails (0.2.2)
+      pry (>= 0.9.10)
     puma (1.6.3)
       rack (~> 1.2)
     rabl (0.8.3)
@@ -267,12 +281,20 @@ GEM
       railties (~> 3.2.0)
       sass (>= 3.1.10)
       tilt (~> 1.3)
+    select2-rails (3.3.2)
+      sass-rails (>= 3.2)
+      thor (~> 0.14)
     settingslogic (2.0.9)
+    simple_form (2.1.0)
+      actionpack (~> 3.0)
+      activemodel (~> 3.0)
+    slop (3.4.4)
     sprockets (2.2.2)
       hike (~> 1.2)
       multi_json (~> 1.0)
       rack (~> 1.0)
       tilt (~> 1.1, != 1.3.0)
+    stringex (1.5.1)
     subexec (0.2.3)
     thor (0.18.1)
     tilt (1.3.7)
@@ -285,6 +307,7 @@ GEM
     uglifier (2.0.1)
       execjs (>= 0.3.0)
       multi_json (~> 1.0, >= 1.0.2)
+    underscore-rails (1.4.4)
     unicode_utils (1.0.0)
     warden (1.2.1)
       rack (>= 1.0)
@@ -300,6 +323,8 @@ DEPENDENCIES
   asset_sync
   better_errors
   binding_of_caller
+  bootstrap-datepicker-rails
+  bootstrap-sass
   bson_ext
   cancan
   capybara-webkit
@@ -325,8 +350,10 @@ DEPENDENCIES
   minitest
   mongoid (~> 3.0.0)
   mongoid_fulltext
+  mongoid_slug
   mustache-trimmer!
   newrelic_rpm
+  pry-rails
   puma
   rabl
   rails (= 3.2.13)
@@ -336,6 +363,9 @@ DEPENDENCIES
   rspec-rails
   ruby-oembed
   sass-rails (~> 3.2.3)
+  select2-rails
   settingslogic
+  simple_form
   turn
   uglifier (>= 1.0.3)
+  underscore-rails

app/assets/javascripts/new_admin/application.js

@@ -0,0 +1,17 @@
+// This is a manifest file that'll be compiled into including all the files listed below.
+// Add new JavaScript/Coffee code in separate files in this directory and they'll automatically
+// be included in the compiled file accessible from http://example.com/assets/application.js
+// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
+// the compiled file.
+//
+//= require jquery
+//= require jquery_ujs
+//= require bootstrap
+//= require bootstrap-datepicker/core
+//= require bootstrap-datepicker/locales/bootstrap-datepicker.fr
+//= require bootstrap-datepicker/locales/bootstrap-datepicker.de
+//= require bootstrap-datepicker/locales/bootstrap-datepicker.es
+//= require bootstrap-datepicker/locales/bootstrap-datepicker.uk
+//= require select2
+//= require underscore
+//= require_tree .

app/assets/javascripts/new_admin/candidacies.js.coffee

@@ -0,0 +1,9 @@
+$ ->
+  formatOptionCandidate = (candidate) ->
+    '<img src="https://voxe.s3.amazonaws.com/candidates/' + candidate.text.replace(/\s+/, "-") + '-50.jpg">&nbsp;' + candidate.text
+  $("#candidacy_candidates").select2
+    width: "250px"
+    formatResult: formatOptionCandidate
+    formatSelection: formatOptionCandidate
+    escapeMarkup: (m) -> m
+

app/assets/javascripts/new_admin/election_tags.js.coffee

@@ -0,0 +1,148 @@
+$ ->
+  # Prevent from sending form
+  $("#form-tag-search").on "submit", (e) ->
+    e.preventDefault()
+
+  # Listen on keyup to trigger tags filtering
+  $("#tag-search").on "keyup", (e) ->
+    input = $(this).val().toLowerCase()
+    if (e.keyCode > 32 && e.keyCode < 128) || e.keyCode == 8
+      filterTags(input)
+
+  filterTags = (input) ->
+    filterTagsTree($('.root-tag'), input)
+
+  matchTagName = (tag, input) ->
+    tag.children().first().text().toLowerCase().search(input) != -1
+
+  filterTagsTree = (tags, input) ->
+    _.reduce(tags, (acc, tag) ->
+      $tag = $(tag)
+      # If the name matches or if a subnode matches
+      # the input We keep the parent node
+      if filterTagsTree($tag.find("li"), input) || matchTagName($tag, input)
+        $tag.show()
+        acc || true
+      else
+        $tag.hide()
+        acc || false
+    , false)
+
+  getTag = (id, cb) ->
+    $.ajax
+      url: '/api/v1/tags/' + id
+      method: 'GET'
+      success: (response, status, xhr) ->
+        cb(response.response.tag)
+      error: (xhr, status, body) ->
+        cb({})
+
+  buildTagsSelect = (select, filterIds) ->
+    filterIds = []
+    $(".tag").each ->
+      filterIds.push this.id
+    select.select2
+      ajax:
+        url: '/api/v1/tags/search'
+        dataType: 'json'
+        placeholder: "Search for a tag"
+        minimumInputLength: 1
+        data: (term, page) ->
+          name: term
+        results: (data, page) ->
+          results: _.filter data.response, (tag) ->
+            filterIds.indexOf(tag.id) == -1
+      formatResult: (tag) ->
+        tag.name
+      formatSelection: (tag) ->
+        tag.name
+
+  buildNewTag = (elem) ->
+    # Build our tag and add it to the page
+    # We first check who's the parent node to manage the class
+    buttons = $("<button></button>").text("-").addClass("btn").addClass("rm-tag").on("click", removeTag)
+    addButton = $("<button></button>").text("+").addClass("btn").addClass("add-tag").on("click", addTag)
+    classes = $(elem).parent().parent().attr "class"
+    if classes.indexOf("container-fluid") != -1
+      tag_class = "root-tag"
+      buttons = buttons.before addButton
+    else if classes.indexOf("root-tag") != -1
+      tag_class = "sub-tag"
+      buttons = buttons.before addButton
+    else if classes.indexOf("sub-tag") != -1
+      tag_class = "sub-sub-tag"
+
+    # We create the HTML tag directly
+    $("<li></li>").
+      addClass(tag_class).
+      addClass("tag").
+      addClass("span2").
+      attr("id", elem.tag.id).
+      append(
+        $("<div></div>").
+        addClass("tag-name").
+        text(elem.tag.name).
+        append(buttons)
+      ).
+      append($("<ul></ul>"))
+
+  addRootTag = (e) ->
+    select = $("<div></div>")
+    $(this).parent().append(select)
+    buildTagsSelect(select)
+    select.on "change", (e) =>
+      getTag e.val, (tag) =>
+        @tag = tag
+        $.ajax
+          url: '/api/v1/elections/'+ $(".election-tags").attr("id") + '/addtag'
+          type: 'POST'
+          data:
+            tagId: tag.id
+          success: (response, status, xhr) =>
+            select.select2("destroy")
+            $(".election-tags").prepend buildNewTag(@)
+
+  addTag = (e) ->
+    select = $("<div></div>")
+    $(this).parent().append(select)
+    buildTagsSelect(select)
+
+    select.on "change", (e) =>
+      getTag e.val, (tag) =>
+        if tag == {}
+          false
+        else
+          @tag = tag
+          $.ajax
+            url: '/api/v1/elections/'+ $(".election-tags").attr("id") + '/addtag'
+            type: 'POST'
+            data:
+              tagId: tag.id
+              parentTagId: $(this).parent().parent().attr("id")
+            success: (response, status, xhr) =>
+              # Remove select2, we don't need it anymore
+              select.select2("destroy")
+              $(this).parent().next().prepend buildNewTag(@)
+            error: (response, status, body) ->
+              if $(".alert").size() == 0
+                $("body .container-fluid").prepend $('<div class="alert alert-error"></div>')
+              $(".alert").text(response.responseText)
+              $(".alert").show()
+
+  removeTag = (e) ->
+    $.ajax
+      url: '/api/v1/elections/' + $(".election-tags").attr("id") + '/removetag'
+      type: 'DELETE'
+      data:
+        tagId: $(this).parent().parent().attr('id')
+      success: (response, status, body) =>
+        $(this).parent().parent().remove()
+      error: (response, status, body) =>
+        if response.status == 200
+          $(this).parent().parent().remove()
+
+
+  $(".add-root-tag").on "click", addRootTag
+  $(".add-tag").on "click", addTag
+  $(".rm-tag").on "click", removeTag
+

app/assets/javascripts/new_admin/elections.js.coffee

@@ -0,0 +1,8 @@
+$ ->
+  $("#election_name").on "keyup", (e) ->
+    $("#election_namespace").val(
+      $(this).val().toLowerCase().replace /\s+/g, '-'
+    )
+
+  $("#election_namespace").on "keypress", (e) ->
+    $("#election_name").off "keyup"

app/assets/stylesheets/new_admin/application.css

@@ -0,0 +1,11 @@
+/*
+* This is a manifest file that'll automatically include all the stylesheets available in this directory
+* and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
+* the top of the compiled file, but it's generally better to create a new file per style scope.
+*
+*= require_tree .
+*= require_self
+*= require bootstrap
+*= require bootstrap-datepicker
+*= require select2
+*/

app/assets/stylesheets/new_admin/candidacies.css.sass

@@ -0,0 +1,37 @@
+$candidacy_height: 50px
+$candidacy_width: 250px
+$candidacy_link_width: 220px
+$candidacy_delete_padding: ($candidacy_width - $candidacy_link_width) / 2
+$candidacy_border_size: 1px
+$candidacy_border_color: #c2c2c2
+$candidacy_published_color: #DCF7E3
+$candidacy_unpublished_color: #F2D3D3
+
+
+.candidacy
+  border: $candidacy_border_size solid $candidacy_border_color
+  display: inline-block
+  width: $candidacy_width
+  a
+    display: inline-block
+    height: $candidacy_height
+    width: $candidacy_link_width
+    vertical-align: middle
+    &.candidacy-published
+      background-color: $candidacy_published_color  
+    &.candidacy-unpublished
+      background-color: $candidacy_unpublished_color
+    &.candidacy-delete
+      border-left: $candidacy_border_size solid darken($candidacy_border_color, 20%)
+      float: right
+      text-align: center
+      height: 100%
+      padding-top: $candidacy_delete_padding
+      padding-bottom: $candidacy_delete_padding
+      font-size: 40px
+      color: darken($candidacy_unpublished_color, 40%)
+      width: $candidacy_width - $candidacy_link_width - $candidacy_border_size
+      background-color: darken($candidacy_unpublished_color, 20%)
+
+#s2id_candidacy_candidates .select2-choice
+  height: 50px

app/assets/stylesheets/new_admin/countries.css.sass

@@ -0,0 +1,2 @@
+img.flag
+  height: 30px

app/assets/stylesheets/new_admin/election.css.sass

@@ -0,0 +1,18 @@
+.election-publication
+  display: block
+  width: 30px
+  height: 30px
+  border-radius: 15px
+
+a.election-published
+  @extend .election-publication
+  background-color: green
+  box-shadow: 1px 1px 3px 3px rgba(0, 0, 0, 0.5) inset
+
+a.election-unpublished
+  @extend .election-publication
+  background-color: red
+  box-shadow: -1px 2px 3px 1px rgba(0, 0, 0, 0.9), -1px 2px 10px rgba(255, 255, 255, 0.6) inset
+
+#s2id_election_country_id
+  width: 224px