Skip to content

Commit

Permalink
Redactor list GET, POST, DELETE
Browse files Browse the repository at this point in the history
  • Loading branch information
@jgruica
jgruica committed May 22, 2020
1 parent 11f1e98 commit c28388f
Show file tree
Hide file tree
Showing 4 changed files with 109 additions and 20 deletions.
9 changes: 5 additions & 4 deletions kotsadm/web/src/components/modals/DeleteRedactorModal.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import Modal from "react-modal";
import dayjs from "dayjs";

export default function DeleteRedactorModal(props) {
const { deleteRedactorModal, toggleConfirmDeleteModal, redactorToDelete, handleDeleteRedactor, deleteErr, deleteErrorMsg } = props;
const { deleteRedactorModal, toggleConfirmDeleteModal, redactorToDelete, handleDeleteRedactor, deletingRedactor, deleteErrMsg } = props;

return (
<Modal
Expand All @@ -19,8 +19,8 @@ export default function DeleteRedactorModal(props) {
<p className="u-fontSize--largest u-fontWeight--bold u-color--tuna u-lineHeight--normal u-marginBottom--more">
Delete redactor
</p>
{deleteErr ?
<p className="u-color--chestnut u-fontSize--small u-fontWeight--medium u-lineHeight--normal">{deleteErrorMsg}</p>
{deleteErrMsg ?
<p className="u-color--chestnut u-fontSize--small u-fontWeight--medium u-lineHeight--normal">{deleteErrMsg}</p>
: null}
<p className="u-fontSize--normal u-fontWeight--normal u-color--dustyGray u-lineHeight--normal">
Are you sure you want to delete a redactor? This action cannot be reversed.
Expand All @@ -40,9 +40,10 @@ export default function DeleteRedactorModal(props) {
</button>
<button
className="btn primary red"
disabled={deletingRedactor}
onClick={() => { handleDeleteRedactor(redactorToDelete) }}
>
Delete redactor
{deletingRedactor ? "Deleting" : "Delete redactor"}
</button>
</div>
</div>
Expand Down
81 changes: 72 additions & 9 deletions kotsadm/web/src/components/redactors/EditRedactor.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,10 @@ class EditRedactor extends Component {
redactorName: "",
creatingRedactor: false,
createErrMsg: "",
createConfirm: false,
editingRedactor: false,
editingErrMsg: "",
editConfirm: false,
isLoadingRedactor: false,
redactorErrMsg: ""
};
Expand Down Expand Up @@ -63,6 +67,60 @@ class EditRedactor extends Component {
})
}

editRedactor = (slug, enabled, yaml) => {
this.setState({ editingRedactor: true, editingErrMsg: "" });

const payload = {
slug: slug,
enabled: enabled,
redactor: yaml
}

fetch(`${window.env.API_ENDPOINT}/redact/spec/${slug}`, {
method: "POST",
headers: {
"Authorization": Utilities.getToken(),
"Content-Type": "application/json",
},
body: JSON.stringify(payload)
})
.then(async (res) => {
const editResponse = await res.json();
if (!res.ok) {
this.setState({
editingRedactor: false,
editingErrMsg: editResponse.error
})
return;
}

if (editResponse.success) {
this.setState({
redactorYaml: editResponse.redactor,
redactorName: editResponse.redactorMetadata.name,
redactorEnabled: editResponse.redactorMetadata.enabled,
editingRedactor: false,
editConfirm: true,
createErrMsg: ""
});
setTimeout(() => {
this.setState({ editConfirm: false })
}, 3000);
} else {
this.setState({
editingRedactor: false,
editingErrMsg: editResponse.error
})
}
})
.catch((err) => {
this.setState({
editingRedactor: false,
editingErrMsg: err.message ? err.message : "Something went wrong, please try again!"
});
});
}

createRedactor = (enabled, newRedactor, yaml) => {
this.setState({ creatingRedactor: true, createErrMsg: "" });

Expand Down Expand Up @@ -124,12 +182,10 @@ class EditRedactor extends Component {
}

componentDidMount() {
//TODO get redactor for id
if (this.props.match.params.slug) {
this.getRedactor(this.props.match.params.slug);
// this.setState({ redactorEnabled: redactor.status === "enabled" ? true : false, redactorYaml: redactor.yaml, redactorName: redactor.name });
} else {
const defaultYaml=`name: ""
const defaultYaml = `name: ""
files: []
values: []
regex: []
Expand All @@ -145,15 +201,15 @@ yaml: []`

onSaveRedactor = () => {
if (this.props.match.params.slug) {
console.log("a")
this.editRedactor(this.props.match.params.slug, this.state.redactorEnabled, this.state.redactorYaml);
} else {
this.createRedactor(this.state.redactorEnabled, true, this.state.redactorYaml);
}
}


render() {
const { isLoadingRedactor } = this.state;
const { isLoadingRedactor, createConfirm, editConfirm, creatingRedactor, editingRedactor } = this.state;

if (isLoadingRedactor) {
return (
Expand All @@ -162,6 +218,7 @@ yaml: []`
</div>
)
}

return (
<div className="container flex-column flex1 u-overflow--auto u-paddingTop--30 u-paddingBottom--20 justifyContent--center alignItems--center">
<Helmet>
Expand All @@ -173,9 +230,9 @@ yaml: []`
Back to redactors
</Link>
<div className="flex flex-auto alignItems--flexStart justifyContent--spaceBetween u-marginTop--10">
<div className="flex flex1 alignItems--center">
<p className="u-fontWeight--bold u-color--tuna u-fontSize--jumbo u-lineHeight--normal u-marginRight--10"> {this.state.redactorName} </p>
</div>
<div className="flex flex1 alignItems--center">
<p className="u-fontWeight--bold u-color--tuna u-fontSize--jumbo u-lineHeight--normal u-marginRight--10"> {this.state.redactorName} </p>
</div>
<div className="flex justifyContent--flexEnd">
<div className="toggle flex flex1">
<div className="flex flex1">
Expand Down Expand Up @@ -224,7 +281,13 @@ yaml: []`
<Link to="/redactors" className="btn secondary"> Cancel </Link>
</div>
<div className="flex">
<button type="button" className="btn primary blue" onClick={this.onSaveRedactor}> Save redactor </button>
{createConfirm || editConfirm &&
<div className="u-marginRight--10 flex alignItems--center">
<span className="icon checkmark-icon" />
<span className="u-marginLeft--5 u-fontSize--small u-fontWeight--medium u-color--chateauGreen">{createConfirm ? "Redactor created" : "Redactor updated"}</span>
</div>
}
<button type="button" className="btn primary blue" onClick={this.onSaveRedactor} disabled={creatingRedactor || editingRedactor}>{(creatingRedactor || editingRedactor) ? "Saving" : "Save redactor"} </button>
</div>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion kotsadm/web/src/components/redactors/RedactorRow.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ class RedactorRow extends React.Component {
<div className="flex flex1 alignItems--center u-marginBottom--small">
<span className={`status-indicator u-marginBottom--10 ${this.state.redactorEnabled ? "enabled" : "disabled"}`} />
<p className="u-fontSize--large u-lineHeight--normal u-fontWeight--bold u-color--tuna u-marginRight--10">{redactor?.name}</p>
<span className="u-fontSize--small u-color--dustyGray u-fontWeight--medium u-lineHeight--normal u-marginTop--5"> Last updated on {dayjs(redactor?.updatedOn).format("MM/DD/YY @ hh:mm a")} </span>
<span className="u-fontSize--small u-color--dustyGray u-fontWeight--medium u-lineHeight--normal u-marginTop--5"> Last updated on {dayjs(redactor?.updatedAt).format("MM/DD/YY @ hh:mm a")} </span>
</div>
<p className="u-fontSize--small u-fontWeight--medium u-lineHeight--normal u-color--nevada u-marginLeft--10"> {redactor?.description} </p>
</div>
Expand Down
37 changes: 31 additions & 6 deletions kotsadm/web/src/components/redactors/Redactors.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,9 @@ class Redactors extends Component {
deleteRedactorModal: false,
redactorToDelete: {},
isLoadingRedactors: false,
redactorsErrMsg: ""
redactorsErrMsg: "",
deletingRedactor: false,
deleteErrMsg: ""
};

getRedactors = () => {
Expand Down Expand Up @@ -80,7 +82,7 @@ class Redactors extends Component {
if (value === "createdAt") {
this.setState({ sortedRedactors: this.state.redactors.sort((a, b) => dayjs(b.createdAt) - dayjs(a.createdAt)) });
} else {
this.setState({ sortedRedactors: this.state.redactors.sort((a, b) => dayjs(b.updatedOn) - dayjs(a.updatedOn)) });
this.setState({ sortedRedactors: this.state.redactors.sort((a, b) => dayjs(b.updatedAt) - dayjs(a.updatedAt)) });
}
}

Expand All @@ -93,7 +95,30 @@ class Redactors extends Component {
};

handleDeleteRedactor = redactor => {
console.log("deleting", redactor)
this.setState({ deletingRedactor: true, deleteErrMsg: "" });

fetch(`${window.env.API_ENDPOINT}/redact/spec/${redactor.slug}`, {
method: "DELETE",
headers: {
"Authorization": Utilities.getToken(),
"Content-Type": "application/json"
}
})
.then(() => {
this.setState({
deletingRedactor: false,
deleteErrMsg: "",
deleteRedactorModal: false
}, () => {
this.getRedactors();
});
})
.catch((err) => {
this.setState({
deletingRedactor: false,
deleteErrMsg: err.message ? err.message : "Something went wrong, please try again!"
});
});
}


Expand All @@ -114,7 +139,7 @@ class Redactors extends Component {
label: "Sort by: Created At"
},
{
value: "updatedOn",
value: "updatedAt",
label: "Sort by: Updated on"
}
]
Expand Down Expand Up @@ -160,8 +185,8 @@ class Redactors extends Component {
toggleConfirmDeleteModal={this.toggleConfirmDeleteModal}
handleDeleteRedactor={this.handleDeleteRedactor}
redactorToDelete={this.state.redactorToDelete}
deleteErr={this.state.deleteErr}
deleteErrorMsg={this.state.deleteErrorMsg}
deletingRedactor={this.state.deletingRedactor}
deleteErrMsg={this.state.deleteErrMsg}
/>
}
</div>
Expand Down

0 comments on commit c28388f

Please sign in to comment.