feature: resource actions

.vscode/settings.json

@@ -4,12 +4,14 @@
   "workbench.colorCustomizations": {
     "titleBar.activeBackground": "#42b883",
     "titleBar.activeForeground": "#15202b",
-    "titleBar.border": "#42b883",
     "titleBar.inactiveBackground": "#42b88399",
     "titleBar.inactiveForeground": "#15202b99"
   },
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": true
   },
-  "peacock.color": "#42b883"
+  "peacock.color": "#42b883",
+  "cSpell.words": [
+    "datetime"
+  ]
 }

app/controllers/avo/actions_controller.rb

@@ -0,0 +1,46 @@
+require_dependency "avo/application_controller"
+
+module Avo
+  class ActionsController < ApplicationController
+    def index
+      avo_actions = avo_resource.get_actions
+      actions = []
+
+      if params[:resource_id].present?
+        model = resource_model.safe_constantize.find params[:resource_id]
+      end
+
+      avo_actions.each do |action|
+        actions.push(action.new.render_response model, avo_resource)
+      end
+
+      render json: {
+        actions: actions,
+      }
+    end
+
+    def handle
+      models = resource_model.safe_constantize.find action_params[:resource_ids]
+      avo_action = action_params[:action_class].safe_constantize.new
+      avo_action.handle_action(request, models, action_params[:fields])
+
+      render json: {
+        success: true,
+        response: avo_action.response,
+      }
+    end
+
+    private
+      def action_params
+        params.permit(:resource_name, :action_id, :action_class, resource_ids: [], fields: {})
+      end
+
+      def resource_model
+        params[:resource_name].to_s.camelize.singularize
+      end
+
+      def avo_resource
+        App.get_resource resource_model
+      end
+  end
+end

app/frontend/js/Api.js

@@ -52,11 +52,13 @@ Api.interceptors.response.use(
 
 Api.interceptors.request.use((config) => {
   document.querySelector('body').classList.add('axios-loading')
+
   return config
 })
 
 Api.interceptors.response.use((response) => {
   document.querySelector('body').classList.remove('axios-loading')
+
   return response
 })
 

app/frontend/js/Avo.js

@@ -8,6 +8,8 @@ import VTooltip from 'v-tooltip'
 import Vue from 'vue/dist/vue.esm'
 import VueCurrencyInput from 'vue-currency-input'
 import VueRouter from 'vue-router'
+import Vuex from 'vuex'
+import indexStore from '@/js/stores/index-store'
 import router from '@/js/router'
 
 const Avo = {
@@ -23,16 +25,18 @@ const Avo = {
     }
   },
 
-  turbolinksLoad() {
-    if (document.getElementById('app')) {
-      Avo.initVue()
-    }
-  },
-
   reload() {
     this.vue.reload()
   },
 
+  redirect(path) {
+    this.vue.redirect(path)
+  },
+
+  alert(message, messageType) {
+    this.vue.alert(message, messageType)
+  },
+
   initVue() {
     Vue.use(Toasted, {
       duration: 5000,
@@ -48,15 +52,25 @@ const Avo = {
       dynamic: true,
       injectModalsContainer: false,
       dynamicDefaults: {
-        height: 250,
+        adaptive: true,
+        height: 'auto',
+        minHeight: 250,
         width: 550,
         styles: 'border-radius: 1rem',
       },
     })
     Vue.use(PortalVue)
+    Vue.use(Vuex)
+
+    const store = new Vuex.Store({
+      modules: {
+        index: indexStore,
+      },
+    })
 
     this.vue = new Vue({
       router,
+      store,
       el: '#app',
       computed: {
         routerKey() {
@@ -94,5 +108,5 @@ const Avo = {
   },
 }
 
-export { Api }
+export { Api, Bus }
 export default Avo

app/frontend/js/components/Button.vue

@@ -78,12 +78,13 @@ export default {
       }
 
       // Temporary fix for the button colors to keep them in the bundle in the production build.
-      // Colors: green, indigo, red, gray, blue
-      // hover:border-green-800 border-green-600 text-green-600 hover:text-green-800 bg-green-300 bg-green-500 hover:bg-green-600 bg-green-700
-      // hover:border-indigo-800 border-indigo-600 text-indigo-600 hover:text-indigo-800 bg-indigo-300 bg-indigo-500 hover:bg-indigo-600 bg-indigo-700
+      // Colors: red, gray, blue, green, indigo
       // hover:border-red-800 border-red-600 text-red-600 hover:text-red-800 bg-red-300 bg-red-500 hover:bg-red-600 bg-red-700
       // hover:border-gray-800 border-gray-600 text-gray-600 hover:text-gray-800 bg-gray-300 bg-gray-500 hover:bg-gray-600 bg-gray-700
       // hover:border-blue-800 border-blue-600 text-blue-600 hover:text-blue-800 bg-blue-300 bg-blue-500 hover:bg-blue-600 bg-blue-700
+      // hover:border-green-800 border-green-600 text-green-600 hover:text-green-800 bg-green-300 bg-green-500 hover:bg-green-600 bg-green-700
+      // hover:border-indigo-800 border-indigo-600 text-indigo-600 hover:text-indigo-800 bg-indigo-300 bg-indigo-500 hover:bg-indigo-600 bg-indigo-700
+      // hover:border-orange-800 border-orange-600 text-orange-600 hover:text-orange-800 bg-orange-300 bg-orange-500 hover:bg-orange-600 bg-orange-700
 
       return classes
     },

app/frontend/js/components/Edit/BelongsTo.vue

@@ -1,5 +1,5 @@
 <template>
-  <edit-field-wrapper :field="field" :errors="errors" :index="index">
+  <edit-field-wrapper :field="field" :errors="errors" :index="index" :displayed-in="displayedIn">
     <div v-if="searchable">
       <resources-search :resource-name="field.id"
         :via-resource-name="resourceName"

app/frontend/js/components/Edit/BooleanField.vue

@@ -1,5 +1,5 @@
 <template>
-<edit-field-wrapper :field="field" :errors="errors" :index="index">
+<edit-field-wrapper :field="field" :errors="errors" :index="index" :displayed-in="displayedIn">
   <div class="h-8 flex items-center">
     <input type="checkbox"
       ref="field-input"

app/frontend/js/components/Edit/BooleanGroupField.vue

@@ -1,5 +1,5 @@
 <template>
-  <edit-field-wrapper :field="field" :errors="errors" :index="index">
+  <edit-field-wrapper :field="field" :errors="errors" :index="index" :displayed-in="displayedIn">
     <div class="flex items-center">
       <div class="space-y-3">
         <template v-for="(value, name, index) in fieldValues">

app/frontend/js/components/Edit/CodeField.vue

@@ -1,5 +1,5 @@
 <template>
-  <edit-field-wrapper :field="field" :errors="errors" :index="index" :value-slot-full-width="true">
+  <edit-field-wrapper :field="field" :errors="errors" :index="index" :displayed-in="displayedIn" :value-slot-full-width="true">
     <code-component
       :value="value"
       :language="field.language"

app/frontend/js/components/Edit/CountryField.vue

@@ -1,5 +1,5 @@
 <template>
-  <edit-field-wrapper :field="field" :errors="errors" :index="index">
+  <edit-field-wrapper :field="field" :errors="errors" :index="index" :displayed-in="displayedIn">
     <select class="select-input w-full"
       ref="field-input"
       :class="inputClasses"

app/frontend/js/components/Edit/CurrencyField.vue

@@ -1,5 +1,5 @@
 <template>
-  <edit-field-wrapper :field="field" :errors="errors" :index="index">
+  <edit-field-wrapper :field="field" :errors="errors" :index="index" :displayed-in="displayedIn">
     <currency-input
       ref="field-input"
       :id="field.id"

app/frontend/js/components/Edit/DatetimeField.vue

@@ -1,5 +1,5 @@
 <template>
-  <edit-field-wrapper :field="field" :errors="errors" :index="index">
+  <edit-field-wrapper :field="field" :errors="errors" :index="index" :displayed-in="displayedIn">
      <flat-pickr
       ref="field-input"
       class="w-full"

app/frontend/js/components/Edit/FieldWrapper.vue

@@ -1,6 +1,6 @@
 <template>
   <div :class="classes" v-if="field">
-    <div class="w-48 md:w-64 p-4 px-8 h-full flex">
+    <div :class="labelClasses">
       <slot name="label" data-slot="label">
         <label :for="field.id" class="py-2">
           {{ field.name }} <span class="text-red-600" v-if="field.required">*</span>
@@ -13,7 +13,7 @@
         <div class="text-gray-600 mt-2" v-if="field.help" v-html="field.help"></div>
         <div class="text-red-600 mt-2" v-if="fieldError" v-text="fieldError"></div>
       </div>
-      <div class="flex-1 py-4" v-if="!valueSlotFullWidth" data-slot="extra">
+      <div class="flex-1 py-4" v-if="extraSlotVisible" data-slot="extra">
         <slot name="extra" />
       </div>
     </div>
@@ -26,6 +26,29 @@ import IsFieldWrapper from '@/js/mixins/is-field-wrapper'
 
 export default {
   mixins: [FormField, IsFieldWrapper],
-  props: ['field', 'index', 'errors', 'valueSlotFullWidth'],
+  props: {
+    field: {},
+    index: {},
+    errors: {},
+    valueSlotFullWidth: {},
+    displayedIn: {
+      default: () => 'form',
+    },
+  },
+  computed: {
+    extraSlotVisible() {
+      return !this.valueSlotFullWidth && !this.displayedInModal
+    },
+    displayedInModal() {
+      return this.displayedIn === 'modal'
+    },
+    labelClasses() {
+      if (this.displayedInModal) {
+        return 'w-48 md:w-48 p-4 px-8 h-full flex'
+      }
+
+      return 'w-48 md:w-64 p-4 px-8 h-full flex'
+    },
+  },
 }
 </script>

app/frontend/js/components/Edit/FileField.vue

@@ -1,5 +1,5 @@
 <template>
-  <edit-field-wrapper :field="field" :errors="errors" :index="index">
+  <edit-field-wrapper :field="field" :errors="errors" :index="index" :displayed-in="displayedIn">
     <div v-if="value">
       <img v-if="field.is_image" :src="value" class="rounded-lg" />
     </div>

app/frontend/js/components/Edit/FilesField.vue

@@ -1,5 +1,5 @@
 <template>
-  <edit-field-wrapper :field="field" :errors="errors" :index="index" :value-slot-full-width="true">
+  <edit-field-wrapper :field="field" :errors="errors" :index="index" :displayed-in="displayedIn" :value-slot-full-width="true">
     <div v-if="hasFiles" class="relative p-3 bg-gray-200 grid grid-cols-3 lg:grid-cols-4 gap-3">
       <div v-for="file in allFiles" :key="file.path" class="relative pb-full">
         <div class="absolute flex z-10 w-full h-full justify-end items-start p-2">

app/frontend/js/components/Edit/HasOne.vue

@@ -1,5 +1,5 @@
 <template>
-  <edit-field-wrapper :field="field" :errors="errors" :index="index">
+  <edit-field-wrapper :field="field" :errors="errors" :index="index" :displayed-in="displayedIn">
     <div v-if="searchable">
       <resources-search :resource-name="field.id"
         ref="field-input"

app/frontend/js/components/Edit/IdField.vue

@@ -1,5 +1,5 @@
 <template>
-  <edit-field-wrapper :field="field" :errors="errors" :index="index">
+  <edit-field-wrapper :field="field" :errors="errors" :index="index" :displayed-in="displayedIn">
     <input-component
       ref="field-input"
       :id="field.id"

app/frontend/js/components/Edit/KeyValueField.vue

@@ -1,5 +1,5 @@
 <template>
-  <edit-field-wrapper :field="field" :errors="errors" :index="index" :value-slot-full-width="true">
+  <edit-field-wrapper :field="field" :errors="errors" :index="index" :displayed-in="displayedIn" :value-slot-full-width="true">
     <KeyValue
       v-model="value"
       :key-label="field.key_label"

app/frontend/js/components/Edit/NumberField.vue

@@ -1,5 +1,5 @@
 <template>
-  <edit-field-wrapper :field="field" :errors="errors" :index="index">
+  <edit-field-wrapper :field="field" :errors="errors" :index="index" :displayed-in="displayedIn">
     <input-component
       ref="field-input"
       type="number"

app/frontend/js/components/Edit/PasswordField.vue

@@ -1,5 +1,5 @@
 <template>
-  <edit-field-wrapper :field="field" :errors="errors" :index="index">
+  <edit-field-wrapper :field="field" :errors="errors" :index="index" :displayed-in="displayedIn">
     <input-component
       ref="field-input"
       type="password"

app/frontend/js/components/Edit/SelectField.vue

@@ -1,5 +1,5 @@
 <template>
-  <edit-field-wrapper :field="field" :errors="errors" :index="index">
+  <edit-field-wrapper :field="field" :errors="errors" :index="index" :displayed-in="displayedIn">
     <select class="select-input w-full"
       ref="field-input"
       :class="inputClasses"

app/frontend/js/components/Edit/StatusField.vue

@@ -1,5 +1,5 @@
 <template>
-  <edit-field-wrapper :field="field" :errors="errors" :index="index">
+  <edit-field-wrapper :field="field" :errors="errors" :index="index" :displayed-in="displayedIn">
     <input-component
       :id="field.id"
       :class="classes"

app/frontend/js/components/Edit/TextField.vue

@@ -1,5 +1,5 @@
 <template>
-  <edit-field-wrapper :field="field" :errors="errors" :index="index">
+  <edit-field-wrapper :field="field" :errors="errors" :index="index" :displayed-in="displayedIn">
     <input-component
       ref="field-input"
       :id="field.id"

app/frontend/js/components/Edit/TextareaField.vue

@@ -1,5 +1,5 @@
 <template>
-  <edit-field-wrapper :field="field" :errors="errors" :index="index">
+  <edit-field-wrapper :field="field" :errors="errors" :index="index" :displayed-in="displayedIn">
     <input-component
       ref="field-input"
       type="textarea"

app/frontend/js/components/Index/ResourceFilters.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="relative w-full flex justify-between z-30" v-if="hasFilters">
-    <a-button color="gray" class="focus:outline-none" @click="toggleFiltersPanel">
+    <a-button color="gray" class="focus:outline-none" @click="togglePanel">
       <filter-icon class="h-4 mr-2" data-button="resource-filters" /> Filters
     </a-button>
     <div v-on-clickaway="onClickAway"
-      class="absolute block inset-auto right-0 top-full bg-white min-w-300px mt-2 z-20 shadow-row rounded-xl overflow-hidden"
+      class="absolute block inset-auto right-0 top-full bg-white min-w-300px mt-2 z-20 shadow-context rounded-xl"
       v-if="open"
     >
       <div v-if="!viaResourceName">
@@ -62,7 +62,7 @@ export default {
     },
   },
   methods: {
-    toggleFiltersPanel() {
+    togglePanel() {
       this.open = !this.open
     },
     changePerPage() {

app/frontend/js/components/Index/TableView/TableRow.vue

@@ -6,7 +6,10 @@
   >
     <td class="w-10">
       <div class="flex justify-center h-full">
-        <input type="checkbox" class="mx-3" />
+        <input type="checkbox"
+          class="mx-3 w-4 h-4"
+          @click="updateSelection(resource)"
+        />
       </div>
     </td>
     <component
@@ -39,6 +42,7 @@
 </template>
 
 <script>
+import { mapMutations } from 'vuex'
 import ExtractsFields from '@/js/mixins/extracts-fields'
 import HasUniqueKey from '@/js/mixins/has-unique-key'
 
@@ -60,5 +64,10 @@ export default {
       return []
     },
   },
+  methods: {
+    ...mapMutations('index', [
+      'updateSelection',
+    ]),
+  },
 }
 </script>