Add JS for new admin layout/News views (#931)

* Update structure.sql * Revert "Update structure.sql" This reverts commit 682e2d8. * commit * index * Update edit.html.haml * Create blogs.js * Update blogs.js * public image * update * form * js * js * Update binx_admin.js * Update edit.html.haml * Update _public_image.html.haml * change to haml * Update blogs.js * ahh * Fix? * mmmm * Update _public_image.html.erb * Update _public_image.html.erb * Update _public_image.html.erb * revert * create new partial * revert * revert * Add blueimp and script-loader * Update admin_application.js * revert * eh? * working on js * woof * eh * remove blueimp, add filepond * commit * Filepond working, drag and drop working, fixing image preview now * I'm sure there's a better way to do this, but for now I am doing what works * commit * more filepond * commit * remove filepond * What's uppy * ahhhhhh * deleter * beep * commit * Heyyyyoooooo testing works * re-add binxadminblogs to binxadmin * eep * spacing * final? * commit * Update application_css.scss * commit again * add progress bar styles * listicles js * commit * Error fixed/duplicates removed/scss moved to correct place * ope * remove listicle js * js for toggling radio buttons * Styling and rendering public images for admin blogs (#1061) * styling * commit * commit * commit * commit * working? * new page styles * Remove commented out html * listicle fixing, controller changes, refactor js * commit * done * commit * indent * commit * remove excess line * remove template variable, return string * Admin custom layouts revision (#1075) * remove excess line * Revert "remove excess line" This reverts commit 2cc30ed. * WIP * revised * reading over * ahhh why * commit * refactor public image partial * minor * hoooo boy * commit * css hide for custom layouts * hm * minor
bikeindex · Jul 25, 2019 · a44e63e · a44e63e
1 parent a4352dd
commit a44e63e
Show file tree

Hide file tree

Showing 24 changed files with 774 additions and 266 deletions.
diff --git a/app/controllers/admin/news_controller.rb b/app/controllers/admin/news_controller.rb
@@ -1,10 +1,10 @@
 class Admin::NewsController < Admin::BaseController
   before_filter :find_blog, only: [:show, :edit, :update, :destroy]
   before_filter :set_dignified_name
+  layout "new_admin"
 
   def index
     @blogs = Blog.order("created_at asc")
-    render layout: "new_admin"
   end
 
   def new

diff --git a/app/controllers/admin/organizations/custom_layouts_controller.rb b/app/controllers/admin/organizations/custom_layouts_controller.rb
@@ -1,8 +1,8 @@
 class Admin::Organizations::CustomLayoutsController < Admin::BaseController
   before_filter :find_and_authorize_organization
+  layout "new_admin"
 
   def index
-    render layout: "new_admin"
   end
 
   def edit

diff --git a/app/controllers/public_images_controller.rb b/app/controllers/public_images_controller.rb
@@ -25,7 +25,7 @@ def create
         @public_image.imageable = current_organization
       end
       @public_image.save
-      render "create" and return
+      render json: { public_image: @public_image } and return
     end
     flash[:error] = "Whoops! We can't let you create that image."
     redirect_to @public_image.present? ? @public_image.imageable : user_root_url
@@ -51,12 +51,16 @@ def destroy
     @imageable = @public_image.imageable
     imageable_id = @public_image.imageable_id
     imageable_type = @public_image.imageable_type
+    if imageable_type == "MailSnippet"
+      flash[:error] = "Whoops! How'd you do that? Can't delete mail snippet images."
+      redirect_to admin_organization_custom_layouts_path(imageable_id) and return
+    end
     @public_image.destroy
     flash[:success] = "Image was successfully deleted"
     if params[:page].present?
       redirect_to edit_bike_url(imageable_id, page: params[:page]) and return
     elsif imageable_type == "Blog"
-      redirect_to edit_admin_news_url(@imageable.title_slug) and return
+      redirect_to edit_admin_news_url(@imageable.title_slug), status: 303 and return
     else
       redirect_to edit_bike_url(imageable_id)
     end
@@ -88,13 +92,17 @@ def ensure_authorized_to_create!
   def current_user_image_owner(public_image)
     if public_image.imageable_type == "Bike"
       Bike.unscoped.find(public_image.imageable_id).owner == current_user
-    elsif public_image.imageable_type == "Blog"
+    elsif public_image.imageable_type == "Blog" || public_image.imageable_type == "MailSnippet"
       current_user && current_user.superuser?
     end
   end
 
   def permitted_parameters
-    params.require(:public_image).permit(:image, :name, :imageable, :listing_order, :remote_image_url, :is_private)
+    if params[:upload_plugin] == "uppy"
+      { image: params[:file], name: params[:name] }
+    else
+      params.require(:public_image).permit(:image, :name, :imageable, :listing_order, :remote_image_url, :is_private)
+    end
   end
 
   def find_image_if_owned

diff --git a/app/javascript/packs/application_css.scss b/app/javascript/packs/application_css.scss
@@ -27,3 +27,17 @@
 footer.primary-footer {
   display: none;
 }
+
+// Uppy Styles
+@import '@uppy/core/dist/style.css';
+@import '@uppy/dashboard/dist/style.css';
+@import '@uppy/progress-bar/dist/style.css';
+// Hide uppy file upload button because it's not needed
+.uppy {
+  .uppy-FileInput-btn {
+    display: none;
+  }
+  .uppy-Dashboard-poweredBy {
+    display: none;
+  }
+}
diff --git a/app/javascript/packs/pages/admin/binx_admin.js b/app/javascript/packs/pages/admin/binx_admin.js
@@ -6,6 +6,8 @@ import BinxAdminBikesEdit from "./bikes_edit.js";
 import BinxAdminRecoveryDisplayForm from "./recovery_display_form.js";
 import BinxAdminInvoices from "./invoices.js";
 import BinxAdminOrganizationForm from "./organization_form.js";
+import BinxAdminBlogs from "./blogs.js"
+import BinxAdminImageUploader from "./image_uploader.js"
 
 function BinxAdmin() {
   return {
@@ -48,6 +50,15 @@ function BinxAdmin() {
       if ($("#multi-mnfg-selector").length) {
         this.bikesMultiManufacturerUpdate();
       }
+
+      if ($("#blog-image-form").length > 0) {
+        const binxAdminBlogs = BinxAdminBlogs();
+        binxAdminBlogs.init();
+      }
+      if ($(".uppy").length > 0) {
+        const binxAdminImageUploader = BinxAdminImageUploader();
+        binxAdminImageUploader.init();
+      }
     },
 
     initAdminSearchSelect() {

diff --git a/app/javascript/packs/pages/admin/blogs.js b/app/javascript/packs/pages/admin/blogs.js
@@ -0,0 +1,59 @@
+import log from "../../utils/log";
+
+function BinxAdminBlogs() {
+  return {
+    init() {
+      this.editDate()
+      this.setIndexImage();
+      this.setIndex();
+      this.noPrimaryPhotoToggle();
+      this.publicImageDelete();
+    },
+
+    editDate() {
+      $("#change_published_date").on("click", e => {
+        e.preventDefault();
+        $("#blog-date").slideDown()
+      })
+    },
+
+    publicImageDelete() {
+      $('ul#public_images').on('click', ".image-delete-button", function(e) {
+        e.preventDefault();
+        const id = $(".image-delete-button").closest(".row").find("input").val()
+        $.ajax({
+          url: `/public_images/${id}`,
+          type: 'delete'
+        });
+        this.closest('li').remove()
+      })
+    },
+
+    noPrimaryPhotoToggle() {
+      const noPrimaryPhotoBox = $(".index_image_0")
+      noPrimaryPhotoBox.on("change", e => {
+        if (noPrimaryPhotoBox.prop("checked")) {
+          $(".index-image-select input").prop("checked", false)
+        }
+      })
+    },
+
+    setIndex() {
+      const index_image = $('#blog_index_image_id').val()
+      return $("li#" + index_image).find($("input")).prop("checked", true)
+    },
+
+    setIndexImage(e) {
+      $("ul#public_images").on("change", '.index-image-select input', function(e) {
+        e.preventDefault();
+        if ($('#blog_index_image_id').val != 0) {
+          $('#blog_index_image_id').val($(e.target).val());
+          $(".index_image_0").prop("checked", false)
+        }
+      })
+    },
+  };
+}
+
+
+export default BinxAdminBlogs
diff --git a/app/javascript/packs/pages/admin/image_uploader.js b/app/javascript/packs/pages/admin/image_uploader.js
@@ -0,0 +1,106 @@
+import log from "../../utils/log";
+
+// required for uppy file upload
+import 'es6-promise/auto'
+import 'whatwg-fetch'
+require('@uppy/core/dist/style.css')
+require('@uppy/dashboard/dist/style.css')
+window.Uppy = require('@uppy/core')
+window.XHRUpload = require('@uppy/xhr-upload')
+window.Dashboard = require('@uppy/dashboard')
+window.DragDrop = require('@uppy/drag-drop')
+window.Tus = require("@uppy/tus")
+window.ProgressBar = require("@uppy/progress-bar")
+window.FileInput = require('@uppy/file-input')
+window.Form = require("@uppy/form")
+
+
+
+function BinxAdminImageUploader() {
+  return {
+    init() {
+      this.uppyFileUpload();
+    },
+
+    uppyFileUpload() {
+      const uppyOne = new Uppy({
+        debug: true,
+        autoProceed: true
+      })
+      uppyOne
+        .use(FileInput, {
+          target: ".UppyForm",
+          inputName: "public_image[image]"
+        })
+        .use(XHRUpload, {
+          endpoint: "/public_images",
+          formData: true,
+          fieldName: "file",
+          method: "post"
+        })
+        .use(Dashboard, {
+          target: '.UppyDragDrop-One',
+          inline: true
+        })
+        .use(ProgressBar, {
+          target: '.UppyDragDrop-One-Progress',
+          hideAfterFinish: false
+        })
+      uppyOne.use(Form, {
+        target: "#new_public_image",
+        getMetaFromForm: true,
+        addResultToForm: true,
+        multipleResults: false,
+        submitOnSuccess: false,
+        triggerUploadOnSubmit: false
+      })
+      uppy.on('upload-success', (file, response) => {
+        $("ul#public_images").append(this.publicImageTemplate(response.body.public_image))
+      })
+    },
+
+    publicImageTemplate(image) {
+      const alt = image.name
+      const src = image.image.url
+      const id = image.id
+      return `<li>
+          <div class='card bg-light admin-public-image'>
+            <div class='card-body'>
+              <div class='row'>
+                <div class='col-md-2 col-sm-6 mt-auto'>
+                  <p>
+                    ${alt}
+                  </p>
+              </div>
+              <div class='col-md-8 col-sm-6 mt-auto'>
+               <textarea class='form-control'> &lt;img class='post-image' src='${src}' alt='ENTER YOUR TEXT HERE'&gt; </textarea>
+              </div>
+              <div class='col-md-2 col-sm-12'>
+                <div class='img-box'>
+                  <img src='${src}' alt='${alt}'/>
+                </div>
+              </div>
+            </div>
+            <hr/>
+            <div class='row mt-2'>
+              <div class='col-md-2'>
+                <a href='#' class="image-delete-button"> Delete</a>
+              </div>
+              <div class='col-md-8'>
+                <span> Copy the above text and paste it where you'd like it to appear in the post </span>
+              </div>
+              <div class='col-md-2'>
+                <div class="index-image-select">
+                  <input class="index_image_${id}" name="index_image_id" type="radio" value="${id}"></input>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </li>`
+    }
+  };
+}
+
+
+export default BinxAdminImageUploader
diff --git a/app/javascript/stylesheets/_admin.scss b/app/javascript/stylesheets/_admin.scss
@@ -176,3 +176,27 @@
     }
   }
 }
+
+.admin-public-image {
+  img {
+    max-width: 100%;
+    width: 85px;
+    height: auto;
+  }
+  font-size: 12px;
+  @include media-breakpoint-down(sm) {
+    max-height: 100%;
+    .img-box{
+      text-align: center;
+    }
+  }
+}
+
+.not-blog-public-images {
+  .image-delete-button {
+    display: none;
+  }
+  .index-image-select {
+    display: none;
+  }
+}
diff --git a/app/views/admin/news/_form.html.haml b/app/views/admin/news/_form.html.haml
@@ -1,2 +1,2 @@
-.blog-field
-  = f.text_area :body, placeholder: "Blog post (in markdown)", rows: 20
+.form-group
+  = f.text_area :body, placeholder: "Blog post (in markdown)", rows: 20, class: "form-control"
diff --git a/app/views/admin/news/_listicle_fields.html.haml b/app/views/admin/news/_listicle_fields.html.haml
@@ -1,25 +1,36 @@
-.listicle-block.row-fluid
-  %fieldset.well
-    .span10
-      .blog-field
-        = f.text_field :title, placeholder: 'Title', class: 'form-control'
-      .blog-field
-        = f.text_area :body, placeholder: 'Body content - HTML or Markdown', class: 'form-control'
-      .blog-field
-        = f.text_field :image_credits, placeholder: 'Image credits - should be a link in HTML or Markdown', class: 'form-control'
-    .span2{ class: "page_number_#{f.object.list_order}"}
-      .listicle-image-input
-        = f.file_field :image
-        %span.min-width-notice
+.card.bg-light.mt-2
+  .card-body
+    .row
+      .col-md-6
+        .form-group
+          = f.label "Title"
+          = f.text_field :title, placeholder: 'Title', class: 'form-control'
+      .col-md-6
+        .form-group
+          = f.label "Credits"
+          = f.text_field :image_credits, placeholder: 'Image credits - should be a link in HTML or Markdown', class: 'form-control'
+    .row
+      .col-md-12
+        .form-group
+          = f.label "Body"
+          = f.text_area :body, placeholder: 'Body content - HTML or Markdown', class: 'form-control'
+    .row
+      .col-md-6
+        .form-group
+          = f.file_field :image
+        %span
           min-width  726px
-      %label.index-image-select
-        <input type="radio" name="index_image_id" value="#{f.object.id}" class="index_image_#{f.object.id}">
-        Primary image
-      .list-order
+        %label.index-image-select
+          <input type="radio" name="index_image_id" value="#{f.object.id}" class="index_image_#{f.object.id}">
+          Primary image
+      .col-md-6
         %span
           Order
-        = f.number_field :list_order, placeholder: '1', min: 0, class: 'form-control'
-        %span.current-count
-    = f.hidden_field :_destroy, class: 'remove-listicle-block'
+        .form-group
+          = f.number_field :list_order, placeholder: '1', min: 0, class: 'form-control'
+          = f.hidden_field :_destroy
+
+
+
     %a.remove_fields
       Remove
diff --git a/app/views/admin/news/_listicle_form.html.haml b/app/views/admin/news/_listicle_form.html.haml
@@ -1,4 +1,4 @@
-= f.submit 'Save', class: 'button-green save-listicles'
+= f.submit 'Save', class: 'btn btn-success'
 #listicle_image
   - @blog.listicles.each do |l|
     - if l.image.present?
@@ -14,5 +14,6 @@
         /   Crop image
 = f.fields_for :listicles do |builder|
   = render 'listicle_fields', f: builder
-.padded.clearfix.listicle-block
-  = link_to_add_fields "Add a vignette", f, :listicles
+.row.mt-4.justify-content-center
+  .col.auto
+    = link_to_add_fields "Add a Vignette", f, :listicles