feat: Common title component (#855)

* feat: Title with common component.

* fix styles content.

* remove unused code.

Co-authored-by: EdwinBetanc0urt <EdwinBetanco0urt@outlook.com>

package.json

@@ -31,6 +31,7 @@
   },
   "dependencies": {
     "@toast-ui/vue-editor": "2.5.1",
+    "@vue/composition-api": "^1.0.0-rc.8",
     "axios": "0.21.1",
     "babel-plugin-require-context-hook": "^1.0.0",
     "clipboard": "2.0.6",

src/components/ADempiere/TitleAndHelp/index.vue

@@ -0,0 +1,126 @@
+<!--
+ ADempiere-Vue (Frontend) for ADempiere ERP & CRM Smart Business Solution
+ Copyright (C) 2017-Present E.R.P. Consultores y Asociados, C.A.
+ Contributor(s): Edwin Betancourt EdwinBetanc0urt@outlook.com www.erpya.com
+ This program is free software: you can redistribute it and/or modify
+ it under the terms of the GNU General Public License as published by
+ the Free Software Foundation, either version 3 of the License, or
+ (at your option) any later version.
+
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License
+ along with this program.  If not, see <https:www.gnu.org/licenses/>.
+-->
+
+<template>
+  <h3 class="title-header text-center">
+    <el-popover
+      v-if="!isEmptyValue(help)"
+      ref="helpTitle"
+      placement="top-start"
+      :title="title"
+      :class="cssClassHelp"
+      width="400"
+      trigger="hover"
+    >
+      <div class="content-help" v-html="help" />
+    </el-popover>
+
+    <el-button
+      v-popover:helpTitle
+      type="text"
+      class="container-title text-center"
+    >
+      {{ title }}
+    </el-button>
+
+    <slot />
+  </h3>
+</template>
+
+<script>
+import { defineComponent, computed } from '@vue/composition-api'
+
+export default defineComponent({
+  name: 'TitleAndHelp',
+
+  props: {
+    name: {
+      type: String,
+      default: ''
+    },
+    help: {
+      type: String,
+      default: ''
+    }
+  },
+
+  setup(props, { root }) {
+    const title = computed(() => {
+      return props.name || root.$route.meta.title
+    })
+
+    const cssClassHelp = computed(() => {
+      if (root.$store.state.app.device === 'mobile') {
+        return 'container-help-mobile'
+      }
+      return 'container-help'
+    })
+
+    return {
+      cssClassHelp,
+      title
+    }
+  }
+
+})
+</script>
+
+<style>
+  /* text content title */
+  .el-popover__title {
+    padding-top: 10px;
+    padding-left: 10px;
+  }
+</style>
+<style lang="scss" scoped>
+  // title container
+  .title-header {
+    margin: 0px 0px !important;
+    padding-top: 0px !important;
+  }
+
+  // text content help into popover
+  .content-help {
+    padding-right: 10px;
+    padding-left: 10px;
+    padding-top: 0px !important;
+    padding-bottom: 10px;
+    word-break: break-word;
+  }
+  // title of the main views into popover
+  .container-title {
+    text-align: center;
+    color: #000000;
+    // text-size-adjust: 20px;
+    font-size: 100%;
+    font-weight: 605 !important;
+  }
+
+  // smart browser help in title popover
+  .container-help {
+    width: 100%;
+    height: 200%;
+    padding-left: 39px !important;
+  }
+  // mobile smart browser help in title popover
+  .container-help-mobile {
+    width: 50%;
+    height: 50%;
+    padding-left: 15px !important;
+  }
+</style>

src/main.js

@@ -1,4 +1,5 @@
 import Vue from 'vue'
+import VueCompositionApi from '@vue/composition-api'
 
 import Cookies from 'js-cookie'
 
@@ -47,6 +48,7 @@ if (process.env.NODE_ENV === 'production') {
   const { mockXHR } = require('../mock')
   mockXHR()
 }
+Vue.use(VueCompositionApi)
 Vue.use(VMarkdown)
 Vue.use(VueShortkey)
 Vue.use(VueSplit)

src/styles/ADempiere/view.scss

@@ -26,43 +26,7 @@
   height: 100%;
 }
 
-// title of the main views
-.custom-title {
-  color: #000000;
-  text-size-adjust: 20px;
-  font-size: 100%;
-  font-weight: 605 !important;
-}
-// title of the main views in mobile
-.custom-title-mobile {
-  text-align: center;
-  color: #000000;
-  text-size-adjust: 20px;
-  font-size: 100%;
-  font-weight: 605!important;
-  /* left: 50%; */
-}
-
-// smart browser help in title popover
-.content-help {
-  width: 100%;
-  height: 200%;
-  padding-left: 39px !important;
-}
-// mobile smart browser help in title popover
-.content-help-mobile {
-  width: 50%;
-  height: 50%;
-  padding-left: 15px !important;
-}
-
 .content-collapse {
   padding-left: 20 px !important;
   padding-top: 50 px !important;
 }
-
-// title content
-.warn-content {
-  margin: 0px 0px !important;
-  padding-top: 0px !important;
-}

src/views/ADempiere/Browser/index.vue

@@ -37,27 +37,14 @@
       />
       <div class="w-33">
         <div class="center">
-          <el-button
+          <title-and-help
-            v-popover:helpTitle
+            :name="browserMetadata.name"
-            type="text"
+            :help="browserMetadata.help"
-            :class="cssClassTitle + ' warn-content text-center'"
+          />
-          >
-            {{ browserTitle }}
-          </el-button>
         </div>
       </div>
-      <el-popover
-        v-if="!isEmptyValue(browserMetadata.help)"
-        ref="helpTitle"
-        placement="top-start"
-        :title="browserTitle"
-        :class="cssClassHelp"
-        width="400"
-        trigger="hover"
-      >
-        <div v-html="browserMetadata.help" />
-      </el-popover>
     </el-header>
+
     <el-main>
 
       <el-collapse
@@ -81,6 +68,7 @@
       />
     </el-main>
   </el-container>
+
   <div
     v-else
     key="browser-loading"
@@ -99,6 +87,7 @@ import ContextMenu from '@/components/ADempiere/ContextMenu'
 import MainPanel from '@/components/ADempiere/Panel'
 import DataTable from '@/components/ADempiere/DataTable'
 import ModalDialog from '@/components/ADempiere/Dialog'
+import TitleAndHelp from '@/components/ADempiere/TitleAndHelp'
 
 export default {
   name: 'BrowserView',
@@ -106,7 +95,8 @@ export default {
     MainPanel,
     DataTable,
     ContextMenu,
-    ModalDialog
+    ModalDialog,
+    TitleAndHelp
   },
   props: {
     isEdit: {
@@ -130,9 +120,6 @@ export default {
     getterBrowser() {
       return this.$store.getters.getBrowser(this.browserUuid)
     },
-    browserTitle() {
-      return this.browserMetadata.name || this.$route.meta.title
-    },
     isLoadedRecords() {
       return this.$store.getters.getDataRecordAndSelection(this.browserUuid).isLoaded
     },
@@ -142,21 +129,6 @@ export default {
       }
       return !this.$store.getters.isNotReadyForSubmit(this.browserUuid)
     },
-    isMobile() {
-      return this.$store.state.app.device === 'mobile'
-    },
-    cssClassTitle() {
-      if (this.isMobile) {
-        return 'custom-title-mobile'
-      }
-      return 'custom-title'
-    },
-    cssClassHelp() {
-      if (this.isMobile) {
-        return 'content-help-mobile'
-      }
-      return 'content-help'
-    },
     isShowedCriteria() {
       if (this.browserMetadata) {
         return this.browserMetadata.isShowedCriteria
@@ -278,13 +250,7 @@ export default {
   .menu {
     height: 40px;
   }
-  .content-help {
+  .center {
-    padding-left: 15px !important;
-  }
-  .content-help-mobile {
-    padding-left: 15px !important;
-  }
-  .center{
     text-align: center;
   }
   .w-33 {

src/views/ADempiere/Form/index.vue

@@ -44,33 +44,19 @@
             class="content-collapse"
             :style="isEmptyValue(formMetadata.fieldsList) ? 'height: 100% !important;' : ''"
           >
-            <h3 v-if="isShowTitleForm" class="warn-content text-center">
+            <title-and-help
-              <el-popover
+              v-if="isShowTitleForm"
-                v-if="!isEmptyValue(formMetadata.help)"
+              :name="formName"
-                ref="helpTitle"
+              :help="formMetadata.help"
-                placement="top-start"
+            >
-                :title="formTitle"
-                width="400"
-                trigger="hover"
-              >
-                <div v-html="formMetadata.help" />
-              </el-popover>
               <el-button
-                v-popover:helpTitle
-                type="text"
-                class="custom-title text-center"
-              >
-                {{ formTitle }}
-              </el-button>
-              <el-button
-                v-if="isShowTitleForm"
                 type="text"
                 style="float: right"
                 :circle="true"
                 icon="el-icon-arrow-up"
                 @click="changeDisplatedTitle"
               />
-            </h3>
+            </title-and-help>
             <el-button
               v-if="!isShowTitleForm"
               type="text"
@@ -79,11 +65,12 @@
               icon="el-icon-arrow-down"
               @click="changeDisplatedTitle"
             />
+
             <form-panel
               :metadata="{
                 ...formMetadata,
-                fileName: fromFileName,
+                fileName: formFileName,
-                title: formTitle
+                title: formName
               }"
             />
           </el-card>
@@ -106,13 +93,15 @@
 import ContextMenu from '@/components/ADempiere/ContextMenu'
 import FormPanel from '@/components/ADempiere/Form'
 import ModalDialog from '@/components/ADempiere/Dialog'
+import TitleAndHelp from '@/components/ADempiere/TitleAndHelp'
 
 export default {
   name: 'FormView',
   components: {
     ContextMenu,
     FormPanel,
-    ModalDialog
+    ModalDialog,
+    TitleAndHelp
   },
   data() {
     return {
@@ -123,15 +112,15 @@ export default {
     }
   },
   computed: {
-    formTitle() {
+    formName() {
       if (this.$route.meta.title === 'PriceChecking') {
         return this.$t('route.PriceChecking')
       } else if (this.$route.meta.title === 'ProductInfo') {
         return this.$t('route.ProductInfo')
       }
-      return this.formMetadata.name || this.$route.meta.title
+      return this.formMetadata.name
     },
-    fromFileName() {
+    formFileName() {
       return this.formMetadata.fileName || this.$route.meta.title
     },
     getterForm() {

src/views/ADempiere/Process/index.vue

@@ -37,25 +37,11 @@
       <el-row :gutter="20">
         <el-col :span="24">
           <el-card class="content-collapse">
-            <h3 v-show="!isEmptyValue(processTitle)" class="warn-content text-center">
+            <title-and-help
-              <el-popover
+              :name="processMetadata.name"
-                v-if="!isEmptyValue(processMetadata.help)"
+              :help="processMetadata.help"
-                ref="helpTitle"
+            />
-                placement="top-start"
+
-                :title="processTitle"
-                width="400"
-                trigger="hover"
-              >
-                <div v-html="processMetadata.help" />
-              </el-popover>
-              <el-button
-                v-popover:helpTitle
-                type="text"
-                class="custom-title text-center"
-              >
-                {{ processMetadata.name }}
-              </el-button>
-            </h3>
             <main-panel
               :position-tab="processMetadata.accesLevel"
               :container-uuid="processUuid"
@@ -84,12 +70,14 @@
 // the ContextMenu and sticky must be placed in the layout
 import ContextMenu from '@/components/ADempiere/ContextMenu'
 import MainPanel from '@/components/ADempiere/Panel'
+import TitleAndHelp from '@/components/ADempiere/TitleAndHelp'
 
 export default {
   name: 'ProcessView',
   components: {
     MainPanel,
-    ContextMenu
+    ContextMenu,
+    TitleAndHelp
   },
   props: {
     isEdit: {
@@ -111,9 +99,6 @@ export default {
     },
     getterProcess() {
       return this.$store.getters.getPanel(this.processUuid)
-    },
-    processTitle() {
-      return this.processMetadata.name || this.$route.meta.title
     }
   },
   created() {
@@ -158,9 +143,4 @@ export default {
     width: 100% !important;
     height: 100% !important;
   }
-  .sticky-submenu {
-    position: absolute !important;
-    right: 0;
-    top: 0;
-  }
 </style>

src/views/ADempiere/ReportViewer/index.vue

@@ -30,25 +30,12 @@
     <el-row type="flex" style="min-height: inherit;">
       <el-col :span="24">
         <div class="content">
-          <h3 class="text-center" style="margin: 0 !important;">
+          <title-and-help
-            <el-popover
+            style="margin: 0 !important;"
-              v-if="!isEmptyValue(processMetadata.help)"
+            :name="processMetadata.name"
-              ref="helpTitle"
+            :help="processMetadata.help"
-              placement="top-start"
+          />
-              :title="reportTitle"
+
-              width="400"
-              trigger="hover"
-            >
-              <div v-html="processMetadata.help" />
-            </el-popover>
-            <el-button
-              v-popover:helpTitle
-              type="text"
-              class="custom-title"
-            >
-              {{ reportTitle }}
-            </el-button>
-          </h3>
           <iframe
             v-if="reportFormat === 'pdf'"
             key="report-content-pdf"
@@ -88,6 +75,7 @@
       :panel-type="panelType"
     />
   </div>
+
   <div
     v-else
     key="report-viewer-loading"
@@ -102,6 +90,7 @@
 <script>
 import ContextMenu from '@/components/ADempiere/ContextMenu'
 import ModalDialog from '@/components/ADempiere/Dialog'
+import TitleAndHelp from '@/components/ADempiere/TitleAndHelp'
 import { showNotification } from '@/utils/ADempiere/notification'
 import { reportFormatsList } from '@/utils/ADempiere/exportUtil.js'
 
@@ -109,7 +98,8 @@ export default {
   name: 'ReportViewer',
   components: {
     ContextMenu,
-    ModalDialog
+    ModalDialog,
+    TitleAndHelp
   },
   data() {
     return {
@@ -130,9 +120,6 @@ export default {
     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
     },

src/views/ADempiere/Summary/index.vue

@@ -1,7 +1,7 @@
 <!--
  ADempiere-Vue (Frontend) for ADempiere ERP & CRM Smart Business Solution
  Copyright (C) 2017-Present E.R.P. Consultores y Asociados, C.A.
- Contributor(s): Edwin Betancourt edwinBetanc0urt@hotmail.com www.erpya.com
+ Contributor(s): Edwin Betancourt EdwinBetanc0urt@outlook.com www.erpya.com
  This program is free software: you can redistribute it and/or modify
  it under the terms of the GNU General Public License as published by
  the Free Software Foundation, either version 3 of the License, or
@@ -17,15 +17,11 @@
 -->
 <template>
   <div v-if="isIndex" key="sumary" class="app-container">
-    <el-popover
+    <title-and-help
-      v-if="!isEmptyValue($route.meta.description)"
+      :name="$route.meta.title"
-      ref="routeDescription"
+      :help="$route.meta.description"
-      placement="top"
-      width="400"
-      trigger="hover"
-      :content="$route.meta.description"
     />
-    <h3 v-popover:routeDescription class="description">{{ $route.meta.title }}</h3>
+
     <el-row :gutter="10">
       <template v-if="!isEmptyValue(optionList.children)">
         <template v-for="(item, key) in optionList.children">
@@ -56,11 +52,13 @@
 
 <script>
 import DropdownMenu from '@/components/ADempiere/DropdownMenu'
+import TitleAndHelp from '@/components/ADempiere/TitleAndHelp'
 
 export default {
   name: 'SummaryView',
   components: {
-    DropdownMenu
+    DropdownMenu,
+    TitleAndHelp
   },
   data() {
     return {

src/views/ADempiere/Test/index.vue

@@ -37,25 +37,10 @@
             class="content-collapse"
             :style="isEmptyValue(metadata.fieldsList) ? 'height: max-content !important;' : ''"
           >
-            <h3 class="warn-content text-center">
+            <title-and-help
-              <el-popover
+              :name="metadata.name"
-                v-if="!isEmptyValue(metadata.help)"
+              :help="metadata.help"
-                ref="helpTitle"
+            />
-                placement="top-start"
-                :title="formTitle"
-                width="400"
-                trigger="hover"
-              >
-                <div v-html="metadata.help" />
-              </el-popover>
-              <el-button
-                v-popover:helpTitle
-                type="text"
-                class="custom-title text-center"
-              >
-                {{ formTitle }}
-              </el-button>
-            </h3>
 
             <!-- emulated component form -->
             <div class="wrapper">
@@ -93,11 +78,13 @@
 import formMixin from '@/components/ADempiere/Form/formMixin'
 import fieldsList from './fieldsList.js'
 import ContextMenu from '@/components/ADempiere/ContextMenu'
+import TitleAndHelp from '@/components/ADempiere/TitleAndHelp'
 
 export default {
   name: 'TestView',
   components: {
-    ContextMenu
+    ContextMenu,
+    TitleAndHelp
   },
   mixins: [formMixin],
   props: {
@@ -118,11 +105,6 @@ export default {
       unsubscribe: () => {}
     }
   },
-  computed: {
-    formTitle() {
-      return this.metadata.name || this.$route.meta.title
-    }
-  },
   created() {
     this.unsubscribe = this.subscribeChanges()
   },