addfunc: Add functions private post #53

app/assets/stylesheets/application.scss

@@ -456,3 +456,24 @@ img {
     background-color: rgba(#55acee, 0.7) !important;
   }
 }
+
+/*li-asterisk
+------------------------------------------------------*/
+.li-asterisk {
+  padding-left: 0;
+  margin-bottom: 0;
+
+  li {
+    list-style: none;
+    padding-left: 1.4em;
+    position: relative;
+
+    &::before {
+      content: "※";
+      position: absolute;
+      top: 0;
+      left: 3px;
+      line-height: 1.1;
+    }
+  }
+}

app/assets/stylesheets/posts.scss

@@ -4,29 +4,101 @@
 
 @import "./variables";
 
-
-.post-cats{
+.post-cats {
   display: flex;
   flex-wrap: wrap;
 
-  .post-cats__name{
+  .post-cats__name {
     display: flex;
     align-items: center;
     background-color: #eee;
     color: #666;
     padding: 4px 8px;
     border-radius: 4px;
     margin-bottom: 4px;
-    font-size: .8em;
+    font-size: 0.8em;
   }
 }
 
-.scroll{
+.scroll {
   position: relative;
   height: 250px;
-  margin-top: .5rem;
+  margin-top: 0.5rem;
   overflow: auto;
-  border: 1px solid #999;
+  border: 1px solid #f0f0f0;
+  padding: 1rem;
+  margin-top: 1rem;
+}
+
+.post-update {
+  border: 1px solid #f0f0f0;
   padding: 1rem;
   margin-top: 1rem;
-}
+  @at-root {
+    #{&}__submit-wrap {
+      margin-bottom: 0.5em;
+    }
+  }
+}
+
+.post-status {
+  display: flex;
+  position: relative;
+
+  @at-root {
+    #{&}__cur {
+      margin-left: auto;
+      color: cornflowerblue;
+      border: 1px solid #fff;
+      font-size: 0.9em;
+      cursor: pointer;
+      padding: 0.25em 0.5em;
+
+      &:hover {
+        color: rgba(100, 148, 237, 0.726);
+        border: 1px solid rgba(100, 148, 237, 0.726);
+      }
+    }
+
+    #{&}__title {
+      padding: 0.25em 0.5em;
+    }
+
+    #{&}__modal {
+      background-color: white;
+      position: absolute;
+      border: 1px solid #666;
+      top: 2em;
+      right: 0;
+      padding: 1em;
+      width: 100%;
+      max-width: 415px;
+      z-index: 1;
+      box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
+
+      @include mq("lg") {
+        width: 260px;
+      }
+    }
+
+    #{&}__title {
+      font-size: 0.9em;
+    }
+
+    #{&}__label:not(:last-child) {
+      margin-bottom: 1em;
+    }
+
+    #{&}__radio {
+      font-weight: bold;
+      color: #444;
+      line-height: 1;
+    }
+
+    #{&}__detail {
+      font-size: 0.9em;
+      color: #444;
+      margin-left: 1.4em;
+    }
+  }
+}

app/controllers/home_controller.rb

@@ -1,5 +1,5 @@
 class HomeController < ApplicationController
   def top
-    @posts = Post.limit(3).order(created_at: :desc)
+    @posts = Post.status_public.limit(3).order(created_at: :desc)
   end
 end

app/controllers/posts_controller.rb

@@ -6,20 +6,25 @@ class PostsController < ApplicationController
   # GET /posts
   # GET /posts.json
   def index
-    @posts = Post.order(created_at: :desc).page(params[:page])
+    @posts = Post.status_public.order(created_at: :desc).page(params[:page])
   end
 
   # GET /posts/1
   # GET /posts/1.json
   def show
-    @comment = Comment.new
-    @comments = @post.comments
+    if @post.status_private? && @post.user != current_user
+      respond_to do |format|
+        format.html { redirect_to posts_path, notice: 'このページにはアクセスできません' }
+      end
+    end
 
     if user_signed_in?
       @like = Like.find_by(post_id: @post.id, user_id: current_user.id)
       @relationship = Relationship.find_by(user_id: current_user.id, follow_id: @post.user)
-
     end
+
+    @comment = Comment.new
+    @comments = @post.comments
   end
 
   # GET /posts/new
@@ -31,11 +36,13 @@ def new
 
   # GET /posts/1/edit
   def edit
-    if @post.user == current_user
-      @post.image.cache! unless @post.image.blank?
-    else
-      redirect_back(fallback_location: root_path)
+    unless @post.user == current_user
+      respond_to do |format|
+        format.html { redirect_to posts_path, notice: '他のユーザーの記事編集ページにはアクセスできません' }
+      end
     end
+
+    @post.image.cache! unless @post.image.blank?
   end
 
   # POST /posts
@@ -91,12 +98,14 @@ def post_params
         :title,
         :content,
         :image,
+        :status,
         {:cat_ids => []}
       )
     end
 
+    # Get the 3 most-liked public posts in order
     def set_ranks
-      @rank_posts = Like.create_all_ranks
+      @rank_posts = Post.status_public.joins(:likes).group(:post_id).order('count(likes.post_id) desc').limit(3)
     end
 
 end

app/controllers/privates_controller.rb

@@ -0,0 +1,31 @@
+class PrivatesController < ApplicationController
+  before_action :authenticate_user!, only: [:index]
+  before_action :set_user, only: [:index]
+  before_action :authenticate_current_user, only: [:index]
+
+  # GET /privates
+  # GET /privates.json
+  def index
+    @posts = Post.where(user_id: @user).status_private.order(created_at: :desc).page(params[:page])
+
+    @relationship = Relationship.find_by(user_id: current_user.id, follow_id: @user)
+  end
+
+
+  private
+    def set_user
+      @user = User.find(params[:user_id])
+    end
+
+    def set_user
+      @user = User.find(params[:user_id])
+    end
+
+    def authenticate_current_user
+      unless current_user == @user
+        respond_to do |format|
+          format.html { redirect_to current_user, notice: '他のユーザーの非公開記事一覧ページにはアクセスできません' }
+        end
+      end
+    end
+end

app/controllers/users_controller.rb

@@ -3,9 +3,11 @@ class UsersController < ApplicationController
   before_action :set_user, only: [:show]
 
   def show
-    @posts = Post.where(user_id:params[:id]).order(created_at: :desc).page(params[:page])
+    @posts = Post.where(user_id: @user).status_public.order(created_at: :desc).page(params[:page])
 
-    @relationship = Relationship.find_by(user_id: current_user.id, follow_id: @user)
+    if user_signed_in?
+      @relationship = Relationship.find_by(user_id: current_user.id, follow_id: @user)
+    end
   end
 
   private

app/javascript/custom/imgUploader.js

@@ -23,7 +23,6 @@ class ImgUplorader{
 
   /*
   * Change preview image to nophoto image when image is not selected
-  * @param input : Element of current target
   */
   copyToSaveInput(){
     $(document).on('change', this.selectorSave, event => {

app/javascript/custom/postStatus.js

@@ -0,0 +1,59 @@
+/*
+* Post Status
+*/
+$(document).on('turbolinks:load', () =>{
+  const postStatus = new PostStatus;
+  postStatus.displayPostStatus();
+  postStatus.hidePostStatus();
+  postStatus.chegeText();
+});
+
+class PostStatus{
+  constructor(){
+    this.selectorStatus = '.post-status';
+    this.selectorCur = '.post-status__cur';
+    this.selectorModal = '.post-status__modal';
+    this.selectorRadioBtn = '.post-status__radio-btn';
+    this.alertStatus ={
+      public: '公開',
+      private: '非公開',
+    };
+
+  }
+
+  /*
+  * Display display post status modal area when current post status is clicked
+  */
+  displayPostStatus(){
+    $(document).on('click', this.selectorCur, event => {
+      const selectorCur = $(event.currentTarget);
+      selectorCur.next(this.selectorModal).fadeIn(300);
+    });
+  }
+
+  /*
+  * Hide post status modal area when this is clicked
+  */
+  hidePostStatus(){
+    $(document).on('click', event => {
+      if($(this.selectorModal).attr('style')){
+        return;
+      }
+
+      if($(event.target).closest(this.selectorModal).length){
+        return;
+      }
+
+      $(this.selectorModal).fadeOut(300);
+    });
+  }
+
+  /*
+  * Chenge text when radio button chenged
+  */
+  chegeText(){
+    $(document).on('change', this.selectorRadioBtn, event => {
+      $(event.currentTarget).closest(this.selectorStatus).find(this.selectorCur).text(this.alertStatus[event.currentTarget.value]);
+    });
+  }
+}

app/javascript/custom/slideToggle.js

@@ -2,7 +2,7 @@
 * Slide Toggle
 */
 $(document).on('turbolinks:load', () =>{
-  $('.block-toggle__press .btn').on('click', event =>{
+  $('.block-toggle__press-btn').on('click', event =>{
     $(event.currentTarget).parent('.block-toggle__press').next('.block-toggle__content').slideToggle(700);
   });
 });

app/javascript/packs/application.js

@@ -9,6 +9,7 @@ require("@rails/activestorage").start()
 require("channels")
 
 require("custom/imgUploader")
+require("custom/postStatus")
 require("custom/slideToggle")
 
 

app/models/like.rb

@@ -3,9 +3,4 @@ class Like < ApplicationRecord
   belongs_to :user
   validates_uniqueness_of :post_id, scope: :user_id
 
-  #likeが多くついた投稿ランクを取得
-  def self.create_all_ranks
-    Post.find(Like.group(:post_id).order('count(post_id) desc').limit(3).pluck(:post_id))
-  end
-
 end

app/models/post.rb

@@ -16,6 +16,7 @@ class Post < ApplicationRecord
 
   has_many :notifications, dependent: :destroy
 
+  enum status: { public: 0, private: 1 }, _prefix: true
 
   def create_notification_like!(current_user)
     # すでに「いいね」されているか検索
@@ -60,6 +61,4 @@ def save_notification_comment!(current_user, comment_id, visited_id)
     notification.save if notification.valid?
   end
 
-
-
 end

app/models/private.rb

@@ -0,0 +1,5 @@
+class Private < ApplicationRecord
+  belongs_to :user
+
+  validates :user_id, presence: true
+end

app/views/comments/_comment.html.erb

@@ -1,6 +1,6 @@
 <div class="comment-id-<%= comment.id %>">
   <div class="d-flex align-items-center">
-    <%= render 'users/user-info', user: comment.user %>
+    <%= render partial: 'user', locals: { user: comment.user } %>
     <small class="color-text-l-gray ml-auto"><%= l comment.created_at %></small>
   </div>
   <div><%= comment.content %></div>

app/views/devise/registrations/edit.html.erb

@@ -19,7 +19,7 @@
                     </div>
                     <div class="block-toggle">
                       <div class="block-toggle__press text-center">
-                        <div class="btn btn-outline-secondary">
+                        <div class="block-toggle__press-btn btn btn-outline-secondary">
                           <i class="fas fa-arrow-circle-down"></i> 画像を変更する
                         </div>
                       </div>