#5 Add index page with table

Author: marjinal1st

app/assets/javascripts/kebapage/media.js

@@ -0,0 +1,19 @@
+// Place all the behaviors and hooks related to the matching controller here.
+// All this logic will automatically be available in application.js.
+
+Dropzone.options.mediaDropzone = {
+    paramName: "attachment",
+    maxFilesize: 2,
+    clickable: true,
+    addRemoveLinks: true,
+    init: function () {
+      return this.on('removedfile', function(file) {
+        if (file.xhr) {
+          return $.ajax({
+            url: "" + ($("#media-dropzone").attr("action")) + "/" + (JSON.parse(file.xhr.response).id),
+            type: 'DELETE'
+          });
+        }
+      });
+    }
+};

app/assets/javascripts/kebapage/photos.js

@@ -2,9 +2,14 @@
 
 module Kebapage
   class MediaController < ApplicationController
+
+    def index
+      @media = Medium.all
+      @medium = Medium.new
+    end
+
     def create
       @medium = Medium.create(attachment: params[:attachment ])
-      puts #{params[:attachment]}
       render json: @media
     end
 
@@ -13,14 +18,5 @@ def destroy
       @medium.destroy
       render nothing: true
     end
-
-    def photos
-      @uploads = Medium.all
-
-      respond_to do |format|
-        format.json { render json: @uploads }
-        format.js
-      end
-    end
   end
 end

app/assets/stylesheets/kebapage/photos.css app/assets/stylesheets/kebapage/media.css

@@ -0,0 +1,37 @@
+=stylesheet_link_tag 'kebapage/application'
+
+.form-group
+  =form_for @medium, multipart: true, html: { class: :dropzone, id: 'media-dropzone' } do |f|
+    =f.hidden_field :attachment
+
+.panel.panel-default.grid
+  .panel-heading
+    %i.icon-table.icon-large
+    Media Manager Index Page
+
+  %table.table
+    %thead
+      %tr
+        %th #
+        %th Filetype
+        %th File size
+        %th Upload date
+        %th.actions
+          Actions
+
+    %t.body.success
+      - @media.each do |media|
+        %tr
+          %td
+            = (@media.index media) + 1
+          %td
+            = media.attachment_content_type
+          %td
+            = media.attachment_file_size.to_i / 1024
+          %td
+            = media.attachment_updated_at
+          %td.action
+            %a.btn.btn-success{href: '#'}
+              %i.icon-zoom-in
+
+=javascript_include_tag 'kebapage/application'

app/controllers/kebapage/media_controller.rb

@@ -23,20 +23,3 @@
       =f.hidden_field :attachment
 
 =javascript_include_tag "kebapage/application"
-:javascript
-  Dropzone.options.photoDropzone = {
-      paramName: "attachment",
-      maxFilesize: 2,
-      clickable: true,
-      addRemoveLinks: true,
-      init: function () {
-          return this.on('removedfile', function(file) {
-            if (file.xhr) {
-              return $.ajax({
-                url: "" + ($("#media-dropzone").attr("action")) + "/" + (JSON.parse(file.xhr.response).id),
-                type: 'DELETE'
-              });
-            }
-          });
-      }
-  };

app/views/kebapage/media/index.html.haml

@@ -1,7 +1,5 @@
 Kebapage::Engine.routes.draw do
-  resources :media, only: [:create, :destroy, :photos] do
-    get :media, on: :collection
-  end
+  resources :media, only: [:index, :create, :destroy]
   resources :static_pages, except: [:show]
   root 'static_pages#index'
 end