phlex_example.rb

class Tasks::ShowView < ApplicationView

  attr_reader :task

  delegate :taskable, :taskable_is_a_project?, :taskable_is_a_template?, to: :task
  alias completeable? taskable_is_a_project?
  alias assignable?   taskable_is_a_project?
  alias roleable?     taskable_is_a_template?
  


  def initialize(task:)
      @task = task
  end

  def component_tag_id 
    component_id(task, :show)
  end

  def template
    
    turbo_frame_tag("mainDrawerContent") do
      div(class: "bg-white flex h-full flex-col") do
        header
        div( class: "px-3 pt-5 flex w-full", data_controller: "utils--disable-key", data_utils__disable_key_key_value: "Enter" ) do
          render Task::Field::NameComponent.new( task: @task, type: "textarea" )
        end
        div( class: "px-5 pt-5 flex w-full items-baseline group/task" ) do
          div(class: "text-gray-400 font-semibold text-xs uppercase w-40") { Task.human_attribute_name(:due_on) }    
          div(class: "min-w-[10rem]") do
            render Task::Field::DueOnComponent.new( task: task )
          end
        end
        if assignable?
          div( class: "px-5 pt-5 flex w-full items-center group/task" ) do
            div(class: "text-gray-400 font-semibold text-xs uppercase w-40") { Task.human_attribute_name(:assignee) } 
            div(class: "min-w-[10rem]") do
              render Task::Field::AssigneeComponent.new( task: task )
            end
          end
        end
        if roleable?
          div( class: "px-5 pt-5 flex w-full items-center group/task" ) do
            div(class: "text-gray-400 font-semibold text-xs uppercase w-40") { Task.human_attribute_name(:role) } 
            div(class: "min-w-[10rem]") do
              render Task::Field::RoleComponent.new( task: task )
            end
          end
        end
        div( class: "pt-5 flex w-full items-center flex-col" ) do
          div(class: "px-5 text-gray-400 font-semibold text-xs uppercase w-full pb-5") { Task.human_attribute_name(:description) } 
          render Task::Field::DescriptionComponent.new(task: task)
        end
        div( class: "pt-5 flex w-full items-center flex-col" ) do
          div(class: "px-5 text-gray-400 font-semibold text-xs uppercase w-full pb-5 border-b-2") { "Subtasks" } 
          render Subtask::ListComponent.new(task: task)
        end
        div( class: "pt-5 flex w-full items-center flex-col" ) do
          div(class: "px-5 text-gray-400 font-semibold text-xs uppercase w-full pb-5 border-b-2") { "Files" } 
          render Attachment::ListComponent.new(task: task)
        end
      end
    end

  end


  def header 
    div(class: "border-b-2  py-5 flex justify-between items-center px-6") do
      render Task::Field::CompleteComponent.new(task: task, type: "button", completeable: completeable?)
      div(class: "flex items-center") do
        render Milestone::ToggleComponent.new(task: task)
        render Form::Button::DeleteComponent.new(record: task)
        button(type: "button", class: "btn btn-md btn-circle btn-ghost", data: { controller: "vendor--tooltip", vendor__tooltip_content_value: "Close", action: "vendor--drawer#hide" }) do
          heroicon("arrow-left-on-rectangle", class: "w-6 h-6 text-gray-500")
        end
      end
    end
  end


end