Add select_albums.

app/controllers/admin/galleries_controller.rb

@@ -660,6 +660,11 @@ class Admin::GalleriesController < OrbitAdminController
     end
   end
 
+  def select_albums
+    filter_album()
+    @category_id_albums_maps = @fiter_albums.group_by{|album| album.category_id}
+  end
+
   private
     def crop_but_no_backup(image)
       fname = image.file.path

app/views/admin/galleries/_select_albums_form.html.erb

@@ -0,0 +1,198 @@
+<% unless @include_js_css_flag %>
+  <%= javascript_include_tag "lib/checkbox.card.js" %>
+  <%= stylesheet_link_tag 'basic/global' %>
+  <%= stylesheet_link_tag 'member_select' %>
+  <style>
+    .modal-backdrop, .modal-backdrop.fade.in {
+      opacity: 0.8;
+      filter: alpha(opacity=80);
+    }
+    .modal-header {
+      padding: 9px 15px;
+      border-bottom: 1px solid #eee;
+    }
+    .modal-header h3 {
+      margin: 0;
+      line-height: 30px;
+      font-weight: bold;
+      color: inherit;
+      text-rendering: optimizelegibility;
+    }
+    .modal-body input, .modal-body label {
+      font-size: 14px;
+      font-weight: normal;
+      line-height: 20px;
+    }
+    .modal {
+      position: fixed;
+      top: 10%;
+      left: 50%;
+      z-index: 1050;
+      width: 560px;
+      margin-left: -280px;
+      background-color: #ffffff;
+      border: 1px solid #999;
+      border: 1px solid rgba(0, 0, 0, 0.3);
+      *border: 1px solid #999;
+      -webkit-border-radius: 6px;
+      -moz-border-radius: 6px;
+      border-radius: 6px;
+      outline: none;
+      -webkit-box-shadow: 0 3px 7px rgb(0 0 0 / 30%);
+      -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
+      box-shadow: 0 3px 7px rgb(0 0 0 / 30%);
+      -webkit-background-clip: padding-box;
+      -moz-background-clip: padding-box;
+      background-clip: padding-box;
+    }
+    .modal-body input[type="checkbox"] {
+      cursor: pointer;
+    }
+    .checkbox-card li {
+      width: 100px;
+      height: auto;
+    }
+    .selected_album {
+      display: inline-block;
+    }
+    #albums-filter .tabs-left > .nano {
+      width: 160px;
+      min-height: 425px;
+      float: left;
+      margin-right: 1em;
+    }
+    .albums-filter-result {
+      min-height: 360px;
+      width: auto;
+    }
+    .checkbox-card li.active {
+      background-color: #0088cc;
+    }
+    .selected_album img {
+      width: 100px;
+    }
+  </style>
+  <% @include_js_css_flag = true %>
+<% end %>
+<% index = '' unless defined?(index) %>
+<div class="control-group">
+  <label class="control-label muted"><%= t('gallery.album') %></label>
+  <div class="controls">
+    <div id="selected_albums<%= index %>" class="selected_albums">
+      <% albums.each do |album| %>
+        <span class="alert alert-info selected_album" id="<%= album.id %>">
+          <span class='close remove_album' onclick='removeAlbum<%=index%>($(this))'>x</span>
+          <% if album.cover == "default" %>
+           <%= image_tag "gallery/default.jpg" %>
+          <% else %>
+           <img src="<%= album.cover_path %>">
+          <% end %>
+          <p class="album_name"><%= album.name %></p>
+          <%= hidden_field_tag field, album.id %>
+        </span>
+      <% end %>
+    </div>
+    <a class="btn btn-primary btn-small select_album_modal<%=index%>"><%= t(:add) %></a>
+  </div>
+</div>
+<script type="text/javascript">
+  selected_albums<%=index%> = Array();
+
+  $(function(){
+    $.each($("#selected_albums<%= index %> .selected_album"),function(i){
+      selected_albums<%=index%>.push($(this).attr("id"));
+    });
+
+    $(".select_album_modal<%=index%>").click(function(){
+      if($("#select_album<%=index%>").length==0) {
+        $("body").append("<span id='select_album<%=index%>'></span>");
+        $('.checkbox-card').cardCheck();
+      }
+      $.post("<%= select_albums_admin_galleries_path %>?index=<%=index%>",function(modal){
+        $("#select_album<%=index%>").html(modal);
+        $('#albums-filter').on('shown.bs.modal', function() {
+          $("#albums-filter .nano").nanoScroller();
+        });
+        $('#albums-filter').on('hidden.bs.modal', function () {
+          $("#select_album<%=index%>").remove();
+        });
+        updateModal<%=index%>();
+        $("#albums-filter").modal('show');
+      });
+    });
+
+  });
+
+  var addByCategory<%=index%> = function(category_id){
+    var flag = true;
+    var BreakException = {};
+    try {
+      selected_albums<%=index%>.forEach(function(album_id){
+          if($("#album_ids_"+category_id+"_"+album_id).prop('checked')){
+            flag = false;
+          }
+          if(!flag){
+            throw BreakException;
+          }
+      })
+    } catch (e) {
+      if (e !== BreakException) throw e;
+    }
+    if(flag){
+      $.each($("#category_"+category_id+" .check-item"), function(){
+        selected_albums<%=index%>.push($(this).find("input[type='checkbox']").val());
+      });
+    }
+  }
+
+  var removeAlbum<%=index%> = function(album){
+    var id = $(album).parent().attr('id');
+    $("#select_album<%=index%> input[type='checkbox'][value=\""+id+"\"]").prop('checked', false).parent('.check-item').removeClass('active').css('display','');
+    selected_albums<%=index%> = $.grep(selected_albums<%=index%>, function(value) {return value != id;});
+    $(album).parent().remove();
+  }
+  Array.prototype.unique = function(){
+    const distinct = (value, index, self) =>{
+      return self.indexOf(value) === index;
+    }
+    return this.filter(distinct);
+  }
+  var updateUsers<%=index%> = function(){
+    $.each($(".category_field input:checked"), function(){
+      addByCategory<%=index%>($(this).val());
+    });
+
+    $("#selected_albums<%= index %>").html("");
+    selected_albums<%=index%> = selected_albums<%=index%>.unique();
+    $.each(selected_albums<%=index%>, function(i, album_id){
+      var wrapper = $("input[value='"+album_id+"']").parent();
+      var album_name = wrapper.find(".album_name").html();
+      $("#selected_albums<%= index %>").append(
+          " <span class='alert alert-info selected_album' id='"+album_id+"'>"+
+          "<span class='close remove_album' onclick='removeAlbum<%=index%>($(this))'>x</span>"+
+          "<img src=\"" + wrapper.find('img').attr('src') + "\">" +
+          "<p class=\"album_name\">" + album_name + "</p>" +
+          "<input type='hidden' name='<%= field %>' value='"+album_id+"' >"+
+          "</span>"
+        );
+    });
+
+  }
+
+  var updateModal<%=index%> = function(){
+    $.each($("#selected_albums<%= index %> .selected_album"),function(){
+      var album_id = $(this).attr('id');
+      $("input[value='"+album_id+"']").parent("li").hide().addClass('active').find("input[type='checkbox']").prop('checked', true);
+    });
+    
+    $('.check-item').click(function(){
+      var check_box = $(this).find("input[type='checkbox']"); 
+      var album_id = check_box.val();
+      if(check_box.prop('checked')){
+        selected_albums<%=index%>.push(album_id);
+      }else{
+        selected_albums<%=index%> = $.grep(selected_albums<%=index%>, function(value) {return value != album_id;});
+      }
+    });
+  }
+</script>

app/views/admin/galleries/select_albums.html.erb

@@ -0,0 +1,85 @@
+<div id="albums-filter" class="modal fade">
+  <div class="modal-header">
+    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+    <h3><%= t('list.user') %></h3>
+  </div>
+  <div class="modal-body">
+    <div class="tabbable tabs-left">
+      <div class="nano">
+        <div class="content">
+          <ul class="nav nav-pills nav-stacked">
+            <li class="active"><a href="#all" data-toggle="tab"><%= t('category') %></a></li>
+            <% @categories.each do |category| %>
+              <li class=""><a href="#category_<%= category.id %>" data-toggle="tab"><%= category.title %></a></li>
+            <% end %>
+          </ul>
+        </div>
+      </div>
+      <div class="tab-content">
+        <div class="tab-pane fade in active" id="all">
+            <fieldset class="category_field">
+              <% @categories.each do |category| %>
+                <label class="checkbox inline">
+                  <%= check_box_tag 'category_ids[]', category.id, false, :id => "category_ids_#{category.id}" %> <%= category.title %>
+                </label>
+              <% end %>
+            </fieldset>
+        </div>
+
+        <% @categories.each do |category| %>
+          <div class="tab-pane fade" id="category_<%= category.id %>">
+              <fieldset class="clearfix">
+                <div class="albums-filter-result nano">
+                  <div class="content">
+                    <i class="icon-search"></i>
+                    <input class="search_names" placeholder="<%=t('users.name')%>" style="margin: 1em;">
+                    <div style="margin-bottom: 1em;"></div>
+                    <ul class="checkbox-card clearfix">
+                      <% @category_id_albums_maps[category.id].to_a.each do |album| %>
+                        <li class="check-item">
+                          <label>
+                            <% if album.cover == "default" %>
+                             <%= image_tag "gallery/default.jpg" %>
+                            <% else %>
+                             <img src="<%= album.cover_path %>">
+                            <% end %>
+                            <p class="album_name"><%= album.name %></p>
+                          </label>
+                          <%= check_box_tag 'album_ids[]', album.id , false , :id => "album_ids_#{category.id}_#{(album.id rescue '')}" %>
+                        </li>
+                      <% end %>
+                    </ul>
+                  </div>
+                </div>
+              </fieldset>
+          </div>
+        <% end %>
+        <div class="form-actions condition">
+          <button type="button" class="btn" data-dismiss="modal"><%= t(:cancel) %></button>
+          <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="updateUsers<%=@index rescue ''%>()"><%= t(:submit) %></button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<script type="text/javascript">
+  $('#albums-filter a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
+    try{
+      var target = $($(e.target).attr("href"));
+      target.find('.nano').nanoScroller({ scrollTop: 0, iOSNativeScrolling: true });
+    }catch(e){};
+  });
+  $(document).ready(function(){
+    $('.search_names').off('input').on('input',function(){
+      var name = $(this).val();
+      var $check_items = $(this).parent().find('.check-item');
+      $check_items.each(function(i,item){
+        if( $(item).find('.user-name').text().search(name) == -1){
+          $(item).css('display','none');
+        }else{
+          $(item).css('display','');
+        }
+      })
+    })
+  })
+</script>

config/routes.rb

@@ -76,6 +76,9 @@ Rails.application.routes.draw do
           get "excel_format"
           post "importimages"
         end
+        collection do
+          post 'select_albums'          
+        end
       end
       resources :images
       post "galleries/upload_image" => "galleries#upload_image"