Merge pull request #90 from motohiro-mm/feature/add_family_page

共有ページを作成

app/controllers/families_controller.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+class FamiliesController < ApplicationController
+  def show
+    @family = current_user.family
+  end
+end

app/models/family.rb

@@ -12,4 +12,8 @@ def destroy_family_having_no_user
 
     Family.find(id).destroy!
   end
+
+  def invitation_url(request)
+    "#{request.protocol}#{request.host_with_port}/welcome?invitation_token=#{invitation_token}"
+  end
 end

app/views/families/show.html.erb

@@ -0,0 +1,38 @@
+<div>
+  <h1 class="font-bold text-4xl">献立表の共有</h1>
+
+  <div class="border border-stone-300 rounded-md p-4 my-5 text-stone-800">
+    <strong class="block font-bold text-lg">共有しているユーザー</strong>
+
+    <% @family.users.each do |user| %>
+      <p class="my-5 flex items-center">
+        <%= image_tag user.icon, class: 'icon' %>
+        <span class="ml-2"><%= user.name %></span>
+      </p>
+    <% end %>
+
+    <p class="my-5">
+      <input id="copyTarget" type="text" value="<%= @family.invitation_url(request) %>" readonly autocomplete="off">
+      <button class="rounded-lg py-3 px-5 bg-gray-600 text-white inline-block font-medium cursor-pointer" onclick="copyToClipboard()">共有URLをCopyする</button>
+    </p>
+  </div>
+  <%= link_to '献立表へ戻る', meal_plans_path,
+              class: 'ml-2 rounded-lg py-3 px-5 text-stone-500 bg-stone-100 inline-block font-medium' %>
+
+  <script>
+    function copyToClipboard() {
+        // コピー対象をJavaScript上で変数として定義する
+        var copyTarget = document.getElementById("copyTarget");
+
+        // コピー対象のテキストを選択する
+        copyTarget.select();
+        copyTarget.setSelectionRange(0, 99999);
+
+        // 選択しているテキストをクリップボードにコピーする
+        document.execCommand("Copy");
+
+        // コピーをお知らせする
+        alert("コピーできました！ : " + copyTarget.value);
+    }
+  </script>
+</div>

app/views/layouts/application.html.erb

@@ -24,6 +24,7 @@
         <% if current_user %>
           <%= image_tag current_user.icon, class: 'icon invert brightness-0' %>
           <%= link_to "#{current_user.name}さん", edit_user_path, class: 'ml-4 text-stone-100 hover:underline' %>
+          <%= link_to '共有ページへ', family_path, class: 'ml-4 text-stone-100 hover:underline' %>
           <%= link_to 'ログアウト', log_out_path, class: 'ml-4 text-stone-300 hover:underline' %>
         <% else %>
           <%= button_to 'Googleでログイン', '/auth/google_oauth2', method: :post, data: { turbo: false },

config/routes.rb

@@ -7,8 +7,9 @@
   get 'auth/failure', to: redirect('/')
   get 'log_out', to: 'sessions#destroy', as: 'log_out'
   resources :sessions, only: %i[create destroy]
-  resource :user, only: %i[edit update destroy]
-
+  resource :user, only: %i[update destroy]
+  get 'user', to: 'users#edit', as: 'edit_user'
+  get 'family', to: 'families#show', as: 'family'
   get 'meal_plans/calendar', to: 'meal_plans#calendar'
   resources :meal_plans do
     resources :meals, only: %i[new]