inner_plan 0.1.0

data/app/components/inner_plan/lists/row/handle_component.rb

@@ -0,0 +1,37 @@
+module InnerPlan::Lists::Row
+  class HandleComponent < Phlex::HTML
+    include Phlex::Rails::Helpers::LinkTo
+
+    def initialize(list)
+      @list = list
+    end
+
+    def template
+      div(class: "dropstart", style: "padding-top:1.5rem") {
+        a(class: "align-top me-2 text-body-tertiary list-handle cm", data: { bs_toggle: :dropdown }) {
+          render(Phlex::Icons::Tabler::GripVertical.new(width: 20, height: 20))
+        }
+
+        ul(class: "dropdown-menu") {
+          li {
+            link_to(helpers.edit_list_path(list), class: "dropdown-item d-flex gap-2 align-items-center") {
+              render(Phlex::Icons::Tabler::Pencil.new(width: 18, height: 18, class: 'text-secondary'))
+              span { 'Edit list' }
+            }
+          }
+
+          li {
+            link_to(helpers.new_list_group_path(list), class: "dropdown-item d-flex gap-2 align-items-center") {
+              render(Phlex::Icons::Tabler::Apps.new(width: 18, height: 18, class: 'text-secondary'))
+              span { 'Add group' }
+            }
+          }
+        }
+      }
+    end
+
+    private
+
+    attr_reader :list
+  end
+end

data/app/components/inner_plan/lists/row_component.rb

@@ -0,0 +1,55 @@
+module InnerPlan::Lists
+  class RowComponent < Phlex::HTML
+    include Phlex::Rails::Helpers::LinkTo
+    include Phlex::Rails::Helpers::DOMID
+
+    def initialize(list, context: nil)
+      @list = list
+      @context = context
+    end
+
+    def template
+      lists = list.lists.ordered_by_position
+
+      div(data: { update_url: helpers.update_position_list_path(list), id: list.id }, class: "mb-5") {
+        div(class: "d-flex w-100 mb-1") {
+          render(InnerPlan::Lists::Row::HandleComponent.new(list))
+
+          div(class: "ms-1 w-100") {
+            small(class: "text-body-tertiary") {
+              plain("#{list.tasks.completed.count}/#{list.tasks.count} completed")
+            }
+
+            h3(class: "h5") {
+              link_to list.title, list, class: 'text-reset'
+            }
+
+            if list.description.present?
+              div(class: "mb-2") {
+                list.description
+              }
+            end
+          }
+        }
+
+        # Ongoing tasks
+        render(InnerPlan::Lists::OngoingTasksComponent.new(list, context: context))
+
+        # Groups
+        render(InnerPlan::Groups::RowsComponent.new(lists, list: list, context: context))
+
+        # Add new task form
+        last_group = lists.to_a.last || list
+        div(class: "mt-2 mb-4", id: dom_id(last_group, :add_task)) {
+          render InnerPlan::Tasks::InlineFormView.new(list: last_group)
+        }
+
+        render(InnerPlan::Lists::CompletedTasksComponent.new(list, context: context))
+      }
+    end
+
+    private
+
+    attr_reader :list, :context
+  end
+end

data/app/components/inner_plan/lists/show_menu_component.rb

@@ -0,0 +1,37 @@
+module InnerPlan::Lists
+  class ShowMenuComponent < Phlex::HTML
+    include Phlex::Rails::Helpers::LinkTo
+
+    def initialize(list)
+      @list = list
+    end
+
+    def template
+      div(class: "dropdown") {
+        button(class: "btn btn-link text-reset p-0 opacity-50", data_bs_toggle: "dropdown") {
+          render(Phlex::Icons::Tabler::DotsCircleHorizontal.new(width: 35, height: 35))
+        }
+
+        ul(class: "dropdown-menu dropdown-menu-end") {
+          li {
+            link_to(helpers.edit_list_path(list), class: 'dropdown-item d-flex align-items-center gap-2', data: { turbo_frame: :_top }) {
+              render(Phlex::Icons::Tabler::Pencil.new(width: 18, height: 18, class: 'text-secondary'))
+              span { "Edit list" }
+            }
+          }
+
+          li {
+            link_to(helpers.new_list_group_path(list), class: 'dropdown-item d-flex align-items-center gap-2', data: { turbo_frame: :_top }) {
+              render(Phlex::Icons::Tabler::Apps.new(width: 18, height: 18, class: 'text-secondary'))
+              span { "Add group" }
+            }
+          }
+        }
+      }
+    end
+
+    private
+
+    attr_reader :list
+  end
+end

data/app/components/inner_plan/lists/show_view.rb

@@ -0,0 +1,76 @@
+module InnerPlan::Lists
+  class ShowView < ApplicationView
+    include Phlex::Rails::Helpers::DOMID
+    include Phlex::Rails::Helpers::LinkTo
+    include Phlex::Rails::Helpers::Routes
+    include Phlex::Rails::Helpers::ContentTag
+
+    def initialize(list:)
+      @list = list
+    end
+
+    def template
+      lists = @list.lists.ordered_by_position
+
+      content_tag(:turbo_frame, id: (dom_id(@list, :header))) do
+        header do
+          render(InnerPlan::BreadcrumbsComponent.new) do |c|
+            c.with_breadcrumb do
+              link_to "Home", helpers.root_path, class: "text-reset", data: { turbo_frame: :_top }
+            end
+            c.with_breadcrumb(active: true) { "List ##{@list.id}" }
+          end
+          div(class: "row") do
+            div(class: "col-10") do
+              h1(class: "h2") do
+                link_to @list.title, helpers.edit_list_path(@list), class: "text-reset text-decoration-none"
+                small(class: "fs-6 text-body-tertiary ms-2") do
+                  plain @list.tasks.completed.count
+                  plain "/"
+                  plain @list.tasks.count
+                end
+              end
+            end
+            div(class: "col-2 text-end") do
+              render(InnerPlan::Lists::ShowMenuComponent.new(@list))
+            end
+          end
+          render(
+            InnerPlan::ProgressBarSeparatorComponent.new(
+              completed: @list.tasks.completed.count,
+              total: @list.tasks.count
+            )
+          )
+
+          div(class: "mb-4 mt-3") { @list.description }
+        end
+      end
+
+      render(
+      InnerPlan::Lists::OngoingTasksComponent.new(@list, context: :lists_show)
+    )
+
+    render(
+      InnerPlan::Groups::RowsComponent.new(
+        lists.ordered_by_position,
+        list: @list,
+        context: :lists_show
+      )
+    )
+
+    last_group = lists.to_a.last || @list
+
+    content_tag(:div, class: "mt-2 mb-4", id: dom_id(last_group, :add_task)) do
+      render InnerPlan::Tasks::InlineFormView.new(list: last_group)
+    end
+
+    render(
+      InnerPlan::Lists::CompletedTasksComponent.new(
+        @list,
+        context: :lists_show,
+        limit: 0
+      )
+    )
+    end
+  end
+end

data/app/components/inner_plan/progress_bar_separator_component.rb

@@ -0,0 +1,20 @@
+module InnerPlan
+  class ProgressBarSeparatorComponent < Phlex::HTML
+    def initialize(completed: 0, total: 100)
+      @completed = completed
+      @total = total
+    end
+
+    def template
+      div(class: 'progress mt-2', style: 'height: 2px;') {
+        div(class: 'progress-bar bg-success', style: "width: #{completion_percent}%")
+      }
+    end
+
+    private
+
+    def completion_percent
+      @completed.to_f / @total.to_f * 100.0
+    end
+  end
+end

data/app/components/inner_plan/tasks/completed_toggler_component.rb

@@ -0,0 +1,27 @@
+module InnerPlan::Tasks
+  class CompletedTogglerComponent < Phlex::HTML
+    include Phlex::Rails::Helpers::ButtonTo
+
+    def initialize(task, context: nil, size: 24)
+      @task = task
+      @context = context
+      @size = size
+    end
+
+    def template
+      if task.ongoing?
+        button_to(helpers.complete_task_path(task, context: context), method: :post, class: 'btn p-0 opacity-50', style: 'height:24px;display:block;margin-top:-1px', form: { style: 'height:24px;display:block;' }) {
+          render(Phlex::Icons::Tabler::SquareRounded.new(width: size, height: size))
+        }
+      else
+        button_to(helpers.reopen_task_path(task, context: context), method: :post, class: 'btn p-0 text-success opacity-75') {
+          render(Phlex::Icons::Tabler::SquareRoundedCheck.new(width: size, height: size))
+        }
+      end
+    end
+
+    private
+
+    attr_reader :task, :context, :size
+  end
+end

data/app/components/inner_plan/tasks/edit_view.rb

@@ -0,0 +1,82 @@
+module InnerPlan::Tasks
+  class EditView < ApplicationView
+    include Phlex::Rails::Helpers::DOMID
+    include Phlex::Rails::Helpers::LinkTo
+    include Phlex::Rails::Helpers::Routes
+    include Phlex::Rails::Helpers::ContentTag
+    include Phlex::Rails::Helpers::FormWith
+    include Phlex::Rails::Helpers::Debug
+
+    attr_reader :focus
+
+    def initialize(task:, focus: nil)
+      @task = task
+      @focus = focus&.to_sym
+    end
+
+    def template
+      header(class: "mb-3") do
+        render(InnerPlan::BreadcrumbsComponent.new) do |c|
+          c.with_breadcrumb do
+            link_to "Home",
+                    helpers.root_path,
+                    class: "text-reset",
+                    data: {
+                      turbo_frame: :_top
+                    }
+          end
+          if @task.list.sub?
+            c.with_breadcrumb do
+              link_to @task.list.list.title, @task.list.list, class: "text-reset"
+            end
+            c.with_breadcrumb do
+              link_to @task.list.title, helpers.group_path(@task.list), class: "text-reset"
+            end
+          else
+            c.with_breadcrumb do
+              link_to @task.list.title, @task.list, class: "text-reset"
+            end
+          end
+          c.with_breadcrumb do
+            link_to "Task ##{@task.id}", @task, class: "text-reset"
+          end
+          c.with_breadcrumb(active: true) { "Edit" }
+        end
+      end
+
+      form_with model: @task do |f|
+        div(class: "d-flex mb-4") do
+          div(class: "text-end me-2 opacity-50") do
+            content_tag :a,
+                        style:
+                          "display:block; margin-top: -0.1rem;margin-left:-0.6rem",
+                        data: {
+                          turbo: true,
+                          turbo_stream: true
+                        } do
+              render(Phlex::Icons::Tabler::SquareRounded.new(width: 39, height: 39))
+            end
+          end
+          div(class: "w-100") do
+            plain f.text_field :title,
+                              class: "form-control form-control-lg",
+                              autofocus: (@focus == "title")
+          end
+        end
+
+        InnerPlan.configuration.task_edit_view_rows.each do |row|
+          render InnerPlan::Tasks::Form::RowComponent.new do |component|
+            row.content.each do |item|
+              component.with_column(span: item.options[:span]) do
+                render(item.content.call(context: self, form: f))
+              end
+            end
+          end
+        end
+
+        plain f.submit "Save changes", class: "btn btn-success btn-sm me-2"
+        link_to "Cancel", @task, class: "btn btn-outline-secondary btn-sm"
+      end
+    end
+  end
+end

data/app/components/inner_plan/tasks/form/item_component.rb

@@ -0,0 +1,21 @@
+module InnerPlan::Tasks::Form
+  class ItemComponent < Phlex::HTML
+    def initialize(icon:, title: nil)
+      @icon = icon
+      @title = title
+    end
+
+    def template(&content)
+      div(class: "d-flex mb-4") do
+        div(class: "me-3 text-body-tertiary", style: "margin-top:-.2 rem") do
+          render(@icon.new(width: 24, height: 24))
+        end
+
+        div(class: "pe-4 w-100") do
+          h6 { @title }
+          render content
+        end
+      end
+    end
+  end
+end

data/app/components/inner_plan/tasks/form/row_component.rb

@@ -0,0 +1,19 @@
+module InnerPlan::Tasks::Form
+  class RowComponent < Phlex::HTML
+    def initialize
+      @columns = []
+    end
+
+    def template(&content)
+      div(class: "row") {
+        render content
+      }
+    end
+
+    def with_column(span: 6, &content)
+      div(class: "col-#{span}") {
+        render content
+      }
+    end
+  end
+end

data/app/components/inner_plan/tasks/inline_form_view.rb

@@ -0,0 +1,62 @@
+module InnerPlan::Tasks
+  class InlineFormView < ApplicationView
+    include Phlex::Rails::Helpers::DOMID
+    include Phlex::Rails::Helpers::LinkTo
+    include Phlex::Rails::Helpers::Routes
+    include Phlex::Rails::Helpers::ContentTag
+    include Phlex::Rails::Helpers::FormWith
+
+    def initialize(task: InnerPlan::Task.new, list:, form_visible: false)
+      @task = task
+      @list = list
+      @form_visible = form_visible
+    end
+
+    def template
+      div(
+        data_controller: "task-inline-form",
+        data_task_inline_form_form_visible_value:
+          (@form_visible == true)
+      ) do
+        form_with model: @task,
+                  url: helpers.list_tasks_path(@list),
+                  class: ("d-none" if @form_visible != true),
+                  data: {
+                    task_inline_form_target: :form
+                  } do |f|
+          div(class: "d-flex w-100 mb-1") do
+            div(
+              class: "align-top me-2 text-muted invisible",
+              style: "margin-top:-.05 rem"
+            ) do
+              render(Phlex::Icons::Tabler::GripVertical.new(width: 20, height: 20))
+            end
+            div(
+              class: "align-top me-2",
+              style: "width:2 rem;height:2 rem;margin-top:-.12 rem"
+            ) do
+              button(class: "btn p-0 opacity-50") do
+                render(Phlex::Icons::Tabler::SquareRounded.new(width: 24, height: 24))
+              end
+            end
+            div(class: "form-check-label ms-1 w-100") do
+              plain f.text_field :title,
+                                autocomplete: "off",
+                                class: "form-control w-100",
+                                data: {
+                                  task_inline_form_target: :defaultInput,
+                                  action: "keydown.esc->task-inline-form#escPressed"
+                                }
+            end
+          end
+        end
+        a(
+          href: "#",
+          data_action: "task-inline-form#togglerClicked",
+          data_task_inline_form_target: "toggler",
+          class: "btn btn-outline-secondary btn-sm ms-tasks-element"
+        ) { " Add a task " }
+      end
+    end
+  end
+end

data/app/components/inner_plan/tasks/row/addons_component.rb

@@ -0,0 +1,22 @@
+module InnerPlan::Tasks::Row
+  class AddonsComponent < Phlex::HTML
+    def initialize(task)
+      @task = task
+    end
+
+    def template
+      div(class: 'd-inline-flex align-items-center gap-1') {
+        InnerPlan.configuration.task_row_addons.each do |item|
+          addon_instance = item.content.constantize.new(task)
+          next unless addon_instance.render?
+
+          render(addon_instance)
+        end
+      }
+    end
+
+    private
+
+    attr_reader :task
+  end
+end

data/app/components/inner_plan/tasks/row/base_addon_component.rb

@@ -0,0 +1,19 @@
+module InnerPlan::Tasks::Row
+  class BaseAddonComponent < Phlex::HTML
+    def initialize(task)
+      @task = task
+    end
+
+    def render?
+      true
+    end
+
+    def template
+      raise NotImplementedError
+    end
+
+    private
+
+    attr_reader :task
+  end
+end

data/app/components/inner_plan/tasks/row/description_addon_component.rb

@@ -0,0 +1,13 @@
+module InnerPlan::Tasks::Row
+  class DescriptionAddonComponent < BaseAddonComponent
+    def render?
+      !task.completed? && task.description.present?
+    end
+
+    def template
+      span(class: "text-body-tertiary") {
+        render(Phlex::Icons::Tabler::FileText.new(width: 15, height: 15, style: 'margin-top:-3px'))
+      }
+    end
+  end
+end

data/app/components/inner_plan/tasks/row/due_on_addon_component.rb

@@ -0,0 +1,14 @@
+module InnerPlan::Tasks::Row
+  class DueOnAddonComponent < BaseAddonComponent
+    def render?
+      !task.completed? && task.due_on.present?
+    end
+
+    def template
+      small(class: "text-body-tertiary text-nowrap") {
+        render(Phlex::Icons::Tabler::CalendarDue.new(width: 15, height: 15, style: 'margin-top:-3px'))
+        span(class: 'ms-1') { task.due_on.strftime('%a, %b %e') }
+      }
+    end
+  end
+end

data/app/components/inner_plan/tasks/row/group_addon_component.rb

@@ -0,0 +1,11 @@
+module InnerPlan::Tasks::Row
+  class GroupAddonComponent < BaseAddonComponent
+    def render?
+      @task.completed? && @task.list.sub?
+    end
+
+    def template
+      plain " &mdash; ".html_safe + @task.list.title
+    end
+  end
+end

data/app/components/inner_plan/tasks/row/handle_component.rb

@@ -0,0 +1,40 @@
+module InnerPlan::Tasks::Row
+  class HandleComponent < Phlex::HTML
+    include Phlex::Rails::Helpers::ClassNames
+    include Phlex::Rails::Helpers::LinkTo
+
+    def initialize(task)
+      @task = task
+    end
+
+    def template
+      div(
+        class: class_names('align-top me-2 text-body-tertiary task-handle cm', invisible: task.completed?),
+        style: 'line-height: 1.6rem'
+      ) {
+        div(class: "dropstart") {
+          a(class: "align-top text-body-tertiary task-handle cm", data_bs_toggle: "dropdown") {
+            render(Phlex::Icons::Tabler::GripVertical.new(width: 20, height: 20))
+          }
+
+          ul(class: "dropdown-menu dropdown-menu-end") {
+            li {
+              link_to(
+                helpers.edit_task_path(task),
+                class: 'dropdown-item d-flex align-items-center gap-2',
+                data: { turbo_frame: :_top }
+              ) {
+                render(Phlex::Icons::Tabler::Pencil.new(width: 18, height: 18, class: 'text-secondary'))
+                span { "Edit task" }
+              }
+            }
+          }
+        }
+      }
+    end
+
+    private
+
+    attr_reader :task
+  end
+end

data/app/components/inner_plan/tasks/row_component.rb

@@ -0,0 +1,35 @@
+module InnerPlan::Tasks
+  class RowComponent < Phlex::HTML
+    include Phlex::Rails::Helpers::ClassNames
+    include Phlex::Rails::Helpers::LinkTo
+    include Phlex::Rails::Helpers::CheckBox
+
+    def initialize(task, context: nil)
+      @task = task
+      @context = context
+    end
+
+    def template
+      div(class: "d-flex w-100 align-items-start", data: { id: task.id, update_url: helpers.update_position_task_path(task) }) {
+        render(InnerPlan::Tasks::Row::HandleComponent.new(task))
+
+        div(class: 'align-top', style: 'width:2rem; height: 2rem; line-height: 1.6rem;') {
+          render(InnerPlan::Tasks::CompletedTogglerComponent.new(task, context: context))
+        }
+
+        div(class: class_names('form-check-label ms-1 w-100', 'text-body-tertiary' => task.completed?), style: 'line-height: 1.6rem; padding-top: 1px;') {
+          link_to(title, task, class: 'text-reset text-decoration-none me-1')
+          render(InnerPlan::Tasks::Row::AddonsComponent.new(task))
+        }
+      }
+    end
+
+    private
+
+    attr_reader :task, :context
+
+    def title
+      InnerPlan::Tasks::TitleRenderer.call(task: task)[:title]
+    end
+  end
+end

data/app/components/inner_plan/tasks/rows_component.rb

@@ -0,0 +1,22 @@
+module InnerPlan::Tasks
+  class RowsComponent < Phlex::HTML
+    include Phlex::Rails::Helpers::DOMID
+
+    def initialize(tasks, list:, context: nil, id_key: :ongoing_tasks)
+      @tasks = tasks
+      @list = list
+      @context = context
+      @id_key = id_key
+    end
+
+    def template(&content)
+      div(id: dom_id(@list, @id_key), data: { controller: :tasks, tasks_list_id_value: @list.id }) {
+        @tasks.each do |task|
+          render(InnerPlan::Tasks::RowComponent.new(task, context: @context))
+        end
+
+        render(content) if content
+      }
+    end
+  end
+end

data/app/components/inner_plan/tasks/show/item_component.rb

@@ -0,0 +1,20 @@
+module InnerPlan::Tasks::Show
+  class ItemComponent < Phlex::HTML
+    def initialize(icon:, title: nil)
+      @icon = icon
+      @title = title
+    end
+
+    def template(&content)
+      div(class: "d-flex mt-4") do
+        div(class: "me-3 text-body-tertiary", style: "margin-top:-.2rem") do
+          render(@icon.new(width: 24, height: 24))
+        end
+        div do
+          h6 { @title }
+          render content
+        end
+      end
+    end
+  end
+end

data/app/components/inner_plan/tasks/show/row_component.rb

@@ -0,0 +1,19 @@
+module InnerPlan::Tasks::Show
+  class RowComponent < Phlex::HTML
+    def initialize
+      @columns = []
+    end
+
+    def template(&content)
+      div(class: "row") {
+        render content
+      }
+    end
+
+    def with_column(span: 6, &content)
+      div(class: "col-#{span}") {
+        render content
+      }
+    end
+  end
+end