add new dashboard page using hotwired

Author: adbatista

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))