Newer
Older
Tom Robinson
committed
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
"use strict";
import ActionButton from "metabase/components/ActionButton.react";
import Header from "metabase/components/Header.react";
import Icon from "metabase/components/Icon.react";
import PopoverWithTrigger from "metabase/components/PopoverWithTrigger.react";
import AddToDashSelectQuestionModal from ".//AddToDashSelectQuestionModal.react";
import {
saveDashboard,
setEditingDashboard,
fetchDashboard,
setDashboardAttributes
} from '../actions';
export default class DashboardHeader extends React.Component {
async onSaveDashboard() {
await this.props.dispatch(saveDashboard(this.props.dashboard.id));
this.props.dispatch(setEditingDashboard(false));
}
onEditDashboard() {
this.props.dispatch(setEditingDashboard(true))
}
onRevertDashboard() {
this.props.dispatch(fetchDashboard(this.props.dashboard.id));
}
onDashboardAttributeChange(attribute, value) {
this.props.dispatch(setDashboardAttributes({
id: this.props.dashboard.id,
attributes: { [attribute]: value }
}));
}
getEditingButtons() {
var editingButtons = [];
if (this.props.isDirty) {
// if (this.state.recentlySaved === "updated" || (this.props.cardIsDirtyFn() && this.props.card.is_creator)) {
editingButtons.push(
<ActionButton
actionFn={() => this.onSaveDashboard()}
className='Button Button--small Button--primary text-uppercase'
normalText="Update"
activeText="Updating…"
failedText="Update failed"
successText="Updated"
/>
);
// }
// if (this.props.cardIsDirtyFn()) {
editingButtons.push(
<a className="Button Button--small text-uppercase" href="#" onClick={() => this.onRevertDashboard()}>Discard Changes</a>
);
// }
}
editingButtons.push(
<PopoverWithTrigger
ref="deleteModal"
tether={false}
triggerClasses="Button Button--small text-uppercase"
triggerElement="Delete"
>
</PopoverWithTrigger>
);
return editingButtons;
}
getHeaderButtons() {
var buttonSections = [];
var { dashboard, dashcards } = this.props;
if (dashboard && dashboard.can_write && !this.props.isEditing) {
buttonSections.push([
<a title="Edit Dashboard Layout" className="text-brand-hover" onClick={() => this.onEditDashboard()}>
<Icon name="pencil" width="16px" height="16px" />
</a>
]);
}
// buttonSections.push([
// <a title="Add Question to Dashboard" className="text-brand-hover" onClick={() => this.addQuestion()}>
// <Icon name="add" width="16px" height="16px" />
// </a>
// ]);
buttonSections.push([
<PopoverWithTrigger
ref="addQuestionModal"
tether={false}
triggerElement={<Icon name="add" width="16px" height="16px" />}
>
<AddToDashSelectQuestionModal
dispatch={this.props.dispatch}
dashboard={dashboard}
cards={this.props.cards}
closeFn={() => this.refs.addQuestionModal.toggleModal()}
/>
</PopoverWithTrigger>
])
return buttonSections;
}
render() {
var { dashboard, dashcards } = this.props;
return (
<Header
objectType="dashboard"
item={dashboard}
isEditing={this.props.isEditing}
isEditingInfo={this.props.isEditing}
headerButtons={this.getHeaderButtons()}
editingTitle="You are editing a dashboard"
editingButtons={this.getEditingButtons()}
setItemAttributeFn={this.onDashboardAttributeChange.bind(this)}
>
</Header>
);
}
}
DashboardHeader.propTypes = {
dispatch: React.PropTypes.func.isRequired,
isEditing: React.PropTypes.bool.isRequired,
dashboard: React.PropTypes.object.isRequired
};