fix: loaders are not visible on some pages (#190)

Author: adrianthedev

app/frontend/js/components/Button.vue

@@ -9,16 +9,15 @@
     :href="realHref"
     @click="$emit('click')"
   >
-    <div class="text-center w-full" v-if="fullWidth">
+    <span class="text-center w-full" v-if="fullWidth">
       <slot />
-    </div>
+    </span>
     <slot v-else />
   </button>
 </template>
 
 <script>
 export default {
-  data: () => ({}),
   props: [
     'to',
     'exact',

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="relative w-full flex justify-between z-30" v-if="hasFilters">
+  <div class="relative w-full flex justify-between z-30">
     <a-button color="gray" class="focus:outline-none" @click="togglePanel">
       <filter-icon class="h-4 mr-2" data-button="resource-filters" /> {{ $t('avo.filters') }}
     </a-button>
@@ -34,14 +34,13 @@
         ></component>
       </template>
       <div class="p-4 border-gray-300 border-t">
-        <a-button color="gray"
+        <a-button
+          color="gray"
           class="w-full"
           :disabled="resetDisabled"
           @click="resetFilters"
-          v-text="'Reset filters'"
-        />
+        >Reset filters</a-button>
       </div>
-
     </div>
   </div>
 </template>
@@ -66,9 +65,6 @@ export default {
     perPageSteps: {},
   },
   computed: {
-    hasFilters() {
-      return this.filters.length > 0
-    },
     resetDisabled() {
       if (this.$route.query.filters === undefined) return true
 

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/ResourceIndex.vue

@@ -50,7 +50,6 @@
               :resource-name="resourceName"
               :via-resource-name="viaResourceName"
               :via-resource-id="viaResourceId"
-              v-if="resources.length > 0"
             />
           </div>
           <div class="flex justify-end items-center px-6 space-x-3">
@@ -83,8 +82,7 @@
         <loading-overlay class="relative" v-if="viewType === '' && isLoading"/>
 
         <div class="w-full overflow-auto min-h-28 flex flex-col" v-if="viewType === 'table'">
-          <loading-overlay class="relative" v-if="resources.length === 0 && isLoading"/>
-          <div class="relative flex-1 flex" v-else>
+          <div class="relative flex-1 flex">
             <loading-overlay v-if="isLoading" />
 
             <resource-table

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,14 @@ 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 +33,7 @@ def hydrate_resource(model:, resource:, view: :index, user:)
             fields: [],
             grid_fields: {},
             panels: [{
-              name: default_panel_name,
+              name: panel_name,
               component: 'panel',
             }]
           }
@@ -46,7 +53,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?