Adds new group functionality

app/controllers/groups_controller.rb

@@ -0,0 +1,42 @@
+class GroupsController < ApplicationController
+  before_action :set_group, only: %i[show edit update]
+
+  def index
+    @groups = Group.all
+  end
+
+  def new
+    @group = Group.new
+  end
+
+  def create
+    @group = Group.new(group_params)
+    if @group.save
+      redirect_to group_path(@group)
+    else
+      render :new
+    end
+  end
+
+  def show; end
+
+  def edit; end
+
+  def update
+    if @group.update(group_params)
+      redirect_to group_path(@group)
+    else
+      render :edit
+    end
+  end
+
+  private
+
+  def set_group
+    @group = Group.find(params[:id])
+  end
+
+  def group_params
+    params.require(:group).permit(:name)
+  end
+end

app/models/group.rb

@@ -0,0 +1,5 @@
+class Group < ApplicationRecord
+  with_options presence: true do
+    validates :name
+  end
+end

app/views/groups/edit.html.erb

@@ -0,0 +1,31 @@
+<div class="mb-6 text-center">
+  <span class="text-3xl font-bold">
+    Edit Group
+  </span>
+</div>
+
+<div class='flex flex-wrap justify-center'>
+  <%= form_with model: @group, url: group_path(@group), local: true, class: "xl:w-8/12 md:w-10/12", data: { turbo: false }  do |f| %>
+    <%= render "user/shared/error_messages", resource: @group %>
+    <div class="mb-6">
+      <%= f.label :name, class: "mb-2 block text-sm text-gray-600" %>
+      <%= f.text_field :name, class: "w-full rounded-md border border-gray-300 py-2 px-3 placeholder:text-gray-300 focus:border-indigo-300 focus:outline-none focus:ring focus:ring-indigo-100" %>
+    </div>
+
+    <div class="mb-6">
+      <%= label_tag :created_at, "Created At", class: "mb-2 block text-sm text-gray-600" %>
+      <span class="text-gray-600">
+        <%= l @group.created_at.in_time_zone('Tokyo'), format: "%Y年%-m月%-d日 %H:%M" %>
+      </span>
+    </div>
+
+    <div class="mb-6">
+      <%= label_tag :updated_at, "Updated At", class: "mb-2 block text-sm text-gray-600" %>
+      <span class="text-gray-600">
+        <%= l @group.updated_at.in_time_zone('Tokyo'), format: "%Y年%-m月%-d日 %H:%M" %>
+      </span>
+    </div>
+
+    <%= f.submit class: "inline-flex w-full items-center justify-center rounded-md bg-indigo-500 p-3 text-white duration-100 ease-in-out hover:bg-indigo-600 focus:outline-none cursor-pointer" %>
+  <% end %>
+</div>

app/views/groups/index.html.erb

@@ -0,0 +1,55 @@
+<div class="mb-8 text-center">
+  <span class="text-3xl font-bold">
+    Groups
+  </span>
+</div>
+
+<div class="flex flex-wrap">
+  <div class="flex-none w-full max-w-full px-6">
+    <%= link_to new_group_path, class: "mb-4 inline-flex items-center justify-center rounded-md bg-indigo-500 p-3 text-white duration-100 ease-in-out hover:bg-indigo-600 focus:outline-none" do %>
+      Add New Group
+    <% end %>
+    <div class="relative flex flex-col min-w-0 mb-6 break-words bg-white border-0 border-transparent border-solid shadow-soft-xl rounded-2xl bg-clip-border">
+      <div class="flex-auto px-0 pt-0 pb-2">
+        <div class="p-0 overflow-x-auto">
+          <table class="items-center w-full mb-0 align-top border-gray-200 text-slate-500">
+            <thead class="align-bottom">
+              <tr>
+                <th class="px-6 py-3 pl-2 font-bold text-left uppercase align-middle bg-transparent border-b border-gray-200 shadow-none text-xxs border-b-solid tracking-none whitespace-nowrap text-slate-400 opacity-70">Name</th>
+                <th class="px-6 py-3 font-bold text-center uppercase align-middle bg-transparent border-b border-gray-200 shadow-none text-xxs border-b-solid tracking-none whitespace-nowrap text-slate-400 opacity-70">CreatedAt</th>
+                <th class="px-6 py-3 font-bold text-center uppercase align-middle bg-transparent border-b border-gray-200 shadow-none text-xxs border-b-solid tracking-none whitespace-nowrap text-slate-400 opacity-70">UpdatedAt</th>
+                <th class="px-6 py-3 font-semibold capitalize align-middle bg-transparent border-b border-gray-200 border-solid shadow-none tracking-none whitespace-nowrap text-slate-400 opacity-70"></th>
+              </tr>
+            </thead>
+            <tbody>
+              <% @groups.each do |group| %>
+                <tr>
+                  <td class="p-2 align-middle bg-transparent border-b whitespace-nowrap shadow-transparent">
+                    <%= link_to group_path(group) do %>
+                      <div class="flex px-2 py-1">
+                        <div class="flex flex-col justify-center">
+                          <h6 class="text-lg font-bold"><%= group.name %></h6>
+                        </div>
+                      </div>
+                    <% end %>
+                  </td>
+                  <td class="p-2 text-center align-middle bg-transparent border-b whitespace-nowrap shadow-transparent">
+                    <span class="font-semibold leading-tight text-sm text-slate-400"><%= l group.created_at.in_time_zone('Tokyo'), format: "%Y年%-m月%-d日 %H:%M" %></span>
+                  </td>
+                  <td class="p-2 text-center align-middle bg-transparent border-b whitespace-nowrap shadow-transparent">
+                    <span class="font-semibold leading-tight text-sm text-slate-400"><%= l group.updated_at.in_time_zone('Tokyo'), format: "%Y年%-m月%-d日 %H:%M" %></span>
+                  </td>
+                  <td class="p-2 align-middle bg-transparent border-b whitespace-nowrap shadow-transparent">
+                    <%= link_to edit_group_path(group), class: "font-semibold leading-tight text-xs text-slate-400" do %>
+                      Edit
+                    <% end %>
+                  </td>
+                </tr>
+              <% end %>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

app/views/groups/new.html.erb

@@ -0,0 +1,16 @@
+<div class="mb-6 text-center">
+  <span class="text-3xl font-bold">
+    New Group
+  </span>
+</div>
+
+<div class='flex flex-wrap justify-center'>
+  <%= form_with model: @group, url: groups_path, local: true, class: "xl:w-8/12 md:w-10/12", data: { turbo: false }  do |f| %>
+    <%= render "user/shared/error_messages", resource: @group %>
+    <div class="mb-6">
+      <%= f.label :name, class: "mb-2 block text-sm text-gray-600" %>
+      <%= f.text_field :name, class: "w-full rounded-md border border-gray-300 py-2 px-3 placeholder:text-gray-300 focus:border-indigo-300 focus:outline-none focus:ring focus:ring-indigo-100" %>
+    </div>
+    <%= f.submit class: "inline-flex w-full items-center justify-center rounded-md bg-indigo-500 p-3 text-white duration-100 ease-in-out hover:bg-indigo-600 focus:outline-none cursor-pointer" %>
+  <% end %>
+</div>

app/views/groups/show.html.erb

@@ -0,0 +1,33 @@
+<div class="mb-6 text-center">
+  <span class="text-3xl font-bold">
+    Show Group
+  </span>
+</div>
+
+<div class='flex flex-wrap justify-center'>
+  <%= form_with model: @group, url: group_path(@group), local: true, class: "xl:w-8/12 md:w-10/12", data: { turbo: false }, readonly: true  do |f| %>
+    <%= render "user/shared/error_messages", resource: @group %>
+    <div class="mb-6">
+      <%= label_tag :name, "Name", class: "mb-2 block text-sm text-gray-600" %>
+      <span class="text-gray-600">
+        <%= @group.name %>
+      </span>
+    </div>
+
+    <div class="mb-6">
+      <%= label_tag :created_at, "Created At", class: "mb-2 block text-sm text-gray-600" %>
+      <span class="text-gray-600">
+        <%= l @group.created_at.in_time_zone('Tokyo'), format: "%Y年%-m月%-d日 %H:%M" %>
+      </span>
+    </div>
+
+    <div class="mb-6">
+      <%= label_tag :updated_at, "Updated At", class: "mb-2 block text-sm text-gray-600" %>
+      <span class="text-gray-600">
+        <%= l @group.updated_at.in_time_zone('Tokyo'), format: "%Y年%-m月%-d日 %H:%M" %>
+      </span>
+    </div>
+
+    <%= link_to "Edit", edit_group_path(@group), class: "inline-flex w-full items-center justify-center rounded-md bg-indigo-500 p-3 text-white duration-100 ease-in-out hover:bg-indigo-600 focus:outline-none cursor-pointer" %>
+  <% end %>
+</div>

app/views/layouts/application.html.erb

@@ -23,88 +23,95 @@
   </head>
 
   <body class="flex flex-col h-screen justify-between">
-  <div class='bg-gray-900 mb-8 z-10'>
-    <div class='container mx-auto flex max-w-4xl items-center px-2 py-5'>
-      <div class='mx-auto flex w-full flex-wrap items-center'>
-        <div class='flex w-full justify-center font-extrabold text-white lg:w-1/2 lg:justify-start'>
-          <%= link_to root_path, class: "text-2xl text-gray-900 no-underline hover:text-gray-900 hover:no-underline" do %>
-            🛍️ &nbsp; <span class=' text-gray-200'>Warikan</span>
-          <% end %>
-        </div>
-        <div class='flex w-full content-center justify-between pt-2 lg:w-1/2 lg:justify-end lg:pt-0'>
-          <ul class='list-reset flex flex-1 items-center justify-center lg:flex-none h-12'>
-            <% if user_signed_in? %>
-              <li class='no-underline'>
-                <div class="flex items-center justify-center">
-                  <div class="relative inline-block text-left dropdown">
-                    <button class="inline-flex justify-center w-full px-4 py-2 text-sm font-medium leading-5 text-gray-700 transition duration-150 ease-in-out  rounded-md" type="button" aria-haspopup="true" aria-expanded="true" aria-controls="headlessui-menu-items-117">
-                      <svg class="h-6 w-6" id="dropdownDividerButton" data-dropdown-toggle="dropdownDivider" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
-                        <path fill="white" d="M288 320a224 224 0 1 0 448 0 224 224 0 1 0-448 0zm544 608H160a32 32 0 0 1-32-32v-96a160 160 0 0 1 160-160h448a160 160 0 0 1 160 160v96a32 32 0 0 1-32 32z">
-                        </path>
-                      </svg>
-                    </button>
-                    <div class="opacity-0 invisible dropdown-menu transition-all duration-300 transform origin-top-right -translate-y-2 scale-95">
-                      <div class="absolute right-0 w-56 mt-2 origin-top-right bg-white border border-gray-200 divide-y divide-gray-100 rounded-md shadow-lg outline-none" aria-labelledby="headlessui-menu-button-1" id="headlessui-menu-items-117" role="menu">
-                        <div class="px-4 py-3">
-                          <p class="text-sm leading-5">Signed in as</p>
-                          <p class="text-sm font-medium leading-5 text-gray-900 truncate"><%= current_user.email %></p>
-                        </div>
-                        <div class="py-1">
-                          <%= link_to edit_user_registration_path, class: "text-gray-700 flex justify-between w-full px-4 py-2 text-sm leading-5 text-left" do %>
-                            Account settings
-                          <% end %>
-                        </div>
-                        <div class="py-1">
-                          <%= link_to destroy_user_session_path, data: { turbo_method: :delete }, class: "text-gray-700 flex justify-between w-full px-4 py-2 text-sm leading-5 text-left" do %>
-                            Sign out
-                          <% end %>
+    <div class='bg-gray-900 mb-8 z-10'>
+      <div class='container mx-auto flex max-w-4xl items-center px-2 py-5'>
+        <div class='mx-auto flex w-full flex-wrap items-center'>
+          <div class='flex w-full justify-center font-extrabold text-white lg:w-1/2 lg:justify-start'>
+            <%= link_to root_path, class: "text-2xl text-gray-900 no-underline hover:text-gray-900 hover:no-underline" do %>
+              🛍️ &nbsp; <span class=' text-gray-200'>Warikan</span>
+            <% end %>
+          </div>
+          <div class='flex w-full content-center justify-between pt-2 lg:w-1/2 lg:justify-end lg:pt-0'>
+            <ul class='list-reset flex flex-1 items-center justify-center lg:flex-none h-12'>
+              <% if user_signed_in? %>
+                <li class='px-4 text-white no-underline'>
+                  <%= link_to groups_path do %>
+                    <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd">
+                      <path fill="white" d="M11.5 23l-8.5-4.535v-3.953l5.4 3.122 3.1-3.406v8.772zm1-.001v-8.806l3.162 3.343 5.338-2.958v3.887l-8.5 4.534zm-10.339-10.125l-2.161-1.244 3-3.302-3-2.823 8.718-4.505 3.215 2.385 3.325-2.385 8.742 4.561-2.995 2.771 2.995 3.443-2.242 1.241v-.001l-5.903 3.27-3.348-3.541 7.416-3.962-7.922-4.372-7.923 4.372 7.422 3.937v.024l-3.297 3.622-5.203-3.008-.16-.092-.679-.393v.002z"/>
+                    </svg>
+                  <% end %>
+                </li>
+                <li class='no-underline'>
+                  <div class="flex items-center justify-center">
+                    <div class="relative inline-block text-left dropdown">
+                      <button class="inline-flex justify-center w-full px-4 py-2 text-sm font-medium leading-5 text-gray-700 transition duration-150 ease-in-out  rounded-md" type="button" aria-haspopup="true" aria-expanded="true" aria-controls="headlessui-menu-items-117">
+                        <svg class="h-6 w-6" id="dropdownDividerButton" data-dropdown-toggle="dropdownDivider" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                          <path fill="white" d="M288 320a224 224 0 1 0 448 0 224 224 0 1 0-448 0zm544 608H160a32 32 0 0 1-32-32v-96a160 160 0 0 1 160-160h448a160 160 0 0 1 160 160v96a32 32 0 0 1-32 32z">
+                          </path>
+                        </svg>
+                      </button>
+                      <div class="opacity-0 invisible dropdown-menu transition-all duration-300 transform origin-top-right -translate-y-2 scale-95">
+                        <div class="absolute right-0 w-56 mt-2 origin-top-right bg-white border border-gray-200 divide-y divide-gray-100 rounded-md shadow-lg outline-none" aria-labelledby="headlessui-menu-button-1" id="headlessui-menu-items-117" role="menu">
+                          <div class="px-4 py-3">
+                            <p class="text-sm leading-5">Signed in as</p>
+                            <p class="text-sm font-medium leading-5 text-gray-900 truncate"><%= current_user.email %></p>
+                          </div>
+                          <div class="py-1">
+                            <%= link_to edit_user_registration_path, class: "text-gray-700 flex justify-between w-full px-4 py-2 text-sm leading-5 text-left" do %>
+                              Account settings
+                            <% end %>
+                          </div>
+                          <div class="py-1">
+                            <%= link_to destroy_user_session_path, data: { turbo_method: :delete }, class: "text-gray-700 flex justify-between w-full px-4 py-2 text-sm leading-5 text-left" do %>
+                              Sign out
+                            <% end %>
+                          </div>
                         </div>
                       </div>
                     </div>
                   </div>
-                </div>
-              </li>
-            <% else %>
-              <li class='px-4 text-white no-underline'>
-                <%= link_to "Sign Up", new_user_registration_path %>
-              </li>
-              <li class='px-4 text-white no-underline'>
-                <%= link_to "Sign In", new_user_session_path %>
-              </li>
-            <% end %>
-          </ul>
+                </li>
+              <% else %>
+                <li class='px-4 text-white no-underline'>
+                  <%= link_to "Sign Up", new_user_registration_path %>
+                </li>
+                <li class='px-4 text-white no-underline'>
+                  <%= link_to "Sign In", new_user_session_path %>
+                </li>
+              <% end %>
+            </ul>
+          </div>
         </div>
       </div>
     </div>
-  </div>
 
-  <% if flash[:notice] %>
-    <div class="p-4 mb-4 text-md text-blue-700 text-center font-bold">
-      <%= notice %>
-    </div>
-  <% end %>
-  <% if flash[:alert] %>
-    <div class="p-4 mb-4 text-md text-red-700 text-center font-bold">
-      <%= alert %>
-    </div>
-  <% end %>
+    <% if flash[:notice] %>
+      <div class="p-4 mb-4 text-md text-blue-700 text-center font-bold">
+        <%= notice %>
+      </div>
+    <% end %>
+    <% if flash[:alert] %>
+      <div class="p-4 mb-4 text-md text-red-700 text-center font-bold">
+        <%= alert %>
+      </div>
+    <% end %>
 
-  <main class="container mx-auto sm:w-10/12 lg:w-9/12 mb-8 z-0">
-    <%= yield %>
-  </main>
+    <main class="container mx-auto sm:w-10/12 lg:w-9/12 mb-8 z-0">
+      <%= yield %>
+    </main>
 
-  <style>
-  .dropdown:focus-within .dropdown-menu {
-    opacity:1;
-    transform: translate(0) scale(1);
-    visibility: visible;
-  }
-  </style>
+    <style>
+    .dropdown:focus-within .dropdown-menu {
+      opacity:1;
+      transform: translate(0) scale(1);
+      visibility: visible;
+    }
+    </style>
 
-  <footer class="text-center mt-6 pb-6 h-10">
-    <p class="text-gray-500">
-      Copyright © FarStep All Rights Reserved.
-    </p>
-  </footer>
-</body>
-</html>
+    <footer class="text-center mt-6 pb-6 h-10">
+      <p class="text-gray-500">
+        Copyright © FarStep All Rights Reserved.
+      </p>
+    </footer>
+  </body>
+</html>

config/routes.rb

@@ -4,26 +4,8 @@
     registrations: 'user/registrations'
   }
   root to: 'pages#home'
+  resources :groups, only: %i[index new create show edit update]
 
   get '/up/', to: 'up#index', as: :up
   get '/up/databases', to: 'up#databases', as: :up_databases
-
-  # Sidekiq has a web dashboard which you can enable below. It's turned off by
-  # default because you very likely wouldn't want this to be available to
-  # everyone in production.
-  #
-  # Uncomment the 2 lines below to enable the dashboard WITHOUT authentication,
-  # but be careful because even anonymous web visitors will be able to see it!
-  # require "sidekiq/web"
-  # mount Sidekiq::Web => "/sidekiq"
-  #
-  # If you add Devise to this project and happen to have an admin? attribute
-  # on your user you can uncomment the 4 lines below to only allow access to
-  # the dashboard if you're an admin. Feel free to adjust things as needed.
-  # require "sidekiq/web"
-  # authenticate :user, lambda { |u| u.admin? } do
-  #   mount Sidekiq::Web => "/sidekiq"
-  # end
-
-  # Learn more about this file at: https://guides.rubyonrails.org/routing.html
 end

db/migrate/20230622135526_create_groups.rb

@@ -0,0 +1,9 @@
+class CreateGroups < ActiveRecord::Migration[7.0]
+  def change
+    create_table :groups do |t|
+      t.string :name
+
+      t.timestamps
+    end
+  end
+end