avo 0.4.6 → 0.5.0.beta1

data/README.md

@@ -46,3 +46,7 @@ And then execute:
 ```bash
 $ bundle install
 ```
+
+# Contributing
+
+Please read [CONTRIBUTING.MD](./CONTRIBUTING.MD)

data/app/components/avo/common/badge_viewer_component.html.erb

@@ -0,0 +1,24 @@
+<%
+  backgrounds = {
+    info: 'bg-blue-500',
+    success: 'bg-green-500',
+    danger: 'bg-red-500',
+    warning: 'bg-yellow-500',
+  }
+
+  label = @value
+  background = :info
+
+  @options.invert.each do |values, type|
+    if [values].flatten.map { |value| value.to_s }.include? @value
+      label = @value
+      background = type.to_sym
+      next
+    end
+  end
+
+  classes = 'whitespace-nowrap rounded-md uppercase px-2 py-1 text-xs font-bold text-black block text-center truncate '
+
+  classes += "#{backgrounds[background]} text-white" if backgrounds[background].present?
+%>
+<span class="<%= classes %>" style="max-width: 120px;"><%= label %></span>

data/app/components/avo/common/badge_viewer_component.rb

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+class Avo::Common::BadgeViewerComponent < ViewComponent::Base
+  def initialize(value:, options:)
+    @value = value
+    @options = options
+  end
+end

data/app/components/avo/common/boolean_check_component.html.erb

@@ -0,0 +1,12 @@
+<%
+  classes = 'h-5 float-left'
+
+  if @checked
+    classes += ' text-teal-600'
+    icon = 'check-circle'
+  else
+    classes += ' text-red-500'
+    icon = 'x-circle'
+  end
+%>
+<%= helpers.svg "#{icon}.svg", class: classes %>

data/app/components/avo/common/boolean_check_component.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+class Avo::Common::BooleanCheckComponent < ViewComponent::Base
+  def initialize(checked: false)
+    @checked = checked
+  end
+end

data/app/components/avo/common/boolean_group_component.html.erb

@@ -0,0 +1,16 @@
+<div data-controller="tippy">
+  <%= link_to t('avo.view').humanize, 'javascript:void(0);', data: { 'tippy-target': 'source' } %>
+  <div class="hidden" data-tippy-target="content">
+    <div class="p-2 space-y-2">
+      <%
+        @options.each do |id, label|
+          checked = @value.present? && @value[id.to_s].present?
+      %>
+      <div>
+        <%= render Avo::Common::BooleanCheckComponent.new checked: checked %>
+          <div class="ml-6 text-left py-px"><%= label %></div>
+        </div>
+      <% end %>
+    </div>
+  </div>
+</div>

data/app/components/avo/common/boolean_group_component.rb

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+class Avo::Common::BooleanGroupComponent < ViewComponent::Base
+  def initialize(options: {}, value: nil)
+    @options = options
+    @value = value
+  end
+end

data/app/components/avo/common/files_list_viewer_component.html.erb

@@ -0,0 +1,5 @@
+<div class="relative p-3 bg-blue-gray-200 grid grid-cols-3 xl:grid-cols-4 gap-3 rounded-xl">
+  <% @field.value.attachments.each do |file| %>
+    <%= render Avo::Common::MultipleFileViewerComponent.new id: @field.id, file: file, is_image: @field.is_image, button_size: :xs, resource: @resource %>
+  <% end %>
+</div>

data/app/components/avo/common/files_list_viewer_component.rb

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+class Avo::Common::FilesListViewerComponent < ViewComponent::Base
+  def initialize(field:, resource:)
+    @field = field
+    @resource = resource
+  end
+end

data/app/components/avo/common/gravatar_viewer_component.html.erb

@@ -0,0 +1,12 @@
+<%
+  options = {
+    default: '',
+    size: 340,
+  }
+  options[:default] = @default if @default.present?
+  options[:size] = @size if @size.present?
+  query = options.map { |key, value| "#{key}=#{value}" }.join('&')
+  url = URI::HTTP.build(host: "www.gravatar.com", path: "/avatar/#{@md5}", query: query)
+  classes = @rounded ? 'min-w-10 rounded-full' : 'min-w-10'
+%>
+<%= link_to_if @link_to_resource.present?, image_tag(url.to_s, class: classes), @link %>

data/app/components/avo/common/gravatar_viewer_component.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+class Avo::Common::GravatarViewerComponent < ViewComponent::Base
+  def initialize(md5: nil, link: nil, default: nil, size: nil, rounded: false, link_to_resource: false)
+    @md5 = md5
+    @link = link
+    @default = default
+    @size = size
+    @rounded = rounded
+    @link_to_resource = link_to_resource
+  end
+end

data/app/components/avo/common/heading_component.html.erb

@@ -0,0 +1,13 @@
+<div class="flex items-start py-1 leading-tight border-t bg-blue-gray-600 text-white text-xs">
+  <div class="p-3 pl-6 h-full w-full">
+    <% if @value.present? %>
+      <% if @as_html %>
+        <%== @value %>
+      <% else %>
+        <div class="font-semibold uppercase"><%= @value %></div>
+      <% end %>
+    <% else %>
+      —
+    <% end %>
+  </div>
+</div>

data/app/components/avo/common/heading_component.rb

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+class Avo::Common::HeadingComponent < ViewComponent::Base
+  def initialize(value:, as_html:)
+    @value = value
+    @as_html = as_html
+  end
+end

data/app/components/avo/common/multiple_file_viewer_component.html.erb

@@ -0,0 +1,26 @@
+<div class="relative min-h-full max-w-full flex-1 flex flex-col justify-between space-y-3">
+  <% if @file.present? %>
+    <% if @file.representable? && @is_image %>
+      <%= image_tag helpers.main_app.url_for(@file), class: 'rounded-lg max-h-168 max-w-full' %>
+    <% else %>
+      <div class="relative flex flex-col justify-evenly items-center px-2 rounded-lg border bg-white border-gray-500 py-6 flex-1">
+        <div class="flex flex-col justify-center items-center w-full">
+          <%= helpers.svg 'document-text', class: 'h-10 text-gray-800 mb-2' %>
+          <div class="block w-full truncate text-center text-sm">
+            <%= @file.filename %>
+          </div>
+        </div>
+      </div>
+    <% end %>
+
+    <div class="flex justify-between lg:flex-col lg:space-y-2 2xl:flex-row 2xl:space-y-0">
+      <%= a_link helpers.main_app.url_for(@file), color: 'indigo', download: true, class: 'text-center', size: :xs do %>
+        <%= helpers.svg 'download' %> <span class="hidden lg:block lg:flex-1"><%= t('avo.download_file') %></span>
+      <% end %>
+      <%= a_link "/avo/resources/#{@resource.model.model_name.route_key}/#{@resource.model.id
+      }/active_storage_attachments/#{@id}/#{@file.id}", color: :red, variant: :outlined, size: :xs, class: 'text-center', 'data-turbo-frame': 'destroy_attachment_form', data: { confirm: t('avo.are_you_sure')} do %>
+        <%= helpers.svg 'trash' %> <span class="hidden lg:block lg:flex-1"><%= t('avo.delete_file', { item: @file.filename }) %></span>
+      <% end %>
+    </div>
+  <% end %>
+</div>

data/app/components/avo/common/multiple_file_viewer_component.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+class Avo::Common::MultipleFileViewerComponent < ViewComponent::Base
+  include Avo::ApplicationHelper
+
+  def initialize(id:, file:, is_image:, button_size: :md, resource:)
+    @id = id
+    @file = file
+    @is_image = is_image
+    @button_size = button_size
+    @resource = resource
+  end
+end

data/app/components/avo/common/single_file_viewer_component.html.erb

@@ -0,0 +1,28 @@
+<div class="relative min-h-full max-w-full flex-1 space-y-3">
+  <% if @file.present? %>
+    <% if @file.representable? && @is_image %>
+      <%= image_tag helpers.main_app.url_for(@file), class: 'rounded-lg max-h-168 max-w-full' %>
+    <% else %>
+      <div class="relative flex flex-col justify-evenly items-center px-2 rounded-lg border bg-white border-gray-500 min-h-48">
+        <div class="flex flex-col justify-center items-center w-full">
+          <%= helpers.svg 'document-text', class: 'h-12 text-gray-800 mb-2' %>
+          <div class="block w-full truncate text-center text-sm">
+            <%= @file.filename %>
+          </div>
+        </div>
+      </div>
+    <% end %>
+
+    <div class="flex justify-between">
+      <%= a_link helpers.main_app.url_for(@file), color: 'indigo', download: true, class: '', size: :md do %>
+        <%= helpers.svg 'download' %> <%= t('avo.download_file') %>
+      <% end %>
+      <%= a_link "/avo/resources/#{@resource.model.model_name.route_key}/#{@resource.model.id
+      }/active_storage_attachments/#{@id}/#{@file.id}", color: :red, variant: :outlined, size: :md, class: '', 'data-turbo-frame': 'destroy_attachment_form', data: { confirm: t('avo.are_you_sure')} do %>
+        <%= helpers.svg 'trash' %> <%= t('avo.delete_file', { item: @file.filename }) %>
+      <% end %>
+    </div>
+  <% else %>
+    –
+  <% end %>
+</div>

data/app/components/avo/common/single_file_viewer_component.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+class Avo::Common::SingleFileViewerComponent < ViewComponent::Base
+  include Avo::ApplicationHelper
+
+  def initialize(id:, file:, is_image:, button_size: :md, resource:)
+    @id = id
+    @file = file
+    @is_image = is_image
+    @button_size = button_size
+    @resource = resource
+  end
+end

data/app/components/avo/common/status_viewer_component.html.erb

@@ -0,0 +1,10 @@
+<%
+  classes = "inline-block"
+  classes += " text-red-700" if @status == 'failed'
+%>
+<div class="flex flex-shrink-0">
+  <div class="<%= classes %>"><%= @label %></div>
+  <% if @status == 'loading' %>
+    <div class="spinner ml-1"></div>
+  <% end %>
+</div>

data/app/components/avo/common/status_viewer_component.rb

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+class Avo::Common::StatusViewerComponent < ViewComponent::Base
+  def initialize(status:, label:)
+    @status = status
+    @label = label
+  end
+end

data/app/components/avo/edit/field_wrapper_component.html.erb

@@ -0,0 +1,20 @@
+<div class="flex items-center py-0 leading-tight <%= @classes %> min-h-16" data-field-id="<%= @field.id %>" data-field-type="<%= @field.type %>">
+  <div class="h-16 flex self-start items-center text-blue-gray-800">
+    <div class="<% if @displayed_in_modal %> md:w-48 <% else %> md:w-64 <% end %> w-48 px-8 flex" data-slot="label">
+      <%= @form.label @field.id, @field.name %> <% if @field.required %> <span class="text-red-600">*</span> <% end %>
+    </div>
+  </div>
+  <div class="flex-1 flex flex-row min-h-inherit">
+    <div class="px-6 py-3 self-center <% if @displayed_in_modal or @full_width %> w-full <% else %> w-8/12 <% end %>" data-slot="value">
+      <%= content %>
+
+      <% if @model.present? and @model.errors.include? @field.id %>
+        <div class="text-red-600 mt-2 text-sm"><%= @model.errors.full_messages_for(@field.id).to_sentence %></div>
+      <% end %>
+
+      <% if @field.help %>
+        <div class="text-gray-600 mt-2 text-sm"><%== @field.help %></div>
+      <% end %>
+    </div>
+  </div>
+</div>

data/app/components/avo/edit/field_wrapper_component.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+class Avo::Edit::FieldWrapperComponent < ViewComponent::Base
+  def initialize(field: nil, dash_if_blank: true, full_width: false, displayed_in_modal: false, form: nil, resource: {}, **args)
+    @field = field
+    @dash_if_blank = dash_if_blank
+    @classes = args[:class].present? ? args[:class] : ''
+    @args = args
+    @displayed_in_modal = displayed_in_modal
+    @form = form
+    @resource = resource
+    @model = resource.present? ? resource.model : nil
+    @full_width = full_width
+
+    if @index != 0 or @displayed_in_modal
+      @classes += ' border-t'
+    end
+  end
+end

data/app/components/avo/edit/fields/belongs_to_field_component.html.erb

@@ -0,0 +1,19 @@
+<%= edit_field_wrapper field: @field, index: @index, form: @form, resource: @resource, displayed_in_modal: @displayed_in_modal do %>
+  <% disabled = @field.readonly || params[:via_resource_id] %>
+  <%= @form.select @field.foreign_key, @field.options.map { |o| [o[:label], o[:value]] },
+    {
+      include_blank: @field.placeholder,
+    },
+    {
+      class: helpers.input_classes('w-full', has_error: @field.model_errors.include?(@field.id)),
+      disabled: disabled
+    }
+    %>
+  <%
+    # If the select field is disabled, no value will be sent. It's how HTML works.
+    # Thus the extra hidden field to actually send the related id to the server.
+    if disabled
+  %>
+    <%= @form.hidden_field @field.foreign_key %>
+  <% end %>
+<% end %>

data/app/components/avo/edit/fields/belongs_to_field_component.rb

@@ -0,0 +1,4 @@
+# frozen_string_literal: true
+
+class Avo::Edit::Fields::BelongsToFieldComponent < Avo::Edit::Fields::FieldComponent
+end

data/app/components/avo/edit/fields/boolean_field_component.html.erb

@@ -0,0 +1,9 @@
+<%= edit_field_wrapper field: @field, index: @index, form: @form, resource: @resource, dash_if_blank: false, displayed_in_modal: @displayed_in_modal do %>
+  <div class="h-8 flex items-center">
+    <%= @form.check_box @field.id,
+      class: 'mx-2 text-lg h-4 w-4',
+      disabled: @field.readonly,
+      checked: @field.value
+    %>
+  </div>
+<% end %>

data/app/components/avo/edit/fields/boolean_field_component.rb

@@ -0,0 +1,4 @@
+# frozen_string_literal: true
+
+class Avo::Edit::Fields::BooleanFieldComponent < Avo::Edit::Fields::FieldComponent
+end

data/app/components/avo/edit/fields/boolean_group_field_component.html.erb

@@ -0,0 +1,25 @@
+<%= edit_field_wrapper field: @field, index: @index, form: @form, resource: @resource, displayed_in_modal: @displayed_in_modal do %>
+  <div class="flex items-center">
+    <div class="space-y-2">
+      <% model_param_key = model_name_from_record_or_class(@resource.model).param_key %>
+      <%= check_box_tag "#{model_name_from_record_or_class(@resource.model).param_key}[#{@field.id}][]", '', true, { class: "hidden" } %>
+      <% @field.options.each do |id, label| %>
+        <%
+          checked = false
+
+          # Get the state of the checkboxes from either the form that returns a validation error or from the model itself.
+          if params[model_param_key].present? && params[model_param_key][@field.id.to_s].present?
+            checked = params[model_param_key][@field.id.to_s].include?(id.to_s)
+          else
+            if @field.value.present?
+              checked = @field.value[id.to_s]
+            end
+          end
+        %>
+        <label class="block">
+          <%= check_box_tag "#{model_param_key}[#{@field.id}][]", id, checked, { class: "w-3 h-3", disabled: @field.readonly, id: "#{model_param_key}_#{@field.id}_#{id}" } %> <%= label %>
+        </label>
+      <% end %>
+    </div>
+  </div>
+<% end %>

data/app/components/avo/edit/fields/boolean_group_field_component.rb

@@ -0,0 +1,4 @@
+# frozen_string_literal: true
+
+class Avo::Edit::Fields::BooleanGroupFieldComponent < Avo::Edit::Fields::FieldComponent
+end

data/app/components/avo/edit/fields/code_field_component.html.erb

@@ -0,0 +1,19 @@
+<%= edit_field_wrapper field: @field, index: @index, form: @form, resource: @resource, displayed_in_modal: @displayed_in_modal, full_width: true do %>
+  <div data-controller="code-field">
+    <%= @form.text_area @field.id,
+      class: helpers.input_classes('w-full', has_error: @field.model_errors.include?(@field.id)),
+      placeholder: @field.placeholder,
+      disabled: @field.readonly,
+      data: {
+        'code-field-target': 'element',
+        view: :edit,
+        language: @field.language,
+        theme: @field.theme,
+        'tab-size': @field.tab_size,
+        'read-only': @field.readonly,
+        'indent-with-tabs': @field.indent_with_tabs,
+        'line-wrapping': @field.line_wrapping,
+      }
+    %>
+  </div>
+<% end %>

data/app/components/avo/edit/fields/code_field_component.rb

@@ -0,0 +1,4 @@
+# frozen_string_literal: true
+
+class Avo::Edit::Fields::CodeFieldComponent < Avo::Edit::Fields::FieldComponent
+end

data/app/components/avo/edit/fields/country_field_component.html.erb

@@ -0,0 +1,7 @@
+<%= edit_field_wrapper field: @field, index: @index, form: @form, resource: @resource, displayed_in_modal: @displayed_in_modal do %>
+  <%= @form.select @field.id, @field.select_options, { selected: @field.value, prompt: @field.placeholder },
+    class: helpers.input_classes('w-full', has_error: @field.model_errors.include?(@field.id)),
+    placeholder: @field.placeholder,
+    disabled: @field.readonly
+  %>
+<% end %>

data/app/components/avo/edit/fields/country_field_component.rb

@@ -0,0 +1,4 @@
+# frozen_string_literal: true
+
+class Avo::Edit::Fields::CountryFieldComponent < Avo::Edit::Fields::FieldComponent
+end

data/app/components/avo/edit/fields/date_field_component.html.erb

@@ -0,0 +1,18 @@
+<%= edit_field_wrapper field: @field, index: @index, form: @form, resource: @resource, displayed_in_modal: @displayed_in_modal do %>
+  <div data-controller="date-field">
+    <%= @form.date_field @field.id,
+      class: helpers.input_classes('w-full', has_error: @field.model_errors.include?(@field.id)),
+      placeholder: @field.placeholder,
+      disabled: @field.readonly,
+      data: {
+        'date-field-target': 'input',
+        'first-day-of-week': @field.first_day_of_week,
+        'picker-format': @field.picker_format,
+        'enable-time': false,
+        format: @field.format,
+        placeholder: @field.placeholder,
+        relative: @field.relative,
+      }
+    %>
+  </div>
+<% end %>