前提・実現したいこと
Team作成・編集フォームで、Teamに所属するUserを検索し追加できるようにしたいです。
検索はUserの名前を入力し、ajaxで通信するようにしています。
発生している問題・エラーメッセージ
Userを検索しTeamのメンバーに追加、中間テーブルに保存することはできるのですが、
すでにメンバーになっているUserもずっと検索できてしまうので、検索結果に出てこないようにしたいです。
該当のソースコード
team.rb class Team < ApplicationRecord has_many :team_users has_many :users, through: :team_users end
team_user.rb class TeamUser < ApplicationRecord belongs_to :team belongs_to :user end
user.rb class User < ApplicationRecord has_many :team_users has_many :teams, through: :team_users end
teams_controller.rb class TeamsController < ApplicationController before_action :set_team, except: [:new, :create] def show end def new @team = Team.new @team.users << current_user @users = @team.users.where.not(id: current_user.id) end def create @team = Team.new(team_params) if @team.save redirect_to team_path(@team) else render :new end end def edit @users = @team.users.where.not(id: current_user.id) end def update if @team.update(team_params) redirect_to team_path(@team) else render :edit end end def destroy end private def team_params params.require(:team).permit(:name, :about, :image, user_ids: []) end def set_team @team = Team.find(params[:id]) end end
member_search.js $(function() { $(document).on('turbolinks:load', function() { function appendUser(user) { var html = `<div class="member__search__result__list"> <div class="user__name">${user.name}</div> <div class="member__add btn btn-outline-primary btn-sm">追加</div> </div>` $('#member__search__result').append(html); } function appendMember(user) { var html = `<div class="team__member"> <input name='team[user_ids][]' type='hidden' value='${user.id}'> <div class="user__name">${user.name}</div> <div class="member__delete btn btn-outline-danger btn-sm">削除</div> </div>` $('#team__members').append(html); } function appendErrMsg(msg) { var html = `<div>${msg}</div>` $('#member__search__result').append(html); } // ユーザー検索 $('#member__search').on('click', function() { var input = $('#member__search__field').val(); $.ajax({ type: 'GET', url: '/users', data: {keyword: input}, dataType: 'json' }) .done(function(users) { $('#member__search__result').empty(); if (users.length !== 0) { users.forEach(function(user) { appendUser(user); // 検索結果を表示 $('.member__search__result__list').on('click', '.member__add', function() { appendMember(user); //追加ボタンでチームメンバーに追加 $(this).parent().remove(); }) }); } else { appendErrMsg("ユーザーが見つかりません"); } }) .fail(function() { alert('ユーザーを検索できませんでした'); }) }) $("#team__members").on("click", ".member__delete", function() { $(this).parent().remove(); //削除ボタンでチームメンバーから削除 }); }); });
users_controller.rb class UsersController < ApplicationController def index @users = User.where(name: (params[:keyword])).where.not(id: current_user.id) respond_to do |format| format.html format.json end end end
users/index.json.jbuilder json.array! @users do |user| json.id user.id json.name user.name end
_team_form.html.haml .board__form = form_for @team do |f| - if @team.errors.any? .form__errors %h3= "#{@team.errors.full_messages.count}件のエラーが発生しました。" %ul - @team.errors.full_messages.each do |message| %li= message .form-group = f.label :name, class: 'form-control-label' %br/ = f.text_field :name, class: 'form-control' .form-group = f.label :about, class: 'form-control-label' %br/ = f.text_area :about, class: 'form-control' .form-group = f.label :image, class: 'form-control-label' %br/ = f.file_field :image .form-group %label Add member %br/ %input#member__search__field{placeholder: 'ユーザー名を入力', type: 'text', name: 'keyword'} %button{type: "button", class: "btn btn-outline-success btn-sm",id: "member__search"} Search #member__search__result -# 検索結果を表示 #team__members [Team Members] .team__member %input{name: "team[user_ids][]", type: "hidden", value: current_user.id} %p.user__name = current_user.name - if @users.present? - @users.each do |user| .team__member %input{name: "team[user_ids][]", type: "hidden", value: user.id} %p.user__name = user.name %button{class: "member__delete btn btn-outline-danger btn-sm"} 削除 .form-group = f.submit "Save", class: "btn btn-primary"
補足情報(FW/ツールのバージョンなど)
Ruby 2.6.3
Rails 5.2.3
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。