add new dashboard page using hotwired

app/assets/stylesheets/_punches.scss

@@ -47,6 +47,7 @@ $header-text-color: #453b3b;
 
     &.out {
       opacity: .3;
+      cursor: default;
     }
 
     &.today {
@@ -59,6 +60,8 @@ $header-text-color: #453b3b;
   .weekday-0, .weekday-6, .weekday-holiday {
     background: $flat-clouds;
     color: $flat-silver;
+    cursor: default;
+
     ul {
       color: $flat-pomegranate;
     }

app/controllers/punches_controller.rb

@@ -33,6 +33,29 @@ def create
     end
   end
 
+  def bulk_create
+    punches_params = params.require(:punches_calendar_form).permit(:project_id, :from1, :from2, :to1, :to2, days: [])
+
+    @punches = Punches::CalendarForm.new(punches_params)
+    @punches.validate
+    @punches_of_day = current_user.punches.group_by(&:date)
+    @current_month_by_weeks = (Date.current.beginning_of_month.beginning_of_week..Date.current.end_of_month.end_of_week).group_by do |date|
+      date.strftime("%U")
+    end
+
+
+    render :calendar
+    # @punch = Punch.new(punch_params)
+    # @punch.user_id = current_user.id
+
+    # if @punch.save
+    #   redirect_to punches_path, notice: I18n.t(:notice, scope: "flash.actions.create", resource_name: "Punch")
+    # else
+    #   flash_errors('create')
+    #   render :new
+    # end
+  end
+
   def update
     @punch = scopped_punches.find params[:id]
     @punch.attributes = punch_params
@@ -45,6 +68,16 @@ def update
     end
   end
 
+  def calendar
+    @selected_month = params[:month].present? && params[:year].present? ? "#{params[:year]}/#{params[:month]}/1".to_date : Date.current.beginning_of_month
+
+    @punches = Punches::CalendarForm.new
+    @punches_of_day = current_user.punches.group_by(&:date)
+    @current_month_by_weeks = (@selected_month.beginning_of_week..@selected_month.end_of_month.end_of_week).group_by do |date|
+      date.strftime("%U")
+    end
+  end
+
   def destroy
     punch = Punch.find(params[:id])
     punch.destroy

app/forms/punches/calendar_form.rb

@@ -0,0 +1,44 @@
+class Punches::CalendarForm
+  include ActiveModel::Model
+  include ActiveModel::Attributes
+
+  attribute :days, :string
+  attribute :project_id, :integer
+  attribute :user_id, :integer
+  attribute :from1, :string
+  attribute :to1, :string
+  attribute :from2, :string
+  attribute :to2, :string
+
+  validates_presence_of :days, :project_id, :from1, :from2, :to1, :to2
+  validate :all_days_valid?
+
+
+  def initialize(params={})
+    super
+    @punches = days.to_s.split(",").flat_map do |day|
+      [
+        Punch.new(from_time: from1, to_time: to1, project_id: project_id, when_day: day),
+        Punch.new(from_time: from2, to_time: to2, project_id: project_id, when_day: day)
+      ]
+    end
+  end
+
+  # def model_name
+  #   ActiveModel::Name.new("CalendarPunches")
+  # end
+
+  # def save
+  #   return false unless valid?
+
+  #   Punch.transaction do
+  #     @punches.each(&:save!)
+  #   end
+
+  #   true
+  # end
+
+  def all_days_valid?
+
+  end
+end

app/forms/punches_create_form.rb

@@ -7,9 +7,7 @@ class PunchesCreateForm
   validate :punches_validations, :punch_on_same_day_validation
 
   def initialize(user, punches)
-    punches ||= []
-
-    @punches = punches.map do |punch_params|
+    @punches = Array(punches).map do |punch_params|
       Punch.new(**punch_params, user: user)
     end
   end

app/javascript/controllers/calendar_controller.js

@@ -0,0 +1,39 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static classes = [ "selectDay" ]
+  static targets = [ "selectedDays", "deactivatable" ]
+  static values = { selectedDays: Array }
+
+  connect() {
+    this.disableForm()
+  }
+
+  selectDay({ currentTarget: dayElement, params: { day } }) {
+    if (this.selectedDaysValue.some(element => element == day)) {
+      dayElement.classList.remove(this.selectDayClass)
+      this.selectedDaysValue = this.selectedDaysValue.filter(element => element != day)
+    } else {
+      dayElement.classList.add(this.selectDayClass)
+      this.selectedDaysValue = [day, ...this.selectedDaysValue]
+    }
+  }
+
+  selectedDaysValueChanged() {
+    this.selectedDaysTarget.value = this.selectedDaysValue
+
+    if (this.selectedDaysValue.length) {
+      this.enableForm()
+    } else {
+      this.disableForm()
+    }
+  }
+
+  disableForm() {
+    this.deactivatableTargets.forEach(element => element.disabled = true)
+  }
+
+  enableForm() {
+    this.deactivatableTargets.forEach(element => element.disabled = false)
+  }
+}

app/javascript/packs/calendar.js

@@ -0,0 +1,7 @@
+import * as Turbo from "@hotwired/turbo"
+import { Application } from "@hotwired/stimulus"
+import { definitionsFromContext } from "@hotwired/stimulus-webpack-helpers"
+
+window.Stimulus = Application.start()
+const context = require.context("../controllers", true, /\.js$/)
+Stimulus.load(definitionsFromContext(context))

app/views/layouts/application.html.erb

@@ -29,6 +29,7 @@
     <%= stylesheet_link_tag "tailwind" %>
     <%= stylesheet_link_tag "application" %>
     <%= csrf_meta_tags %>
+    <%= yield(:assets) if content_for?(:assets) %>
   </head>
 
   <body>

app/views/punches/_calendar_form.html.erb

@@ -0,0 +1,77 @@
+<turbo-frame id="punches-form">
+  <%= form_for punches, url: calendar_punches_path do |f| %>
+    <!-- data-search-target="errorMessage" -->
+    <%= f.hidden_field :days, name: "punches_calendar_form[days][]", data: {calendar_target: "selectedDays"} %>
+    <div class="form-container mb-4">
+      <!-- Form Header -->
+      <div class="d-flex justify-content-between align-items-baseline selected-days-container">
+        <h6>Selecionado (<%= 0 %>)</h6>
+        <div class="d-flex align-items-center">
+          <button
+            class="btn btn-outline-secondary btn-sm text-dark mr-2"
+            disabled=<%= true %>
+            type="button"
+          >
+            Remover seleção <i class="fa fa-times-circle fa-sm"></i>
+          </button>
+          <button
+            class="btn btn-outline-danger btn-sm text-danger"
+            disabled=<%= true %>
+            type="button"
+          >
+              Apagar <i style='color: "#c61515"' class="fa fa-trash fa-sm"></i>
+          </button>
+        </div>
+      </div>
+      <!-- Form Inputs Control -->
+      <div class="row p-3">
+        <div class="col select-container">
+          <%= f.select :project_id, Project.all,
+            include_blank: 'Projeto',
+            required: true,
+            data: { calendar_target: "deactivatable" }
+          %>
+        </div>
+        <div class="col">
+          <div class="d-flex align-items-center">
+            <i style={{color: isSelectedsEmpty ? "#9ea8ad" : "#555"}} class="fa fa-coffee fa-lg" data-calendar-target="deactivatableIcon"></i>
+            <%= f.time_field :from1,
+              class: "form-control form-control-sm w-auto ml-1",
+              value: "09:00",
+              required: true,
+              data: { calendar_target: "deactivatable" }
+            %>
+            <span class="mx-1">-</span>
+            <%= f.time_field :to1,
+              class: "form-control form-control-sm w-auto",
+              value: "12:00",
+              required: true,
+              data: { calendar_target: "deactivatable" }
+            %>
+          </div>
+        </div>
+        <div class="col">
+          <div class="d-flex align-items-center">
+            <i style={{color: isSelectedsEmpty ? "#9ea8ad" : "#555"}} class="fa fa-utensils fa-lg" data-calendar-target="deactivatableIcon"></i>
+            <%= f.time_field :from2,
+              class: "form-control form-control-sm w-auto ml-1",
+              value: "13:00",
+              required: true,
+              data: { calendar_target: "deactivatable" }
+            %>
+            <span class="mx-1">-</span>
+            <%= f.time_field :to2,
+              class: "form-control form-control-sm w-auto",
+              value: "18:00",
+              required: true,
+              data: { calendar_target: "deactivatable" }
+            %>
+          </div>
+        </div>
+        <div class="col">
+          <%= f.submit  class: "w-100", value: "Salvar", data: { calendar_target: "deactivatable" } %>
+        </div>
+      </div>
+    </div>
+  <% end %>
+</turbo-frame>

app/views/punches/calendar.html.erb

@@ -0,0 +1,59 @@
+<% content_for :assets do %>
+  <%= javascript_pack_tag 'calendar' %>
+<% end %>
+<div data-controller="calendar" data-calendar-select-day-class="selected">
+  <div class="container">
+    <%= render "calendar_form", punches: @punches %>
+  </div>
+  <div class="d-flex justify-content-center container">
+    <div class="calendar-container">
+      <turbo-frame id="calendar-days">
+        <div class="d-flex align-items-center">
+          <h2>
+            <%= link_to "❮",
+              calendar_punches_path(month: @selected_month.prev_month.month, year: @selected_month.prev_month.year),
+              class: "nav-arrow mr-1" %>
+            <%= @current_month_by_weeks.values.second.first.strftime("%B") %>
+            <% unless @current_month_by_weeks.values.second.first.month == Date.current.month %>
+              <%= link_to "❯", calendar_punches_path(month: @selected_month.next_month.month, year: @selected_month.next_month.year), class: "nav-arrow ml-1" %>
+            <% end %>
+          </h2>
+          <h6 class="ml-2">Horas: <b><%= 0 %></b></h6>
+        </div>
+
+        <table class='punches-table'>
+          <thead>
+            <tr>
+              <% Date::DAYNAMES.each do |dayname| %>
+                <th><%= dayname %></th>
+              <% end %>
+            </tr>
+          </thead>
+          <tbody>
+            <% @current_month_by_weeks.each do |_week_number, days_of_week| %>
+              <tr>
+                <% days_of_week.each do |day| %>
+                  <%= tag.td class: "weekday-#{day.wday} #{day.month == @selected_month.month ? "" : "out"}",
+                    data: {
+                      action: day.on_weekday? && day.month == @selected_month.month ? "click->calendar#selectDay" : nil,
+                      calendar_day_param: day } do %>
+                    <h3>
+                      <%= day.strftime("%d") %><%= "/#{day.strftime('%b')}" if day.mday == 1 %>
+                    </h3>
+                    <ul class="punches ml-0">
+                      <% Array(@punches_of_day[day]).each do |punch| %>
+                        <li>
+                          <%= "#{punch.from.strftime("%H:%M")} - #{punch.to.strftime("%H:%M")}" %>
+                        </li>
+                      <% end %>
+                    </ul>
+                  <% end %>
+                <% end %>
+              </tr>
+            <% end %>
+          </tbody>
+        </table>
+      </turbo-frame>
+    </div>
+  </div>
+</div>

config/application.rb

@@ -30,6 +30,7 @@ class Application < Rails::Application
     config.i18n.locale = :'pt-BR'
     config.i18n.default_locale = :'pt-BR'
     config.time_zone = 'America/Sao_Paulo'
+    config.beginning_of_week = :sunday
 
     # Do not swallow errors in after_commit/after_rollback callbacks.
     config.active_job.queue_adapter = :sidekiq

config/routes.rb

@@ -11,9 +11,6 @@
   ActiveAdmin.routes(self)
   devise_for :users, controllers: { sessions: 'user/sessions' }
 
-  resources :punches
-  resource :user, only: %i[show edit update]
-
   resources :vacations, only: %i[index show new create destroy] if ENV["ENABLE_VACATION"].present?
 
   resources :dashboard, only: :index do
@@ -29,12 +26,19 @@
   end
 
   authenticated :user do
+    resource :user, only: %i[show edit update]
     root to: 'punches#index', as: :authenticated_user
     get 'two_factor', to: 'users#two_factor'
     get 'deactivate_two_factor', to: 'users#deactivate_two_factor'
     post 'confirm_otp', to: 'users#confirm_otp'
     get 'backup_codes', to: 'users#backup_codes'
     post 'deactivate_otp', to: 'users#deactivate_otp'
+    resources :punches do
+      collection do
+        get "calendar(/:year)(/:month)", action: :calendar, as: :calendar
+        post :calendar, action: :bulk_create
+      end
+    end
   end
 
   unauthenticated :user do