New project functionality (#120)

app/controllers/projects_controller.rb

@@ -7,4 +7,21 @@ def index
     @query = Project.ransack(params[:q])
     @projects = @query.result(distinct: true)
   end
+
+  def create
+    project = Project.new(project_params)
+
+    if project.save
+      flash[:notice] = t(".success")
+    else
+      flash[:alert] = t(".failure")
+    end
+
+    redirect_to projects_path
+  end
+
+  private
+    def project_params
+      params.require(:project).permit(:client_id, :name, :billable)
+    end
 end

app/javascript/stylesheets/application.scss

@@ -41,12 +41,18 @@
     &__button {
       @apply tracking-widest inline-flex items-center h-10 w-full flex justify-center py-1 px-4 border border-transparent shadow-sm text-base font-bold text-miru-white-1000 bg-miru-han-purple-1000 hover:bg-miru-han-purple-600 focus:outline-none rounded;
     }
+    &__button_outline {
+      @apply 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-semibold text-miru-han-purple-1000 bg-transparent hover:text-miru-han-purple-600 cursor-pointer;
+    }
     &__error {
       @apply tracking-wider block text-xs font-semibold text-red-600;
     }
     &__link {
       @apply font-bold text-miru-han-purple-1000 hover:text-miru-han-purple-600 tracking-wider;
     }
+    &__radio {
+      @apply focus:ring-miru-han-purple-1000 h-4 w-4 border-miru-han-purple-1000 text-miru-dark-purple-1000;
+    }
   }
 
   .password_eye {

app/models/project.rb

@@ -5,7 +5,7 @@
 #  id           :integer          not null, primary key
 #  client_id    :integer          not null
 #  name         :string           not null
-#  description  :text             not null
+#  description  :text
 #  billable     :boolean          not null
 #  created_at   :datetime         not null
 #  updated_at   :datetime         not null
@@ -28,7 +28,7 @@ class Project < ApplicationRecord
   has_many :project_members, dependent: :destroy
 
   # Validations
-  validates :name, :description, presence: true
+  validates :name, presence: true
   validates :billable, inclusion: { in: [ true, false ] }
 
   # Callbacks

app/views/projects/_new.html.erb

@@ -0,0 +1,42 @@
+<%= form_with model: Project.new do |f| %>
+    <div class="mt-4">
+        <div class="field">
+            <%= f.label t('projects.client') %>
+            <div class="mt-2">
+                <%= f.collection_select :client_id, current_company.clients.order(:name),:id,:name, {}, { class: "rounded tracking-wider appearance-none border border-gray-100 block w-full px-3 py-2 bg-miru-white-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" } %>
+            </div>
+        </div>
+    </div>
+
+    <div class="mt-4">
+        <div class="field">
+            <%= f.label t('projects.project_name') %>
+            <div class="mt-2">
+                <%= f.text_field :name, class: "form__input" %>
+            </div>
+        </div>
+    </div>
+
+    <div class="mt-4">
+        <div class="field">
+            <div class="mt-1">
+                <div class="space-y-4 sm:flex sm:items-center sm:space-y-0 sm:space-x-10">
+                    <div class="flex items-center">
+                        <%= f.radio_button :billable, true, class: "form__radio" %>
+                        <%= f.label :billable, t('projects.billable'), class: "form__label" %>
+                    </div>    
+
+                    <div class="flex items-center">
+                        <%= f.radio_button :billable, false, class: "form__radio" %>
+                        <%= f.label :billable, t('projects.non_billable'), class: "form__label" %>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="actions mt-4">
+        <%= f.submit t('projects.add_project').upcase, class: "form__button" %>
+    </div>
+<% end %>
+

app/views/projects/index.html.erb

@@ -6,7 +6,7 @@
         <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') %>
+                <%= t('projects.projects') %>
             </h2>
           </div>
           <div class="mt-6 flex sm:mt-0 md:ml-4 items-center sm:w-4/6">
@@ -20,7 +20,7 @@
 
           <% if policy(Project).create? %>
             <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">
+              <button @click="isDialogOpen = true" type="button" class="form__button_outline">
                   <img src="<%= image_url 'plus_icon.svg' %>" class="-ml-0.5 mr-2 h-4 w-4 ">
                       <%= t('project.new_project') %>
               </button>
@@ -37,7 +37,7 @@
                     <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') %>
+                          <%= t('projects.project').upcase %>/<%= t('projects.client').upcase %>
                         </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') %>
@@ -46,7 +46,7 @@
 
                         </th>
                         <th scope="col" class="relative px-6 py-5">
-                          <span class="sr-only">Edit</span>
+                          <span class="sr-only"><%= t('projects.edit') %></span>
                         </th>
                       </tr>
                     </thead>
@@ -72,5 +72,20 @@
           </div>
       </div>
     </div>
+
+    <div class="px-4 min-h-screen flex items-center justify-center">
+    <div class="overflow-auto" style="background-color: rgba(29, 26, 49,0.6)" x-show="isDialogOpen" :class="{ 'absolute inset-0 z-10 flex items-start justify-center': isDialogOpen }">
+      <div class="relative px-4 min-h-screen md:flex md:items-center md:justify-center">
+      <div class="rounded-lg px-6 pb-6 bg-white shadow-xl transform transition-all sm:align-middle sm:max-w-md sm:w-full" x-show="isDialogOpen" @click.away="isDialogOpen = false">
+        <div class="flex justify-between items-center mt-6">
+          <h6 class="text-base font-extrabold"><%= t('projects.add_new_project').capitalize %></h6>
+          <button type="button" @click="isDialogOpen = false"><%= image_tag('close_button.svg') %></button>
+        </div>
+        <%= render "projects/new"%>
+      </div>
+      </div>
+    </div>
   </div>
-</div>
+</div>
+
+

config/locales/en.yml

@@ -42,11 +42,21 @@ en:
     team: Team
     time_tracking: Time Tracking
     view_notifications: View Notifications
-  project:
+  projects:
     projects: Projects
     hours_logged: HOURS LOGGED
     new_project: NEW PROJECT
-    project_client: PROJECT/CLIENT
+    project: Project
+    client: Client
+    project_name: Project name
+    edit: edit
+    create:
+      success: Project added successfully.
+      failure: Project creation failed.
+    add_project: Add project
+    add_new_project: Add new project
+    billable: Billable
+    non_billable: Non-Billable
   companies:
     create:
       failure: "Company creation failed"

config/routes.rb

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

db/migrate/20220210103446_remove_not_null_constraint_for_description_in_projects.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+class RemoveNotNullConstraintForDescriptionInProjects < ActiveRecord::Migration[7.0]
+  def up
+    change_column_null :projects, :description, true
+  end
+
+  def down
+    change_column_null :projects, :description, false
+  end
+end

spec/models/project_spec.rb

@@ -12,7 +12,6 @@
 
   describe "Validations" do
     it { is_expected.to validate_presence_of(:name) }
-    it { is_expected.to validate_presence_of(:description) }
     it { is_expected.to validate_inclusion_of(:billable).in_array([true, false]) }
   end