avo 1.3.0 → 1.3.5.pre.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f417048179aae7840d2571ab56e787c9eb6c7dd437f07e90221beeded482f5ce
-  data.tar.gz: 74c2a021008367b695973a98f1ee69eb6711d943675254925f0573c788d5be75
+  metadata.gz: 6212847ad5e28753e23625482067816d88ec6728f3d35656182b3a6e46b021d2
+  data.tar.gz: 479c5130dd59104ab944af271b85ba398aec7007568116191d82668ab47b44cc
 SHA512:
-  metadata.gz: 51bdf61a474220a6d743c81da789dc07b9b54b7c8c6aad0e046b2f576fb0d296145b93e05ce77b73fc57d02b8c8c0692e997faf02da6b76b67b1442a80884602
-  data.tar.gz: 3faa5c7e35d64499f160a7aca161d6b0b15eccc6cbaceb8dc42bbe5832d063a0c0b39ea951543802599f1ee3c55d358ae64706d1390719a82e9ff49d5dcdbb6f
+  metadata.gz: e1a9663120f63b7458932e061a90d7287c7c7405382d64bcf5fb75c7c64c342a6a461a4ba06ae85478fc8e34efba204ecc99b7a3508541753d124153d4f519ae
+  data.tar.gz: 7dcb4d3494ff81a33d793f14e7fbd8d25aa178f6d22293fbaf27c6601c7426c87703f93674a5fb5db20d6c5b1b2b3a1aab24901571bd39a3da138f0d7df92a9a

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    avo (1.3.0)
+    avo (1.3.5.pre.1)
       active_link_to
       addressable
       breadcrumbs_on_rails

data/README.md

@@ -36,7 +36,7 @@ Avo is a beautiful next-generation framework that empowers you, the developer, t
   - **Localization*** - Have it available in any language you need.
   - **No asset pipeline pollution** - Bring your own asset pipeline.
 
-*Features are still under development
+*Features still under development
 
 # Installation
 Add this line to your application's `Gemfile`:

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

@@ -0,0 +1,53 @@
+<div class="w-full shadow-lg rounded-lg overflow-hidden"
+  data-controller="key-value"
+  data-key-value-target="controller"
+  data-options="<%= @field.options.to_json %>"
+  data-input-classes="<%= input_classes %>"
+  data-editable="<%= @view.in?([:edit, :create]) %>"
+>
+  <div class="w-full flex flex-col">
+    <div class="flex w-full">
+      <div class="flex w-full bg-gray-800 shadow overflow-hidden">
+        <div class="w-1/2 py-3 px-3 uppercase font-semibold text-xs text-white border-gray-600 border-r">
+          <%= @field.key_label %>
+        </div>
+        <div class="w-1/2 py-3 px-3 uppercase font-semibold text-xs text-white">
+          <%= @field.value_label %>
+        </div>
+        <% if @view.in?([:edit, :create]) %>
+          <div class="flex items-center justify-center p-2 px-3 border-l border-gray-600">
+            <a href="javascript:void(0);"
+              title="<%= @field.action_text %>"
+              data-tippy="tooltip"
+              data-button="add-row"
+              data-action="click->key-value#addRow"
+              <% if @field.disable_adding_rows %>
+                class="cursor-not-allowed"
+              <% end %>
+            >
+              <%= svg 'plus-circle', class: 'text-gray-400 h-5 hover:text-gray-500' %>
+            </a>
+          </div>
+        <% end %>
+      </div>
+    </div>
+    <div data-key-value-target="rows"></div>
+  </div>
+  <% if @form.present? %>
+    <%= @form.text_area @field.id,
+      value: @field.parsed_value,
+      class: 'hidden',
+      placeholder: @field.placeholder,
+      'data-key-value-target': 'input',
+      'data-view': :edit
+    %>
+  <% else %>
+    <%= text_area_tag @field.id,
+      @field.parsed_value,
+      class: 'hidden',
+      placeholder: @field.placeholder,
+      'data-key-value-target': 'input',
+      'data-view': :edit
+    %>
+  <% end %>
+</div>

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

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+class Avo::Common::KeyValueComponent < ViewComponent::Base
+  include Avo::ApplicationHelper
+
+  def initialize(field:, form: nil, view: :show)
+    @field = field
+    @form = form
+    @view = view
+  end
+end

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

@@ -0,0 +1,3 @@
+<%= edit_field_wrapper field: @field, index: @index, form: @form, resource: @resource, displayed_in_modal: @displayed_in_modal, full_width: true do %>
+  <%= render Avo::Common::KeyValueComponent.new field: @field, form: @form, view: :edit %>
+<% end %>

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

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

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

@@ -5,6 +5,7 @@
       placeholder: @field.placeholder,
       disabled: @field.readonly,
       'data-simple-mde-target': 'element',
+      'data-component-options': @field.options.to_json,
       'data-view': :edit
     %>
   </div>

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

@@ -1,11 +1,20 @@
-<%= edit_field_wrapper field: @field, index: @index, form: @form, resource: @resource, displayed_in_modal: @displayed_in_modal do %>
-  <% trix_id = "trix_#{@resource.name.underscore}_#{@field.id}" %>
-  <trix-editor input="<%= trix_id %>" value="<%= @field.value %>" placeholder="<%= @field.placeholder %>"><%== @field.value %></trix-editor>
-  <%= @form.text_area @field.id,
-    id: trix_id,
-    class: helpers.input_classes('w-full hidden', has_error: (@resource.model.present? and @resource.model.errors.include?(@field.id))),
-    placeholder: @field.placeholder,
-    disabled: @field.readonly,
-    rows: @field.meta[:rows]
-  %>
+<%= edit_field_wrapper field: @field, index: @index, form: @form, resource: @resource, displayed_in_modal: @displayed_in_modal, full_width: true do %>
+  <div
+    data-controller="trix-field"
+    data-trix-field-target="controller"
+    data-resource-name="<%= @resource.model_class.model_name.route_key %>"
+    data-resource-id="<%= @resource.model.id %>"
+    data-attachments-disabled="<%= @field.attachments_disabled %>"
+    data-attachment-key="<%= @field.attachment_key %>"
+  >
+    <% trix_id = "trix_#{@resource.name.underscore}_#{@field.id}" %>
+    <trix-editor data-trix-field-target="editor" input="<%= trix_id %>" placeholder="<%= @field.placeholder %>"><%== @field.value %></trix-editor>
+    <%= @form.text_area @field.id,
+      id: trix_id,
+      class: helpers.input_classes('w-full hidden', has_error: (@resource.model.present? and @resource.model.errors.include?(@field.id))),
+      placeholder: @field.placeholder,
+      disabled: @field.readonly,
+      rows: @field.meta[:rows]
+    %>
+  </div>
 <% end %>

data/app/components/avo/panel_component.html.erb

@@ -1,9 +1,11 @@
 <div <%== data_attributes %>>
   <div class="mb-6">
     <div>
-      <div class="breadcrumbs">
-        <%= helpers.render_breadcrumbs(separator: helpers.svg('chevron-right', class: 'inline-block h-3 stroke-current relative top-[-1px] ml-1' )) if Avo.configuration.display_breadcrumbs %>
-      </div>
+      <% if show_breadcrumbs? %>
+        <div class="breadcrumbs">
+          <%= helpers.render_breadcrumbs(separator: helpers.svg('chevron-right', class: 'inline-block h-3 stroke-current relative top-[-1px] ml-1' )) if Avo.configuration.display_breadcrumbs %>
+        </div>
+      <% end %>
       <div class="text-2xl tracking-normal font-bold text-gray-800 truncate">
         <%= @title %>
       </div>

data/app/components/avo/panel_component.rb

@@ -6,10 +6,11 @@ class Avo::PanelComponent < ViewComponent::Base
   renders_one :bare_content
   renders_one :footer
 
-  def initialize(title: nil, body_classes: nil, data: {})
+  def initialize(title: nil, body_classes: nil, data: {}, show_breadcrumbs: true)
     @title = title
     @body_classes = body_classes
     @data = data
+    @show_breadcrumbs = show_breadcrumbs
   end
 
   private
@@ -21,4 +22,8 @@ class Avo::PanelComponent < ViewComponent::Base
       " data-#{key}=\"#{value}\""
     end.join
   end
+
+  def show_breadcrumbs?
+    @show_breadcrumbs
+  end
 end

data/app/components/avo/show/fields/key_value_field_component.html.erb

@@ -0,0 +1,3 @@
+<%= show_field_wrapper field: @field, index: @index, full_width: true do %>
+  <%= render Avo::Common::KeyValueComponent.new field: @field, view: :show %>
+<% end %>

data/app/components/avo/show/fields/key_value_field_component.rb

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

data/app/components/avo/show/fields/markdown_field_component.html.erb

@@ -5,6 +5,7 @@
       placeholder: @field.placeholder,
       disabled: @field.readonly,
       'data-simple-mde-target': 'element',
+      'data-component-options': @field.options.to_json,
       'data-view': :show %>
   </div>
 <% end %>

data/app/components/avo/views/resource_index_component.html.erb

@@ -1,4 +1,4 @@
-<%= render Avo::PanelComponent.new title: title, body_classes: 'py-4', data: { component: 'resources-index' } do |c| %>
+<%= render Avo::PanelComponent.new title: title, body_classes: 'py-4', data: { component: 'resources-index' }, show_breadcrumbs: @reflection.blank? do |c| %>
   <% c.tools do %>
     <%= render 'actions' if @actions.present? %>
 

data/app/components/avo/views/resource_show_component.html.erb

@@ -3,7 +3,7 @@
   data-selected-resources="[<%= @resource.model.id %>]"
 >
   <% @resource.panels.each do |resource_panel| %>
-    <%= render(Avo::PanelComponent.new(title: resource_panel[:name])) do |c| %>
+    <%= render Avo::PanelComponent.new(title: resource_panel[:name], show_breadcrumbs: @reflection.blank?) do |c| %>
       <% c.tools do %>
         <% if resource_panel[:name] == @resource.default_panel_name %>
           <%= render 'actions' %>

data/app/controllers/avo/application_controller.rb

@@ -42,7 +42,7 @@ module Avo
     end
 
     def check_avo_license
-      unless on_root_path || on_resources_path
+      unless on_root_path || on_resources_path || on_api_path
         if @license.invalid? || @license.lacks(:custom_tools)
           if Rails.env.development?
             @custom_tools_alert_visible = true
@@ -272,5 +272,9 @@ module Avo
     def on_resources_path
       request.original_url.match?(/.*\/#{Avo.configuration.namespace}\/resources\/.*/)
     end
+
+    def on_api_path
+      request.original_url.match?(/.*\/#{Avo.configuration.namespace}\/avo_api\/.*/)
+    end
   end
 end

data/app/controllers/avo/attachments_controller.rb

@@ -2,9 +2,20 @@ require_dependency "avo/application_controller"
 
 module Avo
   class AttachmentsController < ApplicationController
-    before_action :set_resource_name, only: :destroy
-    before_action :set_resource, only: :destroy
-    before_action :set_model, only: :destroy
+    before_action :set_resource_name, only: [:destroy, :create]
+    before_action :set_resource, only: [:destroy, :create]
+    before_action :set_model, only: [:destroy, :create]
+
+    def create
+      blob = ActiveStorage::Blob.create_and_upload! io: params[:file], filename: params[:filename]
+
+      @model.send(params[:attachment_key]).attach blob
+
+      render json: {
+        url: main_app.url_for(blob),
+        href: main_app.url_for(blob)
+      }
+    end
 
     def show
     end

data/app/packs/entrypoints/application.js

@@ -2,7 +2,6 @@
 import 'core-js/stable'
 // eslint-disable-next-line import/no-extraneous-dependencies
 import 'regenerator-runtime/runtime'
-import 'trix'
 import * as Mousetrap from 'mousetrap'
 import { Application } from 'stimulus'
 import { Turbo } from '@hotwired/turbo-rails'
@@ -19,6 +18,19 @@ window.Turbolinks = Turbo
 
 Mousetrap.bind('r r r', () => Turbo.visit(window.location.href, { action: 'replace' }))
 
+function initTippy() {
+  tippy('[data-tippy="tooltip"]', {
+    theme: 'light',
+    content(reference) {
+      const title = reference.getAttribute('title')
+      reference.removeAttribute('title')
+
+      return title
+    },
+  })
+}
+window.initTippy = initTippy
+
 const application = Application.start()
 
 const context = require.context('./../js/controllers', true, /\.js$/)
@@ -29,16 +41,7 @@ application.load(definitionsFromContext(fieldsContext))
 
 document.addEventListener('turbo:load', () => {
   document.body.classList.remove('turbo-loading')
-
-  tippy('[data-tippy="tooltip"]', {
-    theme: 'light',
-    content(reference) {
-      const title = reference.getAttribute('title')
-      reference.removeAttribute('title')
-
-      return title
-    },
-  })
+  initTippy()
 })
 document.addEventListener('turbo:visit', () => document.body.classList.add('turbo-loading'))
 document.addEventListener('turbo:submit-start', () => document.body.classList.add('turbo-loading'))

data/app/packs/js/controllers/fields/code_field_controller.js

@@ -12,6 +12,7 @@ import 'codemirror/mode/shell/shell'
 import 'codemirror/mode/sql/sql'
 import 'codemirror/mode/vue/vue'
 import 'codemirror/mode/xml/xml'
+import 'codemirror/mode/yaml/yaml'
 
 import { Controller } from 'stimulus'
 import { castBoolean } from '@/js/helpers/cast_boolean'

data/app/packs/js/controllers/fields/date_field_controller.js

@@ -33,7 +33,7 @@ export default class extends Controller {
 
     // enable timezone display
     if (enableTime) {
-      currentValue = DateTime.fromISO(this.inputTarget.value, { zone: window.timezone })
+      currentValue = DateTime.fromISO(this.inputTarget.value, { zone: window.Avo.configuration.timezone })
       currentValue = currentValue.setZone(this.inputTarget.dataset.timezone)
       currentValue = currentValue.toISO()
 

data/app/packs/js/controllers/fields/key_value_controller.js

@@ -0,0 +1,137 @@
+/* eslint-disable max-len */
+import { Controller } from 'stimulus'
+import { castBoolean } from '@/js/helpers/cast_boolean'
+
+export default class extends Controller {
+  static targets = ['input', 'controller', 'rows']
+
+  fieldValue = []
+
+  options = {}
+
+  get keyInputDisabled() {
+    return !this.options.editable || this.options.disable_editing_keys
+  }
+
+  get valueInputDisabled() {
+    return !this.options.editable
+  }
+
+  connect() {
+    this.setOptions()
+
+    try {
+      const objectValue = JSON.parse(this.inputTarget.value)
+      Object.keys(objectValue).forEach((key) => this.fieldValue.push([key, objectValue[key]]))
+    } catch (error) {
+      this.fieldValue = []
+    }
+
+    this.updateKeyValueComponent()
+  }
+
+  addRow() {
+    if (this.options.disable_adding_rows || !this.options.editable) return
+    this.fieldValue.push(['', ''])
+    this.updateKeyValueComponent()
+    this.focusLastRow()
+  }
+
+  deleteRow(event) {
+    if (this.options.disable_deleting_rows || !this.options.editable) return
+    const { index } = event.target.dataset
+    this.fieldValue.splice(index, 1)
+    this.updateTextareaInput()
+    this.updateKeyValueComponent()
+  }
+
+  focusLastRow() {
+    return this.rowsTarget.querySelector('.flex.key-value-row:last-child .key-value-input-key').focus()
+  }
+
+  valueFieldUpdated(event) {
+    const { value } = event.target
+    const { index } = event.target.dataset
+    this.fieldValue[index][1] = value
+
+    this.updateTextareaInput()
+  }
+
+  keyFieldUpdated(event) {
+    const { value } = event.target
+    const { index } = event.target.dataset
+    this.fieldValue[index][0] = value
+
+    this.updateTextareaInput()
+  }
+
+  updateTextareaInput() {
+    if (!this.hasInputTarget) return
+    let result = {}
+    if (this.fieldValue && this.fieldValue.length > 0) {
+      result = Object.assign(...this.fieldValue.map(([key, val]) => ({ [key]: val })))
+    }
+    this.inputTarget.innerText = JSON.stringify(result)
+  }
+
+  updateKeyValueComponent() {
+    let result = ''
+    let index = 0
+    this.fieldValue.forEach((row) => {
+      const [key, value] = row
+      result += this.interpolatedRow(key, value, index)
+      index++
+    })
+    this.rowsTarget.innerHTML = result
+    window.initTippy()
+  }
+
+  interpolatedRow(key, value, index) {
+    let result = `<div class="flex key-value-row">
+      ${this.inputField('key', index, key, value)}
+      ${this.inputField('value', index, key, value)}`
+    if (this.options.editable) {
+      result += `<a
+  href="javascript:void(0);"
+  data-index="${index}"
+  data-action="click->key-value#deleteRow"
+  title="${this.options.delete_text}"
+  data-tippy="tooltip"
+  data-button="delete-row"
+  tabindex="-1"
+  ${this.options.disable_deleting_rows ? "disabled='disabled'" : ''}
+  class="flex items-center justify-center p-2 px-3 border-none ${this.options.disable_deleting_rows ? 'cursor-not-allowed' : ''}"
+><svg class="pointer-events-none text-gray-500 h-5 hover:text-gray-500" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor"><path d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg></a>`
+    }
+    result += '</div>'
+
+    return result
+  }
+
+  inputField(id = 'key', index, key, value) {
+    return `<input
+  class="${this.options.inputClasses} !rounded-none border-gray-600 border-r border-l-0 border-b-0 border-t-0 focus:border-gray-300 w-1/2 focus:outline-none outline-none key-value-input-${id}"
+  data-action="input->key-value#${id}FieldUpdated"
+  placeholder="${this.options[`${id}_label`]}"
+  data-index="${index}"
+  ${this[`${id}InputDisabled`] ? "disabled='disabled'" : ''}
+  value="${id === 'key' ? key : value}"
+  autofocus
+/>`
+  }
+
+  setOptions() {
+    let fieldOptions
+
+    try {
+      fieldOptions = JSON.parse(this.controllerTarget.dataset.options)
+    } catch (error) {
+      fieldOptions = {}
+    }
+    this.options = {
+      ...fieldOptions,
+      inputClasses: this.controllerTarget.dataset.inputClasses,
+      editable: castBoolean(this.controllerTarget.dataset.editable),
+    }
+  }
+}