multiple delete of images

CHANGELOG.md

@@ -4,7 +4,11 @@ All notable changes to this project will be documented in this file.
 Latest
 ------------------
 ### Fixed
-- don't show scrollbar on envirnment variable field (#347)
+- Don't show scrollbar on environment variable field (#347)
+
+### Added
+- Edit Service Name
+- Remove Multiple Images
 
 0.2.0 - 2014-09-09
 ------------------

app/assets/javascripts/init.js

@@ -45,6 +45,8 @@
 
     $('#template_flow button.preview').previewTemplate();
 
+    $('#images_flow section.image').imageActions();
+
     $('header.application h1 li:last-of-type').editApplicationName();
 
     var enableNewItem = function(addedItem) {

app/assets/javascripts/jquery.image_actions.js

@@ -0,0 +1,49 @@
+(function($) {
+  $.PMX.WatchImageSelections = function($el, options) {
+    var base = this;
+
+    base.$el = $el;
+
+    base.defaultOptions = {
+      allSelector: 'input#all',
+      observerSelector: 'input[type=checkbox]',
+      submitSelector: 'button[type=submit]',
+      deleteCheckbox: '.images input[type=checkbox]'
+    };
+
+    base.init = function () {
+      base.options = $.extend({}, base.defaultOptions, options);
+      base.bindEvents();
+    };
+
+    base.bindEvents = function() {
+      base.$el.on('change', base.options.allSelector, base.checkboxStateHandler);
+      base.$el.on('change', base.options.observerSelector, base.submitStateHandler);
+    };
+
+    base.submitStateHandler = function(e) {
+      var checked = base.$el.find(base.options.deleteCheckbox).filter(':checked'),
+          submitButton = base.$el.find(base.options.submitSelector);
+
+      if (checked.length > 0) {
+        submitButton.prop('disabled', false);
+      } else {
+        submitButton.prop('disabled', true);
+      }
+    };
+
+    base.checkboxStateHandler = function(e) {
+      var $target = $(e.currentTarget),
+          checked = $target.is(':checked');
+
+      base.$el.find(base.options.deleteCheckbox).prop('checked', checked);
+    };
+  };
+
+  $.fn.imageActions = function(options) {
+    return this.each(function() {
+      (new $.PMX.WatchImageSelections($(this), options)).init();
+    });
+  };
+
+})(jQuery);

app/assets/stylesheets/panamax.css.scss

@@ -2,6 +2,7 @@
 @import 'ctl_base_ui/mixins';
 @import 'ctl_base_ui/icons';
 
+
 body {
   min-width: 960px;
 }
@@ -717,3 +718,52 @@ pre.prettyprint {
   }
 
 }
+
+.styled-check {
+  width: 20px;
+  margin: 0 auto;
+  position: relative;
+
+  input[type=checkbox] {
+    visibility: hidden;
+
+    &:checked + label:after {
+      opacity: 1.0;
+    }
+  }
+
+  label {
+    cursor: pointer;
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    top: 0;
+    left: 0;
+    border-radius: 4px;
+    border: 2px solid $grey;
+
+    &:hover::after {
+      opacity: 0.33;
+    }
+
+    &:after {
+      opacity: 0;
+      content: '';
+      position: absolute;
+      width: 9px;
+      height: 5px;
+      background: transparent;
+      top: 4px;
+      left: 4px;
+      border: 3px solid $medium_grey;
+      border-top: none;
+      border-right: none;
+
+      -webkit-transform: rotate(-45deg);
+      -moz-transform: rotate(-45deg);
+      -o-transform: rotate(-45deg);
+      -ms-transform: rotate(-45deg);
+      transform: rotate(-45deg);
+    }
+  }
+}

app/assets/stylesheets/panamax/images.css.scss

@@ -7,13 +7,71 @@
   }
 }
 
+#images_flow {
+  .select-all {
+    margin-top: 30px;
+    float: right;
+    height: 36px;
+    width: 110px;
+
+    .label {
+      float: left;
+      color: $grey;
+      padding: 5px 5px;
+    }
+
+    .styled-check {
+      float: left;
+    }
+  }
+
+  .submit-button {
+    margin-top: 20px;
+    width: 165px;
+    position: relative;
+    padding-left: 25px;
+    text-align: left;
+    text-decoration: none;
+    float: right;
+
+    &::after {
+      @include icon-white;
+      @extend .icon-x;
+      content: '';
+      position: absolute;
+      left: 9px;
+      top: 14px;
+      display: block;
+      height: 10px;
+      width: 10px;
+    }
+    &:disabled {
+      background-color: $grey;
+
+      &:hover {
+        @include box-shadow(0, 0, 0, 0);
+        border: none;
+        cursor: default;
+      }
+
+      &:after {
+        @include icon-light-grey;
+      }
+    }
+  }
+}
+
+ul.images {
+  clear: both;
+}
+
 ul.images li {
   border-bottom: $light_grey 1px solid;
   overflow: auto;
   padding-bottom: 22px;
 
   h3 {
-    margin: 00;
+    margin: 0;
     padding: 22px 0 0 0;
   }
 
@@ -41,27 +99,29 @@ ul.images li {
     dd {
       width: 90%;
       float: right;
-    }
-  }
-  .actions {
-    text-align: right;
-    float: right;
 
-    .delete-action {
-      margin-top: -5px;
-      float: right;
-      height: 20px;
+      .delete-action {
+        margin-top: -5px;
+        float: right;
+        height: 20px;
 
-      &:after {
-        top: 0;
-        left: 0;
-        @extend .icon-x-large;
-        @include icon-light-grey;
-      }
+        &:after {
+          top: 0;
+          left: 0;
+          @extend .icon-x-large;
+          @include icon-light-grey;
+        }
 
-      &:hover:after {
-        @include icon-red;
+        &:hover:after {
+          @include icon-red;
+        }
       }
     }
   }
+  .actions {
+    text-align: right;
+    float: right;
+    box-sizing: border-box;
+    width: 40px;
+  }
 }

app/assets/stylesheets/panamax/service_details.scss

@@ -5,6 +5,12 @@
 
 .service-details {
   padding-bottom: 20px;
+
+  a.button-add {
+    margin: 10px 0;
+    padding-left: 40px;
+    padding-right: 20px;
+  }
 }
 
 .service-help-icon {

app/controllers/images_controller.rb

@@ -14,4 +14,27 @@ def destroy
   rescue => ex
     handle_exception(ex, redirect: images_url)
   end
+
+  def destroy_multiple
+    if params[:delete]
+      result = LocalImage.batch_destroy(params[:delete].keys)
+      build_message(result)
+    end
+    redirect_to images_url
+  rescue => ex
+    handle_exception(ex, redirect: images_url)
+  end
+
+  private
+
+  def build_message(result)
+    count = result[:count]
+    failed = result[:failed]
+    unless count == 0
+      flash[:notice] = "#{count} #{'image'.pluralize(count)} successfully removed"
+    end
+    unless failed.empty?
+      flash[:alert] = failed.inject('') { | memo, message| memo << "<p>#{message}</p>" }
+    end
+  end
 end

app/models/local_image.rb

@@ -1,9 +1,35 @@
 class LocalImage < BaseImage
+  PANAMAX_IMAGE_NAMES = ['centurylink/panamax-ui', 'centurylink/panamax-api']
+
+  def panamax_image?
+    PANAMAX_IMAGE_NAMES.include?(name)
+  end
+
   def local?
     true
   end
 
   def name
     tags.first
   end
+
+  def self.batch_destroy(image_ids)
+    count = 0
+    failed = image_ids.each_with_object(Set.new) do |id, fail_list|
+      begin
+        image = LocalImage.find_by_id(id)
+        if image.destroy
+          count += 1
+        else
+          fail_list << "#{image.name} failed to be removed"
+        end
+      rescue => ex
+        fail_list << ex.message
+      end
+    end
+    {
+      count: count,
+      failed: failed
+    }
+  end
 end

app/views/images/index.html.haml

@@ -5,20 +5,33 @@
                                                 "Images" ]
 
 - unless @images.blank?
-  %ul.images
-    - @images.each do |image|
-      %li
-        %h3= image.tags.first
-        %h6= image.tags[1..-1].try(:join, ', ')
-        %dl
-          %dt
-            Image ID:
-          %dd
-            =image.id
-          %dt
-            Image Size:
-          %dd
-            =number_to_human_size(image.virtual_size)
-        .actions
-          = link_to 'Delete', image_path(image.id), method: :delete, class: 'delete-action'
-
+  = form_tag destroy_multiple_images_path, method: :delete do
+    %section.image
+      = button_tag 'Remove Selected', type: 'submit', class: 'button-negative submit-button', disabled: true
+      .select-all
+        .label
+          Select All
+        .styled-check
+          = check_box_tag 'all', 1
+          %label{ :for => 'all' }
+      %ul.images
+        - @images.each do |image|
+          %li
+            %h3= image.tags.first
+            %h6= image.tags[1..-1].try(:join, ', ')
+            %dl
+              %dt
+                Image ID:
+              %dd
+                =image.id
+              %dt
+                Image Size:
+              %dd
+                =number_to_human_size(image.virtual_size)
+            .actions
+              - unless image.panamax_image?
+                .styled-check
+                  = check_box_tag "delete[#{image.id}]", 1
+                  %label{ :for => "delete_#{image.id}" }
+      %section
+        = button_tag 'Remove Selected', type: 'submit', class: 'button-negative submit-button', disabled: true

config/routes.rb

@@ -13,7 +13,11 @@
     end
   end
 
-  resources :images, only: [:index, :destroy]
+  resources :images, only: [:index, :destroy] do
+    collection do
+      delete 'destroy_multiple'
+    end
+  end
 
   resources :template_repos, only: [:index, :create, :destroy] do
     member do