Fixed Filters cannot be displayed in the smart browser (#1546)

* #1454 * minimal changes * fixe style * #1545 * minimal changes Co-authored-by: elsiosanchez <elsiossanches@gmail.com>
adempiere · Feb 9, 2022 · eb11f7b · eb11f7b
1 parent f50be02
commit eb11f7b
Show file tree

Hide file tree

Showing 4 changed files with 171 additions and 13 deletions.
diff --git a/src/components/ADempiere/Collapse/index.vue b/src/components/ADempiere/Collapse/index.vue
@@ -0,0 +1,146 @@
+<!--
+ ADempiere-Vue (Frontend) for ADempiere ERP & CRM Smart Business Solution
+ Copyright (C) 2017-Present E.R.P. Consultores y Asociados, C.A.
+ Contributor(s): Elsio Sanchez elsiosanches@gmail.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>
+  <el-main class="default-table" style="border-top: 1px solid #dde6fa;padding-bottom: 1%;padding-top: 1%;border-bottom: 1px solid #dde6fa">
+    <el-divider class="divider" />
+    <el-row style="display: flex;">
+      <el-col :span="19" style="display: grid;">
+        <div class="title" @click="handlePanel(isShowPanel)">
+          <b class="label">
+            {{ title }}
+          </b>
+        </div>
+      </el-col>
+      <el-col :span="4">
+        <filter-fields
+          :parent-uuid="parentUuid"
+          :container-uuid="containerUuid"
+          :fields-list="panelMetadata.fieldsList"
+          :filter-manager="containerManager.changeFieldShowedFromUser"
+          :showed-manager="containerManager.isDisplayedField"
+        />
+      </el-col>
+      <el-col :span="1" style="text-align: center;">
+        <el-button type="text" :icon="icon" class="change-icon" @click="handlePanel(isShowPanel)" />
+      </el-col>
+    </el-row>
+    <transition name="el-zoom-in-top">
+      <div v-show="isShowPanel" class="transition-box">
+        <el-row>
+          <el-col :span="24">
+            <slot />
+          </el-col>
+        </el-row>
+      </div>
+    </transition>
+    <el-divider class="divider" />
+  </el-main>
+</template>
+
+<script>
+import { defineComponent, computed, ref } from '@vue/composition-api'
+import FilterFields from '@/components/ADempiere/FilterFields'
+
+export default defineComponent({
+  name: 'Collapse',
+
+  components: {
+    FilterFields
+  },
+
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    parentUuid: {
+      type: String,
+      default: undefined
+    },
+    containerUuid: {
+      type: String,
+      required: true
+    },
+    containerManager: {
+      type: Object,
+      required: true
+    },
+    panelMetadata: {
+      type: Object,
+      required: false
+    }
+  },
+
+  setup(props, { root, refs }) {
+    const isShowPanel = ref(false)
+
+    const icon = computed(() => {
+      if (isShowPanel.value) {
+        return 'el-icon-arrow-down'
+      }
+      return 'el-icon-arrow-right'
+    })
+
+    function handlePanel(show) {
+      isShowPanel.value = !show
+    }
+
+    return {
+      // data
+      isShowPanel,
+      // computeds
+      icon,
+      // methods
+      handlePanel
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+.title {
+  margin-top: 0%;
+}
+.title:hover, .title:focus {
+  cursor: pointer;
+}
+.change-icon {
+  font-size: 20px;
+  color: #000000;
+  font-weight: 605 !important;
+}
+.change-icon:hover, .change-icon:focus {
+    color: #000000;
+    border-color: transparent;
+    background-color: transparent;
+}
+.collapse {
+  border-top: 1px solid rgba(255, 255, 255, 0.5);
+}
+.divider {
+  margin-left: 0px;
+  margin-right: 0px;
+  margin-bottom: 5px;
+  margin-top: 5px;
+}
+.label {
+  margin-top: 1%;
+  display: block;
+}
+</style>
diff --git a/src/components/ADempiere/PanelDefinition/StandardPanel.vue b/src/components/ADempiere/PanelDefinition/StandardPanel.vue
@@ -25,6 +25,7 @@
       <div class="cards-not-group">
         <div class="card">
           <filter-fields
+            v-if="isShowFilter"
             :parent-uuid="parentUuid"
             :container-uuid="containerUuid"
             :fields-list="fieldsList"
@@ -84,6 +85,10 @@ export default defineComponent({
     panelMetadata: {
       type: Object,
       default: () => {}
+    },
+    isShowFilter: {
+      type: Boolean,
+      default: true
     }
   },
 

diff --git a/src/components/ADempiere/PanelDefinition/index.vue b/src/components/ADempiere/PanelDefinition/index.vue
@@ -23,6 +23,7 @@
     :container-uuid="containerUuid"
     :container-manager="containerManager"
     :panel-metadata="metadata"
+    :is-show-filter="isShowFilter"
   />
 </template>
 
@@ -48,6 +49,10 @@ export default defineComponent({
     panelMetadata: {
       type: Object,
       required: false
+    },
+    isShowFilter: {
+      type: Boolean,
+      default: true
     }
   },
 

diff --git a/src/views/ADempiere/Browser/index.vue b/src/views/ADempiere/Browser/index.vue
@@ -40,20 +40,20 @@
     </el-header>
 
     <el-main>
-      <el-collapse
-        v-model="openedCriteria"
-        class="browser-collapse"
+      <collapse
+        :title="$t('views.searchCriteria')"
+        :container-uuid="browserUuid"
+        :panel-metadata="browserMetadata"
+        :container-manager="containerManager"
       >
-        <el-collapse-item :title="$t('views.searchCriteria')" name="opened-criteria">
-          <panel-definition
-            class="browser-query-criteria"
-            :container-uuid="browserUuid"
-            :panel-metadata="browserMetadata"
-            :container-manager="containerManager"
-          />
-        </el-collapse-item>
-      </el-collapse>
-
+        <panel-definition
+          class="browser-query-criteria"
+          :container-uuid="browserUuid"
+          :panel-metadata="browserMetadata"
+          :container-manager="containerManager"
+          :is-show-filter="false"
+        />
+      </collapse>
       <!-- result of records in the table -->
       <default-table
         class="browser-table-result"
@@ -80,6 +80,7 @@ import { computed, defineComponent, ref } from '@vue/composition-api'
 // componets and mixins
 import ActionMenu from '@/components/ADempiere/ActionMenu/index.vue'
 import DefaultTable from '@/components/ADempiere/DefaultTable/index.vue'
+import Collapse from '@/components/ADempiere/Collapse/index.vue'
 import LoadingView from '@/components/ADempiere/LoadingView/index.vue'
 import TitleAndHelp from '@/components/ADempiere/TitleAndHelp'
 import PanelDefinition from '@/components/ADempiere/PanelDefinition/index.vue'
@@ -97,6 +98,7 @@ export default defineComponent({
   components: {
     ActionMenu,
     DefaultTable,
+    Collapse,
     LoadingView,
     PanelDefinition,
     TitleAndHelp