avo 1.4.0.pre.1 → 1.4.4.pre.1

data/app/helpers/avo/resources_helper.rb

@@ -14,50 +14,6 @@ module Avo
       }
     end
 
-    def index_field(field, index, resource)
-      component = field.component_name(:index)
-
-      if Object.const_defined? component
-        render component.safe_constantize.new(field: field, resource: resource, index: index)
-      else
-        render partial: field.partial_path_for(:index), locals: {
-          field: field,
-          index: index,
-          resource: resource
-        }
-      end
-    end
-
-    def show_field(field, index, resource)
-      component = field.component_name(:show)
-
-      if Object.const_defined? component
-        render component.safe_constantize.new(field: field, resource: resource, index: index)
-      else
-        render partial: field.partial_path_for(:show), locals: {
-          field: field,
-          index: index,
-          resource: resource
-        }
-      end
-    end
-
-    def edit_field(field, index, resource, form, displayed_in_modal: false)
-      component = field.component_name(:edit)
-
-      if Object.const_defined? component
-        render component.safe_constantize.new(field: field, resource: resource, index: index, form: form, displayed_in_modal: displayed_in_modal)
-      else
-        render partial: field.partial_path_for(:edit), locals: {
-          field: field,
-          index: index,
-          resource: resource,
-          form: form,
-          displayed_in_modal: displayed_in_modal
-        }
-      end
-    end
-
     def index_field_wrapper(**args, &block)
       render Index::FieldWrapperComponent.new(**args) do
         capture(&block)

data/app/packs/entrypoints/application.css

@@ -4,7 +4,7 @@
 @import './../../../node_modules/tippy.js/themes/light.css';
 @import './../../../node_modules/trix/dist/trix.css';
 @import './../../../node_modules/flatpickr/dist/flatpickr.css';
-
+@import './../../../node_modules/@algolia/autocomplete-theme-classic/dist/theme.css';
 
 @import './../stylesheets/tailwindcss/base.css';
 
@@ -15,9 +15,11 @@
 @import './../stylesheets/loader.css';
 @import './../stylesheets/pagination.css';
 @import './../stylesheets/breadcrumbs.css';
+@import './../stylesheets/search.css';
 
 @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

@@ -45,6 +45,9 @@ document.addEventListener('turbo:load', () => {
 })
 document.addEventListener('turbo:visit', () => document.body.classList.add('turbo-loading'))
 document.addEventListener('turbo:submit-start', () => document.body.classList.add('turbo-loading'))
+document.addEventListener('turbo:before-cache', () => {
+  document.querySelectorAll('[data-turbo-remove-before-cache]').forEach((element) => element.remove())
+})
 
 // Uncomment to copy all static images under ../images to the output folder and reference
 // them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)

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

@@ -116,7 +116,6 @@ export default class extends Controller {
   data-index="${index}"
   ${this[`${id}InputDisabled`] ? "disabled='disabled'" : ''}
   value="${id === 'key' ? key : value}"
-  autofocus
 />`
   }
 

data/app/packs/js/controllers/search_controller.js

@@ -0,0 +1,120 @@
+/* eslint-disable no-underscore-dangle */
+import * as Mousetrap from 'mousetrap'
+import { Controller } from 'stimulus'
+import { Turbo } from '@hotwired/turbo-rails'
+import { autocomplete } from '@algolia/autocomplete-js'
+import debouncePromise from '@/js/helpers/debounce_promise'
+
+export default class extends Controller {
+  static targets = ['autocomplete', 'button']
+
+  debouncedFetch = debouncePromise(fetch, this.debounceTimeout)
+
+  get translationKeys() {
+    let keys
+    try {
+      keys = JSON.parse(this.autocompleteTarget.dataset.translationKeys)
+    } catch (error) {
+      keys = {}
+    }
+
+    return keys
+  }
+
+  get debounceTimeout() {
+    return this.autocompleteTarget.dataset.debounceTimeout
+  }
+
+  get searchResource() {
+    return this.autocompleteTarget.dataset.searchResource
+  }
+
+  get isGlobalSearch() {
+    return this.searchResource === 'global'
+  }
+
+  get searchUrl() {
+    return this.isGlobalSearch ? '/avo/avo_api/search' : `/avo/avo_api/${this.searchResource}/search`
+  }
+
+  addSource(resourceName, data) {
+    const that = this
+
+    return {
+      sourceId: resourceName,
+      getItems: () => data.results,
+      onSelect({ item }) {
+        Turbo.visit(item._url, { action: 'replace' })
+      },
+      templates: {
+        header() {
+          return data.header
+        },
+        item({ item, createElement }) {
+          let element = ''
+
+          if (item._avatar) {
+            let classes
+
+            switch (item._avatar_type) {
+              default:
+              case 'circle':
+                classes = 'rounded-full'
+                break
+              case 'rounded':
+                classes = 'rounded'
+                break
+            }
+
+            element += `<img src="${item._avatar}" alt="${item._label}" class="flex-shrink-0 w-8 h-8 my-[2px] inline mr-2 ${classes}" />`
+          }
+          element += `<div>${item._label}`
+
+          if (item._description) {
+            element += `<div class="aa-ItemDescription">${item._description}</div>`
+          }
+
+          element += '</div>'
+
+          return createElement('div', {
+            class: 'flex',
+            dangerouslySetInnerHTML: {
+              __html: element,
+            },
+          })
+        },
+        noResults() {
+          return that.translationKeys.no_item_found.replace('%{item}', resourceName)
+        },
+      },
+    }
+  }
+
+  showSearchPanel() {
+    this.autocompleteTarget.querySelector('button').click()
+  }
+
+  connect() {
+    const that = this
+
+    this.buttonTarget.onclick = () => this.showSearchPanel()
+
+    if (this.isGlobalSearch) {
+      Mousetrap.bind(['command+k', 'ctrl+k'], () => this.showSearchPanel())
+    }
+
+    autocomplete({
+      container: this.autocompleteTarget,
+      placeholder: 'Search',
+      openOnFocus: true,
+      detachedMediaQuery: '',
+      getSources: ({ query }) => {
+        const endpoint = `${that.searchUrl}?q=${query}`
+
+        return that.debouncedFetch(endpoint)
+          .then((response) => response.json())
+          .then((data) => Object.keys(data).map((resourceName) => that.addSource(resourceName, data[resourceName])))
+      },
+    })
+  }
+}

data/app/packs/js/helpers/debounce_promise.js

@@ -0,0 +1,13 @@
+export default (fn, time) => {
+  let timerId
+
+  return (...args) => {
+    if (timerId) {
+      clearTimeout(timerId)
+    }
+
+    return new Promise((resolve) => {
+      timerId = setTimeout(() => resolve(fn(...args)), time)
+    })
+  }
+}

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/packs/stylesheets/components/status.css

@@ -1,30 +1,41 @@
 .spinner {
+  width: 16px;
+  height: 16px;
+
   position: relative;
-  display: inline-block;
-  width: 18px;
-  height: 18px;
-  top: 3px;
+}
+
+
+.double-bounce1, .double-bounce2 {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
   background-color: #333;
-  border-radius: 100%;
-  -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
-  animation: sk-scaleout 1.0s infinite ease-in-out;
+  opacity: 0.6;
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
+  animation: sk-bounce 2.0s infinite ease-in-out;
 }
 
-@-webkit-keyframes sk-scaleout {
-  0% { -webkit-transform: scale(0) }
-  100% {
-    -webkit-transform: scale(1.0);
-    opacity: 0;
-  }
+.double-bounce2 {
+  -webkit-animation-delay: -1.0s;
+  animation-delay: -1.0s;
 }
 
-@keyframes sk-scaleout {
-  0% {
-    -webkit-transform: scale(0);
-    transform: scale(0);
-  } 100% {
-    -webkit-transform: scale(1.0);
+@-webkit-keyframes sk-bounce {
+  0%, 100% { -webkit-transform: scale(0.0) }
+  50% { -webkit-transform: scale(1.0) }
+}
+
+@keyframes sk-bounce {
+  0%, 100% {
+    transform: scale(0.0);
+    -webkit-transform: scale(0.0);
+  } 50% {
     transform: scale(1.0);
-    opacity: 0;
+    -webkit-transform: scale(1.0);
   }
 }

data/app/packs/stylesheets/search.css

@@ -0,0 +1,79 @@
+:root {
+  --aa-primary-color: --tw-ring-color;
+  --aa-selected-color: --tw-ring-color;
+  --aa-primary-color-rgb: 5, 150, 105;
+}
+
+.global-search {
+  .aa-DetachedSearchButton:focus,
+  .aa-DetachedSearchButton {
+    border: none !important;
+  }
+}
+
+.resource-search {
+  .aa-Autocomplete {
+    @apply w-full;
+  }
+
+  .aa-DetachedSearchButton {
+    @apply rounded-full border-gray-300;
+  }
+}
+
+.aa-SourceHeader {
+  @apply uppercase text-xs font-semibold;
+}
+
+.aa-DetachedFormContainer,
+.aa-DetachedContainer .aa-Panel {
+  @apply bg-blue-gray-100 border-b-0;
+}
+
+.aa-Form {
+  &:focus-within {
+    @apply ring-0 !important;
+  }
+
+  input {
+    @apply focus:ring-0 !important;
+  }
+  &:focus-within {
+    .aa-InputWrapperPrefix{
+      .aa-SubmitButton {
+        @apply ring-0;
+      }
+    }
+  }
+}
+.aa-Input {
+  @apply focus:ring-green-600;
+}
+
+.aa-DetachedContainer {
+  .aa-PanelLayout {
+    @apply pt-0 space-y-3;
+  }
+
+  .aa-Source {
+    .aa-List {
+      @apply space-y-1;
+
+      .aa-Item {
+        @apply bg-white rounded-md px-3 py-4 shadow;
+
+        .aa-ItemDescription {
+          @apply text-gray-500 text-sm;
+        }
+
+        &[aria-selected=true]{
+          @apply bg-blue-700 text-white;
+
+          .aa-ItemDescription {
+            @apply text-white;
+          }
+        }
+      }
+    }
+  }
+}

data/app/packs/svgs/check-circle-sm.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
+</svg>

data/app/packs/svgs/x-circle-sm.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
+</svg>

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/_global_search.html.erb

@@ -0,0 +1,17 @@
+<div data-controller="search" class="global-search" data-turbo-remove-before-cache>
+  <div class="inline-block"
+    data-search-target="autocomplete"
+    data-search-resource="global"
+    data-translation-keys='{"no_item_found": "<%= I18n.translate 'avo.no_item_found' %>"}'
+    data-debounce-timeout='<%= Avo.configuration.search_debounce %>'
+  >
+  </div>
+  <div class="relative top-[-5px] inline-flex text-gray-400 text-sm leading-5 py-0.5 px-1.5 border border-gray-300 rounded-md cursor-pointer"
+    data-search-target="button"
+  >
+    <span class="sr-only">Press </span>
+    <kbd class="font-sans"><abbr title="Command" class="no-underline">⌘</abbr></kbd>
+    <span class="sr-only"> and </span>
+    <kbd class="font-sans">K</kbd><span class="sr-only"> to search</span>
+  </div>
+</div>

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>