From 3365a6102d3a2433fd1b01a4fcceb1f908e2dedc Mon Sep 17 00:00:00 2001 From: CrisTofani Date: Thu, 14 Feb 2019 16:51:57 +0100 Subject: [PATCH 1/2] Minor improvements on new dashboards --- src/actions.js | 11 +++++++++++ src/components/Widgets/QueryBuild.js | 5 ++++- src/helpers/TrasformForm.js | 2 +- src/reducers.js | 3 +++ src/views/Dashboards/Dashboard.js | 17 +++++++++++++++-- src/views/DatasetDetail/DatasetDetail.js | 5 ++++- .../UserStory/components/editor/TextEditor.js | 2 +- 7 files changed, 39 insertions(+), 6 deletions(-) diff --git a/src/actions.js b/src/actions.js index f625b29c..6784ab11 100644 --- a/src/actions.js +++ b/src/actions.js @@ -38,6 +38,7 @@ export const REQUEST_NOTIFICATIONS = 'REQUEST_NOTIFICATIONS' export const RECEIVE_NOTIFICATIONS = 'RECEIVE_NOTIFICATIONS' export const REQUEST_NEW_NOTIFICATIONS = 'REQUEST_NEW_NOTIFICATIONS' export const RECEIVE_NEW_NOTIFICATIONS = 'RECEIVE_NEW_NOTIFICATIONS' +export const RESET_QUERY_RESULT = 'RESET_QUERY_RESULT' export const REQUEST_QUERY_RESULT = 'REQUEST_QUERY_RESULT' export const RECEIVE_QUERY_RESULT = 'RECEIVE_QUERY_RESULT' @@ -1769,6 +1770,16 @@ function fetchDatasetDetail(datasetname, query, isPublic) { /* Actions for Query Reducer */ + export function resetQueryResult(){ + return{ + type: RESET_QUERY_RESULT, + result: [], + receivedAt: Date.now(), + ope: 'REQUEST_QUERY_RESULT' + + } + } + export function receiveQueryResult(json, query){ console.log('receiveQueryResult'); return { diff --git a/src/components/Widgets/QueryBuild.js b/src/components/Widgets/QueryBuild.js index 1a4bda74..d56bdbd8 100644 --- a/src/components/Widgets/QueryBuild.js +++ b/src/components/Widgets/QueryBuild.js @@ -9,7 +9,7 @@ import { ModalFooter } from 'react-modal-bootstrap'; import { toastr } from 'react-redux-toastr' -import { querySearch, search, launchQueryOnStorage, getDatasetCatalog, receiveQueryResult, translateQueryToSQL } from '../../actions' +import { querySearch, search, launchQueryOnStorage, getDatasetCatalog, receiveQueryResult, translateQueryToSQL, resetQueryResult } from '../../actions' import { rulesConverter, jsonToCSV } from '../../utility' import ReactTable from "react-table" import Select from 'react-select' @@ -49,6 +49,9 @@ class QueryBuild extends Component { datasetFrom: undefined, datasetJoin: undefined } + + props.dispatch(resetQueryResult()) + this.onChangeOrg = this.onChangeOrg.bind(this) this.onChangePvt = this.onChangePvt.bind(this) this.getDatasetDetail = this.getDatasetDetail.bind(this) diff --git a/src/helpers/TrasformForm.js b/src/helpers/TrasformForm.js index 91223dfc..42278953 100644 --- a/src/helpers/TrasformForm.js +++ b/src/helpers/TrasformForm.js @@ -198,7 +198,7 @@ export function createDataschema (values, data) { }, //INFORMAZIONI OPERAZIONALI "key": item.chiave, - "required": item.obbligatorio, + "required": item.obbligatorio?1:0, "is_createdate": item.datacreazione, "is_updatedate": item.dataaggiornamento, "field_profile": { diff --git a/src/reducers.js b/src/reducers.js index 65f00182..e47e5df5 100644 --- a/src/reducers.js +++ b/src/reducers.js @@ -31,6 +31,7 @@ import { REQUEST_SEARCH, RECEIVE_SEARCH, RECEIVE_METADATA, + RESET_QUERY_RESULT, REQUEST_QUERY_RESULT, RECEIVE_QUERY_RESULT } from './actions' @@ -246,6 +247,8 @@ function userReducer(state = {}, action) { function queryReducer(state = {}, action){ switch(action.type) { + case RESET_QUERY_RESULT: + return Object.assign({}, state, {'query':{ 'queryLoading': false, 'queryResult': action.result, 'query': undefined }}) case REQUEST_QUERY_RESULT: return Object.assign({}, state, {'query': { 'queryLoading': action.queryLoading, 'queryResult': action.result, 'query': action.query }}) case RECEIVE_QUERY_RESULT: diff --git a/src/views/Dashboards/Dashboard.js b/src/views/Dashboards/Dashboard.js index 71d34fa0..9eb0cf0c 100644 --- a/src/views/Dashboards/Dashboard.js +++ b/src/views/Dashboards/Dashboard.js @@ -5,6 +5,8 @@ import { toastr } from 'react-redux-toastr' import { Responsive, WidthProvider } from 'react-grid-layout'; import IframeWidget from '../DashboardManager/components/widgets/IframeWidget' import TextWidget from '../DashboardManager/components/widgets/TextWidget' +import TextEditor from '../UserStory/components/editor/TextEditor' +import SectionTitle from '../UserStory/components/SectionTitle' import App from './InfinityScrollWidgets/App' import { loadIframes } from '../../actions' @@ -81,13 +83,13 @@ class Dashboard extends Component{ tmparr.push(tmpwidget) for ( var i in tmpjson){ - tmpjson[i].push({"w":5,"h":5,"x":0,"y":Infinity,"i":tmpwidget.identifier,"minW":4, "minH":2,"moved":false,"static":false}) + tmpjson[i].push({"w":1,"h":1,"x":0,"y":Infinity,"i":tmpwidget.identifier,"moved":false,"static":false}) } widget.identifier="textwidget" }else{ tmparr.push(widget) for ( var i in tmpjson){ - tmpjson[i].push({"w":5,"h":5,"x":0,"y":Infinity,"i":widget.identifier,"minW":4, "minH":2,"moved":false,"static":false}) + tmpjson[i].push({"w":1,"h":1,"x":0,"y":Infinity,"i":widget.identifier,"moved":false,"static":false}) } } @@ -142,6 +144,17 @@ class Dashboard extends Component{ onWidgetSelect={this.newBox} />
+ + console.log("Change")} + placeholder="Title" + disableHtml={true}> + + { const result = response.json() result.then(json => { - this.setState({ previewState: 1, jsonPreview: json }) + if(json.length > 0) + this.setState({ previewState: 1, jsonPreview: json }) + else + this.setState({previewState: 2, jsonPreview: json }) }) }) .catch(error => { console.error(error); this.setState({ previewState: 2 }) }) diff --git a/src/views/UserStory/components/editor/TextEditor.js b/src/views/UserStory/components/editor/TextEditor.js index aa81087b..17f7f719 100644 --- a/src/views/UserStory/components/editor/TextEditor.js +++ b/src/views/UserStory/components/editor/TextEditor.js @@ -36,7 +36,7 @@ class TextEditor extends Component { */ render() { return ( -
+
{ this.props.readonly!=true && From 3c7cf59c32c65801f7163ddb3b5e4de013452623 Mon Sep 17 00:00:00 2001 From: CrisTofani Date: Wed, 20 Feb 2019 15:55:34 +0100 Subject: [PATCH 2/2] New Dashboards editor: react-grid-layout --- .../components/widgets/TextWidget.js | 12 +- src/views/Dashboards/Dashboard.js | 130 +++++++++++++----- .../UserStory/components/editor/TextEditor.js | 2 +- 3 files changed, 109 insertions(+), 35 deletions(-) diff --git a/src/views/DashboardManager/components/widgets/TextWidget.js b/src/views/DashboardManager/components/widgets/TextWidget.js index c31417c1..09da1762 100644 --- a/src/views/DashboardManager/components/widgets/TextWidget.js +++ b/src/views/DashboardManager/components/widgets/TextWidget.js @@ -20,10 +20,16 @@ class TextWidget extends Component { this.state = { text: props.text }; - + this.save = this.save.bind(this) + this.close = this.close.bind(this) + this.onEditorStateChange = this.onEditorStateChange.bind(this) } onEditorStateChange = (text) => { + const { identifier, onChange } = this.props + + onChange(identifier) + this.setState({ text: text }); @@ -39,7 +45,7 @@ class TextWidget extends Component { text: this.state.text }) - this.props.onSave(this.props.wid_key, this.state.text); + this.props.onSave(this.props.identifier, this.state.text); } edit() { @@ -59,7 +65,7 @@ class TextWidget extends Component { render() { const { editorState } = this.state; return ( -
+
{!this.state.edit &&
diff --git a/src/views/Dashboards/Dashboard.js b/src/views/Dashboards/Dashboard.js index 9eb0cf0c..5b42f980 100644 --- a/src/views/Dashboards/Dashboard.js +++ b/src/views/Dashboards/Dashboard.js @@ -1,5 +1,4 @@ import React, { Component } from 'react'; -//import GridLayout from 'react-grid-layout' import { connect } from 'react-redux' import { toastr } from 'react-redux-toastr' import { Responsive, WidthProvider } from 'react-grid-layout'; @@ -12,25 +11,46 @@ import { loadIframes } from '../../actions' const ResponsiveGridLayout = WidthProvider(Responsive); +function getLayoutHeight(height){ + return Math.floor(((height + 30)/30) + 1) +} + class Dashboard extends Component{ constructor(props){ super(props) this.state = { + title: '', + readOnly: false, widgets: [], isOpen: false, keys: [], - layouts: {"lg":[], "md":[], "sm":[], "xs":[], "xxs":[]} + layouts: [] } this.onLayoutChange = this.onLayoutChange.bind(this) + this.onBreakpointChange = this.onBreakpointChange.bind(this) this.newBox = this.newBox.bind(this) this.removeBox = this.removeBox.bind(this) this.onRequestClose = this.onRequestClose.bind(this) + this.handleChangeTitle = this.handleChangeTitle.bind(this) + this.handleChangeText = this.handleChangeText.bind(this) + this.handleChangeHeight = this.handleChangeHeight.bind(this) } onLayoutChange(layouts){ + console.log(this.state.layouts) console.log(layouts) - this.setState({ layouts }) + + this.setState({ layouts: layouts }) + } + + onBreakpointChange(breakpoint, cols) { + console.log(breakpoint) + console.log(cols) + this.setState({ + breakpoints: breakpoint, + cols: cols + }); } componentDidMount(){ @@ -82,15 +102,15 @@ class Dashboard extends Component{ } tmparr.push(tmpwidget) - for ( var i in tmpjson){ - tmpjson[i].push({"w":1,"h":1,"x":0,"y":Infinity,"i":tmpwidget.identifier,"moved":false,"static":false}) - } + // for ( var i in tmpjson){ + tmpjson.push({"w":1,"h":1,"x":0,"y":Infinity,"i":tmpwidget.identifier,"moved":false,"static":false}) + // } widget.identifier="textwidget" }else{ tmparr.push(widget) - for ( var i in tmpjson){ - tmpjson[i].push({"w":1,"h":1,"x":0,"y":Infinity,"i":widget.identifier,"moved":false,"static":false}) - } + // for ( var i in tmpjson){ + tmpjson.push({"w":1,"h":1,"x":0,"y":Infinity,"i":widget.identifier,"moved":false,"static":false}) + // } } this.setState({ @@ -100,8 +120,51 @@ class Dashboard extends Component{ }) }else{ toastr.error("Errore", "Il widget selezionato è già presente nella dashboard") + } + } + + handleChangeTitle(text){ + this.setState({ + title: text + }) + } + + handleChangeText(key, value){ + const { keys } = this.state + + var tmpW = keys.map(elem => { + if(elem.identifier===key) + elem.text=value + + return elem + }) + + this.setState({ + keys: tmpW + }) + } + + handleChangeHeight(key){ + const { layouts } = this.state + + var tmp = document.getElementById(key) + + var h = getLayoutHeight(tmp.offsetHeight) + + var tempL = {"lg":[], "md":[], "sm":[], "xs":[], "xxs":[]} + + for (var i in layouts){ + + tempL[i] = layouts[i].map(e=>{ + e.i===key ? e.h = h : null + return e + }) + } + this.setState({ + layouts: tempL + }) } @@ -114,11 +177,11 @@ class Dashboard extends Component{ return widget.identifier !== id }) - for ( var i in tmpjson){ - tmpjson[i] = tmpjson[i].filter(elem => { + + tmpjson = tmpjson.filter(elem => { return elem.i!==id }) - } + this.setState({ keys: resArr, @@ -144,40 +207,45 @@ class Dashboard extends Component{ onWidgetSelect={this.newBox} />
- + + console.log("Change")} + onChange={this.handleChangeTitle} placeholder="Title" disableHtml={true}> - + { - this.onLayoutChange(layouts) - }} + className="layout" + isDraggable={!this.state.readOnly} + isResizable={!this.state.readOnly} + // layouts={layouts} + rowHeight={100} + cols={{ lg: 12, md: 10 }} + breakpoints={{lg: 1200, md: 960}} + // cols={this.state.cols} + // breakpoints={this.state.breakpoints} + onLayoutChange={this.onLayoutChange} + onBreakpointChange={this.onBreakpointChange} draggableHandle=".dragMe" > - {this.state.keys.map((widget)=>{ + {this.state.layouts.map((widget)=>{ return( -
-
+
+ {!this.state.readOnly &&
-
- {widget.viz_type!=="textwidget"&&} - {widget.viz_type==="textwidget"&&} +
} + {/* widget.viz_type!=="textwidget"&&} + {widget.viz_type==="textwidget"&&} */}
) })} - + {!this.state.readOnly && }
) diff --git a/src/views/UserStory/components/editor/TextEditor.js b/src/views/UserStory/components/editor/TextEditor.js index 17f7f719..207c0bc6 100644 --- a/src/views/UserStory/components/editor/TextEditor.js +++ b/src/views/UserStory/components/editor/TextEditor.js @@ -28,7 +28,7 @@ class TextEditor extends Component { value = $('' + value + '').text(); this.setState({text: value}); - this.props.onChange(this.props.keyValue, value) + this.props.onChange(value) }; /**