fix: loaders are not visible on some pages

app/frontend/js/mixins/loads-resource.js

@@ -4,6 +4,7 @@ import Bus from '@/js/Bus'
 import Resource from '@/js/models/Resource'
 import hasLoadingBus from '@/js/mixins/has-loading-bus'
 import pluralize from 'pluralize'
+import replace from 'lodash/replace'
 
 export default {
   mixins: [hasLoadingBus],
@@ -22,6 +23,11 @@ export default {
 
       return `${Avo.rootPath}/avo-api/${this.resourceName}/new`
     },
+    resourceNameFromURL() {
+      if (!this.resource) return replace(pluralize(this.resourceName, 1), '_', ' ')
+
+      return this.resource.singular_name
+    },
   },
   methods: {
     hydrateRelatedResources(resource) {

app/frontend/js/views/ResourceEdit.vue

@@ -1,9 +1,9 @@
 <template>
-  <div v-if="resource" :resource-id="resourceId">
-    <div v-for="panel in resource.panels" :key="panel.name">
+  <div :resource-id="resourceId">
+    <div v-for="panel in panels" :key="panel.name">
       <panel>
         <template #heading>
-          {{ $t('avo.edit_item', { item: resourceNameSingular.toLowerCase() }) | upperFirst() }}
+          {{panel.name}}
         </template>
 
         <template #tools>
@@ -48,6 +48,7 @@ import HasForms from '@/js/mixins/has-forms'
 import HasUniqueKey from '@/js/mixins/has-unique-key'
 import LoadsResource from '@/js/mixins/loads-resource'
 import hasUpperFirstFilter from '@/js/mixins/has-upper-first-filter'
+import upperFirst from 'lodash/upperFirst'
 
 export default {
   mixins: [HasForms, LoadsResource, DealsWithResourceLabels, HasUniqueKey, hasUpperFirstFilter],
@@ -62,12 +63,17 @@ export default {
     'viaResourceId',
   ],
   computed: {
+    panels() {
+      if (!this.resource) return [{ name: upperFirst(this.$t('avo.edit_item', { item: this.resourceNameFromURL })) }]
+
+      return this.resource.panels
+    },
     cancelActionParams() {
       const action = {
         name: 'show',
         params: {
           resourceName: this.resourceName,
-          resourceId: this.resource.id,
+          resourceId: this.resourceId,
         },
       }
 
@@ -79,6 +85,8 @@ export default {
       return action
     },
     canUpdate() {
+      if (!this.resource) return false
+
       return this.resource.authorization.update
     },
   },

app/frontend/js/views/ResourceNew.vue

@@ -1,9 +1,9 @@
 <template>
-  <div v-if="resource">
-    <div v-for="panel in resource.panels" :key="panel.name">
+  <div>
+    <div v-for="panel in panels" :key="panel.name">
       <panel>
         <template #heading>
-          {{ $t('avo.create_new_item', { item: resourceNameSingular.toLowerCase() }) | upperFirst() }}
+          {{panel.name}}
         </template>
 
         <template #tools>
@@ -14,7 +14,11 @@
                 resourceName: resourceName,
               },
             }"><arrow-left-icon class="h-4 mr-1"/> {{ $t('avo.cancel') }}</a-button>
-            <a-button color="green" @click="submitResource"><save-icon class="h-4 mr-1"/> {{ $t('avo.save') }}</a-button>
+            <a-button
+              color="green"
+              @click="submitResource"
+              v-if="resource"
+            ><save-icon class="h-4 mr-1"/> {{ $t('avo.save') }}</a-button>
           </div>
         </template>
 
@@ -55,13 +59,20 @@ import LoadsResource from '@/js/mixins/loads-resource'
 export default {
   mixins: [HasForms, LoadsResource, DealsWithResourceLabels, HasUniqueKey],
   data: () => ({
-    resource: {},
+    resource: null,
     form: {},
   }),
   props: [
     'resourceName',
     'viaResourceName',
     'viaResourceId',
   ],
+  computed: {
+    panels() {
+      if (!this.resource) return [{ name: (this.$t('avo.create_new_item', { item: this.resourceNameFromURL })) }]
+
+      return this.resource.panels
+    },
+  },
 }
 </script>

app/frontend/js/views/ResourceShow.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="resource" :resource-id="resourceId">
+  <div :resource-id="resourceId">
     <div v-for="panel in panels" :key="panel.name">
       <panel>
         <template #heading>
@@ -75,6 +75,7 @@ import HasUpperFirstFilter from '@/js/mixins/has-upper-first-filter'
 import LoadsActions from '@/js/mixins/loads-actions'
 import LoadsResource from '@/js/mixins/loads-resource'
 import Modal from '@/js/components/Modal.vue'
+import upperFirst from 'lodash/upperFirst'
 
 export default {
   name: 'ResourceShow',
@@ -107,20 +108,26 @@ export default {
       return action
     },
     fields() {
+      if (!this.resource) return []
+
       return this.resource.fields
     },
     panels() {
-      if (!this.resource) return []
+      if (!this.resource) return [{ name: this.$t('avo.resource_details', { name: upperFirst(this.resourceNameFromURL) }) }]
 
       return this.resource.panels
     },
     hasManyRelations() {
       return this.fields.filter((field) => ['has_and_belongs_to_many', 'has_many'].indexOf(field.relationship) > -1)
     },
     canEdit() {
+      if (!this.resource) return false
+
       return this.resource.authorization.edit
     },
     canDelete() {
+      if (!this.resource) return false
+
       return this.resource.authorization.destroy
     },
   },

lib/avo/app/resource.rb

@@ -13,7 +13,15 @@ class Resource
 
       class << self
         def hydrate_resource(model:, resource:, view: :index, user:)
-          default_panel_name = I18n.t 'avo.resource_details', name: resource.name
+
+          case view
+          when :show
+            panel_name = I18n.t 'avo.resource_details', name: resource.name.downcase.upcase_first
+          when :edit
+            panel_name = I18n.t('avo.edit_item', item: resource.name.downcase).upcase_first
+          when :create
+            panel_name = I18n.t('avo.create_new_item', item: resource.name.downcase).upcase_first
+          end
 
           resource_with_fields = {
             id: model.id,
@@ -26,7 +34,7 @@ def hydrate_resource(model:, resource:, view: :index, user:)
             fields: [],
             grid_fields: {},
             panels: [{
-              name: default_panel_name,
+              name: panel_name,
               component: 'panel',
             }]
           }
@@ -46,7 +54,7 @@ def hydrate_resource(model:, resource:, view: :index, user:)
 
             next if furnished_field.blank?
 
-            furnished_field[:panel_name] = default_panel_name
+            furnished_field[:panel_name] = panel_name
             furnished_field[:show_on_show] = field.show_on_show
 
             if field.has_own_panel?