Update bulletin file sorting with drag icon and unified layout

app/models/bulletin_file.rb

@@ -10,6 +10,8 @@ class BulletinFile
   field :title, localize: true
   field :choose_lang, :type => Array, :default => ["en","zh_tw"]
   field :privacy_type, type: String, default: 'public'
+  field :position, type: Integer, default: 0
+  default_scope ->{ order_by(position: :asc) }
   belongs_to :bulletin
   def self.to_fronted(locale=I18n.locale)
     self.all.map{|file| file.to_fronted(locale)}.compact rescue []

app/views/admin/announcements/_form.html.erb

@@ -4,6 +4,19 @@
   <%= stylesheet_link_tag "lib/main-list" %>
 <% end %>
 <style type="text/css">
+  .sort-order-icon {
+    font-size: 25px;
+  }
+  .ui-state-highlight { 
+    height: 40px; 
+    background-color: #fcf8e3; 
+    border: 1px dashed #fbeed5; 
+    margin-bottom: 10px;
+    list-style: none;
+  }
+  .exist .file-link {
+    cursor: grab; 
+  }
   .icons-list-2 {
     cursor: all-scroll;
   }
@@ -589,14 +602,16 @@
         <% if @bulletin && !@bulletin.bulletin_files.blank? %>
           <div class="exist">
             <% @bulletin.bulletin_files.each_with_index do |bulletin_file, i| %>
-              <%= f.fields_for :bulletin_files, bulletin_file do |f| %>
-                <%= render :partial => 'form_file', :object => bulletin_file, :locals => {:f => f, :i => i} %>
-              <% end %>
-            <% end %> 
+              <div class="file-sort-item">
+                <%= f.fields_for :bulletin_files, bulletin_file do |ff| %>
+                  <%= ff.hidden_field :position, class: "file-position" %>
+                  <%= render :partial => 'form_file', :object => bulletin_file, :locals => {:f => ff, :i => i} %>
+                <% end %>
+              </div>
+            <% end %>
             <hr>
           </div>
         <% end %>
-
         <!-- Add -->
         <div class="add-target">
         </div>
@@ -937,4 +952,32 @@
     });
     add_click_for_privacy()
   });
+$(function() {
+  // 唯一的初始化函式
+  function init_exist_sortable() {
+    var $container = $(".exist");
+    
+    // 如果已經初始化過就銷毀，防止重複綁定造成的跳針
+    if ($container.data("ui-sortable")) {
+      $container.sortable("destroy");
+    }
+
+    $container.sortable({
+      items: ".file-sort-item",      
+      handle: ".sort-order-icon, .file-link", 
+      axis: "y",
+      placeholder: "ui-state-highlight",
+      forcePlaceholderSize: true,
+      update: function(event, ui) {
+        $(".exist .file-sort-item").each(function(index) {
+          $(this).find("input.file-position").val(index);
+        });
+        console.log("排序數值已成功更新");
+      }
+    });
+  }
+
+  init_exist_sortable();
+  
+});
 </script>

app/views/admin/announcements/_form_file.html.erb

@@ -2,6 +2,7 @@
   <div class="fileupload fileupload-new start-line" data-provides="fileupload">
 <% else %>
   <div class="fileupload fileupload-exists start-line" data-provides="fileupload">
+    <i class="icons-list-2 sort-order-icon"></i>
     <% if form_file.file.blank? %>
       <%= t(:no_file) %>
     <% else %>