Merge pull request #31 from BlackPearl96/edit_rooms

edit room

Gemfile

@@ -24,6 +24,8 @@ gem "bootstrap4-kaminari-views"
 gem "config", "~> 2.0"
 gem "cocoon"
 gem "figaro"
+gem "carrierwave", "~> 0.10.0"
+gem "mini_magick", "~> 4.3"
 
 group :development, :test do
   gem "byebug", platforms: %i[mri mingw x64_mingw]

Gemfile.lock

@@ -46,7 +46,7 @@ GEM
       io-like (~> 0.3.0)
     arel (9.0.0)
     ast (2.4.0)
-    autoprefixer-rails (9.6.1)
+    autoprefixer-rails (9.6.1.1)
       execjs
     bcrypt (3.1.13)
     bindex (0.8.1)
@@ -61,6 +61,11 @@ GEM
       rails (>= 3.1)
     builder (3.2.3)
     byebug (11.0.1)
+    carrierwave (0.10.0)
+      activemodel (>= 3.2.0)
+      activesupport (>= 3.2.0)
+      json (>= 1.7)
+      mime-types (>= 1.16)
     childprocess (1.0.1)
       rake (< 13.0)
     chromedriver-helper (2.1.1)
@@ -83,10 +88,10 @@ GEM
     crass (1.0.4)
     database_cleaner (1.7.0)
     deep_merge (1.2.1)
-    devise (4.6.2)
+    devise (4.7.0)
       bcrypt (~> 3.0)
       orm_adapter (~> 0.1)
-      railties (>= 4.1.0, < 6.0)
+      railties (>= 4.1.0)
       responders
       warden (~> 1.2.3)
     diff-lcs (1.3)
@@ -141,6 +146,7 @@ GEM
       rails-dom-testing (>= 1, < 3)
       railties (>= 4.2.0)
       thor (>= 0.14, < 2.0)
+    json (2.2.0)
     kaminari (1.1.1)
       activesupport (>= 4.1.0)
       kaminari-actionview (= 1.1.1)
@@ -165,7 +171,11 @@ GEM
     marcel (0.3.3)
       mimemagic (~> 0.3.2)
     method_source (0.9.2)
+    mime-types (3.2.2)
+      mime-types-data (~> 3.2015)
+    mime-types-data (3.2019.0331)
     mimemagic (0.3.3)
+    mini_magick (4.9.5)
     mini_mime (1.0.2)
     mini_portile2 (2.4.0)
     minitest (5.11.3)
@@ -252,15 +262,14 @@ GEM
     sass-listen (4.0.0)
       rb-fsevent (~> 0.9, >= 0.9.4)
       rb-inotify (~> 0.9, >= 0.9.7)
-    sass-rails (5.0.7)
-      railties (>= 4.0.0, < 6)
+    sass-rails (5.1.0)
+      railties (>= 5.2.0)
       sass (~> 3.1)
       sprockets (>= 2.8, < 4.0)
       sprockets-rails (>= 2.0, < 4.0)
       tilt (>= 1.1, < 3)
-    sassc (2.0.1)
+    sassc (2.1.0-x86_64-linux)
       ffi (~> 1.9)
-      rake
     sassc-rails (2.1.2)
       railties (>= 4.0.0)
       sassc (>= 2.0)
@@ -320,6 +329,7 @@ DEPENDENCIES
   bootstrap (~> 4.3.1)
   bootstrap4-kaminari-views
   byebug
+  carrierwave (~> 0.10.0)
   chromedriver-helper
   cocoon
   coffee-rails (~> 4.2)
@@ -333,6 +343,7 @@ DEPENDENCIES
   jquery-rails
   kaminari (~> 1.1, >= 1.1.1)
   listen (>= 3.0.5, < 3.2)
+  mini_magick (~> 4.3)
   mysql2 (>= 0.4.4, < 0.6.0)
   pry-rails
   puma (~> 3.11)

app/assets/javascripts/manager/custom.js

@@ -9,6 +9,20 @@ function readURL(f, previewId) {
   }
 }
 
+function previewImages() {
+
+  var $preview = $('#preview').empty();
+  if (this.files) $.each(this.files, readAndPreview);
+
+  function readAndPreview(i, file) {
+    var reader = new FileReader();
+    $(reader).on("load", function() {
+      $preview.append($("<img/>", {src:this.result, height:150, width:150}));
+    });
+    reader.readAsDataURL(file);
+  }
+}
+
 $(document).ready(function(){
   $('#admin_table').DataTable({
     scrollY: 500,
@@ -76,4 +90,7 @@ $(document).ready(function(){
   });
 
   $('[data-toggle="tooltip"]').tooltip();
+
+  $('.preview-image').on("change", previewImages);
 });
+

app/assets/stylesheets/manager/custom.scss

@@ -1,6 +1,7 @@
 footer.sticky-footer {
   padding: 2rem 0;
   flex-shrink: 0;
+  float: left;
   .copyright {
     line-height: 1;
     font-size: 0.8rem;
@@ -112,6 +113,7 @@ body.sidebar-toggled {
 
 .create-room{
   margin: 30px 0;
+  width: 135px;
 }
 
 /* Style the sidenav links and the dropdown button */
@@ -344,3 +346,65 @@ a.account:hover {
   color: darkslategrey;
   text-decoration: none !important;
 }
+
+.image-detail{
+  width: 400px;
+  border-radius: 4%;
+  height: 300px;
+  padding: 10px;
+}
+
+td.action{
+  padding: 0;
+}
+
+.action{
+  padding: 0 10px 0 10px;
+  margin: 0 10px 0 10px;
+}
+
+.nested-image{
+  float: left;
+  margin: 10px 0px;
+}
+
+.nested-image:before {
+  content: 'x';
+  color: #000000c4;
+  font-weight: 600;
+  font-family: Arial, sans-serif;
+  font-size: 28px;
+}
+
+.nested-add-image{
+  margin: 10px 0px;
+}
+
+.show-image{
+  width: 100%;
+  float: left;
+}
+
+.thumb-image{
+  float: left;
+  padding: 0 20px 25px 0;
+}
+
+.links{
+  width: 100%;
+  float: left;
+}
+
+.submit{
+  width: 100%;
+  float: left;
+}
+
+.nested-image.btn.remove_fields.existing {
+  margin: -19px -50px 0;
+}
+
+.preview-image{
+  width: 200px;
+  float: left;
+}

app/controllers/manager/rooms_controller.rb

@@ -2,18 +2,35 @@
 
 module Manager
   class RoomsController < BaseController
+    before_action :load_room, only: %i[edit update]
+
+    def index
+      @rooms = Room.sort_by_name
+    end
+
     def new
-      @room = current_admin.rooms.build
+      @room = Room.new
+      @room.room_images.build
     end
 
     def edit; end
 
     def create
       @room = current_admin.rooms.build room_params
       if @room.save
-        redirect_to manager_root_path, flash: { success: t(".create_room") }
+        upload_images
+        redirect_to manager_room_path(@room), success: t(".create_room")
+      else
+        render :new, danger: t(".can't_create")
+      end
+    end
+
+    def update
+      if @room.update room_params
+        upload_images if params[:room_images]
+        redirect_to manager_room_path(@room), success: t(".update_success")
       else
-        render :new, flash: { danger: t(".can't_create") }
+        render :edit, danger: t(".update_fail")
       end
     end
 
@@ -22,7 +39,18 @@ def create
     def room_params
       params.require(:room).permit :name, :address, :rate_point, :description,
                                    :guest, :type_room, :acreage, :bed_room,
-                                   :bath_room, :images, :location_id
+                                   :bath_room, :location_id,
+                                   room_images_attributes: %i[id room_id image _destroy]
+    end
+
+    def load_room
+      @room = Room.find params[:id]
+    end
+
+    def upload_images
+      params[:room_images]["image"].each do |a|
+        @room_images = @room.room_images.create!(image: a)
+      end
     end
   end
 end

app/models/room.rb

@@ -1,9 +1,9 @@
 # frozen_string_literal: true
 
 class Room < ApplicationRecord
-  has_many_attached :images
   belongs_to :location
   belongs_to :user
+  has_many :room_images
 
   validates :name, presence: true, length: { maximum: 50 }
   validates :address, presence: true
@@ -13,4 +13,6 @@ class Room < ApplicationRecord
   validates :type_room, presence: true
 
   enum type_room: { private_room: 0, entire: 1 }
+
+  accepts_nested_attributes_for :room_images, allow_destroy: true
 end

app/models/room_image.rb

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+class RoomImage < ApplicationRecord
+  belongs_to :room
+  mount_uploader :image, ImageUploader
+
+  validates :image, presence: true
+end

app/uploaders/image_uploader.rb

@@ -0,0 +1,49 @@
+# frozen_string_literal: true
+
+class ImageUploader < CarrierWave::Uploader::Base
+  # Include RMagick or MiniMagick support:
+  # include CarrierWave::RMagick
+  include CarrierWave::MiniMagick
+
+  # Choose what kind of storage to use for this uploader:
+  storage :file
+  # storage :fog
+
+  # Override the directory where uploaded files will be stored.
+  # This is a sensible default for uploaders that are meant to be mounted:
+  def store_dir
+    "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
+  end
+
+  # Provide a default URL as a default if there hasn't been a file uploaded:
+  # def default_url
+  #   # For Rails 3.1+ asset pipeline compatibility:
+  #   # ActionController::Base.helpers.asset_path("fallback/" + [version_name, "default.png"].compact.join('_'))
+  #
+  #   "/images/fallback/" + [version_name, "default.png"].compact.join('_')
+  # end
+
+  # Process files as they are uploaded:
+  # process :scale => [200, 300]
+  #
+  # def scale(width, height)
+  #   # do something
+  # end
+
+  # Create different versions of your uploaded files:
+  version :thumb do
+    process resize_to_fit: [150, 150]
+  end
+
+  # Add a white list of extensions which are allowed to be uploaded.
+  # For images you might use something like this:
+  def extension_white_list
+    %w[jpg jpeg gif png]
+  end
+
+  # Override the filename of the uploaded files:
+  # Avoid using model.id or version_name here, see uploader/store.rb for details.
+  # def filename
+  #   "something.jpg" if original_filename
+  # end
+end

app/views/manager/rooms/_form.html.slim

@@ -0,0 +1,46 @@
+= form_for [:manager, @room] do |f|
+  = render "shared/manager/error_messages", object: @room
+
+  = f.label :name, class: "col-form-label"
+  = f.text_field :name, class: "form-control", required: true
+
+  = f.label :locations, class: "col-form-label"
+  = f.select :location_id, options_for_select(build_location_for_rooms,
+    selected: f.object.location_id), {include_blank: t("please_choose_one")},
+    {class: "form-control", required: true}
+
+  = f.label :type_room, class: "col-form-label"
+  = f.select :type_room, options_for_select(select_of_types,
+    selected: f.object.type_room), {include_blank: t("please_choose_one")},
+    {class: "form-control", required: true}
+
+  = f.label :address, class: "col-form-label"
+  = f.text_field :address, class: "form-control", required: true
+
+  = f.label :guest, class: "col-form-label"
+  = f.number_field :guest, class: "form-control", required: true
+
+  = f.label :acreage, class: "col-form-label"
+  = f.text_field :acreage, class: "form-control", required: true
+
+  = f.label :bed_room, class: "col-form-label"
+  = f.number_field :bed_room, class: "form-control", required: true
+
+  = f.label :bath_room, class: "col-form-label"
+  = f.number_field :bath_room, class: "form-control", required: true
+
+  = f.label :description, class: "col-form-label"
+  = f.text_area :description, class: "form-control", required: true
+
+  = f.label :image, class: "col-form-label"
+  .show-image
+    = f.fields_for :room_images do |builder|
+      .nested-fields
+        - if builder.object.image?
+          = image_tag builder.object.image.thumb.url, class: "thumb-image"
+          = link_to_remove_association "", builder, class: "nested-image btn"
+    = f.file_field :image, multiple: true, name: "room_images[image][]",
+      class: "form-control preview-image", presence: true
+    #preview
+  .submit
+    = f.submit yield(:button_title), class: "create-room btn btn-outline-primary"

app/views/manager/rooms/_image.html.slim

@@ -0,0 +1,4 @@
+.nested-fields
+  = f.file_field :image, multiple: true, name: "room_images[image][]",
+    class: "form-control preview-image", presence: true
+  = link_to_remove_association "remove", f, class: "btn btn-danger"