avo 1.3.4 → 1.3.5.pre.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f07bd27219373943d20e34298f27988df5b44c40e2fd9747952e41ee9d3595b7
-  data.tar.gz: e2526041e2318832a501f6862fb045e39332f6ea21c2762354898be7ee715bf6
+  metadata.gz: 6212847ad5e28753e23625482067816d88ec6728f3d35656182b3a6e46b021d2
+  data.tar.gz: 479c5130dd59104ab944af271b85ba398aec7007568116191d82668ab47b44cc
 SHA512:
-  metadata.gz: af5fb87c665732d3a23aab6129ab55724b5c3c7ad55e61fe0526d4715762f6375aaf71c602905481127a0631d1f39a3cd4f6d14630ac5cc3ca48a43bb43e32a9
-  data.tar.gz: abe7cdf77c7cb9afbdcb1f6f0c2fa5a89d7fe100170d80b33b7454631fae2e502da13990a1bd52265bc7b9561591db2d03795c3affbea661937e45c9f3415be3
+  metadata.gz: e1a9663120f63b7458932e061a90d7287c7c7405382d64bcf5fb75c7c64c342a6a461a4ba06ae85478fc8e34efba204ecc99b7a3508541753d124153d4f519ae
+  data.tar.gz: 7dcb4d3494ff81a33d793f14e7fbd8d25aa178f6d22293fbaf27c6601c7426c87703f93674a5fb5db20d6c5b1b2b3a1aab24901571bd39a3da138f0d7df92a9a

data/Gemfile.lock

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

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/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 %>" 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/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/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),
+    }
+  }
+}

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

@@ -0,0 +1,121 @@
+import 'trix'
+import { Controller } from 'stimulus'
+import { castBoolean } from '@/js/helpers/cast_boolean'
+
+export default class extends Controller {
+  static targets = ['editor', 'controller']
+
+  get resourceId() {
+    return this.controllerTarget.dataset.resourceId
+  }
+
+  get resourceName() {
+    return this.controllerTarget.dataset.resourceName
+  }
+
+  get attachmentKey() {
+    return this.controllerTarget.dataset.attachmentKey
+  }
+
+  get attachmentsDisabled() {
+    return castBoolean(this.controllerTarget.dataset.attachmentsDisabled)
+  }
+
+  get uploadUrl() {
+    return `${window.location.origin}${window.Avo.configuration.root_path}/avo_api/resources/${this.resourceName}/${this.resourceId}/attachments`
+  }
+
+  connect() {
+    if (this.attachmentsDisabled) {
+      // Remove the attachments button
+      this.controllerTarget.querySelector('.trix-button-group--file-tools').remove()
+    }
+
+    window.addEventListener('trix-file-accept', (event) => {
+      if (event.target === this.editorTarget) {
+        // Prevent file uploads for fields that have attachments disabled.
+        if (this.attachmentsDisabled) {
+          event.preventDefault()
+          window.toastr.warning('This field has attachments disabled.')
+
+          return
+        }
+
+        // Prevent file uploads for resources that haven't been saved yet.
+        if (this.resourceId === '') {
+          event.preventDefault()
+          window.toastr.warning("You can't upload files into the Trix editor until you save the resource.")
+
+          return
+        }
+
+        // Prevent file uploads for fields without an attachment key.
+        if (this.attachmentKey === '') {
+          event.preventDefault()
+          window.toastr.warning("You haven't set an <a href='https://google.com' class='!text-blue-700 underline'>attachment_key</a> to this Trix field.")
+        }
+      }
+    })
+
+    window.addEventListener('trix-attachment-add', (event) => {
+      if (event.target === this.editorTarget) {
+        if (event.attachment.file) {
+          this.uploadFileAttachment(event.attachment)
+        }
+      }
+    })
+  }
+
+  uploadFileAttachment(attachment) {
+    this.uploadFile(
+      attachment.file,
+      (progress) => attachment.setUploadProgress(progress),
+      (attributes) => attachment.setAttributes(attributes),
+    )
+  }
+
+  uploadFile(file, progressCallback, successCallback) {
+    const formData = this.createFormData(file)
+    const xhr = new XMLHttpRequest()
+
+    xhr.open('POST', this.uploadUrl, true)
+
+    xhr.setRequestHeader('X-CSRF-Token', document.querySelector('meta[name="csrf-token"]').content)
+
+    xhr.upload.addEventListener('progress', (event) => {
+      // eslint-disable-next-line no-mixed-operators
+      const progress = event.loaded / event.total * 100
+      progressCallback(progress)
+    })
+
+    xhr.addEventListener('load', () => {
+      if (xhr.status === 200) {
+        let response
+        try {
+          response = JSON.parse(xhr.response)
+        } catch (error) {
+          response = {}
+        }
+
+        const attributes = {
+          url: response.url,
+          href: response.href,
+        }
+
+        successCallback(attributes)
+      }
+    })
+
+    xhr.send(formData)
+  }
+
+  createFormData(file) {
+    const data = new FormData()
+    data.append('Content-Type', file.type)
+    data.append('file', file)
+    data.append('filename', file.name)
+    data.append('attachment_key', this.attachmentKey)
+
+    return data
+  }
+}