KNOWAGE-7443

knowage-vue/src/modules/documentExecution/olap/drillThroughDialog/OlapDrillThroughDialog.vue

@@ -16,7 +16,7 @@
             </template>
         </Card>
 
-        <DataTable :value="dtData" id="olap-custom-views-table" class="p-datatable-sm kn-table p-m-2" v-model:filters="filters" :paginator="drillData.length > 20" :rows="18" responsiveLayout="stack" breakpoint="600px" stripedRows="true" rowHover="true">
+        <DataTable :value="dtData" id="olap-custom-views-table" class="p-datatable-sm kn-table p-m-2 olap-drill-through-table" v-model:filters="filters" :paginator="drillData.length > 20" :rows="18" responsiveLayout="stack" breakpoint="600px" stripedRows="true" rowHover="true">
             <template #empty>
                 {{ $t('common.info.noDataFound') }}
             </template>
@@ -54,115 +54,124 @@
 </template>
 
 <script lang="ts">
-    import { filterDefault } from '@/helpers/commons/filterHelper'
-    import { defineComponent } from 'vue'
-    import Column from 'primevue/column'
-    import DataTable from 'primevue/datatable'
-    import dtDescriptor from './OlapDrillThroughDialogDescriptor.json'
-    import Menu from 'primevue/contextmenu'
-    import Checkbox from 'primevue/checkbox'
-    import Dropdown from 'primevue/dropdown'
+import { filterDefault } from '@/helpers/commons/filterHelper'
+import { defineComponent } from 'vue'
+import Column from 'primevue/column'
+import DataTable from 'primevue/datatable'
+import dtDescriptor from './OlapDrillThroughDialogDescriptor.json'
+import Menu from 'primevue/contextmenu'
+import Checkbox from 'primevue/checkbox'
+import Dropdown from 'primevue/dropdown'
 
-    export default defineComponent({
-        components: { Column, DataTable, Menu, Checkbox, Dropdown },
-        props: { drillData: { type: Array, required: true }, tableColumns: { type: Array, required: true }, dtLevels: { type: Array, required: true }, menuTree: { type: Array, required: true }, dtMaxRows: { type: Number, required: true } },
-        emits: ['close', 'applyCustomView', 'checkCheckboxes', 'clearLevels', 'drill', 'rowsChanged'],
-        data() {
-            return {
-                dtDescriptor,
-                dtData: [] as any,
-                formattedColumns: [] as any,
-                dtAssociatedLevels: [] as any,
-                dtTree: [] as any,
-                menuButtons: [] as any,
-                filters: { global: [filterDefault] } as Object,
-                maxRowsOptions: [0, 10, 25, 50, 100, 250, 500, 1000],
-                maxRows: 0
-            }
+export default defineComponent({
+    components: { Column, DataTable, Menu, Checkbox, Dropdown },
+    props: { drillData: { type: Array, required: true }, tableColumns: { type: Array, required: true }, dtLevels: { type: Array, required: true }, menuTree: { type: Array, required: true }, dtMaxRows: { type: Number, required: true } },
+    emits: ['close', 'applyCustomView', 'checkCheckboxes', 'clearLevels', 'drill', 'rowsChanged'],
+    data() {
+        return {
+            dtDescriptor,
+            dtData: [] as any,
+            formattedColumns: [] as any,
+            dtAssociatedLevels: [] as any,
+            dtTree: [] as any,
+            menuButtons: [] as any,
+            filters: { global: [filterDefault] } as Object,
+            maxRowsOptions: [0, 10, 25, 50, 100, 250, 500, 1000],
+            maxRows: 0
+        }
+    },
+    watch: {
+        drillData() {
+            this.dtData = this.drillData
+            this.maxRows = this.dtMaxRows
         },
-        watch: {
-            drillData() {
-                this.dtData = this.drillData
-                this.maxRows = this.dtMaxRows
-            },
-            tableColumns() {
-                this.formattedColumns = this.tableColumns
-            },
-            dtLevels() {
-                this.dtAssociatedLevels = this.dtLevels
-            },
-            menuTree() {
-                this.dtTree = this.menuTree
-            }
+        tableColumns() {
+            this.formattedColumns = this.tableColumns
         },
-        created() {
-            this.loadData()
+        dtLevels() {
+            this.dtAssociatedLevels = this.dtLevels
         },
-        methods: {
-            loadData() {
-                this.dtData = this.drillData
-                this.formattedColumns = this.tableColumns
-                this.dtAssociatedLevels = this.dtLevels
-                this.dtTree = this.menuTree
-            },
-            closeDialog() {
-                this.$emit('close')
-            },
-            showMenu(event, parent) {
-                this.createMenuItems(parent.children)
-                // eslint-disable-next-line
-                // @ts-ignore
-                this.$refs.optionsMenu.toggle(event)
-            },
-            createMenuItems(items) {
-                this.menuButtons = []
-                items.forEach((item) => {
-                    this.menuButtons.push(item)
-                })
-            },
-            clearLevels() {
-                this.$emit('clearLevels')
-                this.dtTree.forEach((parent) => {
-                    parent.children.forEach((child) => {
-                        child.checked = false
-                    })
+        menuTree() {
+            this.dtTree = this.menuTree
+        }
+    },
+    created() {
+        this.loadData()
+    },
+    methods: {
+        loadData() {
+            this.dtData = this.drillData
+            this.formattedColumns = this.tableColumns
+            this.dtAssociatedLevels = this.dtLevels
+            this.dtTree = this.menuTree
+        },
+        closeDialog() {
+            this.$emit('close')
+        },
+        showMenu(event, parent) {
+            this.createMenuItems(parent.children)
+            // eslint-disable-next-line
+            // @ts-ignore
+            this.$refs.optionsMenu.toggle(event)
+        },
+        createMenuItems(items) {
+            this.menuButtons = []
+            items.forEach((item) => {
+                this.menuButtons.push(item)
+            })
+        },
+        clearLevels() {
+            this.$emit('clearLevels')
+            this.dtTree.forEach((parent) => {
+                parent.children.forEach((child) => {
+                    child.checked = false
                 })
-            },
-            exportDrill(JSONData, ReportTitle, ShowLabel) {
-                var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData
-                var CSV = ''
-                CSV += ReportTitle + '\r\n\n'
-                if (ShowLabel) {
-                    var row = ''
-                    for (var index in arrData[0]) {
-                        row += index + ','
-                    }
-                    row = row.slice(0, -1)
-                    CSV += row + '\r\n'
-                }
-                for (var i = 0; i < arrData.length; i++) {
-                    row = ''
-                    for (index in arrData[i]) {
-                        row += '"' + arrData[i][index] + '",'
-                    }
-                    row.slice(0, row.length - 1)
-                    CSV += row + '\r\n'
+            })
+        },
+        exportDrill(JSONData, ReportTitle, ShowLabel) {
+            var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData
+            var CSV = ''
+            CSV += ReportTitle + '\r\n\n'
+            if (ShowLabel) {
+                var row = ''
+                for (var index in arrData[0]) {
+                    row += index + ','
                 }
-                if (CSV == '') {
-                    this.$store.commit('setError', { title: this.$t('common.toast.error'), msg: this.$t('documentExecution.olap.drillTru.invalidData') })
-                    return
+                row = row.slice(0, -1)
+                CSV += row + '\r\n'
+            }
+            for (var i = 0; i < arrData.length; i++) {
+                row = ''
+                for (index in arrData[i]) {
+                    row += '"' + arrData[i][index] + '",'
                 }
-                var fileName = 'MyReport_'
-                fileName += ReportTitle.replace(/ /g, '_')
-                var uri = 'data:text/csv;charset=utf-8,' + escape(CSV)
-                var link = document.createElement('a') as any
-                link.href = uri
-                link.style = 'visibility:hidden'
-                link.download = fileName + '.csv'
-                document.body.appendChild(link)
-                link.click()
-                document.body.removeChild(link)
+                row.slice(0, row.length - 1)
+                CSV += row + '\r\n'
+            }
+            if (CSV == '') {
+                this.$store.commit('setError', { title: this.$t('common.toast.error'), msg: this.$t('documentExecution.olap.drillTru.invalidData') })
+                return
             }
+            var fileName = 'MyReport_'
+            fileName += ReportTitle.replace(/ /g, '_')
+            var uri = 'data:text/csv;charset=utf-8,' + escape(CSV)
+            var link = document.createElement('a') as any
+            link.href = uri
+            link.style = 'visibility:hidden'
+            link.download = fileName + '.csv'
+            document.body.appendChild(link)
+            link.click()
+            document.body.removeChild(link)
         }
-    })
+    }
+})
 </script>
+<style lang="scss">
+.olap-drill-through-table {
+    overflow: auto;
+    .p-datatable-wrapper,
+    .p-datatable-table {
+        overflow: auto;
+    }
+}
+</style>