Developed Projects listing page (#105)

* added projects listing page

* added ransack gem for searching

* Code improvements (#107)

* Code quality improvements

* locales added

* minor code changes

* review changes added

* review changes added

* removed the pending specs

* added en locale

* changed the @q to @query in the index action

* added project request spec

Gemfile

@@ -84,6 +84,9 @@ gem "money"
 # aws storage account
 gem "aws-sdk-s3", require: false
 
+# Ransack gem for advanced searching
+gem "ransack"
+
 group :development, :test do
   # See https://edgeguides.rubyonrails.org/debugging_rails_applications.html#debugging-with-the-debug-gem
   gem "debug", ">= 1.0.0", platforms: %i[mri mingw x64_mingw]

Gemfile.lock

@@ -306,6 +306,10 @@ GEM
       zeitwerk (~> 2.5)
     rainbow (3.0.0)
     rake (13.0.6)
+    ransack (2.5.0)
+      activerecord (>= 5.2.4)
+      activesupport (>= 5.2.4)
+      i18n
     react-rails (2.6.1)
       babel-transpiler (>= 0.7.0)
       connection_pool
@@ -456,6 +460,7 @@ DEPENDENCIES
   puma (~> 5.0)
   rack-mini-profiler (>= 2.3.3)
   rails (~> 7.0.1)
+  ransack
   react-rails
   redis (~> 4.0)
   rolify (~> 6.0)

app/controllers/projects_controller.rb

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+class ProjectsController < ApplicationController
+  def index
+    @query = Project.ransack(params[:q])
+    @projects = @query.result(distinct: true)
+  end
+end

app/views/projects/index.html.erb

@@ -0,0 +1,72 @@
+<div class="" id="root-page">
+  <div class="max-w-6xl mx-auto px-2 md:px-11 font-manrope" x-data="{ 'isDialogOpen': false }" @keydown.escape="isDialogOpen = false">
+    <div class="px-5">
+      <div class="">
+
+        <div class="sm:flex sm:items-center sm:justify-between mt-6 mb-3">
+          <div class="flex-1 min-w-0">
+            <h2 class="text-3xl font-extrabold leading-7 text-gray-900 sm:text-4xl py-1">
+                <%= t('project.projects') %>
+            </h2>
+          </div>
+          <div class="mt-6 flex sm:mt-0 md:ml-4 items-center sm:w-4/6">
+            <div class="mt-1 relative rounded-md shadow-sm md:ml-10">
+                <%= search_form_for @query do |f| %>
+                    <%= f.search_field :name_cont, class: 'rounded tracking-wider appearance-none border border-gray-100 block w-72 sm:w-96 px-3 py-2 bg-miru-gray-100 h-8 shadow-sm font-semibold text-xs text-miru-dark-purple-1000 focus:outline-none focus:ring-miru-gray-1000 focus:border-miru-gray-1000 sm:text-sm', placeholder: 'Search' %>
+                    <%= image_submit_tag 'search_icon.svg', class: "h-3 text-miru-gray-400 absolute inset-y-2 right-0 pr-3 flex items-center cursor-pointer" %>     
+                <% end %>
+            </div>
+          </div>
+          <div class="mt-6 flex sm:mt-0 md:ml-4">
+            <button @click="isDialogOpen = true" type="button" class="ml-2 tracking-widest inline-flex items-center h-10 w-full flex justify-center py-1 px-4 border-2 border-miru-han-purple-1000 shadow-sm bg-transparent hover:border-miru-han-purple-600 focus:outline-none rounded text-base font-sans font-medium text-miru-han-purple-1000 bg-transparent hover:text-miru-han-purple-600 cursor-pointer">
+                <img src="<%= image_url 'plus_icon.svg' %>" class="-ml-0.5 mr-2 h-4 w-4 ">
+                    <%= t('project.new_project') %>
+            </button>
+          </div>
+        </div>
+
+        <!-- team table -->
+        <div class="flex flex-col">
+          <div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8 ">
+            <div class="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
+              <div class="overflow-hidden border-b-2 border-miru-gray-200 ">
+                <table class="min-w-full divide-y divide-gray-200 mt-4">
+                  <thead class="">
+                    <tr>
+                      <th scope="col" class="px-6 py-5 text-left text-sm font-semibold text-miru-dark-purple-600 tracking-wider">
+                        <%= t('project.project_client') %>
+                      </th>
+                      <th scope="col" class="px-6 py-5 text-left text-sm font-semibold text-miru-dark-purple-600 tracking-wider">
+                        <%= t('project.hours_logged') %>
+                      </th>
+                      <th scope="col" class="px-6 py-5 text-left text-sm font-semibold text-miru-dark-purple-600 tracking-wider">
+
+                      </th>
+                      <th scope="col" class="relative px-6 py-5">
+                        <span class="sr-only">Edit</span>
+                      </th>
+                    </tr>
+                  </thead>
+                  <tbody class="bg-white divide-y divide-gray-200">
+                    <% @projects.each do |project| %>
+                      <tr>
+                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-miru-dark-purple-1000">
+                          <%= project.name.capitalize %>
+                        </td>
+                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-miru-dark-purple-1000">
+                          <%= project.timesheet_entries.collect(&:duration).first %>
+                        </td>
+                        <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                        </td>
+                      </tr>
+                    <% end %>
+
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          </div>
+        </div>
+    </div>
+  </div>
+</div>

config/locales/en.yml

@@ -42,3 +42,8 @@ en:
     team: Team
     time_tracking: Time Tracking
     view_notifications: View Notifications
+  project:
+    projects: Projects
+    hours_logged: HOURS LOGGED
+    new_project: NEW PROJECT
+    project_client: PROJECT/CLIENT

config/routes.rb

@@ -31,6 +31,7 @@ def draw(routes_name)
   resources :time_tracking, only: [:index], path: "time-tracking"
   resources :clients, only: [:index]
   resources :team, only: [:index, :update, :destroy]
+  resources :projects, only: [:index]
 
   devise_scope :user do
     get "profile", to: "users/registrations#edit"

spec/helpers/team_helper_spec.rb

@@ -13,5 +13,4 @@
 #   end
 # end
 RSpec.describe TeamHelper, type: :helper do
-  pending "add some examples to (or delete) #{__FILE__}"
 end

spec/requests/project_spec.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+require "rails_helper"
+
+RSpec.describe "Projects", type: :request do
+  describe "GET /index" do
+    it "returns http success" do
+      get("/projects")
+      expect(response).to have_http_status(:found)
+    end
+  end
+end

spec/views/team/index.html.erb_spec.rb

@@ -3,5 +3,4 @@
 require "rails_helper"
 
 RSpec.describe "team/index.html.erb", type: :view do
-  pending "add some examples to (or delete) #{__FILE__}"
 end