Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

added cancel button for new row #1690

Merged
merged 5 commits into from
May 13, 2021
Merged

added cancel button for new row #1690

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
36f4ba6
added cancel button for new row
sadakchap Apr 28, 2021
9b652ba
removed extra line on add new row
sadakchap Apr 29, 2021
69e507a
added "add" button for new row
sadakchap May 3, 2021
99d5801
changed order of button for new row
sadakchap May 5, 2021
80bfbc4
Merge 'master' of parse-community/parse-dashboard into cancel-btn-new…
sadakchap May 13, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
115 changes: 70 additions & 45 deletions src/dashboard/Data/Browser/Browser.react.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,6 +122,7 @@ class Browser extends DashboardView {
this.handleShowAcl = this.handleShowAcl.bind(this);
this.onDialogToggle = this.onDialogToggle.bind(this);
this.abortAddRow = this.abortAddRow.bind(this);
this.saveNewRow = this.saveNewRow.bind(this);
}

componentWillMount() {
Expand Down Expand Up @@ -303,6 +304,66 @@ class Browser extends DashboardView {
}
}

saveNewRow(){
const obj = this.state.newObject;
if (!obj) {
return;
}

obj.save(null, { useMasterKey: true }).then(
objectSaved => {
let msg = objectSaved.className + ' with id \'' + objectSaved.id + '\' created';
this.showNote(msg, false);

const state = { data: this.state.data };
const relation = this.state.relation;
if (relation) {
const parent = relation.parent;
const parentRelation = parent.relation(relation.key);
parentRelation.add(obj);
const targetClassName = relation.targetClassName;
parent.save(null, { useMasterKey: true }).then(
() => {
this.setState({
newObject: null,
data: [obj, ...this.state.data],
relationCount: this.state.relationCount + 1,
counts: {
...this.state.counts,
[targetClassName]: this.state.counts[targetClassName] + 1
}
});
},
error => {
let msg = typeof error === "string" ? error : error.message;
if (msg) {
msg = msg[0].toUpperCase() + msg.substr(1);
}
obj.set(attr, prev);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey @sadakchap I've just run into this line while working on #2003 . I noticed that attr and prev are not defined so it's giving me an error.

image

I'm hesitant to change this line to obj.revert() but I'd like to check first with you before proceeding.

Copy link
Member Author

@sadakchap sadakchap Jan 17, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey @RaschidJFR, I think we can safely remove this line.

Earlier we use to save new row(making an api call) every time a user was updating any cell(Using this). In case of error, this line would revert current selected cell value. But, now I think we don't need it as this line, as this function gets call when user hits save btn not everytime user is making change in any cell.

this.setState({ data: this.state.data });
this.showNote(msg, true);
}
);
} else {
state.newObject = null;
if (this.props.params.className === obj.className) {
this.state.data.unshift(obj);
}
this.state.counts[obj.className] += 1;
}

this.setState(state);
},
error => {
let msg = typeof error === "string" ? error : error.message;
if (msg) {
msg = msg[0].toUpperCase() + msg.substr(1);
}
this.showNote(msg, true);
}
);
}

addRowWithModal() {
this.addRow();
this.selectRow(undefined, true);
Expand Down Expand Up @@ -573,60 +634,22 @@ class Browser extends DashboardView {
} else {
obj.set(attr, value);
}
if(isNewObject){
this.setState({
isNewObject: obj
});
return;
}
obj.save(null, { useMasterKey: true }).then((objectSaved) => {
const createdOrUpdated = isNewObject ? 'created' : 'updated';
let msg = objectSaved.className + ' with id \'' + objectSaved.id + '\' ' + createdOrUpdated;
let msg = objectSaved.className + ' with id \'' + objectSaved.id + '\' updated';
this.showNote(msg, false);

const state = { data: this.state.data };

if (isNewObject) {
const relation = this.state.relation;
if (relation) {
const parent = relation.parent;
const parentRelation = parent.relation(relation.key);
parentRelation.add(obj);
const targetClassName = relation.targetClassName;
parent.save(null, { useMasterKey: true }).then(() => {
this.setState({
newObject: null,
data: [
obj,
...this.state.data,
],
relationCount: this.state.relationCount + 1,
counts: {
...this.state.counts,
[targetClassName]: this.state.counts[targetClassName] + 1,
},
});
}, (error) => {
let msg = typeof error === 'string' ? error : error.message;
if (msg) {
msg = msg[0].toUpperCase() + msg.substr(1);
}
obj.set(attr, prev);
this.setState({ data: this.state.data });
this.showNote(msg, true);
});
} else {
state.newObject = null;
if (this.props.params.className === obj.className) {
this.state.data.unshift(obj);
}
this.state.counts[obj.className] += 1;
}
}
this.setState(state);
}, (error) => {
let msg = typeof error === 'string' ? error : error.message;
if (msg) {
msg = msg[0].toUpperCase() + msg.substr(1);
}
if (!isNewObject) {
obj.set(attr, prev);
this.setState({ data: this.state.data });
}

this.showNote(msg, true);
});
Expand Down Expand Up @@ -1048,6 +1071,7 @@ class Browser extends DashboardView {
onCloneSelectedRows={this.showCloneSelectedRowsDialog}
onEditSelectedRow={this.showEditRowDialog}
onEditPermissions={this.onDialogToggle}
onSaveNewRow={this.saveNewRow}
onAbortAddRow={this.abortAddRow}

columns={columns}
Expand All @@ -1067,6 +1091,7 @@ class Browser extends DashboardView {
setRelation={this.setRelation}
onAddColumn={this.showAddColumn}
onAddRow={this.addRow}
onAbortAddRow={this.abortAddRow}
onAddRowWithModal={this.addRowWithModal}
onAddClass={this.showCreateClass}
showNote={this.showNote} />
Expand Down
21 changes: 19 additions & 2 deletions src/dashboard/Data/Browser/BrowserTable.react.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,7 @@ export default class BrowserTable extends React.Component {
if (this.props.newObject && this.state.offset <= 0) {
const currentCol = this.props.current && this.props.current.row === -1 ? this.props.current.col : undefined;
newRow = (
<div style={{ marginBottom: 30, borderBottom: '1px solid #169CEE' }}>
<div style={{ borderBottom: '1px solid #169CEE' }}>
<BrowserRow
key={-1}
className={this.props.className}
Expand All @@ -140,7 +140,24 @@ export default class BrowserTable extends React.Component {
setRelation={this.props.setRelation}
setCopyableValue={this.props.setCopyableValue}
setContextMenu={this.props.setContextMenu}
onEditSelectedRow={this.props.onEditSelectedRow} />
onEditSelectedRow={this.props.onEditSelectedRow}
/>
<Button
value="Add"
width="55px"
primary={true}
onClick={() => {
this.props.onSaveNewRow();
this.props.setEditing(false);
}}
additionalStyles={{ fontSize: '12px', height: '20px', lineHeight: '20px', margin: '5px', padding: '0'}}
/>
<Button
value="Cancel"
width="55px"
onClick={this.props.onAbortAddRow}
additionalStyles={{ fontSize: '12px', height: '20px', lineHeight: '20px', margin: '5px', padding: '0'}}
/>
</div>
);
}
Expand Down