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.

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

[show-all-data] Updated js logic to include picklist feature #419

Draft
wants to merge 5 commits into
base: releaseCandidate
Choose a base branch
from
Draft
Changes from 1 commit
Commits
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
Next Next commit
Updated js logic to include picklist
Updated css to use input id instead of textarea
waliasandeep committed May 7, 2024
commit 67f53f5ed9d4773687a8e9ef018d093478dbf289
2 changes: 1 addition & 1 deletion addon/inspect.css
Original file line number Diff line number Diff line change
@@ -217,7 +217,7 @@ thead{
/* To handle long words. This is not actually 200px but scales with the table. Table layout magic. */
}

.field-column textarea {
.field-column #input-field {
width: calc(100% - 20px);
resize: vertical;
}
33 changes: 28 additions & 5 deletions addon/inspect.js
Original file line number Diff line number Diff line change
@@ -744,6 +744,14 @@ class FieldRow extends TableRow {
isEditing() {
return typeof this.dataEditValue == "string";
}

isPicklist(){
if(this.fieldDescribe.picklistValues.length > 0){
return true;
}
return false;
}

canEdit() {
switch (this.rowList.model.editMode) {
case "update":
@@ -1451,7 +1459,7 @@ class FieldValueCell extends React.Component {
let {row} = this.props;
if (row.tryEdit()) {
let td = e.currentTarget;
row.rowList.model.didUpdate(() => td.querySelector("textarea").focus());
row.rowList.model.didUpdate(() => td.querySelector("#input-field").focus());
Copy link
Owner

Choose a reason for hiding this comment

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

Instead of using querySelector, could you use refs ?

Suggested change
row.rowList.model.didUpdate(() => td.querySelector("#input-field").focus());
row.rowList.model.didUpdate(() => this.refs.inputField.focus());

You can find other examples in the code

}
}
onDataEditValueInput(e) {
@@ -1498,10 +1506,25 @@ class FieldValueCell extends React.Component {
render() {
let {row, col} = this.props;
if (row.isEditing()) {
return h("td", {className: col.className},
h("textarea", {value: row.dataEditValue, onChange: this.onDataEditValueInput, onKeyDown: this.onKeyDown}),
h("a", {href: "about:blank", onClick: this.onCancelEdit, className: "undo-button"}, "\u21B6")
);
if (row.isPicklist()){
return h("td", { className: col.className },
h("select", {id: "input-field", className: "", value: row.dataEditValue, onChange: this.onDataEditValueInput},
h("option", { value: "" }, "Select an option"),
row.fieldDescribe.picklistValues
.filter(option => option.active)
.map(option =>
h("option", { value: option.value, key: option.value }, option.label)
)
),
h("a", { href: "about:blank", onClick: this.onCancelEdit, className: "undo-button" }, "\u21B6")
);
}
else {
return h("td", {className: col.className},
h("textarea", {id: "input-field", value: row.dataEditValue, onChange: this.onDataEditValueInput, onKeyDown: this.onKeyDown}),
h("a", {href: "about:blank", onClick: this.onCancelEdit, className: "undo-button"}, "\u21B6")
);
}
} else if (row.isId()) {
return h("td", {className: col.className, onDoubleClick: this.onTryEdit},
h("div", {className: "pop-menu-container"},