feat: Common title component (#855)

* feat: Title with common component. * fix styles content. * remove unused code. Co-authored-by: EdwinBetanc0urt <EdwinBetanco0urt@outlook.com>
2025-08-07 18:25:45 +08:00 · 2021-05-18 17:17:14 -04:00 · 2021-05-18 17:17:14 -04:00 · bbab104d07
commit bbab104d07
parent 4766b1164a
10 changed files with 187 additions and 192 deletions
--- a/package.json
+++ b/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",
--- a/src/components/ADempiere/TitleAndHelp/index.vue
+++ b/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>
--- a/src/main.js
+++ b/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)
--- a/src/styles/ADempiere/view.scss
+++ b/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;
-}
--- a/src/views/ADempiere/Browser/index.vue
+++ b/src/views/ADempiere/Browser/index.vue
@ -37,27 +37,14 @@
      />
      <div class="w-33">
        <div class="center">
-          <el-button
-            v-popover:helpTitle
-            type="text"
-            :class="cssClassTitle + ' warn-content text-center'"
-          >
-            {{ browserTitle }}
-          </el-button>
+          <title-and-help
+            :name="browserMetadata.name"
+            :help="browserMetadata.help"
+          />
        </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 {
-    padding-left: 15px !important;
-  }
-  .content-help-mobile {
-    padding-left: 15px !important;
-  }
-  .center{
+  .center {
    text-align: center;
  }
  .w-33 {
--- a/src/views/ADempiere/Form/index.vue
+++ b/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">
-              <el-popover
-                v-if="!isEmptyValue(formMetadata.help)"
-                ref="helpTitle"
-                placement="top-start"
-                :title="formTitle"
-                width="400"
-                trigger="hover"
-              >
-                <div v-html="formMetadata.help" />
-              </el-popover>
+            <title-and-help
+              v-if="isShowTitleForm"
+              :name="formName"
+              :help="formMetadata.help"
+            >
              <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,
-                title: formTitle
+                fileName: formFileName,
+                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() {
--- a/src/views/ADempiere/Process/index.vue
+++ b/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">
-              <el-popover
-                v-if="!isEmptyValue(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>
+            <title-and-help
+              :name="processMetadata.name"
+              :help="processMetadata.help"
+            />
+
            <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>
--- a/src/views/ADempiere/ReportViewer/index.vue
+++ b/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;">
-            <el-popover
-              v-if="!isEmptyValue(processMetadata.help)"
-              ref="helpTitle"
-              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>
+          <title-and-help
+            style="margin: 0 !important;"
+            :name="processMetadata.name"
+            :help="processMetadata.help"
+          />
+
          <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
    },
--- a/src/views/ADempiere/Summary/index.vue
+++ b/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
-      v-if="!isEmptyValue($route.meta.description)"
-      ref="routeDescription"
-      placement="top"
-      width="400"
-      trigger="hover"
-      :content="$route.meta.description"
+    <title-and-help
+      :name="$route.meta.title"
+      :help="$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 {
--- a/src/views/ADempiere/Test/index.vue
+++ b/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">
-              <el-popover
-                v-if="!isEmptyValue(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>
+            <title-and-help
+              :name="metadata.name"
+              :help="metadata.help"
+            />

            <!-- 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()
  },