From 0713aedaed9ca753a7824a06af3176748952f016 Mon Sep 17 00:00:00 2001
From: devezhao <zhaofang123@gmail.com>
Date: Fri, 2 Apr 2021 02:03:13 +0800
Subject: [PATCH] fix chart select

---
 .../resources/web/assets/js/charts/charts.js  | 24 ++++++-------
 .../web/assets/js/charts/dashboard.js         | 35 +++++++++++--------
 .../resources/web/assets/js/rb-datalist.js    |  2 +-
 3 files changed, 33 insertions(+), 28 deletions(-)

diff --git a/src/main/resources/web/assets/js/charts/charts.js b/src/main/resources/web/assets/js/charts/charts.js
index a2d2a0679..e93b19ea7 100644
--- a/src/main/resources/web/assets/js/charts/charts.js
+++ b/src/main/resources/web/assets/js/charts/charts.js
@@ -23,20 +23,18 @@ class BaseChart extends React.Component {
         <a title={$L('Refresh')} onClick={() => this.loadChartData()}>
           <i className="zmdi zmdi-refresh" />
         </a>
-        <a className="J_fullscreen" title={$L('FullScreen')} onClick={() => this.toggleFullscreen()}>
+        <a className="J_fullscreen d-none d-md-inline-block" title={$L('FullScreen')} onClick={() => this.toggleFullscreen()}>
           <i className={`zmdi zmdi-${this.state.fullscreen ? 'fullscreen-exit' : 'fullscreen'}`} />
         </a>
+        {this.props.isManageable && !this.props.builtin && (
+          <a className="J_chart-edit d-none d-md-inline-block" title={$L('Edit')} href={`${rb.baseUrl}/dashboard/chart-design?id=${this.props.id}`}>
+            <i className="zmdi zmdi-edit" />
+          </a>
+        )}
         {this.props.editable && (
-          <React.Fragment>
-            {!this.props.builtin && (
-              <a className="J_chart-edit" title={$L('Edit')} href={`${rb.baseUrl}/dashboard/chart-design?id=${this.props.id}`}>
-                <i className="zmdi zmdi-edit" />
-              </a>
-            )}
-            <a title={$L('Remove')} onClick={() => this.remove()}>
-              <i className="zmdi zmdi-close" />
-            </a>
-          </React.Fragment>
+          <a title={$L('Remove')} onClick={() => this.remove()}>
+            <i className="zmdi zmdi-close" />
+          </a>
         )}
       </div>
     )
@@ -1021,7 +1019,9 @@ class ChartScatter extends BaseChart {
 // 确定图表类型
 // eslint-disable-next-line no-unused-vars
 const detectChart = function (cfg, id) {
-  const props = { config: cfg, id: id, title: cfg.title, editable: cfg.isManageable, type: cfg.type }
+  // isManageable = 图表可编辑
+  // editable = 仪表盘可编辑
+  const props = { config: cfg, id: id, title: cfg.title, type: cfg.type, isManageable: cfg.isManageable, editable: cfg.editable }
   if (cfg.type === 'INDEX') {
     return <ChartIndex {...props} />
   } else if (cfg.type === 'TABLE') {
diff --git a/src/main/resources/web/assets/js/charts/dashboard.js b/src/main/resources/web/assets/js/charts/dashboard.js
index 274ca125e..b3b8bb9e1 100644
--- a/src/main/resources/web/assets/js/charts/dashboard.js
+++ b/src/main/resources/web/assets/js/charts/dashboard.js
@@ -99,7 +99,7 @@ $(document).ready(function () {
 
     let dlgChartSelect
     $('.J_chart-select').click(() => {
-      let appended = []
+      const appended = []
       $('.grid-stack-item-content').each(function () {
         appended.push($(this).attr('id').substr(6))
       })
@@ -110,12 +110,12 @@ $(document).ready(function () {
         return
       }
 
-      const select = function (chart) {
+      const _select = function (chart) {
         chart.w = chart.h = 4
         add_widget(chart)
       }
       // eslint-disable-next-line react/jsx-no-undef
-      renderRbcomp(<ChartSelect key="ChartSelect" select={select} />, null, function () {
+      renderRbcomp(<ChartSelect key="ChartSelect" select={_select} />, null, function () {
         dlgChartSelect = this
         this.setState({ appended: appended })
       })
@@ -157,25 +157,29 @@ const dlgRefs = {}
 const dlgShow = (t, props) => {
   props = props || {}
   props.dashid = props.dashid || dashid
-  if (dlgRefs[t]) dlgRefs[t].show()
-  else if (t === 'DlgAddChart') {
-    if (dash_editable)
+  if (dlgRefs[t]) {
+    dlgRefs[t].show()
+  } else if (t === 'DlgAddChart') {
+    if (dash_editable) {
       renderRbcomp(<DlgAddChart {...props} />, null, function () {
         dlgRefs[t] = this
       })
-    else RbHighbar.create($L('NoPrivilegesAddChartToDashTips'))
-  } else if (t === 'DlgDashAdd')
+    } else {
+      RbHighbar.create($L('NoPrivilegesAddChartToDashTips'))
+    }
+  } else if (t === 'DlgDashAdd') {
     renderRbcomp(<DlgDashAdd {...props} />, null, function () {
       dlgRefs[t] = this
     })
-  else if (t === 'DlgDashSettings')
+  } else if (t === 'DlgDashSettings') {
     renderRbcomp(<DlgDashSettings {...props} />, null, function () {
       dlgRefs[t] = this
     })
-  else if (t === 'DashSelect')
+  } else if (t === 'DashSelect') {
     renderRbcomp(<DashSelect {...props} />, null, function () {
       dlgRefs[t] = this
     })
+  }
 }
 
 let gridstack
@@ -241,6 +245,8 @@ const add_widget = function (item) {
   } else {
     gridstack.addWidget(gsi, item.x, item.y, item.w, item.h, item.x === undefined, 2, 12, 2, 12)
   }
+
+  item.editable = dash_editable
   // eslint-disable-next-line no-undef
   renderRbcomp(detectChart(item, item.chart), chid, function () {
     rendered_charts.push(this)
@@ -267,8 +273,7 @@ const save_dashboard = function () {
   $setTimeout(
     () => {
       $.post('/dashboard/dash-config?id=' + dashid, JSON.stringify(gridstack_serialize), () => {
-        // eslint-disable-next-line no-console
-        if (rb.env === 'dev') console.log('Saved dashboard: ' + JSON.stringify(gridstack_serialize))
+        if (rb.env === 'dev') console.log('Saved dashboard : ' + JSON.stringify(gridstack_serialize))
       })
     },
     500,
@@ -305,12 +310,12 @@ class DlgAddChart extends RbFormHandler {
   }
 
   componentDidMount() {
-    const entity_el = $(this.refs['entity'])
+    const $entity = $(this.refs['entity'])
     $.get('/commons/metadata/entities?detail=true', (res) => {
       $(res.data).each(function () {
-        $('<option value="' + this.name + '">' + this.label + '</option>').appendTo(entity_el)
+        $('<option value="' + this.name + '">' + this.label + '</option>').appendTo($entity)
       })
-      this.__select2 = entity_el.select2({
+      this.__select2 = $entity.select2({
         allowClear: false,
         placeholder: $L('SelectSome,DataSource'),
       })
diff --git a/src/main/resources/web/assets/js/rb-datalist.js b/src/main/resources/web/assets/js/rb-datalist.js
index 8e2752f95..71c3acc78 100644
--- a/src/main/resources/web/assets/js/rb-datalist.js
+++ b/src/main/resources/web/assets/js/rb-datalist.js
@@ -1249,7 +1249,7 @@ const ChartsWidget = {
   renderChart: function (chart, append) {
     const $w = $(`<div id="chart-${chart.chart}"></div>`).appendTo('.charts-wrap')
     // eslint-disable-next-line no-undef
-    renderRbcomp(detectChart({ ...chart, isManageable: true }, chart.chart), $w, function () {
+    renderRbcomp(detectChart({ ...chart, editable: true }, chart.chart), $w, function () {
       if (append) ChartsWidget.saveWidget()
     })
   },