From f8f4c3363e4fb8d17e491120b9bdd12e7b53be0d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AE=8B=E8=BE=B0=E8=BD=A9?= <songchenxuan@easycorp.ltd>
Date: Wed, 12 Apr 2023 16:21:52 +0800
Subject: [PATCH] * Add inside and outside query button.

---
 module/chart/css/preview.css       |  2 +-
 module/chart/js/preview.js         | 20 ++++++++++++++------
 module/chart/view/preview.html.php |  8 +++++---
 3 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/module/chart/css/preview.css b/module/chart/css/preview.css
index bcb34a8496..6d0a146010 100644
--- a/module/chart/css/preview.css
+++ b/module/chart/css/preview.css
@@ -48,6 +48,6 @@
 .filter-items{display: flex; flex: 1; flex-wrap: wrap;}
 .filter-item{padding: 0 16px 5px 0;}
 .filter-item-grow{flex-grow: 1;}
-.queryBtn{display: flex; align-items: center; padding-bottom: 5px;}
+.queryBtn{display: flex; align-items: center; padding-bottom: 5px; flex-basis: 60px;}
 
 .filterBox .picker-selections{width: 128px; height: 32px; overflow: hidden; text-overflow: clip; white-space: nowrap;}
diff --git a/module/chart/js/preview.js b/module/chart/js/preview.js
index d9560637cb..c4f4682008 100644
--- a/module/chart/js/preview.js
+++ b/module/chart/js/preview.js
@@ -9,7 +9,7 @@ $(function()
     {
         var chartPros = charts.map(function(chart)
         {
-            var echartDom = $('#chartDraw' + chart.currentGroup + chart.id).get(0);
+            var echartDom = $('#chartDraw' + chart.currentGroup + '_' + chart.id).get(0);
             var echart = echarts.init(echartDom);
             ajaxGetChart(false, chart, echart);
             chartMap.set(chart.cudrrentGroup + chart.id, chart);
@@ -18,14 +18,12 @@ $(function()
 
         Promise.all(chartPros).then(function()
         {
-            console.log(11);
             calcPreviewGrowFilter();
             $('body').resize(() => {calcPreviewGrowFilter(true);});
         });
 
     }
 
-
     $('[data-toggle="tooltip"]').tooltip();
 })
 
@@ -132,12 +130,13 @@ function calcPreviewGrowFilter(resize = false)
         /* When body resize, resize echarts. */
         if(resize)
         {
-            var echartDom = $('#chartDraw' + chart.currentGroup + chart.id).get(0);
+            var echartDom = $('#chartDraw' + chart.currentGroup + '_' + chart.id).get(0);
             var echart = echarts.init(echartDom);
             echart.resize();
         }
 
-        var $filterItems = $('#filterItems' + chart.currentGroup + chart.id + ' .filter-items');
+        var $filterBox   = $('#filterItems' + chart.currentGroup + '_' + chart.id);
+        var $filterItems = $filterBox.find('.filter-items');
         /* When refreshing this page, ZenTao load this page twice, when the first load isn't complete, jump back to index and load the second time,
            the first load can't calc filter width, can't get the element using jQuery at first load. */
         var hasInit = true;
@@ -151,8 +150,12 @@ function calcPreviewGrowFilter(resize = false)
 
         var domWidth     = $filterItems[0].getBoundingClientRect().width;
         var nowWidth     = domWidth;
+        var lineWrap     = false;
         var nowCount     = 0;
         var canGrowTotal = 0;
+
+        $filterBox.find('.query-inside').addClass('hidden');
+        $filterBox.find('.query-outside').addClass('hidden');
         chart.filters.forEach(function(filter, index)
         {
             var nowItem      = '.filter-item-' + index;
@@ -174,6 +177,7 @@ function calcPreviewGrowFilter(resize = false)
                 canGrowTotal += nowCount;
                 nowWidth = domWidth - filterWidth;
                 nowCount = 1;
+                lineWrap = true;
             }
         });
 
@@ -184,6 +188,9 @@ function calcPreviewGrowFilter(resize = false)
             var nowItem = '.filter-item-' + index;
             if(canGrowTotal >= index + 1) $filterItems.find(nowItem).addClass('filter-item-grow');
         });
+
+        var queryType =(!lineWrap && nowWidth >= 60) ? '.query-inside' : '.query-outside';
+        $filterBox.find(queryType).removeClass('hidden');
     });
 }
 
@@ -202,11 +209,12 @@ function renderFilters(chart)
         $.post(createLink('chart', 'ajaxGetFilterForm', 'chartID=' + chart.id), {fieldList: fieldNames, fieldSettings: chart.fieldSettings, filters: chart.filters, langs: chart.langs}, function(resp)
         {
             resp = JSON.parse(resp);
+            var $filterItems = $('#filterItems' + chart.currentGroup + '_' + chart.id + ' .filter-items');
             chart.filters.forEach(function(filter, index)
             {
-                var $filterItems = $('#filterItems' + chart.currentGroup + chart.id + ' .filter-items');
                 $filterItems.append(renderFilterItem(filter, resp, index));
             });
+            $filterItems.append(queryDom);
             resolve();
         });
     })
diff --git a/module/chart/view/preview.html.php b/module/chart/view/preview.html.php
index e1fc3d1fb1..758931353d 100644
--- a/module/chart/view/preview.html.php
+++ b/module/chart/view/preview.html.php
@@ -20,6 +20,8 @@
 <?php js::set('WIDTH_INPUT',  $config->chart->widthInput);?>
 <?php js::set('WIDTH_DATE',   $config->chart->widthDate);?>
 <?php js::set('pickerHeight', $config->bi->pickerHeight);?>
+<?php $queryDom = "<div class='queryBtn query-inside hidden'> <button type='submit' id='submit' class='btn btn-primary btn-query' data-loading='Loading...'>{$lang->chart->query}</button></div>";?>
+<?php js::set('queryDom', $queryDom);?>
 
 <div id='mainMenu' class='clearfix main-position'>
   <div class='btn-toolBar pull-left parent-position'>
@@ -92,13 +94,13 @@
           </div>
         </div>
         <div class='panel-body'>
-          <div id="filterItems<?php echo $chart->currentGroup;?><?php echo $chart->id;?>" class='filterBox'>
+          <div id="filterItems<?php echo $chart->currentGroup . '_';?><?php echo $chart->id;?>" class='filterBox'>
             <div class='filter-items'></div>
             <?php if(!empty($chart->filters)):?>
-            <div class='queryBtn'><?php echo html::submitButton($lang->chart->query, "data-chart={$chart->currentGroup}{$chart->id}", 'btn btn-primary btn-query');?></div>
+            <div class='queryBtn query-outside'><?php echo html::submitButton($lang->chart->query, "data-chart={$chart->currentGroup}{$chart->id}", 'btn btn-primary btn-query');?></div>
             <?php endif;?>
           </div>
-          <div id="chartDraw<?php echo $chart->currentGroup;?><?php echo $chart->id;?>" data-group="<?php echo $chart->currentGroup;?>" data-id="<?php echo $chart->id;?>" class='echart-content'></div>
+          <div id="chartDraw<?php echo $chart->currentGroup . '_';?><?php echo $chart->id;?>" data-group="<?php echo $chart->currentGroup;?>" data-id="<?php echo $chart->id;?>" class='echart-content'></div>
         </div>
       </div>
       <?php endforeach;?>