Skip to content
This repository has been archived by the owner on Dec 13, 2020. It is now read-only.

Commit

Permalink
#905 Dashboard edit mode (wip) - adding/removing
Browse files Browse the repository at this point in the history
  • Loading branch information
@damianprzygodzki
damianprzygodzki committed Jun 23, 2017
1 parent 271f959 commit 6be7d66
Show file tree
Hide file tree
Showing 10 changed files with 87 additions and 40 deletions.
6 changes: 5 additions & 1 deletion src/actions/BoardActions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,8 +34,12 @@ export function filterCards(boardId, viewId) {
export function addDashboardWidget(entity, id) {
return axios.post(
config.API_URL +
'/dashboard/targetIndicators/new', {
'/dashboard/' + entity + '/new', {
'kpiId': id
}
);
}

export function removeDashboardWidget(entity, id) {
return axios.delete(config.API_URL + '/dashboard/' + entity + '/' + id);
}
2 changes: 2 additions & 0 deletions src/assets/css/draggable.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,8 @@
height: 34px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
padding-right: 2rem;
}

.draggable-widget-body {
Expand Down
1 change: 1 addition & 0 deletions src/assets/css/indicator.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
.indicators-wrapper {
display: flex;
flex-direction: row;
flex-wrap:wrap;
}

.indicators-wrapper > * {
Expand Down
1 change: 1 addition & 0 deletions src/assets/css/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -902,6 +902,7 @@ td.pulse-off input {
}

.dashboard-logo-wrapper {
margin-top: 5rem;
justify-content: center;
}

Expand Down
7 changes: 4 additions & 3 deletions src/components/charts/Indicator.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,15 @@ class Indicator extends Component {
const {value, caption, loader, fullWidth, editmode} = this.props;

if(loader) return <div className="indicator"><Loader /></div>;

return (
<div
className={
'indicator ' +
'indicator js-indicator' +
(editmode ? 'indicator-draggable ' : '')
}
style={fullWidth ? {width: '100%'} : {}}>
style={fullWidth ? {width: '100%'} : {}}
>
<div className="indicator-value">{value}</div>
<div className="indicator-kpi-caption">{caption}</div>
</div>
Expand Down
11 changes: 7 additions & 4 deletions src/components/charts/RawChart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ class RawChart extends Component {
prevProps.id !== this.props.id
) {
if(this.props.chartType === 'Indicator'){
if(this.props.noData) return;
this.fetchData();
}else{
this.setState({
Expand All @@ -43,7 +44,9 @@ class RawChart extends Component {
}

componentDidMount(){
const { pollInterval } = this.props;
const { pollInterval, noData } = this.props;

if(noData) return;

this.fetchData();

Expand Down Expand Up @@ -106,7 +109,7 @@ class RawChart extends Component {
renderChart() {
const {
id, chartType, caption, fields, groupBy, height,
isMaximize, chartTitle, editmode
isMaximize, chartTitle, editmode, noData
} = this.props;
const {chartData, forceChartReRender} = this.state;
const data = chartData[0] && chartData[0].values;
Expand Down Expand Up @@ -146,8 +149,8 @@ class RawChart extends Component {
case 'Indicator':
return(
<Indicator
value={data[0][fields[0].fieldName] +
(fields[0].unit ? ' ' + fields[0].unit : '')}
value={noData ? '' : (data[0][fields[0].fieldName] +
(fields[0].unit ? ' ' + fields[0].unit : ''))}
{...{caption, editmode}}
/>
);
Expand Down
4 changes: 2 additions & 2 deletions src/components/dashboard/ChartWidget.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ export class ChartWidget extends Component {

render() {
const {
text, framework,
text, framework, noData,
hideWidgets, showWidgets, index, idMaximized, id, chartType,
caption, fields, groupBy, pollInterval, editmode
} = this.props;
Expand Down Expand Up @@ -100,7 +100,7 @@ export class ChartWidget extends Component {
{!framework ? <RawChart
{...{
index, chartType, caption, fields, groupBy,
pollInterval, height, isMaximize, id
pollInterval, height, isMaximize, id, noData
}}
responsive={true}
chartTitle={text}
Expand Down
30 changes: 17 additions & 13 deletions src/components/dashboard/DndWidget.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,8 @@ const cardSource = {
beginDrag(props) {
return {
id: props.id,
index: props.index
index: props.index,
isNew: props.isNew,
};
}
};
Expand All @@ -17,19 +18,21 @@ const cardTarget = {
const dragIndex = monitor.getItem().index;
const hoverIndex = props.index;

// Don't replace items with themselves
if (dragIndex === hoverIndex) {
if (
dragIndex === hoverIndex ||
monitor.getItem().id === props.id
) {
return;
}

// Time to actually perform the action
props.moveCard(props.entity, dragIndex, hoverIndex, true);

// Note: we're mutating the monitor item here!
// Generally it's better to avoid mutations,
// but it's good here for the sake of performance
// to avoid expensive index searches.
props.moveCard && props.moveCard(
props.entity, dragIndex, hoverIndex, monitor.getItem());
monitor.getItem().index = hoverIndex;
},
drop(props, monitor) {
if(monitor.getItem().isNew){
props.addCard(props.entity, monitor.getItem().id);
}
}
};

Expand All @@ -50,11 +53,12 @@ export class DndWidget extends Component {
constructor(props) {
super(props);
}

render() {
const {
children, connectDragSource, connectDropTarget, isDragging,
className, transparent, removeCard, entity, id, placeholder
className, transparent, removeCard, entity, id, placeholder,
index
} = this.props;

if(transparent) return <div {...{className}}>{children}</div>;
Expand All @@ -69,7 +73,7 @@ export class DndWidget extends Component {
>
{!placeholder && <i
className="meta-icon-trash draggable-icon-remove pointer"
onClick={() => removeCard(entity, id)}
onClick={() => removeCard(entity, index, id)}
/>}
{children}
</div>
Expand Down
64 changes: 47 additions & 17 deletions src/components/dashboard/DraggableWrapper.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,8 @@ import {
} from '../../actions/AppActions';

import {
addDashboardWidget
addDashboardWidget,
removeDashboardWidget
} from '../../actions/BoardActions';

export class DraggableWrapper extends Component {
Expand All @@ -38,6 +39,8 @@ export class DraggableWrapper extends Component {
this.getIndicators();
}

getType = (entity) => entity === 'cards' ? 'kpis' : 'targetIndicators';

getIndicators = () => {
getTargetIndicatorsDashboard().then(response => {
this.setState({
Expand All @@ -55,22 +58,20 @@ export class DraggableWrapper extends Component {
}

addCard = (entity, id) => {
addDashboardWidget(entity, id).then(res => {
console.log(res);
})
// this.setState(prev => update(prev, {
// [entity]: {
// $push: []
// }
// }));
const tmpItemIndex = this.state[entity].findIndex(i => i.id === id);
addDashboardWidget(this.getType(entity), id).then(res => {
this.setState(prev => update(prev, {
[entity]: {
[tmpItemIndex]: {$set: res.data}
}
}));
});
}

moveCard = (entity, dragIndex, hoverIndex, isNew) => {
if(isNew){
this.addCard(entity, dragIndex);
}else{
const draggedItem = this.state[entity][dragIndex];

moveCard = (entity, dragIndex, hoverIndex, item) => {
const draggedItem = this.state[entity][dragIndex];
if(draggedItem){
// When we are inserting added
this.setState(prev => update(prev, {
[entity]: {
$splice: [
Expand All @@ -79,10 +80,27 @@ export class DraggableWrapper extends Component {
]
}
}));
}else{
// When we are adding card
const newItem = {
id: item.id,
fetchOnDrop: true,
text: "Metric",
caption: "New",
kpi: {chartType: "Indicator"}
};
this.setState(prev => update(prev, {
[entity]: prev[entity].length === 0 ? {
$set: [newItem]
} : {
$splice: [[dragIndex, 0, newItem]]
}
}));
}
}

removeCard = (entity, index) => {
removeCard = (entity, index, id) => {
removeDashboardWidget(this.getType(entity), id);
this.setState(prev => update(prev, {
[entity]: {
$splice: [
Expand Down Expand Up @@ -112,8 +130,11 @@ export class DraggableWrapper extends Component {
if(!indicators.length && editmode) return (
<div className='indicators-wrapper'>
<DndWidget
placeholder={true}
moveCard={this.moveCard}
addCard={this.addCard}
entity={'indicators'}
placeholder={true}
transparent={!editmode}
>
<Placeholder
entity={'indicators'}
Expand All @@ -135,8 +156,10 @@ export class DraggableWrapper extends Component {
{indicators.map((indicator, id) =>
<DndWidget
key={id}
id={indicator.id}
index={id}
moveCard={this.moveCard}
addCard={this.addCard}
removeCard={this.removeCard}
entity={'indicators'}
transparent={!editmode}
Expand All @@ -149,6 +172,7 @@ export class DraggableWrapper extends Component {
pollInterval={indicator.kpi.pollIntervalSec}
chartType={'Indicator'}
kpi={false}
noData={indicator.fetchOnDrop}
{...{editmode}}
/>
</DndWidget>
Expand All @@ -165,6 +189,9 @@ export class DraggableWrapper extends Component {
<DndWidget
placeholder={true}
entity={'cards'}
moveCard={this.moveCard}
addCard={this.addCard}
transparent={!editmode}
>
<Placeholder
entity={'cards'}
Expand All @@ -181,7 +208,9 @@ export class DraggableWrapper extends Component {
<DndWidget
key={id}
index={id}
id={item.id}
moveCard={this.moveCard}
addCard={this.addCard}
removeCard={this.removeCard}
entity={'cards'}
className="draggable-widget"
Expand All @@ -202,6 +231,7 @@ export class DraggableWrapper extends Component {
showWidgets={this.showWidgets}
idMaximized={idMaximized}
text={item.caption}
noData={false}
{...{editmode}}
/>
</DndWidget>
Expand Down
1 change: 1 addition & 0 deletions src/components/dashboard/Sidenav.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ class Sidenav extends Component {
id={item.kpiId}
index={item.kpiId}
moveCard={moveCard}
isNew={true}
entity={item.widgetTypes[0] === 'KPI' ? 'cards' : 'indicators'}
transparent={false}
>
Expand Down

0 comments on commit 6be7d66

Please sign in to comment.