fix: Without title in some view's component. (#436)

* fix: Without title in some view's component.

* fix name attribute.

src/views/ADempiere/Browser/index.vue

@@ -1,5 +1,10 @@
 <template>
-  <el-container v-if="isLoaded" key="browser-loaded" class="view-base" style="height: 86vh;">
+  <el-container
+    v-if="isLoaded"
+    key="browser-loaded"
+    class="view-base"
+    style="height: 86vh;"
+  >
     <modal-dialog
       :container-uuid="browserUuid"
       :panel-type="panelType"
@@ -13,39 +18,32 @@
       <div class="w-33">
         <div class="center">
           <el-button
-            v-if="isEmptyValue(browserMetadata.help)"
-            slot="reference"
+            v-popover:helpTitle
             type="text"
             :class="cssClassTitle + ' warn-content text-center'"
           >
-            {{ browserMetadata.name }}
+            {{ browserTitle }}
           </el-button>
         </div>
       </div>
       <el-popover
-        v-if="!isEmptyValue(browserMetadata.name)"
+        v-if="!isEmptyValue(browserMetadata.help)"
+        ref="helpTitle"
         placement="top-start"
-        :title="browserMetadata.name"
+        :title="browserTitle"
         :class="cssClassHelp"
+        width="400"
         trigger="hover"
       >
         <div v-html="browserMetadata.help" />
-        <div class="w-33">
-          <div class="center">
-            <el-button
-              v-if="isEmptyValue(browserMetadata.help)"
-              slot="reference"
-              type="text"
-              :class="cssClassTitle + 'warn-content text-center'"
-            >
-              {{ browserMetadata.name }}
-            </el-button>
-          </div>
-        </div>
       </el-popover>
     </el-header>
     <el-main>
-      <el-collapse v-model="activeSearch" class="container-collasep-open" @change="handleChange">
+      <el-collapse
+        v-model="activeSearch"
+        class="container-collasep-open"
+        @change="handleChange"
+      >
         <el-collapse-item :title="$t('views.searchCriteria')" name="opened-criteria">
           <main-panel
             :container-uuid="browserUuid"
@@ -108,6 +106,9 @@ export default {
     getterBrowser() {
       return this.$store.getters.getBrowser(this.browserUuid)
     },
+    browserTitle() {
+      return this.browserMetadata.name || this.$route.meta.title
+    },
     getDataRecords() {
       return this.$store.getters.getDataRecordsList(this.browserUuid)
     },
@@ -161,8 +162,9 @@ export default {
       })
     },
     getBrowser() {
-      if (this.getterBrowser) {
-        this.browserMetadata = this.getterBrowser
+      const browser = this.getterBrowser
+      if (browser) {
+        this.browserMetadata = browser
         this.isLoaded = true
         this.defaultSearch()
         return
@@ -172,8 +174,8 @@ export default {
         panelType: this.panelType,
         routeToDelete: this.$route
       })
-        .then(() => {
-          this.browserMetadata = this.getterBrowser
+        .then(browserResponse => {
+          this.browserMetadata = browserResponse
           this.defaultSearch()
         })
         .finally(() => {

src/views/ADempiere/Process/index.vue

@@ -1,5 +1,10 @@
 <template>
-  <el-container v-if="isLoadedMetadata" key="process-loaded" class="view-base" style="height: 84vh;">
+  <el-container
+    v-if="isLoadedMetadata"
+    key="process-loaded"
+    class="view-base"
+    style="height: 84vh;"
+  >
     <el-header style="height: 39px;">
       <context-menu
         :menu-parent-uuid="$route.meta.parentUuid"
@@ -12,20 +17,22 @@
       <el-row :gutter="20">
         <el-col :span="24">
           <el-card class="content-collapse">
-            <h3 v-show="!isEmptyValue(processMetadata.name)" class="warn-content text-center">
+            <h3 v-show="!isEmptyValue(processTitle)" class="warn-content text-center">
               <el-popover
                 v-if="!isEmptyValue(processMetadata.help)"
+                ref="helpTitle"
                 placement="top-start"
-                :title="processMetadata.name"
+                :title="processTitle"
                 width="400"
                 trigger="hover"
               >
                 <div v-html="processMetadata.help" />
-                <el-button slot="reference" type="text" class="title">
-                  {{ processMetadata.name }}
-                </el-button>
               </el-popover>
-              <el-button v-if="isEmptyValue(processMetadata.help)" slot="reference" type="text" class="title text-center">
+              <el-button
+                v-popover:helpTitle
+                type="text"
+                class="title text-center"
+              >
                 {{ processMetadata.name }}
               </el-button>
             </h3>
@@ -81,6 +88,9 @@ export default {
   computed: {
     getterProcess() {
       return this.$store.getters.getPanel(this.processUuid)
+    },
+    processTitle() {
+      return this.processMetadata.name || this.$route.meta.title
     }
   },
   created() {
@@ -88,16 +98,17 @@ export default {
   },
   methods: {
     getProcess() {
-      if (this.getterProcess) {
-        this.processMetadata = this.getterProcess
+      const process = this.getterProcess
+      if (process) {
+        this.processMetadata = process
         this.isLoadedMetadata = true
       } else {
         this.$store.dispatch('getPanelAndFields', {
           containerUuid: this.processUuid,
           panelType: this.panelType,
           routeToDelete: this.$route
-        }).then(() => {
-          this.processMetadata = this.getterProcess
+        }).then(processResponse => {
+          this.processMetadata = processResponse
         }).finally(() => {
           this.isLoadedMetadata = true
         })

src/views/ADempiere/ReportViewer/index.vue

@@ -13,16 +13,21 @@
           <h3 class="text-center" style="margin: 0 !important;">
             <el-popover
               v-if="!isEmptyValue(processMetadata.help)"
+              ref="helpTitle"
               placement="top-start"
-              :title="processMetadata.name"
+              :title="reportTitle"
               width="400"
               trigger="hover"
             >
               <div v-html="processMetadata.help" />
-              <el-button slot="reference" type="text" class="title">
-                {{ processMetadata.name }}
-              </el-button>
             </el-popover>
+            <el-button
+              v-popover:helpTitle
+              type="text"
+              class="title"
+            >
+              {{ reportTitle }}
+            </el-button>
           </h3>
           <iframe
             v-if="reportFormat === 'pdf'"
@@ -87,7 +92,7 @@ export default {
   data() {
     return {
       panelType: 'process',
-      name: [],
+      processMetadata: {},
       reportFormat: '',
       collectionReportFormat: [
         'ps',
@@ -101,16 +106,18 @@ export default {
         'arxml'
       ],
       reportContent: '',
-      reportHeader: '',
       isLoading: false,
       reportResult: {}
     }
   },
   computed: {
     // TODO: Add get metadata from server to open report view from link
-    processMetadata() {
+    getterProcess() {
       return this.$store.getters.getProcessById(this.$route.params.processId)
     },
+    reportTitle() {
+      return this.processMetadata.name || this.$route.meta.title
+    },
     url() {
       return this.$store.getters.getProcessResult.url
     },
@@ -118,6 +125,9 @@ export default {
       return this.$store.getters.getCachedReport(this.$route.params.instanceUuid)
     }
   },
+  created() {
+    this.processMetadata = this.getterProcess
+  },
   mounted() {
     this.getCachedReport()
     this.$route.meta.reportFormat = this.reportFormat
@@ -126,10 +136,10 @@ export default {
     showNotification,
     displayReport(reportResult) {
       if (!reportResult.isError) {
-        this.reportFormat = this.isEmptyValue(reportResult.output.reportType) ? reportResult.reportType : reportResult.output.reportType
-        this.reportContent = this.isEmptyValue(reportResult.output.output) ? reportResult.output : reportResult.output.output
-        this.reportHeader = this.isEmptyValue(reportResult.output.name) ? reportResult.processName : reportResult.output.name
-        this.name = this.isEmptyValue(reportResult.output.fileName) ? reportResult.fileName : reportResult.output.fileName
+        const { output } = reportResult
+        this.reportFormat = this.isEmptyValue(output.reportType) ? reportResult.reportType : output.reportType
+        this.reportContent = this.isEmptyValue(output.output) ? reportResult.output : output.output
+
         this.isLoading = true
       }
     },