avo 1.3.3 → 1.4.0

data/app/packs/entrypoints/application.css

@@ -18,6 +18,7 @@
 
 @import './../stylesheets/components/status.css';
 @import './../stylesheets/components/code.css';
+@import './../stylesheets/components/progress.css';
 @import './../stylesheets/tailwindcss/components.css';
 
 @import './../stylesheets/tailwindcss/utilities.css';

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,136 @@
+/* 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}"
+/>`
+  }
+
+  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
+  }
+}

data/app/packs/stylesheets/components/progress.css

@@ -0,0 +1,13 @@
+progress {
+  @apply h-2 bg-white border border-gray-400 rounded shadow-inner;
+}
+progress[value]::-webkit-progress-bar {
+  @apply bg-white border border-gray-500 rounded shadow-inner;
+}
+progress[value]::-webkit-progress-value{
+  @apply bg-green-600 rounded;
+
+}
+progress[value]::-moz-progress-bar {
+  @apply bg-green-600 rounded appearance-none;
+}

data/app/views/avo/actions/show.html.erb

@@ -21,7 +21,7 @@
 
         <% if @action.get_fields.present? %>
           <% @action.get_fields.each_with_index do |field, index| %>
-            <%= edit_field field, index, nil, form, displayed_in_modal: true %>
+            <%= render field.component_for_view(:edit).new field: field, resource: @resource, index: index, form: form, displayed_in_modal: true %>
           <% end %>
         <% end %>
 

data/app/views/avo/partials/_javascript.html.erb

@@ -1,3 +1,5 @@
 <%= javascript_tag nonce: true do %>
-  var timezone = '<%= Avo.configuration.timezone %>';
+  window.Avo = window.Avo || { configuration: {} }
+  Avo.configuration.timezone = '<%= Avo.configuration.timezone %>'
+  Avo.configuration.root_path = '<%= Avo.configuration.root_path %>'
 <% end %>

data/app/views/avo/partials/_profile_dropdown.html.erb

@@ -0,0 +1,19 @@
+<div data-controller="toggle-panel">
+  <a href="javascript:void(0);" class="flex items-center cursor-pointer font-semibold text-gray-700" data-action="click->toggle-panel#togglePanel">
+    <% if _current_user.respond_to? 'avatar' %>
+      <%= image_tag _current_user.avatar, class: "h-12 rounded-full border-4 border-white mr-1" if _current_user.avatar.present? %>
+    <% end %>
+    <% if _current_user.name.present? %>
+      <%= _current_user.name %>
+    <% elsif _current_user.email.present? %>
+      <%= _current_user.email %>
+    <% else %>
+      Avo user
+    <% end %>
+    <%= svg 'chevron-down', class: "ml-1 h-4" %>
+  </a>
+
+  <div class="hidden absolute inset-auto inset-auto right-0 mr-6 mt-0 py-4 bg-white rounded-xl min-w-[200px] shadow-context" data-toggle-panel-target="panel">
+    <%= button_to "Sign out", main_app.destroy_user_session_path, method: :delete, form: { "data-turbo" => "false" }, class: "appearance-none bg-white text-left cursor-pointer text-green-600 font-semibold hover:text-white hover:bg-green-500 block px-4 py-1 w-full" %>
+  </div>
+</div>

data/app/views/layouts/avo/application.html.erb

@@ -19,15 +19,18 @@
     <%= render partial: 'avo/sidebar/sidebar' %>
 
     <div class="flex-1 flex flex-col h-full overflow-auto">
-      <div class="relative bg-white p-2 shadow-md h-16 w-full flex flex-shrink-0 items-center z-50" v-if="layout !== 'blank'">
-        <div class="ml-6">
+      <div class="relative bg-white p-2 shadow-md h-16 w-full flex flex-shrink-0 items-center z-50 px-6" v-if="layout !== 'blank'">
+        <div>
           <%= render partial: "avo/partials/header" %>
         </div>
         <div class="flex-1 flex justify-center">
-          <div class="w-64">
+          <div class="w-64 flex">
             <%# <resources-search :global="true"> %>
           </div>
         </div>
+        <div class="align-end">
+          <%= render partial: "avo/partials/profile_dropdown" %>
+        </div>
       </div>
 
       <div class="content p-8 flex-1 flex flex-col justify-between items-stretch <%= @container_classes %>">

data/config/routes.rb

@@ -3,6 +3,10 @@ Avo::Engine.routes.draw do
 
   get "resources", to: redirect("/avo")
 
+  scope "avo_api", as: "avo_api" do
+    post "/resources/:resource_name/:id/attachments/", to: "attachments#create"
+  end
+
   scope "resources", as: "resources" do
     # Attachments
     get "/:resource_name/:id/active_storage_attachments/:attachment_name/:signed_attachment_id", to: "attachments#show"

data/config/webpacker.yml

@@ -35,8 +35,8 @@ development:
   dev_server:
     https: false
     host: localhost
-    port: 3039
-    public: localhost:3039
+    port: 7299
+    public: localhost:7299
     # Inject browserside javascript that required by both HMR and Live(full) reload
     inject_client: true
     # Hot Module Replacement updates modules while the application is running without a full reload

data/db/factories.rb

@@ -13,6 +13,7 @@ FactoryBot.define do
     name { Faker::Company.name }
     description { Faker::Lorem.paragraph(sentence_count: 4) }
     url { Faker::Internet.url }
+    color { Faker::Color.hex_color }
   end
 
   factory :post do
@@ -24,6 +25,7 @@ FactoryBot.define do
         Time.now - rand(10...365).days
       end
     end
+    status { 0 }
   end
 
   factory :project do
@@ -36,5 +38,6 @@ FactoryBot.define do
     users_required { Faker::Number.between(from: 10, to: 100) }
     started_at { Time.now - rand(10...365).days }
     meta { [{foo: "bar", hey: "hi"}, {bar: "baz"}, {hoho: "hohoho"}].sample }
+    progress { Faker::Number.between(from: 0, to: 100) }
   end
 end