oversee 0.2.0 → 0.3.1

data/app/components/oversee/field/input.rb

@@ -1,21 +1,20 @@
-class Oversee::Field::Input < Oversee::Base
+class Oversee::Field::Input < Oversee::Field
   MAP = {
-    string: Oversee::Field::Input::String,
+    belongs_to: Oversee::Field::Input::BelongsTo,
     boolean: Oversee::Field::Input::Boolean,
-    integer: Oversee::Field::Input::Integer,
+    date: Oversee::Field::Input::Date,
     datetime: Oversee::Field::Input::Datetime,
+    enum: Oversee::Field::Input::String,
+    integer: Oversee::Field::Input::Integer,
+    json: Oversee::Field::Input::Json,
+    jsonb: Oversee::Field::Input::Json,
+    rich_text: Oversee::Field::Input::RichText,
+    string: Oversee::Field::Input::String,
     text: Oversee::Field::Input::String,
-    enum: Oversee::Field::Input::String
   }
 
-  def initialize(key: nil, value: nil, datatype: :string)
-    @key = key
-    @value = value
-    @datatype = datatype
-  end
-
   def view_template
-    render component_class.new(key: @key, value: @value)
+    render component_class.new(key:, value:, **@options)
   end
 
   private
@@ -23,4 +22,7 @@ class Oversee::Field::Input < Oversee::Base
   def component_class
     MAP[@datatype.to_sym] || Oversee::Field::Input::String
   end
+
+  private
+
 end

data/app/components/oversee/field/label.rb

@@ -1,24 +1,25 @@
-class Oversee::Field::Label < Oversee::Base
+class Oversee::Field::Label < Oversee::Field
   ICON_MAP = {
-    string: Phlex::Icons::Iconoir::Text,
-    text: Phlex::Icons::Iconoir::TextSquare,
-    integer: Phlex::Icons::Iconoir::Number0Square,
-    datetime: Phlex::Icons::Iconoir::Calendar,
     boolean: Phlex::Icons::Iconoir::SwitchOn,
     data: Phlex::Icons::Iconoir::Page,
+    date: Phlex::Icons::Iconoir::Calendar,
+    datetime: Phlex::Icons::Iconoir::Calendar,
+    integer: Phlex::Icons::Iconoir::Number0Square,
+    json: Phlex::Icons::Iconoir::CodeBracketsSquare,
+    jsonb: Phlex::Icons::Iconoir::CodeBracketsSquare,
+    rich_text: Phlex::Icons::Iconoir::TextSquare,
+    string: Phlex::Icons::Iconoir::Text,
+    text: Phlex::Icons::Iconoir::TextSquare,
   }
 
-  def initialize(datatype: :string, key: nil)
-    @datatype = datatype
-    @key = key
-  end
-
   def view_template
-    div(class:"inline-flex items-center space-x-2") do
-      div(class: "size-5 bg-gray-100 inline-flex items-center justify-center") do
-        render ICON_MAP[@datatype] ? ICON_MAP[@datatype].new(class: "size-3") : ICON_MAP[:data].new(class: "size-3")
-      end
-      label(class: "uppercase text-xs text-gray-š00 font-medium block") { @key.to_s.humanize(keep_id_suffix: true) }
+    div(id: "#{key}_label", class:"inline-flex items-center space-x-2") do
+      div(class: "size-5 bg-gray-100 inline-flex items-center justify-center") { render icon.new(class: "size-3") }
+      label(class: "uppercase text-xs text-gray-700 font-medium block cursor-auto", for: key) { key.to_s.humanize(keep_id_suffix: true) }
     end
   end
+
+  def icon
+    ICON_MAP[datatype&.to_sym] || ICON_MAP[:data]
+  end
 end

data/app/components/oversee/field/set.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+class Oversee::Field::Set < Oversee::Field
+  def view_template
+    div(id: dom_id(resource, key), class:"flex flex-col gap-2") do
+      div(class:"flex items-center justify-between h-10 gap-4") do
+        render Oversee::Field::Label.new(key:, datatype:)
+        button(type: :submit, class: "bg-black text-white text-xs font-medium px-6 py-2 hover:opacity-75 transition-opacity", form: field_form_id) { "Save" } if state == :input
+      end
+      div(class: "flex items-center justify-between gap-2") { send("#{state}_state") }
+    end
+  end
+
+  def value_state
+    render Oversee::Field::Display.new(resource:, key:, value:, datatype:, **@options)
+    div(id: dom_id(@resource, :"#{key}_actions")) do
+      button(
+        class: "bg-gray-100 hover:bg-gray-200 text-gray-400 hover:text-blue-500 size-10 aspect-square inline-flex items-center justify-center transition-colors",
+        data: { controller: "clipboard", action: "click->clipboard#copy", clipboard_content_value: value.to_s }
+      ) do
+        span(class: "hidden", data: { clipboard_target: "successIcon"}) { render Phlex::Icons::Iconoir::Check.new(class: "size-4 text-emerald-500", stroke_width: 1.75) }
+        span(data: { clipboard_target: "copyIcon"}) { render Phlex::Icons::Iconoir::Copy.new(class: "size-4", stroke_width: 1.75) }
+      end
+    end
+  end
+
+  def input_state
+    render Oversee::Field::Form.new(resource: @resource, datatype:, key:, value:)
+  end
+
+  private
+
+  def state
+    @state ||= @options[:state] || :value
+  end
+end

data/app/components/oversee/field/value/belongs_to.rb

@@ -0,0 +1,15 @@
+class Oversee::Field::Value::BelongsTo < Oversee::Field::Value
+  def view_template
+    p(title: value, class:"inline-flex items-center gap-1") do
+      if display_key?
+        span { key.humanize }
+        span {"|"}
+      end
+      span { value }
+    end
+  end
+
+  private
+
+  def display_key? = !!@options[:display_key]
+end

data/app/components/oversee/field/value/boolean.rb

@@ -1,50 +1,5 @@
-class Oversee::Field::Value::Boolean < Phlex::HTML
-  def initialize(key: nil, value: nil, kind: :value)
-    @value = value
-  end
-
+class Oversee::Field::Value::Boolean < Oversee::Field::Value
   def view_template
-    @value ? check_icon : x_icon
-  end
-
-  private
-
-  def check_icon
-    svg(
-      stroke_width: "2",
-      viewbox: "0 0 24 24",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg",
-      color: "currentColor",
-      class: "size-4 text-emerald-500"
-    ) do |s|
-      s.path(
-        d: "M5 13L9 17L19 7",
-        stroke: "currentColor",
-        stroke_width: "2",
-        stroke_linecap: "round",
-        stroke_linejoin: "round"
-      )
-    end
-  end
-
-  def x_icon
-    svg(
-      stroke_width: "1.5",
-      viewbox: "0 0 24 24",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg",
-      color: "currentColor",
-      class: "size-4 text-rose-500"
-    ) do |s|
-      s.path(
-        d:
-          "M6.75827 17.2426L12.0009 12M17.2435 6.75736L12.0009 12M12.0009 12L6.75827 6.75736M12.0009 12L17.2435 17.2426",
-        stroke: "currentColor",
-        stroke_width: "1.5",
-        stroke_linecap: "round",
-        stroke_linejoin: "round"
-      )
-    end
+    render value ? Phlex::Icons::Iconoir::Check.new(class: "size-4 text-emerald-500") : Phlex::Icons::Iconoir::Xmark.new(class: "size-4 text-rose-500")
   end
 end

data/app/components/oversee/field/value/date.rb

@@ -0,0 +1,5 @@
+class Oversee::Field::Value::Date < Oversee::Field::Value
+  def view_template
+    time(title: value.to_s) { value&.to_fs(:long) }
+  end
+end

data/app/components/oversee/field/value/datetime.rb

@@ -1,9 +1,5 @@
-class Oversee::Field::Value::Datetime < Phlex::HTML
-  def initialize(key: nil, value: nil, kind: :value)
-    @value = value
-  end
-
+class Oversee::Field::Value::Datetime < Oversee::Field::Value
   def view_template
-    time(title: @value) { @value&.to_fs(:long) || "N/A" }
+    time(title: value.to_s) { value&.to_fs(:long) || "N/A" }
   end
 end

data/app/components/oversee/field/value/enum.rb

@@ -1,9 +1,5 @@
-class Oversee::Field::Value::Enum < Phlex::HTML
-  def initialize(key: nil, value: nil, kind: :value)
-    @value = value
-  end
-
+class Oversee::Field::Value::Enum < Oversee::Field::Value
   def view_template
-    p(class:"inline-flex px-2 py-1 text-red-500") { @value.to_s }
+    p(class:"inline-flex px-2 py-1 text-red-500") { value.to_s }
   end
 end

data/app/components/oversee/field/value/integer.rb

@@ -1,9 +1,5 @@
-class Oversee::Field::Value::Integer < Phlex::HTML
-  def initialize(key: nil, value: nil, kind: :value)
-    @value = value
-  end
-
+class Oversee::Field::Value::Integer < Oversee::Field::Value
   def view_template
-    p { @value }
+    p { value }
   end
 end

data/app/components/oversee/field/value/json.rb

@@ -0,0 +1,6 @@
+class Oversee::Field::Value::Json < Oversee::Field::Value
+  def view_template
+    return p(class: "text-gray-400 text-xs uppercase") { "JSON" } if for_table?
+    p(class: "truncate") { value.to_s }
+  end
+end

data/app/components/oversee/field/value/rich_text.rb

@@ -0,0 +1,5 @@
+class Oversee::Field::Value::RichText < Oversee::Field::Value
+  def view_template
+    p(class: "truncate") { value }
+  end
+end

data/app/components/oversee/field/value/string.rb

@@ -1,20 +1,13 @@
-class Oversee::Field::Value::String < Phlex::HTML
-  def initialize(key: nil, value: nil, kind: :value)
-    @key = key
-    @value = value
-    @kind = kind
-  end
-
+class Oversee::Field::Value::String < Oversee::Field::Value
   def view_template
     return p(class: "text-gray-400 text-xs uppercase") { "Empty" } if @value == ""
     return p(class: "text-gray-400 text-xs uppercase") { "Redacted" } if sensitive?
-
-    p(class: "truncate") { @value }
+    p(class: "truncate") { value }
   end
 
   private
 
   def sensitive?
-    @key&.downcase&.include?("password") ||  @key&.downcase&.include?("token")
+    key&.downcase&.include?("password") || key&.downcase&.include?("token")
   end
 end

data/app/components/oversee/field/value/text.rb

@@ -1,9 +1,5 @@
-class Oversee::Field::Value::Text < Phlex::HTML
-  def initialize(datatype: :string, key: nil, value: nil, kind: :value)
-    @value = value
-  end
-
+class Oversee::Field::Value::Text < Oversee::Field::Value
   def view_template
-    p(class: "truncate") { @value }
+    p(class: "truncate") { value }
   end
 end

data/app/components/oversee/field/value.rb

@@ -1,13 +1,22 @@
 class Oversee::Field::Value < Oversee::Base
   MAP = {
     string: Oversee::Field::Value::String,
+    belongs_to: Oversee::Field::Value::BelongsTo,
     boolean: Oversee::Field::Value::Boolean,
-    integer: Oversee::Field::Value::Integer,
+    date: Oversee::Field::Value::Date,
     datetime: Oversee::Field::Value::Datetime,
+    enum: Oversee::Field::Value::Enum,
+    integer: Oversee::Field::Value::Integer,
+    json: Oversee::Field::Value::Json,
+    jsonb: Oversee::Field::Value::Json,
+    rich_text: Oversee::Field::Value::RichText,
     text: Oversee::Field::Value::Text,
-    enum: Oversee::Field::Value::Enum
   }
 
+  attr_reader :key
+  attr_reader :value
+  attr_reader :datatype
+
   def initialize(key: nil, value: nil, datatype: :string, **options)
     @key = key
     @value = value
@@ -18,14 +27,14 @@ class Oversee::Field::Value < Oversee::Base
   end
 
   def view_template
-    return p(class: "text-gray-400 text-xs"){ "—" } if @value.nil?
-    render component_class.new(key: @key, value: @value)
+    return p(class: "text-gray-400 text-xs"){ "—" } if value.nil?
+    render component_class.new(key:, value:, **@options)
   end
 
   private
 
   def component_class
-    MAP[@datatype.to_sym] || Oversee::Field::Value::String
+    MAP[datatype.to_sym] || Oversee::Field::Value::String
   end
 
   def for_table?

data/app/components/oversee/field.rb

@@ -0,0 +1,42 @@
+class Oversee::Field < Oversee::Base
+  attr_reader :resource
+  attr_reader :key
+  attr_reader :value
+  attr_reader :datatype
+
+  def initialize(resource: nil, key: nil, value: nil, datatype: nil, **options)
+    @resource = resource
+    @key = key
+    @value = value
+    @datatype = datatype
+    @options = options
+  end
+
+  def view_template
+    plain "Oversee::Field"
+  end
+
+  # Sub-components
+  def __LABEL__ = Oversee::Field::Label.new(resource:, key:, value:, datatype:, **@options)
+  def __VALUE__ = Oversee::Field::Value.new(resource:, key:, value:, datatype:, **@options)
+  def __INPUT__ = Oversee::Field::Input.new(resource:, key:, value:, datatype:, **@options)
+  def __FORM__ = Oversee::Field::Form.new(resource:, key:, value:, datatype:, **@options)
+  def __SET__ = Oversee::Field::Set.new(resource:, key:, value:, datatype:, **@options)
+
+  # Helpers & Decorators
+  def field_id
+    @field_id ||= "resource_#{key}"
+  end
+
+  def field_name
+    @field_name ||= "resource[#{key}]"
+  end
+
+  def field_form_id
+    @form_id ||= dom_id(resource, "#{key}_form")
+  end
+
+  def resource_class_name
+    @resource_class_name ||= @resource.class.name
+  end
+end

data/app/components/oversee/flash.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+class Oversee::Flash < Phlex::HTML
+  include Phlex::Rails::Helpers::Flash
+
+  def view_template
+    div(id: :flash, class: "fixed bottom-0 right-0 mb-8 mr-8 w-80 z-50") do
+      if !flash.empty?
+        div(
+          class: "flex flex-col gap-2 p-4 bg-white border border-gray-200/75 border-b-2 rounded-lg transition-all opacity-0 transform duration-300",
+          data: { controller: :notification }
+        ) do
+          notice if notice?
+          alert if alert?
+        end
+      end
+    end
+  end
+
+  private
+
+  def notice?
+    flash[:notice].present?
+  end
+
+  def notice
+    render Phlex::Icons::Iconoir::CheckCircle.new(class: "size-5 text-emerald-500", stroke_width: 2)
+    p(class: "text-sm text-gray-700") { flash[:notice] }
+  end
+
+  def alert?
+    flash[:alert].present?
+  end
+
+  def alert
+    render Phlex::Icons::Iconoir::MessageAlert.new(class: "size-5 text-red-500", stroke_width: 2)
+    p(class: "text-sm text-gray-700") { flash[:alert] }
+  end
+end

data/app/components/oversee/layout/application.rb

@@ -0,0 +1,46 @@
+# frozen_string_literal: true
+
+class Oversee::Layout::Application < Oversee::Base
+  extend Phlex::Kit
+
+  include Phlex::Rails::Helpers::CSPMetaTag
+  include Phlex::Rails::Helpers::CSRFMetaTags
+  include Phlex::Rails::Helpers::StylesheetLinkTag
+  include Phlex::Rails::Helpers::JavascriptImportmapTags
+
+  def view_template
+    doctype
+    html do
+      # render Head
+      head do
+        csrf_meta_tags
+        csp_meta_tag
+
+        title { "Oversee | #{Oversee.application_name}" }
+
+        meta(name: "viewport", content: "width=device-width, initial-scale=1.0")
+        meta(name: "ROBOTS", content: "NOODP")
+
+        link(rel: "stylesheet", type: "text/css", href: "https://unpkg.com/trix@2.1.8/dist/trix.css")
+
+        render Oversee::Dashboard::Javascript.new
+        render Oversee::Dashboard::Tailwind.new
+      end
+
+      body(class: "min-h-screen bg-gray-100 p-4") do
+        render Oversee::Flash.new
+
+        div(class: "flex gap-4 w-full") do
+          div(class: "w-72 shrink-0") { render Oversee::Dashboard::Sidebar.new }
+          div(class: "w-full overflow-scroll") do
+            div(class: "bg-white rounded-lg overflow-clip p-4") do
+              yield
+            end
+          end
+        end
+
+
+      end
+    end
+  end
+end

data/app/components/oversee/resources/index.rb

@@ -9,12 +9,31 @@ class Oversee::Resources::Index < Oversee::Base
   end
 
 
+  def around_template
+    render Oversee::Layout::Application.new { super }
+  end
+
   def view_template
-    render Oversee::Dashboard::Header.new(title: @resource_class.to_s, subtitle: "Index") do
-      a(href: helpers.new_resource_path(@params[:resource_class_name]), class: "inline-flex items-center justify-center size-8 rounded-full bg-emerald-100 text-emerald-500 hover:bg-emerald-200 text-sm font-medium") { render Phlex::Icons::Iconoir::Plus.new(class: "size-4 text-emerald-500") }
+    render Oversee::Dashboard::Header.new(title: @resource_class.to_s.pluralize) do |h|
+      h.left
+      h.right do
+        a(
+          href: helpers.new_resource_path(@params[:resource_class_name]),
+          target: "_top",
+          class: "inline-flex items-center justify-center gap-1.5 h-8 px-4 rounded-full bg-transparent text-gray-900 hover:bg-gray-100 text-sm font-medium transition group"
+        ) do
+          render Phlex::Icons::Iconoir::Plus.new(class: "size-4 text-gray-500 group-hover:text-blue-500", stroke_width: 2.5)
+          plain "Add new"
+        end
+      end
     end
-    render Oversee::Dashboard::Filters.new(params: @params)
+    hr(class: "my-4")
+
+    render Oversee::Dashboard::Actions.new(params: @params)
+
+    hr(class: "mt-4")
     render Oversee::Resources::Table.new(resource_class: @resource_class, resources: @resources, params: @params)
+    hr()
     render Oversee::Dashboard::Pagination.new(pagy: @pagy, params: @params)
   end
 

data/app/components/oversee/resources/new.rb

@@ -7,11 +7,15 @@ class Oversee::Resources::New < Oversee::Base
     @params = params
   end
 
+  def around_template
+    render Oversee::Layout::Application.new { super }
+  end
+
   def view_template
     render Oversee::Dashboard::Header.new(title: @resource_class.to_s, subtitle: "Creating new record")
 
-    div(class: "p-8") do
-      render Oversee::Resources::Form.new(resource: @resource)
-    end
+    hr(class: "my-4")
+
+    render Oversee::Resources::Form.new(resource: @resource)
   end
 end